CSS3 Demos

• Home
• Backgrounds
• Rounded Corners
• Drop Shadows
• Transparency
• Columns
• Generated Content
• Custom Fonts
• Media Queries
• CSS3 Selectors

Drop shadows

We've been wanting to put dropshadows on all manner of content for years now. As always, enterprising souls have found ingenious solutions, almost always involving extra containers or duplicated text, offset to take the place of the required shadow.

Unfortunately, as is so often the case, these solutions come with issues attached. They're not very maintainable; perforce they break the separation between style and substance, and the extra content can cause confusion to users of screen-reading software.

Over the horizon rides CSS3 to the rescue. New properties allow us to easily add shadows to both text and block-level containers - we can adjust size, colour and the rate of fade of our shadows to produce any number of elegant (and not so elegant) results.

Drop shadows on text

The text-shadow declaration isn't complex. Shown below it sets, in order: the shadow colour; the horizontal displacement of the shadow (negative values are off-left, positive off-right); the vertical displacement (negative is above the text, positive below); and finally the distance over which the shadow fades away.

Note that here I'm using the CSS3 RGBa notation for the shadow colour, which allows for a graceful opacity setting.

Drop shadows on block-level containers

Similarly, CSS3 provides for shadows on any block-level element. The declaration works almost identically to text-shadow above. There's also inset shadows, allowing for an embossed appearance; just include the 'inset' property, as below. Note that inset shadows aren't supported by Safari at time of writing, although they do work in Chrome, oddly.