Sussex countryside

It's made my business run better! Get a 10% lifetime discount when you Sign up for FreeAgent

CSS3 text-shadow examples

Posted in on 19 March 2010

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.

Related Posts

Comments

There are currently no comments on this article.

Comments

Enter your comment below. Fields marked * are required. You must preview your comment first before finally posting.





Sponsors

Shopify makes it easy to open an online store by providing all the tools and help you need. Click here to try it for free!

Subscribe RSS Feed

RSS icon