By means of CSS shapes we can simply implement with a layer and CSS3 styles, the typical comic balloons or comic bubbles.
In this article we are going to do a practical workshop on CSS3 capabilities to make styles with different shapes, which can help us create those balls that are used to include the texts with which the characters speak in comics. In Spain I have always called these boxes “bocadillos” and I think that is what most people call them, but they can also be known as “balloons”. In English they are “speech balloon”, I suppose everyone will know what I mean.
Before CSS3 there was no other choice but to implement them with tricks that included various layers in the HTML and the use of PNG or GIF images with transparent backgrounds. We already know that this was not the best solution, because in HTML we simply have to keep the content and leave the form or appearance for CSS.
Now we can use some fairly simple techniques that will help us create a single unit of content in the HTML with the text of the bubble and, through CSS3, specify the style so that it resembles what the comic balloon would be.
To see what I mean, we can simply
The technique, CSS3 shapes, triangle + rounded box
I must admit that the technique is not mine, but that I have seen it done and I have been able to modify it a bit to adapt it to my needs. The original idea on how to do it is where you have a resource with various types of CSS3 shapes and the way to do them.
We start by making a triangle with CSS3:
The sandwich example is actually made up of two different shapes. A triangle and a square with rounded corners. We start by making the triangle, which is easier.
We compose it from an empty layer:
And applying CSS styles where we basically play around with the edges, to produce the corners of the triangle. If you look closely, both the height and the width are at zero and with the borders we are able to define the three sides.
#triangle{
width: 0;
height: 0;
borderbottom: 30px solid #55f;
borderright: 20px solid transparent;
borderleft: 20px solid transparent;
}
This triangle defines its height with the size of the “borderbottom” and its width by the edges of the right and left in sum. For it to have equal sides, the width on the right has to be equal to the width on the left. It is actually an isosceles triangle with the most acute angle at the top, which gives the impression of pointing upwards, although on the computer screen it looks almost equilateral.
Playing with the properties of “border” you can easily change the characteristics of the triangle. You can try changing the dimensions of the borders to produce other angles. Or you can change for example “borderbottom” to “bordertop” so that the triangle points down instead of up.
The rounded box:
It’s as easy to do as using a layer with a rounded edge, thanks to CSS3’s “borderradius”.
Your CSS would be the following:
#snack {
padding: 10px;
width: 220px;
borderradius: 10px;
backgroundcolor: #f80;
fontfamily: “trebuchet ms”, tahoma, verdana, sansserif;
fontsize: 1.4em;
}
There is little to comment here. Simply observe the “borderradius” and adjust its values to the taste of each one or to the needs of the design. “:before” technique:
The most interesting part of all this is using the “:before” technique of CSS2 and that we can now freely use in almost all browsers (apart from the older Internet Explorer that should worry us less every day, although that is another discussion).
In our case, the situation is simple: we start from a layer of the balloon, where we introduce the text that we want to be inside the balloon. That cape simply has rounded edges. Then we place with the pseudo-element :before what would be the triangle of the balloon.
#snack:before {
content:””;
position: absolute;
width: 0;
height: 0;
bordertop: 20px solid transparent;
borderright: 30px solid #f80;
borderbottom: 20px solid transparent;
margin: 10px 0 0 32px;
}
As you can see, with :before we indicate that we place a text before the “#bocadillo” element. The content will be the empty string (because to make the triangle we start from an empty layer). Then we put in the CSS styles we need to make the triangle, described above, plus some margin to place the triangle where it’s intended to be in relation to the text balloon.
Change where the “tip” of the balloon is
From here it’s fairly easy to alter our balloon so that the tip is in different places, so that we can layout it pointing where we need to. Now we are going to make a balloon that has the point facing up.
We always start from a box that contains the text that we want to be in the text balloon.
Then we apply our CSS styles to turn it into a typical speech text box in a comic or cartoon.
#snackup {
padding: 10px;
width: 220px;
borderradius: 10px;
backgroundcolor: #8f0;
fontfamily: “trebuchet ms”, tahoma, verdana, sansserif;
fontsize: 1.4em;
}
#snackup:before {
content:””;
position: absolute;
width: 0;
height: 0;
borderbottom: 30px solid #8f0;
borderright: 20px solid transparent;
borderleft: 20px solid transparent;
margin: 30px 0 0 90px;
}
That is all! we hope it will be useful for you. The applications are as desired, but I think one of the most interesting is to make fun “tip” or “tooptip” that we can show and hide to point out any type of contextual information, or highlight some elements of our image in a nice way. page.
The good thing about this technique is that you don’t mix the content with the presentation. You simply place a normal layer with a text and all the styles for the presentation are done through CSS3, completely autonomously from the content.
Facebook Comments
Disqus