CSS hack: multiple background and borders to create icons

Nicolas Gallagher created a interesting, extreme, css hack. See: 〈Pure CSS GUI icons〉 (2010-11-16) By Nicolas Gallagher. At nicolasgallagher.com.

nicolas gallagher css icons

Nicolas Gallagher's no-images css icons.

He created some 80+ icons. No images are used whatsoever, not even in css file. They are done by combining layers of several border, background. Each layer is specifically positioned, z-indexed, and with width and height spec, then using css3 features of rotating or oherwise transform them. The final result is the icon you see. A very advanced hack.

Though, hack they are. In practice, it's much better to use Unicode characters (See: Computing Symbols in Unicode) or images. (more than half of the icons he created doesn't exist as Unicode chars.)

To help me understand how he did it, i copied and reduced and created a much simpler file with just 2 icons. See: CSS Hack to Create Icons.

To understand it, you'll at least need to understand:

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs