Loading Please Wait...
With CSS masking you create a mask layer to place over an element to partially or fully hide portions of the element.
The CSS mask-clip property determines the area which is affected by a mask. The painted content of an element must be restricted to this area.
/* geometry-box values */
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: margin-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;
/* Keyword values */
mask-clip: no-clip;
/* Non-standard keyword values */
-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;
/* Multiple values */
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;
The CSS mask-image property sets the image that is used as mask layer for an element.
/* Keyword value */
mask-image: none;
/* mask-source value */
mask-image: url(masks.svg#mask1);
/* image values */
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-image: image(url(mask.png), skyblue);
/* Multiple values */
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1), transparent);
The CSS mask-mode property sets whether the mask reference defined by mask-image is treated as a luminance or alpha mask.
/* Keyword values */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;
/* Multiple values */
mask-mode: alpha, match-source;
The CSS mask-origin property sets the origin of a mask.
/* Keyword values */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;
/* Multiple values */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;
/* Non-standard keyword values */
-webkit-mask-origin: content;
-webkit-mask-origin: padding;
-webkit-mask-origin: border;
The CSS mask-position property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image.
/* Keyword values */
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;
/* position values */
mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;
/* Multiple values */
mask-position: top right;
mask-position: 1rem 1rem, center;
The CSS mask-repeat property sets how mask images are repeated.
/* One-value syntax */
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;
/* Two-value syntax: horizontal | vertical */
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;
/* Multiple values */
mask-repeat: space round, no-repeat;
mask-repeat: round repeat, space, repeat-x;
The CSS mask-size property specifies the sizes of the mask images.
/* Keywords syntax */
mask-size: cover;
mask-size: contain;
/* One-value syntax */
/* the width of the image (height set to 'auto') */
mask-size: 50%;
mask-size: 3em;
mask-size: 12px;
mask-size: auto;
/* Two-value syntax */
/* first value: width of the image, second value: height */
mask-size: 50% auto;
mask-size: 3em 25%;
mask-size: auto 6px;
mask-size: auto auto;
/* Multiple values */
/* Do not confuse this with mask-size: auto auto */
mask-size: auto, auto;
mask-size: 50%, 25%, 25%;
mask-size: 6px, auto, contain;
The CSS mask is a shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.
/* Keyword values */
mask: none;
/* Image values */
mask: url(mask.png); /* Pixel image used as mask */
mask: url(masks.svg#star); /* Element within SVG graphic used as mask */
/* Combined values */
mask: url(masks.svg#star) luminance;
mask: url(masks.svg#star) 40px 20px;
mask: url(masks.svg#star) 0 0/50px 50px;
mask: url(masks.svg#star) repeat-x;
mask: url(masks.svg#star) stroke-box;
mask: url(masks.svg#star) exclude;
/* Multiple masks */
mask: url(masks.svg#star) left / 16px repeat-y,
url(masks.svg#circle) right / 16px repeat-y;
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved