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:
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.