Blend Modes, Filter Effects, and Masking 231
You can see the difference in the example on the right of Figure 18-5.
The div is isolated and a new stacking context created, so the img is blended
only with the transparent parent. As a result, you don’t see the background
image of the body as in the example on the left.
Filter Effects
Like blend modes, filters are a common part of professional image-editing
software. Filters are used to change an element’s appearance before it
reaches the page, and unlike blend modes, they don’t rely on the inter-
action of two components. CSS filters are defined in the CSS Filter Effects
Module (http://www.w3.org/TR/filter-effects-1/) and are applied using the
filter property, shown here:
E { filter: function; }
The function value is at least one of a range of nine filter effect func-
tions. Each accepts a single argument, except when a series of arguments is
required (in a space-separated list). I discuss each one here.
blur()
Applies a blur effect to an element. The argument for the blur() function
is a unit of length that controls the radius of the blur. The effect is called
Gaussian blur—a kind of image smoothing that reduces noise in the image.
The higher the radius value, the greater the blur effect. For example, to
create a blur of radius 10px, you use this code:
E { filter: blur(10px); }
You can see the blur effect in action in Figure 18-6. The unfiltered image
is on the left; the blur() filter has been applied to the image on the right.
Figure 18-6: Applying a Gaussian blur filter
