Following on from my post on CSS3 box-shadow, we can also add shadows to text which will follow the shapes of the characters, not just outline the text element.
Offset shadow (solid)
View demo
The markup
h1 { -webkit-text-shadow: 3px 3px 0 #999; -moz-text-shadow: 3px 3px 0 #999; text-shadow: 3px 3px 0 #999; }
This markup would produce a solid outer shadow on an h1
heading, with the shadow offset 2 pixels from the left and 2 pixels from the top of the the element and no blur. The meanings of the three numbers are as follows:
- Horizontal offset
- Vertical offset
- Blur distance
Offset shadow (blurred)
This example has a 2 pixel blur applied.
View demo
The markup
h1 { -webkit-text-shadow: 3px 3px 2px #999; -moz-text-shadow: 3px 3px 2px #999; text-shadow: 3px 3px 2px #999; }
Outlined text
We can make the text look like it has an outline by adding four shadows, each one offset slightly from one of the sides:
View demo
The markup
h1 { -webkit-text-shadow: -1px 0 1px #000, 1px 0 1px #000, 0 -1px 1px #000, 0 1px 1px #000; -moz-text-shadow: -1px 0 1px #000, 1px 0 1px #000, 0 -1px 1px #000, 0 1px 1px #000; text-shadow: -1px 0 1px #000, 1px 0 1px #000, 0 -1px 1px #000, 0 1px 1px #000; }
Multiple shadows
We can apply multiple shadows to a text element to create various effects. Here is an example using three different colours at various placements:
View demo
The markup
h1 { -webkit-text-shadow: 12px 12px 2px #f0c, 30px -3px 2px #f90, 6px -10px 2px #9f3; -moz-text-shadow: 12px 12px 2px #f0c, 30px -3px 2px #f90, 6px -10px 2px #9f3; text-shadow: 12px 12px 2px #f0c, 30px -3px 2px #f90, 6px -10px 2px #9f3; }
Multiple shadows: outset effect
We can use multiple shadows to make the text looks like it has some relief to it. Here, we use two shadows; a lighter coloured slightly offset shadow at the top of the text, and another darker coloured one below:
View demo
The markup
h1 { -webkit-text-shadow: -1px -1px #ffa2bc, 1px 1px #8a0030; -moz-text-shadow: -1px -1px #ffa2bc, 1px 1px #8a0030; text-shadow: -1px -1px #ffa2bc, 1px 1px #8a0030; }
Multiple shadows: inset effect
Similarly, we can make the text look like it is inset into the background by reversing the shadows from the example above (darker colour on top, lighter colour on the bottom):
View demo
The markup
h1 { -webkit-text-shadow: -1px -1px #8a0030, 1px 1px #ffa2bc; -moz-text-shadow: -1px -1px #8a0030, 1px 1px #ffa2bc; text-shadow: -1px -1px #8a0030, 1px 1px #ffa2bc; }