Seguramente no se exagera cuando se piensa que casi todo puede ser realizado con CSS. Nicolas gallagher ha dado muestra de ello, ha creado 84 iconos con CSS y html semántico. Los iconos son experimentales, por ahora funciona en Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+.

Algunos de estos iconos únicamente pueden ser creado por navegadores que soporten la propiedad CSS3 transforms. A continuación os muestro una pequeña explicación de los iconos y su demostración final.

Código HTML

El código HTML es una lista desordenada de enlaces:

<ul>
   <li><a href="#non">Power</a></li>
   <li><a href="#non">Play</a></li>
   <li><a href="#non">Stop</a></li>
   <li><a href="#non">Pause</a></li>
</ul>

Código CSS

Cada icono usa su propio estilo, por ejemplo, el estilo del icono “expand” sería este:

.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;
}

La página de demostración contiene la lista completa de iconos GUI (interfaz de usuario) y reproductor multimedia, además de otros iconos.