Fun With Blurred Text With CSS3

Discussion in 'CSS' started by xuantruong89, Apr 22, 2011.

  1. #1
    Making text blurry is pretty easy. Just make the color transparent and set a text shadow.
    .blurry-text {
       color: transparent;
       text-shadow: 0 0 5px rgba(0,0,0,0.5);
    }
    Code (markup):
    Thats dangerous though, because there are browsers that support color but not text shadow, so the end result would be totally invisible text. Of course, the solution is to feature detect and only apply if you are in a browser that supports it:

    .textshadow .blurry-text {
       color: transparent;
       text-shadow: 0 0 5px rgba(0,0,0,0.5);
    }
    Code (markup):
    The color of the shadow is the only thing visible, so make sure it's contrasty enough to be seen.
     
    xuantruong89, Apr 22, 2011 IP