You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
With CSS Masking it is possible to specify another graphics element, shape or image file to be used as clipping region or an luminance or alpha mask for compositing the current object into the background.
26
+
This specification defines two different graphical operations which both fully or partly hide portions of an object.
27
27
28
-
The effect of applying a mask is as if the mask images or <i>mask sources</i> are rendered into an off-screen image which has been initialized to transparent black. The graphical object to which the mask is applied will be painted onto the background through the mask, thus completely or partially masking out parts of the graphical object.
29
-
30
-
Masks are applied using the 'mask-image' or 'mask-box-image-source' properties.
28
+
The <b>first operation</b> is called clipping.
31
29
32
-
The 'mask-image' property may reference a <a>'mask element'</a> as the mask source. Alternatively, for many simple uses, the 'mask-image' property may refer directly to images to be used as mask, forgoing the need for an explicit <a>'mask element'</a> element. The 'mask' property serves as a shorthand property for 'mask-box-image', 'mask-image' and other characterizing properties.
33
-
34
-
The 'mask-box-image-source' property splits a mask image into 9 pieces. The pieces may be sliced, scaled and stretched in various ways to fit the size of the <i>mask box image area</i>. The 'mask-box-image' property serves as a shorthand property for 'mask-box-image-source' and other characterizing properties.
A clipping path (middle) is applied on a polygon shaded with different colors (left). This results in a "clipped out" shape (right).
35
+
</p>
36
+
</div>
37
+
</div>
35
38
36
-
A <dfnexport>clipping path</dfn> defines an outline (in the absence of anti-aliasing) of a visual element where everything on the "inside" of the outline is allowed to show through but everything on the outside is masked out. A clipping path is specified by vector paths or shapes.
39
+
A closed vector path, shape or polygon defines a so called <dfnexport>clipping path</dfn>. This clipping path is a region (in the absence of anti-aliasing) where everything on the "inside" of this region is allowed to show through but everything on the outside is "clipped out" and does not appear on the canvas.
37
40
38
41
The 'clip-path' property can reference SVG <a>graphics element</a> or use specified basic shapes as clipping path.
The effect of applying a mask is as if the mask images or <i>mask sources</i> are rendered into an off-screen image which has been initialized to transparent black. The graphical object to which the mask is applied will be painted onto the background through the mask, thus completely or partially masking out parts of the graphical object.
55
+
56
+
Masks are applied using the 'mask-image' or 'mask-box-image-source' properties.
57
+
58
+
The 'mask-image' property may reference a <a>'mask element'</a> as the mask source. Alternatively, for many simple uses, the 'mask-image' property may refer directly to images to be used as mask, forgoing the need for an explicit <a>'mask element'</a> element. The 'mask' property serves as a shorthand property for 'mask-box-image', 'mask-image' and other characterizing properties.
59
+
60
+
The 'mask-box-image-source' property splits a mask image into 9 pieces. The pieces may be sliced, scaled and stretched in various ways to fit the size of the <i>mask box image area</i>. The 'mask-box-image' property serves as a shorthand property for 'mask-box-image-source' and other characterizing properties.
61
+
62
+
Note: While masking gives many possibilities for enhanced graphical effects and in general provides more control over the "visible portions" of the content, clipping paths can be more performant and are easier to interpolate.
63
+
49
64
<h2id="placement">Module interactions</h2>
50
65
51
66
This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied. These effects are applied after elements have been sized and positioned according to the <ahref="http://www.w3.org/TR/CSS2/visuren.html" title="Visual formatting model">Visual formatting model</a> from [[!CSS21]]. Some values of these properties result in the creation of a <aspec="css21">stacking context</a>. Furthermore, this specification replaces the section <ahref="http://www.w3.org/TR/CSS2/visufx.html#clipping">Clipping: the clip property</a> from [[!CSS21]].
<p>With CSS Masking it is possible to specify another graphics element, shape or image file to be used as clipping region or an luminance or alpha mask for compositing the current object into the background.
88
+
<p>This specification defines two different graphical operations which both fully or partly hide portions of an object.
89
89
90
-
<p>The effect of applying a mask is as if the mask images or <adata-link-type=dfnhref=#mask-sourcetitle="mask sources">mask sources</a> are rendered into an off-screen image which has been initialized to transparent black. The graphical object to which the mask is applied will be painted onto the background through the mask, thus completely or partially masking out parts of the graphical object.
91
-
92
-
<p>Masks are applied using the <aclass=propertydata-link-type=propdeschref=#propdef-mask-imagetitle=mask-image>mask-image</a> or <aclass=propertydata-link-type=propdeschref=#propdef-mask-box-image-sourcetitle=mask-box-image-source>mask-box-image-source</a> properties.
90
+
<p>The <b>first operation</b> is called clipping.
93
91
94
-
<p>The <aclass=propertydata-link-type=propdeschref=#propdef-mask-imagetitle=mask-image>mask-image</a> property may reference a <ahref=#MaskElement><codeclass=element-name><mask></code></a> as the mask source. Alternatively, for many simple uses, the <aclass=propertydata-link-type=propdeschref=#propdef-mask-imagetitle=mask-image>mask-image</a> property may refer directly to images to be used as mask, forgoing the need for an explicit <ahref=#MaskElement><codeclass=element-name><mask></code></a> element. The <aclass=propertydata-link-type=propdeschref=#propdef-masktitle=mask>mask</a> property serves as a shorthand property for <aclass=propertydata-link-type=propdeschref=#propdef-mask-box-imagetitle=mask-box-image>mask-box-image</a>, <aclass=propertydata-link-type=propdeschref=#propdef-mask-imagetitle=mask-image>mask-image</a> and other characterizing properties.
95
-
96
-
<p>The <aclass=propertydata-link-type=propdeschref=#propdef-mask-box-image-sourcetitle=mask-box-image-source>mask-box-image-source</a> property splits a mask image into 9 pieces. The pieces may be sliced, scaled and stretched in various ways to fit the size of the <adata-link-type=dfnhref=#mask-box-image-areatitle="mask box image area">mask box image area</a>. The <aclass=propertydata-link-type=propdeschref=#propdef-mask-box-imagetitle=mask-box-image>mask-box-image</a> property serves as a shorthand property for <aclass=propertydata-link-type=propdeschref=#propdef-mask-box-image-sourcetitle=mask-box-image-source>mask-box-image-source</a> and other characterizing properties.
A clipping path (middle) is applied on a polygon shaded with different colors (left). This results in a "clipped out" shape (right).
97
+
</p>
98
+
</div>
99
+
</div>
97
100
98
-
<p>A <dfndata-dfn-type=dfndata-export="" id=clipping-path>clipping path<aclass=self-linkhref=#clipping-path></a></dfn> defines an outline (in the absence of anti-aliasing) of a visual element where everything on the "inside" of the outline is allowed to show through but everything on the outside is masked out. A clipping path is specified by vector paths or shapes.
101
+
<p>A closed vector path, shape or polygon defines a so called <dfndata-dfn-type=dfndata-export="" id=clipping-path>clipping path<aclass=self-linkhref=#clipping-path></a></dfn>. This clipping path is a region (in the absence of anti-aliasing) where everything on the "inside" of this region is allowed to show through but everything on the outside is "clipped out" and does not appear on the canvas.
99
102
100
103
<p>The <aclass=propertydata-link-type=propdeschref=#propdef-clip-pathtitle=clip-path>clip-path</a> property can reference SVG <ahref=http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement>graphics element</a> or use specified basic shapes as clipping path.
<p>The effect of applying a mask is as if the mask images or <adata-link-type=dfnhref=#mask-sourcetitle="mask sources">mask sources</a> are rendered into an off-screen image which has been initialized to transparent black. The graphical object to which the mask is applied will be painted onto the background through the mask, thus completely or partially masking out parts of the graphical object.
117
+
118
+
<p>Masks are applied using the <aclass=propertydata-link-type=propdeschref=#propdef-mask-imagetitle=mask-image>mask-image</a> or <aclass=propertydata-link-type=propdeschref=#propdef-mask-box-image-sourcetitle=mask-box-image-source>mask-box-image-source</a> properties.
119
+
120
+
<p>The <aclass=propertydata-link-type=propdeschref=#propdef-mask-imagetitle=mask-image>mask-image</a> property may reference a <ahref=#MaskElement><codeclass=element-name><mask></code></a> as the mask source. Alternatively, for many simple uses, the <aclass=propertydata-link-type=propdeschref=#propdef-mask-imagetitle=mask-image>mask-image</a> property may refer directly to images to be used as mask, forgoing the need for an explicit <ahref=#MaskElement><codeclass=element-name><mask></code></a> element. The <aclass=propertydata-link-type=propdeschref=#propdef-masktitle=mask>mask</a> property serves as a shorthand property for <aclass=propertydata-link-type=propdeschref=#propdef-mask-box-imagetitle=mask-box-image>mask-box-image</a>, <aclass=propertydata-link-type=propdeschref=#propdef-mask-imagetitle=mask-image>mask-image</a> and other characterizing properties.
121
+
122
+
<p>The <aclass=propertydata-link-type=propdeschref=#propdef-mask-box-image-sourcetitle=mask-box-image-source>mask-box-image-source</a> property splits a mask image into 9 pieces. The pieces may be sliced, scaled and stretched in various ways to fit the size of the <adata-link-type=dfnhref=#mask-box-image-areatitle="mask box image area">mask box image area</a>. The <aclass=propertydata-link-type=propdeschref=#propdef-mask-box-imagetitle=mask-box-image>mask-box-image</a> property serves as a shorthand property for <aclass=propertydata-link-type=propdeschref=#propdef-mask-box-image-sourcetitle=mask-box-image-source>mask-box-image-source</a> and other characterizing properties.
123
+
124
+
<pclass=note>Note: While masking gives many possibilities for enhanced graphical effects and in general provides more control over the "visible portions" of the content, clipping paths can be more performant and are easier to interpolate.
<p>This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied. These effects are applied after elements have been sized and positioned according to the <ahref=http://www.w3.org/TR/CSS2/visuren.htmltitle="Visual formatting model">Visual formatting model</a> from <adata-biblio-type=normativedata-link-type=bibliohref=#css21title=css21>[CSS21]</a>. Some values of these properties result in the creation of a <adata-link-spec=css21data-link-type=dfnhref=http://www.w3.org/TR/CSS21/visuren.html#x43title="stacking context">stacking context</a>. Furthermore, this specification replaces the section <ahref=http://www.w3.org/TR/CSS2/visufx.html#clipping>Clipping: the clip property</a> from <adata-biblio-type=normativedata-link-type=bibliohref=#css21title=css21>[CSS21]</a>.
0 commit comments