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.

Decoration
From our tree
A classic polaroid
A leaf
A leaf
Fancy icon tiles
Twinkle
Pulse!
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;.

inset
Keyword to define wether the shadow should be inside or outside the box
left-offset
The amount to offeset the shadow horizonatally (from top left)
top-offset
The amount to offeset the shadow vertically (from top left)
blur-radius
The amount of blur to apply (0 means no blur)
spread
The amount the shadow should grow
color
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