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.
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
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.
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
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
.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%);
}
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;
}
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:
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:
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:
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.
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:
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.
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.
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
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.
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
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.
Vous pouvez utiliser le même élément SVG
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
.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.
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.
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
.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.
Vous pouvez ajouter des effets de masquage sur une balise
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.
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:
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
L'ordinateur indique que msvcr110.dll est manquant et comment le résoudre
Quelle est la priorité de l'interruption ?
Quels sont les quatre outils d'analyse du Big Data ?
Que sont les bases de données en mémoire ?
Comment utiliser la fonction valeur
album photo dynamique
Ordre d'apprentissage recommandé pour C++ et Python
Classement des dix principaux échanges de devises numériques
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
