HTML and CSS Reference
In-Depth Information
Box Shadows
CSS3 box shadows are a new feature, one almost set for W3C finalization and supporting browser vendors. Box
shadowing allows application of a slick drop shadow-type effect to such DOM objects as images and
canvas
or
div
elements. Listing 5-4 shows a box shadow working in advertising.
Listing 5-4.
Box Shadow Ad Example
<style>
#ad {
position: absolute;
width: 300px;
height: 250px;
background-color: white;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
}</style>
As you can see, it's just the regular CSS syntax you're used to, with some updates to give access to new browser
effects. Assuming our ad element has the ID of
ad
, this CSS block will apply a nice drop shadow to our ad on the
publisher's page. This listing would produce the effect shown in Figure
5-4
.
Figure 5-4.
An ad container with box-shadow using CSS3
As you see, some pretty straightforward CSS can apply a nice drop shadow to where our ad inventory will live on
the publisher's page. The box shadow property uses two required parameters, horizontal shadow position and vertical
shadow position, followed by four optional parameters, blur (which we're setting to 20 pixels), spread, color, and inset.
■
Note
Color can use heX, rGBa, or hsLa color values for the box-shadow property.
