Pure CSS GUI Icons

This is so slick:

http://nicolasgallagher.com/pure-css-gui-icons/demo/

Pseudo-elements used to create simple GUI icons using CSS and semantic HTML- no image files at all.

The HTML is a basic unordered list of links:

Code:

Highlight Mode: (HTML)
<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. For example, the key parts of the CSS responsible for the “expand” icon are as follows:

Code:

Highlight Mode: (CSS)
.expand a:before {
   content:"";
   position:absolute;
   top:50%;
   left:1px;
   width:5px;
   height:0;
   border-width:7px 7px 0;
   border-style:solid;
   border-color:transparent #c55500;
   margin-top:-4px;
   /* css3 */
   -webkit-transform:rotate(-45deg);
   -moz-transform:rotate(-45deg);
   -o-transform:rotate(-45deg);
   transform:rotate(-45deg);
}
 
.expand a:after {
   content:"";
   position:absolute;
   top:50%;
   left:5px;
   width:8px;
   height:8px;
   border-width:3px 0 0 3px;
   border-style:solid;
   border-color:#c55500;
   margin-top:-6px;
}
 
.expand a:hover:before,
.expand a:focus:before,
.expand a:active:before {
   border-color:transparent #730800;
}
 
.expand a:hover:after,
.expand a:focus:after,
.expand a:active:after {
   border-color:#730800;
}