demosthenes.info

Independent notes on CSS, SVG, animation and front-end design.

Articles / Article

Web Developer Reading List: Text Effects

Text effects for web pages

A black and white photograph of a subway bench

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. Brushed Metal Lettering
  2. Text Clipping Mask (SVG)

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