Clipping and Masking in CSS
Posted By : Dipak Kumar Singh | 27-Jun-2017
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
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);
}
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Dipak Kumar Singh
Dipak is a skilled HTML Developer, expertise in UI Development. Dipak likes watching movies and playing computer games.