HTML5 and CSS3, Second Edition

With that in place, we have our badge and content region displayed side by

side, as in the following figure.

Figure 28—Our basic banner

Now let’s style the badge.

Adding a Gradient

We can add definition to the badge by changing the white background to a

subtle gradient that goes from white to light gray. The gradient we define

becomes the background image of the element. This gradient will work in

Firefox, Safari, and Chrome, but the implementation varies by browser.

Versions of Firefox prior to 15 use the -moz-linear-gradient method, in which we

specify the starting point of the gradient, followed by the starting color, and,

finally, the ending color. WebKit-based browsers use the same rule, but switch

out the -moz- prefix to -webkit-.

The standard way of doing gradients is with linear-gradient,^2 which looks almost

the same but uses to bottom instead of top for the direction. We can use to bottom,

to right, to left, to top, or a specific angle, such as 45deg.

To make the effect we’re looking for work in the widest variety of browsers,

we add this to our style sheet:

css3_banner/stylesheets/style.css

#badge{

background-image:-webkit-linear-gradient(top,#fff,#eee);

background-image: -moz-linear-gradient(top,#fff,#eee);

background-image: linear-gradient(tobottom,#fff,#eee);

}

That does it for our needs, but we can do radial gradients too, and we can

specify more color stops in the gradient. Our example uses a starting color

2. http://dev.w3.org/csswg/css3-images/#linear-gradients

report erratum • discuss

Working with Shadows, Gradients, and Transformations • 159

Download from Wow! eBook <www.wowebook.com>