Junior Web Developer
In a previous article, I talked about a gradient wipe with CSS. Turns out that isn't the only cool graphical feature available in Safari CSS. In fact, there appears to be a whole suite of these features. One of these is text-stroke.
-moz-text-stroke: properties draw a border around text. This is the same property seen in the Traditional Meme Format, which uses the white Impact or Anton font and adds a text stroke.
Unfortunately, as the names might suggest, cross-browser support for this feature is very limited. Most browser engines, including WebKit and Chrome, only have support for a center-aligned stroke, which can look quite ugly, as Chris Coyier of CSS Tricks explained. TL;DR - most characters vary their width and spacing, but strokes don't, and they end up ruining that spacing.
In Firefox and Safari (Webkit) only, you can use the
paint-order: property for this. By setting
paint-order: stroke fill you can make the text appear "above" the stroke, thus creating what looks like an outside-aligned stroke. But an inside-aligned stroke is still impossible.