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
.