HTML and CSS Reference
In-Depth Information
BRING
THE
BLING
WITH
CSS
GRADIENTS
Gradients are one of the most hotly anticipated features to become native to CSS.
Gradients are vital for design in general to reproduce the effects of light falling on
curved/shiny surfaces and create interesting patterns. The number of developers
who use them in web design is staggering, if not unsurprising. What is a surprise
is that until CSS3 came along, web developers never had the ability to create gra-
dients programmatically in any sane way that would work across browsers. SVG
had gradients for a long time before that, but IE never supported SVG until IE9.
All this time you've been stuck with either faking SVG in IE using a Polyfill
solution like SVGWeb or using repeated background images for those gradients or
repeating patterns you desired. This last technique works OK-ish but is an inflex-
ible pain and can become cumbersome very quickly, especially if your boss keeps
changing his mind about the gradient colors (more playing with Photoshop; oh
goody) or if you are trying to create any kind of complicated layered effect.
Again, CSS3 comes to the rescue with linear and radial gradients, which are
defined in the CSS Image Values and Replaced Content module
(http://dev.w3.org/
csswg/css3-images).
To see how flexible CSS gradients are, just have a good play
with the examples in this section.
Let's review the two different gradient types separately.
LINEAR GRADIENTS
Linear gradients are the simpler of the two types; these are smooth color progres-
sions that start at one side or corner of an area and cycle smoothly between two
or more color stops, ending at the other side or corner.
In CSS they work the same. CSS gradients are basically a special kind of back-
ground image. You can set them in place of an image in most places that it would
make sense to do so; for example,
background-image
and
border-image
(see the
“Box Clever: border-image” section later in this chapter for more on border images).
