— Publié le 3 décembre 2022 —

Dans ce blog, nous avons déjà écrit pas mal d’articles sur les possibilités de jouer avec vos images en CSS. Aujourd’hui, nous allons découvrir une nouvelle propriété, le masquage. Avec cette propriété, nous allons masquer un contenu source (texte, image, vidéo…) par un masque qui va cacher ou laisser visible une partie de notre contenu source. Pour ceux qui connaissent, c’est un peu comme un masque de fusion sur Photoshop.

Mieux que des mots, passons à la démo !

Le masque « image »

Commençons par un cas simple, on va masquer une image par une autre image. Comme il fait froid et que c’est bientôt Noël, on vous emmène au soleil !
L’image source est ce magnifique paysage et l’image « masque » une icône de cadeau.

Important : il faut que votre image de masque soit un png avec un fond transparent ou semi-transparent !

Appliquons maintenant le masque.

C’est top non ? Voici le code HTML et la CSS qui va avec :

Il suffit d’attribuer une classe à votre image source, ici c’est « mask1 ».

Puis en CSS, vous définissez avec la propriété mask-image l’URL de l’image de masquage.

La mention no-repeat sert à dire si vous voulez que le masque se répète ou non.

Code HTML 

Copier

CSS

Copier

Si vous mettez « repeat » à la place de « no-repeat » ou si vous oubliez de mentionner « no-repeat », alors le masque s’appliquera sur toute la largeur de votre image source.

Passons à un autre cas, appliquer un masque dégradé.

Le masque « gradient »

Maintenant, nous allons utiliser un autre type de masque, un dégradé, appelé en CSS « linear-gradient », ce dégradé va de haut en bas.

Le code HTML ne change pas, mais voici la CSS correspondante.

Copier

On peut jouer avec d’autres types de gradient, comme un cercle.

Ou une ellipse

Voici les CSS utilisées :

Cercle

Copier

Ellipse

Copier

Le masque « SVG »

Le dernier cas que nous allons voir est le masque grâce à du SVG. Cela va nous permettre de réaliser des compositions un peu différentes, comme ces bulles distinctes (on pourrait aussi utiliser un masque image mais c’est plus compliqué pour bien positionner ses bulles).

Copier

Conclusion

Voilà, nous espérons que cet article vous a ouvert d’autres perspectives pour vous amuser avec le design de vos sites Web.
Si vous avez des questions, posez-les en commentaires ci-dessous.
Et n’hésitez pas à partager vos propres retours d’expérience !