Y a-t-il un moyen 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;
}
<h1>test</h1>
Vous pouvez également utiliser le trait de texte, qui ne fonctionne que dans Webkit:
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
body {
font-family: sans-serif;
background: #222;
color: darkred;
}
h1 {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}
<h1>test</h1>
Aussi en lire plus comme CSS-Tricks.
Sûr. Vous pouvez utiliser CSS3 text-shadow
:
text-shadow: 0 0 2px #fff;
Cependant, il ne s'affichera pas immédiatement dans tous les navigateurs. L'utilisation d'une bibliothèque de scripts telle que Modernizr vous aidera cependant à bien faire les choses dans la plupart des navigateurs.
Les éléments suivants couvriront tous les navigateurs qui en valent la peine:
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 trop 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 de trait sont devenues 16, etc. . Pas vraiment confortable à gérer.
Le bon outil existe, il s'agit de SVG <text>
Le problème de support des navigateurs n'a aucune valeur dans ce cas, car l'utilisation de text-shadow a aussi son propre problème de support, filter: progid:DXImageTransform
can être utilisé ou IE <10 mais ne fonctionne souvent pas comme prévu.
Pour moi, la meilleure solution reste SVG avec un repli en texte non modifié pour les navigateurs plus anciens:
Ce type d'approuch fonctionne sur pratiquement 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, le résultat 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;
}
<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>
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>