Creating Cross Browser Compatible CSS Text Shadows

Way back at the beginning of september, I was having a discussion with one of my friends about drop shadows in CSS. Currently, the only web browser which supports the CSS2 text-shadow property is Safari, which does the job really rather nicely. At the time, I made the statement that you could get pretty much every other browser to create nice text shadows as well, without having to add lots of extra markup to your HTML.

So, the challenge was simple. Come up with some CSS which will produce drop shadows in as large a percentage of peoples’ web browsers as possible, leaving the browsers which are incapable of showing text shadows with unstyled text. Sounds simple? Well, for the most part, it was…

There are already tutorials out on the web which tell you how to produce text-shadows for various web browsers. The problem is, they all seem to focus on one particular browser, rather than producing a cross browser compatible solution. Of course, the “one true solution” is to wait until everything supports the CSS2 text-shadow property, but that day won’t come for a good while yet. So, in the mean time, here’s how I put everything together into one package so that it all “just works”.

Continue reading “Creating Cross Browser Compatible CSS Text Shadows”

comments (18) | write a comment | permalink | 22 February 2005

about wwm is a resource for web developers created by Neil Crosby, a web developer who lives and works in London, England. More about the site.

Neil Crosby now blogs at The Code Train and also runs, The Ten Word Review and Everything is Rubbish.