0build.dev
Choose a layout

mask-composite

Report an Issue
Class Description

mask-add

Sets mask-composite to add, combining this mask layer additively with layers below it.

CSS Rules 

.mask-add {
  mask-composite: add;
}

Usage 

<element class="mask-add" />

Responsive

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

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

<element class="content-after mask-add::after" />
 .mask-add Sets mask-composite to add, combining this mask layer additively with layers below it.

mask-subtract

Sets mask-composite to subtract, removing this mask layer's area from layers below it.

CSS Rules 

.mask-subtract {
  mask-composite: subtract;
}

Usage 

<element class="mask-subtract" />

Responsive

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

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

<element class="content-after mask-subtract::after" />
 .mask-subtract Sets mask-composite to subtract, removing this mask layer's area from layers below it.

mask-intersect

Sets mask-composite to intersect, keeping only the overlapping area between mask layers.

CSS Rules 

.mask-intersect {
  mask-composite: intersect;
}

Usage 

<element class="mask-intersect" />

Responsive

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

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

<element class="content-after mask-intersect::after" />
 .mask-intersect Sets mask-composite to intersect, keeping only the overlapping area between mask layers.

mask-exclude

Sets mask-composite to exclude, keeping only the non-overlapping area between mask layers.

CSS Rules 

.mask-exclude {
  mask-composite: exclude;
}

Usage 

<element class="mask-exclude" />

Responsive

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

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

<element class="content-after mask-exclude::after" />
 .mask-exclude Sets mask-composite to exclude, keeping only the non-overlapping area between mask layers.