Create Pure CSS Icons using just CSS and semantic HTML

By August 19, 2011 Coding, Mobile

An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set. The HTML is very simple and it relies on CSS pseudo-elements rather than extraneous HTML elements.

Known support: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+.

Pseudo-elements

Pseudo-elements provide many possibilities to developers interested in writing semantic HTML. If you’re looking for practical uses of pseudo-elements, this experiment gave me the idea for the technique used to create Multiple Backgrounds and Borders with CSS 2.1. But these GUI icons were atechnical exercise.

Example code

Some of these GUI icons can only be created in browsers that support CSS3 transforms.

The HTML is a basic unordered list of links.

Each icon uses its own set of styles. For example, the key parts of the CSS responsible for the “expand” icon are as follows:

The demo page contains a full set of user interaction and media player control icons, as well as other common icons. For now, several icons actually require more than one element as CSS 2.1 only specifies 2 pseudo-elements per element that can contain generated content. The CSS3 Generated and Replaced Content Module allows for an unlimited number of pseudo-elements but has yet to be fully implemented in any modern browser.

Source: nicolasgallagher.com

Vidal de Wit

Author Vidal de Wit

More posts by Vidal de Wit

Leave a Reply