Text Shadow

Want a little depth to your fonts? Add some CSS shadow.

You either love it, hate it, don’t care or don’t notice it, but wait, that’s probably not true: you notice it because it’s part of the look, the style, the feel, the design. It’s what makes it what it is and the shadow is there and you’re seeing it. So maybe you don’t notice it consciously, but sub-consciously, you’re digging the drop shadows on the text.

If you’re even remotely techy, you’re also curious about how that happened. In the olden days (as my 10-year old likes to say), this would be a Photoshop job and then an image. But in the modern era, you can choose your font and add a little CSS and you have a drop shadow.

Google Fonts

It’s not just any font either, with the ease of use of Google Fonts (especially in WOO Themes), you have 600+ fonts at the touch of a drop-down menu. Boom, just like that, you’re a designer. Some might not want to be, but other secretly enjoy looking through fonts.

Double Whammy

If you play with your colors, you can do quite a bit with this.

Not only do we get a drop shadow, but there’s even another CSS trick that allows us to put a layer in between the font and the shadow. Uh, excuse me? If you get creative, you can do quite a bit with this. You can even do more layers if you’re going for a statement or use lights and darks to get to something of an etched or engraved look.

Code You’ll Need

.post .title, .page .title {
	text-shadow: 1px 1px 0 #fff, 3px 3px 0 #e0e0df;
}

There’s some code for post and page titles, but of course, the site is your oyster. You just need to know the CSS tag of the element you want to shadow and you’re set. That first section is the first shadow, the second (after the comma) is the second. Have fun!