Chapter 7 ■ IntegratIng CSS3 anImatIonS wIth SVg and FIlterSIntroduction to CSS3 Filters
CSS Filters allow the processing of web content before it appears on the page. Most commonly (but by no means
exclusively), these filters are applied to bitmap images. Filters significantly alter the typical web development
image production workflow: rather than permanently “baking in” visual effects in the pixels of an image,
designers can optimize and export an image from PhotoShop that will remain relatively untouched, leaving visual
changes to CSS.
This means that images can be altered on the fly in CSS, rather than having to re-edit originals in PhotoShop,
export them, and then re-upload them to a server. It also means that these effects can be animated.
Black and White/Grayscale Filter Transition
The grayscale filter effect is ideal for online portfolios or photographic galleries. Rather than using complex
JavaScript or Flash solutions, a CSS filter can easily convert a color image to black and white. You can undo this
conversion on hover, and attach a transition to ease between the two states, as with the image shown in Figure 7-4
(by Andrew Larsen at http://www.flickr.com/photos/papalars/4013594219, licensed under Creative Commons). See
Listing 7-22.
Figure 7-4. A color image (right) filtered with CSS (left)
Listing 7-22. Applying a Grayscale Filter Transition
img { border: 20px solid #fff; box-shadow: 10px 10px 8px rgba(0,0,0,0.3); }
img.bw { filter: grayscale(1); transition: 1s filter linear; }
img.bw:hover { filter: grayscale(0); }
As with the other filters I’ll describe in this chapter, the grayscale filter takes values between 0 (no effect)
and 1 (full effect) with floating point values between. Note that you cannot transition smoothly to a state of
“none” or no filter applied; the filter must be given a fresh value.
Sepia Filter Transition
The sepia filter can be used to create an “aged” photo effect, as shown in Figure 7-5 (applied to a photograph by
Robb North, http://www.flickr.com/photos/robbn1/3650713106)).