Elliot Swan

The CSS text-shadow property is now supported by Safari 3+, Opera 9.5+, and FireFox 3.1 (currently in beta). So when is the time to start using it?

Now.

Certainly not everybody will see it, but better to have some people experience it than nobody at all. That is, if you think before you type and don’t abuse it. When used correctly, text-shadows can be a great addition to a design. If you aren’t careful, though, it’s quite possible for them to end up as bad as the next blink tag.

Shadows on the web should imitate shadows in real life: They shouldn’t be everywhere, and they should make sense. Take a look at a photograph off the Flickr Explore page of something in real life (in case it’s been a while):

Now compare that to some of the shadows on this tutorial. Notice a difference? Both use shadows, but one uses them naturally while the other uses them extravagantly. Shadows are not special effects, they are natural effects that bring out the details of a design. The point of a text-shadow is not to show off the shadow, but to show off the text.

Good design disappears. Generally speaking, visitors should not be physically aware of the text-shadows, they should simply feel them. You don’t always notice shadows in the real world because they just become a part of the experience. They make things stand out, the create depth and perspective, and make things seem real–all without you even noticing.

So the next time you’re about to whip out your text-shadow, don’t look to Photoshop for inspiration. Look out your window.