Explanation: This CSS declaration (gradients) allow you to style elements in a manner which would formerly have been done with images. Gradients can be either linear or radial (see examples below). Note the use of different identifiers below for each of these effects. For linear gradients, one specifies the direction of the gradient and the colors. One can also supply color stops and can use rgba values instead of hex values.
Example CSS code:
#linear {
background-image: -webkit-gradient(linear, left top, right bottom, from(red), to(blue));
background-image: -moz-linear-gradient(-45deg, red, blue);
}
#colorStop {
background-image: -webkit-gradient(linear, left top, right bottom, from(red), to(blue), color-stop(0.5, green));
background-image: -moz-linear-gradient(left top, red, green, blue);
}
#rgba {
background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(255,0,0,.9)), to(rgba(255,255,255,0)));
background-image: -moz-linear-gradient(left top, red, rgba(255,0,0,0));
}
#rgbaImage {
background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(255,0,0,.9)), to(rgba(255,255,255,0))),url(../images/orchid.jpg);
}
#radial {
background-image: -webkit-gradient(radial, 10% 50%, 0, 50% 70%, 90, from(red), to(green));
}
Example page (view the source code): http://learning-html5.info/CSS3/CSS_Gradients.html (presently only works completely in -webkit based browsers, partially working in -moz browsers).
References:
- https://developer.mozilla.org/en/CSS/-moz-linear-gradient (-moz Mozilla linear gradient)
- https://developer.mozilla.org/en/CSS/-moz-radial-gradient (-moz Mozilla radial gradient)
- http://www.webkit.org/blog/175/introducing-css-gradients/ (Safari and -webkit)
Loading ...