Blurry Text
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
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! :)