oujood.com

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

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

chercher |

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éfautnone
    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.

    ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
    Verssion41 -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.



Voir aussi nos tutoriel :

:first-line

Ajoute un style à la première ligne d'un texte

Les boucles de js

Les boucles de js

Balise header

Définit un en-tête d'un document ou de la section