0build.dev
Choose a layout

mask-repeat

Report an Issue
Class Description

mask-repeat

Sets mask-repeat to repeat, tiling the mask image in both directions.

CSS Rules 

.mask-repeat {
  mask-repeat: repeat;
}

Usage 

<element class="mask-repeat" />

Responsive

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

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

<element class="content-after mask-repeat::after" />
 .mask-repeat Sets mask-repeat to repeat, tiling the mask image in both directions.

mask-no-repeat

Sets mask-repeat to no-repeat, showing the mask image only once.

CSS Rules 

.mask-no-repeat {
  mask-repeat: no-repeat;
}

Usage 

<element class="mask-no-repeat" />

Responsive

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

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

<element class="content-after mask-no-repeat::after" />
 .mask-no-repeat Sets mask-repeat to no-repeat, showing the mask image only once.

mask-repeat-x

Sets mask-repeat to repeat-x, tiling the mask image horizontally only.

CSS Rules 

.mask-repeat-x {
  mask-repeat: repeat-x;
}

Usage 

<element class="mask-repeat-x" />

Responsive

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

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

<element class="content-after mask-repeat-x::after" />
 .mask-repeat-x Sets mask-repeat to repeat-x, tiling the mask image horizontally only.

mask-repeat-y

Sets mask-repeat to repeat-y, tiling the mask image vertically only.

CSS Rules 

.mask-repeat-y {
  mask-repeat: repeat-y;
}

Usage 

<element class="mask-repeat-y" />

Responsive

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

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

<element class="content-after mask-repeat-y::after" />
 .mask-repeat-y Sets mask-repeat to repeat-y, tiling the mask image vertically only.

mask-repeat-space

Sets mask-repeat to space, tiling the mask image with even spacing between repeats.

CSS Rules 

.mask-repeat-space {
  mask-repeat: space;
}

Usage 

<element class="mask-repeat-space" />

Responsive

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

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

<element class="content-after mask-repeat-space::after" />
 .mask-repeat-space Sets mask-repeat to space, tiling the mask image with even spacing between repeats.

mask-repeat-round

Sets mask-repeat to round, tiling the mask image and stretching repeats to fit evenly.

CSS Rules 

.mask-repeat-round {
  mask-repeat: round;
}

Usage 

<element class="mask-repeat-round" />

Responsive

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

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

<element class="content-after mask-repeat-round::after" />
 .mask-repeat-round Sets mask-repeat to round, tiling the mask image and stretching repeats to fit evenly.