Make the text color transparent but add a shadow:
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
Blurry
More browsers support color than text-shadow though, so you might want to do feature detection. Or, leave the color property and do enough shadowing that it appears blurry anyway (demo).
Nice effect.
Color: transparent works nicely in Gecko and Webkit but it hides the text & the text-shadow in Opera.
Use color: rgba(0, 0, 0, 0) for better cross browser compatibility.
Jeez man. This is actually genius. I can’t believe this has alluded me so many years.
Combine this with javascript, and you can build quite a website with pseudo depth-of-field effects.
Thanks the inspiration.
these kind of text are search engine friendly…..?
@edward; Yes they are. The text is still there, just as normal. The only difference is that the color is transparent and it has a blurry shadow applied to it. Search engines have no issues reading it.
nice done
hi chris
nice effect
very very nice trick…. :-)
Lol, simple and effective :)
Not work in <IE9
IE must`s death
Genius code :)
Nice
This doesn’t seem to work in IE10, the text completely appears transparent. As a workaround, I used the following:
color: #cbcbcb;
text-shadow: 0 0 5px rgba(0,0,0,1);
Not perfect, but close.
Worked great for me. I’m using it with WebKit on iOS and Android devices.
Thanks! :)
text-shadow: 1px 1px 4px black, -1px -1px 4px black;
font-size: 3em;
makes text enough blury.
fiddle
Or colored one…
color: black;
text-shadow:
2px 2px 4px #900,
-2px -2px 2px #009,
– 2px 2px #090,
2px -2px 2px #ff0;
post
not working in IE browsers. we have any options for that :)
Is there anyway you could slowly unblur text. The text starts off blurred and then comes into focus?
Sorry this is a little late to the game Tim, but this should do what you were wanting.:
fiddle
Surely it would be better to just use CSS filters like so?
CSS filters are barely supported
For today it support very good and this is only way to make blurred images or other html tags, than text.
Nice Trick :)