cross-browser text (blur) shadow

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

is there any css or js soluti开发者_开发问答on?

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

---

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.

---

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;
}

---

Here is a Codepen demo that will show you how to create a text-blur effect along with several other text effects.

<div id="blurred">BLURRED</div>

blurred {
    text-shadow: 0px 0px 10px rgba(255,255,255,0.4),
    0px 0px 30px rgba(255,255,255,0.6),
    0px 0px 50px rgba(255,255,255,0.5),
    0px 0px 180px rgba(255,255,255,0.5);
    color: rgba(255,255,255,0);
}

---

For older versions of Internet Explorer version 9, as far back as 5.5 you can generate the blur effect by using the IE specific CSS filter attributes like this

p { filter:Blur(Direction=45, Strength=8);height:40;width:400;font-size:20pt;font-weight:bold; }

For newer versions of IE you can specify for them to fall-back to IE9 compatibility with this meta value.

<meta http-equiv="X-UA-Compatible" content="IE=9" />