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”