HTML5 and CSS3, Second Edition

and an ending color, but we can specify more colors than that if we want

more control over the gradient. But let’s shift gears and work with shadows.

Adding a Shadow to the Badge

We can easily make the badge appear to be sitting above the banner by adding

a drop shadow. In the old days we’d do this shadow in Photoshop by adding

it to the image or by inserting it as a background image. However, the CSS3

box-shadow property lets us quickly define a shadow on our elements.^3

We’ll apply this rule to our style sheet to give the badge a shadow. We add

this within the #banner selector, right below the gradient we previously defined:

css3_banner/stylesheets/style.css

box-shadow: 5px 5px 5px 0px #333;

The box-shadow property has a total of six parameters, although we’re using

only five. The first is the horizontal offset. A positive number means the

shadow will fall to the right of the object; a negative number means it’ll fall

to the left. The second parameter is the vertical offset. With the vertical offset,

positive numbers make the shadow appear below the box, whereas negative

values make the shadow appear above the element. The third parameter is

the blur radius. A value of 0 gives a sharp value, and a higher value makes

the shadow blurrier. The fourth parameter is the spread distance, or the width

of the shadow. The final parameter we specified defines the shadow’s color.

The sixth available parameter (inset), if specified, puts the shadow inside of

the box, creating an inner shadow instead of the default outer shadow.

Notice that in our example we didn’t use any vendor prefixes. Internet

Explorer 10, as well as the most recent versions of Chrome, Firefox, Safari,

and Opera, support this without any prefixes. However, if you find you need

to support iOS 3, Android 2.1, or browsers released earlier than 2011, you

can use the same rule but with the -moz- and -webkit- prefixes.

You should experiment with these values to get a feel for how they work and

to find values that look appropriate to you. When working with shadows, take

a moment to investigate how shadows work in the physical world. Grab a

flashlight and shine it on objects, or go outside and observe how the sun

casts shadows on objects. Proper use of perspective is important, because

creating inconsistent shadows can make your interface more confusing,

especially if you apply shadows to multiple elements incorrectly. The easiest

approach you can take is to use the same settings for each shadow you create.

3. http://www.w3.org/TR/css3-background/#the-box-shadow

Chapter 8. Eye Candy • 160

Download from Wow! eBook <www.wowebook.com> report erratum • discuss