Cómo crear un bocadillo de cómic con CSS
Ahora que ya hemos hablado de cómo adaptar los textos a imagen, crear elipses y otras formas con border-radius, vamos a dar un paso más y ver una de las muchas técnicas que podríamos usar para crear los bocadillos de las historias de cómic, aquellos que hacen entender que los personajes están hablando o pensando y que puede resultar un recurso muy útil para cualquier página web. Lo haremos sólo con CSS, sin apoyarnos en imágenes. Esto que optimizará el sitio web y nos permitirá reutilizarlo fácilmente, solo a partir del nombre de una clase que colocaremos a todos los elementos que tengan que representarse como el elemento balloon, el nombre por el que se conocen los bocadillos de cómic en inglés.
Con CSS3 existen muchos mecanismos para conseguir estos efectos y encontraremos por Internet verdaderos artistas de las hojas de estilo que son capaces de realizar maravillas. Nosotros nos vamos a contentar con una fórmula sencilla y fácil de implementar, pero con la que podemos experimentar tanto como deseemos.
El pseudo-elemento before
Nuestra técnica consistirá en agregar lo que se conoce como un pseudo-elemento de CSS, llamado before. Con él, conseguimos agregar contenido antes de otro elemento que queramos. Ese contenido se agregará desde CSS y no desde HTML, así mediante las hojas de estilo seremos capaces de agregar la punta del bocadillo, sin que tengamos que «ensuciar» nuestro HTML.
El pseudo-elemento se usa así:
.clasecualquiera:before {
content: 'esto se agregará';
}
<p class='clasecualquiera'>
Esto es un párrafo
</p>
Si ejecutamos este código, veremos como el párrafo tiene su propio contenido, más aquel agregado antes gracias al pseudo elemento before, tal y como vemos en esta imagen:
Caja del balloon
Esta caja será tal como deseemos que sea, lo ideal es que le coloquemos un color de fondo y un espaciado para separar el borde del texto. Además, podemos agregar un border-radius para que quede menos angulosa.
.balloon{
border-radius: 5px;
background-color: chocolate;
color: floralwhite;
padding: 10px;
width: 120px;
}
Observa que usamos una clase de CSS, lo que nos permitirá asignar este estilo a todas las cajas que queramos dentro del sitio web.
Agregar el vértice del bocadillo con before
Ahora le agregamos, gracias al pseudo-elemento before que acabamos de conocer, el vértice a nuestro bocadillo de cómic. Usamos la misma clase balloon de antes, añadiendo el pseudo-elemento before.
.balloon:before {
content:'';
width: 0;
height: 0;
position: absolute;
margin: 0 0 32px 0;border-bottom: 20px solid chocolate;
border-right: 18px solid transparent;
border-left: 18px solid transparent;
}
En este pseudo-elemento hemos colocado varios estilos que debemos de explicar. Básicamente, tenemos tres bloques de estilos que hemos separado por una línea en blanco para que sea fácil de identificar.
- Contenido. El primero de ellos content: «» sirve para que no tenga contenido, tampoco anchura y altura.
- Posicionamiento. el position: absolute y el margin los usamos para posicionar el elemento. En lugar de aparecer justo antes, lo hemos trasladado un poco hacia la derecha y arriba.
- Forma. Esta última parte sirve para conseguir el efecto de triángulo del vértice del bocadillo. Se consigue a través de las propiedades de borde. Para que sea más agudo el ángulo o más grave podremos jugar con los valores «px» del borde.
¡Eso es todo! Experimenta a darle otros valores al CSS y podrás conseguir otras formas y posicionamientos para tus bocadillos.
Este sería el código completo:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Bocadillo (balloon) de cómic</title>
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<style>
.balloon{
border-radius: 5px;
background-color: chocolate;
color: floralwhite;
padding: 10px;
width: 420px;
font-family: 'Indie Flower', cursive;
font-size: 2em
}
.balloon:before {
content:'';
position: absolute;
width: 0;
height: 0;
border-bottom: 20px solid chocolate;
border-right: 18px solid transparent;
border-left: 18px solid transparent;
margin: 0 0 32px 0;}
.clasecualquiera:before {
content: 'esto se agregará';
color: red;
}
</style>
</head>
<body>
<br><br><br><br>
<div class='balloon'>
Este elemento se decora como un bocadillo de cómic.
</div>
<br><br><br><br>
<p class='clasecualquiera'>
Esto es un párrafo
</p>
</body>
</html>
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.