Masking and clipping
These two features allow us to hide parts of an element in order to show a background image or color, or to give an element a special shape. Both terms can be a bit confusing, so let's see a brief description of each:
- Clipping is done with vectors or paths since this CSS feature was taken from the SVG specification. It creates a solid edge between the element and its background.
- Masking, on the other hand, uses images/bitmaps. With images, we can have "feathered" or blurred edges, whereas with clipping we have straight edges.
Let's check these properties out.
mask
The mask CSS property is the shorthand for the mask-clip, mask-composite, mask-image, mask-mode, mask-origin, mask-position, mask-repeat, and mask-size properties. We'll ...
Get Web Developer's Reference Guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
