HTML5 Typography - Learn HTML5 by Creating Fun Games - page 105

h1 {
text-shadow: -5px 5px 0 #000, 5px -5px 0
rgba(50, 50, 50, 0.3);
}
Also, text shadows may be added to custom fonts embedded onto the page through
HTML5's web fonts:
h1 {
text-shadow: 1px 1px 5px #000;
font-family: "Lemon";
}
The box shadow
Box shadows are identical to text shadow, except for a few very important distinc-
tions. First and for most, they are not applied to text but only to box elements. You
could in fact apply a box-shadow property to a text element (such as a p tag, h1, h2,
h3, and so on), but the effect would be drastically different. While the text shadow
effect, essentially, simply renders an offset and blurred copy of the text to which the
shadow is applied, a box shadow effect is simply a copy of the rectangle created by
the elements width, height, margin, and border which is rendered with the specified
color, offset, and blur values assigned in CSS.
div {
box-shadow: 5px 5px 3px #aaa;
}
Again, just like with text shadows, we can apply multiple box shadows to the same
element through a comma-separated list of shadow declarations.
div {
box-shadow: 5px 5px 3px #aaa, -10px -10px
30px rgba(255, 255, 255, 0.01);
}