Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Burbujas estilo cómic para enlaces e imágenes con css






En este post quiero mostraros unos bocadillos o burbujas estilo cómic para añadir información adicional al pasar el cursor en una imagen, enlace o texto. Podrás añadir el mensaje que desees dentro del bocadillo. Los estilos los haremos solamente con css como es obvio, pero el efecto también se pueden hacer con jQuery, y es un tutorial que estoy preparando, para mostraros a todos vosotros. Más adelante verás unos ejemplos en modo de enlace y e img:

Gadgets y recursos para tu blog y webBlog recopilador de recursos

¿Qué hambre que tengo?


  • Para añadir estás burbujas en Blogger entra en el escritorio de Blogger
  • Plantilla>Edición Html y Busca con Ctrl+F, la siguiente etiqueta:

</head>

  • Una vez encontrada, añade el siguiente código antes de dicha etiqueta:

<style type='text/css'>
a.tt{
position:relative;
z-index:24;
color:#01A0C7;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*En estos siguientes estilos puedes cambiar algunos colores*/
a.tt:hover{ z-index:25; color: #393939; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #555555;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/Sv_TE02nC2I/AAAAAAAAALU/RJP8dN5W30s/bubble.gif) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(http://3.bp.blogspot.com/_4HKUHirY_2U/Sv_TISo06uI/AAAAAAAAALc/9dj1-t3hN6o/bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/Sv_TE02nC2I/AAAAAAAAALU/RJP8dN5W30s/bubble.gif) no-repeat bottom;
}
</style>


  • Ahora cuando uses un enlace de texto usa esto que ves a continuación:

<a href="Direccion_de_la_URL" class="tt">Título_del_Enlace<span class="tooltip"><span class="top"></span><span class="middle">Mensaje_De_La_Burbuja</span><span class="bottom"></span></span></a>


  • Y cuando quieras insertar la burbuja en una imagen, añade esto:

<a href="Dirección_Del_Enlace" target="_blank" class="tt"><img src="Url_De_La_Imagen" /><span class="tooltip"><span class="top"></span><span class="middle">Mensaje_Dentro_de_La_Burbuja</span><span class="bottom"></span></span></a>


Aizum Blog, viernes, mayo 10, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9