HTML and CSS Reference
In-Depth Information
Figure 3.14. A close-up of the gradient and shadow at the bottom of the big promo section
This gradient border at the bottom of the
.promo
element is about 8px tall. To make room
for this, we'll add 8px of padding to the bottom of the
.promo
element. The subject of of
the gradient will be included later in the topic when we cover CSS gradients. For now, we'll
include the shadow, adding to the existing styles on that element:
.promo {
position: relative;
z-index: 5;
padding-bottom: 8px;
box-shadow: rgba(0, 0, 0, .25) 0 3px 2px 0;
}
This box shadow has the same values as the previous ones, keeping the look of the two shad-
ows consistent as in our Photoshop file.
