Chapter 7 ■ IntegratIng CSS3 anImatIonS wIth SVg and FIlterSBlur Filter Transition
Blur filters need to be used carefully; applying them excessively can make a website difficult to read or
interact with. Blur is one of the few filters that does not take a value between 0 and 1. Instead, it uses a length
measurement to set the blur amount. (See Figure 7-6, which uses another Creative Commons image by Louise
Docker, http://www.flickr.com/photos/aussiegall/6311469113.))
Figure 7-6. A color image (right) filtered with CSS blur (left)
Note that the blur effect extends all the way through the image, including the border and shadow. It is
possible to limit the extent of the blur by making the border and shadow the properties of a second, parent
element, such as a div. (See Listing 7-25.)
Listing 7-25. CSS to Apply a Blur Filter to an Image
img { border: 20px solid #fff; box-shadow: 10px 10px 8px rgba(0,0,0,0.3); }
img.old { filter: blur(2px); transition: 1s filter linear; }
img.old:hover { filter: blur(0px); }
Summary
SVG and filters are two of the most powerful features you can add to CSS animations. SVG allows resolution-free
transitions and animations, while filters allow fast client-side visual image processing.
SVG is a dozen years old; CSS filters are brand new. Both are immediately limited by the fact that what you create
with them is unitary: your creations can’t immediately be repeated. Animating one element on a screen is easy, and
you can reuse that animation to animate another element, but each new element must be created separately.
You can use JavaScript to simplify, empower, and vary your CSS3 Animations and Transitions, easily
replicating animated elements and making new animations with a power that you’ll explore in the next chapter.