0build.dev
Choose a layout

mask-mode

Report an Issue
Class Description

mask-alpha

Sets mask-mode to alpha, using the mask layer's alpha channel to determine visibility.

CSS Rules 

.mask-alpha {
  mask-mode: alpha;
}

Usage 

<element class="mask-alpha" />

Responsive

Prefix .mask-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-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-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-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-alpha::before" />

<element class="content-after mask-alpha::after" />
 .mask-alpha Sets mask-mode to alpha, using the mask layer's alpha channel to determine visibility.

mask-luminance

Sets mask-mode to luminance, using the mask layer's luminance values to determine visibility.

CSS Rules 

.mask-luminance {
  mask-mode: luminance;
}

Usage 

<element class="mask-luminance" />

Responsive

Prefix .mask-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-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-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-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-luminance::before" />

<element class="content-after mask-luminance::after" />
 .mask-luminance Sets mask-mode to luminance, using the mask layer's luminance values to determine visibility.

mask-match

Sets mask-mode to match-source, using the natural mask type of the source (luminance for images, alpha for others).

CSS Rules 

.mask-match {
  mask-mode: match-source;
}

Usage 

<element class="mask-match" />

Responsive

Prefix .mask-match 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-match" />

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-match: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-match: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-match::before" />

<element class="content-after mask-match::after" />
 .mask-match Sets mask-mode to match-source, using the natural mask type of the source (luminance for images, alpha for others).