Masques CSS, shape-outside et perspective 3D, avec démos en direct | We.Inc
Estompez des images avec des dégradés mask-image, découpez des formes avec des masques SVG, faites habiller du texte autour de cercles avec shape-outside, comparez clip-path et mask et construisez une scène en perspective 3D.
Un masque CSS masque des parties d'un élément en utilisant la transparence d'une image : mask-image: linear-gradient(black, transparent) l'estompe vers le bas. shape-outside fait habiller le texte voisin autour d'un cercle ou d'un polygone au lieu d'un rectangle. perspective sur un parent donne une vraie profondeur à ses enfants pivotés. Construisez un masque dans le bac à sable et copiez-le.
Quel outil pour quel besoin
Objectif
Propriété
Bord
Fondu doux ou projecteur
mask-image avec un dégradé
Doux, toute opacité
Découpe en forme d'icône ou de logo
mask-image avec un SVG
Suit l'alpha de l'image
Découpe géométrique nette
Toujours net
Texte qui habille une forme
shape-outside sur un float
Modifie la mise en page du texte
Profondeur pour les rotations 3D
perspective sur le parent
Ce n'est pas du tout une découpe
Commencez par le bac à sable des masques : choisissez un fondu, un projecteur ou une forme découpée, déplacez-le sur une image d'exemple et copiez le CSS avec le préfixe -webkit- inclus. En dessous se trouvent des exemples modifiables pour l'habillage de texte, la comparaison clip-path et mask et une petite scène 3D, le tout sans JavaScript.
Choisissez un type de masque : fondu linéaire, projecteur radial ou forme SVG.
Réglez la direction, la position, la taille et la douceur. L'aperçu se redessine immédiatement.
Copiez le CSS. Il contient à la fois mask-image et -webkit-mask-image pour que les anciennes versions de Safari et Chromium fonctionnent aussi.
Descendez pour shape-outside, les comparaisons avec clip-path et la scène en perspective, et modifiez chacun directement.
Dans mask-image, seul le canal alpha compte par défaut. Le noir et toute autre couleur opaque signifient visible, le transparent signifie masqué.
Utilisez mask-size, mask-position et mask-repeat exactement comme les propriétés background. Un masque SVG se répète, sauf si vous définissez mask-repeat: no-repeat.
shape-outside ne fonctionne que sur les éléments flottants. Associez-le au même clip-path si vous voulez aussi que l'élément lui-même ait cette forme.
Ajoutez shape-margin pour éloigner un peu le texte habillé de la courbe.
Questions fréquentes
Quelle est la différence entre clip-path et mask ?
clip-path trace un contour géométrique et tout ce qui est à l'extérieur est coupé avec un bord net. mask-image utilise une image ou un dégradé, les bords peuvent donc être doux et partiellement transparents. Les clip paths sont plus simples pour les polygones et les cercles ; les masques sont le bon choix pour les fondus, les projecteurs aux bords adoucis et les découpes en forme de logo.
Ai-je encore besoin de -webkit-mask-image ?
Les propriétés mask sans préfixe sont devenues Baseline fin 2023. Ajouter la version -webkit- à côté ne coûte rien et garde l'effet fonctionnel pour les visiteurs sur d'anciennes versions de Safari et Chromium.
Pourquoi mon shape-outside ne fonctionne-t-il pas ?
Vérifiez trois choses : l'élément doit être flottant, il lui faut une largeur et une hauteur, et si vous utilisez une image comme forme, elle doit être de même origine ou servie avec des en-têtes CORS. Le texte n'habille d'ailleurs que le côté opposé au float.
Comment estomper le bord d'une liste défilante ?
Placez un masque sur le conteneur défilant : mask-image: linear-gradient(to bottom, black 85%, transparent). Les dernières lignes s'estompent pour indiquer que d'autres contenus suivent, et le masque reste fixé à la boîte au lieu de défiler avec le contenu.
Quelle valeur donner à perspective ?
C'est la distance entre l'observateur et le plan z = 0. Entre 600px et 1200px environ, le rendu paraît naturel pour des cartes. Des valeurs plus petites comme 300px exagèrent la profondeur et déforment fortement les bords proches.
Comment un masque décide de ce qui s'affiche
Le navigateur pose l'image du masque sur l'élément et lit sa transparence pixel par pixel. Là où le masque est entièrement opaque, l'élément s'affiche normalement, là où il est entièrement transparent, l'élément disparaît, et une transparence partielle donne une visibilité partielle.
Comme les dégradés sont des images, tout dégradé linéaire, radial ou conique est un masque tout prêt. Plusieurs masques peuvent être superposés avec des virgules et combinés avec mask-composite, par exemple pour percer un trou dans un fondu.
Habiller du texte autour de formes
shape-outside accepte des formes de base comme circle(), ellipse(), polygon() et inset(), un mot-clé de boîte comme margin-box, ou une image dont les pixels transparents définissent la forme. Seul le contenu en ligne qui s'écoule à côté du float suit la courbe.
Le float occupe toujours sa boîte rectangulaire pour son propre rendu. Pour qu'une photo paraisse ronde tout en repoussant le texte en arrondi, ajoutez clip-path: circle(50%) ou border-radius: 50% au même élément.
Masques en dégradé : fondus et projecteurs
Estomper le bas d'un bloc
Entièrement visible jusqu'à 50 pour cent de la hauteur, puis un fondu progressif jusqu'à disparaître.
Projecteur radial
Un dégradé radial garde un cercle doux visible et masque le reste du motif.
Masques SVG et data URI
Découper un élément en étoile
Le SVG est intégré sous forme de data URI, aucun fichier supplémentaire n'est donc nécessaire. mask-size: contain garde toute l'étoile dans la boîte.
Recolorer un fichier d'icône avec un masque
Le fichier d'icône ne fournit que la forme ; background-color définit la couleur, un seul SVG sert donc pour tous les thèmes et états de survol.
shape-outside : du texte qui habille des formes
Habiller du texte autour d'un cercle
Le float repousse le texte grâce à shape-outside et paraît rond grâce à border-radius. shape-margin ajoute de l'espace.
Habiller du texte le long d'un polygone en diagonale
Le même polygone pilote à la fois la découpe visible (clip-path) et l'écoulement du texte (shape-outside).
clip-path ou mask
Le même cercle, bord net et bord doux
À gauche, clip-path: circle(). À droite, un masque en dégradé radial avec un bord adouci, ce que clip-path ne peut pas faire.
Comparaison de clip-path et mask
Entrée
Forme de base ou <clipPath> SVG
N'importe quelle image : dégradé, PNG, SVG
Bords
Nets
Doux ou nets
Transparence partielle
Non
Oui
Animable
Formes avec le même nombre de points
mask-position et mask-size
Une petite scène en perspective 3D
Cartes inclinées dans un espace 3D partagé
perspective sur la scène et preserve-3d sur le groupe placent les trois cartes dans un même espace ; translateZ pousse chacune à une profondeur différente.
Référence des propriétés mask
Les propriétés détaillées de mask et leur rôle
Propriété
Valeur par défaut
Rôle
L'image ou le dégradé utilisé comme masque
Utiliser l'alpha ou la luminance du masque
Taille du masque, comme background-size
Position du masque
Répétition de l'image du masque
Boîte à partir de laquelle la position est mesurée
Zone affectée par le masque
Combinaison des masques superposés : add, subtract, intersect, exclude
Cercle
Étoile
Cœur
Blob
Bac à sable des masques
Type de masque
Fondu linéaire
Projecteur
Forme SVG
Élément masqué. Le damier montre où il est masqué.