Sommaire

Les Masquemasques

1. Le module CSS

Les masques permettent de masquer une partie d’une illustration, image ou photo, par un élément graphique. Les masques font partie du module Masque:Masking Module Level 1Masking Module Level 1. Ce module est en voie d’achèvement, puisqu’il est en Candidate Recommendation au 26 août 2014 : https://www.w3.org/TR/css-masking-1/

Voici le tableau de compatibilité des navigateurs, sur le site de Can I Use :

Images/C3-11-001.png

Nous voyons que la reconnaissance des navigateurs est encore très partielle, en juillet 2020, au moment de l’écriture de ce livre.

2. Créer un Masque:créermasque

Dans un premier temps, nous devons créer le masque en lui-même. Dans cet exemple, nous allons utiliser une image au format PNG, ce qui permet de gérer 256 niveaux de transparence. Pour cet exemple, il s’agit d’un rond avec une bordure floue et transparente.

images/C25-002.png

Voici l’image initiale utilisée :

images/C25-003.png

Voici l’insertion de l’image à masquer dans le code HTML :

<p><img src="loutre.jpg" class="masque"></p>

Cette image utilise la classe .masque.

Pour définir la règle CSS du sélecteur .masque, nous allons utiliser uniquement certaines propriétés des masques :

  • mask-image indique l’URL du fichier du masque à utiliser.

  • mask-mode précise le type de transparence utilisée, avec les valeurs alpha et luminance.

  • mask-repeat indique le type ...