Day 87: mask properties

posted on

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.

a huge fire. multiple large palettes burning. HTMHell logo
img {
mask-image: url(/images/htmhell_logo.svg);
}

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

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;
}
Note: You need the -webkit- prefix for some browsers.

See on CodePen.