Text Shadowing in CSS/CSS2

One day, Neil Crosby wanted to shadow some text using CSS. “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”.
Start with a Safari

In a big break from tradition, I decided to start by writing the CSS Apple’s Safari web browser. But why would I do this? Although I generally start work on the Mozilla group of browsers, due to the fact that they have the highest usage of the browsers which have good CSS implementation, in this instance Safari implements the text-shadow CSS property staight out of the box. Sadly, at this time, Mozilla does not - hence the need for this article.

Anyway, the CSS needed for Safari is as follows:

.shadow {
text-shadow: #666666 5px 5px 5px;
}

If you’re using Safari, this text should have a nice soft shadow

In an ideal world, that’s where this article would stop. Unfortunately, as I said at the top, there’s a bit more of a challenge to go yet. But first, lets do the next easiest bit. ”

Read the full article to learn how to do shadow text in many browser types.