- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
.blur
{color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);}
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.
The GREAT thing about this is that if the browser doesn’t support “text-shadow”, it still gets rendered as regular text. Downright cool.
I vote this be an article.
Aha. I thought I had seen something similar once, wasn’t sure if it was on this site or elsewhere.