Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

mask - Propriété CSS

mask

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

Description rapide
Résumé des paramètres de masquage.
Statut
Standard
Pourcentages
Voir les 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:: CRD (document proposé pour la recommandation)

Description de la propriété mask.

La propriété 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é.

Si vous voyez ce texte, votre navigateur ne prend pas en charge les fonctionnalité de masquage.

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

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

1
mask
Estimation de la prise en charge en pourcentage du parc actuel.
73%

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.

Propriétés.

Définit la partie visible de l'élément (découpage).
Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
Définit comment gérer les formes creuses.
Définit tous les paramètres d'un masque pour la bordure d'un élément.
Définit comment le masque doit agir (luminance, alpha).
Définit le décalage éventuel du masque de bordure éventuel par rapport à l'élément.
Définit le mode de répétition du masque.
Définit comment l'image utilisée comme masque doit être découpée.
Désigne l'image qui sera utilisée comme masque (masque du type bordure).
Définit l'épaisseur de la bordure pour l'application d'un masque.
Définit la zone concernée par le masquage.
Définit comment seront combinés les masques lorsque plusieurs sont appliqués sur un élément.
Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
Définit le mode de masquage (couche alpha, luminance...)
Définit la référence pour le positionnement du masque.
Position du masque.
Définit le mode de répétition du masque lorsque celui-ci est plus petit que l'élément à masquer.
Fixe les dimensions du masque.