Text effects must be carefully applied in web design: they’re easily overused, and can look gaudy. But if you do need them, there’s a range of possible techniques.

Most of these techniques involve CSS, although the advanced examples also employ SVG and (sometimes) JavaScript. For that reason, I’d suggest a fairly thorough background in HTML, CSS (particularly CSS typography) and a little in the basics of SVG.

Total time: 5 hours

1. Text Shadows
2. Stroked text
3. Extruded text
4. Animated Neon Sign
5. Brushed Metal Lettering
6. Text Clipping Mask

Photograph by Axel Taferner, used under a Creative Commons Attribution NonCommercial ShareAlike license.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.