We have many major browsers like Internet Explorer, Opera, Firefox, Safari and SeaMonkey. I am really tired of using different CSS hacks and code for each of these browsers. So I want to offer you one universal CSS code which will help us to make shadows for text.
This is a simple example of Creating Cross Browser Compatible CSS Text Shadows. We will not use Images, only clear CSS code which work for all browsers.
Let’s create xhtml code:
1 2 3 4 | <p> <span class="shadow">Cross Browser Compatible CSS Text Shadows</span> <span class="text">Cross Browser Compatible CSS Text Shadows</span> </p> |
I do not know if it is good for SEO, but for this method you need to duplicate content where you want add shadows. I think it is good for SEO, because you will not do shadows for ALL content of your website. 
Next step: add this CSS code:
1 2 3 4 5 6 7 8 9 10 | .text{ position:relative; z-index:10; } .shadow{ color: #cccccc; position:absolute; z-index:5; margin:2px 0 0 2px; } |
I think this is a very simple way to use shadows.
You can download an example here.
And why not using one simple line for everything? Something like this:
This is some text
or
This is some text
and the css …. .shadowRed {text-shadow: 0px 0px 3px #FF0000;}
There you go.
With one css line, including several characters, you have the same effect. And you can also choose where to add shadow.
The first value of 0 is for up-down or ZERO, the second value of 0 is for left-right or ZERO and the third value of 3px is for the SPREAD or height if the previous values are not ZERO.
text-shadow is not supported on any version of IE!
Sure, you are right! You can try – Filters for IE