Style Sheets - Web Standards: Mastering HTML5, CSS3, and XML - page 184

text-shadow
In CSS3, the text-shadow property adds shadow to texts (Listing 5-71).
Listing 5-71. Simple Text Shadow Effect
h2 {
text-shadow: 2px 3px 5px #00f;
}
The first property value defines the x-offset, the second value is the y-offset, the third value is the z-offset (blur),
and the last value is the color of the shadow. If you want to add multiple shadows, a comma should be used as the
separator (Listing 5-72).
Listing 5-72. Outline Effect Using Multiple Text Shadows
h2 {
text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000;
color: #fff;
}
Background Size
In CSS3, background images are resizable, making it possible to implement the background image to take up all
available space (Listing 5-73) or be proportional to the screen, regardless of the width of the browser window.
Listing 5-73. Stretched Background
body {
background: url('/img/bg.jpg') no-repeat;
background-size: 100% 100%;
}
Multiple Backgrounds
In CSS3, multiple backgrounds can be declared (Listing 5-74). The separate background images are
separated by a comma.
Listing 5-74. Two Background Images for One Element
#container {
background: url('/img/bg.jpg') 0 0 no-repeat, url('/img/bg2.jpg') 100% 0 no-repeat;
}
In this example, the first image is placed to the top-left position ( 0 0 ), while the second to the top-right position
( 100% 0 ). Multiple backgrounds can be especially useful when applying a texture or gradient as the main background,
and a photo as the other.