Clipping and Masking in CSS

Clipping and masking is used to hide some portions of an element in CSS. Whoever does Photoshop work, know about masking, is easily done. But If you do not know masking in Photoshop, you can easily achieve this using clipping and masking property of CSS. But there are some differences between those two. The clipping clip-path property, which has been part of SVG, has moved to CSS Masking module and is used to specify a clipping path that is applied to hide some portions of the element. While using masking you can display certain portions of an element or an image, hiding the rest. You can also download examples or view the live demo. Link is available at the bottom of this article.

  • Clipping
  • Masking

Clipping

Before we show example of clipping, let’s see the old clip property of CSS2. It is a deprecated property and now it is not used. You can create your custom shape by clip property as well. See the example below:

masking example image

CSS

The four values are margins or padding:

  • 20px from the top of the element
  • 30px from the right of the element
  • 40px from the bottom of the element
  • 50px from the left of the element

New browsers do not support clip property so it is abandoned and under CSS3, the new clip property is introduced. There are two main weaknesses of the clip property.

  • Clip can only do rectangles.
  • Clip only works if elements are absolutely positioned.

The clip-path new property, This is a new version of clip property. See examples below of clip-path:

Rectangle:

Inset:

Inset Rectangle:

Center:

Ellipse:

Polygon:

How to use clip-path & with svg graphic

In SVG, the clipPath is used to define a clipping path. If you don’t want to use CSS to apply the clipping path to an element, you can do it in SVG using the clip-path presentation attribute. SVG clipPath can contain any content, borders, background, outline, text decoration and visible scrolling of the element.

HTML

CSS

Clipping Paths Animating

A clipping path can animate from one to another shape. In CSS3, basic shapes and the content of a masked element can animate. See example and code below:

HTML

CSS

Masking

CSS masking is same as Photoshop masking. You can use SVG or image for masking any element. If you want to mask an image with some portions are transparent, then transparent part is not visible and rest of image will appear.

masking example image

Masking uses mask-image, mask-position, mask-repeat, mask-origin, mask-clip and mask-size properties which are quite similar to background-image properties. It is possible to define multiple mask sources. Following are the examples of masking.

June 11, 2017 by admin

Add a Comment

Your email address will not be published. Required fields are marked *