Mask - Propriété CSS

mask

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

Description rapide
Propriété résumée définissant les paramètres de masquage : dimensions du masque, position, répétition, origine, etc.
Statut
Standard
Utilisable sur
HTML, SVG
Pourcentages
Reportez-vous aux propriétés individuelles.
Valeur initiale
Voir les propriétés individuelles.
Héritée par défaut
Non.
Type d'animation
Voir les propriétés individuelles.
Module W3C
Module CSS - Masquage
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Description de la propriété mask.

⚠
La propriété mask a été récemment standardisée par le W3C. Avant de l'utiliser, vérifier sa compatibilité avec les navigateurs actuels, et n'hésitez pas à utiliser les préfixes spécifiques à chaque navigateur (-webkit- en particulier.).

La technique de masquage permet de cacher certaines parties d'un élément en fonction d'un masque. Ce dernier sera le plus souvent une image, mais peut aussi être un fichier SVG, ou défini avec des fonctions de dégradé comme linear-gradient() par exemple.

En ajustant la densité du masque, il est possible de masquer totalement l'élément ou de seulement l'estomper. Ceci est un plus par rapport à la propriété clip-path qui ne permet que les découpes franches.

mask est une propriété résumée qui définit les valeurs pour les propriétés suivantes :

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

Valeurs pour mask.

mask étant une propriété résumée, elle regroupe toutes les valeurs des propriétés individuelles. Reportez-vous à la page de chacune de ces propriétés pour une description précise de leur syntaxe. Les exemples ci-dessous sont également un bon moyen de découvrir les syntaxes les plus courantes.

Exemples.

Sur tous les exemples, les propriétés mask et -webkit-mask ont été utilisées pour améliorer la compatibilité.

Exemple 1.

Illustration de la propriété CSS mask - L'image

L'élément d'origine : une image
Illustration de la propriété CSS mask - Le masque
Le masque
un fichier png
Illustration de la propriété CSS mask - Le résultat

Le résultat

 

Exemple 2.

Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret.

L'élément d'origine : un texte



Le masque : un dégradé linéaire
défini par le fonction linear-gradient().
Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret.

Le résultat

 

Exemple 3.

Illustration de la propriété CSS mask - L'image

L'élément d'origine
une image
Masque pour exemple
Le masque
un fichier SVG
Illustration de la propriété CSS mask - Le résultat

Le résultat

 

Exemple 4 - Du texte hachuré.

Lorsque l'élément masqué a un arrière-plan (couleur ou image), celui-ci est également hachuré. Certains navigateurs comme Chrome, proposent la valeur non standard text pour mask-clip. Cette valeur n'applique le masque que sur le texte. L'arrière-plan du coup n'est plus affiché, mais c'est quelquefois le résultat cherché.

TEXTE
TEXTE

L'élément d'origine : un texte


Illustration de la propriété CSS mask - Le masque

Le masque (hachures)
un fichier png
TEXTE
TEXTE

Le résultat

 

Masques multiples.

Il est tout à fait possible d'appliquer plusieurs masques à un même élément. En effet, les propriétés relatives aux masques acceptent une valeur unique (un seul masque) ou une série de valeurs séparées par des virgules. L'exemple de syntaxe ci-dessous applique deux masques.

mask-image:url('chemin/fichier1.png'), url('chemin/fichier2.png);

La propriété mask-composite est particulièrement importante dans le cas de masques multiples : elle définit comment les masques doivent interagir entre eux. Est-ce que leurs effets s'ajoutent ? Est-ce que, au contraire, les effets doivent être soustraits, etc. Tout ceci est défini par mask-composite}.

Prise en charge de mask par les navigateurs.

La prise en charge de la propriété mask et de ses dérivées est maintenant correcte sur la plupart des navigateurs. Pour plus de précisions sur les fonctionnalités prises en charge et celles qui ne le sont pas, reportez-vous aux propriétés individuelles (mask-mode, mask-repeat, etc.).

Colonne 1
Support des techniques de masquage consistant à masquer un élément par une image ou une forme géométrique.

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
Propriété
mask
Estimation de la prise en charge globale.
92%

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

Historique de la propriété mask

  • Module CSS - Masquage - Niveau 1

    Introduction des techniques de masquage par image. Et première définition de la propriété résumée mask.
    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 (Module CSS - Masquage). La propriété mask et les propriétés ci-dessous sont présentées 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-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-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.