The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

Blend Modes, Filter Effects, and Masking 233

The saturate() function also accepts a percentage as an argument, but it

works differently from grayscale() and sepia(). A value of 0% makes an image

appear fully unsaturated—or grayscale—whereas values greater than 100%

oversaturate the image.

noTe To see these functions in action, view example file 18-a on this book’s companion web-
site (http://thebookofcss3.com/).

hue-rotate()

The prosaically named hue-rotate() function is used to rotate the hue of an

element. Recall from “Hue, Saturation, Lightness” on page 116 that color

hue is calculated from an angle around the axis of the color wheel. There-

fore, the required argument to the hue-rotate() function is a degree, like this:

E { filter: hue-rotate(45deg); }

Applying hue-rotate() actually shifts the hue of all colors in an element

around the color wheel by the same amount. To see this function in action,

view example file 18-b on this book’s website.

opacity()

The opacity() function works the same as the opacity property introduced in

Chapter 10. The function accepts a percentage value as an argument, with

0% equal to fully transparent and 100% equal to fully opaque:

E { filter: opacity(25%); }

Values greater than 100% are treated as 100%.

If the result of the opacity() function is identical to that of the opacity

property, why bother using it at all? Because you can combine it with the

other filter effect functions, as you’ll see shortly in “Multiple Filter Effect

Functions” on page 234.

drop-shadow()

At first, the drop-shadow() function may seem to be the same as the box-shadow

property, introduced in Chapter 9. Indeed, it even takes the same values as

arguments: an x-offset, y-offset, blur radius, and shadow color. Here’s an

example:

E { filter: drop-shadow(5px 5px 3px gray); }

The biggest difference between the two is that the drop-shadow() func-

tion is aware of any alpha value (opacity) in the target element. You can see

the difference clearly in Figure 18-8. The target image has a transparent

background, so in the image at left (which has the drop-shadow() function

applied), the drop box follows the outline of the image. The image on the