Blend Modes, Filter Effects, and Masking 243
The next step is to apply the mask to the target element, using the mask
property with a url() notation containing the ID of the mask element (masking):
E { mask: url('#masking'); }
noTe For a more in-depth look at masking in SVG and CSS, see Dirk Schulze’s “CSS
Masking” (http://w w w.html5rocks.com/en/tutorials/masking/adobe/).
Blend ModeS, filTer effeCTS, and MaSking
Should you want to combine filter effects with masking on the same ele-
ment, it’s important to know that they will be applied in a specific order:
filter effects are applied first, followed by clipping, then masking, and finally
opacity. To see the consequence of this order, consider the following listing
that applies a drop shadow filter and circular clipping path to an element:
E {
clip-path: circle(50% at 50% 50%);
filter: drop-shadow(5px 5px black);
}
In this code, the effects are applied to the image in this order: first,
the drop shadow is applied; then the image with the drop shadow applied
is clipped into a circle. To avoid the clipping of the drop shadow, you can
apply the filter effect to a parent element:
D { filter: drop-shadow(5px 5px black); } /* parent */
E { clip-path: circle(50% at 50% 50%); } /* child */
This works because of the way browsers parse the DOM for rendering.
The clipping of the child element will occur before the filter effect that is
inherited from the parent. (Figure 18-15 compares the two methods.)
Figure 18-15: Comparing rendering order of graphical CSS effects
