Speech Bubble in Pure CSS

June 2, 2012
Not so long ago, I have discovered two new CSS3 pseudo elements - :before and :after (They are actually CSS2 features, but lets discuss it in the context of CSS3). I have read about them long ago but was uninterested due to lack of practical use until recently I came across this blog post by Nicolas Gallagher, where he shows how to use them to create a speech bubble.
The beauty of this approach is that ANY DIV can look like a speech bubble WITHOUT the use of any additional SUPPORTING ELEMENTS. The CSS is simple so is HTML. Here is the CSS: Here is the HTML: Here is the result:

Simon Says:
Turn left and clap 3 times

How it works

You can create various speech bubbles and put text of any length. You can also overlay this bubbles on top of other elements if you make position absolute. I have found it useful in form validation. I display an error messages after the field that has an error. Here are some more examples:
Multiline tooltop
Has two lines
Multiline tooltop
Has two lines
Multiline tooltop
Has two lines
Multiline tooltop
Has two lines
To achieve the corner effect, is uses border trick. What will happen if you define a border for TOP as a 5px solid line and border for LEFT and RIGHT as 5px but transparent? Exactly! it will create a nice triangular shape.
It needs to be noted that if you want to keep the bubble expandable you can only put corner in 4 places: left-top, left-bottom or top-left, bottom-left. I did not figure out a pure CSS solution how to make it in other corners and still have it resized based on the amount of text inside. Here is entires CSS for this

A Background Color Problem and Solution

One of the problems with this approach is that you will not be able to create a bubble with a background different from the border color. This problem is inherit with the approach when you create a triangle based on border width. The article I mentioned above has a solution to this, but it was not very pretty, it used arbitrary margin and padding, which makes it content depended. If you add more content into your bubble, it will not work correctly.
I've found a much better solution, but it uses CSS3 property. All you need to do is to turn the :before or :after element. Here are a few examples:
Multiline tooltip
Has two lines
Multiline tooltip
Has two lines
Multiline tooltip
Has two lines
Multiline tooltip
Has two lines
Here is HTML Here is CSS The last example uses inherit property to read background color and border color if you decide to change it in inline style.

User Comments

comments powered by Disqus
Follow
follow us in feedly
More Articles