Mask-origin - Propriété CSS

Schéma de la syntaxe de mask-origin.

Description de la propriété mask-origin.

Le masquage est une technique relativement récente, définie dans le module "CSS Masking" du W3C. Elle consiste à cacher certaines parties d'un élément en fonction d'une image désignée comme le masque. Le masquage peut être total ou partiel (semi-transparence).

La propriété mask-origin définit la référence utilisée pour positionner le masque. En gros, le positionnement se fait-il par rapport au contenu de l'élément, sa bordure ou ses marges ?
La propriété mask-position définit la position du masque par rapport à cette référence.

Pour des explications plus complètes sur le masquage, reportez-vous à la propriété raccourcie mask.

Valeurs pour mask-origin.

• mask-origin: content-box;

  La position du masque est déterminée par rapport au contenu de l'élément. Notez que le masque se continue sur la marge intérieure et sur la bordure, simplement il est positionné par rapport au contenu. La propriété mask-position est quant à elle, fixée à sa valeur par défaut : 0 0.
• mask-origin: padding-box;

  Le masque est positionné par rapport à la marge intérieure (padding) de l'élément.
• mask-origin: border-box;

  Le masque est positionné par rapport à la bordure de l'élément.
• mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;

  Ces trois valeurs sont applicables aux éléments du type SVG.

• mask-origin: initial; (border-box) mask-origin: inherit; mask-origin: revert; mask-origin: revertLayer; mask-origin: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de mask-origin.

L'exemple ci-dessous est une Exemple d'animation de mask-origin. Le résultat peut surprendre. Il s'explique par le fait que le masque utilisé est un fichier SVG non dimensionné, donc qui s'adapte à la taille de l'élément. Le masque est une ellipse et se répète : on voit apparaître des portions d'ellipse sur le contour.

Exemple interactif avec la propriété mask-origin.

Le cadre ci-dessous comporte une bordure de 20 pixels et des marges intérieures de 20 pixels également. Le masque est un fichier png représentant un carré. Il est appliqué une seule fois ( mask-repeat:no-repeat ).

Compatibilité des navigateurs avec mask-origin.

Les techniques de masquage et les propriétés en rapport sont maintenant bien prises en charge par les navigateurs actuels.

Remarques :

(1) Nécessite le préfixe -webkit-. Supporte les propriétés mask-image et mask-box-image mais pas les autres propriétés relatives aux masques.

1

Masquage par
une image

2

Propriété
mask-origin

Estimation de la prise en charge globale.

92%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

1

Opéra Mobile

QQ Browser

1

Baidu Browser

1

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

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété mask-origin.

• Module CSS - Masquage - Niveau 1

  Concernant mask-origin. Introduction des techniques de masquage par image. Et première définition des propriétés correspondantes dont la propriété mask-origin.
  

  15 Novembre 2012

  Document de travail.

  

  26 Août 2014

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des techniques de masquage.

La spécification qui standardise tout ce qui concerne le masquage s'appelle Module CSS - Masquage, ou "Module CSS - Masquage" en français. Comme toutes les normes relatives à Internet, elle est publiée par le W3C. La propriété mask-origin et les propriétés ci-dessous sont décrites dans cette spécification :

Propriétés :