JMiur [E]

Speech bubble es una herramienta online que nos facilita un método par crear íconos de tipo burbuja que se generan sólo con CSS. Las posibilidades son varias, entrando a la página, seleccionamos el modelo básico que puede ser tanto un ícono simple como un enlace integrado.

Todo lo que debe hacerse es copiar el CSS que luego podrá personalizarse a gusto y que colocaremos entre etiquetas <style> </style> y el HTML de la estructura que en un ejemplo específico, dice algo así:
<a class="spch-bub-inside" href="#">
  <span class="point"></span> 
  <em>10 comentarios</em>
</a>

lorem ipsum dolor 10 comentarios sed diam nonummy nibh


A simple vista, las reglas de estilo parecerían complejas pero no lo son tanto y son bastante fáciles de personalizar. En este ejemplo, uso las siguientes:
/* este es el contenedor principal (una etiqueta A) */
.spch-bub-inside {
  font-family: Tahoma;
  font-size: 18px;
  margin: 0 .2em;
  position: relative;
  text-decoration: none;
}
Allí es donde definimos la fuente del texto porque todos los demás valores, estarán expresados en unidades em, es decir, todo el modelo se adaptará a los distintos tamaños o tipos de fuentes elegidos.

La siguiente regla define el triángulo inferior:
.spch-bub-inside .point {
  border-bottom: 0.6em solid transparent;
  border-left: 0.6em solid #888; /* este es el color */
  display: block;
  height: 0;
  left: 0.6em; /* la posición /*
  overflow: hidden;
  position: absolute;
  top: 1.2em;
  width: 0;
}
Cuanto más alto sea el valor de left, más se desplazará ese triangulo hacia la derecha.
Cuanto más alto sean los valores de border, más ancho y alto será el triángulo.

La etiqueta EM es la que crea el rectángulo con el texto:
.spch-bub-inside em {
    background-color: #888; /* tiene el mismo color */
    border-radius: 0.2em 0.2em 0.2em 0.2em; /* se redondean los bordes */
    color: #FFF; /* el color del texto */
    font-style: normal; /* evitamos que se vea en itálica */
    padding: 0 0.5em; /* la separación entre el texto y los bordes */
    position: relative;
}
Y por último, los efectos hover que cambian el color de la burbuja cuando ponemos el cursor encima:
.spch-bub-inside:hover em {
  background-color: #ABC;
  color: #000;
}
.spch-bub-inside:hover .point {
  border-left: 0.6em solid #ABC;
}

15 comentarios:

Gem@  

Esto del CSS es un vicio!
Oiga que fea queda la ventana de comentarios al viejo estilo, poquito a poco nos han decorado todo :S

JMiur  

Hace tiempo que no la uso, no me había fijado.

Responder
Unknown  

Es un buen ejemplo, pero creo que sería más fácil hacerlo con pseudoelementos, no?

Algo así: jsFiddle

En mi opinión es más simple y más ligero... qué opinas?

Karla Castañeda  

También es una opción válida Emilio, pero de este modo garantizas que se visualice el triangulito en IE7 ;)

JMiur  

Toda opción es válida. Por suerte, nunca hay una sóla forma de hacer algo.

Responder
Unknown  

Rebonito Jmiur! para quienes no sabemos como yo, es de agradecerte el trabajo. No tengo la menor idea de cómo hacerlo de otra manera :P

JMiur  

Le confieso que hay cosas sobre las que tampoco tengo la menor idea :D

Responder
Anónimo  

hola jmiur un saludo desde colombia, bueno disculpa mi inquietud no tiene que ver con esta entrada, pero no sabia donde preguntarte, ok mi duda es la siguiente veo que en facebook tienes tambien a vagabundia y esta muy bn diseñado agregas videso, swf etc, me encantaria saber cono lo haces o almenos saber donde buscar para hacerlo ojala y puedas ayudarme muchas gracias por tu tiempo que estes muy bn..

JMiur  

Para eso tienes que tener un hosting propio donde alojar los archivos y crear esas páginas; luego, se crean aplicaciones en Facebok y se configuran para apuntar a esos otros sitios externos.

Para determiandas cosas es necesrio usar PHP; para algo más simple, pueden usarse archivos HTML.

En resumen, son páginas web externas y Facebook las muestra como iframes.

Anónimo  

ok y como se llama la aplicion que utilizas en facebook para los iframe y para crear el icono de bloger y los otros gracias por tu respuesta

Anónimo  

jmiur encontre este tuto en youtube http://www.youtube.com/watch?v=5fxUKNnISVU pero me sale un error disque para verificar cuenta

JMiur  

La aplicación la debes crear tu mismo y para eso, es necesario tener una cuenta verificada, caso contrario, no puede accederse a esa parte. Debes intentar verificarla con tu teléfono móvil.

Anónimo  

jmiur no habra otra forma de verificar mi cuenta de facebook, he intentado miles de veces por mi celular y no ha llegado ningun mensaje, esta sera la unica obcion para verificarla gracias....

JMiur  

No que yo conozca, Mayck

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