HTML and CSS Reference
In-Depth Information
Just like background images, provided that you specify a basic background color to fall back to, you can use gradi-
ents safely.
Gradients come in two flavors: linear and radial. A linear gradient is the blending of colors from one point to anoth-
er, whereas a radial gradient starts from a center point and blends outward.
Unfortunately, gradients are in a state of disarray, with varying support and syntaxes across browsers.
Internet Explorer versions 6, 7, 8, and 9 have no support for official gradients. That said, they do actually support a
different type of gradient using an unofficial filter property that Microsoft added before they concerned them-
selves with following the standardized specifications.
For more information about the unofficial filter property, visit msdn.microsoft. com/en-us/library/
ie/ms530752(v=vs.85).aspx .
Linear gradients in other browsers are supported either using the official syntax or an outdated one. You'll learn both
syntaxes to be able to achieve the most supported and future-proof approach to linear gradients.
Radial gradients have an even wider level of varying support. Because of this, CSS3 Foundations
doesn't cover radials. Should you wish to learn more, I'd recommend reading the CSS3 Image Values and Replaced
Content module which contains the Candidate Recommendation explanation of radial gradients, found at
www.w3.org/TR/css3-images/#radial-gradients . The Candidate Recommendation will almost cer-
tainly be the finalized syntax, which is already supported unprefixed in Internet Explorer 10+ and Firefox 16+.
If you'd rather just create a radial gradient effect and not worry about how the code works, you can use a code gener-
ator, such as the one found at www.colorzilla.com/gradient- editor/ (which can also generate linear
gradients).
Linear Gradients
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12+
Prefixed browser support: Firefox 3.6+, Chrome 10+, Opera 11+, Safari 5.1+
Start by applying a linear gradient to the buttons on the page before taking a closer look at how to write them:
1. In styles.css, find the rule set for .showcase .button:hover and above it, add the following rule set:
.showcase .button {
padding: 20px;
background-image:
-webkit-linear-gradient(top, #FB3876 0%, #d4326d 100%);
background-image:
-moz-linear-gradient(to bottom, #FB3876 0%, #d4326d 100%);
background-image:
-o-linear-gradient(to bottom, #FB3876 0%, #d4326d 100%);
background-image:
linear-gradient(to bottom, #FB3876 0%, #d4326d 100%);
Search WWH ::




Custom Search