Clipping and Masking in CSS

Clipping In css 2.1 clip property is already specified. Clipping property is limited to rectangular clipping and with the rect() function which is taking the four distance arguments these are for top, right, bottom and left sides.But the annoying part is the clip property applies only to the absolutely positioned elements. This property will not work in other elements. CSS:

img {
  position: absolute;
  clip: rect(100px, 190px, 290px, 30px);
}

HTML:

This property is only limited to specific elements in a SVF as well. That is the only reason why the SVG specification is added the clip-path property which is adapted by css masking now The clip-path property We can apply this clip-path property to all the HTML elements like SVG graphic element and SVG container element. It will references a element or it will references a basic shapes introduce with css exclusions The element it can any graphical element forn a SVG and it will uses them as clipping region. SVG graphical elements are , , , , , and text. element also allows combined graphical elements as well. let's see the example of

CSS:

img {
  clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
}

HTML:

Masking

After the clipping operation the second operation is masking. An image is used as a "color mesh" and it will filter the visual portion of element. There are two types of masks the luminance and the alpha mask.

Luminance Mask

The luminance mask in this type of mask image is transformed to rasterized grey scale image. As much as lighter a portion of a msk , the more of mask element will be visible

Alpha Mask

For the alpha mask there will be the same principle as in the luminance mask. The difference between both of them is just the alpha channel of image matters. As much as the less opaque a portion of masking image, the less visible the element

example of the mask property:

img {
  mask-image: url(mask.svg);
}