Propriété cs mask

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

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.

Liste des propriétés css

Apprenez à utiliser la propriété CSS mask pour améliorer votre site web