CSS3 text-shadow examples

Text-shadow is a CSS3 property (actually, it was introduced a while ago but removed from CSS2.1) that I am seeing more and more on websites these days. It works quite nicely (if used in moderation) and provides a design enhancement for those browsers that support it (Firefox, Opera, Safari, Chrome). Instead of writing a tutorial, like I normally do with CSS3, I thought I’d share a few useful links that provide more information about text-shadow.

If you are not sure about how to write the CSS for text-shadow, this online tool from the makers of Style Master enables you to create shadows and their CSS with slider controls and with a few colour values. It’s a neat way of experimenting with the text-shadow property and values. I have used it quite a bit already!

Meagan Fisher provides a nice description of text-shadow. I like the examples used because they show that perhaps the best use of text-shadow is achieved using larger text sizes and small or subtle shadows. The use of rgba is also a useful trick.

It’s also possible to use two or more text-shadows and Web Designer Wall explains this and other CSS3 properties in a post about the basics of CSS3. If you are interested in the letterpress effect described, Line25 has another tutorial about the use of text-shadow to create a letterpress effect.

Finally, a word of warning about lack of support in Internet Explorer, be careful and always test text-shadow in IE. Here’s an example where white text and text-shadow will be invisible in IE

Info: You can use text-shadow today even without support in Internet Explorer. Its use is an example of progressive enrichment and with other browsers gaining market share I think it’s perfectly valid.