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 couper un élément avec 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 le 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.
Trois options s'offrent alors à vous. Vous pouvez utiliser un fichier image comme masque, SVG ou dégradé.
Compatibilité du navigateur
La plupart des navigateurs ne sont partiellement compatibles qu'avec la propriété de masquage CSS standard.
Pour une compatibilité optimale des navigateurs, 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 les navigateurs compatibles.
Bien que la prise en charge des navigateurs utilisant la propriété avec préfixe soit bonne,
lorsque vous utilisez le masquage pour rendre visible du texte par-dessus une image, faites attention à ce qui se passe si le masquage n'est pas disponible.
Il peut être utile d'utiliser des requêtes de caractéristiques pour détecter la compatibilité avec mask-image ou -webkit-mask-image.
et 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 la même manière que 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.
Une zone entièrement transparente rend invisible la partie de l'image située sous cette zone. Toutefois, l'utilisation d'une zone semi-transparente permet de laisser 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 originale de ballons sans masque. Un masque comportant une étoile blanche sur un arrière-plan totalement transparent est appliqué à la deuxième image. La troisième image a une étoile blanche sur un fond avec une transparence en 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 définir une taille d'arrière-plan en utilisant n'importe quelle unité de longueur valide ou un pourcentage.
Vous pouvez également répéter votre masque comme vous pourriez répéter une image de fond, afin d'utiliser une petite image comme motif répété.
Masquage avec SVG
Plutôt que d'utiliser un fichier image comme masque, vous pouvez utiliser le format SVG.
Il existe plusieurs façons d'y parvenir.
La première consiste à avoir un élément <mask> dans le fichier 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, pas seulement à une image. Malheureusement, Firefox est le seul navigateur qui prend en charge cette approche.
Cependant, tout n'est pas perdu, comme dans le scénario le plus courant de masquage d'une image, nous pouvons inclure l'image dans le fichier SVG.
Masquage avec un dégradé
L'utilisation d'un dégradé CSS comme masque est un moyen élégant d'obtenir une zone masquée sans avoir à créer une image ou un SVG.
Par exemple, un simple dégradé linéaire utilisé comme masque permet de s'assurer 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 être aussi créatif que vous le souhaitez. 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 masque, les combinant pour obtenir l'effet que vous souhaitez. Cela est particulièrement utile si vous souhaitez utiliser comme masque un motif généré avec des dégradés CSS. Ceux-ci utilisent généralement plusieurs images de fond et peuvent donc être facilement traduits en un masque.
Par exemple, j'ai trouvé un joli motif à damier dans cet article. Le code, qui utilise 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 modèle conçu pour les images de fond, en masque,
vous devez remplacer les propriétés background-* par les propriétés mask appropriées.
y compris les préfixes -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 est très intéressant d'appliquer des motifs en dégradé aux images. Essayez de remixer le Glitch et de tester d'autres variantes.
En plus du découpage, Les masques CSS permettent d'ajouter de l'intérêt aux images et autres éléments HTML sans avoir à utiliser une application graphique.
Photo de Julio Rionaldo sur Unsplash.