Speech bubble: Burbujas con CSS

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;
}