demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

LOST CITIES

Outlined Text In CSS3 With text-stroke and text-shadow

css / typography

Estimated reading time: 3 minutes, 4 seconds

As my series on goes forward, I’ll also start to throw in some applied to text; in time the two will merge, when I introduce masks applied to text.

“Stroked” text is simply text with an outline applied to it. There are two primary methods of achieving this with CSS: directly, via text-stroke, or (with some limitations) via a specialized use of text-shadow. The example at the top of this article, featuring the wonderful free Blue Highway 5.0 by Typodermic above a background image licensed under Creative Commons by Calsidyrose, uses the latter technique, so it is that approach that I'll demonstrate first.

I’ve discussed text-shadow before: well-supported (except for IE, for which there are alternate solutions), the property does not require vendor prefixes in the latest builds of most browsers.

text-shadow is, very simply, box-shadow for text: the difference is that text-shadow takes the same sequence of values and applies it to letter forms, rather than entire elements.

The effect of a standard shadow is visually not the same as stroke: it’s not as sharp. For a better result, try layered offset shadows with no blur at all:

h1 { text-shadow: 1px 1px 0 red, -1px -1px 0 red; }

While I find two shadows to usually be enough, on some fonts you may need to achieve coverage by using four layered shadows, each offset by 1 pixel in a different direction:

h1 { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

(Take a note of this technique, as we’ll be using a variation on it to create “3D” text in a later lesson).

This works, but only for small offset values: much more than 1px and you’ll start to see some gaps, no matter how many shadows you have.

text-shadow is not intended to be a stroke to text: i.e. it is not an explicit outline. That purpose is served by text-stroke, which is currently a CSS3 proposed property:

text-stroke: thickness color;

(Note that there is no “style” part to this declaration, i.e. no solid or dashed: text stroke in CSS is always solid. I find myself adding solid on occasion because the declaration is so close to border).

As a proposal, text-stroke is (as of this writing) only supported in Webkit-based browsers, using a proprietary vendor prefix:

h1 { -webkit-text-stroke: 1px red; text-stroke: 1px red; }

One important danger is applying stroke to text is setting on letters that are the same color as their background:

h1 { color: white; -webkit-text-stroke: 2px black; text-stroke: 2px black; background: white; }

The result is that would see stroked text if you’re using Chrome or Safari, but nothing if you are using other browsers.

If you ever want the effect of stroked color x on text with a background of color x, it’s important to set the text to a visible color first for browsers that do not support stroke, and then override it with text-fill-color for browsers that do:

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

With this, you would see the text regardless of which browser you wish to use.

Right now the nearest duplication of this effect for other browsers is either using SVG text or text-shadow, detailed above.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.