Masquage CSS - mask

Bonjour là-bas, futurs maîtres du CSS ! Aujourd'hui, nous allons plonger dans le monde fascinant du masquage CSS. Imaginez que vous êtes un magicien, et que vous voulez faire disparaître des parties de votre page web ou les révéler de manière intéressante. C'est exactement ce que le masquage CSS nous permet de faire ! Alors, mettons notre chapeau de magicien et apprenons quelques tours de CSS !

Qu'est-ce que le masquage CSS ?

Le masquage CSS est comme utiliser un patron invisible sur vos éléments web. Il vous permet de cacher ou de montrer partiellement des parties d'un élément en fonction d'une autre image ou forme. C'est une technique puissante qui peut créer des effets vraiment sympas !

Valeurs possibles

Avant de commencer à coder, regardons les différentes valeurs que nous pouvons utiliser avec la propriété mask. Pensez à ces valeurs comme à différents types de baguettes magiques, chacune créant un effet unique :

Valeur	Description
none	Aucun masquage n'est appliqué
<mask-reference>	Fait référence à une image de masque
<masking-mode>	Détermine comment le masque est appliqué
<position>	Définit la position du masque
<bg-size>	Définit la taille du masque
<repeat-style>	Spécifie comment le masque se répète
<geometry-box>	Définit la boîte de masque
no-clip	Empêche le rognage du masque

Ne vous inquiétez pas si cela semble confus pour le moment. Nous explorerons chacun d'eux avec des exemples !

S'applique à

La propriété mask peut être appliquée à n'importe quel élément. C'est comme avoir une baguette magique qui fonctionne sur tout !

Syntaxe

La syntaxe de base pour la propriété mask ressemble à ceci :

.element {
mask: <value>;
}

Maintenant, regardons chaque valeur en détail.

CSS mask - Valeur none

La valeur none est simple. Elle signifie qu'aucun masquage n'est appliqué. C'est comme décider de ne pas utiliser votre baguette magique du tout.

.no-mask {
mask: none;
}

Ce code dit simplement au navigateur : "N'appliquez aucun masque à cet élément."

CSS mask - <mask-reference>

C'est là que la magie commence vraiment ! Un <mask-reference> peut être une image ou un dégradé CSS qui définit quelles parties de l'élément doivent être visibles.

.image-mask {
mask-image: url('mask.png');
mask: url('mask.png');
}

.gradient-mask {
mask-image: linear-gradient(to right, transparent, black);
mask: linear-gradient(to right, transparent, black);
}

Dans ces exemples, nous utilisons soit un fichier image ('mask.png') soit un dégradé linéaire comme notre masque. Les parties noires du masque montreront l'élément, tandis que les parties transparentes le cacheront.

CSS mask - <masking-mode>

Le mode de masquage détermine comment le masque est appliqué. Il y a deux valeurs : alpha et luminance.

.alpha-mask {
mask-mode: alpha;
}

.luminance-mask {
mask-mode: luminance;
}

• alpha : Utilise le canal alpha de l'image de masque.
• luminance : Utilise la luminance (brightness) de l'image de masque.

CSS mask - <position>

Comme avec les images d'arrière-plan, vous pouvez positionner votre masque :

.positioned-mask {
mask-position: center;
/* ou */
mask: url('mask.png') center;
}

Cela centre le masque sur l'élément. Vous pouvez utiliser n'importe quelle valeur de position CSS ici.

CSS mask - <bg-size>

Vous pouvez également contrôler la taille de votre masque :

.sized-mask {
mask-size: cover;
/* ou */
mask: url('mask.png') cover;
}

Cela fait couvrir le masque sur l'ensemble de l'élément. Vous pouvez utiliser des dimensions spécifiques aussi, comme 100px 200px.

CSS mask - <repeat-style>

Si votre masque est plus petit que l'élément, vous pouvez contrôler comment il se répète :

.repeating-mask {
mask-repeat: repeat-x;
/* ou */
mask: url('mask.png') repeat-x;
}

Cela répète le masque horizontalement sur l'élément.

CSS mask - <geometry-box>

La boîte géométrique définit la zone que le masque couvre :

.box-mask {
mask-clip: padding-box;
/* ou */
mask: url('mask.png') padding-box;
}

Cela applique le masque à la boîte de remplissage de l'élément.

CSS mask - <geometry-box> | no-clip

La valeur no-clip empêche le masque d'être rogné aux limites de l'élément :

.no-clip-mask {
mask-clip: no-clip;
/* ou */
mask: url('mask.png') no-clip;
}

Cela permet au masque de se prolonger au-delà des limites de l'élément.

Propriétés liées au CSS mask

Il existe plusieurs propriétés liées à mask qui vous donnent encore plus de contrôle :

Propriété	Description
mask-image	Spécifie l'image de masque
mask-mode	Définit le mode de masquage
mask-repeat	Contrôle comment le masque se répète
mask-position	Définit la position du masque
mask-clip	Détermine la zone de peinture du masque
mask-origin	Définit l'origine du masque
mask-size	Spécifie la taille du masque
mask-composite	Définit comment les masques sont combinés

Chacune de ces propriétés correspond à une partie de la propriété abrégée mask que nous avons utilisée.

Et voilà, mes jeunes magiciens du CSS ! Vous venez d'apprendre les bases du masquage CSS. Souvenez-vous, comme pour tout tour de magie, maîtriser le masquage CSS nécessite de la pratique. Alors n'ayez pas peur d'expérimenter et de créer vos propres designs web magiques !

Dans mes années d'enseignement, j'ai découvert que le meilleur moyen d'apprendre est de faire. Alors voici un exercice amusant pour vous : essayez de créer un effet "révélation" sur une image en utilisant un masque de dégradé. Faites en sorte que lorsque vous survolez l'image, elle soit entièrement révélée. C'est comme tirer un rideau pour montrer une image cachée !

Bonne programmation, et que vos masques s'ajustent toujours parfaitement !

Credits: Image by storyset