HTML, XHTML & CSS

34
Part V: The Future of (X)HTML
Backgrounds
Lining up multiple elements so that their backgrounds align perfectly
and, likewise, mixing and matching multiple backgrounds can be difficult
to achieve. It might take many lines of markup to get this job done right,
especially working with CSS1 or CSS2. However, with CSS3, you can apply
multiple backgrounds to a single element easily, and then use it to provide
a backdrop for an element or a group of subsidiary elements. For example,
on the backgrounds example page at www.dummieshtml.com/examples/
ch20/backgrounds/index.html, we combine three background images
and apply them to one div.
The relevant CSS3 markup looks like this:
.customBackground {
margin: 0px auto;
width: 400px;
height: 200px;
border-radius: 10px;
background:
url(images/top.gif) top left repeat-x,
url(images/bottom.gif) bottom left repeat-x,
url(images/middle.gif) center repeat;
}
The trick to this markup lies in the background specification, where we reference
URLs for images for the three different backgrounds named top.gif,
bottom.gif, and middle.gif, respectively. We use the repeat-x attribute
to repeat the top and bottom horizontally. Using repeat means that middle.
gif is repeated both horizontally and vertically. Top.gif applies the dark to
medium blue shading at the top of the frame, bottom.gif does likewise from
the bottom, and middle.gif supplies the dots. See Figure 20-4; visit the page
at www.dummieshtml.com/examples/ch20/backgrounds/index.html.
CSS3.info strikes again in this case with its coverage of multiple backgrounds
(particularly, check out its other background property coverage and excellent
CSS3 coverage in general) at www.css3.info/preview/multiplebackgrounds.
Shadows
Shadows first appeared in CSS2, but they enjoyed only limited browser support
and required various hacks to make them work properly. CSS3 lets
designers apply and manage shadows for borders, images, and text in more
or less the same way. Note that this is another case where some extensions
are needed for the box shadow (around the div element) and image shadow