Burbujas de texto con CSS

Entrada más reciente Entrada antigua

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+.

Ver ejemplo de las burbujas

Varios modos de crear burbujas

Con HTML tan simple como <div>Contenido</div> o <p>Contenido</p> 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.

Ver en texto planoCopiar al portapapelesImprimir

1. /* Burbuja con un triangulo isosceles 
2. ------------------------------------------ */  
3.   
4. .triangle-isosceles {  
5.    position:relative;  
6.    padding:15px;  
7.    margin:1em 0 3em;  
8.    color:#000;  
9.    background:#f3961c;  
10.   
11.    /* css3 */  
12.    -moz-border-radius:10px;  
13.    -webkit-border-radius:10px;  
14.    border-radius:10px;  
15.    background:-moz-linear-gradient(top, #f9d835, #f3961c);  
16.    background:linear-gradient(top, #f9d835, #f3961c);  
17. }  
18.   
19. /* creamos el triangulo */  
20. .triangle-isosceles:after {  
21.    content:"0a0";  
22.    display:block; /* reduce the damage in FF3.0 */  
23.    position:absolute;  
24.    z-index:-1;  
25.    bottombottom:-30px;  
26.    left:50px;  
27.    width:0;  
28.    height:0;  
29.    border-width:15px 15px;  
30.    border-style:solid;  
31.    border-color:#f3961c transparent transparent;  
32. }  

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

Ver ejemplo de las burbujas

Vía | Nicolasgallagher

de CSSBlogEs
autor:Pedro CM