The concept of clipping and masking is pretty simple. Hide certain parts of elements and show others. The actual difference between them is pretty simple too. Clipping is always a vector path, where inside the path is visible and outside the path is not. Where a mask is an image, is treated as a grayscale image where the black parts mask the image to transparency and the white parts let the image through.
Implementing clipping and masking isn’t particularly easy though, as the browser support for it (and all the little ins-and-outs) is quite varies. We try and go through all of it in this screencast, struggles and all.
The syntax for all the possibilities is:
.clip-me {
/* referencing path from an inline SVG <clipPath> */
clip-path: url(#c1);
/* referencing path from external SVG */
clip-path: url(path.svg#c1);
/* polygon */
clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
/* circle */
clip-path: circle(30px at 35px 35px);
/* ellipse */
clip-path: ellipse(65px 30px at 125px 40px);
/* inset-rectangle() may replace inset() ? */
/* rectangle() coming in SVG 2 */
/* Masking */
/* mask-image, mask-position, mask-repeat, mask-clip, mask-size ... */
mask: url(mask.svg);
mask-type: luminance || alpha;
-webkit-mask-box-image: url(stampTiles.svg) 30 repeat;
mask-border: url(stampTiles.svg) 30 repeat;
}Some of the demo stuff we played with in this video are here and here.
Here’s a whole bunch of resources on it:
- clip-path here on the CSS-Tricks Almanac
- Clipping and Masking in CSS
- clip-path on WPD
- clip-path on MDN
- Clipping and masking on MDN
- The (deprecated) CSS Clip Property (Impressive Webs)
- Spec on CSS Masking
- CSS Masking by Dirk Schulze
- Clipping in CSS and SVG – The clip-path Property and
<clipPath>Element by Sara Soueidan - Pens tagged clip-path on CodePen
- Demos and browser support demo Pen by Yoksel
- SVG Masks by Jakob Jenkov
- Alan Greenblatt’s research on browser support levels for clipping and masking features
