mask - Propriété CSS
Résumé des caractéristiques de la propriété mask
Description de la propriété mask
.
mask
est 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é raccourcie 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
: 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.
Syntaxe de mask
.
mask
étant une propriété raccourcie, 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.
Test de votre navigateur.
Le cadre ci-dessous doit être vide, sinon c'est que votre navigateur n'a pas appliqué le masque.
Sur tous les exemples, les propriétés mask
et -webkit-mask
ont été utilisées pour améliorer
la compatibilité.
Exemple 1.
L'élément d'origine : une image
Le masque
un fichier png
Le résultat
Exemple 2.
L'élément d'origine : un texte
Le résultat
Exemple 3.
L'élément d'origine : une image
Le masque
un fichier SVG
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é.
L'élément d'origine : un texte
Le masque (hachures)
un fichier png
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 par les navigateurs (compatibilité).
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.).
mask
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que mask
.
Les spécifications CSS éditées par le W3C sont organisées en modules. mask
fait partie du Module CSS - Masquage (CSS Masking Module). Les définitions suivantes sont également décrites dans ce même module.