Faux Font Outline

29 February 2012

I was asked to replace an image menu on a clients website with a cufon or font-face version. The client was aware I couldn't reproduce the gradient overlay and that it would look different than it did before, but just plain white text on a light background wasn't very clear. So I tried to replicate the border/outline, and came up with this little CSS trick:

nav a {
    font-family: 'customfont', verdana, arial, sans-serif;
    color: #FFFFFF;
    font-size: 120px;
    text-shadow:
        2px 2px 0px #000,
        -2px -2px 0px #000,
        2px 0px 0px #000,
        0px 2px 0px #000,
        -2px 0px 0px #000,
        0px -2px 0px #000,
        2px -2px 0px #000,
        -2px 2px 0px #000
    ;
}




As you see in the demo, a softer "anti aliased" border is also possible. It takes a lot more code though:
.softshadow {
  font-family: 'Sansita One', cursive;
  font-size: 120px;
  color: #FFFFFF;
  text-shadow:
        1px 1px 0px #F0C,
        -1px -1px 0px #F0C,
        1px 0px 0px #F0C,
        0px 1px 0px #F0C,
        -1px 0px 0px #F0C,
        0px -1px 0px #F0C,
        1px -1px 0px #F0C,
        -1px 1px 0px #F0C,
        2px 2px 1px #F0C,
        -2px -2px 1px #F0C,
        2px 0px 1px #F0C,
        0px 2px 1px #F0C,
        -2px 0px 1px #F0C,
        0px -2px 1px #F0C,
        2px -2px 1px #F0C,
        -2px 2px 1px #F0C
    ;
}


Browser support for css-textshadow


You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

3 comments

  1. Gravatar

    Johan

    06 December 2012

    Thanks for the comment, Phil. I added a compatibility chart for the text-shadow property. All other properties are supported in all browsers.

  2. Gravatar

    Phil Did,

    06 December 2012

    I find your tutorial interesting but it would be nice to tell about browser support

  3. Gravatar

    ефим

    03 November 2012

    псих