Forums

Give help. Get help.

  • # May 19, 2011 at 6:04 pm
    .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.

    # May 19, 2011 at 7:02 pm

    I vote this be an article.

    # May 19, 2011 at 7:31 pm

    Aha. I thought I had seen something similar once, wasn’t sure if it was on this site or elsewhere.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag