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.
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.
