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.
Related Posts
We Like
Sync files between computers. Share files with your clients, friends, and family using DropBox. It's great!
Most Popular
Subscribe RSS Feed
Comments
There are currently no comments on this article.
Comments