Innovative (and Experimental) CSS Examples and Techniques

Oct 22 2008 by Jacob Gube | 21 Comments

CSS doesn’t always have to be serious business. In this article, you’ll see 25 fun, novel, and experimental CSS techniques and demonstrations.

Note: some of the techniques and examples discussed here may not validate, cannot be rendered correctly by some browsers, and may not conform with standards-based design and development. Many of the techniques shown here are for exploration only.

Transparent CSS Menu Drop-down

Transparent CSS Menu Drop-down screen shot.

This demonstration showcases how to create an advanced CSS drop-down menu with transparency support (needs JavaScript for IE6 PNG transparency support).

Return of the image maps

Return of the image maps screen shot.

In this example, you’ll see a nifty way to create CSS-based image maps with bubble tooltips.

CSS 3D puzzle

CSS 3D puzzle screen shot.

This 3D puzzle was created using only CSS (this must have taken a LONG time to create).

CSS scrolling image map

CSS scrolling image map - screen shot.

This example involves a panoramic picture with "hot spots". Clicking on the hot spots displays a description and an zoomed-in image of the area on another panel.

CSS Decorative Gallery

CSS Decorative Gallery screen shot.Demo: CSS Decorative Gallery

Web Designer Wall shows us how to create fancier image galleries by using background images on images.

Playing Cards with CSS

Playing Cards with CSS - demo - screen shot.Demo: Playing Cards

This example uses special HTML characters to display the suits of the cards and then CSS to style and position them.

Homer CSS

Homer CSS - screen shot.

In this example, Román Cortés recreates Homer Simpson with HTML characters/text and CSS. Check out the animated adaptation by Ned Batchelder.

CSS House

CSS House - screen shot.Demo: CSS House

Design Detector created this house by using Div’s and styling them with CSS.

“Secret Message” with CSS Positioning and Transparency

Secret Message screen shot.Demo: Secret Message

This example by Chris Coyier of CSS-tricks reveals a "Secret Message" as you scroll down the web page.

How to create light-weight drop shadows

light-weight drop shadows screen shot.Demo: light-weight drop shadows

This example uses PNG’s (and transparencies) to apply drop-shadows to Div’s. This won’t work in IE 6 without JavaScript.

Multi-position shadow boxing

Multi-position shadow boxing screen shot.

Here is another method for applying drop shadows to page elements (such as images).

Complexspiral

Complexspiral screen shot.

In this demonstration, CSS guru Eric Meyer shows some transparency/opacity capabilities of CSS.

DVD Recorder Remote

DVD Recorder Remote screen shot.

Design Detector creates a remove control using HTML elements and CSS.

Drawing the line

Drawing the line screen shot.

Stu Nicholls of CSSplay draws a pencil using CSS. Hovering over the pencil will draw a horizontal line.

CSS Text Shadows

CSS Text Shadows screen shot.

Here is a pure CSS-based solution to applying drop-shadows to text. It involves duplicate text layed on top of one another, which isn’t good practice.

CSS Flashy Links

CSS Flashy Links screen shot.

In this navigation bar example, hovering over a menu item causes the arrow on the left to zoom across the menu item.

Map Pop

Map Pop screen shot.

This example showcases CSS image maps through a map. Hovering over hot spots reveals more information on the right.

Pure CSS Popups

Pure CSS Popups screen shot.

This technique involves hidden Div’s that are revealed when you hover over the trigger link.

CSS Sticky Footer

CSS Sticky Footer screen shot.

Here’s a footer that is fixed at the bottom of the web page, regardless of height.

Scalable Star

Scalable Star screen shot.

Using CSS, a simple shape (star) is drawn. It scales when the user resizes the font size using browser controls (at least for modern browsers it does).

CSS: Menu Descriptions

CSS: Menu Descriptions screen shot.

In this CSS-based menu, hovering over a menu item reveals more information about the menu item.

CSS Gradients Demo

CSS Gradients Demo screen shot.Demo: CSS Gradients Demo

This demonstration uses CSS-styled empty Div’s (not a good practice) and background-colors to mimic the effect of gradients.

Scaled Background Image

Scaled Background Image screen shot.Demo: Scaled Background Image

Here is a technique for scaling background images (resize your browser to see how it works).

CSS Vertical Bar Graphs

CSS Vertical Bar Graphs screen shot.

This example styles list items to create an accessible bar graph.

CSS Gradient Text Effect

CSS Gradient Text Effect screen shot.Demo: CSS Gradient Text Effect

This technique adds flare to text by super-imposing PNG images onto them. It requires alpha transparency so it won’t work in IE 6 without JavaScript.

Related Articles

21 Comments

Danny Tatom

October 23rd, 2008

Hah, this is some great stuff, especially Homer.

peter

October 23rd, 2008

maybe you’ll find interesting this world map, positioned via css:
http://my-track.net/ascii/

insic

October 23rd, 2008

this post is brilliant. thanks for the round up.

mnvamsoi

October 23rd, 2008

Transparent CSS Menu Drop-down this looks cool..

Russell Heimlich

October 23rd, 2008

I saw the pure CSS cards demo a while back and it made me think… “What if you used an image instead and created a semantic playing card library using background-position”.

This would be a piece of cake if all browsers supported background-position-x and background-position-y (Only IE does at the moment) but unfortunately it’s a bit messier. More details on my blog… http://www.russellheimlich.com/blog/ie-gets-a-css-rule-right/

Jacob Gube

October 23rd, 2008

@Russell Heimlich: Great discussion of background-position attribute. I see your point, “card [mySuit] [myValue]” looks so much nicer and I can see a lot more flexibility with that when you use JS or server-side scripting to generate the class names dynamically. IE did something you actually intended to do?! That’s revolutionary! :)

ondho

October 23rd, 2008

Great article, good solution with “A scrolling image map” and also graphs.
Thanks.

Shaun

October 23rd, 2008

Very cool. It’s like CSS R&D.
A number of these effects though can be created by just drawing them in Photoshop and letting psd2cssonline.com write the CSS for you.

Michael DeSouza

October 23rd, 2008

Check out aircraftlogix.com. It has some pretty nice examples of CSS parallax on each page!

800HighTech

October 24th, 2008

Cool list, will be checking out some of those…

triss

October 24th, 2008

thank you. fabulous collection of cool css

subske

October 24th, 2008

cheers.. great collection of CSS examples. The Transparent CSS Menu Drop-down is especially cool..

IhateDesign

October 24th, 2008

the “css 3d puzzle” is amazing, i seeit in other blog, but you have more examples, thanks and cheers!

Scott

October 24th, 2008

The text shadow one’s got some issues.

http://pxly.org/Zy

Dainis Graveris

October 25th, 2008

man, that’s great I had no idea CSS is capable with something like that too.

Lobs

October 25th, 2008

Great list! I will refer to this page in the future to add css ideas to my pages.

Bored

November 3rd, 2008

these are really awesome i like the playing cards and homer one really awesome!

nurv7

January 28th, 2009

very nice css tips.. Thanks

Animas

June 8th, 2010

these are really awesome i like the playing cards and homer one really awesome!

Qodes

June 8th, 2010

Great list! I will refer to this page in the future to add css ideas to my pages.

bhobia

January 12th, 2011

great ideas for new projects in css. Thanks

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences. Tap to learn more

Mobify