33: Clipping and Masking

(Updated on )

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: