Text Shadow Generator
CSS text shadow
CSS text shadow S'exécute localement dans votre navigateur
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.30);
About the
Le générateur d'ombres de texte définit le décalage, le flou, la couleur et l'opacité d'une ombre derrière le texte, avec un aperçu en direct et le CSS. Contrairement à box-shadow, il n'a pas de valeur de propagation, ce qui surprend les gens : la seule façon d'alourdir une ombre de texte est d'empiler plusieurs ombres dans une seule déclaration. C'est très utile pour la lisibilité, en plaçant une subtile ombre sombre derrière un texte clair sur une photographie, et cela ne devrait jamais être ce qui rend le texte lisible, car il disparaît au moment où l'arrière-plan change.
Where people use the
- Ajout d'une ombre subtile pour qu'une légende se lit sur une photographie.
- Réaliser un effet de titre pressé ou gravé.
- Produire un traitement de texte rétro ou néon.
- Tester le poids d'une ombre avant qu'elle ne paraisse bon marché.
How to use the
- 1
Définir les décalages
Le décalage X se déplace vers la droite, le décalage Y se déplace vers le bas. Un décalage d'un ou deux pixels correspond à la profondeur ; tout ce qui est plus grand commence à ressembler à une ombre portée.
- 2
Définir le flou
Le flou adoucit le bord. Zero donne une copie matérielle du texte, c'est ainsi que les effets de contour et rétro sont créés.
- 3
Choisissez la couleur et l'opacité
Un texte sombre sur un fond clair veut une ombre claire et vice versa. Gardez l'opacité faible, sauf si vous souhaitez un effet évident.
- 4
Copiez le CSS
La règle comprend la couleur rgba, prête à coller.
- 5
Empilez les ombres si vous avez besoin de plus de poids
Ajoutez une deuxième ombre séparée par une virgule dans votre feuille de style. C'est le seul moyen d'épaissir une ombre de texte, puisqu'il n'y a pas d'étalement.
Conseils et bonnes pratiques
- Moins c'est plus : un ou deux pixels avec une faible opacité battent un flou important.
- Ne comptez jamais uniquement sur une ombre pour l’accessibilité ; corrigez le contraste en dessous.
- N'oubliez pas que la propriété est héritée, alors étendez-la à l'élément auquel vous faites référence.
Questions fréquemment posées
Pourquoi n’y a-t-il pas de valeur de spread ?
Parce que text-shadow n'en prend pas en charge. Sa syntaxe est le décalage X, le décalage Y, le flou et la couleur uniquement. Pour simuler la propagation, vous empilez plusieurs ombres identiques avec des décalages légèrement différents.
Puis-je l'utiliser pour rendre du texte lisible sur une image ?
Uniquement en complément. Une ombre aide sur les marges mais échoue sur les zones très fréquentées, et elle ne compte pas dans le rapport de contraste WCAG, qui est mesuré par rapport à la couleur d'arrière-plan. Ajoutez un canevas ou un panneau solide si la lisibilité compte vraiment.
Comment tracer un texte ?
Empilez quatre ombres à plus et moins un pixel dans chaque direction sans flou. Cela produit un effet de contour sans avoir besoin de -webkit-text-Stroke, qui n'est pas pris en charge partout.
Est-ce que cela ralentit la page ?
Une seule ombre statique ne coûte presque rien. Animer une ombre de texte, ou appliquer une grande ombre floue à une grande quantité de texte, est le point où le coût de repeinture apparaît.
Est-il hérité par les éléments enfants ?
Oui. L'ombre du texte est héritée, donc la définir sur un conteneur l'applique à chaque descendant contenant du texte, ce qui est parfois surprenant.