HTML5 and CSS3 Advent 2011

Drop that shadow!

Nothing gives more depth to a design than shadows (or at least the illusion of one). That's why we sought some ways to find ways to exploit them. The best news in all of this is that dropshadows (box-shadow) are pretty widely supported (IE9+, Firefox, Chrome, Safari, Opera), even without vendor-prefixes.

From our tree
A classic polaroid
A leaf
A leaf
Fancy icon tiles
Go all out crazy (hover!)

How does it work?

Setting a box-shadow is pretty straight-forward: box-shadow: (inset) left-offset top-offset (blur-radius) (spread) color;.

Keyword to define wether the shadow should be inside or outside the box
The amount to offeset the shadow horizonatally (from top left)
The amount to offeset the shadow vertically (from top left)
The amount of blur to apply (0 means no blur)
The amount the shadow should grow
The color of the shadow

The best thing is that you can define multiple shadows on the same element to create all kinds of beautiful effects. In the example above we combine the shadows with :before and :after pseudo-elements to be able to give the shadow a size independent of it's container size.

Show us the source!

Feel free to look around the different source files we used for this example.

Check out our all new HTML & CSS Advent 2012