Ajoute un style à la première ligne d'un texte
Découvrez comment la propriété CSS mask peut vous aider à créer des designs uniques et intéressants pour votre site web.
Apprenez les différentes valeurs possibles, les astuces et les conseils pour une utilisation optimale
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 :
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.
Les valeurs possibles pour "mask-reference" sont :
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
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))"; |
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.