{Carrer web log} ←

CSS3 Chat Bubbles

Monday, December 20, 2010 { 13 Comments }

Few day ago I saw on Hacker News the link Creating Triangles in CSS from Jon Rohan(kudos to JON) and was specially interesting for the chat bubbles. Mainly because I was building one mini app for Twitter who should run on iPhone/iPad (webkit browser) so I needed simple solution for the chat bubbles.

Jon uses this HTML :
<div class="chat-bubble">
Buongiorno!
<div class="chat-bubble-arrow-border"></div>
<div class="chat-bubble-arrow"></div>
</div>

I wanted to use just one div to create the same effect and make CSS to do all the heavy lifting:

<div class="chat-bubble"></div>

After some CSS hacking here is the result:



Example
Example1
Example2
Example3
Example4

From the examples you can see that everything is done with CSS and no images are used for making Chat Bubbles and also the HTML is super simple just one div and one class (<div class="chat-bubble"></div>).

The trick is using :before and :after pseudo-elements with combination of content: " " and absolute, relative positioning. In this case both :after and :before work in the same way because there are absolute positioned. This technique work in all modern CSS3 supported browsers.

If you have any questions please let me know in the comments.

All the examples are also on github for download.

[Update] Today Nicolas Gallagher point to me that he came to this technique 8 months ago Pure CSS speech bubbles . Unfortunately I didn't know about his post and I was careless not to check about other CSS chat bubble solution. And the worst thing is I have no prove beside my gentleman's word that I didn't copy his technique. Sorry Nicolas!

13 Responses to “CSS3 Chat Bubbles”

1. //  Unknown // 12/20/2010

   Some nice CSS invention ;)
   Are you also planning to make this animated with CSS3 soon?  

2. //  Anonymous // 12/20/2010

   To be useful it really needs to scale vertically to the size of the content.  

3. //  Vladimir // 12/21/2010

   @Audee: Thanks, are you referring to make chat bubble with some animation inside?
   
   @Anonymous: I'm not sure that I understood your question, but it the text is overfilling the vertical space you just need to change inside CSS height with min-height and that will do the trick.  

4. //  Nicolas Gallagher // 12/21/2010

   I wrote about this technique a while ago - http://nicolasgallagher.com/pure-css-speech-bubbles/
   
   There is also a post on another method of using pseudo-elements to do lots of other effects - http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/  

5. //  Vladimir // 12/21/2010

   @Nicolas: Thank you for sharing. Looks like we used the same technique. Only thing you came first. If I knew about your post I probably wouldn't reinvent the Chat Bubbles :). I actually felt great that I invented something cool.  

6. //  Nicolas Gallagher // 12/21/2010

   No worries. You did invent something cool. Doesn't matter who did it first. Maybe someone was using it years ago but they never made a post about it.
   
   I thought you might like to see some of the other speech and thought bubble effects you can do with this technique...and the interesting things with using it for backgrounds. Please share anything you make with pseudo-elements. I'd love to see it.  

7. //  Anonymous // 12/23/2010

   Hi... this things normally happen hehe.
   
   But I don´t have understood the CSS, exactly...
   
   What does mean,,":before" and ":after"...?
   
   Merry Christmas!  

8. //  Vladimir // 12/23/2010

   @elFr!qui: Imagine that you some text and you want to put quotes before and after in the text without inserting them(") in the text directly. You can use :before and :after are content: "Any text you like in this case quotes ". But in this case :before and :after are used to display the triangle and the shadow under the triangle. And this is possible because there are absolutely positioned to the relative base. Ok I know that at this point you are more confused than before :) Try to download the examples and play with the code by changing only left,right, bottom example form bottom: 0px to bottom: 60px. And if you have more questions please let me know.  

9. //  Beben Koben // 1/01/2011

   heppy new year my friend^^  

10. //  kn33ch41 // 1/04/2011

    I was inspired to do the same thing after reading Jon's article a few months ago, but never blogged about it. It's good to see the improvement released into the wild!  

11. //  chat // 3/21/2011

    thanks for this artcle very useful  

12. //  Brett Widmann // 4/10/2011

    This is a cool and simple tutorial! Thanks for sharing.  

13. //  St. Louis Web Design // 5/31/2011

    Very cool. I think I might try to experiment and give the triangles the same light gray/dark gray stroke as the rest of the bubble  

Post a Comment

<< Home