CSS Masking - mask-clip Property

CSS mask-clip property can take various values to specify how the mask should be clipped relative to the element's box.

Possible Values

  • content-box − The mask is clipped to the outer edge of the element's content box.

  • padding-box − The mask is clipped to the outer edge of the element's padding box.

  • border-box − The mask is clipped to the outer edge of the element's border box.

  • fill-box − The mask is clipped to the object bounding box, including the padding and border.

  • stroke-box − The mask is clipped to the stroke (border-area) bounding box.

  • view-box − The nearest SVG viewport is considered as a reference box. SVG elements with a viewBox attribute have their content placed at the origin of the coordinate system defined by the viewBox, and the size / dimensions of the reference box is set to the width and height specified in the viewBox attribute.

  • no-clip − The mask is not clipped; it extends beyond the element's box.

Applies to

All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements

Syntax

<geometry-box> Values

 mask-clip: content-box;
 mask-clip: padding-box;
 mask-clip: border-box;
 mask-clip: fill-box;
 mask-clip: stroke-box;
 mask-clip: view-box;

Keyword Values

 mask-clip: no-clip;

CSS mask-clip - content-box

The following example demonstrates that the -webkit-mask-clip: content-box property clips mask the outer edge of the element's content box, without considering padding and border −

<html>
<head>
<style>
   .mask-container {
      width: 100px;
      height: 100px;
      background-color: gold;
      margin: 10px;
      border: 20px solid red;
      padding: 20px;
      -webkit-mask-image: url(images/book.png);
      -webkit-mask-size: 100% 100%;
      -webkit-mask-clip: content-box;
      mask-image: url(images/book.png);
      mask-size: 100% 100%;
      mask-clip: content-box;
   }
</style>
</head>
<body>
   <div class="mask-container">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</body>
</html>

CSS mask-clip - padding-box

The following example demonstrates that the -webkit-mask-clip: padding-box property clips mask to the padding box of the element, without considering border −

<html>
<head>
<style>
   .mask-container {
      width: 100px;
      height: 100px;
      background-color: gold;
      margin: 10px;
      border: 20px solid red;
      padding: 20px;
      -webkit-mask-image: url(images/book.png);
      -webkit-mask-size: 100% 100%;
      -webkit-mask-clip: padding-box;
      mask-image: url(images/book.png);
      mask-size: 100% 100%;
      mask-clip: padding-box;
   }
</style>
</head>
<body>
   <div class="mask-container">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</body>
</html>

CSS mask-clip - border-box

The following example demonstrates that the -webkit-mask-clip: border-box property clips mask to the border box of the element, including padding and border −

<html>
<head>
<style>
   .mask-container {
      width: 100px;
      height: 100px;
      background-color: gold;
      margin: 10px;
      border: 20px solid red;
      padding: 20px;
      -webkit-mask-image: url(images/book.png);
      -webkit-mask-size: 100% 100%;
      -webkit-mask-clip: border-box;
      mask-image: url(images/book.png);
      mask-size: 100% 100%;
      mask-clip: border-box;
   }
</style>
</head>
<body>
   <div class="mask-container">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</body>
</html>

CSS mask-clip - fill-box

The following example demonstrates that the -webkit-mask-clip: fill-box property clips mask to the content box element, without the padding and border −

<html>
<head>
<style>
   .mask-container {
      width: 100px;
      height: 100px;
      background-color: gold;
      margin: 10px;
      border: 20px solid red;
      padding: 20px;
      -webkit-mask-image: url(images/book.png);
      -webkit-mask-size: 100% 100%;
      -webkit-mask-clip: fill-box;
      mask-image: url(images/book.png);
      mask-size: 100% 100%;
      mask-clip: fill-box;
   }
</style>
</head>
<body>
   <div class="mask-container">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</body>
</html>

CSS mask-clip - stroke-box

The following example demonstrates that the -webkit-mask-clip: stroke-box property clips mask to the stroke-box (border-area) of the image element, including the padding and border −

<html>
<head>
<style>
   .mask-container {
      width: 100px;
      height: 100px;
      background-color: gold;
      margin: 10px;
      border: 20px solid red;
      padding: 20px;
      -webkit-mask-image: url(images/book.png);
      -webkit-mask-size: 100% 100%;
      -webkit-mask-clip: stroke-box;
      mask-image: url(images/book.png);
      mask-size: 100% 100%;
      mask-clip: stroke-box;
   }
</style>
</head>
<body>
   <div class="mask-container">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</body>
</html>

CSS mask-clip - view-box

An SVG mask is used to hide parts of an image or shape based on the shape of another image or shape.

The following example demonstrates that the mask shape is a circle in the middle of the SVG element, and the masked element is a rectangle that covers the entire SVG element −

<html>
<head>
<style>
   .mask-container {
      width: 300px;
      height: 200px;
      position: relative;
   }
   svg {
      width: 100%;
      height: 100%;
   }
   rect {
      fill: yellow;
   }
   .mask-rectangle {
      mask: url(#maskViewbox);
      -webkit-mask-clip: view-box;
   }
</style>
</head>
<body>
   <div class="mask-container">
      <svg viewBox="0 0 150 100">
         <mask id="maskViewbox" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
         <rect x="0" y="0" width="1" height="1"/>
         <circle cx="0.5" cy="0.5" r="0.4"/>
         </mask>
         <rect x="0" y="0" width="100%" height="100%" class="mask-rectangle"/>
      </svg>
   </div>
</body>
</html>

CSS mask-clip - no-clip

The following example demonstartes how -webkit-mask-clip: no-clip property prevents mask image from clipping −

<html>
<head>
<style>
   .mask-container {
      width: 100px;
      height: 100px;
      background-color: gold;
      margin: 10px;
      border: 20px solid red;
      padding: 20px;
      -webkit-mask-image: url(images/book.png);
      -webkit-mask-size: 100% 100%;
      -webkit-mask-clip: no-clip;
      mask-image: url(images/book.png);
      mask-size: 100% 100%;
      mask-clip: no-clip;
   }
</style>
</head>
<body>
   <div class="mask-container">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</body>
</html>
Advertisements