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
In this example, Román Cortés recreates Homer Simpson with HTML characters/text and CSS. Check out the animated adaptation by Ned Batchelder.
Design Detector created this house by using Div’s and styling them with CSS.
How to create light-weight drop shadows
DVD Recorder Remote
Design Detector creates a remove control using HTML elements and CSS.
CSS Text Shadows
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
In this navigation bar example, hovering over a menu item causes the arrow on the left to zoom across the menu item.
This example showcases CSS image maps through a map. Hovering over hot spots reveals more information on the right.
CSS Sticky Footer
Here’s a footer that is fixed at the bottom of the web page, regardless of height.
CSS: Menu Descriptions
In this CSS-based menu, hovering over a menu item reveals more information about the menu item.
CSS Gradients Demo
This demonstration uses CSS-styled empty Div’s (not a good practice) and background-colors to mimic the effect of gradients.