La plupart des effets de texte CSS qui semblent compliqués sont fabriqués à partir d'une seule propriété L'enseigne au néon sur une page de destination, le contour dur sur un titre de jeu, le lettrage orange empilé qui ressemble à une pochette de disque des années 1970 : chacun d'eux est un seul text-shadow déclaration avec plusieurs couches séparées par des virgules La syntaxe est courte La partie dure consiste à sélectionner les décalages et les valeurs de flou qui se lisent bien, et à se rappeler quelle couche peint dessus.
Ce guide couvre le text-shadow grammaire, comment fonctionne la superposition, les recettes derrière les effets communs avec les valeurs exactes qu'ils utilisent, et les erreurs qui rendent le texte ombragé difficile à lire ou lent à rendre Chaque exemple peut être reconstruit dans le Générateur d'ombre de texte CSS(en anglais), qui montre le résultat en direct et écrit la déclaration pour vous.
tl;dr :
text-shadowprend une liste d'ombres séparées par des virgules, chacune écrite commeoffset-x offset-y blur-radius color. La première ombre de la liste peint sur le dessus Il n'a pas de valeur étalée et noninsetmot-clé, contrairement àbox-shadow. Les lueurs sont plusieurs ombres sans décalage avec un flou croissant, les contours sont quatre ombres dures d'un pixel et le texte 3 D est une pile d'ombres dures chacune un pixel plus loin Générateur d'ombres textuelles Toolz construit ceux-ci avec des curseurs et huit préréglages, côté client, gratuit, sans inscription.
Quelle est la propriété CSS Text-Shadow ?
le text-shadow propriété peint une ou plusieurs ombres derrière les glyphes d'un élément' ; s texte Il est défini dans le W3C Module de décoration de texte CSS niveau 3[TRADUCTION], et sa valeur est soit none ou une liste d'ombres séparées par des virgules.
Chaque ombre comporte jusqu'à quatre parties :
| Partie | Obligatoire | Ce qu'il fait | Valeurs autorisées |
|---|---|---|---|
| Décalage horizontal | oui | Déplace l'ombre vers la droite (positive) ou vers la gauche (négative) | Toute longueur, par exemple 2px, -0.1em |
| Décalage vertical | oui | Déplace l'ombre vers le bas (positif) ou vers le haut (négatif) | Toute longueur |
| Rayon flou | Non, par défaut 0 |
Adoucit le bord ; plus grand signifie plus flou | Zéro ou une longueur positive Négatif n'est pas valide |
| Couleur | Non, par défaut currentColor |
Couleur de l'ombre, y compris la transparence | Toute couleur CSS |
La couleur peut aller en premier ou en dernier. text-shadow: #000 1px 1px et text-shadow: 1px 1px #000 sont la même ombre Si vous laissez la couleur de côté, l'ombre prend la couleur text' ;s propre, qui est rarement ce que vous voulez pour une ombre portée mais pratique pour une lueur rapide dans la couleur du texte.
Une ombre ne change jamais de disposition Elle ne repousse pas les éléments voisins et ne fait pas croître la boîte element' ; s, donc un grand flou peut se répandre à l'extérieur de la boîte et se faire couper par un parent avec overflow: hidden.
En quoi l’ombre de texte est-elle différente de l’ombre de boîte ?
text-shadow suit la forme de chaque lettre, tandis que box-shadow suit le rectangle de la bordure element' ; s. C'est la différence pratique, et il décide laquelle vous atteignez La grammaire diffère également.
| figure | text-shadow |
box-shadow |
|---|---|---|
| Forme de l'ombre | Chaque contour de glyphe | La boîte element' ; s, y compris les coins arrondis |
| Rayon d'étalement | Non disponible | Oui, quatrième longueur |
inset mot clé |
Non disponible | oui |
| Plusieurs couches | Oui, séparés par des virgules | Oui, séparés par des virgules |
| Ordre de peinture | D'abord répertorié en haut | D'abord répertorié en haut |
| Couleur par défaut | currentColor |
currentColor |
| Usage typique | Rubriques, logos, lisibilité sur les images | Cartes, boutons, élévation |
La valeur de spread manquante est la raison pour laquelle les contours de texte ont besoin de quatre ombres au lieu d'une. Avec box-shadow vous pouvez écrire 0 0 0 2px black pour faire pousser un anneau solide Avec du texte il n'y a aucun moyen d'étendre le glyphe, donc vous le fakez en décalant les copies dans plusieurs directions Si vous coiffez le conteneur plutôt que les mots, les guide du générateur d'ombre de boîte couvre les couches étalées, encastrées et en élévation.
Comment fonctionne la superposition de plusieurs ombres de texte ?
Une seule déclaration peut contenir autant d'ombres que vous le souhaitez, séparées par des virgules, et le navigateur peint la première la plus proche du spectateur La dernière ombre de la liste se trouve à l'arrière Le texte lui-même peint toujours au-dessus de toutes.
Que l'ordonnancement importe chaque fois que les couches se chevauchent Comparez ces deux déclarations :
/* Sharp dark layer on top of a soft glow */
text-shadow: 2px 2px 0 #000, 0 0 12px #ff0;
/* Soft glow painted over the sharp layer */
text-shadow: 0 0 12px #ff0, 2px 2px 0 #000;
Dans la première, la copie noire croustillante reste nette et la brume jaune se trouve derrière elle Dans la seconde, la lueur jaune s'échoue sur la copie noire et l'adoucit Mêmes ombres, look différent.
Le générateur suit la même règle La couche 1 dans les onglets de couche est la première ombre de la sortie, donc elle peint sur le dessus L'ajout d'une couche l'ajoute à la fin de la liste, derrière les autres Pour faire avancer une couche vous la supprimez et la recréez, ou éditez le CSS copié à la main.
Quelles valeurs écrit le générateur Toolz ?
le générateur d'ombres textuelles donne à chaque couche cinq contrôles et écrit une déclaration dans un format fixe, Savoir ce format aide lorsque vous collez le résultat dans une base de code avec ses propres conventions.
| Contrôle | Gamme | Étape | Écrit comme |
|---|---|---|---|
| Décalage X | -50px à 50px | 1px | Npx |
| Décalage Y | -50px à 50px | 1px | Npx |
| Flou | 0px à 100px | 1px | Npx: dont 0px |
| Couleur | Cueilleur de couleurs | - | hex à 6 chiffres |
| Opacité | 0% à 100% | 1% | Ajouté sous forme de deux chiffres hexadécimaux après la couleur |
L'opacité est pliée dans la couleur sous la forme d'une valeur hexadécimale à 8 chiffres, en suivant le CSS Color Module Niveau 4 notation hex. Les deux derniers chiffres sont le canal alpha sur une échelle de 0 à 255, donc l'outil multiplie l'opacité par 255, arrondit et convertit en hex.
Voici comment cela fonctionne pour quelques opacités :
| Curseur d'opacité | Horaires 255 | Arrondi | Hex alpha | Couleur d'exemple |
|---|---|---|---|---|
| 100% | 255 | 255 | ff |
#000000ff |
| 90% | 229,5 | 230 | e6 |
#4466eee6 |
| 70% | 178,5 | 179 | b3 |
#4466eeb3 |
| 60% | 153 | 153 | 99 |
#00000099 |
| 35% | 89.25 | 89 | 59 |
#00000059 |
| 25 % | 63,75 | 64 | 40 |
#00000040 |
Chaque navigateur actuel lit un hex à 8 chiffres Si vous devez prendre en charge un très ancien navigateur, réécrivez la couleur comme suit rgba() après copie: #00000099 se transforme rgba(0, 0, 0, 0.6).
L'outil n'accepte que les entrées de curseur et de sélecteur, les valeurs sont donc des pixels entiers. Pour une ombre mesurée en em, qui évolue avec la taille de la police, copiez le CSS et échangez les unités dans votre feuille de style. UN 2px offset sur le corps du texte 16 px est 0.125em.
Comment créez-vous un effet de texte lumineux au néon ?
Une lueur néon est plusieurs ombres avec un décalage nul, la même couleur vive et un flou croissant Chaque couche ajoute un halo plus large et plus faible, et ensemble, elles ressemblent à un léger saignement dans l'air environnant.
Le générateur s'ouvre sur son préréglage Neon Glow, ce qui produit ceci :
text-shadow: 0px 0px 7px #4466eeff, 0px 0px 14px #4466eee6, 0px 0px 28px #4466eeb3;
Trois couches, le flou doublant à chaque fois (7, 14, 28), l'opacité descendant de 100 % à 90 % à 70 % La couche serrée 7 px donne aux lettres un noyau lumineux, et la couche 28 px étale la couleur sur un fond sombre avec du texte blanc cela se lit comme un tube éclairé Sur un fond clair la plupart de l'effet disparaît, c'est pourquoi l'aperçu a un toggle Light bg / Dark bg : vérifiez les deux avant d'expédier une lueur sur un site avec un commutateur de thème.
Pour rendre la lueur plus forte, ajoutez une quatrième couche à 56 px de flou ou répétez deux fois la couche 7 px. La répétition d'une couche empile son opacité et rend le noyau plus intense sans l'élargir.
Comment esquissez-vous le texte avec text-shadow ?
Placez quatre ombres dures (blur 0) un pixel sur chaque diagonale Leur chevauchement trace le bord de chaque glyphe.
Le préréglage Outline écrit :
text-shadow: -1px -1px 0px #000000ff, 1px -1px 0px #000000ff, -1px 1px 0px #000000ff, 1px 1px 0px #000000ff;
Cela fonctionne bien à un pixel À deux ou trois pixels les espaces commencent à apparaître aux milieux des courbes et des bords droits, car les quatre copies ne couvrent que les diagonales Pour un contour plus épais, ajoutez quatre couches supplémentaires sur les axes droits (en)0 -2px, 2px 0, 0 2px, -2px 0) donc huit exemplaires entourent chaque lettre.
Il existe une alternative non-ombre. -webkit-text-stroke dessine un vrai trait le long du chemin des glyphes et est pris en charge par les navigateurs actuels malgré son préfixe Il est centré sur le contour, il mange donc en lettres fines, et il est spécifié dans la norme de compatibilité WHATWG plutôt que dans un module CSS. Pour les petits contours nets sur le texte d'affichage, l'astuce à quatre ombres reste l'option la plus prévisible.
Comment fabriquez-vous du texte 3 D ou extrudé ?
Empilez plusieurs ombres dures dans la même couleur, chacune décalée d'un pixel plus bas et à droite Chaque copie ajoute un pixel de profondeur, et l'œil lit la pile comme le côté d'une lettre pleine.
Le préréglage Retro 3D :
text-shadow: 1px 1px 0px #e99537ff, 2px 2px 0px #e99537ff, 3px 3px 0px #e99537ff, 4px 4px 0px #00000040;
Trois couches orange construisent une extrusion à trois pixels, et une quatrième couche noire à 25 % d'opacité se trouve un pixel plus loin comme une ombre de contact qui amorce les lettres Pour une extrusion plus profonde, continuez à ajouter des couches orange avec des décalages 4, 5, 6 et déplacez la couche sombre jusqu'à la fin Douze couches pour une extrusion 12 px est normal pour un cap de grand héros.
Le préréglage Long Shadow utilise la même idée avec des lacunes et une opacité qui s'estompe :
text-shadow: 1px 1px 0px #00000033, 3px 3px 0px #00000026, 6px 6px 0px #0000001a, 10px 10px 0px #0000000f;
Les décalages augmentent (1, 3, 6, 10) tandis que l'opacité diminue (20 %, 15 %, 10 %, 6 %), de sorte que l'ombre s'éloigne en diagonale au lieu de former un bloc solide.
Quelle recette d’ombre de texte correspond à quel effet ?
Voici les huit préréglages dans le générateur, avec l'idée derrière chacun pour que vous puissiez les adapter.
| Préréglé | Couches | Compensations | Flou | Idée |
|---|---|---|---|---|
| Doux | 1 | 0, 2px | 4px | Ombre tombante subtile à 35 % de noir, sans danger pour la plupart des titres |
| Dur | 1 | 2px, 2px | 0 | Copie décalée croustillante à 60 % noir, un look imprimé plat |
| Lueur néon | 3 | 0, 0 | 7, 14, 28px | Même couleur, flou croissant, pour la lumière sur le noir |
| Rétro 3D | 4 | 1 à 4px diagonale | 0 | Des copies papier en marche plus une légère ombre de contact |
| Décrire | 4 | +/-1px diagonales | 0 | Quatre copies traçant le bord du glyphe |
| Embosser | 2 | -1px/-1px et 1px/1px | 0 | Surlignement blanc en haut à gauche, teinte foncée en bas à droite |
| Feu | 3 | 0, -1 / -2 / -4px | 4, 10, 18px | Jaune à orange à rouge, montant vers le haut |
| Longue Ombre | 4 | 1, 3, 6, 10px de diagonale | 0 | Écart croissant, opacité qui s'estompe |
Emboss est celui que les gens ont mal lu Il associe une ombre claire vers le haut et vers la gauche avec une ombre sombre vers le bas et vers la droite, qui imite la lumière du haut à gauche frappant les lettres en relief Échanger les deux couleurs et le texte regarde enfoncé dans la page à la place, l'effet typographique classique Les deux ne fonctionnent que lorsque la couleur du texte est proche de la couleur de fond ; sur le texte à contraste élevé les reflets disparaissent.
Le feu est le seul préréglé avec des décalages verticaux négatifs Chaque couche se déplace plus haut et devient de plus en plus floue, de sorte que la chaleur semble s'élever des lettres.
L’ombre de texte nuit-elle à la lisibilité ou à l’accessibilité ?
Il peut, et le risque croît avec le flou et le décalage Une ombre ne change pas le rapport de contraste que WCAG mesure, qui est calculé entre la couleur du texte et la couleur de fond Le minimum de contraste WCAG 2.1 demande 4,5 :1 pour le texte normal et 3 :1 pour le texte volumineux, et une lueur ne vous aide pas à y répondre sur papier.
En pratique, une mince ombre sombre derrière un texte clair sur une photo occupée rend les lettres plus faciles à repérer, car elle sépare les bords du glyphe de l'image Une forte lueur sur un petit texte fait le contraire : le halo remplit les compteurs de lettres comme " ; e" ; et " ; a" ; et le mot se transforme en bouillie.
Quelques lignes directrices qui tiennent le coup :
- Gardez les ombres du texte corporel subtiles. Quelque chose comme
0 1px 2px rgba(0, 0, 0, 0.3)est abondant. - Enregistrez les effets multicouches pour le grand texte d'affichage, environ 32 px et plus.
- Vérifiez l'effet sur les fonds clairs et sombres si votre site a un thème basculé.
- Ne comptez pas sur l'ombre pour sauver le contraste faible Fixez la couleur du texte en premier.
- Testez à la plus petite taille que le cap atteint sur un téléphone, où l'ombre est proportionnellement la plus grande.
Qu’est-ce qui ralentit l’ombre du texte et quelles sont les erreurs courantes ?
Le flou est la partie coûteuse Chaque couche floue doit être rastérisée et floue à chaque repeinture, et les échelles de coûts avec le rayon de flou et la quantité de texte Le référence MDN pour text-shadow couvre la syntaxe Le côté performance est simple à raisonner : une lueur à trois couches sur un seul titre est bon marché, et la même lueur sur chaque paragraphe d'un long article, repeint pendant le défilement, est une source courante de farce sur les téléphones de faible puissance.
Des erreurs qui apparaissent encore et encore :
| Erreur | Symptôme | Correction |
|---|---|---|
Écrire une valeur de spread comme 0 0 4px 2px red |
Toute la déclaration est ignorée | Supprimez la quatrième longueur ; l'ombre de texte n'a pas de propagation |
Ajout inset |
Déclaration ignorée | Non pris en charge sur le texte ; utilisez plutôt un gaufrage plus léger |
Flou négatif, par exemple -2px |
Déclaration ignorée | Le flou doit être nul ou positif |
| Commas manquantes entre les couches | Déclaration ignorée, rien ne rend | Séparez chaque ombre par une virgule |
| Lueur coupée sur les bords | Halo coupé en ligne droite | Parent a overflow: hidden; ajouter un remplissage |
| Lueur invisible | Rien ne semble se passer | Lumière lueur sur fond clair ; test sur fond sombre |
Préfixe du fournisseur -webkit-text-shadow |
Inoffensif mais inutile | Utiliser simple text-shadow; il n'a besoin d'aucun préfixe |
Les trois premiers méritent d'être soulignés Une seule partie non valide invalide toute la déclaration, pas seulement cette couche, donc une faute de frappe dans la couche quatre d'un effet 3 D à douze couches supprime les douze La sortie du générateur' ; s est toujours valide, ce qui est une des raisons pour construire la pile là et la coller.
Quand faut-il utiliser un générateur au lieu d’écrire du texte-shadow à la main ?
Une seule ombre douce est plus rapide à taper qu'à cliquer Tout ce qui comporte trois couches ou plus est plus rapide à construire visuellement, car vous jugez un regard, et un regard est difficile à juger à partir des chiffres Le générateur est également utile pour apprendre : choisissez un préréglage, changez un calque et regardez quelle partie de l'effet se déplace.
Le générateur Toolz fonctionne entièrement dans le navigateur L'aperçu, la liste des calques et le CSS sont tous calculés sur la page, rien n'est téléchargé et il continue de fonctionner hors ligne une fois chargé. C'est gratuit, aucune inscription. La copie CSS est prise en compte dans une allocation d'utilisation quotidienne, comme les autres outils du site ; l'édition et la prévisualisation ne le sont pas.
Ce qu'il ne fait pas : il n'a pas de em ou rem unités, pas de champs de numéro tapé, pas de glisser-réorganiser pour les calques, et pas de police personnalisée dans l'aperçu Pour ceux-là, copiez la déclaration et ajustez-la dans votre propre feuille de style ou les outils de développement de navigateur.
Si l'effet que vous souhaitez est un élément flou ou recolore plutôt qu'une ombre, Filtres CSS tels que drop-shadow() et blur() appliquer à des éléments entiers, y compris des images Les panneaux givrés derrière le texte sont un travail pour le générateur de glassmorphismeet les boutons extrudés souples appartiennent au générateur de neumorphisme. L'ensemble complet des constructeurs visuels CSS est sur le Hub d'outils CSS, et le Guide du générateur de gradient CSS se marie bien avec les effets de texte lorsque vous souhaitez un fond dégradé derrière un titre lumineux.
Un exemple concret : un titre de héros lisible sur une photo
Supposons que vous ayez un texte blanc 64 px sur une photo de plage lumineuse et que les lettres continuent de disparaître dans le sable L'objectif est la lisibilité d'abord, le style ensuite.
Commencez dans le outil texte-ombre avec le préréglage Soft : 0px 2px 4px #00000059. Sur une image occupée trop faible Augmentez l'opacité à 60 % et le flou à 8 px, ce qui donne 0px 2px 8px #00000099. Les bords se séparent de l'arrière-plan, mais de fines traits scintillent toujours.
Ajouter une deuxième couche avec zéro offset, 2 px de flou et 50 % de noir : 0px 0px 2px #00000080. Parce que vous l'avez ajouté en second, il peint derrière la première couche, mais il serre le bord du glyphe et donne à chaque trait un mince bord sombre Le résultat :
.hero-title {
color: #fff;
font-size: 64px;
text-shadow: 0px 2px 8px #00000099, 0px 0px 2px #00000080;
}
Deux couches, toutes deux bon marché à restituer, et le titre tient le coup sur le sable, le ciel et le surf Sur un téléphone où le cap descend à 36 px, les mêmes valeurs de pixels sont proportionnellement plus lourdes ; conversion à em les maintient en phase (0 0.03em 0.125em à 64px).
