Ombres de texte

Internet Explorer 10 et les applications du Windows Store en JavaScript prennent en charge les ombres portées sur le texte à l’aide de la propriété  text-shadow CSS3 (Cascading Style Sheets, niveau 3).

Propriété text-shadow

La propriété text-shadow applique un effet d’ombre portée au texte sélectionné et est définie dans  CSS Text Decoration Module Level 3.World Wide Web Consortium (W3C). Si vous connaissez la syntaxe de la propriété box-shadow, vous connaissez déjà la syntaxe de la propriété text-shadow ; elles sont presque identiques.

PropriétéDescription

text-shadow

Une liste d’ombres séparées par une virgule qui applique une ou plusieurs ombres portées au texte spécifié. Chaque ombre est constituée d’une liste comportant les éléments suivants séparés par une virgule :

  • horizontal offset  Requis. Une valeur positive applique une ombre qui est décalée à droite du texte, une valeur négative décale l’ombre à gauche.
  • vertical offset  Requis. Une valeur positive applique une ombre qui est décalée sous le texte, une valeur négative décale l’ombre au-dessus.
  • blur distance  Les valeurs négatives ne sont pas autorisées. Si la valeur de flou est nulle, le bord de l’ombre est clair. Sinon, plus la valeur est élevée, plus le bord de l’ombre est flou.
  • spread distance  Les valeurs positives agrandissent la forme d’ombre dans toutes les directions selon le rayon spécifié. Inversement, avec des valeurs négatives la forme de l’ombre se contracte. (Notez que cette valeur peut ne pas être prise en charge par tous les navigateurs.)
  • color  L’une des valeurs de couleur prises en charge par Cascading Style Sheets (CSS).

 

La syntaxe de la propriété text-shadow est identique à la syntaxe de la propriété box-shadow, sauf que la propriété text-shadow ne reconnaît pas le mot clé inset.

L’exemple suivant applique une ombre gris foncé avec une faible valeur de flou légèrement à droite et au-dessous du texte spécifié :


.myselector 
{
...
  text-shadow: 0.1em 0.1em 0.15em #333;
}

Voici le résultat obtenu lorsque le sélecteur est appliqué à un petit bloc de texte :

Texte "Internet Explorer 10" auquel une ombre grise est appliquée.

Le W3C dispose d’une page entière de conseils et d’exemples concernant la propriété text-shadow : CSS text shadows.

Informations de référence sur les API

text-shadow

Exemples et didacticiels

Exemple d’ombre de texte CSS
Comment ajouter des effets de texte amusants à l’aide de CSS

Démonstrations du site Internet Explorer Test Drive

Hands On: Text-shadow

Billets IEBlog

Utilisation de graphiques Web normalisés dans IE10
Propriété CSS3 text-shadow dans Internet Explorer 10

Spécification

CSS Text Decoration Module Level 3: Section 4

Rubriques connexes

Arrière-plans et bordures
Maîtrise de CSS3 : 7 exemples text-shadow
Maîtrise de CSS3 : Ombres de texte

 

 

Afficher:
© 2014 Microsoft