CSS - Une bordure autour des lettres

En CSS, on connaît bien-sûr les bordures autour des éléments. On sait aussi faire des arrondis. Mais ajouter une bordure autour des lettres d'un texte ou d'un titre, c'est déjà moins évident. Mais c'est bien-sûr possible… Avec plusieurs ombres sur le même texte. Ce sera l'astuce du jour :

Une ombre, deux ombres, trois ombres…

Avant d'entrer dans le vif du sujet, un petit rappel s'impose :

La propriété CSS pour réaliser des ombres pour du texte se nomme text-shadow et a l'avantage de pouvoir comporter plusieurs séries de valeurs : il suffit de les séparer par une virgule.

Par exemple, si je veux une ombre cyan en bas et une ombre magenta en haut d'un titre, je n'ai qu'à écrire les valeurs pour ces deux cas de figure et séparer chaque suite par une virgule :

h1{text-shadow:0 4px 0 #00ecff, 0 -4px 0 #ff4045;}

Je rappelle la syntaxe ici, pour cette propriété :

text-shadow: NlargeurMesure NhauteurMesure NflouMesure Couleur;}

Le premier chiffre concerne la largeur, le second la hauteur, le troisième l'amplitude du flou (toujours en unité de longueur). Pour ces deux chiffres, la mesure doit être précisée (em, rem, px…) sauf pour un zéro, et ils peuvent être négatifs (un - devant) pour les ombres vers le haut ou la gauche. Et pour terminer, on note la couleur de l'ombre (fonction rgba acceptée pour la transparence si besoin).

Résultat de notre exemple :

Exemple de texte avec deux ombres

Oui, on est d'accord que là c'est moche . Mais c'est juste pour l'exemple.
Notons que le navigateur affiche les ombres dans l'ordre inverse de la lecture du code : la dernière ombre sera affichée derrière les précédentes déclarées. Dans notre exemple, l'ombre cyan à été déclarée avant l'ombre magenta ; ce sera donc l'ombre cyan qui sera affichée devant la seconde.

Technique 1 : une simple règle CSS

Sachez qu'il existe déjà une règle CSS pour ajouter un contour au texte. Il s'agit de text-stroke.

-webkit-text-stroke: 2px;
-webkit-text-stroke-color: #d60;

Malheureusement, elle n'est pas encore supportée par tous les navigateurs Web. C'est son gros désavantage.

Mais visuellement, c'est parfait. Essayez sur Firefox, vous aurez un résultat impeccable :

Texte décoré avec text-stroke

Observez que l'épaisseur de la bordure se répand exactement sur l'axe du contour au lieu de s'étaler à l'extérieur.

À défaut, voici donc deux autres techniques pour remplacer cette propriété :

Technique 2 : répétition d'ombre floue

La première technique consiste à répéter une ombre floue derrière le texte, jusqu'à ce qu'elle forme un aspect opaque.

Le nombre de répétition dépend de la taille du flou. Pour 2 pixels, comptez 20 fois la même ombre. Voici un exemple :

text-shadow: 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60;

Résultat :

Texte avec 20 ombres floues de 4px

Notez que cette technique donne un bord peu net, fort arrondi et nécessite beaucoup de répétition pour des bordures épaisses.

Technique 3 : une ombre opaque sur tous les angles

La seconde technique est plus précise :

Elle consiste à réaliser 8 ombres opaques qui iront chacune dans un angle.
Démonstration :

text-shadow: 2px 0 0 #d60, 2px 2px 0 #d60, 0 2px 0 #d60, -2px 2px 0 #d60, -2px 0 0 #d60, -2px -2px 0 #d60, 0 -2px 0 #d60, 2px -2px 0 #d60;

Résultat :

Texte avec 8 ombres opaques sur 2px

Le rendu est plus précis au niveau des angles. Mais un inconvénient apparaît d'autant plus sur les pointes des caractères, que les ombres sont éloignées du texte. Voici un exemple flagrant :

C K X Y

C'est moche, hein ! Pour limiter ce défaut et lisser le tout au pixel près, il faudrait multiplier les 8 ombres par le nombre de pixels de large que fait l'épaisseur du texte.

En revanche, 8 ombres sont largement suffisantes pour un texte d'un pixel de large, ou pour des polices d'écriture bien rondes.

La technique vous paraît trop laborieuse à coder ?
Ne vous cassez pas la tête : utilisez ce générateur de code CSS en ligne.
Il vous fera tout le boulot à votre place ! Merci au généreux développeur qui nous partage son application en ligne.

Bon développement à tous !