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
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
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
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
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
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
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
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
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
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.