Text with a drop-shadow
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.
By the way, it's possible to set several text drop-shadows on the same content; simply comma-separate each text-shadow declaration. This can often be used to give a more realistic look to large-sized fonts. The main site heading at the top of the page uses this technique.
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 box-shadow declaration works almost identically to text-shadow above. There's also inset shadows, allowing for an embossed appearance; just include the inset keyword, as below:
Container with a drop-shadow
Container with an inset drop-shadow