Reading Time: 3 minutes

Any of my web development buddies have learned that I’m a huge fan of the em. Huge fan. We’d be Facebook friends, we’d go on vacation together, yadda yadda yadda. When you look at my online resume you’ll be hard-up to find too many px written into my stylesheet. In fact, almost every property with a px is a shadow of some kind. But that won’t be the case too much longer, because I’ve got a nifty trick for creating kind-of global shadows by using the em instead of pixels in your shadows.

Shadows can be em-y

The typical way of writing text-shadow or box-shadow would be with pixels. That’s how the CSS3 demos showed it to us and it’s what corresponds the easiest with any Fireworks or Photoshop mockups. So we’re accustomed to seeing this:


h1, h2, h3, h4 {
text-shadow: 1px 2px 2px rgba(90, 90, 90, .6);
}


But what the liberal left-wing CSS3 media hasn’t told you, though, is that you can also write shadows with em, instead. All it requires is a minute with your calculator:


h1, h2, h3, h4 {
text-shadow: .025em .125em .125em rgba(90, 90, 90, .6);
}


Now, the astute observer and/or math-whiz has noticed that .025em corresponds to .04 pixels in a 16px font-size. If you wanted a value of 1px, you’d actually use .0625em. So in a standard, 16px font, there’s no difference between .025em and .0625em. However, in larger font-sizes, like the one below, there is a difference between the two. I’ll let you play and see for yourself.
 

em makes shadows relative

So far, you’re unimpressed. It’s not a big deal that you can create shadows with em rather than px. The em-based shadow begins to matter, though, when you start dealing with different text-sizes. Now, because you’re using em, you have text-shadows that are proportionate to their font-size.

 

 

What happens in em-based text-shadows

1. The shadow offset is relative to the font size;smaller fonts have less of an offset than larger ones
2. The blur is also relative to the font size; larger fonts have more blur
3. Items farther from the ground have more of a blur than items closer

In all, you achieve a kind of global shadow. You’re able to create a truer illusion of depth by setting your shadows in ems.

Variants in text-shadow for fun and profit

You don’t have to set the em for all three of your text-shadow properties. You could very well use the em for only one or two of those properties.

Observe this case where the blur is the only thing relative to font-size. You’ll see that as the text gets smaller, the blur lessens.

 
Now, in another approach, we maintain fixed blur and a fixed y-axis offset, but we let the x-offest be relative. You definitely get the perspective that the text is coming at you from an angle, now.

 

You get the idea here. There’s tons of nifty tricks for creating offsets relative to font-size that essentially gives you the idea that there’s a global shadow at work here.

And then there’s box shadows

You get the idea here, so box-shadow is pretty much the same, but keep in mind there’s an optional fourth property for box-shadow for a complete offset.

 

#demo5 header{
box-shadow: .125em .125em .25em .75em rgba(90,90,90, .7);
}

 

That fourth property is the offset of your whole shadow. So we’re essentially moving it .75em away from the header itself.

Again, we’re following along the theme as we’ve observed before, so now with an em-based box-shadow you’ll get this result:

 

I strongly caution you with this approach, though. It requires you to set font-size to a block-level sectioning element instead of text. If you aren’t paying close attention to your layout or grid, you’ll screw things up—all for the purpose of getting nifty shadows. If you decide to use em-based box-shadows for a global-shadow effect, you need to appropriately adjust your margins, paddings, widths and heights of that container and all that’s inside of it.

A few final words on em-based text-shadow and box-shadow

In cases where you have absolute free-reign over the design, this is a technique worth trying. I’d caution against it in any cases where the design is prescribed to you, though.

The real potential isn’t just in using ems in your shadows, though. It’s when you use it as a component of an interactive design. I’d love to see how this method can word with :hover or :focus, or even when applied to animations through either CSS3 or jQuery.