Menú tarjetero CSS para enlazar tus perfiles sociales

Esta es una tontería como cualquier otra para poder mostrar a nuestros lectores las redes sociales dónde estamos. Viene a ser como una botonera social con enlaces a nuestros distintos perfiles, pero convirtiendo esos habituales botones en una especie de tarjetas de visita.

La idea la vi en Creativefan hace bastante tiempo (años), pero en mi descargo diré que finalmente obvié el código que allí muestran y desarrollé el mío propio. Aquel me parece recordar que ni funcionaba, aunque repito, la idea estética la encontré allí. Inspiración que no copia que dirían algunos.

La gracia es que esto que veis en la captura y en la demo del final del post funcionando como Dios manda con su pequeña animación, está hecho sólo con CSS.

La parte HTML que habrá que insertar en un gadget o directamente en la plantilla si se desea poner por ejemplo tras el contenido de las entradas (dentro del div post-footer, por ejemplo), tendría esta estructura:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="cartera">
 <span style="font-family: Lobster, italic;font-size: 40px;">En la Red</span>
 <div class="tarjeta tfacebook">
  <a class="fa-facebook" href="ENLACE_CTA_FACEBOOK">Facebook</a>
 </div>
 <div class="tarjeta tgoogle">
  <a class="fa-google-plus" href="ENLACE_CTA_GOOGLE+">Google+</a>
 </div>
 <div class="tarjeta ttwitter">
  <a class="fa-twitter" href="ENLACE_CTA_TWITTER">Twitter</a>
 </div>
 <div class="tarjeta tlinkedin">
  <a class="fa-linkedin" href="ENLACE_CTA_LINKEDIN">Linkedin</a>
 </div>
 <div class="tarjeta tpinterest">
  <a class="fa-pinterest" href="ENLACE_CTA_PINTEREST">Pinterest</a>
 </div>
 <div class="tarjeta tinstagram">
  <a class="fa-instagram" href="ENLACE_CTA_INSTAGRAM">Instagram</a>
 </div>
</div>

Cada caja completa (div con enlace) con clase tarjeta sería una red social distinta, así que sólo es cuestión de añadir o quitar cajas como esas para completar vuestra propia lista de enlaces.

La segunda clase (ttfacebook, ttgoogle, etc.) que va junto a la que denominé tarjeta sirve para configurar los colores de cada red social, cosa que podréis ver con más detalle en el CSS de más abajo.

He usado FontAwesome para los iconos, así que no os debería resultar complicado añadir algún otro que yo no contemplé.

Y es obvio, pero no olvidéis cambiar lo marcado en verde por la dirección de vuestros sitios en las distintas redes sociales.

---

A continuación ya pongo el CSS que hace la magia y que en este caso es sólo anchos, altos, colores y bordes, junto con una combinación de posicionamiento relativo y absoluto debidamente aplicado.

El único truquillo que creo que merece un poco la pena destacar, es que la transición del estado normal de una tarjeta, a una posición más elevada para simular que sube, se ha hecho jugando con line-height, cosa que en esta ocasión se podía utilizar al estar siempre el texto (más el icono) en una sola línea.

Péguese tal cual en la parte CSS de la plantilla o si se va a usar en un gadget, entre etiquetas <style> y </style>.

/* Reset */
.cartera, .tarjeta, .tarjeta a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Contenedor general */
.cartera {
position: relative;
width: 100%;
max-width: 500px;
margin: 40px auto 0;
text-align: center;
line-height: 56px;
font-size: 14px;
font-family: sans-serif;
}
/* Cada tarjeta */
.tarjeta {
position: relative;
width: 100%;
height: 30px;
margin: 0 auto;
padding: 0;
text-align: left;
border-bottom: 3px groove #eee;
}
/* Estado normal */
.tarjeta a {
position: relative;
display: block;
top: -6px;
left: 50%;
width: 96%;
margin-left: -48%;
padding: 0 0 0 16px;
line-height: 32px;
font-weight: normal;
border-radius: 16px 16px 0 0;
text-decoration: none;
box-shadow: 0 -2px 2px rgba(0,0,0,.1), 0 0 20px rgba(0,0,0,.2) inset;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
/* Elevación de las tarjetas */
.tarjeta a:hover {
line-height: 52px;
top: -26px;
text-decoration: none;
}
/* Logos */
.tarjeta a:before {
display: inline-block; *display: inline; zoom: 1;
width: 20px;
margin-right: 10px;
text-align: center;
font-family: Fontawesome;
font-size: 18px;
}
/* Sombra parte inferior */
.tarjeta a:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 102%;
margin-left: -51%;
height: 2px;
display: block;
border-radius: 80px 80px 0 0 ;
box-shadow: 0 -2px 6px #666;
z-index: -1;
}
/* Colores Twitter */
.tarjeta.ttwitter a {
color: #ddd;
background-color: #01AFEC;
border-top: 2px solid #43CFFE;
}
/* Colores Google+ */
.tarjeta.tgoogle a {
color: #333;
background-color: #DB4A37;
border-top: 2px solid #E88C80;
}
/* Colores Facebook */
.tarjeta.tfacebook a {
color: #ccc;
background: #3B559F;
border-top: 2px solid #6B83C9;
}
/* Colores Linkedin */
.tarjeta.tlinkedin a {
color: #333;
background: #007BB6;
border-top: 2px solid #83A9CB;
}
/* Colores Pinterest */
.tarjeta.tpinterest a {
color: #ccc;
background: #CB2027;
border-top: 2px solid #E88C80;
}
/* Colores Instagram */
.tarjeta.tinstagram a {
color: #ccc;
background: #42719D;
border-top: 2px solid #83A9CB;
}

La mitad de todo este rollete anterior es para especificar los colores de la tarjeta de cada red, sino sería bastante más corto y otra gran parte es para que el código sea adaptable, RWD o como queráis llamarlo. O sea, que podréis ponerlo en cualquier parte de vuestra web sin problemas, que se ajustará al ancho disponible que tengáis.


Por último la demo, también disponible en CodePen para poder trastear.

Facebook

Google+

Twitter

Linkedin

Pinterest

Instagram

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter