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.
It is very normal to expect shapes used in websites to be created as images.
However, with the wider use of CSS3 and its capabilities, we regularly see rounded corners, rotation or any other shape to be built with CSS.
Here is one of those resources, a lovely GUI icon set where every item is pure CSS.
The set has 84 items including full set of user interaction and media player control icons besides some other common ons.
The designer of the resource, Nicolas Gallagher, mentions that the work is experimental and not production-ready but it is still very promising.
Compatibility: Tested in Firefox 3.5+, Chrome 5, and Opera 10.6.
Website: http://nicolasgallagher.com/pure-css-gui-icons/
Demo: http://nicolasgallagher.com/pure-css-gui-icons/demo/
