HTML and CSS Reference
In-Depth Information
Figure 10-30. Rounded corners make our buttons and boxes squeezably soft
Color Gradients
A color gradient consists of two or more colors that seamlessly blend together, transitioning from one color
to another over a given distance, usually filling the area of an element on the page. It's a common and
popular visual effect, and web designers have achieved it for years with background images. CSS3 gives
you the power to generate these gradient backgrounds right in the browser, without using an external
image. A CSS gradient is essentially an image the browser generates when it renders the page.
Gradients in CSS come in two basic varieties: a linear gradient is a continuous transition from color to
color along a straight line, whereas a radial gradient spreads out in every direction from a single point of
origin. A CSS gradient is a background image, not a background color, so you'll define a gradient as a
value of the background-image property. This also means you can layer gradients with other background
images thanks to multiple background images in CSS3, and even layer multiple gradients in the same
A gradient value is a function that instructs the browser to render the image, consisting of a keyword and a
set of parameters or arguments enclosed in parentheses. Color gradients in CSS are still in a somewhat
experimental stage at the time we're writing this and most browsers that support them require a vendor
prefix. Furthermore, some browsers have implemented slightly different ways of specifying gradients as
the specification has been revised at different stages. The gradient notation we're showing here is the one
defined in the W3C's CSS3 specification as it achieved candidate recommendation status, which means
it's very nearly a finalized web standard and is less likely to change again. Browser vendors should follow
the standardized notation for gradients going forward, but older browsers may require a different notation
with their prefixes.
The simplest linear gradient only requires two arguments, defining the start color and the end color:
.zone {
background-image: linear-gradient(black, white);
Search WWH ::

Custom Search