Shadows and CSS3

Text-shadow

Applying text-shadow to elements is easy, and coupled with RGBA it works beautifully. Since both text-shadow and RGBA are supported by Safari, Firefox, Konqueror, and Opera, why not start playing with them now?

Text shadow is sexy.

If you’re using one of the aforementioned browsers, you should see a nice drop shadow on the text above. (If you’re not — why?) This drop shadow is created using the following code:
text-shadow: 1px 1px 1px rgba(0,0,0,.4);

Breaking it down

• The first 1px indicates how much the shadow should be offset horizontally; in this case we’re telling the shadow to appear one pixel to the right. Using -1px would move the shadow one pixel to the left.
• The second 1px indicates how much the shadow should be offset vertically; in this case we’re telling the shadow to appear one pixel lower than the text. Using -1px would move the shadow one pixel above the text.
• The third 1px value tells the shadow how much it should blur. Using 0 for this value would create a solid drop shadow, which has a blocky, high-contrast effect. Using only this value (ex. text-shadow: 0 0 1px rgba(0,0,0,.4);) would create an outer glow.
• rgba(0,0,0,.4); gives the shadow its color. In this case we’re using (0,0,0), which is the RGB value for black, and we’re giving that black an opacity of 40%, or .4.

Why use RGBA for the shadow color?

Using RGBA instead of a solid color for the shadow is great because it allows some of the page’s background color to bleed through. This means that the shadow will blend nicely with the page’s existing color scheme, and if you ever change up the site’s background color your shadows will change too. If you’re unclear about how rgba works, check out Drew McLellan’s 24ways article.
So now you should be able to implement text-shadow and RGBA in your designs. This technique is very powerful, as it can be used to make text jump off the page:

Text shadow is sexy.

or appear to be set into the page:

Text shadow is sexy.

Box shadow

Once you know how to use text-shadow + RGBA to achieve drop shadows, you’re well on your way to mastering box-shadow. The syntax is exactly the same, so box-shadow: 0 1px 10px rgba(0,0,0,.1); will create a black shadow at 10% that’s centered horizontally, one pixel down, with a ten pixel blur.

Misty the one-toothed cat thinks box shadow is awesome.

Box shadow is supported in Safari and Firefox 3.5, but like border-radius it requires the use of vendor-specific properties. So assuming we wanted to add a drop shadow to an image in Safari and Firefox, here’s how we’d code it:
-webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 10px rgba(0,0,0,.1);
box-shadow: 0 1px 10px rgba(0,0,0,.1);
You’ll notice I included the standard box-shadow property; this is in place for future browsers who may one day support this property.
There you have it! Once again your shadow blends nicely with the background because you’re using RGBA, and creates a kick-ass 3-D effect with minimal markup.
Box-shadow and text-shadow may not be for every project, but since they’re so easy to implement and browser support for these features is growing, why not try them out?
I can hear some of you naysayers yelling about Internet Explorer, but really is it so bad if some users get to see shadows and some don’t? The design won’t be broken for IE people, they’re just missing out on a few visual treats that other users will see.
If you’re not sold on the argument that we should reward users who choose modern browsers, check out Dan’s Handcrafted CSS book, Aaron Gustafson’s A List Apart article and Andy Clarke’s multiple well written articles on the subject.

This entry was posted on Monday, December 14th, 2009 at 4:42 pm and is filed under CSS3, Tips, web design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.