cross-browser text (blur) shadow..

Question

How to get cross-browser text (blur) shadow? including IE6, 7, 8.

is there any css or js solution?

I want to get text-shadow with semantic and valid markup.

Answer 1

The jQuery Dropshadow plugin can handle this. To get complete browser compatibility, you're going to have to use JavaScript, there is no pure-CSS solution.

Answer 2

This approaches uses a positioned span to achieve the look.

http://krijnhoetmer.nl/stuff/javascript/text-shadow/

There may be a pure css solution using transforms.

Using Filters:

IE 6 supports filters so you can use:

filter: dropshadow(color=#ffff00,offX=5,offY=5);

So a cross browser style might look like:

.my-class 
{
    -ms-filter: "dropshadow(color=#ffff00,offX=5,offY=5)";
    filter: dropshadow(color=#ffff00,offX=5,offY=5);
    text-shadow: #ff0 5px 5px;
}