HTML and CSS Reference
In-Depth Information
FIGURE 4.17
RGBA colors
provide great control over
gradients while blending them
into their surroundings.
Yo u c a n e v e n u s e n e g a t if v e u n if t v a if u e s if if if o r s o m e r e a s o n y o u w a n t t h e if if n e a r
gradient to start or end outside the container. (You might want to change the gradi-
ent on hover. Unfortunately, you can't smoothly animate a gradient, at least not at
the time of this writing. Believe me, I've tried.)
Again, I'll extol the awesomeness of transparent colors by providing a very
simple gradient with a vital difference (
Figure 4.17
):
background: linear-gradient(to top right,
p
rgba(0,0,0,0.6),rgba(0,0,0,0));
background-color: #ff0000;
Here the gradient is a transparency gradient overlaid onto a solid background
color to create the different gradient colors. This is a very powerful technique
because it means you can control the look of an entire site section just by varying
the background color. It's perfect if you want to vary the look of different pages on
a site with minimum effort. Try it!
TIP:
It's a good idea to always include a suitable background color in
a separate property alongside your gradient, even if the gradient is not
transparent. It acts as a good fallback mechanism for a browser that doesn't
support CSS gradients, ensuring that content is still readable.
