Text Stroke

There are all kinds of ideas I’ve had once about a design treatment I would have liked to do in CSS. Only CSS couldn’t do it — at the time. And so I took those ideas and stuck them into a bucket labeled “Nope”.

Only CSS evolved. And now it does a lot of those things. And I need to rummage through that bucket and see what I can pull out, and use.

Here’s an example: http://codepen.io/jensimmons/pen/EZWeeb?editors=1100#0

See the Pen Text stroke in action by Jen Simmons (@jensimmons) on CodePen.

This CSS isn’t fully-baked or fully-supported. In fact, the specification is being revised, the property names might change, and the details of how browsers render this today are messy and inconsistent. But it’s still really cool to see. And if you are on the more adventurous side, you might want to use this on a project — especially if the text is big, and the colors & font are chosen so that it works with and without support / works even in browsers where the rendering is messy.

Comments

Both Firefox and Edge now support the -webkit- prefixed properties. (They’ve added them for compatibility with sites optimized for -webkit-).

Add new comment

By submitting this form, you accept the Mollom privacy policy.