Las burbujas de texto son un efecto popular pero la mayoría de ellas se crean con HTML o Javascript. Este tutorial contiene varios ejemplos de efectos de burbujas de texto creados con CSS 2.1 y personalizados con CSS3. Como dije anteriormente, no contiene imágenes, Javascript y puede aplicarse a tu HTML semántico.

Por ahora soporta Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+ e Internet Explorer 8+.

Varios modos de crear burbujas

Con HTML tan simple como

o

puedes producir efectos de burbujas como este:

Añade un elemento hijo y tu obtendrás burbujas como estas:

Puedes usar los pseudoelementos :before y/o :after para producir formas básicas. Aplicando propiedades como border-radius y transform puedes producir formas complejas y orientaciones.

Código de ejemplo

Este es un ejemplo de como crear una burbuja de texto básica. Para ver más ejemplos mira la página de ejemplos completa.

/* Burbuja con un triangulo isosceles
------------------------------------------ */

.triangle-isosceles {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#f3961c;

   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #f9d835, #f3961c);
   background:linear-gradient(top, #f9d835, #f3961c);
}

/* creamos el triangulo */
.triangle-isosceles:after {
   content:"\00a0";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   z-index:-1;
   bottom:-30px;
   left:50px;
   width:0;
   height:0;
   border-width:15px 15px;
   border-style:solid;
   border-color:#f3961c transparent transparent;
}

Cabe destacar que los navegadores que no sean totalmente compatibles con CSS3 o algunos efectos de CSS 2.1, no mostrarán la burbuja “deforme”, si no que simplemente no tendrás los efectos completos.

Advertencia sobre Firefox 3.0

Firefox 3.0 soporta los pseudo-elementos de CSS 2.1 pero no el posicionamiento del contenido generador, así que si vas a implementar este efecto en tu sitio, ten en cuenta que Firefox 3.0 lo soporta parcialmente.

Ejemplos

Vía | Nicolasgallagher