CSS, Diseño, ¿Cómo se hace?

¿Cómo se hace? Un bocadillo de cómic o globo de historieta en CSS3

Hola amigos como explicaba Daniela en su post de ayer en este 2017 los desarrolladores y diseñadores andarán de la mano, pues ya las imágenes jpg y las muchas capas de Photoshop se van a ir eliminando; y eso gracias a las ventajas que brinada el CSS3. En el artículo de hoy les voy a mostrar cómo se hace un bocadillo de historietas o sea esas bolas que sirven para incluir los textos con los que hablan los personajes en los cómics.

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.

Pues comenzamos comentando la técnica que no es más que combinar un triángulo y una caja redonda, debo confesarle que este truco se lo copie a los muchachos de DesarrolloWeb.com

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: 20px 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: #8f0;
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:"";
margin: 80px 0 0 120px;
position: absolute;
width: 0;
height: 0;
border-top: 30px solid #8f0;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}

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.

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. Solo basta con jugar con las propiedades del border del selector #bocadillo:before

 

Acerca de Bárbaro Javier Valmaseda Vázquez

Ingeniero con alma de deportista. Perfeccionista para sus proyectos. Amante de las series y de un buen libro. Aunque su trabajo normal no tiene nada que ver con la tecnología (Comercial de una agencia de excursiones).

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *