Une propriété CSS qui à mon sens n’est pas assez utilisé est « text-shadow ». Pourtant, correctement utilisée, elle peut avoir un effet visuel très réussi. Mais, comme il y a toujours un mais, c’est une propriété CSS 3 récente, et qui donc n’est pas implémentée par tous les navigateurs, comme d’habitude.

L’utilisation, dont je vais vous montrer quelques exemples peut néanmoins s’appliquer pour d’autres procédés (créations d’images sur Photoshop etc..). Bon je sens que je reste dans le flou, passons à quelque chose de plus concret.

Cette propriété permet de créer un effet d’ombre sur le texte, mais pas toujours facile à réaliser. Chaque effet spécifie un décalage de l’ombrage, et peut en option, spécifier une zone de flou et la couleur de l’ombrage.

Le but de son utilisation dans mon cas est assez simple : rendre plus jolie et plus agréable des polices à la lecture. Généralement elle permet de rendre parfaitement lisible même un très petit texte d’une couleur semblable à celle du fond sur lequel elle est appliquée.

Premier exemple avec Spotify.

Ici, le titre de la chanson en gras  ainsi que l’artiste et le nom de l’album utilisent ce procédé. En zoomant, on aperçoit bien qu’il y a une petite ombre blanche en dessous de la police grise normale.

A première vue, ça ne se voit pas tant que ça, mais si vous commencez à y faire attention,  c’est la première chose que vous allez voir en ouvrant une nouvelle application. Non ? Ah bon ben je suis le seul alors.

Bien sûr, ici c’est réalisé sur un fond gris assez foncé, ce qui le rend assez voyant, sur du blanc, vous imaginez bien qu’on ne verra strictement rien.

Bon, c’est pas tout, mais comment qu’on fait ça en CSS alors ? Avec cette petite ligne :

text-shadow: #fff 0 1px 0;
/* Ombre de couleur blanche décalée d'1px vers le bas. */

Exemple qui se passe sur mon portofolio, je compare ici l’écriture du lien « suivantes » avec ou sans la propriété text-shadow.

Vous remarquerez également que j’ai utilisé cette technique pour le mot « Réalisations » juste au-dessus. Sur Photoshop il suffit de dupliquer votre calque de texte, le remplir en blanc et le descendre de quelques pixels selon la taille de votre texte.

Il y a bien sûr surement des tas d’autres applications qui utilisent ce « système » (ce blog par exemple), notamment du côté de chez Mac, où je ne vois plus que ça.