Grow your CSS skills. Land your dream job.

Cool Ideas About Blurrey Text

  • # 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:23 pm

    Boom.

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

    # May 20, 2011 at 12:49 pm

    Here is a test page I just put together using several different types of blurred text. Even has a cool multi-colored one too (it uses transparency though, watch out!).

    # May 20, 2011 at 5:17 pm

    Actually IE has been able to do blur since IE6 (I think)… just use this css and it should cover all the bases:

    .blur {
    text-shadow: 0 0 5px #555;
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=3)";
    filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);
    }
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".