Clipping and Masking Images on Your Webpage

First, we must understand the difference between these two image manipulations in order to utilize them effectively.

  • Clipping – Using a path to only display a portion of an image.  You are defining a visible area, and anything outside this area is clipped or rendered invisible
  • Masking – Masking uses a masked image to affect the alpha-channel of an element, so things can have different levels of opacity

CSS Image Manipulations

Clip Property

CSS image clipping has been around for a while, but it has a few bugs.  Can call for image clipping like this:

  • clip rect: ();

This code clips the image by whatever pixel amount we set.  Unfortunately, it only works on absolutely positioned images, it only works with rectangles, and it is old and deprecated.  We can now use this:

  • webkit-clip-path: inset(100px);

The clip path is our clipping mask property, inset tells the browser to look towards the center of the image from the corners, then the 100px tells the browser to only show the parts of the image that are 100px away from the border.

  • webkit-clip-path: inset(100px 200px 100px 200px);

This creates a clipping box inside the image 100px from the topleft, 200px from the top right, 100px from the bottom right, and 200px from the bottom left, read from left to right.

Other Shapes / Paths

Clip path also works with:

  • webkit-clip-path: circle(260px at center);
  • webkit-clip-path: elipse(160px 340px at center);
  • webkit-clip-path: polygon(5% 0, 100% 25%,  100% 75%, 50% 100% );

We can also use Standard Vector Graphics, or rather the paths within them, so create really interesting visual effects:

<svg>

<defs>

<clipPath id=”demonstration”>

<circle cx=”200″ cy=”400″ r=”100″ />

<circle cx=”420″ cy=”400″ r=”100″ />

<circle cx=”640″ cy=”400″ r=”100″ />

</clipPath>

</defs>

</svg>

What Else Can We Clip?

We can clip pretty much any element, often to spectacular effect.  Try putting a polygon clip on a div element to see the browser only display parts of the element.

We can also put css transitions and animations on our clipping mask, for interesting rollover or image manipulation effects.  How about when you hover over an image, an iris forms on the faces, a la James Bond?

Background Clip

Lets explore the background clipping property.  It accepts 4 settings:

  • border-box – The background comes out all the way under the border.  If the border is dashed, you can see the background beneath it
  • padding-box – The background will extend to the border, but not under it.
  • content-box – The background will clip to the edges of the content, with no caring about the edges of the element at all.  If you have text inside of a box, the background will only show up behind the text portion.
  • text – By far the most interesting, this paints the background inside of whatever text is on top of it.  So, if you have a beach background and text on top of it, you would only see the beach masked through the text, for a very interesting effect.

On to Masking…

Clipping and masking are very similiar and often confused.  The best way to understand the difference is that masking takes clipping to the next level by using transparency layers; its basically a more complicated clipping layer.  Instead of using shapes to define what is and is not visible, masking filters what you can and cannot see by using transparencies.  2 types of masks you can use:

  • Luminance – Luminance changes the photo to grayscale, the sets black to conceal, white to reveal.  If any color is a gradient between black and white, then it shows the corresponding amount of color information.
  • Alpha – Shows only the portion of the image that corresponds with the white from another image, doesn’t do the grayscale gradient

Using Masks

There are 2 properties to use with the css masking rule.  We are putting the mask on the image, so on the css for the image, we use these rules:

webkit-mask: url(path to masking image) – This tells the browser what to use as a mask.  It takes all types of rasters, along with svg images (linked through the svg’s ID) or css gradients.

Another way of masking in CSS is to use a mask-border.  This rule will fade out the edges and the corners of an image, similar to feathering (Use both rules for compatability):

  • webkit-mask-box-image:
  • mask-border:

To keep learning more about this topic, please visit the following resources: