Putting it All Together - HTML5 with CSS3 - page 380

downloaded at no cost but may come with other stipulations about their use, requiring attribution to the
designer, for instance, or limiting their use to non-commercial websites.

Before you use any font in your CSS, be sure it's licensed for use on the Web and that you have the right
to use it on your website. Otherwise you could be violating the font's license and breaking the law.

Although many digital fonts carry restrictive licenses, you can still find a wide variety of free, unrestricted
fonts to use in your projects. Font Squirrel ( fontsquirrel.com ) maintains a catalog of hundreds of fonts
in a broad range of styles, all completely free for commercial use. Google also provides hundreds of fonts
for the Web ( google.com/webfonts ) and they will even host them on their own network, free of charge.
Other hosted font services such as Fontdeck ( fontdeck.com ) and Typekit ( typekit.com ) will serve fonts
for a modest fee, and they offer some licensed fonts you wouldn't otherwise be able to use for free.

Text Shadows
The text-shadow property adds one or more drop shadows behind an element's text. Such shadows can
make the text appear to float above the page, casting a shadow as if it existed in three dimensions. This
property is similar to the box-shadow property and takes a similar, but shorter, set of values:

 offset-x and offset-y: These are two required length values that indicate the horizontal and vertical

offset of the shadow. The first length indicates the horizontal offset on the x-axis and the second
indicates the vertical offset on the y-axis. Negative offset values position the shadow to the left or
top of the text, positive lengths offset the shadow down and to the right, and 0 indicates no offset
at all.

 blur radius: A third optional length value indicates the amount of blur to apply to the shadow.

Higher values indicate more blur, and a blur radius of 0 (the default) indicates a shadow with no
blur and a sharp outline.

 color: Specifies the color of the shadow using any valid color model (keyword, hexadecimal,
RGB, RGBA, HSL, or HSLA). Most browsers will use the inherited foreground color value if this
value is omitted, but it's usually best to specify a shadow color to ensure consistency.
Unlike box-shadow , the text-shadow property doesn't accept an inset value (sorry, no inner shadows
on text) nor does it accept a spread radius value (the shadow is always the same size as the text that
casts it). As with box-shadow , the text-shadow property can accept multiple, comma-separated values to
stack shadows one on top of another.
The text-shadow property first appeared in CSS2 but was poorly defined and subsequently dropped from
CSS 2.1. It has returned in CSS3, and is already well supported by most of the major browsers. Internet
Explorer is the only straggler and didn't implement text-shadow until IE 10.
We've added a shadow to the .page-title class along with some extra decoration in Listing 10-28, and
you can see the effect in Figure 10-24. The shadow is offset down and to the right as if the light source
were above and to the left. There's no need for any vendor prefixes because every browser that supports
text-shadow does so without any prefix, and they'll actually ignore a prefixed text-shadow property if
you try. Those older or less capable browsers that don't support the property will just render the regular
text with no shadow—a perfectly acceptable degradation.