CSS Text Stroke

by on February 20, 2012 in
CSS Text Stroke Difficulty Level: Beginner

I was featured on CSS Tricks for this little number. By assigning multiple text-shadows to the same element (you can do that), you can create a CSS text stroke effect. It requires a keen eye and a little fiddling, but you can eventually have styled and stroked headlines for all your news articles automatically generated for you.

View Demo

The Code

.textstroke {
          /* Top Middle */
          0 -.0125em .015em white,

          /* Top Right */
          .0125em -.0125em .015em white,

          /* Top Left */
          -.0125em -.0125em .015em white,

          /* Left Middle */
          -.0125em 0 .015em black,

          /* Left Top */
          -.0125em -.0125em .015em black,

          /* Left Bottom */
          -.0125em .0125em .015em black,

          /* Right Middle */
          .0125em 0 .015em black,

          /* Right Top */
          .0125em -.0125em .015em black,

          /* Right Bottom */
          .0125em .0125em .015em black,

          /* Bottom Middle */
          0 .0125em .015em white,

          /* Bottom Left */
          -.0125em .0125em .015em white,

          /* Bottom Right */
          .0125em .0125em .015em white

You really need to play around with this property to get a feel for which direction it’s casting the shadow and how much to use. Be subtle…

I used em’s to size because they are 1) flexible and scale well, and 2) can be small enough to give very subtle effects.

Be sure to read Chris Coyier’s entire write-up on the subject. He thinks about this stuff a lot more than I do. :)

If you liked this article, you might also like: