HTML and CSS Reference
In-Depth Information
Figure 5.10. Our second button with a linear gradient
The last gradient for the RecipeFinder website is going to be added to the small area that ap-
pears below the promo image. As discussed earlier in the topic, we left that portion without a
background so we could fill it in with a linear gradient in this chapter! Here's the code:
.promo {
position: relative;
z-index: 5;
padding-bottom: 8px;
box-shadow: rgba(0, 0, 0, .25) 0 3px 2px 0;
background-image: linear-gradient(#4e0324, #4e0324 97%,
#851f49);
}
Expanding on the styles for the
.promo
section, we've added a linear gradient to the back-
ground for that element. Recall that the
.promo
element is a wrapper for the section con-
taining the big promo image. The eight pixels of bottom padding are what makes this section
appear from behind the promo image.
The linear gradient consists of three color stops, with the second color stop being the same
as the first. Also, the second color stop is positioned at 97%. This means the same color will
appear on the background (behind the image, between 0% and 96%), up until the point where
