Mask-origin - Propriété CSS

mask-origin

Résumé des caractéristiques de la propriété mask-origin

Description rapide
Définit la référence pour le positionnement du masque.
Statut
Standard
Utilisable sur
HTML, SVG
Valeurs prédéfinies
border-box | padding-box | content-box | view-box | stroke-box | fill-box
Pourcentages
Ne s'appliquent pas.
Valeur initiale
border-box
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété mask-origin passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Masquage
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de mask-origin.

mask-origin - Syntax DiagramSyntax diagram of the mask-origin CSS property. content-box content-box padding-box padding-box border-box border-box fill-box fill-box stroke-box stroke-box view-box view-boxmask-origin:;mask-origin:;
Schéma syntaxique de la propriété mask-origin.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description de la propriété mask-origin.

⚠
mask-origin est une propriété récente encore en cours de définition par le W3C. Avant de l'utiliser, vérifier sa compatibilité avec les navigateurs actuels, et doublez les syntaxes avec le préfixe -webkit-.

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ète 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.

  • 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.

Animation de la propriété mask-origin

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 une série de petits points. Il est appliqué une seule fois ( mask-repeat:no-repeat ).

mask-origin :
Le cadre ci-dessous comporte une bordure et des marges intérieures de 20 pixels. Le masque est une image représentant une série de petits points. Il n'est pas répété

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.

Colonne 1
Support des techniques de masquage consistant à masquer un élément par une image ou une forme géométrique.
Colonne 2
Support de la propriété mask-origin qui définit par rapport à quoi le masque est positionné.

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

Historique de la propriété mask-origin

  • Module CSS - Masquage - Niveau 1

    Introduction des techniques de masquage par image. Et première définition des propriétés correspondantes dont la propriété mask-origin.
    WD
    15 Novembre 2012
    Document de travail.
    CR
    26 Août 2014
    Candidat à la recommandation.
    PR
    REC

Voir aussi, au sujet des techniques de masquage.

La spécification qui standardise tout ce qui concerne le masquage s'appelle CSS Masking Module, 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 :

✗
clip
Découpe un élément à partir d'un rectangle.
clip-path
Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...).
clip-rule
Définit comment gérer les formes creuses dans le contexte d'un découpage.
mask
Propriété résumée définissant les paramètres de masquage : dimensions du masque, position, répétition, origine, etc.
mask-border
Définit tous les paramètres d'un masque pour la bordure d'un élément.
⚠
mask-border-mode
Définit sur quel paramètre le masque doit agir (luminance, alpha).
⚠
mask-border-outset
Définit le décalage éventuel du masque de bordure par rapport à l'élément.
⚠
mask-border-repeat
Définit le mode de répétition du masque.
⚠
mask-border-slice
Définit comment l'image utilisée comme masque doit être découpée.
⚠
mask-border-source
Désigne l'image qui sera utilisée comme masque (masque du type bordure).
⚠
mask-border-width
Définit l'épaisseur de la bordure pour l'application d'un masque.
mask-clip
Définit la zone concernée par le masquage.
mask-composite
Définit comment seront combinés les masques lorsque plusieurs sont appliqués sur un élément.
mask-image
Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
mask-mode
Définit le mode de masquage (couche alpha, luminance...)
mask-position
Définit la position du masque.
mask-repeat
Définit le mode de répétition du masque lorsque celui-ci est plus petit que l'élément à masquer.
mask-size
Fixe les dimensions du masque.