Est-il possible d’intégrer une bordure autour du texte comme l’image ci-dessous?
Utilisez plusieurs ombres de texte:
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
body { font-family: sans-serif; background: #222; color: darkred; } h1 { text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; }
test
Sûr. Vous pouvez utiliser CSS3 text-shadow
:
text-shadow: 0 0 2px #fff;
Cependant, il ne sera pas affiché dans tous les navigateurs immédiatement. L’utilisation d’une bibliothèque de scripts telle que Modernizr vous aidera à la trouver correctement dans la plupart des navigateurs.
Ce qui suit couvrira tous les navigateurs intéressant:
text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */ filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
Je n’aime pas beaucoup les solutions basées sur la multiplication des ombres de texte, ce n’est pas vraiment flexible, cela peut fonctionner pour un trait de 2 pixels où les directions à append sont 8, mais avec seulement 3 pixels Pas vraiment confortable à gérer.
Le bon outil existe, c’est SVG
Le problème de support des navigateurs ne vaut rien dans ce cas, car l’utilisation de text-shadow a aussi son propre problème de support, filter: progid:DXImageTransform
peut être utilisé ou IE <10 mais souvent ne fonctionne pas comme prévu.
Pour moi, la meilleure solution rest SVG avec une solution de repli en texte non tracé pour les anciens navigateurs:
Ce type d’approche fonctionne pratiquement sur toutes les versions de Chrome et Firefox, Safari depuis la version 3.04, Opera 8, IE 9
Comparé à text-shadow
dont les supports sont: Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9, il est encore plus compatible.
.stroke { margin: 0; font-family: arial; font-size:70px; font-weight: bold; } svg { display: block; } text { fill: black; stroke: red; stroke-width: 3; }
body { font-family: sans-serif; background: #222; color: darkred; } h1 { text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; }
test