Demo: Pure CSS GUI icons (experimental)

Pure CSS GUI icons (experimental) 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. Demo: Pure CSS GUI icons Known support: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+. An exercise in constraint Several months ago I was experimenting with the creation of common GUI icons with CSS. Pseudo-elements provide many possibilities to developers interested in writing semantic HTML. Example code The technique behind this experiment is an expansion of the basic shape-creation that was used to make Pure CSS speech bubbles. The HTML is a basic unordered list of links. <ul><li class="power"><a href="#non">Power</a></li><li class="play"><a href="#non">Play</a></li><li class="stop"><a href="#non">Stop</a></li><li class="pause"><a href="#non">Pause</a></li></ul> Each icon uses its own set of styles.