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
Comments
In this Think Vitamin video, you'll get an introduction to wireframing. You'll learn about some of the differences between low fidelity wireframes and high fidelity mockups » UX Wireframing Introduction
We Like
ThemeForest sell a range of site templates from some fantastic designers. They also sell some great WordPress themes!
Online invoicing made easy with CurdBee!
» Sign up
Join SugarSync for online backup. Sync your files between Mac, PC and mobile phone. Get 5 GB FREE and up to 10 GB bonus space!
Featured Book
HTML5 and CSS3 for the Real World will show you how to create websites using these new methods.
This easy-to-follow guide covers everything you need to know to get started. You’ll master the new semantic markup available in HTML5, as well as how to use CSS3 without sacrificing clean markup or resorting to complex workarounds. Buy the Book! · FREE Chapters
