Skip to main content
Almanac

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

Almanac

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 {
  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”
Almanac

inset

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”

Almanac

text-decoration-thickness

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”
Almanac

text-underline-offset

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”
Article

5 Awesome Sublime Plugins you Won’t Find in Top Plugin Posts

I am a huge fan of Sublime text editor and whenever I go and try other text editors I come back to Sublime crying: “Forgive me I’ll never, ever, leave you again!” But I’m not here to praise Sublime. In this post I’m rather going to share some of the Sublime plugins I’ve been using a lot and which are really helpful and fun to work with. You may find them for your favorite text editor as well.

Let’s dive … Read article “5 Awesome Sublime Plugins you Won’t Find in Top Plugin Posts”