Bordure de texte en utilisant CSS (bordure autour du texte)

108

Existe-t-il un moyen d'intégrer une bordure autour du texte comme l'image ci-dessous?

bordure de texte

text css jho1086
la source

Réponses:

222

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;

entrez la description de l'image ici

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;
}
<h1>test</h1>
Développer l'extrait

Vous pouvez également utiliser un trait de texte, qui ne fonctionne que dans le kit Web:

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;

entrez la description de l'image ici

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}
<h1>test</h1>
Développer l'extrait

Lisez également plus en tant que CSS-Tricks.

bookcasey
la source
À NOTER: S'il vous plaît tester les capacités multi-navigateurs de ces méthodes ... J'ai de sérieux problèmes avec les clients sur IE au moins 9 ... un peu penser à aller de la manière PNG.
ErickBest
1
@ErickBest Le deuxième lien mentionne les problèmes d'IE9. Bien que cette page n'ait pas été difficile à trouver sur google caniuse.com/css-textshadow
AnnanFay
Provoque un mauvais affichage du texte avec transparence (en utilisant rgba).
Alejandro Nava
14

Sûr. Vous pouvez utiliser CSS3 text-shadow:

text-shadow: 0 0 2px #fff;

Cependant, cela n'apparaîtra pas immédiatement dans tous les navigateurs. Cependant, l' utilisation d'une bibliothèque de scripts comme Modernizr aidera à bien faire les choses dans la plupart des navigateurs.

jtheman
la source
1
J'ai déjà essayé cela monsieur, mais j'ai besoin d'un texte blanc uni.
jho1086
8

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 à ajouter sont 8, mais avec seulement 3 pixels, les directions du trait sont devenues 16, et ainsi de suite. Pas vraiment confortable à gérer.

Le bon outil existe, c'est SVG <text> 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:DXImageTransformpeut être utilisé ou IE <10 mais ne fonctionne souvent pas comme prévu.

Pour moi, la meilleure solution reste SVG avec une solution de secours en texte sans contour pour les navigateurs plus anciens:

Ce type d'approche fonctionne sur pratiquement toutes les versions de Chrome et Firefox, Safari depuis la version 3.04, Opera 8, IE 9

Comparé à text-shadowdont les supports sont: Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9, il en résulte 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;
  }
<p class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
    <text x="0" y="70">Stroked text</text>
  </svg>
</p>
Développer l'extrait

Holden
la source
1
merci de partager votre solution. Je pense que votre droit est plus flexible. Mais la plupart du temps, il est plus efficace d'utiliser le CSS. J'essaierai d'utiliser SVG plus tard.
jho1086 le
6 
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
chezwhite
la source
3
Pouvez-vous également ajouter une explication?
Robert
5

Ce qui suit couvrira tous les navigateurs à couvrir:

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 */
dtbarne
la source