Mask - Propriété CSS
Résumé des caractéristiques de la propriété mask
SVG : conteneurs sauf defs, éléments graphiques, use.
Description de la propriété mask.
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-image: Désigne l'image ou le fichier SVG qui sera utilisé comme masque.mask-position: Définit la position du masque.mask-size: Fixe les dimensions 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-origin: Définit la référence pour le positionnement du 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-mode: Définit le mode de masquage (couche alpha, luminance...)
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.
- mask: none;
Il n'y a pas de masquage de l'élément. Si un masquage était prévu, il est supprimé.
- mask: <image> <position> / <size> <repeat> <origin> <clip> <composite> <mode>;
La propriété résumée reprend les valeurs de toutes les propriétés détaillées, dans l'ordre énuméré ci-dessus. Il y a une certaines tolérance dans cet ordre dans la mesure où il s'agit de mots réservés tous différents. par contre le
/est obligatoire si vous voulez préciser la taille du maques.
Les valeurs ignorées sont remises à leur valeur initiale. - mask: initial; mask: inherit; mask: revert; mask: revert-layer; mask: revert-rule; mask: unset;
Pour plus d'informations, reportez-vous aux pages de présentation de ces différentes valeurs :
initial,inherit,revert,revert-layer,revert-rule,unset.
Exemples.
Masquer avec une image PNG.
Le fichier PNG a des dimensions intrinsèques. Il est possible de répéter celui-ci pour couvrir tout l'élément.
L'élément d'origine : une image
(mais cela pourrait être un texte).
Le masque : un fichier PNG.
Le résultat : l'image après masquage.
Masquer avec un dégradé.
Le dégradé n'a pas forcément de dimensions intrinsèque, comme c'est le cas dans notre exemple. Dans ce cas il s'adapte à la taille de l'élément à masquer :
l'information de répétition est ignorée. Si vous souhaitez un motif qui se répète, utilisez plutôt les fonctions de dégradé répétitif :
repeating-linear-gradient(), repeating-conic-gradient() ou repeating-radial-gradient().
L'élément d'origine : un texte.
Le résultat : le texte masqué par le dégradé.
Masquer avec un fichier SVG.
Le fichier SVG doit contenir une balise mask avec un identifiant et l'attribut mask-type. Ce dernier peut avoir la valeur
alpha ou luminance. On peut remplacer l'attribut mask-type par du CSS et la propriété du même nom.
Sur l'élément à masquer, on utilise bien sûr le nom du fichier, avec l'indication d'un signet introduit par # (voir le code CSS).
L'élément d'origine : une image.
Le masque : un fichier SVG.
Le résultat.
La forme SVG peut aussi être définie dans la page. Dans ce cas, il suffit d'indiquer l'identifiant #ID. Le reste du SVG est globalement le même
que dans le cas d'un fichier séparé.
L'élément d'origine : une image.
Le masque : un fichier SVG en local.
Le résultat.
Hachurer du texte.
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 : du texte hachuré.
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.
Le nombre de masques utilisés est fixé par la propriété mask-image. L'exemple de syntaxe ci-dessous applique deux masques.
mask-image:url('chemin/fichier1.png'), url('chemin/fichier2.png);
Le premier masque cité dans mask-image est le plus au dessus ; les autres sont successivement placés en dessous.
La valeur none est autorisée dans une série de masques : elle crée une couche sans masque.
Ainsi la syntaxe suivante :
mask-image: mask1, none, mask2, mask3;
Se traduit par l'empilage suivant :
Mask1
none
Mask2
Mask3
Element
Les autres propriétés relatives aux masques sont gérées par rapport à mask-image. Si le nombre de valeurs de la propriété est inférieur au nombre
de masques définis par mask-image, les valeurs sont re-explorées à partir du début. Si le nombre de valeurs est supérieur à celui défini par
mask-image, les dernières valeurs sont ignorées.
mask-image: mask1, mask2, mask3;
mask-repeat: repeat;
mask-position: center, left, center, right;
Est équivalent à :
mask-image: mask1, mask2, mask3;
mask-repeat: repeat, repeat, repeat;
mask-position: center, left, center;
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.
La propriété mask-composite a normalement besoin d'une valeur de moins que mask-image puisqu'elle combine les masques deux par deux.
Si le nombre de valeurs est égal, la dernière valeur est ignorée.
La propriété mask-type n'accepte qu'une seule valeur (luminance ou alpha), il n'est donc pas possible de mélanger
plusieurs types de masques avec cette propriété.
Par contre la propriété mask-mode peut très bien accepter une série de valeurs lorsque plusieurs masques sont utilisés.
Animation de la propriété mask.
L'animation de la propriété mask est possible suivant n'importe lequel de ses paramètres. Nous proposons ci-dessous une animation
des dimensions du masque, et une autre de sa position.
Animation de la taille
du masque.
Animation de la mode de la
position du masque.
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.).
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.
maskNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
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
Historique de la propriété mask
-
Module CSS - Masquage - Niveau 1
Ce module de spécification décrit deux moyens pour cacher partiellement ou totalement des portions d'éléments visuels : le masquage et le rognage.
Le masquage consiste à utiliser un autre élément graphique ou une image comme masque.
Le rognage décrit la région visible des éléments visuels. La région peut être décrite en utilisant certains éléments graphiques SVG ou des formes simples. Tout ce qui se trouve en dehors de cette région n'est pas rendu.ConcernantmaskIntroduction des techniques de masquage par image. Et première définition de la propriété résuméemask.
15 Novembre 2012Document de travail.
26 Août 2014Candidat à 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 (Module CSS - Masquage).
La propriété mask et les propriétés ci-dessous sont présentées dans ce module :