Add Outer Stroke To XHTML Text

The blog title on the entry page was looking a little bland, so it was punched up a bit with additional stroke around the XHTML text.

Here’s what it originally looked like:

And here’s what it looked like with additional CSS styling:

This was accomplished by assigning a class (“textStroke“) to the h1 tag, and then setting some CSS3 attributes for this class.

XHTML code:

<h1 class="textStroke">Chou Seh-fu</h1>

CSS code:

.textStroke {
   text-shadow:
      -1px -1px 0 white, /* Stroke - upper left of text */
      1px -1px 0 white, /* Stroke - upper right of text */
      -1px 1px 0 white, /* Stroke - lower left of text */
      1px 1px 0 white, /* Stroke - lower right of text */
      /********* DROP SHADOW *************/
      5px 5px 10px black;
}

Interestingly, the drop shadow code MUST follow the stroke code. (If the drop shadow code precedes the stroke code, some of the stroke code will not be rendered.)

Postscript: More text effects using CSS3 text-shadow.