En este post diseñaremos una Barra social con css les daré todos los pasos, la estructura html que necesitaran para la creación de la barra, si no tienes conocimiento en css te invito a ver los anteriores post.
Estructura html para Barra social con css:
Para los icon necesitaremos descargarlos en esta Pagina, seleccionaremos los iconos que utilizaremos y enlazaremos el formato llamado style.css.
Cuando ya haya seleccionado los iconos vamos a descargar del lado de fonts, este nos dará un archivo comprimido de el solo sacaremos la carpeta fonts y el archivo que les mencione antes el cual debemos enlazar a nuestro archivo html. La página nos dará el código de cada uno de los iconos.
Ya teniendo lo anterior mencionado podremos pasar a la estructura que constara una lista desordenada con enlaces, a cada uno de ellos le pondremos un class y allí colocaremos de esta forma recuerde que depende mucho que redes hayan ustedes elegidos. la página en la parte de generate nos da el código que pondremos en donde esta resaltado.
Al tener la estructura en html, si lo corremos tendremos solo esto.
Código css para barra social:
.social {
position:fixed;
left:0;
top:200px; <- desplazamiento hacia abajo.
}
Nota: los -webkit- , -moz- y -o- sirven para que todos los navegadores puedan leerlo.
Con el código anterior tendremos centrado en la mitad de la pantalla la barra social de esta forma, con un fondo de color negro
Ahora pasaremos a darle color a cada uno de los iconos.
En mi caso yo coloque el color que mas lo identificaba, quedara algo así.
Ahora le daremos un efecto que cada vez que pase el mouse cambie de color y se agrande un poco hacia el lado derecho.
Ademas de esto le agregaremos a la etiqueta .social una transición de 500ms para que el efecto no se vea tan brusco.
Ya con estos últimos toques se va ver de esta forma al final.
Bueno esto es todo por el post de hoy un próximo les ayudara en la creación en un menu desplegable.