Cu toate noile CSS3 border chestii (-webkit
, ...) este acum posibil pentru a adăuga un chenar la font? (Cum ar fi solid chenar alb în jurul valorii de albastru Twitter logo-ul). Dacă nu, sunt acolo nici nu prea urâtă hacks, care va realiza acest lucru în CSS/XHTML sau nu am nevoie să porniți Photoshop?
Răspunsul corect este:
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<h1>Hello World</h1>
Acest lucru va stabili patru același tip umbre de la cele patru laturi.
Aici's o SCSS mixin pentru a genera accident vascular cerebral: 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);
}
DA intrebare.. cu acceptat (și bună) răspunsuri..
DAR...în cazul În care vreodată cineva are nevoie de acest lucru și urăște să tastați codul...
ACEASTA este o 2px chenar negru cu CrossBrowser suport (nu IE) Am nevoie de acest lucru pentru @fontface fonturi, astfel încât este necesar să fie mai curat decât anterior văzut răspunsuri... Am nevoie de fiecare parte pixelwise să asigurați-vă că există (aproape) fără goluri pentru "fuzzy" (handrawn sau similar) fonturi. Subpixeli (0.5 px) ar putea fi adăugat, dar nu't nevoie de ea.
Cod lung pentru frontiera??? ...DA!!!
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;
Ai putea, probabil, imite un text-accident vascular cerebral, folosind css text-shadow "(sau " - webkit-text-shadow
/-moz-text-shadow
) și o foarte mică blur:
#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;
}
Dar în timp ce acest lucru este mult mai disponibile pe scară largă decât `-webkit-text-stroke proprietate, mă îndoiesc că-l's disponibil pentru majoritatea utilizatorilor, dar asta nu ar fi o problema (degradare, și tot așa).
Pentru a elabora mai mult pe unele răspunsuri pe care au menționat -webkit-text-stroke, aici's este codul pentru a face să funcționeze:
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 2.00px;
}
Un articol detaliat despre utilizarea de text accident vascular cerebral este aici și o listă de browsere care acceptă text accident vascular cerebral este aici.
Aici's ceea ce am'm, folosind :
.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;
}
Aici's-o mai PUȚIN mixin pentru a genera accident vascular cerebral: 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;
}
(it's bazat pe pixelass răspuns că, în schimb, utilizează SCSS)
Am încercat o dată pentru a face acele colturi rotunde și umbre cu css3. Mai târziu, am găsit-o este încă slab susținută (Internet Explorer(s), desigur!)
Am ajuns încearcă să faci asta în JS (HTML canvas cu IE Panza), dar impactul de performanță mult (chiar pe C2D mașină). Pe scurt, dacă aveți cu adevărat nevoie efectul, ia în considerare biblioteci JS (cele mai multe dintre ele ar trebui să fie capabil de a rula pe IE6) dar nu't peste o fac din cauza problemelor de performanță; dacă mai ai nevoie de o alternativă... ai putea folosi SFiR, apoi PS și SFiR it. CSS3 este't gata azi.