242 Chapter 18
noTe This is a simple mask. The syntax is much more flexible than this, although a bit too
complicated to explore in detail in this book.
The mask property is shorthand for a whole range of subproperties,
including mask-image, mask-position, and mask-size. You can use many more
properties in addition to these, and the full mask shorthand looks like this:E { mask: image mode position / size repeat origin clip composite; }Let’s take a brief walk through the unfamiliar properties. The mask-mode
property determines whether the mask should work on the default alpha
channel or through luminance (lightness); mask-repeat tiles the mask image
just as background-repeat; mask-origin and mask-clip also work like their back-
ground equivalents (background-origin and background-clip in Chapter 8);
and mask-composite controls how multiple mask-image values should interact if
they overlap.Border Masking
In Chapter 9, I introduced the border-image property, which is used to apply
images to the borders of an element. You can use the same basic method
of slicing an image that we discussed in that context to apply a mask to the
border of an element.
The properties involved in border masking are mask-border-source, mask-
border-slice, mask-border-repeat, mask-border-width, and mask-border-output.
Each can be included in the mask-border shorthand, and each is identical in
function to their border-image-* counterpart. For example, to set an image
mask.png, with slices of 40px each, which repeats along each side of an ele-
ment, you use this syntax:E { mask-border: url('mask.png') 40px repeat; }Unfortunately, as of this writing no browser supports this in accordance
with the spec (though Chrome and Safari support a similar but outdated
property called -webkit-mask-box-image), so I won’t spend any more time dis-
cussing border masking.Masking in SVG
You can use SVG to mask images, much as you might clip them. To do so,
you define the mask in markup and then apply it using a CSS property (mask).
For example, the following listing creates a mask of a black box with a white
ellipse in the center:<defs>
<mask id="masking">
<rect y="0.3" width="1" height=".7" fill="black" />
<circle cx=".5" cy=".5" r=".35" fill="white" />
</mask>
</defs>