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
Contenido
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