Iconos 3D con CSS

Tiempo de lectura estimado: < 1 minuto

Hola!.

Vamos a ver como podemos crear desde 0 iconos en 3D usando CSS.

 

Como se aprecia en el resultado final, hacemos uso de Font Awesome. Podéis usar vuestros propios estilos. La imaginación no tiene limite.

Hacemos uso de la propiedad transform, como la que más peso va a tener en la creación de nuestro botón.

Y aquí el código para poder implementar nuestro/s iconos:

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
background: #cdcccc;
display: flex;
justify-content: center;
align-items: center;
min-height: 90vh;
font-family: Arial, Helvetica, sans-serif;

}

.icons{
position: relative;
width: 200px;
height: 400px;
transform: rotate(-37.5deg) skewX(10deg);
box-shadow: -35px 35px 50px rgba(0,0,0,1);
transition: .5s;
}

.icons:hover{
background: #285e97;
transform: rotate(-37.5deg) skewX(10deg)
translate(20px, -20px);
box-shadow: -50px 50px 100px rgba(0,0,0,1);
color: #2196f3;

}

.icons:before{
content: '';
width: 25px;
height: 100%;
top: 0;
left: 0;
background: #9b9797;
position: absolute;
transform: skewY(-45deg) translate(-24px, -12px);
box-shadow: inset -10px 0 20px rgba(0,0,0,.2);

}

.icons:after{
content: '';
width: 100%;
height: 25px;
bottom: 0;
left: 0;
background: #ccc;
transform: skewX(-45deg) translate(12px,24px);
box-shadow: inset -10px 0 20px rgba(0,0,0,.2);
}

.fb{
color: black;
position: absolute;
font-size: 64px;
top: 32%;
left: 38%;
transition: .5s;
}

.fb:hover{
color: white;
position: absolute;
top: 32%;
left: 38%;
cursor: pointer;
}

En nuestro archivo html, crearemos un div, con el icono deseado.

Y listo, ya tendremos nuestro icono 3D.

Deja un comentario

© 2024 - Serna Studio
A %d blogueros les gusta esto:

Si continuas utilizando este sitio aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar