Mask-clip - CSS Property
Summary of characteristics of the mask-clip property
SVG: containers except defs, graphic elements, use.
border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip | textborder-boxDiscrète: during an animation, the mask-clip property passes from one value to another without transition.Per grammar: serialization in the order of syntax.Syntax diagram of mask-clip.
mask-clip property.The links in the diagram provide more details about the values.
Download the diagram.
Description of the mask-clip property.
Masking involves making two elements interact with each other. One of them, called the mask, hides certain parts of the other. Masking is proportional to the mask's alpha channel. So it is possible to use masks with semi-transparent areas.
The property mask-clip defines the area of the element that will be affected by the mask.
Parts of the element outside this area won't be displayed.
mask-clip has no effect if no mask is applied to the element (see mask-image or mask ).
For mask-clip to be operational, the mask must be a PNG file or a gradient, but not a SVG file. For masks written in SVG, you'll
need to use the attributes of the mask tag: x, y, width, height, and maskUnits.
It's less convenient than CSS.
Here's an example. The element below has a 10-pixel border and 20 pixels of padding (padding).
A mask is applied to it, creating this pointillism effect. Here's what will be visible depending on the value assigned to mask-clip.
The parts not covered by the mask are not displayed.
border-boxThe element is fully visible, with its border and inner margins.
padding-boxThe inner margins are visible, but not the border.
content-boxThe border and the inner margins are hidden.
For more complete explanations on masking, refer to the shortcut property mask .
Values for mask-clip.
- mask-clip: border-box;
With the
border-boxvalue, the content, padding, and border of the element are affected by the mask. It's the default value.Contentmask-clip:border-box; - mask-clip: padding-box;
The content and inner padding of the element are affected by the mask, but not the border.
Contentmask-clip:padding-box; - mask-clip: content-box;
Only the content of the element is affected by masking, excluding its inner padding (
padding) and border.Contentmask-clip:content-box; - mask-clip: no-clip;
The
no-clipvalue doesn't change anything about the mask's area: no cutting is done.Contentmask-clip:no-clip; - mask-clip: fill-box; mask-clip: stroke-box; mask-clip: view-box;
These three values apply to SVG-type elements. In HTML, we have the following equivalents:
fill-boxis equivalent tocontent-box.stroke-boxis equivalent toborder-box.view-boxhas no equivalent. It behaves likeborder-boxorno-clip.
Content
clip-mask:fill-box;Content
clip-mask:stroke-box;Content
clip-mask:view-box; - mask-clip: text; ⚠
The area where the mask applies is limited to the shape of the element's text. Not all browsers recognize this value.
Contentmask-clip:text; - mask-clip: border-box, content-box;
When several are indicated, separated by commas,
mask-clipassigns each of the values to a mask. See themaskproperty for more information on masques multiples.The example below has two masks. The first one, a color gradient, gets the value
border-box. The border is actually partially masked at the bottom. The second one is a PNG image (a grid pattern) that only applies topadding-box: the border isn’t affected.Contentmask-clip:border-box,padding-box; - mask-clip: initial; (
border-box) mask-clip: inherit; mask-clip: revert; mask-clip: revert-layer; mask-clip: revert-rule; mask-clip: unset;These values are described in more detail on their respective page:
initial,inherit,revert,revert-layer,revert-rule,unset.
Animation of the mask-clip property.
Here's an example of an animation for the mask-clip property, which results in a blinking border.
Access the mask-clip property via a program
With Javascript, read the value of mask-clip.
Here are two examples of Javascript code to change the value of the mask-clip property. Javascript allows a syntax with the typical CSS notation,
in kebab-case, and another syntax with the camel-case notation, which is more common in Javascript.
let el = document.getElementById('id');
el.style['mask-clip'] = 'content-box';
// or
let el = document.getElementById('id');
el.style.maskClip = 'content-box';
With Javascript, change the value of mask-clip.
This code gets the value of the mask-clip property if it has been assigned directly to the element itself in the HTML code, using the
style attribute and not through CSS with a selector. So it's basically the mirror of the previous code.
let el = document.getElementById('id');
let value = el.style['mask-clip'];
// or
let el = document.getElementById('id');
let value = el.style.maskClip;
With Javascript, read the computed value of mask-clip.
The computed value is the one that has been assigned to the element via any selector, or failing that, the one obtained through the inheritance mechanism.
If the value hasn't been assigned anywhere, it will be the initial value: border-box.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('mask-clip');
With JQuery, read or change the value of mask-clip.
Like in JavaScript, writing in kebab-case and camel-case is accepted.
// Read the value:
$('#id').prop('mask-clip');
// Write the value:
$('#id').prop('mask-clip', 'content-box');
$('#id').prop('{mask-clip': 'content-box'});
With JQuery, read the computed value of mask-clip.
let value = $('#id').css('mask-clip');
Other code examples.
Go check out other examples of JavaScript and JQuery code on the page Javascript and CSS.
Test it yourself.
The buttons below apply the entered value to the mask-clip property and then display either the value as it was applied or the computed value,
which, in the case of mask-clip, won't make a difference since the property only accepts predefined values.
Simulator.
The demo block below has 20-pixel margins, a 10-pixel border, 20 pixels of padding, and a blue background. This helps visualize the parts that are
visible and those that are hidden depending on the value given to mask-clip.
Browsers compatibility with mask-clip.
The property mask-clip is well recognized by all recent browsers.
mask-clip which defines how far the mask extends.Notes:
(1) Requires the -webkit- prefix. Supports the properties mask-image and >mask-box-image but not the other mask-related properties.
as a mask
mask-clipproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Samsung Internet
Safari
Safari sur IOS
Chrome
Opéra
Edge
Chrome pour Androïd
Firefox pour Androïd
Firefox
Androïd Brower
KaiOS Browser
Opéra mini
Historic of the mask-clip property.
-
CSS Masking Module Level 1
This specification module describes two ways to partially or completely hide portions of visual elements: masking and clipping.
Masking involves using another graphic element or an image as a mask.
Clipping describes the visible region of visual elements. The region can be described using certain SVG graphic elements or simple shapes. Anything outside this region is not rendered.Regardingmask-clipIntroduction of image masking techniques. And initial definition of themask-clipproperty.
November 15, 2012Working Draft.
August 26, 2014Candidate Recommendation.
See also, about masking techniques.
The property mask-clip is defined in the specification that standardizes everything related to masking, which is called CSS Masking Module.
The following properties are also presented in this module:
Properties: