Como hacer un Social Bar vertical con CSS3

Hola, este es mi primer tutorial y quisiera explicarles una sencilla forma de hacer el llamado social bar o social links en CSS3, que es una barra que contiene links sociales como Facebook, twiter, youtube etc, o lo que le quieras poner, ya sea texto o iconos.

Seguro los has visto en algunas páginas, esta en especial es animada y tendrá un hover que hará que gire 360 grados cuando el mouse esté sobre ella.

Este sería el código HTML:

Código :

<!doctype html>
<head>
   <title>ejemplo</title>
</head>
<body>
<div class="menu">
<a href="#"><img src="face.png" width="40" heigth="40"></a>
<a href="#"><img src="twt.png" width="40" heigth="40"></a>
<a href="#"><img src="face.png" width="40" heigth="40"></a>
<a href="#"><img src="twt.png" width="40" heigth="40"></a>
</div>
</body>
</html>

He colocado un simple div al cual lo identifiqué con una clase llamada “menú” el cual, dentro de éste se encuentran cuatro imágenes con un tamaño definido en 40 x 40px.

El código CSS:

Código :

div.menu {
   position:fixed;
   background:#88b7d5;
   border:1px solid #c2e1f5;
   width:57px;
   z-index:100; 
   left:-50px;

-moz-box-shadow: 2px 3px 16px #000000;
-webkit-box-shadow: 2px 3px 16px #000000;
box-shadow: 2px 3px 16px #000000;
border-radius: 0 15px 15px 0;

transition: all 0.4s ease;
-webkit-transition:all 0.4s ease;

Seleccionamos a la clase menú y declaramos su posición, la cual será fixed ya que queremos que la barra nos siga mientras damos scroll con el mouse. Agregamos un color de fondo, le ponemos un borde, y definimos el ancho de 57px. Al left (izquierda) lo correremos a -50px, para que la mayor parte del elemento quede fuera de la pantalla. Declaramos z-index y le ponemos como valor 100 para que esté sobre todas las posiciones.

Como dato, z-index no tendrá efecto si no le has seteado ninguna posición al elemento. Por si te quedan dudas o no has entendido cómo funciona darles un valor a las posiciones, esta es una página donde podrás ver como funcionan en tiempo real (recomendado): posiciones en tiempo real

Volviendo al CSS, le he colocado box shadow para darle sombra:

Código :

-moz-box-shadow: 2px 3px 16px #000000;
-webkit-box-shadow: 2px 3px 16px #000000;
box-shadow: 2px 3px 16px #000000;
border-radius: 0 15px 15px 0;

También he redondeado con border-radius la parte superior e inferior derecha de la barra. La cantidad de sombra y el tamaño del borde puedes sacarlo si quieres de las páginas css3maker o css3please.

Código :

transition:all 0.4s ease;
-webkit-transition:all 0.4s ease;

Yo agrego las transiciones antes de seleccionar el hover, que es el que está continuación:

Código :

.menu:hover{
   transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg); 
-o-transform:rotate(360deg);
   left: 0px;
}

El transform con valor rotate(360) es para que de una vuelta completa, y agrego los prefijos para los demás navegadores. El valor de left es de 0px para que quede pegado en todo el extremo de la página.

Ver ejemplo

Si no quieres que gire porque te resulta molesto y sólo quieres que se corra hacia la derecha, dejamos como hover left:0px.

Eso es todo espero que les ayude mucho, si quieren agregar algo comenten y muchas gracias por entrar.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Como hacer un Social Bar vertical con CSS3

Publica tu comentario

o puedes...