Masquer dans le navigateur avec CSS et SVG

Le masquage est une technique qui vous permet d'afficher des parties sélectionnées d'un élément ou d'une image à l'écran tout en cachant le reste. Les développeurs Web peuvent utiliser cette technique dans le navigateur via la propriété Mask et l'élément SVG Mask. Ces fonctionnalités vous permettent d'afficher des effets de masquage sur les images et autres éléments du navigateur sans utiliser de logiciel d'édition d'image.

Dans cet article, je vais afficher les capacités de masquage CSS et SVG en action, en m'assurant également d'inclure des informations sur les problèmes actuels de support du navigateur.

Au moment de la rédaction du moment de la rédaction, la plupart des échantillons de code ne fonctionnent que dans les navigateurs WebKit tandis que les masques basés sur SVG semblent bénéficier d'un support de navigateur plus large. Par conséquent, si vous souhaitez essayer les exemples, je vous recommande d'utiliser un navigateur WebKit comme Chrome.

Les plats clés

• Le masquage dans CSS et SVG permet une visibilité sélective des éléments, en utilisant la propriété CSS «Mask» ou l'élément SVG ``
• Le masquage CSS peut utiliser des images, des gradients ou des références SVG, tandis que le masquage SVG offre plus de contrôle avec les graphiques vectoriels et prend en charge les masques de couleur et de gradient.
• Le support du navigateur varie: les masques CSS sont principalement pris en charge dans les navigateurs WebKit, tandis que les masques SVG ont une compatibilité plus large entre les navigateurs modernes, notamment Firefox et Internet Explorer.
• Les propriétés de masque telles que «Mask-Image», «Mask-Mode», «Mask-Repeat», «Mask Position» et «Mask-Size» peuvent être définies individuellement ou combinées dans une propriété «Mask» abrégée pour plus de commodité.
• Les effets de masquage avancés, y compris l'animation et l'utilisation du texte comme masque, peuvent être réalisés avec CSS et SVG, améliorant la flexibilité et la créativité de la conception Web.

Masquage sur le Web

Vous pouvez réaliser des effets de masquage sur le Web à l'aide de l'écrêtage ou du masquage.

La coupure consiste à poser une forme de vecteur fermé, comme un cercle ou un polygone, au-dessus d'une image ou d'un élément. Toutes les parties de l'image derrière la forme seront visibles, tandis que toutes les parties en dehors des limites de la forme seront cachées. La limite de la forme est appelée le chemin de clip, et vous le créez en utilisant la propriété Clip-Path.

Le masquage se fait à l'aide d'une image PNG, d'un gradient CSS ou d'un élément SVG pour masquer certaines parties d'une image ou d'un autre élément de la page. Vous pouvez y parvenir en utilisant la propriété CSS Mask.

Dans cet article, je me concentrerai exclusivement sur le masquage avec la propriété CSS Mask et l'élément SVG .

La propriété CSS Mask

Le masque

est la propriété du raccourci CSS pour tout un tas de propriétés individuelles. Examinons de plus près certains d'entre eux plus en détail.

La propriété Mask-Image

Vous pouvez utiliser la propriété Mask-Image pour définir l'image de calque de masque d'un élément.

La valeur aucune n'est pas la même chose que de définir aucune valeur. Au contraire - il compte toujours comme une couche d'image noire transparente.

Vous pouvez définir un masque-image sur une valeur d'URL. Il peut s'agir du chemin vers un fichier d'image PNG, un fichier SVG ou une référence à un élément SVG . Vous pouvez définir plus d'une couche d'image de masque en ajoutant un nombre correspondant de valeurs d'URL séparées par une virgule

Voici quelques exemples:

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

C'est ainsi que vous faites référence à un élément SVG avec un ID de mask1 :

.masked-element {
  mask-image: url(#mask1);
}

Une image de gradient est également une valeur appropriée pour la propriété Mask-Image:

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

La propriété en mode masque

Avec le mode de masque, vous pouvez définir l'image de la couche de masque pour être un masque alpha ou un masque de luminance.

Un masque alpha est une image avec un canal alpha. Plus en détail, le canal alpha est les informations de transparence contenues dans les données de chaque pixel. Les opérations de masquage avec les propriétés en mode masque définies sur Alpha utiliseront les valeurs alpha de l'image comme valeurs de masque.

Un exemple pratique de canal alpha est une image PNG avec des zones noires et transparentes. L'élément masqué se présentera à travers les parties noires de l'image du masque, qui en ont une valeur alpha. Tout le reste sous les parties transparentes, qui ont une valeur alpha de zéro, seront cachées.

Je vais utiliser cette image PNG comme mon masque alpha:

et effectuez une opération de masquage sur l'image JPG ci-dessous:

C'est là que la magie se produit:

.masked-element {
  mask-image: url(alpha-mask.png);
  mask-mode: alpha;
}

Et voici à quoi ressemble le résultat dans le navigateur:

Un masque de luminance utilise les valeurs de luminance d'une image comme valeurs de masque. Une image PNG comme celle ci-dessus - mais en blanc - est un bon exemple de masque de luminance:

Les zones de l'élément que vous souhaitez masquer, qui sont couvertes par les pixels blancs du masque, vont surmonter. Les parties de l'élément masqué couvert par les pixels transparents du masque seront cachés.

Définition de la propriété en mode masque sur la luminance et en utilisant l'image ci-dessus comme masque, affichera le même résultat qu'avant.

voici le code:

.masked-element {
  mask-image: url(luminance-mask.png);
  mask-mode: luminance;
}

La propriété de répétition du masque

Mask-Repeat fonctionne à peu près comme la propriété Background-Repeat. Il contrôle le carrelage des images de calque de masque après avoir réglé leur taille et leur position.

Les valeurs possibles sont:

• sans répétition: l'image de calque de masque n'est pas répétée dans l'espace disponible.
• répéter-x: l'image de calque de masque est répétée le long de la coordonnée x.
• répéter-y: l'image de calque de masque est répétée dans la coordonnée y.
• Espace: L'image de calque de masque est répétée et espacée dans la zone disponible.
• Round: L'image de calque de masque est répétée un nombre entier de fois dans la zone disponible. Si un nombre entier ne correspond pas à l'espace disponible, l'image est mise à l'échelle jusqu'à ce qu'elle le fasse.

Par exemple, c'est l'image que j'ai l'intention d'utiliser comme masque:

l'extrait de code ci-dessous définit la propriété Mask-Repeat à une valeur d'espace:

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

résultant en l'effet de masquage suivant:

la propriété de position de masque

Vous pouvez positionner une image de calque de masque à l'aide de la propriété de position de masque. Vous pouvez définir cette propriété sur les mêmes valeurs que vous utiliseriez pour la propriété CSS-Image CSS plus familière. Sa valeur initiale est centrale.

Par exemple, si vous souhaitez placer le calque d'image du masque dans le coin supérieur gauche de la fenêtre, définissez la propriété de position de masque sur une valeur de 0 0 :

.masked-element {
  mask-image: url(#mask1);
}

C'est à quoi ressemble le code ci-dessus dans le navigateur:

Modification de la valeur de la propriété de position de masque ci-dessus à 100% 100% , affiche l'image de calque de masque en bas à droite de la fenêtre:

la propriété de taille de masque

Vous pouvez rapidement définir la taille de votre image de calque de masque à l'aide de la propriété de taille de masque, qui accepte les mêmes valeurs que la propriété CSS-taille CSS plus familière.

Par exemple, le réglage de la taille du masque à 50% affiche l'image de la couche de masque à 50% de sa pleine largeur:

Le réglage de la taille du masque à contenir sera à l'échelle de l'image de la couche de masque à la taille la plus grande afin que sa largeur et sa hauteur puissent s'adapter à l'intérieur de la zone de positionnement du masque:

Vous pouvez voir ces démos vivre dans l'action sur Codepen ci-dessous:

Voir les exemples de masque de stylo CSS par SitePoint (@SitePoint) sur Codepen.

Couches de masque de composition

Comme expliqué ci-dessus, vous pouvez utiliser plus d'une couche de masque sur le même élément en séparant chaque valeur de la propriété Mask-Image avec une virgule. Les calques sont empilés un sur les autres avec la dernière couche affichant d'abord à l'écran.

par exemple:

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

Dans l'extrait ci-dessus, mask2.png est superposé au-dessus de mask1.png .

La propriété Mask-Composite vous permet de combiner différentes couches de masque en fonction de la valeur des mots clés suivants:

• ajouter: mask2.png est peint sur le dessus de mask1.png
• Soustraire: affiche des parties de mask2.png qui ne chevauchent pas mask1.png . Les navigateurs ne prennent pas en charge le mot-clé standard encore, par conséquent, au moins pour le moment, vous devrez utiliser le mot-clé de l'opérateur de composition correspondant Source-Out
• Intersection: affiche des parties de mask2.png qui chevauchent mask1.png . Cependant, les navigateurs WebKit, qui sont le seul type de navigateurs prenant en charge les masques CSS, ne semblent rien afficher à l'écran, même lorsque le mot clé composite non standard est utilisé.
• Exclure: affiche des parties de mask1.png et mask2.png qui ne se chevauchent pas. Encore une fois, parce que le mot-clé standard n'a pas encore de support, vous feriez mieux d'utiliser l'opérateur de composition XOR.

Vous pouvez également consulter les démos en direct dans la démo de codepen ci-dessous:

Voir la composition du masque CSS PEN par SitePoint (@SitePoint) sur Codepen.

La propriété du masque raccourci

Vous pouvez définir toutes les propriétés qui contrôlent les opérations de masquage CSS en une seule fois à l'aide de masque.

voici le raccourci complet du masque:

.masked-element {
  mask-image: url(#mask1);
}

Masque-Origin et Mask-Clip fonctionnent comme les propriétés d'origine fondamentale et d'arrière-plan plus familières.

Bien que vous puissiez réorganiser les propriétés dans le raccourci du masque, vous devez définir la propriété de taille de masque après la propriété de position du masque, séparée par le symbole «/». De plus, la définition de la taille du masque sans régler la position de masque entraînera une déclaration non valide.

Enfin, car toute valeur que vous ne spécifiez pas sur la propriété Mask est recueillie sur sa valeur par défaut initiale, l'utilisation du masque est vraiment pratique lorsque vous devez réinitialiser l'une des propriétés individuelles.

L'élément de masque SVG

Les graphiques vectoriels évolutifs, ou SVG pour faire court, est un langage basé sur XML pour marquer les graphiques.

Vous pouvez utiliser un élément dans un document SVG pour ajouter des effets de masquage aux éléments HTML et autres graphiques SVG.

Une chose de plus cool que vous pouvez faire avec SVG est de masquer d'autres éléments sur la page en utilisant du texte.

Regardons de plus près dans chacune de ces possibilités.

en utilisant l'élément SVG sur un élément HTML

Au moment de la rédaction du moment, en utilisant l'élément à l'intérieur d'un graphique SVG en ligne pour masquer un élément HTML ne fonctionne que dans les navigateurs Firefox. Voici un exemple:

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

avec le CSS suivant:

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

Dans le code ci-dessus, j'ai inclus un élément avec un ID de mask1 . À l'intérieur du masque, j'ai placé un dégradé noir et blanc avec un ID de Grad et une forme de cercle qui utilise le gradient comme couleur de remplissage.

Enfin, j'ai fait référence à la valeur ID de l'élément SVG dans la propriété CSS Mask. Cela applique l'effet de masquage à l'image sur la page.

En ajoutant quelques autres déclarations de style pour l'arrière-plan de la page et l'image masquée, vous pouvez obtenir un effet assez dramatique comme celui ci-dessous:

Remarquez comment la partie du masque de cercle remplie de la teinte blanche du gradient permet à l'image masquée de montrer. Inversement, la partie remplie de la teinte noire du gradient cache l'image masquée.

Voici une démo en direct de cela sur Codepen (N'oubliez pas, cela ne fonctionnera que sur Firefox!) .

Voir le masquage du stylo avec un élément de masque SVG en ligne par SitePoint (@SitePoint) sur Codepen.

en utilisant l'élément SVG sur un graphique SVG

Vous pouvez utiliser le même élément SVG de l'exemple précédent, mais cette fois pour masquer un graphique SVG plutôt qu'un élément HTML. L'avantage est que la prise en charge du navigateur est bien meilleure, y compris les navigateurs WebKit et le dernier IE.

Dans l'extrait ci-dessous, je vais placer l'image que je veux masquer à l'intérieur d'un élément SVG et y appliquer la propriété CSS Mask. La propriété CSS Mask fait référence à l'élément SVG avec l'ID de mask1 , comme dans l'exemple précédent. Voici le code du graphique SVG masqué:

.masked-element {
  mask-image: url(#mask1);
}

Et c'est l'extrait qui s'occupe de l'opération de masquage dans CSS:

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

Le résultat est à peu près similaire à l'exemple précédent, mais cette fois, vous pouvez le visualiser sur tous les principaux navigateurs.

Jetez un œil à la démo de codepen:

Voir le masque SVG Pen sur un élément SVG par SitePoint (@SitePoint) sur Codepen.

Masquage avec du texte SVG

Vous pouvez effectuer des opérations de masquage à l'aide d'un élément de texte à l'intérieur de votre masque SVG:

.masked-element {
  mask-image: url(alpha-mask.png);
  mask-mode: alpha;
}

.masked-element {
  mask-image: url(luminance-mask.png);
  mask-mode: luminance;
}

l'extrait ci-dessus ajoute un élément de texte SVG noir à l'intérieur du masque SVG et l'applique à une forme d'ellipse SVG bleu clair à l'aide de la propriété CSS Mask. Tout ce qui se trouve derrière la forme de l'ellipse (dans ce cas, c'est l'image de fond du corps) montrera à travers le texte. Le résultat ressemble à ceci:

Le code complet est disponible sur Codepen:

Voir le masque de texte SVG de Pen par SitePoint (@SitePoint) sur Codepen.

Animer les masques

Vous pouvez animer la position de masque et la taille du masque à l'aide de la transition CSS et de l'animation de l'image clé.

Vous trouverez ci-dessous un exemple d'animation de base de la clés d'une image de masque PNG en forme d'étoile.

Voici les extraits de code pertinents:

L'élément masqué est une balise HTML :

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

L'opération de masquage utilise la propriété du masque raccourci:

.masked-element {
  mask-image: url(#mask1);
}

La classe .animate sur l'élément ajoute du mouvement à l'image en forme d'étoile à l'aide de la transformée et de l'animation CSS:

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

Lancez un navigateur WebKit comme Chrome et consultez la démo en direct suivante sur Codepen:

Voir le stylo animé avec le masque CSS de Maria Antonietta Perna (@antonietta) sur Codepen.

Animer un élément de masque SVG avec CSS

Vous pouvez ajouter des effets de masquage sur une balise à l'aide de l'élément SVG , puis l'animer avec CSS.

Voici une démo rapide de codep: L'animation est visible sur n'importe quel navigateur, mais le masquage n'est rendu que dans Firefox:

Voir le stylo SVG Animate SVG sur l'élément HTML par SitePoint (@SitePoint) sur Codepen.

La bonne nouvelle est que, si vous appliquez votre masque SVG sur un graphique SVG en ligne, le support du navigateur est immédiatement des rochets Sky. Découvrez la même démo d'animation en utilisant uniquement SVG:

Voir le stylo Animation de masque SVG sur l'élément SVG par SitePoint (@SitePoint) sur Codepen.

Prise en charge du navigateur pour la propriété Mask

J'ai abordé les problèmes de support du navigateur tout au long de cet article. Une simple répartition de la situation au moment de la rédaction ressemble à ceci:

• PNG ou masques d'image SVG externes sur les éléments HTML en utilisant la propriété CSS Mask Work sur les navigateurs WebKit uniquement avec le préfixe -webkit- fournisseur.
• L'élément de masque SVG en ligne sur un élément HTML est pris en charge uniquement dans Firefox.
• L'élément de masque SVG en ligne sur un élément SVG est pris en charge dans les navigateurs WebKit, ainsi que Firefox et le dernier explorateur Internet.

Cette grande démo de codepen de Yoksel offre une illustration visuelle de l'état de l'art en ce qui concerne le support du navigateur.

Alan Greenblatt met à disposition un référentiel GitHub où il entre dans les détails desquels la propriété liée aux graphiques CSS est prise en charge par quel navigateur.

Le tableau de compatibilité de support du navigateur sur le site Web Can I Use offre plus de détails et de liens vers plus de ressources.

Bien que la prise en charge actuelle du navigateur pour le masque CSS ne soit pas excellente, si vous utilisez cette fonctionnalité comme une amélioration sur quelques éléments décoratifs, les utilisateurs du navigateur non soutenu ne remarqueront même pas qu'ils manquent.

Enfin, l'application des effets de masquage sur un graphique SVG avec l'élément SVG bénéficie du support le plus large des navigateurs modernes et a fière allure sur le Web.

Ressources

• CSS Masking Module Niveau 1 - Draft de l'éditeur W3C
• Coupage et masquage dans CSS sur CSS-Tricks
• Référence CODROPS CSS sur le masquage avec l'image de masque
• svg sur mdn
• Masques SVG par Jakob Jenkov
• CSS Masking par Dirk Schulze.

Connaissez-vous un effet de masquage cool sur le Web que vous souhaitez partager? Appuyez sur la boîte de commentaires et faites-le moi savoir.

Questions fréquemment posées (FAQ) sur CSS et SVG Masking

Quelle est la différence entre CSS et le masquage SVG?

CSS et le masquage SVG vous permettent tous deux de cacher ou de révéler des parties d'un élément. Cependant, ils diffèrent dans leur approche et leurs capacités. Le masquage CSS utilise une image comme couche de masque où le canal alpha de l'image du masque détermine la visibilité de l'élément. D'un autre côté, le masquage SVG utilise un graphique vectoriel comme couche de masque, ce qui offre plus de flexibilité et de contrôle sur la forme et la taille du masque. Le masquage SVG prend également en charge les masques de couleur et de gradient, qui ne sont pas possibles avec le masquage CSS.

Comment puis-je créer un masque de gradient avec SVG?

Le masquage SVG vous permet de créer des masques à gradient, qui peuvent Ajoutez un effet visuel unique à vos éléments Web. Pour créer un masque de gradient avec SVG, vous devez définir un élément linéaire ou radialgradient à l'intérieur de l'élément de masque. L'élément de gradient doit avoir au moins deux éléments d'arrêt qui définissent la couleur et l'opacité à différents points le long du gradient.

Puis-je utiliser CSS et SVG Masking ensemble?

Oui, vous pouvez utiliser CSS et le masquage SVG pour créer des effets de masquage complexes. Vous pouvez appliquer un masque CSS à un élément, puis appliquer un masque SVG sur le même élément. La visibilité finale de l'élément est déterminée par la combinaison des deux masques.

Pourquoi mon masque CSS ne fonctionne-t-il pas dans Internet Explorer?

Le masquage CSS n'est pas pris en charge dans Internet Explorer. Si vous devez prendre en charge Internet Explorer, vous devez utiliser SVG Masking à la place. Le masquage SVG est pris en charge dans tous les principaux navigateurs, y compris Internet Explorer.

Comment puis-je animer un masque avec CSS ou SVG?

CSS et SVG Masking Support Animation. Pour le masquage CSS, vous pouvez animer la propriété Mask-Image à l'aide d'animations ou de transitions CSS. Pour le masquage SVG, vous pouvez animer l'élément de masque à l'aide d'animations SVG.

Puis-je utiliser un texte comme masque avec CSS ou SVG?

Oui, vous pouvez utiliser un texte comme masque avec CSS et SVG. Pour le masquage CSS, vous pouvez utiliser une image texte comme image de masque. Pour le masquage SVG, vous pouvez utiliser un élément de texte comme élément de masque.

Comment puis-je créer un masque circulaire avec CSS ou SVG?

Pour créer un masque circulaire avec CSS, vous pouvez utiliser Une fonction radiale-gradient comme l'image du masque. Pour créer un masque circulaire avec SVG, vous pouvez utiliser un élément Circle comme élément de masque.

Comment puis-je créer un masque complexe avec plusieurs formes?

Pour créer un masque complexe avec plusieurs formes , vous pouvez utiliser le masquage SVG. Le masquage SVG vous permet d'utiliser plusieurs éléments de forme (comme le rect, le cercle, le polygone, etc.) comme élément de masque. Vous pouvez positionner et dimensionner ces formes indépendamment pour créer un masque complexe.

Puis-je utiliser une vidéo comme masque avec CSS ou SVG?

Le masquage CSS prend en charge les masques vidéo. Vous pouvez utiliser une vidéo comme image de masque en définissant la propriété Mask-Image sur une URL vidéo. Le masquage SVG ne prend pas en charge les masques vidéo.

Comment puis-je ajuster l'opacité d'un masque avec CSS ou SVG?

Pour le masquage CSS, l'opacité du masque est déterminée par le canal alpha de L'image du masque. Vous pouvez ajuster l'opacité en modifiant l'image du masque. Pour le masquage SVG, l'opacité du masque est déterminée par les propriétés de remplissage et d'opacité de trait de l'élément de masque. Vous pouvez ajuster l'opacité en modifiant ces propriétés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!