Official website for Web Designer - defining the internet through beautiful design
Author: Steve Jenkins
2nd March 2010

Create CSS speech bubbles



COMMENTS PROVIDE THE perfect riposte for blog viewers, they provide the platform for visitors to say exactly what they want. And what better way to illustrate written comments than with pretty-looking speech bubbles. The premise of using speech bubbles is that they immediately suggest that the text is an opinion from a user. Plus, web designers being web designers they need to look the part as well. So, speech bubbles are not only effective from a design perspective they are functional as well. This tutorial looks at using div tags and CSS to create a selection of different styles and formats all from the some base code. The basis of the code is two div tags, one to contain the background, border and text and the other to contain the pointer image, commentator title and date. The background image is relatively positioned to ensure that it lines up with the other div tag to create the illusion of a single speech bubble.

Originally appeared in Issue 165

01 Insert div tags
Create CSS speech bubbles
Open a new blank page via File>New>Blank Page>HTML>Create and save with a relevant name. The standard speech bubble consists of three div tags. Insert the first via Insert>Layout Objects>Div Tag>OK and add another on a separate line. Now place the cursor inside the first set of div tags and add another div tag.

02 Create classes
Create CSS speech bubbles
Now remove all the default text, this will leave three sets of empty div tags. Now go to Format>CSS Styles>New to create a new class. Select Class from the Selector Type drop-down list, add a name, ie speechbubble, and press OK and OK again to create an empty class. Now repeat for the other two div tags.

03 Apply classes
Create CSS speech bubbles
Select the opening and closing tags for the first div tag, this will include the second set, and select speechbubble from the Class list in the Properties window. This applies the class speechbubble to the first set of tags. Now select the second set and apply the comments class and finally select the third set and apply the commentator class.

04 Font
Create CSS speech bubbles
Double-click .speechbubble in the CSS Style panel to open the CSS Rule definition window. Now select the desired font, Arial, Verdana, Georgia etc, from the drop-down list and select a font size and colour. Try 1.2em for a flexible font size or 16 pixels for a fixed font size. Experiment to suit your needs.

05 Bubble width
Create CSS speech bubbles
Now select the Box category and define the width of the div tag. There are several options here. Use a percentage, ie 80% if the bubble placement is in a liquid layout. If using this option add in the min-width tag, ie min-width: 200px, so the text is still easy to read, Alternatively, use a fixed width, ie 450 pixels.

06 Border and background
Create CSS speech bubbles
The next step is to define the border and background. Click Background and select a background colour from the palette. Now click Border and define the border for the bubble. To get started try a solid border with a width of one pixel. Choose a colour that compliments the background colour and press Apply and OK.

07 Add text
Create CSS speech bubbles
To view how the speech bubble will render add in some dummy text between the comment div tags. Make sure there is enough text for at least two lines. Note that the text is tight to the border, open the .comment CSS Rule definition window and add in ten pixels of padding for all sides.

08 Commentator text
Create CSS speech bubbles
Now add some dummy text to the remaining, commentator, div tag to bring into view. Double-click commentator, select Box and add some padding, eg Top: ten pixels, Left: ten pixels to position the commentator’s name. Head back to Type to determine the font size, style etc if different to the bubble font options.

09 Margins
Create CSS speech bubbles
Currently, there is a single instance of the speech bubble on display. However, if to be used to style comments there needs to be some breathing space between each comment. Add in a 20 pixel bottom margin to the commentator tag and press Apply and OK. This will vary depending on style, modify to suit.

Pages: 1 2

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Tove Tronslien

      Seems like a nice article however, for the web version I am missing 1)a working demo (the screen prints were small and it is the web, you could make it work) and 2) it would have nice to have some confirmation of browser compatibility.

      The pro of the web vs the printed magazine is that you can go beyond the definite of print.

    • swire

      seems like a lot of work. Tooltips and bubblues can be easily inserted using jquery.

    • Adam Web Design

      Great article, however it would it not be just as easy to style up your blockquote rather than creating the new styles?

    • Victoria Web

      I agree with the point above a working demo would be very helpful. It would also be nice to see a variety of different ways that these css speech bubbles could enhance your work. Great post though!

    • Derek

      I already have bubbles on my wp-blog, how would one go about getting alternating colors, say one dark blue bubble with light blue text and one light blue bubble with dark blue text??

    • DCP Web Designers

      Hi, thanks for this great tutorial. I test this CSS Speach Bubble on a new project and works well. I am now working on a plugin system for PHP / MSQL :)

    • web design barnsley

      Hi, that’s a great tut nice to see something else can be done with pure CSS

    • WebProject | Web Design | Web Development|

      Great Post !
      I enjoyed reading it…

      | Web Design | Web Development | WebProject |

    • Pingback: 2 ejemplos de burbujas tipo comic con CSS Speech Bubbles | evZek blog [Giovanni Rodriguez Rico]

    • Pingback: Ejemplos de burbujas tipo comic con CSS Speech Bubbles | web.evZek

    • Graham Kijek

      you have got an excellent weblog here! would you prefer to make some invite posts on my blog?

    • Sherlyn Welti

      Spot on with this write-up, I really suppose this web site wants much more consideration. I?ll in all probability be once more to learn way more, thanks for that info.

    • Pingback: Ejemplos de burbujas tipo comic con CSS Speech Bubbles - evZek blog [Giovanni Rodriguez Rico] | evZek blog [Giovanni Rodriguez Rico]

    • Elias Rome

      Hey there! I simply would like to give you a big thumbs up for your great info you’ve got right here on this post. I am returning to your blog for more soon.