La propriété CSS " mask " : définition
La propriété CSS " mask " permet de masquer des parties d'un élément en utilisant une image ou un gradient. Les parties masquées sont considérées comme transparentes et ne sont donc pas visibles.
La propriété CSS " mask " est un raccourci pour les propriétés suivantes :
- mask-image
- mask-mode
- mask-repeat
- mask-position
- mask-clip
- mask-origin
- mask-size
- mask-composite
Syntaxe générale
La syntaxe générale de la propriété CSS " mask " est la suivante :
.element {
mask: [mask-reference];
}
Où "mask-reference" peut être une image, un gradient ou un mélange des deux.
Valeurs possibles
Les valeurs possibles pour "mask-reference" sont :
- Une URL d'image (par exemple : url(image.png))
- Un gradient CSS (par exemple : linear-gradient ou radial-gradient)
- Les valeurs "none" ou "initial" pour annuler le masquage
Exemples
Voici un exemple d'utilisation de la propriété CSS "mask" avec un gradient radial :
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CSS la propriété mask-image </title>
<style>
div{
background-image : url(images/village.png);
width:600px;
height:400px;
}
.mask1 {
-webkit-mask: linear-gradient(black, transparent);
mask: linear-gradient(black, transparent);
}
.mask2 {
-webkit-mask: radial-gradient(circle, red 50%, rgba(0, 0, 0, 0.5) 50%);
mask: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
-webkit-mask: radial-gradient(black 50%, rgba(0, 0, 0, 0.5) 50%);
mask: radial-gradient(black 50%, rgba(0, 0, 0, 0.5));
}
</style>
</head>
<body>
<h1>oujood.com : La propriété css mask </h1>
<h3>Une image avec une couche de masque linéaire(de haut en bas) :</h3>
<div class="mask1">
</div>
<h3>Une image avec un calque de masque (un cercle) :</h3>
<div class="mask2">
</div>
<h3>Une image avec un calque de masque (une ellipse) :</h3>
<div class="mask3">
</div>
<h3>Image originale :</h3>
<img src="images/village.png" alt="Cinque Terre" width="600" height="400">
</html>
Résultat :cliquez ici pour voir le résulta du code ci-dessus
Conseils et astuces d'utilisation
- Assurez-vous que les images utilisées pour le masquage sont suffisamment détaillées pour produire le résultat désiré.
- Si vous utilisez des gradients pour le masquage, assurez-vous que les couleurs utilisées sont contrastées suffisamment pour que les bords du masquage soient clairement définis.
- Utilisez la propriété CSS "mask-mode" pour contrôler comment le masquage est appliqué à l'élément de fond.
- La propriété CSS " mask " peut être combinée avec d'autres propriétés telles que "clip-path" pour produire des effets plus complexes.
La propriété CSS " mask " est une puissante fonctionnalité qui peut être utilisée pour produire des effets visuels uniques et intéressants pour vos designs en ligne. N'hésitez pas à expérimenter avec différentes images et gradients pour trouver le look parfait pour votre projet.
| Valeurs par défaut | none |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | element.style.mask = "linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0))"; |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 41 -webkit- | 35 -webkit- | 9 -moz- | 12 -webkit- | 28 -webkit- |
Voici la syntaxe JavaScript pour définir une propriété "mask" en utilisant un gradient :
Exemple : 📋 Copier le code
element.style.mask = "linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0))";
Dans cet exemple, "element" représente l'élément HTML sur lequel vous souhaitez appliquer le masquage. Le gradient spécifié est un gradient linéaire allant de gauche à droite, avec une couleur noire opaque (rgba(0,0,0,1)) à gauche et une couleur noire transparente (rgba(0,0,0,0)) à droite.
Il est important de noter que la syntaxe du gradient peut varier en fonction des navigateurs et des versions. Il est donc recommandé de consulter la documentation du navigateur pour obtenir la syntaxe correcte pour votre projet.