NSteffen.com

See a demonstration (Safari or Konqueror required)

And now for another entry into the CSS Hall Of Fame For Properties You Wish Were More Supported: the CSS3 text-shadow property. While the potential for misuse is great (remember the pop-up kids? Imagine them getting their hands on text-shadow), it is a great tool to have in your box if you use it wisely.

And while you may be thinking "Drop shadows on text? So over it mate", it has a use that may not be apparent at first sight. It makes text slimmer, leaner and a whole lot meaner.

With Thanks To Inman

The credit for this discovery goes to Shaun Inman, who was the first person (as far as I know) to publish this technique on 24 Ways.

I'll stop talking and show you some examples of the effect that you can create using text-shadow. Have a look at the image below, comparing a paragraph of text as it appears in Safari and Firefox. You will notice that the text rendered in Safari looks slimmer. I assure you this is not browser sniffing at work, but the text-shadow property.

So how does text-shadow do this? Let's have a look.

The Syntax

Here is how to implement text-shadow in your CSS:

text-shadow: (offset-horizontal) (offset-vertical) (fuzziness) (color);

You can replace anything in the brackets with values of your choice. Offset and Fuzziness are measured in em or pixels, while color will be the standard RGB value. For example, the following CSS:

text-shadow: .1em .1em .2em #999;

would give me the following result:

As you can see, the heading at the bottom has a harder shadow. I did this by changing the fuzziness value to 0.05 em. If you still have trouble seeing the use in this, let me show you an example where some text-shadow can really make you text pop:

The Trick

As you can imagine, adding a text shadow to all the text on your site could become a little tiring for the reader. So how do you get mean, lean text without having to suffer a drop shadow behind all of your text? Shaun Inman figured out that if you give the shadow no offset, and no fuzziness, it will make the text thinner without actually giving it a drop shadow. The CSS for this would look like this:

text-shadow:0 0 0 #000;

While it is obvious why there will be no shadow showing, it is still not clear why the text is still rendered as thinner than normal. No need to break your little head over it, just accept it and enjoy the fruits. Again, this CSS is currently only supported in Safari and Konqueror, but here's to hoping it will be implemented more widely soon.

More Examples

Khoi Vinh uses text-shadow to make his navigation leaner.

Text-Shadow is a good friend toJeff Croft.

See a demonstration (Safari or Konqueror required)