Choose a layout

mask-type

Report an Issue

	Class	Description
mask-type-alpha Sets mask-type to alpha for an SVG mask element, using alpha values to determine visibility. CSS Rules `.mask-type-alpha { mask-type: alpha; }` Usage `<element class="mask-type-alpha" />` Responsive Prefix `.mask-type-alpha` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:mask-type-alpha" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="mask-type-alpha:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="mask-type-alpha:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before mask-type-alpha::before" /> <element class="content-after mask-type-alpha::after" />`	`.mask-type-alpha`	Sets mask-type to alpha for an SVG mask element, using alpha values to determine visibility.
mask-type-luminance Sets mask-type to luminance for an SVG mask element, using luminance values to determine visibility. CSS Rules `.mask-type-luminance { mask-type: luminance; }` Usage `<element class="mask-type-luminance" />` Responsive Prefix `.mask-type-luminance` utility with a breakpoint variant (e.g., `md:`) to apply styles at specific screen sizes (Supported breakpoints are `xm` through `2xl`). `<element class="md:mask-type-luminance" />` States States are generated dynamically at runtime and always come last. Append a state like `:hover` or `:focus` to the end of the class. This works in conjunction with breakpoints . Supported pseudo-classes: `:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:target`, `:checked`, `:disabled`, and `:group-hover`. `<element class="mask-type-luminance:hover" />` Group Hover Example The `:group-hover` state applies styles when a parent element with the `.group` class is hovered. `<element class="group"> <element class="mask-type-luminance:group-hover">...</element> </element>` Pseudo-Elements The `::before` and `::after` utility classes are supported too. Granted that you add the mandatory `content-before` or `content-after` class in order for them to work. `<element class="content-before mask-type-luminance::before" /> <element class="content-after mask-type-luminance::after" />`	`.mask-type-luminance`	Sets mask-type to luminance for an SVG mask element, using luminance values to determine visibility.