Add stroke around text - on the outside - with css?

Answer 1

I have also tried text-shadow and -webkit-text-stroke, but unsuccessful in all ways. I could only get the result by making two divs(background and foreground) i.e,

background div with -webkit-text-stroke and foreground div without -webkit-text-stroke.

<div style="position:absolute;width:1280px;height:720px;left:0px;top:0px" >
    <div style="color:#CDCDCD;
                font-family:sans-serif;
                font-size:57px;
                -webkit-text-stroke-color:black;
                -webkit-text-stroke-width:0.04em;" >
        <p>
            Text with outine stroke outwards.
        </p>
    </div>
</div>

<div style="position:absolute;width:1280px;height:720px;left:0px;top:0px" >
    <div style="color:#CDCDCD;
                font-family:sans-serif;
                font-size:57px;" >
        <p>
            Text with outine stroke outwards.
        </p>
    </div>
</div>

Bt the only problem with the html generated through is twice the size(size in memory) as the div is repeated twice.

Does anyone has some better solution?

Answer 2

For a smooth outside stroke emulated by text shadow, use the following 8-axis shadow:

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

For customisation, you can use this SASS mixin instead (although changing the size does have side effects on rendering):

@mixin stroke($color: #000, $size: 1px) {
  text-shadow:
    -#{$size} -#{$size} 0 $color,
     0        -#{$size} 0 $color,
     #{$size} -#{$size} 0 $color,
     #{$size}  0        0 $color,
     #{$size}  #{$size} 0 $color,
     0         #{$size} 0 $color,
    -#{$size}  #{$size} 0 $color,
    -#{$size}  0        0 $color;
}

This gives a very smooth stroke, without missing parts like the above example (where it only uses 4 axis).

Answer 3

One way I found was to stack two elements on each other having the element that stays behind get the double stroke width. The element behind leaks the stroke to the outside of the visible element making it a true stroke outside.

Also, another option is to use :after to create this second element. The downside is that you can't programmatically change the stroke

This might not work properly on big stroke values.

body { background-color: gray; }
h1 {
  color: white;
  font-size: 2.5em;
  font-family: verdana;
}

.stroke { -webkit-text-stroke: 2px black; }

.stack .stroke { -webkit-text-stroke: 4px black; }
h1.stroke-fs { font-size: 2.7em; }

.stack { position: relative; }
.stack > h1:not(:first-child) {
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
}


.stroke-after:after { 
  -webkit-text-stroke: 4px black;
  content: attr(value);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

Stack
<div class="stack">
  <h1 class="stroke">WHAT CARRER SHOULD YOU HAVE ?</h1>
  <h1>WHAT CARRER SHOULD YOU HAVE ?</h1>
</div>

<hr />

After
<div style="position: relative">
  <h1 class="stroke-after" value="WHAT CARRER SHOULD YOU HAVE ?">WHAT CARRER SHOULD YOU HAVE ?</h1>
</div>

<hr />

Native
<h1 class="stroke">WHAT CARRER SHOULD YOU HAVE ?</h1>

<hr />

Font size
<h1 class="stroke stroke-fs">WHAT CARRER SHOULD YOU HAVE ?</h1>

Answer 4

The -webkit-text-stroke doesn't support placing the stroke on the outside of the text

as this CSS-Tricks atricle explains:

The stroke drawn by text-stroke is aligned to the center of the text shape (as is the default in Adobe Illustrator), and there is currently no option to set the alignment to the inside or outside of the shape. Unfortunately this makes it much less usable, as no matter what now the stroke interferes with the shape of the letter destroying the original type designers intent. A setting would be ideal, but if we had to pick one, outside stroke would have been much more useful.

What about SVG?

Well it seems that it also places the stroke on the inside -

FIDDLE

However,

you might be able to simulate this effect (depending on what you need) by:

1) Change your font to a sans serif like verdana and

2) Make the font-size of text you are adding a stroke to slightly larger

body {
  background: grey;
  font-family: verdana;
}
.stroke,
.no-stroke {
  color: white;
  font-size: 2.5em;
}
.stroke {
  -webkit-text-stroke: 2px black;
   font-size: 2.7em;
}

<h1 class="stroke">WHAT CARRER SHOULD YOU HAVE ?</h1>
<h1 class="no-stroke">WHAT CARRER SHOULD YOU HAVE ?</h1>

Answer 5

Firefox and Safari now support a new CSS property called paint-order which can be used to simulate an outside stroke:

h1 {
  color: #00ff01;
  font-size: 3em;
  -webkit-text-stroke: 5px black;
}

.fix-stroke {
   paint-order: stroke fill;
}

<h1>the default often is ugly</h1>
<h1 class="fix-stroke">paint-order: stroke fill                                                                     

                                                        
            

0 讨论(0)

发布评论:

提交评论

---

•  加载中...

Answer 6

Text shadow might be used to achieve this result http://css3generator.com