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
source

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
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
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
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
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
source