.blur
{color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);}
Blurry
Hmmm. Interesting. This seems that it would leave any browser that doesn’t support “text-shadow” in the dark, the text would be transparent… Whoops… I assume you could use a little feature-detection to fix this – that would be to much work for me, I might as well use an image. So what we need here is a method of making easily degradable blurred text.
This is one those “Eureka!” ideas I just had, and thought it would make a nice post to see if anyone has a better solution, or any comments on this one. Here’s the basic code:
.blur
{color:#000000; /* Old browsers don't go transparent. */
font-size:100px;
font-family:arial;
text-shadow: 0 0 3px #000000, /* Several shadows blur out the area around the text */
3px 0 3px #000000,
0 3px 3px #000000,
-3px 0 3px #000000,
0 -3px 3px #000000;}
Unfortunately this really only works on larger text, since the shadows fill in the area around the text.
Test
The GREAT thing about this is that if the browser doesn’t support “text-shadow”, it still gets rendered as regular text. Downright cool.
