Iconos creados enteramente en CSS

3

Ya habíamos visto algunos ejemplos de las maravillas del CSS3, como el menú minimalista o la animación de Spiderman. Queda claro que casi cualquier elemento web, puede realizarse con el CSS. En esta oportunidad, Nicolas Gallagher ha realizado 84 iconos en puro CSS.

Claro que solo las últimas versiones de los navegadores podrán visualizarlos correctamente, el autor los ha probado en Firefox 3.5, Safari 5, Chrome 5 y Opera 10.6, por lo que descarta de entrada Internet Explorer que sigue siendo uno de los navegadores más utilizados en el mundo.

Para implementarlos en una web, se utiliza un código HTML desordenado 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>

Además, cada icono utiliza su propio estilo. Este sería el estilo del icono “expand”:

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

En la página de demostración, se puede ver la lista completa de iconos.

Visto en CSS Blog

Quizas te interese   Arma degradados en CSS3 con Ultimate CSS Gradient Generator

3 COMENTARIOS

Dejar una respuesta

Please enter your comment!
Please enter your name here