Mojtaba Seyedi

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 …

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: 

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 …

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 …

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

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 …

The mask-origin specifies the mask position area of a mask layer image. In other words, it defines where the origin of the mask layer image is, whether it’s the edge of the border, padding or content box.

.element 

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;
}

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 …

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 {