Le masquage CSS vous permet d'utiliser une image en tant que calque de masque. Cela signifie que vous pouvez utiliser une image, un SVG ou un dégradé comme masque pour créer des effets intéressants sans éditeur d'images.
Lorsque vous rognez un élément à l'aide de la propriété clip-path, la zone rognée devient invisible.
Si vous souhaitez rendre une partie de l'image opaque ou lui appliquer un autre effet, vous devez utiliser un masquage.
Cet article explique comment utiliser la propriété mask-image en CSS, qui vous permet de spécifier une image à utiliser comme calque de masque.
Vous avez alors trois options. Vous pouvez utiliser un fichier image comme masque, SVG ou dégradé.
Compatibilité du navigateur
La plupart des navigateurs n'acceptent que partiellement la propriété de masquage CSS standard.
Pour obtenir une compatibilité de navigateur optimale, vous devez utiliser le préfixe -webkit- en plus de la propriété standard.
Consultez la page Puis-je utiliser des masques CSS ? pour obtenir des informations complètes sur la compatibilité des navigateurs.
Bien que la prise en charge de la propriété préfixée soit acceptable dans le navigateur, si vous utilisez un masquage pour rendre visible le texte situé au-dessus d'une image, tenez compte de ce qui se passe si le masquage n'est pas disponible.
Il peut être utile d'utiliser des requêtes de fonctionnalité pour détecter la compatibilité avec mask-image ou -webkit-mask-image et de fournir une création de remplacement lisible avant d'ajouter votre version masquée.
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
/* code that requires mask-image here. */
}
Masquage avec une image
La propriété mask-image fonctionne de manière semblable à la propriété background-image.
Utilisez une valeur url() pour transmettre une image.
L'image de votre masque doit comporter une zone transparente ou semi-transparente.
Avec une zone totalement transparente, la partie de l'image située sous cette zone devient invisible. Toutefois, l'utilisation d'une zone semi-transparente permettra de faire apparaître une partie de l'image d'origine. Vous pouvez voir la différence dans le Glitch ci-dessous. La première image est l'image d'origine de ballons sans masque. Un masque est appliqué à la deuxième image, avec une étoile blanche sur un arrière-plan totalement transparent. La troisième image comporte une étoile blanche sur un fond avec une transparence de dégradé.
Dans cet exemple, j'utilise également la propriété mask-size avec la valeur cover.
Cette propriété fonctionne de la même manière que background-size.
Vous pouvez utiliser les mots clés cover et contain, ou attribuer une taille à l'arrière-plan à l'aide d'une unité de longueur valide ou d'un pourcentage.
Vous pouvez également répéter votre masque comme vous le feriez pour une image de fond, afin d'utiliser une petite image comme motif répétitif.
Masquage avec SVG
Au lieu d'utiliser un fichier image comme masque, vous pouvez utiliser le format SVG.
Il y a plusieurs façons d'y parvenir.
La première consiste à avoir un élément <mask> dans le SVG et à référencer l'ID de cet élément dans la propriété mask-image.
<svg width="0" height="0" viewBox="0 0 400 300">
<defs>
<mask id="mask">
<rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
<circle fill="#FFFFFF" cx="150" cy="150" r="100" />
<circle fill="#FFFFFF" cx="50" cy="50" r="150" />
</mask>
</defs>
</svg>
<div class="container">
<img src="balloons.jpg" alt="Balloons">
</div>
.container img {
height: 100%;
width: 100%;
object-fit: cover;
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
L'avantage de cette approche est que le masque peut être appliqué à n'importe quel élément HTML, et pas seulement à une image. Malheureusement, Firefox est le seul navigateur qui prend en charge cette approche.
Toutefois, tout n'est pas perdu, car pour le scénario le plus courant de masquage d'une image, nous pouvons inclure l'image dans le SVG.
Masquage avec un dégradé
L'utilisation d'un dégradé CSS en tant que masque est un moyen élégant d'obtenir une zone masquée sans vous soucier de créer une image ou une SVG.
Par exemple, un simple dégradé linéaire utilisé comme masque peut garantir que la partie inférieure d'une image ne sera pas trop sombre sous une légende.
Vous pouvez utiliser n'importe quel type de dégradé compatible et laisser libre cours à votre créativité. L'exemple suivant utilise un dégradé radial pour créer un masque circulaire qui s'illumine derrière la légende.
Utiliser plusieurs masques
Comme pour les images de fond, vous pouvez spécifier plusieurs sources de masques et les combiner pour obtenir l'effet souhaité. Cela est particulièrement utile si vous souhaitez utiliser un motif généré avec des dégradés CSS comme masque. Celles-ci utilisent généralement plusieurs images de fond et peuvent donc être facilement traduites en un masque.
Par exemple, vous avez trouvé un motif en damier dans cet article. Le code, qui comprend des images de fond, se présente comme suit:
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Pour transformer ce modèle ou tout autre motif conçu pour des images de fond en masque, vous devez remplacer les propriétés background-* par les propriétés mask pertinentes, y compris celles précédées de -webkit.
-webkit-mask-image:
linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
-webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Il y a de très bons effets à créer en appliquant des motifs de dégradé aux images. Essayez de remixer le Glitch et de tester d'autres variantes.
Parallèlement au découpage, les masques CSS permettent d'ajouter de l'intérêt aux images et à d'autres éléments HTML sans avoir besoin d'utiliser une application graphique.
Photo de Julio Rionaldo sur Unsplash.