Text Shadow

Text Shadow

Text Shadow Property

We have long wanted to use 3D text effects on web pages and until now, that meant using images or tricky javascript that slowed down your website.

With CSS 3, this is as simple as making text bold or colored blue.

The text-shadow property allows you to turn any piece of plain text into one that stands out. Simply specify the color and offsets of the shadow, and you’re done.

The syntax is:
text-shadow: <color> <x-axis offset> <y-axis offset> <fuzz amount>

which might look something like this within the stylesheet:
text-shadow: #000 0.01em 2px 0.1em

These offsets may be specified using the standard CSS units. We’ll stick to pixels and em. The fuzz amount specifies how much the shadow should be stretched.

 

Text Shadow Examples

Adding this CSS for your paragraph tag:
p {color: red; text-shadow: #888 2px 2px 0.12em;}

will turn something like this:
That the quick brown fox jumps over the lazy dog
into this:
That the quick brown fox jumps over the lazy dog

 

There are a number of creative and interesting effects you could achieve with this, such as using the same color as the background for the text and adding a shadow:
p {color: white; text-shadow: #888 2px 2px 0.12em;}
That the quick brown fox jumps over the lazy dog

Be careful. The text-shadow property will only work for browsers that support CSS 3 (which is most decent browsers these days). It will be ignored by those that don’t so your text above will be invisible. Should take that into account.

 

You could also stack multiple shadows to create a colorful montage of sorts or a flame text effect:
p {color: #ff6; text-shadow: #f63 0 1px 0.2em, #ff3 -2px -1px 0.12em, #f93 2px -2px 0.12em, #f63 0px -3px 0.3em;}

That the quick brown fox jumps over the lazy dog

 

Text Shadows in Buttons

Now, we could use the same effect for buttons to give them a little more character.

Simply add the “text-shadow” property to the CSS for your input box:
input {text-shadow: #999 0.14em 0.14em 0.2em;}

 

Although there are a lot of effects that you simply can't achieve with cascading style sheets, the text-shadow property is a huge leap in that direction.

Leave a Reply