Detailed explanation of the wonderful CSS attribute MASK

This article will introduce a very interesting attribute mask in CSS.

As the name suggests, mask is translated as mask. In CSS, the mask property allows users to hide part or all of an element's visible area by masking or cropping an image to a specific area.

In fact, masks have been around for some time, but there are not many practical scenarios and they are rarely used in actual combat. This article will list some interesting scenarios created using masks.

grammar

The most basic way to use a mask is with an image, like this:

{
    /* Image values ​​*/
    mask: url(mask.png); /* Use bitmap as mask*/
    mask: url(masks.svg#star); /* Use the shape in the SVG graphic as a mask*/
}

Of course, the method of using pictures will be discussed later. The method of using pictures is actually quite complicated, because we first have to prepare the corresponding picture materials. In addition to pictures, mask can also accept a parameter similar to background, that is, gradient.

Similar to the following usage:

{
    mask: linear-gradient(#000, transparent) /* Use gradient as mask*/
}

So how to use it specifically? A very simple example, above we created a gradient from black to transparent, we put it into practice, the code is similar to this:

The following picture is superimposed with a gradient from transparent to black.

{
    background: url(image.png) ;
    mask: linear-gradient(90deg, transparent, #fff);
} 

After applying the mask, it becomes like this:

This DEMO can give you a brief understanding of the basic usage of mask.

Here we get the most important conclusion of using masks: the overlapping part of the image and the gradient transparent generated by the mask will become transparent.

It is worth noting that the gradient above uses linear-gradient(90deg, transparent, #fff) . The #fff solid color part here can actually be replaced with any color without affecting the effect.

CodePen Demo -- Basic usage of MASK

Use MASK to crop the image

Using the above simple application, we can use mask to achieve simple image cropping.

Use mask to implement image corner cutting mask

Using a linear gradient, we implement a simple chamfered shape:

.notching{
    width: 200px;
    height: 120px;
    background:
    linear-gradient(135deg, transparent 15px, deeppink 0)
    top left,
    linear-gradient(-135deg, transparent 15px, deeppink 0)
    top right,
    linear-gradient(-45deg, transparent 15px, deeppink 0)
    bottom right,
    linear-gradient(45deg, transparent 15px, deeppink 0)
    bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

Like this:

We apply the above gradient to the mask and replace the background with an image, and we can get an image with the cut corner effect:

background: url(image.png);
mask:
    linear-gradient(135deg, transparent 15px, #fff 0)
    top left,
    linear-gradient(-135deg, transparent 15px, #fff 0)
    top right,
    linear-gradient(-45deg, transparent 15px, #fff 0)
    bottom right,
    linear-gradient(45deg, transparent 15px, #fff 0)
    bottom left;
mask-size: 50% 50%;
mask-repeat: no-repeat;

The obtained effect is as follows:

CodePen Demo -- Use MASK to implement image corner cutting mask

Of course, there are many other ways to achieve the above effect, such as clip-path, and mask here is also a way.

Using masks with multiple images

The above is the effect of using mask on a single image. Let’s take a look at what kind of sparks can be created by using masks on multiple pictures.

Suppose we have two pictures, using mask, we can superimpose them together for display. The most common usage:

div {
    position: relative;
    background: url(image1.jpg);
 
    &::before {
        position: absolute;
        content: "";
        top: 0;left: 0; right: 0; bottom: 0;
        background: url(image2.jpg);
        mask: linear-gradient(45deg, #000 50%, transparent 50%);
    }
}

Two images, one completely overlapping the other, and then use mask: linear-gradient(45deg, #000 50%, transparent 50%) to separate the two images:

CodePen Demo -- Basic use of MASK, basic usage under multiple pictures

Of course, note that the gradient of the mask we used above is a completely solid color change without any transition effect.

Let's modify the gradient inside the mask slightly:

{
- mask: linear-gradient(45deg, #000 50%, transparent 50%)
+ mask: linear-gradient(45deg, #000 40%, transparent 60%)
}

You can get the effect of transitioning from picture 1 to picture 2:

CodePen Demo -- Basic use of MASK, basic usage under multiple pictures 2

Use MASK for transition animation

With the above preparation. Using some of the methods introduced above, we can use mask to perform transition animations between image switches.

Use linear gradient mask: linear-gradient() to switch

Still using the above demo, we can achieve the image display/transition effect by dynamically changing the mask value.

The code might look like this:

div {
    background: url(image1.jpg);
    animation: maskMove 2s linear;
}

@keyframes {
  0% {
    mask: linear-gradient(45deg, #000 0%, transparent 5%, transparent 5%);
  }
  1% {
    mask: linear-gradient(45deg, #000 1%, transparent 6%, transparent 6%);
  }
  ...
  100% {
    mask: linear-gradient(45deg, #000 100%, transparent 105%, transparent 105%);
  }
}

Of course, writing them one by one as above would be laborious, and we usually use preprocessors such as SASS/LESS to do this. Like this:

div {
    position: relative;
    background: url(image2.jpg) no-repeat;
 
    &::before {
        position: absolute;
        content: "";
        top: 0;left: 0; right: 0; bottom: 0;
        background: url(image1.jpg);
        animation: maskRotate 1.2s ease-in-out;
    }
}
 
@keyframes maskRotate {
    @for $i from 0 through 100 {
        #{$i}% {
            mask: linear-gradient(45deg, #000 #{$i + '%'}, transparent #{$i + 5 + '%'}, transparent 1%);
        }
    }
}

You can get the following effect (displaying and hiding a single picture and switching between two pictures):

CodePen Demo -- MASK linear-gradient transition

Use angular gradient mask: conic-gradient() to switch

Of course, in addition to mask: linear-gradient() , radial gradient or angular gradient are also possible. The same principle applies to angular gradients:

@keyframes maskRotate {
    @for $i from 0 through 100 {
        #{$i}% {
            mask: conic-gradient(#000 #{$i - 10 + '%'}, transparent #{$i + '%'}, transparent);
        }
    }
}

You can achieve the angular gradual display/switching of pictures:

CodePen Demo -- MASK conic-gradient transition

This technique has more rich examples in Zhang Xinxu's article, which you can read:

You can change those CSS transition animations you use

Using this technique, we can achieve many interesting picture effects. Like this:

Mask collision filter and blending mode

Continue to the next step. There are many interesting properties in CSS, which will create more sparks when combined with filters and blending modes.

mask & filter: contrast()

First, we use multiple radial gradients to create a picture like this.

{
  background: radial-gradient(#000, transparent);
  background-size: 20px 20px;
} 

It doesn’t look special, so let’s use filter: contrast() contrast filter to modify it. The code is probably like this:

html,body {
    width: 100%;
    height: 100%;
    filter:contrast(5);
}
 
div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
     
    &::before {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background: radial-gradient(#000, transparent);
        background-size: 20px 20px;
    }
}

You can get a graphic like this, and use the contrast filter to make the graphic very sharp.

At this time, we superimpose different mask masks. You can get a variety of interesting graphic effects.

body {
    filter:contrast(5);
}
 
div {
    position: relative;
    background: #fff;
     
    &::before {
        background: radial-gradient(#000, transparent);
        background-size: 20px 20px;
      + mask: linear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5));
    }
} 

CodePen Demo -- Using masks with filters

We superimpose a linear gradient mask linear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5)) . Note that both gradient colors are transparent.

Or change to a radial gradient:

{
    mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 25%);
} 

CodePen Demo -- Using masks with filters

Okay, next, similar to the above, we add animation.

div {
    ...
     
    &::before {
        background: radial-gradient(#000, transparent);
        background-size: 20px 20px;
        mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 25%);
        animation: maskMove 15s infinite linear;
    }
}
 
@keyframes maskMove {
    @for $i from 0 through 100 {
        #{$i}% {
            mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 #{$i + 10 + '%'});
        }
    }
}

Take a look, we can get a very cool animation effect:

CodePen Demo -- Using masks with filters, contrast and animation

Remember using the hue filter: hue-rotate() ? By adding this, we can make the colors change as well.

CodePen Demo -- Using mask with filter contrast and animation 2

mask & filter: contrast() & blending modes

Next we add the blending mode.

Note that above, our container background color is actually white #fff .

We can create different effects by nesting one more level, adding a container background color, and then overlaying the blending mode.

Without adding mask , reconstruct the structure. The final pseudo code is as follows:

<div class="wrap">
    <div class="inner"></div>
</div>

.wrap {
    position: relative;
    height: 100%;
    background: linear-gradient(45deg, #f44336, #ff9800, #ffeb3b, #8bc34a, #00bcd4, #673ab7);
}
 
.inner {
    height: 100%;
    background: #000;
    filter:contrast(700%);
    mix-blend-mode: multiply;
     
    &::before {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background: radial-gradient(#fff, transparent);
        background-size: 12px 12px;
    }
}

The principle example diagram is as follows:

We can get the following effect:

OK, at this step, the mask has not been applied, let's add the mask.

.wrap {
    background: linear-gradient(45deg, #f44336, #ff9800, #ffeb3b, #8bc34a, #00bcd4, #673ab7);
}
 
.inner {
    ...
    filter:contrast(700%);
    mix-blend-mode: multiply;
     
    &::before {
        background: radial-gradient(#fff, transparent);
        background-size: 12px 12px;
      + mask: linear-gradient(#000, rgba(0, 0, 0, .5));
    }
} 

CodePen Demo -- mask & filter & blend-mode

The actual effect is much better than the screenshot. You can click Demo to see it.

Of course, what is superimposed here is mix-blend-mode: multiply . You can try other blending modes to get other different effects.

For example, adding mix-blend-mode: difference , and so on:

There are more interesting superpositions, and interested students need to try more on their own.

Mask and pictures

Of course, the most essential function of mask is still to act on the picture. The important conclusions drawn above are:

The overlapping parts of the image and the gradient transparent generated by the mask will become transparent.

It can also be applied to images passed in via the mask attribute. That is to say, mask can be passed into the image material, and the transparent overlapping part of the background-image and the mask image will become transparent.

Using this technique, you can create very cool transition animations:

In fact, here we mainly use such a picture in the mask:

Then, frame-by-frame animation is used to quickly switch the mask of each frame:

.img1 {
    background: url(image1.jpg) no-repeat left top;
}
 
.img2 {
    mask: url(https://i.imgur.com/AYJuRke.png);
    mask-size: 3000% 100%;
    animation: maskMove 2s steps(29) infinite;
}
 
.img2::before {
    background: url(image2.jpg) no-repeat left top;
}
 
@keyframes maskMove {
    from {
        mask-position: 0 0;
    }
    to {
        mask-position: 100% 0;
    }
}

CodePen Demo -- Mask transition animation

Of course, various animations can also be added to this. This has been demonstrated many times above, and students who are interested can try it themselves.

at last

Having said so much, mask is actually still a relatively unpopular attribute. There are not many opportunities to apply it in daily business.

And the compatibility is not particularly good. Open MDN and you can see that in addition to the mask itself, there are many mask-related properties, but most of them are still in the laboratory stage. This article only briefly introduces the mask itself, and some mask-related properties will be discussed in another article.

Of course, even so, from the property itself, I think mask is still very interesting and brings more possibilities to CSS.

This is the end of this article about the detailed explanation of the wonderful CSS attribute MASK. For more relevant CSS attribute MASK content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!