Menú tarjetero

Menú tarjetero para enlazar perfiles sociales

Botonera social con enlaces a nuestros distintos perfiles, pero convirtiendo esos habituales botones en una especie de tarjetas de visita.

Se puede insertar todo el código en un gadget, o directamente en la plantilla si se desea poner por ejemplo tras el contenido de las entradas:

1º: La parte HTML: 

• opción plantilla: si se coloca en el html de la plantilla hay que ponerlo dentro del divpost-footer, por ejemplo.
• opción gadget: se pega tal cual.

<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 no olvidéis cambiar lo marcado en verde por la dirección de vuestros sitios en las distintas redes sociales.

2º: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;
}