En este artículo vamos a hacer un taller práctico de capacidades de CSS3 para realizar estilos con distintas formas, que nos pueden ayudar a crear esas bolas que sirven para incluir los textos con los que hablan los personajes en los cómics. En España yo he llamado siempre a estos recuadros "bocadillos" y creo que así los llaman la mayoría de las personas, pero también se pueden conocer como "globos". En inglés son "speech balloon", supongo que todos sabrán a lo que me refiero.

Antes de CSS3 no quedaba otro remedio que implementarlas con trucos que incluían diversas capas en el HTML y el uso de imágenes PNG, o GIF con fondos transparentes. Ya sabemos que esa no era la mejor solución, pues en el HTML tenemos que mantener simplemente el contenido y dejar la forma o el aspecto para CSS.

Ahora podemos usar algunas técnicas, medianamente sencillas, que nos ayudarán a realizar en el HTML una única unidad de contenido con el texto del bocadillo y por medio de CSS3 especificar el estilo para que se parezca a lo que sería el globo del cómic o historieta.

Para ver a lo que me refiero, simplemente podemos ver el ejemplo en funcionamiento con una presentación de varias capas con ejemplos de globos de cómic.

La técnica, formas en CSS3, triángulo + caja redondeada

Debo de reconocer que la técnica no es mía, sino que la he visto hacer y la he podido modificar un poco para adaptarla a mis necesidades. La idea original sobre cómo hacerla la tienes en CSS3 Shapes donde tienes un recurso con varios tipos de formas en CSS3 y la manera de realizarlas.

Comenzamos haciendo un triángulo con CSS3:
El ejemplo del bocadillo está compuesto en verdad por dos formas distintas. Un triángulo y un cuadrado con esquinas redondeadas. Comenzamos haciendo el triángulo que es más sencillo.

Lo componemos a partir de una capa vacía:

<div id="triangulo">
</div>

Y aplicando estilos CSS en los que básicamente jugamos con los bordes, para producir las esquinas del triángulo. Si te fijas, tanto la altura como la anchura están a cero y con los bordes conseguimos definir los tres lados.

#triangulo{
width: 0;
height: 0;
border­bottom: 30px solid #55f;
border­right: 20px solid transparent;
border­left: 20px solid transparent;
}

Este triángulo define su altura con el tamaño del "border­bottom" y su anchura por los bordes de la derecha e izquierda en suma. Para que tenga lados iguales, la anchura por la derecha tiene que ser igual a la anchura por la izquerda. En realidad, es un triángulo isósceles con el ángulo más agudo el de arriba, lo que da la impresión de apuntar hacia arriba, aunque en la pantalla del ordenador se ve casi como un equilátero.

Jugando con las propiedades de "border" puedes cambiar fácilmente las características del triángulo. Puedes probar a cambiar las dimensiones de los bordes para producir otros ángulos. O bien puedes cambiar por ejemplo "border­bottom" por "border­top" para que el triángulo apunte hacia abajo en vez de apuntar hacia arriba.

La caja redondeada:
Es tan facil hacerla como usar una capa con borde redondeado, gracias al "border­radius" de CSS3.

<div id="bocadillo">
Probando el bocadillo o "globo de hablar", o como le llames.
</div>

Su CSS sería el siguiente:

#bocadillo {
padding: 10px;
width: 220px;
border­radius: 10px;
background­color: #f80;
font­family: "trebuchet ms", tahoma, verdana, sans­serif;
font­size: 1.4em;
}

Hay poco que comentar aquí. Simplemente observar el "border­radius" y ajustar sus valores al gusto de cada uno o a las necesidades del diseño. Técnica ":before":
La parte más interesante de todo esto es usar la técnica ":before" de CSS2 y que ya podemos usar con libertad casi en todos los navegadores (quitando los más viejos Internet Explorer que cada día menos deberían preocuparnos, aunque eso es otra discusión).

En nuestro caso la situación es simple: partimos de una capa del bocadillo, donde introducimos el texto que queremos que haya dentro del globo. Esa capa tiene simplemente los cantos redondeados. Luego colocamos con el pseudo­-elemento :before lo que sería el triángulo del globo.

#bocadillo:before {
content:"";
position: absolute;
width: 0;
height: 0;
border­top: 20px solid transparent;
border­right: 30px solid #f80;
border­bottom: 20px solid transparent;
margin: 10px 0 0 ­32px;
}

Como ves, con :before indicamos que nos coloque un texto antes del elemento "#bocadillo". El contenido será la cadena vacía (pues para hacer el triángulo partimos de una capa vacía). Luego colocamos los estilos CSS que necesitamos para hacer el triángulo, descritos anteriormente, más un margen para colocar el triángulo en el lugar desdeado con respecto al globo de texto.

Cambiar el lugar donde está la "punta" del bocadillo

A partir de aquí es bastante sencillo alterar nuestro bocadillo para que la punta esté en diferentes lugares, de modo que podamos maquetarlo apuntando hacia donde necesitemos. Ahora vamos a hacer un globo que tiene la punta hacia arriba.

Partimos siempre de una caja que contiene el texto que queremos que haya en el globo de texto.

<div id="bocadilloarriba">
Probando otro bocadillo con el triangulo arriba.
</div>

Luego aplicamos nuestros estilos CSS para convertirlo en un típico recuadro el texto hablado en un cómic o historieta.

#bocadilloarriba {
padding: 10px;
width: 220px;
border­radius: 10px;
background­color: #8f0;
font­family: "trebuchet ms", tahoma, verdana, sans­serif;
font­size: 1.4em;
}
#bocadilloarriba:before {
content:"";
position: absolute;
width: 0;
height: 0;
border­bottom: 30px solid #8f0;
border­right: 20px solid transparent;
border­left: 20px solid transparent;
margin: ­30px 0 0 90px;
}

¡Eso es todo! esperamos que sea útil para vosotros. Las aplicaciones son las que se deseen, pero creo que una de las más interesantes es para hacer divertidos "tip" o "tooptip" que podemos mostrar y ocultar para señalar cualquier tipo de información contextual, o remarcar de una manera simpática algunos elementos de nuestra página.

Lo bueno de esta técnica es que no mezclas el contenido con la presentación. Simplemente le colocas una capa normal y corriente con un texto y todos los estilos para la presentación los haces por medio de CSS3, de manera totalmente autónoma al contenido.