Day 87: mask properties

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

.post img {
border: none;
}
.mask {
-webkit-mask-image: url(/blog/2023/100daysof-day87/htmhell_logo.svg);
mask-image: url(/blog/2023/100daysof-day87/htmhell_logo.svg);
}
.mask-size {
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.element {
max-width: 400px;
aspect-ratio: 1;
background-color: red;
-webkit-mask-image: url(/blog/2023/100daysof-day87/htmhell_logo.svg);
mask-image: url(/blog/2023/100daysof-day87/htmhell_logo.svg);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}

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

My blog doesn’t support comments yet, but you can reply via [email protected].