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

3 comments

1. 

   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. 

   Phil Did,

   06 December 2012

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

3. 

   ефим

   03 November 2012

   псих