Day 87: mask properties

posted on 24.01.2023

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

You can use mask properties to apply a mask to an element.

Let's say you have an image and a logo. You can use the logo to mask the image.

img {
  mask-image: url(/images/htmhell_logo.svg);
}

There are a bunch of properties you can use to adjust the styling of the mask.

• mask-clip (MDN)
• mask-composite (MDN)
• mask-image (MDN)
• mask-mode (MDN)
• mask-origin (MDN)
• mask-position (MDN)
• mask-repeat (MDN)
• mask-size (MDN)

img {
  mask-image: url(/images/htmhell_logo.svg);
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
}

You can also apply a mask to an element.

div {
  max-width: 400px;
  aspect-ratio: 1;
  background-color: red;

  mask-image: url(/images/htmhell_logo.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

See on CodePen

Overview: 100 Days Of More Or Less Modern CSS