CSS Font Border?

Avec tous les nouveaux éléments de bordure CSS3 ( -webkit , …), est-il maintenant possible d’append une bordure à votre police? (Comme la bordure blanche solide autour du logo bleu de Twitter). Si ce n’est pas le cas, y a-t-il des hacks pas trop moche qui vont accomplir cela en CSS / XHTML ou dois-je quand même lancer Photoshop?

La bonne réponse est:

 h1 { color: yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } 
 

Hello World

METTRE À JOUR

Voici un mixin SCSS pour générer le coup: 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); } 

entrer la description de l'image ici

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

MAIS … au cas où quelqu’un aurait besoin de cela et déteste le code de frappe …

CECI est une bordure noire 2px avec le support CrossBrowser (pas IE) J’avais besoin de ceci pour les fonts @fontface donc il devait être plus propre que les réponses précédentes … Je prends chaque côté au pixel pour m’assurer qu’il y a (presque) des lacunes pour ” fuzzy “(handrawn ou similar) fonts. Des sous-pixels (0.5px) pourraient être ajoutés mais je n’en ai pas besoin.

Long code pour juste la bordure ??? …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; 

Vous pourriez peut-être émuler un 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 propriété -webkit-text-stroke , je doute qu’elle soit disponible pour la majorité de vos utilisateurs, mais cela ne pose peut-être pas de problème (dégradation progressive, etc.).

Pour développer plus en détail 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 prenant en charge le trait de texte est ici .

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/

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

Caractère de police de trait avec moins de mixin

Voici un mixin LESS 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; } 

(basé sur la réponse pixelass qui utilise plutôt SCSS)

 text-shadow: 1px 1px 2px black, 1px -1px 2px black, -1px 1px 2px black, -1px -1px 2px black; 

J’ai essayé une fois de faire ces coins arrondis et de laisser tomber des ombres avec css3. Plus tard, j’ai trouvé que c’était encore mal supporté (Internet Explorer (s), bien sûr!)

J’ai fini par essayer de le faire dans JS (canvas 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, considérez les bibliothèques JS (la plupart d’entre elles devraient pouvoir s’exécuter sur IE6), mais ne le faites pas trop à cause de problèmes de performances; Si vous avez toujours besoin d’une alternative … vous pouvez utiliser SFiR, puis PS it et SFiR. CSS3 n’est pas prêt aujourd’hui.