CSS has come a long damned way from the days of having to use tables because positioning wasn’t available. (Sure, dating myself a bit, but as they say: you’re only young once but you can be immature forever.) Time was that if one wanted any sort of effect on text – and we’re talking system installed fonts here, nothing fancy – you had to create an image. Once the semantic web was encouraged, you then had to replace a heading tag with said image to get the best SEO as well as have the creative look. Of course, every browser had different support for the technique so there were dozens of image replacement hacks. (If you’re interested in a history lesson, CSS-Tricks has an entire page dedicated to the different techniques.) Nowadays CSS can do a helluva lot of basic text effects directly in the browser, with fantastic cross-browser support.

In the same vein as my Windowfy Sass mixin, I decided I wanted to code some Sass mixins and functions to recreate some of those common text effects in CSS. I decided to use both functions and mixins so the base styles can be used out of the box, but also provide the building blocks for more complicated effects. You’ll notice no usage of texturing on the shadows or text itself using the background-clip:text property; the browser support is still shit. Not only that, the failures are some weird shit.

See the Pen Text Effects Sass functions & mixins by Smokie Lee (@xtoq) on CodePen.

Usage Notes

I wouldn’t use any of the complicated implementations on a significant amount of text or a large-scale website. Text shadows are known to have performance issues especially when blur is defined (Opera even limits the number you can have on an element), and some of these effects can be more easily achieved using other techniques.

The border one is a bit wonky, but until we get a proper text-border function, this crap is the best we can do. Don’t put in sizes over 3px, and sharp corners can wreck the effect. YMMV.

Resources