Comment ajouter/modifier l’Ombres de texte

2022-09-22 21:50:54  jeudi  W3C 10245 mots  

La version 3 de CSS a une propriété appellée "text-shadow" pour ajouter une ombre à chaque lettre d'un quelconque texte. Dans sa forme la plus simple, cela ressemble à quelque-chose comme cela :

h3 {text-shadow: 0.1em 0.1em #333}

Ceci ajoute une ombre gris-foncée (#333) un peu sur la droite (0.1em) et vers le bas (0.1em) par rapport au texte normal. Le résultat ressemble à ceci :

The noak and the barcicle

(En Août 2005, tous les navigateurs ne supportent pas encore complètement "text-shadow". L'exemple ci-dessus devrait fonctionner au moins sur Safari et Konqueror.)

Ombres de texte floues

La forme la plus simple de la propriété "text-shadow" comporte deux parties : une couleur (comme la #333 ci-dessus) et un décalage (0.1em 0.1em dans l'exemple ci-dessus). Il en résulte une forte ombre au décalage indiqué. Mais le décalage peut également être flou, ce qui entraîne une ombre plus ou moins vaporisée.

Le niveau de flou est donné comme un autre décalage. Voici deux lignes, l'une avec un peu de flou (0.05em) et une avec beaucoup de flou (0.2em) :

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

“What do you say?” said the UK

In order to see more clearly

Texte blanc lisible

Les ombres peuvent rendre le texte plus lisible si le contraste entre le premier plan et l'arrière-plan est faible. Voici un exemple de texte blanc sur un fond bleu pâle, d'abord sans l'ombre et ensuite avec :

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Sans ombre :

What is in it for me?

Avec ombre :

With a shovel and some oranges

Ombres multiples

Vous pouvez aussi avoir plus d'une ombre. En général, cela a un aspect assez étrange :

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

I wish wish wish…

Mais avec deux ombres sombres et claires bien placés, l'effet peut être utile :

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #444}

I, Augustus (you know who)

That's extra, of course

Ceci est un peu dangereux, comme vous pouvez le voir si votre navigateur ne supporte pas "text-shadow". En fait, les couleurs de l'arrière-plan et le texte dans cet exemple sont presque les mêmes (#CCCCCC et #D1D1D1), donc sans les ombres, il y a à quasiment aucun contraste.

Dessiner le contour des lettres

L'exemple des deux ombres de la version précédente peut être utilisé encore d'avantage. Avec quatre ombres, un contour peut être donné aux lettres :

h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

Are you feeling red?

A cat, an apple, etcetera

Ce n'est pas un contour parfait, et pour le moment (Août 2005), la discussion est encore ouverte à savoir si CSS doit avoir une propriété distincte (ou peut-être une valeur pour "text-decoration") pour faire de meilleurs contours.

Lueur de néon

Si vous mettez une ombre floue juste derrière le texte, à savoir, avec un décalage de zéro, l'effet consiste à créer une lueur autour des lettres. Si la lueur d'une seule ombre n'est pas assez intense, il suffit de répéter la même ombre à quelques reprises :

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}

With a zest of best

There's no no like a better no

Indeed, quite right, Mr M

text-shadow

La propriété text-shadow ajoute des ombres au texte. Elle accepte une liste d'ombres à appliquer au texte et aux décorations de l'élément. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur.

Exemple interactif

Syntaxe

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Utiliser les défauts pour la couleur et le rayon de flou */
text-shadow: 5px 10px;

/* Valeurs globales */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

Cette propriété est spécifiée comme une liste d'ombres séparées par des virgules.

Chaque ombre est spécifiée par deux ou trois valeurs <length>, suivies d'une valeur <color>. Les deux premières valeurs <length> sont les valeurs <decalage-x> et <decalage-y>. La troisième valeur <length>, facultative, est le <rayon-de-flou>. La valeur <color> est la couleur de l'ombre.

Lorsque plus d'une ombre est indiquée, les ombres sont appliquées d'avant en arrière, avec la première ombre spécifiée sur le dessus.

Cette propriété s'applique aux deux pseudo-éléments ::first-line et ::first-letter.

Valeurs

<color>

Optionnelle. La couleur de l'ombre. Elle peut être spécifiée avant ou après les valeurs de décalage. Si non spécifiée, la valeur de la couleur est laissée à l'agent utilisateur, donc quand une cohérence entre les navigateurs est désirée, vous devriez la définir explicitement.

<decalage-x> <decalage-y>

Obligatoires. Ces valeurs <length> définissent la distance de l'ombre par rapport au texte. <decalage-x> définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. <decalage-y> définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont à 0, l'ombre sera placée exactement derrière le texte, bien qu'elle puisse être partiellement visible du fait de l'effet du <rayon-de-flou>).

<rayon-de-flou>

Optionnel. C'est une valeur <length>). Plus la valeur sera élevée, plus le flou sera important ; l'ombre deviendra plus large et plus légère. Si non utilisée, elle a pour défaut 0.

Syntaxe formelle

text-shadow = 
  none                            |
  [ <color>? && <length>{2,3} ]#

Exemples

Ombre simple

.red-text-shadow {
   text-shadow: red 0 -2px;
}
<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>

 

Ombres multiples

.white-text-with-blue-shadow {
   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
   color: white;
   font: 1.5em Georgia, serif;
}
<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsaquae ab illo inventore.</p>

Spécifications

Spécification Statut Commentaire
CSS Transitions
La définition de 'text-shadow' dans cette spécification.		 Version de travail Spécifie text-shadow comme animable.
CSS Text Decoration Module Level 3
La définition de 'text-shadow' dans cette spécification.		 Candidat au statut de recommandation La propriété CSS text-shadow était incorrectement définie dans CSS2 et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans CSS Text Decoration Module Level 3.
Valeur initiale none
Applicabilité tous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritée oui
Valeur calculée une couleur et trois longueurs absolues
Type d'animation une liste d'ombres

Notes CSS Quantum

  • Gecko présente un bug en raison duquel les transitions ne fonctionnent pas lors d'une transition entre une text-shadow avec une couleur spécifiée et une ext-shadow sans couleur spécifiée (bug 726550). Cela a été corrigé dans le nouveau moteur CSS (aussi connu comme Quantum CSS ou Stylo), prévu pour être disponible dans Firefox 57.

Voir aussi

Génial ! ()
CSS Ombre Texte

Précédent:ECMS Modèle de couverture/modèle de page de liste appelez le lien de la section parente

Suivant:Comment appeller les informations avec balises et mots-clés en utlisant ECMS

Relation
Commentaire