Hoy he estado pensando en como hacer de forma simple y sencilla, utilizando tan solo CSS y HTML ese efecto que hoy en día esta tan de moda como es poner las redes sociales en el margen de una web y que se queden ahí fijas, con el fin de obtener algo parecido a esto:
Con una pequeña animación cuando pasamos el ratón por encima.
Pues bien, esto es tan solo una idea, ya que seguramente haya múltiples opciones, de hecho se puede mejorar con JQuery y darle algunos toques calidad, pero para empezar y que luego ya vayas poniendo tus propios toques esta bien.
Pues bien, esto es tan solo una idea, ya que seguramente haya múltiples opciones, de hecho se puede mejorar con JQuery y darle algunos toques calidad, pero para empezar y que luego ya vayas poniendo tus propios toques esta bien.
- Lo primero que necesitamos son los recursos de las redes sociales, lo mejor es que esten en .png y transparentes para que se adapten al fondo, pero como digo, para gustos colores...
- Una vez que los tenemos los guardamos en nuestra carpeta de imagenes para nuestro proyecto y ya podemos empezar a "programar"
- Bien lo primero es nuestra estructura HTML, que como vereis es muy sencilla:
<html>
<head>
<title>Prueba de animacion css</title>
<link href="estilocss.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<div id="redes">
<a href=""><div id="mov1">
<center>
<img src="img/Facebook.png" />
</center>
</div></a>
<a href=""><div id="mov2">
<center>
<img src="img/Github.png" />
</center>
</div></a>
<a href=""><div id="mov3">
<center>
<img src="img/LinkedIn.png" />
</center>
</div></a>
<a href=""><div id="mov4">
<center>
<img src="img/Skype.png" />
</center>
</div></a>
<a href=""><div id="mov5">
<center>
<img src="img/Twitter.png" />
</center>
</div></a>
</div>
<main>
<h1>Cuerpo de la WEB</h1>
</main>
</body>
Como podemos ver hay un div principal que es el que mantendrá el conjunto de todos los div de las redes sociales, los cuales están dentro de un enlace cada uno, para que toda la caja sea el enlace y no solo la imagen.
Bien ya tenemos nuestra estructura, ahora vamos a darle el estilo según el siguiente código:
Nota: A mi siempre me gusta poner el código CSS ordenado en orden alfabético y secciones para que me resulte más cómodo encontrar luego lo que necesito llegado el momento...
#mov1{
margin:0;
padding: 0;
position: relative;
width: 60px;
height: 40px;
background-color: #3B5A9A;
transition-duration:0.5s;
}
#mov2{
margin:0;
padding: 0;
position: relative;
width: 60px;
height: 40px;
background-color: #DF4B38;
transition-duration:0.5s;
}
#mov3{
margin:0;
padding: 0;
position: relative;
width: 60px;
height: 40px;
background-color: #117BB8;
transition-duration:0.5s;
}
#mov4{
margin:0;
padding: 0;
position: relative;
width: 60px;
height: 40px;
background-color: #26ADE3;
transition-duration:0.5s;
}
#mov5{
margin:0;
padding: 0;
position: relative;
width: 60px;
height: 40px;
background-color: #29A9E1;
transition-duration:0.5s;
}
#mov1:hover{
width: 100px;
}
#mov2:hover{
width: 100px;
}
#mov3:hover{
width: 100px;
}
#mov4:hover{
width: 100px;
}
#mov5:hover{
width: 100px;
}
#redes{
z-index: 1000;
position: fixed;
bottom: 40%;
left: -10px;
}
Como podemos observar todos los elementos mov (estos son las cajas donde estan nuestras redes sociales,) tienen la misma estructura:- El margin y el padding a 0, de esta manera nos aseguramos que salgan todas unidas
- La posicion relativa respecto al resto
- el ancho y el alto, que se peuden modificar segun nos convengan, pero que es interesante que todas tengan lo mismo
- el color de fondo que queremos para la caja, y razón por la cual no lo he hecho con una clase. Yo he utilizado los colores básicos de cada red social, pero se pueden cambiar como más nos interesen.
- El tiempo de transición de la animación, que es lo que le hará tener ese efecto tan característico y suave.
- Finalmente ponemos el nombre de las cajas y hover, es decir por donde pasa el ratón por encima para que tenga lugar la transición a un ancho mayor y que se mueva, volviendo a su posición original cuando se retira el ratón.
- tiene un z-index de 1000 por lo que siempre esta encima de todo lo que muestre la página.
- La posición es fija, por lo que no se mueve de la pantalla aunque le hagamos scroll.
- Con bottom le estamos diciendo a que altura queremos que se encuentre la caja en cuestión y podemos graduarlas a la altura que queramos.
- con left -10 estamos obligando a la caja a que se desplace 10pixeles a la izquierda pegándola de este modo al borde de la pantalla.
Si quieres bajarte el código funcionando, con las imagenes... puedes hacerlo desde mi githud, pinchando en el gato...
No hay comentarios:
Publicar un comentario