CSS

How to use CSS text stroke

CSS3 is evolving in such a way that we can translate pretty much everything we create in Photoshop into CSS code.

However one thing we haven’t had so far is a text stroke. We can add shadows to text, but until now there was no viable solution for text stroke. Now we have a webkit solution that introduces us to text stroke using only CSS.

Browser support

This property is still experimental and not safe in all browsers but you can also set some defaults that will only act up when the user is using a browser that doesn’t support the property (meaning Firefox and IE). It’s important to understand that text-stroke is not a progressive enhancement, you will need a backup for non-supporting browsers, fortunately there’s a solution which I’ll cover below.

Another thing about text-stroke is that it does not appear in any W3C specifications at the moment, it was briefly included with the name text-outline but it was subsequently removed and until now there was no sign of adding it again.

The property

This property is actually a really simple property to use being somewhat similar to the border property it’s written in pretty much the same way. To define a text stroke you just need the text-stroke-color and text-stroke-width with your desired values, for example if you want a 2px black border in all the anchor tags you type:

a {
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: black;
}

If you test this you can see that it’s working properly on your website but much like the border property this one also has a shorthand method we can use to make our life even easier:

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

The problem with this is that if you want your text to be transparent and only the text stroke to show you will have a problem in browsers that don’t support it because your text will not show at all. Because of this, we have another property: text-fill-color and this property can be used to set a default color to your text for non supporting browsers using the usual color property and then for the ones that actually support it you just need to add the text-fill-color property and in that one place the transparent one so that both these user’s will have a good experience on the website and no text disappears if the user is not using a webkit browser, an example could be:

h1{
   color: black;
   -webkit-text-stroke: 1px black;
   -webkit-text-fill-color: white;
}

In this example if you are using a webkit browser you will see white text with a black 1px border around it but if you are not and due to using the text-fill-color will only see black text with no border , if the text-fill-color wasn’t applied you would have to set the text color to white in order to achieve the same effect and the stroke to black making the text disappear in non-webkit browsers.

Using this new property you can mimic what you actually create in Photoshop with a lot more ease, seeing that any value is can be used as the color and  this means you can even use semi-transparent text-strokes , like so:

h1{
  color: black;
  -webkit-text-stroke: 1px rgba(0,0,0,0.5);
  -webkit-text-fill-color: white;
}

By writing something like this you will get some white text with a semi-transparent black border around it.You can also do this with the text fill color so if you wanted to create a semi-transparent border with an even more transparent background you would use:

h1{
  color: black;
  -webkit-text-stroke: 1px rgba(0,0,0,0.5);
  -webkit-text-fill-color: rgba(0,0,0,0.1);
}

Conclusion

Since text stroke is an experimental feature is not viable to use on all websites but it can bring some more Photoshop magic to CSS3 giving you the ability to create some neat effects with it like semi-transparent borders or it can be used to just add a little touch with a 1px border.  It may be experimental, but this is still a usable technique provided you provide a standard text color for non-supporting browsers and overwrite that with text-fill-color for those that do.

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website. More articles by Sara Vieira
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress