JMiur [E]

Esta es una forma de generar tooltips animadas, desarrollada por Alessio Atzeni y no sólo requiere CSS3 para ser implementada en cualquier sitio. Obviamente, como muchas de estas cosas, la animación no funcionará en todos los navegadores aunque el tooltip será visible sin problemas.

El HTML es sencillo, sólo es una lista ordenada dentro de un DIV:
<div id="masterpanel">
  <ul id="mainpanel">
    <li><a href="#" class="picasa"><small>abrir Picasa</small></a></li>
    <li><a href="#" class="stumble"><small>enviar a Stumble</small></a></li>
    <li><a href="#" class="twitter"><small>compartir en Twitterr</small></a></li>
    <li><a href="#" class="youtube"><small>el canal de YouTube</small></a></li>
    <li><a href="#" class="facebook"><small>compartir en Facebook</small></a></li>
  </ul>
</div>
Cada etiqueta LI contiene un enlace con una clase distinta y el contenido es el texto será el que vamos a ver en el tooltip.

Lógicamente, la clave es el CSS:
<style>
#masterpanel { /* este es contenedor principal */ }
#masterpanel ul { /* la lista */
  list-style: none;
  padding: 0;
  margin: 0;
}
#masterpanel ul li { /* cada item de la lista */
  padding: 0;
  margin: 0;
  position: relative;
}

/* este es el enlace */
#masterpanel ul li a {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 50% 0;
  text-decoration: none;
  margin: 0 5px; /* la separación entre ellos */
  float: left; /* uno al lado del otro */
  position: relative;
  padding: 0 20px;
  /* el tamaño de las imágenes */
  height: 60px;
  width: 60px;
}

/* las imágenes son los fondos de esos enlaces */
a.tpicasa {background-image: url(imagen1);}
a.tstumble {background-image: url(imagen2);}
a.ttwitter {background-image: url(imagen3);}
a.tyoutube {background-image: url(imagen4);}
a.tfacebook {background-image: url(imagen5);}

/* el texto del tooltip permanecerá oculto */
#masterpanel a small {
  background-color: Brown;
  border-radius: 10px;
  color: #FFF;
  display: none;
  font-size: 11px;
  line-height: 1;
  padding: 5px;
  text-align: center;
  width: 90px; /* es el ancho real del enlace */
}

/* el efecto hover hace visible al tooltip */
#masterpanel a:hover small { 
  display:block; 
  left: 0; 
  margin-top:-35px; 
  position:absolute; 
  top: 0;
  z-index:9999;
  /* la animación para Firefox y Chrome/Safari */
  -moz-animation:mymove .25s linear;
  -webkit-animation:mymove .25s linear; 
}

/* las reglas de la animación para cada uno de los navegadores */
@-moz-keyframes mymove {
  0%{ -moz-transform: scale(0,0); opacity:0;}
  50%{ -moz-transform: scale(1.2,1.2); opacity:0.3; }
  75%{ -moz-transform: scale(0.9,0.9); opacity:0.7;}
  100%{ -moz-transform: scale(1,1); opacity:1;}
}
@-webkit-keyframes mymove {
  0%{ -webkit-transform: scale(0,0); opacity:0;}
  50%{ -webkit-transform: scale(1.2,1.2); opacity:0.3;}
  75%{ -webkit-transform: scale(0.9,0.9); opacity:0.7;}
  100%{ -webkit-transform: scale(1,1); opacity:1;}
}
</style>

12 comentarios:

Cocina  

Divinos! ya los estoy probando!
Saludos!

Responder
Damian  

Hola que tal JMiur me gusto tu pagina es la primera vez que la veo y creo que tienes el potencial en esto de bloger,y te quiero pedir una ayuda veras dentro de unos dias voy a implementar algo en mi blog que me parece muy bueno y se que también a muchos,veras estoy haciendo un editor con el fin que cualquier usuario pueda publicar un post para eso utilizo una libreria de http://ckeditor.com/ y todo el contenido lo envio por medio de email de mi blog para que pueda ser publicado asta ay todo bien(para mandar el email utilizo un hosting hontinger.es),el problema es que el articulo publicado se presenta en codigo y no tengo idea de como hacer que se publique normalmente como lo debe de hacer aqui te envio todo el codigo el editor y la funcion php que envie el email http://www.mediafire.com/?m9zgphdc4w4t18c por favor te pido tu ayuda con esto me parece muy bueno y de mucha ayuda espero tu respuesta amigo

JMiur  

No puedo darte muchos detalles porque habría que probar todo pero, lo principal es saber si el mail enviado es un texto plano o tiene formato HTML y eso se define en el header de mail. Podrías ver este artículo a ver si encuentras allí la respuesta o la punta para ir desenredando el ovillo.

Ten mucho cuidado con el tipo de etiquetas HTML a ser enviadas ya que es una forma muy sencilla de permitir que se inyecte código indeseado.

Responder
Abraham  

¡Gracias por el truco, JMiur; lo andaba buscando!

Esto me cae como anillo al dedo.

Responder
Abraham  

Una pregunta: ¿Usas Linux? Y si usas Linux, ¿Cuál utilizas? Ubuntu, Kubuntu, Linux mint... etc.

Es solamente por pura curiosidad, ya que vi un comentario tuyo que decía que redactaste una entrada con Linux y.....

JMiur  

No, no uso Linux.

Responder
Abraham  

¿Este efecto no se podría aplicar funcionando como otro tipo de tooltip que funcionaba cuando le agregábamos el atributo title a una image o enlace? Y si se hace ¿Cómo se haría?

JMiur  

Este, en particular, para que funcione, requiere esta etiqueta extra así que no puede usarse el atributo title. Para usar ese atributo o algo similar, necesitarías JavaScript.

Responder
Damian  

que tal JMiur,,,,,ya trate con la pagina que me recomendastes y no logro resultados,amigo ayudame la verdad no manejo muy bien la programación web ,por ultimo cambie de editor con este http://elrte.org/ me pareció mucho mejor que el otro, dame una manito te lo agredeceria infinitamente y gracias por responder

JMiur  

No puedo decirte mucho más. es un tema complejo y no hay manera de saber dónde puede estar el problema a menos que sea probado en las mismas condiciones, con los mismos servidores y aún así, repito, no será sencillo.

Lo único que puedes intentar es tratar de crear ese mail en formato HTML y ver si ese formato es aceptado por tu servidor y si lo recibes, por ejemplo, en tu propia cuenta de correo ya que no todos esos servicios gratuitos los admiten. Ese sería el primer paso.

Responder
Damian  

Que tal JMiur gracias por tu ayuda pero ya solucione el problema me funciona muy bien solo tenia que cambiar de servicio, tengo un problemita sabes si hay una forma de añadir tooltip muy vistosos a los titulos de las entradas,por que en mi plantilla los titulos que son grandes no se muestran todos completos y le quiero agregar un tooltip que muestre el titulo completo

JMiur  

Sí, pueden agregarse a cualquier parte pero deben adaptarse a las etiquetas a las cuales se van a aplicar.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR