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 :

CSS - Propriété mask

Description de la propriété mask.

La propriété mask est expérimentale, non standardisée, ou 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 (-moz-, -webkit-, etc.).

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 : Zone concernée par le masquage.
  • mask-composite :
  • mask-image : Image ou le fichier SVG qui sera utilisé comme masque
  • mask-mode : Mode de masquage (couche alpha, luminance...)
  • mask-origin : Référence pour le positionnement du masque.
  • mask-position : Position du masque.
  • mask-repeat : Mode de répétition du masque si celui-ci est plus petit que l'élément à masquer.
  • mask-size : Dimensions du masque.

Cliquez sur les exemples ci-dessous pour afficher le code CSS correspondant.

Attention ! Votre navigateur ne semble pas prendre en charge les techniques de masquage. Les exemples ne seront pas significatifs.

Exemples.

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

Valeurs pour 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-dessus sont également un bon moyen de découvrir les syntaxes les plus courantes.

Prise en charge par les navigateurs (compatibilité).

La prise en charge de la propriété mask et de ses dérivées est encore faible.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Masquage - Propriétés.

  • mask-clip : Zone concernée par le masquage.
  • mask-image : Image ou le fichier SVG qui sera utilisé comme masque
  • mask-mode : Mode de masquage (couche alpha, luminance...)
  • mask-origin : Référence pour le positionnement du masque.
  • mask-position : Position du masque.
  • mask-repeat : Mode de répétition du masque si celui-ci est plus petit que l'élément à masquer.
  • mask-size : Dimensions du masque.