I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. So I decided to create one.
I learned this technique from Dan Cederholm’s Handcrafted CSS book, so if you’re able I’d recommend just going out and grabbing that, as he explains it much more elegantly and thoroughly than I ever could.
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
1pxindicates how much the shadow should be offset horizontally; in this case we’re telling the shadow to appear one pixel to the right. Using-1pxwould move the shadow one pixel to the left. - The second
1pxindicates 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-1pxwould move the shadow one pixel above the text. - The third
1pxvalue tells the shadow how much it should blur. Using0for 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.
RSS
Dribbble
Twitter
Flickr
Yay, I love this!! Thanks for sharing Meagan!
Maddie