New CSS3 value: text-stroke (WebKit vendor extension)

A new vendor specification from WebKit: text-stroke. you won’t find it in CSS3 (yet), but this is a long-awaited function (at least by me). As someone said: Webkit is not only the basis for Safari, though, but an integral part of OS X. Typography has always been a strength of Mac OS…1

Surely this the reason they implemented those fancy fonts.

text-fill-color
This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.
text-stroke-color
This property allows you to specify a stroke color for text. If it is not set, then the color property will be used to do the stroke.
text-stroke-width
This property allows you to specify the width of the stroke. It defaults to 0, meaning that only a fill is performed. You can specify a length for this value, and in addition the values thin, medium and thick can be used (with ‘thin’ being most like the outline behavior of OS X).
text-stroke
This property is a shorthand for the two stroke properties.
<div style="color:#906200;font-size:4em;text-shadow:5px 5px 10px #222;-webkit-text-stroke:5px black">This text has a black 3px stroke and a purple fill.</div>
This text has a black 3px stroke and a purple fill.
text-stroke

  1. If you are not convinced (or even if you are), take a look at Du bête RTF and Essayez de faire ça avec le bloc-notes. This is in French, but there is a lot of pictures.

flattr this!