web-dev-qa-db-fra.com

Bordure de police CSS?

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

cssfonts
444
Lars Tackmann

La bonne réponse est:

h1 {
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<h1>Hello World</h1>

Cela définira quatre ombres de même type sur les quatre côtés.

915
Narcélio Filho

MISE À JOUR

Voici un mix 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);
}

enter image description here

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

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

CECI est une bordure noire de 2 pixels avec le support CrossBrowser (pas IE). J'avais besoin de cela pour les polices @fontface, il fallait donc qu'il soit plus propre que les réponses précédentes. "floues" (handrawn ou similaire). Des sous-pixels (0.5px) 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;
139
user950658

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

#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 cette propriété soit plus largement disponible que la propriété -webkit-text-stroke, je doute qu'elle soit accessible à la majorité de vos utilisateurs, mais cela pourrait ne pas poser de problème (dégradation progressive, etc.).

48
David Thomas

Pour en savoir plus sur certaines réponses qui ont mentionné -webkit-text-stroke, voici le code permettant de 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 la liste des navigateurs prenant en charge le trait de texte est ici .

19
Colm Sloan

Il semble y avoir une propriété 'text-stroke', mais (du moins pour moi), cela ne fonctionne que dans Safari.

http://webkit.org/blog/85/introducing-text-stroke/

15
andsve

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;
}
11
rAthus

Caractère de police avec un mélange moins

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

/// 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 la réponse pixelass qui utilise plutôt SCSS)

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

Une fois, j'ai essayé de faire ces coins arrondis et de faire tomber les ombres avec CSS3. Plus tard, j’ai trouvé qu’il était toujours mal supporté (Internet Explorer (s), bien sûr!)

J'ai fini par essayer de le faire dans JS (canevas HTML avec IE Canvas), mais cela influe beaucoup sur les performances (même sur ma machine C2D). En bref, si vous avez vraiment besoin de cet effet, pensez aux bibliothèques JS (la plupart d’entre elles devraient pouvoir fonctionner sur IE6), mais évitez de trop en faire pour des raisons de performances. si vous avez encore besoin d'une alternative ... vous pouvez utiliser SFiR, puis PS it et SFiR it. CSS3 n'est pas prêt aujourd'hui.

0
xandy