A Sneak-Peek Under the Hood of the CSS Masking Module

The CSS masking module, http://www.w3.org/TR/css-masking , describes ways in which portions of visual elements can be partially or fully hidden.

One of the ways is by masking. Masking involves drawing the element and its children into a buffer and then compositing the buffer into the element’s parent. The transparency of the buffer before the compositing stage is influenced by luminance and alpha.

The other way is clipping which involves describing the visible region of visual elements. Things outside this region are ignored and not rendered.

CSS Masking module attempts to “spec”-ify the rendering of structured documents on various form factors (like screen, paper, speech)

Now, let us look at the various CSS properties laid out in the masking module.

 

clip-path

This property specifies a basic shape to create a clipping path. It can also reference a <clipPath> element.

The valid values can be “valid URL for clip”, <basic-shape> (Defined in CSS Shapes module, or <geometry-box>

A Geometry box can be one of:

• fill-box – It uses the object bounding box as reference box
• stroke-box – It uses the stroke bounding box as reference box
• view-box – It uses the nearest SVG viewport as reference box.

 

Example 1 – Example

.target { clip-path: polygon(polygon(15px 99px, 30px 87px, 65px 99px, 85px 55px,

122px 57px, 184px 73px); }

 

Example 2 Example of clipPath reference

.target { clip-path: url(“#myclip”);}

<clipPath id=”myclip”>

<polygon points=”15,99 30,87 65,99 85,55 122,57 184,104″/>

</clipPath>

 

 

clip-rule

This property specifies the algorithm to be used to determine where a given point is inside the clipping region.

The valid values for this property are nonzero and evenodd. Clip-rule does not apply for <basic-shape>,

Example 3

<g clip-rule=”nonzero”>

<clipPath id=”myclip”>

<path d=”…” clip-rule=”evenodd” />

</clipPath>

<rect clip-path=”url(#MyClip)” … />

</g>

 

 

mask-image

This property is used to set the mask layer image of an element. The value can be image or a URL to a mask reference. It can also be ‘none’.

 

Example 4

body { mask-image: linear-gradient(black 0%, transparent 100%) }

 

p { mask-image: none } // Value as none

 

div { mask-image: url(resources.svg#mask2) } // example with URL mask reference

 

mask-mode

This property is used to indicate whether the mask reference needs to be treated as luminance mask or alpha mask.

Example of mask mode

<style>

rect {

mask-image: url(#SVGMask); // Assuming mask id “SVMask” is defined

mask-mode: luminance;

}

</style>

 

mask-repeat

This property specifies how mask layer images are tiled after they are sized and positioned.

mask-position

This property specifies how mask layer images are tiled after they are sized and positioned.

Example showing mask-repeat and mask-position properties

body {

  mask-image: url("mylogo.png");

  mask-position: 75% 75%;

  mask-repeat: no-repeat;

}

 

Summary

In this article, we learned about various CSS properties related to masking module. I hope you have found the information useful.

About the author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com . You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508

 

References

http://www.w3.org/TR/css-masking/