The header and quote at the bottom of the site are set apart by a text shadow. This gives it a three-dimensional feel and emulates offset printing mishaps occasionally seen in newspapers.

To accomplish this I used the CSS3 text-shadow property. Actually, I used it twice: a white shadow sits atop a larger gray shadow:

h1 {
text-shadow: 2px 2px 0 #fff,
5px 5px 0 #bbb;
}

A close-up of the two shadows in place.

In the text-shadow syntax, the first value is the horizontal offset, while the second value is the vertical offset. Offsets can be positive or negative. (You can use a negative offset to create the inset type effect that all the cool kids are using these days).

The third value sets the blur of the shadow. Blurs can get out of hand quickly, so use with caution. I chose not to blur the shadows in this case.

The fourth and final value is color. You could also use RGBA colors to set the opacity of the text-shadow, like so:

Text-shadow is supported in Safari 1.1+, Chrome 2+, Firefox 3.1+, and Opera 9.5+. Unfortunately, Internet Explorer does not yet support text-shadow, even in the new IE9 beta. But the nice thing about text-shadow is that it doesn’t affect the layout so it degrades nicely in less capable browsers. Enjoy!

Ryan Essmaker is the founder of Designing Monsters, a small design studio. He’s a sucker for good typography and well-written markup. In his spare time you can find him with camera in hand or strumming on the ole six-string.

9 Responses

Ryan, thanks for the article! I had one question about your RGB fallback. I had always made the assumption that every browser that supports text-shadow also supports rgba, but your article indicates that is not the case. Do you know which browsers support text-shadow but not rgba?