Blur text using text-shadow css on both webkit, gecko and IE10+

2
votes

I want to make a single css rule that will blur text on modern browsers.

I have two rules:

This one works on gecko and webkit, but not IE11:

<span style="color: rgba(0, 0, 0, 0); text-shadow: 0 0 .4em rgba(0,0,0,1);">
Example text
</span>

This works on IE10+, but not on webkit or gecko:

<span style="color: rgba(0, 0, 0, .01); text-shadow: 0 0 .4em 0.1em rgba(0,0,0, 0.4);">
Example text
</span>

I think there is an IE11 bug/feature that stops the text-shadow showing if the color is transparent. And IE takes an extra, necessary (for this effect to work) argument.

Here it is on JSfiddle: http://jsfiddle.net/WWTQn

1
htmlcssinternet-explorer

1 Answers

0
votes

Why don't you just have both rules with a single css class?

css:

.blur{
    color: rgba(0, 0, 0, .01); text-shadow: 0 0 .4em 0.1em rgba(0,0,0, 0.4);
    color: rgba(0, 0, 0, 0); text-shadow: 0 0 .4em rgba(0,0,0,1);
}

html:

<span class="blur">
    Example Text
</span>

Like this: http://jsfiddle.net/STm6T/