HTML5 and CSS3, Second Edition

brightness()brightness(1.0); Adjusts the brightness of an element’s color. 0 is

completely dark, 1 is normal, and 10 is maximum brightness. We can

use percentages as well, where 100 percent is normal.

contrast()contrast(1.0); Adjusts the contrast, or difference between light and dark

values, of an element’s color. 0 is no contrast, 1 is normal, and 10 is

maximum contrast. We can use percentages here, with 100 percent being

normal, and anything over 100 percent resulting in more contrast.

hue-rotate()hue-rotate(90deg) Rotates the element’s hue around the color wheel,

using either degrees or radians.

saturate()saturate(0.5); Controls the saturation, or the vividness of the image,

using values from 0 to 1, where 0 is no saturation and 10 is full saturation.

We can also use percentages.

invert()invert(1); Inverts the colors, creating the color-negative effect. We use

values from 0 to 1 or 0 percent to 100 percent for this effect. We’ll get a

gray image at the halfway point.

opacity()opacity(1); Makes an element transparent so we can see the element

or colors behind it. We use values from 0 to 1 or 0 percent to 100 percent

for this effect. At 0, the element will be completely invisible, and at 1 it

will have no transparency.

The neatest thing about all of this is that these properties work with transitions

and animations, too. For example, if we wanted images on a page to be

grayscale until we hovered over them, we’d only need this tiny bit of CSS:

where_next/filters/stylesheets/style.css

img.photo{

-webkit-filter:grayscale(1);

-webkit-transition:-webkit-filter0.5slinear;

}

img.photo:hover{

-webkit-filter:none;

}

This is much simpler than creating separate image files and doing an image

swap with JavaScript or CSS background images.

Of course, these aren’t available in all the browsers yet, and although there

are ways to make them work, it’s probably best to avoid them, or use them

but not worry about fallbacks. Once filter support stabilizes and these effects

show up in other browsers, you can put them to work for you where it makes

report erratum • discuss

Filter Effects • 251

Download from Wow! eBook <www.wowebook.com>