Friday, May 14, 2010: Blurry Text using CSS 3 « from the old blog archive »

This is an effect I have been using in a hidden feature of #thaiWitter, where a text pops up, and then blurs and fades away.

I will show you how it looks like:

Hello, World!

This effect can be achieved using CSS3. By setting the text to transparent and give it a text shadow. However this won't work on WebKit, because on WebKit browsers, if a text is transparent, then its shadow is transparent too, so in the example above you see nothing. Don't know how it looks like on Opera because I don't care. Anyway here's the code:

color: rgba(255, 255, 255, 0);
text-shadow: 0 0 10px #fff;

Oh and for IE, just use progid:DXImageTransform.Microsoft.Blur then. In fact it works for images too, not just text.