As you can see in my last article (a chat conversation with Janko Javonovic), the article is nicely styled in a real "chat conversation" way. This is achieved by placing the text in text (or speech) balloons, using avatars and making it look pretty fancy.

Like I already said in that article, I wanted to share how you can create such a nicely styled chat conversation with text balloons using CSS3. You can show your interviews or chat conversations online in a pretty way, making it more visually attractive.

IMPORTANT NOTE:
Just like the polaroid photo viewer: The text balloons are styled using the CSS3 border-radius property. This works fine on Firefox (using -moz-border-radius) and on Safari/Chrome (using -webkit-border-radius), but on Internet Explorer (not even 8.0) it doesn't. The browser just displays the text baloons as simple blocks.

  

Get your CSS editor ready so you'll be able to re-create this cute effect for your site!

HTML

As usual, the HTML isn't that hard to understand. Copy the following code and repeat it to extend the conversation.

 
<div class="reporter">
  <p>Lorem ipsum dolor sit amet, ...</p>
</div>
<div class="reporter-ico">
  <img src="images/reporter.png" alt="" />
</div>
<div class="interviewee">
  <p>Nam condimentum. Cras eros nisl, ...</p>
</div>
<div class="interviewee-ico">
  <img src="images/interviewee.png" alt="" />
</div>

Just to clear some things up:

• .reporter - Divider for the reporter. We'll add the border-radius to this divider.
• .reporter-ico - The container for the avatar from the reporter.
• .interviewee - Divider for the interviewee. Just like the one for the reporter, we'll add the border-radius to this one too.
• .interviewee-ico - The container for the avatar from the interviewee.

Well, that wasn't that spectecular, was it? Now let's fancyfy that HTML with some nice CSS(3)!

CSS3

Take not that this is not the complete CSS file, just the important stuff. Make sure you check out the source code by downloading this project to view the full CSS. I'll break this up in seperate parts.

 
.reporter { width:450px; float:right; background-color:#000018; color:#D8D8D8; font-style:italic; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
  background-image:url(../images/glow.png); background-position:top center; background-repeat:no-repeat; text-align: justify; }

• float:right - The reporter divider is floated to the right, to get the nice "left/right" shifting, making it a real conversation.
• -moz-border-radius:5px - The rounded CSS corners
• background-position:top center - The divider has a background color and a background image. The background image (glow.png) is center aligned to the top and not repeated to give the nice glow on top.
• text-align: justify - This is used to fill up the text left and right.

 
.reporter-ico { clear:both; float:right; width:100px; background-image:url(../images/reporter-balloon.png); background-repeat:no-repeat; }

• width:100px - This divider has a fixed width to be floated to the right side.
• background-image:url - The balloon is set as the background image.
• background-repeat:no-repeat - We don't need to repeat the image: We just need to display it once.

 
.interviewee { width:450px; clear:both; background-color:#304860; color:#D8D8D8; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
  background-image:url(../images/glow.png); background-position:top center; background-repeat:no-repeat; text-align: justify; }

• Nothing really special here - It's just like the .reporter-class. The only difference is that the .interviewee doesn't have an italic font, has a different background color and isn't floated to the right.

Clearing the floats

Floating can be pretty tricky sometimes. When you "forget" to clear your floats, the layout may look really weird in your browser. Since we're floating the reporter stuff to the right, we'll need to clear it to fix it. Do this by add the following to your CSS:

 
.clear { clear:both; }

And clear directly after reporter-ico

 
<br class="clear" />

That's about it! I also added a sent-item class that is center-aligned for sending items.

Conclusion and download

Looks pretty nice, doesn't it? Sadly, like I said, Internet Explorer doesn't support this form of CSS3 (yet), so it can't be used as a cross-browser solution. You can also change the "glow.png" image if you don't want a glow, but (for example) a hard border.

  

I hope that you like this tutorial and that you learned something today. I would love to see if you're going to implement this somewhere. If you do, please tell us!

Interested in this topic? You might enjoy another article I've written called

• Sharing some fudge with Franz Jeitz
• New CSS3 properties added to Firefox 3.6
• CSS3 animations and their jQuery equivalents
• Sweet tabbed navigation using CSS3
• Your two cents - CSS3 animation and Lazy loading

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to: