Blend Modes, Filter Effects, and Masking 241
<defs>
<clipPath id="clipping">
<circle cx="0.5" cy="0.5" r="0.5" />
</clipPath>
</defs>
Once defined, I apply this clip path to my element using the clip-path
property, with a value equal to the url() notation containing the ID of the
clip path:
E { clip-path: url('#clipping'); }
Unfortunately, this method has drawbacks. For one, as of this writing,
it only works in Firefox. Also, you can’t animate these shapes without using
JavaScript.
Image Masking
In addition to clipping an element with geometric shapes, you can also
mask one image with another, using the alpha value of the mask to deter-
mine how much of the target will be visible. (This process is similar to the
way blend modes work, except that it uses alpha rather than black and
white.) The mask is applied using the mask property, which takes these
values:
E { mask: image position / size; }
The image value is the url() notation with a path to the image to be
used as a mask. The properties position and size work the same as the
background-position and background-size properties (see Chapter 8). For
example, the following code will set an image called mask.png at the cen-
ter of an element, with the mask filling the width of the parent while main-
taining its original aspect ratio:
E { mask: url('mask.png') 50% 50% / 100% auto; }
Figure 18-14 shows the three steps in masking. The target image is on
the left; the image to be used as a mask is in the middle; and the mask
applied to the target is on the right.
Figure 18-14: The three steps of image masking
