Putting it All Together - HTML5 with CSS3 - page 375

Figure 10-20. A stacked box effect created by three offset shadows
There's a lot more you can do with the box-shadow property, and we've shown a few more examples in
Figure 10-21. With no offset or blur but increasing values for spread, multiple shadows produce a multiple
border effect. With no offset but with a generous blur and spread, a light colored shadow over a dark
background can make a box seem to glow from within. Inset shadows can easily produce a recessed or
cutout effect. With a combination of light and dark colors, you can also use inset box shadows to simulate
a beveled or embossed box—especially effective with rounded corners, which we'll cover later. The shape
of the shadow follows the shape of the box, even when the corners are rounded off.
Figure 10-21. A few more effects you can achieve with box-shadow
Embedded Fonts
We first touched on typography in CSS back in Chapter 4. Browsers ordinarily draw text using digital fonts
installed on the client computer, limiting a web designer's choices to the handful of common system fonts.
For years web designers worked around this limitation and found clever ways to use non-standard
typefaces on the Web. These ingenious hacks—from simple image replacement, to rendering text as an
embedded Flash object, or even drawing text as an SVG image with JavaScript—opened up new avenues
for creative expression through type. But they were still hacks and none were really the best solution.
Ideally there should be some means of installing a font on the user's computer that the browser could use
to render text. CSS answered the call with the @font-face rule, specifying a font file on the Web that a
browser can download and use temporarily. This special rule was first introduced in CSS2 way back in
1998, but it faced complications and browser makers couldn't agree on details of implementation. The
@font-face rule was soon removed in the CSS 2.1 specification; hence the need for all those less-than-
perfect hacks. Now @font-face is back in CSS3 and it's stronger than ever, fully supported by all the
major browsers (though with a few idiosyncrasies, as you'll soon see).