Articles by

Mojtaba Seyedi

Direct link to the article :fullscreen

:fullscreen

The :fullscreen CSS pseudo-class allows you to select and style any element that is currently in fullscreen mode. You know those times you allow an image or some other element to take up the full screen? Well, we can style …

(Updated on )
Direct link to the article mask

mask

The mask property is a shorthand to specify all mask-* properties. mask can hide part of the element is applied to and It accepts one or more comma-separated values, where each value corresponds to a mask layer.

.element {
  mask: 

mask-composite

The mask-composite CSS property allows us to combine a mask layer image with the mask layers below it.

.element {
  mask-composite: subtract;
}

When there are multiple mask layer images, they need to be composited into one final mask layer. mask-compositespecifies how …

(Updated on )

mask-type

The mask-type CSS property indicates whether the SVG <mask> element is treated as an alpha mask or a luminance mask.

mask {
  mask-type: alpha;
}

When the mask layer is an image or a gradient, a mask-mode property can be …

(Updated on )

mask-mode

The mask-mode CSS property indicates whether the CSS mask layer image is treated as an alpha mask or a luminance mask.…

(Updated on )

mask-clip

The mask-clip CSS property is part of the CSS Masking Module Level 1 specification, and sets the mask painting area. It literally clips the background area of an element and defines which areas show through the mask: border, padding or

(Updated on )

mask-position

In CSS, the mask-position property specifies the initial position of a mask layer image relative to the mask position area. It works like the background-position property.

.element {
  mask-image: url("star.svg");
  mask-position: 20px center;
}
(Updated on )

mask-size

In CSS, the mask-size property specifies the size of a mask layer image. In many ways, it works very much like the background-size property.

.element {
  mask-image: url(star.svg);
  mask-size: 200px 100px;
}

Masking allows you to display selected parts of …

(Updated on )

gap

The gap property in CSS is a shorthand for row-gap and column-gap, specifying the size of gutters, which is the space between rows and columns within grid, flex, and multi-column layouts.

/* Grid layout */
.container {
  
(Updated on )