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.
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:
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:
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.
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:
<img src="humayun-thom-arno.jpg"alt="Animation of clipping"class="clip-animation">
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 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.