Bordure de police CSS?

491

Avec tous les nouveaux trucs de bordure CSS3 en cours ( -webkit, ...) est-il maintenant possible d'ajouter une bordure à votre police? (Comme la bordure blanche unie autour du logo Twitter bleu). Sinon, y a-t-il des hacks pas trop laids qui accompliront cela en CSS / XHTML ou ai-je encore besoin de lancer Photoshop?

Lars Tackmann
la source

Réponses:

1004

Il existe une propriété CSS expérimentale appelée text-stroke , prise en charge sur certains navigateurs derrière un préfixe -webkit .

h1 {
    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans; color: yellow;
}
<h1>Hello World</h1>

Une autre astuce possible serait d'utiliser quatre ombres, un pixel chacune dans toutes les directions, en utilisant la propriété text-shadow:

h1 {
    /* 1 pixel black shadow to left, top, right and bottom */
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    font-family: sans; color: yellow;
}
<h1>Hello World</h1>

Mais il deviendrait flou pour plus de 1 pixel d'épaisseur.

Narcélio Filho
la source
4
cela a fonctionné pour moi parfaitement, j'ai ajouté seulement 1px "flou": text-shadow: -1px 0 1px noir, 0 1px 1px noir, 1px 0 1px noir, 0 -1px 1px noir
Jakub M.
84
idéal si vous n'avez besoin que d'une bordure 1px. Mais ça devient moche quand on utilise 2px ou plus.
Jules Colle
2
Remarque: il y a un bogue avec le navigateur Andriod ( code.google.com/p/android/issues/detail?id=7531 ), si vous définissez le "flou" sur 0px, aucun contour n'apparaît du tout.
Mark Rhodes
1
btw, vous pouvez trouver ce code dans la page de conseils CSS du W3C w3.org/Style/Examples/007/text-shadow.fr.html (sous la DRAWING LETTERS AS OUTLINESpartie)
luiges90
J'ai trouvé que cela fonctionne mieux sur un fond de couleur et la réponse de @ pixelass fonctionne mieux avec un fond d'image
SemanticZen
151

MISE À JOUR

Voici un mixage SCSS pour générer le trait: http://codepen.io/pixelass/pen/gbGZYL

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
@function stroke($stroke, $color) {
  $shadow: ();
  $from: $stroke*-1;
  @for $i from $from through $stroke {
   @for $j from $from through $stroke {
      $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
    }
  }
  @return $shadow;
}
/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {Style}           - text-shadow
@mixin stroke($stroke, $color) {
  text-shadow: stroke($stroke, $color);
}

entrez la description de l'image ici

OUI vieille question .. avec des réponses acceptées (et bonnes) ..

MAIS ... Au cas où quelqu'un en aurait besoin et détesterait taper du code ...

CECI est une bordure noire de 2 pixels avec prise en charge de CrossBrowser (pas IE). J'en avais besoin pour les polices @fontface, donc il fallait qu'elle soit plus propre que les réponses précédentes. polices "floues" (dessinées à la main ou similaires). Des sous-pixels (0,5 px) pourraient être ajoutés mais je n'en ai pas besoin.

Code long pour juste la frontière ??? ...OUI!!!

text-shadow: 1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0px 1px 0 #000,
    0px -1px 0 #000,
    -1px 0px 0 #000,
    1px 0px 0 #000,
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000,
    0px 2px 0 #000,
    0px -2px 0 #000,
    -2px 0px 0 #000,
    2px 0px 0 #000,
    1px 2px 0 #000,
    -1px 2px 0 #000,
    1px -2px 0 #000,
    -1px -2px 0 #000,
    2px 1px 0 #000,
    -2px 1px 0 #000,
    2px -1px 0 #000,
    -2px -1px 0 #000;

la source
mis à jour le code en raison d'un doublon de 0 2px 0 # 000 et de ses éléments - / +. Le flou (0 avant # 000) pourrait être supprimé mais j'ai tendance à le conserver même s'il est 0. Je dois également noter qu'il est recommandé d'avoir une version CSS minifiée ou compressée de votre code sur les sites de production et de conserver une version non compressée commentée pour édition. Le code ci-dessus est un bon exemple de la raison pour laquelle un code CSS doit être réduit mais doit être séparé ligne par ligne pour l'édition.
J'ai joué avec la propriété '-webkit-text-stroke' (principalement pour rendre les polices plus belles sur les fenêtres UGLY UGLY) Pourtant, cela a rendu les temps de chargement beaucoup trop longs et a même fait planter mon site (mac Chrome 16). Je l'ai donc supprimé plus rapidement que la page ne pouvait même se charger. Je suppose que cela n'est destiné qu'à des lignes de polices uniques. (Je l'utilisais pour 'body')
1
Avez-vous effectué une analyse comparative des performances avec cela? J'ai trouvé une ombre de texte pour enliser la page lors du défilement, par exemple
Chris Bosco
1
J'ai trouvé que cela fonctionne mieux sur un fond d'image et la réponse de @ Narcélio Filho fonctionne mieux avec un fond de couleur
SemanticZen
1
le codepen original "a disparu", j'ai donc créé un nouveau avec le code original de ce post et j'ai également fait une comparaison des autres solutions mentionnées ici codepen.io/Grienauer/pen/GRRdRJr
Grienauer
51

Vous pourriez peut-être émuler un trait de texte, en utilisant le CSS text-shadow(ou -webkit-text-shadow/ -moz-text-shadow) et un flou très faible:

#element
{
  text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  -moz-text-shadow: 0 0 2px #000;
  -webkit-text-shadow: 0 0 2px #000;
}

Mais bien que cela soit plus largement disponible que la -webkit-text-strokepropriété, je doute qu'il soit disponible pour la majorité de vos utilisateurs, mais cela pourrait ne pas être un problème (dégradation gracieuse, et tout ça).

David dit de réintégrer Monica
la source
3
Il convient de noter qu'il est possible d'omettre totalement le troisième argument afin de ne pas avoir de flou du tout.
François Feugeas
23

Pour en savoir plus sur certaines réponses qui ont mentionné -webkit-text-stroke, voici le code pour le faire fonctionner:

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 2.00px; 
}

Un article détaillé sur l'utilisation du trait de texte est ici et une liste des navigateurs qui prennent en charge le trait de texte est ici .

Ugtemlhrshrwzf
la source
11

Voici ce que j'utilise:

.text_with_1px_border
{
    text-shadow: 
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000;
}

.text_with_2px_border
{
    text-shadow: 
        /* first layer at 1px */
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000,
        /* second layer at 2px */
        -2px -2px 0px #000,
        -1px -2px 0px #000,
         0px -2px 0px #000,
         1px -2px 0px #000,
         2px -2px 0px #000,
         2px -1px 0px #000,
         2px  0px 0px #000,
         2px  1px 0px #000,
         2px  2px 0px #000,
         1px  2px 0px #000,
         0px  2px 0px #000,
        -1px  2px 0px #000,
        -2px  2px 0px #000,
        -2px  1px 0px #000,
        -2px  0px 0px #000,
        -2px -1px 0px #000;
}
rAthus
la source
2

Caractère de police de trait avec un mixage moins

Voici un mixin MOINS pour générer le coup: http://codepen.io/anon/pen/BNYGBy?editors=110

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
.stroke(@stroke, @color) {
  @maxi: @stroke + 1;
  .i-loop (@i) when (@i > 0) {
    @maxj: @stroke + 1;
    .j-loop (@j) when (@j > 0) {
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(1px) 0 @color;
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(1px) 0 @color;
      .j-loop(@j - 1);
    }
    .j-loop (0) {}
    .j-loop(@maxj);
    .i-loop(@i - 1);
  }
  .i-loop (0) {}
  .i-loop(@maxi);
  text-shadow+: 0 0 0 @color;
}

(il est basé sur une réponse pixelass qui utilise à la place SCSS)

Christian Toffolo
la source
1
text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;
user2987790
la source
1

J'ai créé une comparaison de toutes les solutions mentionnées ici pour avoir un aperçu rapide:

<h1>with mixin</h1>
<h2>with text-shadow</h2>
<h3>with css text-stroke-width</h3>

https://codepen.io/Grienauer/pen/GRRdRJr

Grienauer
la source
0

J'ai essayé une fois de faire ces coins arrondis et de faire des ombres avec css3. Plus tard, j'ai trouvé qu'il était toujours mal pris en charge (Internet Explorer (s), bien sûr!)

J'ai fini par essayer de le faire en JS (toile HTML avec IE Canvas), mais cela a beaucoup d'impact sur les performances (même sur ma machine C2D). En bref, si vous avez vraiment besoin de l'effet, pensez aux bibliothèques JS (la plupart d'entre elles devraient pouvoir fonctionner sur IE6) mais ne le faites pas trop à cause de problèmes de performances; si vous avez encore besoin d'une alternative ... vous pouvez utiliser SFiR, puis PS et SFiR. CSS3 n'est pas prêt aujourd'hui.

xandy
la source
0

Désolé, je suis en retard, mais en parlant de text-shadow, je pensais que vous aimeriez aussi cet exemple (je l'utilise assez souvent quand j'ai besoin de bonnes ombres sur le texte):

                    text-shadow: -2px   -2px lightblue,
                                 -2px -1.5px lightblue,
                                 -2px   -1px lightblue,
                                 -2px -0.5px lightblue,
                                 -2px    0px lightblue,
                                 -2px  0.5px lightblue,
                                 -2px    1px lightblue,
                                 -2px  1.5px lightblue,
                                 -2px    2px lightblue,
                               -1.5px    2px lightblue,
                                 -1px    2px lightblue,
                               -0.5px    2px lightblue,
                                  0px    2px lightblue,
                                0.5px    2px lightblue,
                                  1px    2px lightblue,
                                1.5px    2px lightblue,
                                  2px    2px lightblue,
                                  2px  1.5px lightblue,
                                  2px    1px lightblue,
                                  2px  0.5px lightblue,
                                  2px    0px lightblue,
                                  2px -0.5px lightblue,
                                  2px   -1px lightblue,
                                  2px -1.5px lightblue,
                                  2px   -2px lightblue,
                                1.5px   -2px lightblue,
                                  1px   -2px lightblue,
                                0.5px   -2px lightblue,
                                  0px   -2px lightblue,
                               -0.5px   -2px lightblue,
                                 -1px   -2px lightblue,
                               -1.5px   -2px lightblue;
}
Alex Tudor
la source