HTML and CSS Reference
In-Depth Information
WebKit doesn't render the transition to
transparent
well, so the styles in multiple_gradients.html set the
second color stop of the first gradient to white with
20%
alpha transparency like this:
background-image: -webkit-radial-gradient(25px 30px, 12px 12px, rgba(255,255,255,0.8),
rgba(255,255,255,0.2)
),
-webkit-radial-gradient(30% 30%, circle, #C51D31, #921524, #450A11);
■
For inspiration of what you can do with Css gradients, visit the Css3 Patterns gallery hosted by the
Tip
Supporting Older Browsers
The standard syntax has been supported by Internet Explorer since IE 10 and by Firefox since version 16. By the
time you read this, it may also be supported by the most recent versions of other browsers.
The following browsers support the browser-specific syntax described in this chapter:
•
Firefox 10-15
•
Chrome 10+
•
Opera 11.6+
•
Safari 5.1+
•
iOS Safari 5.0+
•
Android 4.0+
•
Opera Mobile 12+
The simplest way to deal with older browsers is to provide a solid background color. Alternatively, you can
create a linear gradient in a graphics program, and tile a thin slice horizontally or vertically as a background
image (see Figure 8-4 in Chapter 8). Organize your style rules in the following order:
1.
Background color
2.
Gradient image
3.
Browser-specific gradient functions
4.
Standard CSS gradient syntax
The last three items all use the
background-image
or
background
property. By placing them in this order,
browsers that support the browser-specific or standard syntax override the previous values. Only browsers that
don't understand either use the background image. The background color is there as a fallback in case there's a
problem with the gradient definition or background image.
Summary
Using CSS rather than images to add gradient backgrounds to elements reduces the number of server requests,
improving download times and making your sites more efficient. Although no images are used, you apply a
gradient to an element using the
background-image
or
background
property, and using one of the following
