Abusing text-shadow

text-shadow is really nice for making your copy appear to "pop". Conversely, I found if you hack around a little bit, you can create a blurry text effect. All it takes is 2 simple lines of CSS:

First, you need a text-shadow with no offset and a blur (10px). Second, you just need to use an rgba() color with the alpha set to zero. This way you only see the shadow... and there you have it!

Below is an image of a Snellen chart (eye exam chart) with text-shadow used to blur it. You can check out the example code here.

Is this useful? Not really, but it could be fun to use blurry text in experimental projects. Or one day if you're making an advertisement for an eye product on a standards compliant browser, look no further! (Hey it's not that far fetched, iAds support modern technologies).

I decided to play around some more with this, and mix in some transitions. Check out this example where you can have text blur away (webkit browsers only). If you figure out any cool uses for this technique, drop a comment.