HTML and CSS Reference
In-Depth Information
border-radius: 50px;
border: 10px solid #d2bdcb;
box-shadow: inset 0 0 6px rgba(0,0,0,0.2), 2px 1px 2px rgba(0,0,0,0.5);
background: #bba8b5 url(images/bg-pattern.png) center top repeat;
background: linear-gradient(160deg, rgb(187,168,181) 30%, rgba(187,168,181,0) 70%),
#bba8b5 url(images/bg-pattern.png) center top repeat;
}
Notice that we've declared the
background
property twice: first as a base for browsers that don't support
gradients or multiple backgrounds, then a second declaration overrides it to add the gradient. Older
browsers will still get the basic background, and those that don't display images will still have a solid color
to fall back on. The latest browsers that support the more advanced features of CSS will display the
enhanced version in its place, like you see in Figure 10-32.
Figure 10-32.
A gradient lays over a tiling image and fades to transparent, allowing the pattern to emerge
We've omitted the vendor prefixes in most of these gradient examples, but you should
certainly include them in any CSS intended for the live Web. Gradients are still
experimental and only a few of the very latest browsers support them without prefixes.
Furthermore, delivering gradients to only one browser—by including that vendor's prefix
and leaving out the rest—is a disservice to your visitors. It may be repetitive to declare
the same gradient five times in a CSS rule, but that's life in the fast lane.
Once you're comfortable with linear gradients you can learn more about radial gradients from the Mozilla
gradients in much depth in this chapter, but we can at least give you a brief taste and some examples.
The simplest radial gradient is simple indeed, only requiring the start color and end color:
.orb {
width: 350px;
height: 200px;
background-image: radial-gradient(cyan, indigo);
}
