HTML and CSS Reference
In-Depth Information
rgb() is a function, and its arguments are the red, green, and blue values.
You can specify the same gray color as the background as follows: rgb(245, 245, 245) . Many color pickers
will be able to give you these values.
RGBA
In CSS Level 3, you can specify an alpha argument along with the red, green, and blue arguments.
Alpha allows an element to take on a level of transparency.
To select the main content area of the page and make its background white, with a slight transparency, follow these
steps:
1. In styles.css, find the following:
#main {
background-color: white;
}
2. Add another background-color declaration, like so:
#main {
background-color: white;
background-color: rgba(255, 255, 255, 0.6);
}
3. Save styles.css.
Here, you select the element with an ID of main and give it two background-color declarations, but why? Be-
cause RGBA is a part of the CSS Level 3 specification, it is implemented only in modern browsers. When a browser
sees these declarations, if it doesn't understand rgba() , it renders only the first declaration, making the background
color white. If it understands both declarations (in the case of modern browsers), it renders the latter (remember this
is how the cascade works), setting background-color to white (255, 255, 255) with a 0.6 (60%) transparen-
cy. This is a safe way to use CSS Level 3 features, providing graceful degradation for older browsers.
HSL and HSLA
Having read about RGB, you may be thinking that specifying colors in that way is unintuitive, and you'd be right.
Although you can guess at a value for a particular color, that guess will be far from accurate.
CSS Level 3 aims to make guessing color values more intuitive with the introduction of the HSL function. HSL
stands for Hue, Saturation, and Lightness.
Imagine a color wheel with red at the top (0° or 360°). As you move clockwise around that color wheel, the colors
fade between yellow (60°), green (120°), cyan (180°), blue (240°), magenta (300°), and then back to red. (See Figure
4-2.)
Search WWH ::




Custom Search