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.