CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



mask-origin

Mask-Origin is a CSS property that defines the origin of the mask positioning. It is used in conjunction with the mask-image property to create a mask effect on an element. The mask-origin property specifies where the mask image is positioned relative to the element's border box.

The mask-origin property can take four values: border-box, padding-box, content-box, and fill-box. The default value is border-box. Let's take a closer look at each value:

  • border-box: The mask image is positioned relative to the border box of the element. This is the default value.
  • padding-box: The mask image is positioned relative to the padding box of the element.
  • content-box: The mask image is positioned relative to the content box of the element.
  • fill-box: The mask image is stretched to fill the entire element, and is positioned relative to the element's border box.

Let's take a look at some code examples to see how the mask-origin property works:

Example 1: border-box

In this example, we have an image that we want to mask with a circle. We set the mask-image property to the circle image, and the mask-origin property to border-box. This means that the circle image will be positioned relative to the border box of the image.

  
    <div class="image">
      <img src="image.jpg" alt="Image">
    </div>

    .image {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      mask-image: url(circle.png);
      mask-origin: border-box;
    }
  

The result of this code will be an image that is masked with a circle:

Image

Example 2: padding-box

In this example, we have a div that we want to mask with a gradient. We set the mask-image property to the gradient, and the mask-origin property to padding-box. This means that the gradient will be positioned relative to the padding box of the div.

  
    <div class="box"></div>

    .box {
      width: 300px;
      height: 300px;
      padding: 50px;
      background: #fff;
      mask-image: linear-gradient(to bottom, transparent, black);
      mask-origin: padding-box;
    }
  

The result of this code will be a div that is masked with a gradient:

Example 3: content-box

In this example, we have a div that we want to mask with an image. We set the mask-image property to the image, and the mask-origin property to content-box. This means that the image will be positioned relative to the content box of the div.

  
    <div class="box">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, velit eget ultrices ultricies, elit elit bibendum elit, vel bibendum elit elit eget elit.</p>
    </div>

    .box {
      width: 300px;
      height: 300px;
      padding: 50px;
      background: #fff;
      mask-image: url(mask.png);
      mask-origin: content-box;
    }

    p {
      margin: 0;
    }
  

The result of this code will be a div that is masked with an image:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, velit eget ultrices ultricies, elit elit bibendum elit, vel bibendum elit elit eget elit.

Example 4: fill-box

In this example, we have a div that we want to mask with an image. We set the mask-image property to the image, and the mask-origin property to fill-box. This means that the image will be stretched to fill the entire div, and will be positioned relative to the border box of the div.

  
    <div class="box"></div>

    .box {
      width: 300px;
      height: 300px;
      background: #fff;
      mask-image: url(mask.png);
      mask-origin: fill-box;
    }
  

The result of this code will be a div that is masked with an image:

As you can see, the mask-origin property is a powerful tool for creating mask effects on elements. By using different values for the mask-origin property, you can position the mask image in different ways, and create a wide variety of mask effects.

Conclusion

The mask-origin property is a CSS property that defines the origin of the mask positioning. It is used in conjunction with the mask-image property to create a mask effect on an element. The mask-origin property can take four values: border-box, padding-box, content-box, and fill-box. By using different values for the mask-origin property, you can position the mask image in different ways, and create a wide variety of mask effects.

References

Activity