Cómo hacer una barra social con CSS (fija)

Css

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 Paginaseleccionaremos los iconos que utilizaremos y enlazaremos el formato llamado style.css.

barra social

barra social

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.

barra social

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.

barra social

Al tener la estructura en html, si lo corremos tendremos solo esto.

barra social

Código css para barra social:

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

barra social

Ahora pasaremos a darle color a cada uno de los iconos.

barra social

En mi caso yo coloque el color que mas lo identificaba, quedara algo así.

barra social

Ahora le daremos un efecto que cada vez que pase el mouse cambie de color y se agrande un poco hacia el lado derecho.

barra social

Ademas de esto le agregaremos a la etiqueta .social una transición de 500ms para que el efecto no se vea tan brusco.

barra social

Ya con estos últimos toques se va ver de esta forma al final.

barra social

Bueno esto es todo por el post de hoy un próximo les ayudara en la creación en un menu desplegable.