The mask property in CSS is a shorthand property that allows you to hide an element (partially or fully) by masking or clipping the image at specific points. Here's a detailed overview of its usage and properties:
The mask property can take various values, including:
Keyword values: none
mask: url(masks.svg#star) left / 16px repeat-y, url(masks.svg#circle) right / 16px repeat-y;
The mask shorthand property encompasses several individual properties: mask-image: Sets the image that is used as an element's mask layer. It can be an image, a gradient, or an SVG mask element. mask-mode: Indicates whether the mask layer image is treated as an alpha mask or a luminance mask. mask-position: Specifies the initial position of a mask layer image relative to the mask position area. mask-size: Specifies the size of a mask layer image. mask-repeat: Tells a mask if it should be repeated or not and in which directions. mask-origin: Specifies the mask position area of a mask layer image, defining where the origin of the mask layer image is. mask-clip: Determines the area which is affected by a mask. The painted content of an element must be restricted to this area. mask-composite: Allows combining a mask layer image with the mask layers below it.
Masking with an Image: The mask-image property works similarly to background-image. You can use a url() value to pass in an image, which must have transparent or semi-transparent areas to create the mask effect. Multiple Masks: You can specify multiple mask sources, combining them to achieve the desired effect. This is particularly useful for creating patterns or complex masks. Masking with Gradients: Linear and radial gradients can be used as mask images, allowing for smooth transitions in opacity. SVG Masks: SVG elements can be used as masks, providing a high level of control over the mask's shape and transparency.
The mask shorthand property also resets mask-border to its initial value, making it recommended to use the shorthand to override any mask settings earlier in the cascade. When using SVG masks, ensure that the mask element is properly defined within the SVG file. By understanding and utilizing the mask property along with its constituent properties, you can achieve sophisticated visual effects in CSS, allowing for creative and dynamic masking of elements on web pages.