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

Internet Explorer 10 introduit la prise en charge des ombres de texte à accélération matérielle en utilisant la propriété CSS (Cascading Style Sheets) text-shadow . La prise en charge de la propriété text-shadow était l’une des fonctionnalités les plus demandées par les développeurs Web. Elle autorise des effets de texte qu’il était auparavant difficile ou impossible d’accomplir sans recourir à des images de texte insérées.

Les ombres de texte CSS sont définies dans la section 10.3 de la spécification W3C (World Wide Web Consortium) de niveau 3 pour le texte CSS. Outre les pages Web dans Internet Explorer 10, les applications du Windows Store en JavaScript prennent en charge la propriété text-shadow. Cette rubrique décrit les concepts de base de l’implémentation des ombres de texte, puis vous montre les effets de texte singuliers rendus possibles par text-shadow.

Cette rubrique contient les sections suivantes :

Syntaxe de la propriété text-shadow

Utilisez les ombres de texte pour attirer l’attention sur le texte et lui donner de la profondeur. Utilisez text-shadow pour augmenter le contraste et améliorer la lisibilité du texte sur une image ou un arrière-plan coloré. Comme Internet Explorer 10 et la plupart des autres navigateurs les plus employés prennent en charge le standard text-shadow, aucun préfixe d’éditeur (tel que « -ms- », « -webkit », « -moz- », etc.) n’est requis. Par conséquent, les sites qui utilisent déjà text-shadowfonctionnent automatiquement dans Internet Explorer 10.

La propriété text-shadow applique un effet d’ombre portée au texte spécifié et est simple à implémenter. Si vous avez déjà utilisé la propriété box-shadow, vous connaissez la syntaxe de la propriété text-shadow ; elles sont quasiment identiques.

PropriétéDescription

text-shadow

Une ou plusieurs listes délimitées par des espaces de paramètres d’ombre, comme spécifié ici. Si plusieurs ombres sont spécifiées, les listes de paramètres sont séparées les unes des autres par des virgules.

  • horizontal offset Obligatoire. 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 Obligatoire. 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 Avec des valeurs positives, la forme de l’ombre s’étend 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 N’importe laquelle des valeurs de couleur CSS prises en charge.

 

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".

Voici un exemple de base de la propriété text-shadow. L’extrait de code suivant applique une ombre gris foncé avec une faible valeur de flou légèrement à droite et au-dessous du texte concerné :


.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 :

Capture d’écran du texte "Internet Explorer 10" en vert avec une ombre grise

Spécification des valeurs des propriétés

Vous devez spécifier au moins deux valeurs pour la propriété text-shadow— : les décalages x et y.


.shadow1 { 
  color: black; 
  text-shadow: 2px 2px; 
}

L’extrait de code précédent génère le graphisme suivant :

Capture d’écran du texte avec une ombre noire simple au-dessous

Il est souhaitable généralement de spécifier une couleur pour l’ombre. Dans l’exemple ci-dessous, "black" indique la couleur du texte proprement dit, tandis que "#87CEEB" est la représentation hexadécimale de la couleur de l’ombre, un bleu clair.


.shadow2 { 
  color: black; 
  text-shadow: #87CEEB 1px 3px; 
}

L’extrait de code précédent génère le graphisme suivant :

Capture d’écran du texte avec une ombre bleu clair simple

Le paramètre de couleur peut être placé au début ou à la fin de la définition de l’ombre. Vous pouvez également ajouter un rayon de flou, qui indique à quel point l’ombre doit être floue en utilisant un algorithme de flou gaussien. Par exemple, examinez l’extrait de code suivant :


.shadow3 { 
  color: black; 
  text-shadow: 1px 3px 3px rgba(135, 206, 235, 1); 
}

L’extrait de code précédent génère le graphisme suivant :

Capture d’écran du texte avec une ombre bleu clair floue

Vous pouvez également spécifier une distance de diffusion. Une valeur positive indique l’ampleur selon laquelle une ombre s’étend, tandis qu’une valeur négative indique l’ampleur selon laquelle elle se rétracte. Dans l’exemple de code ci-dessous, une distance de diffusion positive est appliquée :


.shadow4 { 
  color: black; 
  text-shadow: skyblue 0px 0px 0px 4px; 
}

L’extrait de code précédent génère le graphisme suivant :

Capture d’écran du texte avec une ombre bleu clair floue et une distance de diffusion appliquée

L’effet de la propriété text-shadow dotée d’une diffusion positive peut souvent être imité en dessinant suffisamment d’ombres à diffusion nulle. Toutefois, le balisage requis pour cela est plus complexe et peut générer une ombre de qualité et de performances moindres. Il peut être néanmoins nécessaire, pour imiter la diffusion dans les navigateurs qui ne la prennent pas en charge. Considérons, par exemple, l’extrait de code suivant :


.shadow4_nospread { 
  color: black; 
  text-shadow: skyblue 0px 2px, skyblue 2px 0px, skyblue -2px 0px, 
    skyblue 0px -2px, skyblue -1.4px -1.4px, skyblue 1.4px 1.4px, 
    skyblue 1.4px -1.4px, skyblue -1.4px 1.4px; 
}	

L’extrait de code précédent génère le graphisme suivant :

Capture d’écran du texte avec une ombre bleu clair floue et une distance de diffusion appliquée

Le paramètre de diffusion simplifie grandement la réalisation de cet effet. Vous pouvez également l’utiliser pour créer des effets qu’il serait autrement impossible de réaliser lorsque des valeurs négatives sont utilisées, comme dans l’exemple suivant :


.shadow5 { 
  text-shadow: 5px 5px 2px -2px #9966CC; 
}

L’extrait de code précédent génère le graphisme suivant :

Capture d’écran montrant le résultat du paramètre de diffusion

Les cinq paramètres illustrés ici définissent une même ombre. La propriété text-shadow prend en charge également une liste d’ombres, empilées de l’avant à l’arrière.

L’exemple ci-dessous illustre une ombre de texte composée de cinq ombres, répertoriées ici de l’avant à l’arrière :

  • une ombre blanche partiellement transparente,
  • une ombre jaune,
  • une ombre orange, dessinée au-dessus,
  • une ombre rouge.

.shadow6 { 
  text-shadow: rgba(255, 255, 255, .5) 1px 1px, 
    yellow 2px 3px, 
    rgba(255, 153, 0, .7) 3px 6px,
    rgba(255, 0, 0, .5) 4px 8px; 
}

L’extrait de code précédent génère le graphisme suivant :

Capture d’écran du texte avec plusieurs ombres appliquées

Comme, à l’heure où nous écrivons, il existe des prises en charge différentes du paramètre de distance de diffusion parmi les navigateurs, envisagez d’inclure une alternative de secours pour une interopérabilité maximale. Le paramètre de diffusion sera analysé comme non valide par les navigateurs qui ne le prennent pas en charge. Assurez-vous que votre balisage inclut une version de secours de text-shadow sans le paramètre de diffusion si vous décidez d’utiliser le dernier paramètre, sans quoi aucune ombre de texte n’apparaîtra dans les navigateurs qui ne prennent pas en charge la diffusion.


.shadow7 {
  color: black;
  text-shadow: #99FFCC 0px 0px 10px; /* for browsers without spread support */
  text-shadow: #99FFCC 0px 0px 10px 10px; /* for browsers with spread support */
}

Dans les navigateurs qui ne prennent pas en charge le paramètre de diffusion, l’extrait de code précédent génère le graphisme suivant :

Capture d’écran du texte ombré effectuée dans un navigateur qui ne prend pas en charge le paramètre de diffusion

Dans les navigateurs qui prennent en charge le paramètre de diffusion, y compris Internet Explorer 10, l’extrait de code précédent génère le graphisme suivant :

Capture d’écran du texte ombré effectuée dans un navigateur qui prend en charge le paramètre de diffusion

La diffusion de texte permet de nombreux autres effets, tels que l’écriture bâton, une ombre floue plus sombre ou une ombre plus mince.

Tirer les leçons du passé

Si vous êtes familiarisé avec la prise en charge propre à Windows Internet Explorer des filtres CSS, vous savez peut-être déjà que les ombres de texte pouvaient être réalisées auparavant à l’aide des filtres DXImageTransform.Microsoft.Shadow, DXImageTransform.Microsoft.DropShadow, DXImageTransform.Microsoft.Glow et DXImageTransform.Microsoft.Blur. Sachez que les filtres CSS ne sont plus pris en charge dans Internet Explorer 10, sauf lorsque le navigateur est dans un mode de document antérieur. (Pour plus d’informations sur les modes de document, voir Définition de la compatibilité des documents.)

Au lieu d’utiliser ces filtres DXImageTransform pour réaliser un effet d’ombre de texte, utilisez la propriété text-shadow pour Internet Explorer 10. Non seulement Internet Explorer 10 réalise l’effet d’une façon interopérable et conforme aux normes, mais les graphiques sont soumis à une accélération matérielle, ce qui fournit un gain de performances important par rapport à l’alternative obsolète.

Comportement alternatif

Les sites qui utilisent la propriété text-shadow aujourd’hui se dégradent harmonieusement lorsqu’ils sont rendus dans des navigateurs qui ne prennent pas en charge text-shadow. Dans de nombreuses utilisations de text-shadow sur le Web aujourd’hui, l’ombre de texte est une décoration subtile qui ajoute une certaine profondeur visuelle. Toutefois, text-shadow peut également être utilisé pour former des effets visuels plus créatifs. Veillez toutefois à prendre en compte les navigateurs qui ne prennent pas en charge la propriété text-shadow. Par exemple, l’image ci-dessous représente un extrait de texte auquel la propriété text-shadow est appliquée, tel qu’il apparaît dans Windows Internet Explorer 9 :

Capture d’écran de texte avec la propriété text-shadow appliquée sans alternative appropriée, dans Internet Explorer 9

Le texte est supposé apparaître comme cela dans Internet Explorer 10 et les autres navigateurs qui prennent en charge text-shadow :

Capture d’écran de texte avec la propriété text-shadow appliquée sans alternative appropriée, dans Internet Explorer 10

Si vous avez besoin de prendre en charge des navigateurs qui ne prennent pas en charge text-shadow, veillez à utiliser la détection des fonctionnalités pour textShadow dans le modèle CSSOM (CSS Object Model) pour changer de façon conditionnelle la couleur du texte lorsque vous pouvez prendre cette liberté artistique.

Par exemple, le code suivant assure un comportement alternatif approprié lors d’un affichage dans des navigateurs qui ne prennent pas en charge text-shadow :


if (typeof document.body.style.textShadow == 'undefined') {
  // text-shadow is not supported
  document.body.style.color = 'black';
}	
else {
  // text-shadow is supported
  document.body.style.color = '#FFFFCC';
  document.body.style.textShadow = 'turquoise -2px -2px, black 2px 2px';
}

Essayez vous-même text-shadow !

Essayez d’utiliser text-shadow dès aujourd’hui ! Si vous l’utilisez déjà, explorez les nouvelles possibilités que le paramètre spread propose. L’utilisation de plusieurs ombres et l’ajustement des différents paramètres permettent de créer des effets intéressants.

Voici une galerie d’effets text-shadow intéressants et audacieux :

Capture d’écran de différents effets d’ombre de texte

Vous pouvez consulter une version dynamique de cette galerie.

Étapes suivantes

Vous pouvez utiliser text-shadow avec des polices WOFF (Web Open Font Format) et des éléments d’entrée conjointement à des transitions et des animations CSS3 (Cascading Style Sheets de niveau 3). Si vous utilisez un navigateur qui prend en charge text-shadow et les transitions et animations CSS, visitez la galerie dont le lien était proposé précédemment pour voir ces fonctionnalités appliquées ensemble. Vous pouvez alors examiner le code HTML source ou utiliser les outils de développement F12 pour passer en revue le balisage.

La démonstration IE Test DriveDémonstration de text-shadow offre une façon interactive d’expérimenter les ombres de texte. Voyez comme il est simple de donner vie à du texte !

 

 

Afficher:
© 2014 Microsoft