Blogging Tips

CSS: pure css GUI icons

Imagine you don't need images anymore. We've seen something similar in CSS: create shapes in pure css last April, but what we will see here is pure madness... at least at first sight. The GUI icons set you see on the right is an image, however there's a guy who did them all using css. Sounds crazy? Well, that's what I thought the first time I saw them, but as the author - Nicolas Gallagher - states on the project page, all the idea is just an experiment.

Basically, Nicolas is using css pseudo elements (:before and :after) and semantic HTML to create a 84 icons set. Let me immediately warn you: with Internet Explorer you won't see things as they were conceived. If you open the demo page in IE8, for example, you will see the icons with some css attributes missing and the whole effect will be missed.

I suggest to visit Nicolas page and have a look at his works. Just keep in mind that pure css GUI icons are just an experiment.