Mask-mode - Propriété CSS

mask-mode

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

Description rapide
Définit le mode de masquage (couche alpha, luminance...)
Statut
Standard
Utilisable sur
HTML, SVG
Valeurs prédéfinies
match-source | alpha | luminance
Pourcentages
Ne s'appliquent pas.
Valeur initiale
match-source
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété mask-mode 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 syntaxique de mask-mode.

mask-mode - Syntax DiagramSyntax diagram of the mask-mode CSS property. alpha alpha luminance luminance match-source match-source , ,mask-mode:;mask-mode:;
Schéma syntaxique de la propriété mask-mode.
Les liens du schéma donnent accès à plus d'informations

Description de la propriété mask-mode.

⚠
La propriété mask-mode n'est pas reconnue par tous les navigateurs. Chrome et Edge par exemple ne traitent que les maques du type alpha.

Le masquage consiste à cacher certaines parties d'un élément d'après un masque. Ce dernier peut être une image ou un fichier SVG.

La propriété mask-mode définit le type de masquage. Autrement dit, quelle est l'information du masque qui sera utilisée. Cela peut être la transparence ou la luminance.

Reportez-vous à la propriété mask pour des explications plus complètes sur la technique de masquage.

Valeurs pour mask-mode.

  • mask-mode: alpha;

    C'est le canal alpha, c'est à dire la transparence du masque qui est utilisée : l'élément masqué sera visible seulement dans les parties non transparentes du masque. Bien entendu c'est un traitement proportionnel : le masque peut comporter des parties plus ou moins transparentes ; la visibilité de l'élément sera ajustée en fonction.

    Cela suppose donc un masque dans un format capable de traiter la transparence : png, gif, svg...


    Le masque est un dégradé depuis la transparence vers le noir.
    AAA
    L'élément masqué est visible en fonction de la transparence du masque.


    Le masque est un dégradé depuis le blanc vers le noir,
    autrement dit totalement opaque.
    AAA
    L'élément auquel on applique le masque est visible en totalité puisque le masque ne comporte pas de parties transparentes.

  • mask-mode: luminance;

    C'est la luminance du masque qui est utilisée. Autrement dit, l'élément deviendra invisible dans les zones où le masque est noir ; l'élément sera inchangé dans les zones où le masque est blanc. Les zones de luminosité intermédiaire du masque rendront l'élément plus ou moins transparent.

    Néanmoins, les parties transparentes du masque continuent de jouer leur rôle, comme c'est le cas avec la valeur alpha. La valeur luminance applique donc un masque qui combine les valeurs de transparence et de luminance.


    Le masque est un dégradé depuis le blanc vers le noir.
    AAA
    L'élément masqué est visible en fonction de la luminance du masque.

  • mask-mode: match-source;

    Le choix alpha ou luminance est fait en fonction du type du masque. Les fichiers SVG comportant la balise mask peuvent être typés avec la propriété mask-type. C'est cette information qui est utilisée pour déterminer le type de masquage à employer.

  • mask-mode: alpha, alpha, luminance...;

    Plusieurs valeurs séparées par une virgule. Cette syntaxe est utilisable lorsque plusieurs masques sont appliqués sur un même élément. Chacune des valeurs correspond alors à l'un des masques.

    Reportez-vous à la page sur les masques multiples pour de plus amples informations.

  • mask-mode: initial; (match-source) mask-mode: inherit; mask-mode: revert; mask-mode: revertLayer; mask-mode: unset;

    Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété mask-mode.

⚠ Cette animation ne fonctionnera pas sur tous les navigateurs puisque certains d'entre eux ne traitent pas la propriété mask-mode.

Le masque est construit avec un dégradé radial répétitif (fonction repeating-radial-gradient().

Animation de la propriété mask-mode

Simulateur avec la propriété mask-mode.

⚠
Attention ! Le simulateur ne fonctionne pas sur certains navigateurs (Chrome, Edge).
mask-mode :
Image d'origine de la propriété CSS mask-mode
L'élément original
Masque pour la propriété CSS mask-mode
Le masque
Exemple d'utilisation de la propriété CSS mask-mode
Le résultat
Image d'origine de la propriété CSS mask-mode
L'élément original
Masque pour la propriété CSS mask-mode
Le masque
Exemple d'utilisation de la propriété CSS mask-mode
Le résultat

Prise en charge de mask-mode par les navigateurs.

Colonne 1
Support des techniques de masquage consistant à masquer un élément par une image ou une forme géométrique.
Colonne 2
Support for the mask-mode property to define whether the mask acts according to its transparency or according to its luminance.

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-mode
Estimation de la prise en charge globale.
92%
91%

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-mode

  • 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-mode.
    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 propriété mask-mode est présentée dans la spécification qui standardise tout ce qui concerne le masquage : CSS Masking Module (soit Module CSS - Masquage en français). Les propriétés ci-dessous sont également décrites dans ce module :

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-origin
Définit la référence pour le positionnement du masque.
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.