Utilisation de Text-Shadow CSS pour créer du texte en relief

Les plats clés

• La propriété CSS Text-Shadow peut être utilisée pour créer un effet de texte en relief en simulant la lumière et l'ombre. Ceci est réalisé en appliquant une ombre blanche positive et une ombre noire négative au texte, créant l'impression de la lumière au bas des lettres et de l'ombre en haut.
• Pour rendre l'effet en relief plus réaliste, utilisez les valeurs de couleur RGBA pour une opacité partielle, évitez de compenser l'ombre dans les directions x et y et ajustez l'ombre en fonction des combinaisons de couleurs utilisées. Par exemple, pour un texte clair sur un fond coloré, utilisez une ombre négative sombre avec une opacité de 0,25 vers le haut.
• L'effet final peut être encore amélioré en se déplaçant vers une teinte plus foncée d'une couleur claire, ou une nuance plus claire de couleur foncée. Cela peut être réalisé en utilisant une combinaison subtile d'ombres claires et sombres, avec une faible opacité sur l'ombre sombre, une haute opacité sur l'ombre claire et un léger biais vers l'ombre de fond.

La propriété Text-Shadow crée une ombre sous le texte, ce qui est évident à partir du nom! Il est similaire en syntaxe et en fonctionnalité à Box-Shadow, mais il suit les formes des lettres individuelles, plutôt que de rendre autour de la boîte de délimitation d'un élément. Il y a un exemple de la syntaxe générale qui définit une image X-Offset, Y-Offset, Blur-radius, et je ne sais pas sur vous, mais il n'y a pas de situation où je veux jamais que je veux que je veuille que mon texte ne ressemble! Je n'ai jamais travaillé sur un design où ce type d'effet a été demandé, et je ne pense pas que cela ait l'air très joli. C'est ringard - comme ce que vous trouverez dans un e-mail de spam, ou sur un site Geocities.

text-shadow:3px 3px 1px #999;

Une touche de classe Cependant, Text-Shadow

est

très utile pour une certaine tâche, et cela semble être presque exclusivement pour quoi il est utilisé dans la nature - créant un texte en relief comme celui-ci:

Il a cette propriété d'ombre:

text-shadow:3px 3px 1px #999;

fait avec soin et pas trop effronté, l'effet peut être attrayant; it gives functional text like buttons and captions an extra touch of class.You can see a few examples of it on this page:

• orange buttons, such as the “Search” button in the search form at the top, or the “Subscribe” button for newsletter signups in the right-hand column
• the navy-headed boxes, like the newsletter signups box we just mentioned saying “Get Expert Tips In Your Boîte de réception », ou les onglets des catégories près du haut

Alors, comment cela fonctionne-t-il?

Light and Shade

Les effets de l'ombre et de la profondeur sont créés en simulant la lumière et l'ombre, il s'ensuit donc que nous avons deux façons de base d'appliquer une ombre blanche positive qui crée l'impression de la lumière au bas de l'ombre noire négative, essentiellement:

• text-shadow:0 -1px 1px rgba(0,0,0,0.5);

  Les lettres:

• text-shadow:1px 1px 0 white;

  Mais le problème qui se pose est qu'il peut être assez difficile de trouver le bon équilibre de nuances, en termes de la part de l'application afin d'atteindre un résultat réaliste. Trop subtil et c'est presque invisible à l'œil nu; Trop évident et cela commence à ressembler à un shadow drop. Et malheureusement, l'un des effets les plus difficiles à bien faire est le
le texte sombre sur un fond léger

, d'autant plus que le Text-Shadow est rendu à l'extérieur de la police , plutôt que sur le dessus. Voici mes conseils: avant tout, utilisez les valeurs de couleur RGBA , afin que l'effet ait une opacité partielle. Cela le fait se fondre mieux avec l'arrière-plan et vous donne plus de contrôle sur l'intensité de l'effet. (Bien que les couleurs RGBA manquent de support dans IE , c'est académique car il ne prend pas en charge cette propriété de toute façon.) Ne compensez pas l'ombre dans les deux

x

et y Directions car elle est trop visuellement. Il semble mieux si vous ne compendez que dans la direction y , comme si la lumière était directement au-dessus. Ensuite, utilisez différentes ombres en fonction des combinaisons de couleurs avec lesquelles vous travaillez: pour un texte clair sur un fond coloré (mais pas très sombre), utilisez l'effet sombre négatif avec une opacité de 0,25 vers le haut (plus la valeur est élevée, le plus prononcé l'effet). Ici, j'ai également adouci l'effet légèrement avec un Blur-Radius 1px:

Pour le texte coloré sur un fond léger (mais pas blanc), utilisez une ombre positive légère avec une opacité assez élevée:

• text-shadow:-1px -1px 0 black;

• D'autres combinaisons sont plus délicates: une ombre sombre sera inefficace sur un fond très sombre ou avec du texte très sombre, et le même pour une ombre claire avec un fond ou un texte clair. Mais après tout un tas d'expériences, je pense que le meilleur effet est réalisé avec une combinaison subtile d'ombres claires et sombres. Ajoutez une faible opacité sur l'ombre sombre, une haute opacité sur l'ombre claire et un léger biais vers l'ombre de l'arrière-plan (donc pour le texte sombre sur un fond clair, utilisez un peu plus d'ombre claire et un peu moins sombre; et vice versa). Semblable à cela:

  text-shadow:3px 3px 1px #999;

  plus loin de l'extrême, vous pouvez aller (c'est-à-dire vers une teinte plus foncée d'une couleur claire, ou une nuance plus claire d'une couleur foncée), mieux l'effet final devrait être.

Ces derniers exemples sont loin d'être parfaits, et l'effet n'est que marginalement prononcé (ce qui est à partir de la façon dont un shadow drop). Mais je pense qu'ils tirent le meilleur parti des combinaisons de couleurs maladroites, et donc tous les facteurs considérés, ils ont l'air bien. J'ai mis en place une page de démonstration avec les quatre exemples, et à mon avis, ils sont en ordre de leur apparence.

Vos idées?

J'aimerais entendre vos pensées pour de meilleures façons d'atteindre cet effet, en particulier avec ces combinaisons de couleurs difficiles. Ou peut-être avez-vous une tâche entièrement différente pour laquelle la propriété Text-Shadow est bonne pour? Crédit miniature: Daveknapik

Des questions fréquemment posées sur l'ombre du texte CSS et le texte en relief

Comment puis-je créer un effet en relief plus prononcé à l'aide de CSS Text-Shadow?

Pour créer un effet en relief plus prononcé, vous pouvez augmenter le rayon flou et le décalage de la propriété Text-Shadow. Le rayon de flou détermine la quantité de flou, et le décalage détermine la distance et la direction de l'ombre du texte. Par exemple, vous pouvez utiliser le code suivant:

Text-shadow: 2px 2px 2px # 000;

Cela créera une ombre qui est à 2 pixels à droite et à 2 pixels à partir du texte, avec un rayon flou de 2 pixels. La couleur de l'ombre est noire (# 000). Vous pouvez ajuster ces valeurs pour réaliser l'effet souhaité.

Puis-je utiliser plusieurs ombres de texte pour créer un effet en relief plus complexe?

Oui, vous pouvez utiliser plusieurs ombres de texte pour créer un effet en relief plus complexe. Vous pouvez spécifier plusieurs ombres en les séparant avec des virgules. Chaque ombre est spécifiée avec les trois mêmes valeurs: décalage horizontal, décalage vertical et rayon flou. Par exemple:

Text-shadow: 1px 1px 1px # 000, -1px -1px 1px #fff;

Cela créera deux ombres: une ombre noire qui est 1 pixel à droite et 1 pixel vers le bas à partir du texte, et une ombre blanche qui est 1 pixel vers la gauche et 1 pixel à partir du texte. Les deux ombres ont un rayon flou de 1 pixel.

Comment puis-je créer un effet de texte débossé (encadré) à l'aide de CSS Text-Shadow?

Pour créer un effet de texte (encadré) débossé, vous pouvez utiliser une valeur négative pour le décalage vertical et horizontal. Cela créera une ombre qui semble être à l'intérieur du texte, ce qui lui donne un look inséré ou dégradé. Par exemple:

Text-shadow: -1px -1px 1px # 000;

Cela créera une ombre noire qui est à 1 pixel à gauche et à 1 pixel à partir du texte, avec un rayon flou de 1 pixel.

Text-shadow pour créer un effet brillant. Pour ce faire, vous pouvez utiliser un grand rayon flou et une couleur vive pour l'ombre. Par exemple:

Text-shadow: 0 0 10px # f00;

Cela créera une lueur rouge autour du texte.

Comment puis-je créer un effet d'ombre multi-colorant à l'aide de CSS Text-shadow?

Pour créer un effet fantôme multi-colorant CSS, vous pouvez spécifier plusieurs ombres avec des couleurs différentes. Par exemple:

Text-shadow: 1px 1px 1px # f00, 2px 2px 1px # 0f0, 3px 3px 1px # 00f;

Cela créera trois ombres: une ombre rouge qui est 1 pixel à droite et 1 pixel à partir du texte, une ombre verte qui est 2 pixel Shadow bleu qui est à 3 pixels à droite et à 3 pixels du texte. Toutes les ombres ont un rayon flou de 1 pixel.

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!