<>neDIV– nos muestra iconos hechos con CSS3

  12/10/2012    

onediv

OneDIV, es una página web que contiene iconos creados únicamente con CSS3 y sólo requiere un tag <DIV> para desplegar dicho icono sin necesidad de utilizar imágenes.

Por ejemplo, si queremos utilizar uno de ellos rápidamente, basta con hacer clic en el botón CSS y ya lo podemos pegar en nuestras hojas de estilos.

Veamos, este es del icono G+

.googleplus {
position: relative;
font-size: 20px;
height: 2em;
width: 2em;
background: #2C2C2C;
display: block;
border-radius: 0.3em;
overflow: hidden;
}
.googleplus::before {
left: -0.1em;
font-size: 2.9em;
top: -0.36em;
position: absolute;
display: block;
content: "g";
color: #EDEEE8;
font-family: georgia;
}
.googleplus::after {
left: 0.9em;
top: -0.3em;
position: absolute;
display: block;
content: "+";
font-size: 1.25em;
font-weight: bold;
color: #EDEEE8;
font-family: georgia;
}

Luego agregamos un DIV con clase googleplus y ya lo podremos ver.

Así de sencillo es utilizarlos, además que podemos revisar detenidamente cómo está hecho, así poder modificarlo y también contribuir con nuestras creaciones.

Visitar: http://one-div.com/

Fuente: Kabytes

   / /