HTML and CSS Reference
In-Depth Information
background image. The property value for a gradient background varies depending on what
type of gradient we'd like, linear or radial.
Gradient Background Vendor Prefixes
In
Lesson 4
,
“
Opening the Box Model
,” we discussed adding vendor prefixes to
new CSS properties or values so that browsers can support recently developed
CSS features. Gradient background values were one of the values that required
the use of vendor prefixes. Fortunately, most browsers have since eliminated the
need for a vendor prefix in order to render a gradient background; however, it is
still worth outlining vendor prefixes to ensure the best support.
At first, as we begin discussing linear gradient backgrounds, we'll include each of
the different vendor prefixes. After that, in the interest of brevity, we'll omit the
different prefixes as we continue to discuss gradient backgrounds, including radi-
al gradient backgrounds.
Linear Gradient Background
For years designers and developers have been cutting up gradient image files, created using
image-processing software, and using them as linear gradient backgrounds on elements.
The process worked, but it took a while to implement and was very inflexible. Fortunately
those days are gone, and linear gradient backgrounds can now be specified within CSS. If
a color needs changing, there is no need to reproduce and recut an image and upload it to
the server. Now all we need to do is change a quick value within CSS (see
Figure 7.4
)
.
Beautiful.
1.
div {
2.
background: #466368;
3.
background: -webkit-linear-gradient(#648880, #293f50);
4.
background:
-moz-linear-gradient(#648880, #293f50);
5.
background:
linear-gradient(#648880, #293f50);
6.
}
Search WWH ::
Custom Search