Menú tarjetero CSS para enlazar tus perfiles sociales | Oloblogger Esta es una tontería como cualquier otra para poder mostrar a nuestros lectores las redes sociales d...

26 de septiembre de 2014

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.


¿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
Copy URL

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

follow us in feedly

21 comentarios :

  1. Esta bonito el efecto. Saludos Oloman

    ResponderEliminar
  2. Hola Muy buena Pagina.
    Quiero agrega una leyenda fija a cada entrada con link, como tengo que hacer?
    Muchas Gracias
    Saludos,

    ResponderEliminar
    Respuestas
    1. ¿Te refieres al gadget de esta entrada o a otra cosa?

      Eliminar
  3. buenísimo el efecto, un saludo Oloman

    ResponderEliminar
  4. Hermoso el efecto, voy a probarlo en un blog que estoy editando. Me encanta. ¿Qué haríamos sin vos? ;) ¡Gracias!, ¡Abrazo!

    ResponderEliminar
  5. Saludos Oloman.. como siempre dandonos ideas para que nosotros los bloggeros pongamos en practica.. muy bonito ese menu tipo Carpetas.. un Abrazo !!!

    ResponderEliminar
  6. Saludos Oloman.. Nuevemante por aca a ponerte un pereke o molestia como decimos por aca en mi pais !!!
    es lo siguiente: quiero cambiar el "mas informacion" de mis entradas en mi blog.. ya intente con una opcion de poner esto en la seccion del css

    .jump-link {
    float:right;
    background: #04B4AE; /* Color de fondo */
    border: 1px solid #000;
    font-weight: bold;
    padding: 1px 2px;
    margin-left:20px;
    }
    .jump-link a {
    color: #FFF; /* Color del texto */
    text-decoration: none;
    font-weight: bold;
    }
    .jump-link:hover {
    background: #045FB4; /* Color de fondo al pasar el cursor */
    border: 1px solid #000;
    text-decoration:none;
    }

    pero de igual forma no me funciona nada y sigo igual .. si depronto tienes alguna otra forma te lo agradeceria inmensamente... este es mi blog nuevamante http://joralgom1.blogspot.com/
    Disculpame el Spanm.. que tengas un buen comienzo de semana.. un Abrazo !!!

    ResponderEliminar
    Respuestas
    1. Tú no tienes una plantilla estándar y lo que usas no es .jump-link, sino .readmorecontent. Cambia una cosa por otra en el CSS que pusiste y te debe funcionar.

      Eliminar
    2. Gracias Oloman por la respuesta .. ya encontre lo que me dijiste y voy a empezar a editarlo despues te comento como me fue... un Abrazo !!!!

      Eliminar
  7. en mi blog http://www.viajarsinbillete.com/ he instalado esta herramienta.
    Como ves en linkedin he puesto nuestra comunidad g+ pero la imagen sigue siendoo la de lk. ¿puedo cambiarla? igualmente yuotube

    ResponderEliminar
    Respuestas
    1. Para cambiar el aspecto de una tarjeta concreta, cambia su clase. Para esa tienes tlinkedin y deberia ser tgoogle.

      Igual para el icono. En esa tienes ahora fa-linkedin y debería ser fa-google-plus.

      Eliminar
  8. Gracias por tu ayuda Oloman. Merecía la pena haberte dado antes mi boto en los premios bitacoras.

    ResponderEliminar
  9. ¡Vaya! Ahora que había reunido fuerzas (y ganas) para trastear con esto, y resulta que no funciona la demo, ni aquí ni en codepen. ¿Has hecho algún cambio de última hora, que ahora no va?

    ResponderEliminar
    Respuestas
    1. Haz caso omiso a lo que he dicho. Por algún motivo, en el mismo ordenador, no me funciona en Firefox, pero sí en Chromium.

      Eliminar
    2. Hecho... caso omiso digo ;)

      Eliminar
  10. Hola Oloman hoy me he dedicado a leer tu blog así que encontraras comentarios mios en diversas entradas.
    Aquí mi pregunta. Se puede hacer que cuando hagan click en la red social se abra en otra ventana? Sin salir del blog?

    ResponderEliminar
    Respuestas
    1. Claro, eso es fácil. Sólo tienes que añadir target="_blank" a cada enlace. Pero antes de hacerlo echa un vistazo a este otro post, que quizás te convenza de que no lo hagas.

      Eliminar
  11. Hola Oloman este es mi blog www.hitmangamesyoutuber.blogspot.mx he revisado tus post pero ningún me funciona como Gadget, algún consejo?

    ResponderEliminar
    Respuestas
    1. Ninguno te puedo dar si no me das pistas. En un principio te tengo que decir que es imposible que NINGUNO te funcione. De hecho funcionan TODOS, aunque puede ser que en algún caso concreto haya algún fallo puntual.
      Lo mejor es que cuando intentes añadir alguno en concreto, en esa misma entrada comentes qué hiciste y qué es lo que pasa o notas raro.

      Eliminar
  12. Grande Oloman, he tenido un problema, en las tarjetas no aparece el logo de la red social ubicado a la izquierda (no aparece ubicado en ningún lado en realidad) alguna idea ?

    ResponderEliminar
    Respuestas
    1. El logo sólo sale si tienes la primera línea de todas, que es la que carga la fuente Awesome, la de los iconos. Comprueba que la tienes.

      Eliminar