Mojtaba Seyedi

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 an element while hiding the rest. The size of the mask is defined by the mask-size property.… Read article “mask-size”

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 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 2fr 1fr;
  gap: 30px 20px;
}

/* Flex layout */
.container {
  display: flex;
  gap: 10%;
}

/* Multi-column layout */
.container {
  column-count: 5;
  gap: 20px;
}

… Read article “gap”

The inset property in CSS is a shorthand for the four inset properties, top, right, bottom and left in one declaration. Just like the four individual properties themselves, inset has no effect on non-positioned (static) elements. In other words, an element must declare an explicit position value before inset properties can take effect.

.box {
  inset: 10px 20px 30px 40px;
  position: relative;
}

inset is initially defined in the CSS Logical Properties and Values Level 1 specification, which … Read article “inset”

The text-decoration-thickness property in CSS sets the stroke thickness of the decoration line that is used on text in an element. The text-decoration-line value needs to be either underline, line-through, or overline to reflect the thickness property.

.text {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}

… Read article “text-decoration-thickness”

The text-underline-offset property in CSS sets the distance of text underlines from their initial position.

.text {
  text-underline-offset: 0.5em;
}

Once you apply an underline for an element using text-decoration with the value of underline, you can say how far that line should be from your text using the text-underline-offset property.

Values

• auto: (Default) The browser will specify an appropriate offset for underlines.
• <length>: Any valid length with a specified unit (including negative values). This replaces any

… Read article “text-underline-offset”