HTML and CSS Reference
In-Depth Information
}
.example {
background-image: linear-gradient(black, white),
linear-gradient(blue, green);
}
If we use the longhand
background-image
property, we'll also have to comma-separate
thevaluesontheotherlonghandpropertiestomatchthebackgrounds.Thiswouldgetlengthy
and hard to maintain using longhand, so it's always a good idea to try to use shorthand for
background images, especially to incorporate multiple background images on a single ele-
ment.
Adding More Linear Gradients
Now that we've covered the syntax for linear gradients, let's finish off the look of Re-
cipeFinder. We have three more linear gradients that we need to add. First, we'll add the
gradient for the promo button. The code will be the same as used for the header, because they
use the same colors:
.promo-btn {
display: inline-block;
width: 208px;
padding: 13px 0;
background-color: #560329;
background-image: linear-gradient(#87053e, #560329);
box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0;
font-size: 20px;
color: #fefefe;
transition: transform .5s ease-out;
}
For the promo button, the linear gradient declaration is placed immediately following the
background-color
declaration. We don't have to do this, but it often helps with code
maintenance to group related CSS properties together. The background color serves as a fall-
back for browsers that don't support CSS gradients. It's important to remember to specify a
