Text Shadow Links

March 31, 2010

Hover over the Obligatory Blog, or the Text Shadow Links title text above and you should see a whizzy little text effect.

All courtesy of the Text Shadow property in CSS3. What's particularly funky though is you can apply multiple text shadows to the same text. Each one stepping a bit further away from the text and in different colours. So you could get a rainbow effect if you so wished.

If you're using an older version of Safari, Firefox or Opera, or anything below IE9 - then you won't see anything at all happening. But that's OK, it's nothing functionally critical.

Safari gives the best results that I've found as it rolls out the multiple shadow properties more steadily than Firefox. It's not exactly slow, but the transition effect is definitely more steady. Firefox is still a bit in/out.

But early days for all these effects. I'm not totally convinced they're that great, gimmicky is a fair term I think. But as a web designer I still feel obliged to become at least familiar with the process to be up-to-date, and least make the decision in future not to use them because I think they're naff, rather than not use use them because I don't know how.

This article is written by John Cowen, owner of Mekonta - a small web design studio in Exeter, Devon.

More Articles

Guest Articles