HTML and CSS Reference
In-Depth Information
Notice that the box in
Figure 5.5
is not a solid color, but a combination of blue shades, with
each gradually changing into the next.
With CSS gradients, we can fiddle with our gradients right inside the browser, altering them
directly in our CSS, and avoiding the need to edit images in Photoshop or another image ed-
itor every time we have to make a change.
Let's first introduce linear gradients by adding the missing gradient to the header of Re-
cipeFinder. Here's the code:
body > header {
box-shadow: rgba(0, 0, 0, .25) 0 3px 2px 0;
position: relative;
z-index: 10;
background-image: linear-gradient(#87053e, #560329);
}
Notice the new line we've added to this declaration block that we wrote in an earlier chapter.
This is not a new CSS property, but is, instead, a linear gradient function included as a value
onthe
background-image
property.Thefirst value inside theparentheses isthetopcolor
for the gradient. The second value is the final color for the gradient. The browser constructs
the remaining colors on its own, gradually changing the color from the first color to the next.
For a linear gradient, you can include as many colors as you want, separated by commas. The
browserwillautomaticallydistributethecolors(calledcolorstops),evenlyovertheelement's
background, and then the in-between transitional colors will be constructed automatically,
creating the "gradient" look.
Figure 5.6
shows us what the header looks like after adding this
new line of code.
Figure 5.6. Our header after adding a linear gradient
