Fluid CSS Speech Bubbles

Fluid CSS Speech Bubbles
Difficulty: Easy
Description: A tutorial on creating speech bubbles with CSS.
Author: Daniel St. Jules; Date Added: 2007-02-19; Views: 70013

Speech bubbles are a common sight in comic books, video games and web pages. People have been using them for many years, so it?s only natural that they would crawl their way onto the web. Unfortunately, creating speech bubbles which expand according to its content has been something which was normally achieved using tables. However, creating the neat little bubbles is a simple enough task with the use of CSS by using a series of nested divs. In this tutorial, I?ll describe one manner of creating the speech bubbles with CSS and a few images.

First of all, you?ll have to save the following images to a folder of your choice:

The images above will serve as the outline of the speech bubble. Please note that the images cannot have a transparent background and that you'll have to change the images accordingly to fit the colours of your website. For a preview of the speech bubbles, please click on the thumbnail below:

thumbnail
<div class="sbl"><div class="sbr"><div class="stl"><div class="str">Welcome to Gamexe.net! Please feel free to visit our forums for assistance with any tutorials or, if you're just looking for a fun place, to meet new people and chat.</div></div></div></div>
<div class="sb">said Daniel St. Jules</div>
		

There's the basic structure of the HTML needed for the speech bubble. It consists of four divs, all of which will have a different background image to display the four rounded corners of the bubble, and a fifth div which will contain a small triangular tip. Simple enough? Now, let's look at the CSS.

.sbl { background: url('bl.gif') bottom left no-repeat #EDEDED; width: 30%; text-align: center; min-width: 100px; }
.sbr { background: url('br.gif') bottom right no-repeat; }
.stl { background: url('tl.gif') top left no-repeat; }
.str { background: url('tr.gif') top right no-repeat; padding: 10px; } 
.sb { padding: 2px 0px 10px 50px; background: url('b.gif') 30px top no-repeat; }

Now this is where the magic is done. In the first div, sbl, it has the background image of the bottom left corner which is positioned in the bottom left and uses a value of no-repeat. It also possesses a background colour, a width which can be changed to whatever value you wish, a text-align property so that the text will be centered, and a min-width property so that the layout of the speech bubbles cannot be broken by the screen or container resizing to too small of a size. Please note that the background colour in which you want the speech bubble to have must be specified in the sbl div or else some corner images may be overlapped.

The sbr (speech, bottom right), stl (speech, top left) and str (speech, top right) divs then use various background images which will be placed in the remaining three corners of the speech bubble. The .str rule also uses padding so that the contents of the bubble do not exceed the borders. The sb (speech, bottom) div then specifies the background image of the triangular shape at the bottom of the bubble and uses padding to position the contents of the div, which in this case would be "said Daniel St. Jules".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Fluid CSS Speech Bubbles</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css"><!--
body { background: #66839A; font-size: 12px; font-family: Verdana, Arial; }

.sbl { background: url('bl.gif') bottom left no-repeat #EDEDED; width: 30%; text-align: center; min-width: 100px; }
.sbr { background: url('br.gif') bottom right no-repeat; }
.stl { background: url('tl.gif') top left no-repeat; }
.str { background: url('tr.gif') top right no-repeat; padding: 10px; } 
.sb { padding: 2px 0px 10px 50px; background: url('b.gif') 30px top no-repeat; }

//--></style>
</head>

<body>

<h1>Fluid CSS Speech Bubbles</h1>

<div class="sbl"><div class="sbr"><div class="stl"><div class="str">Welcome to Gamexe.net! Please feel free to visit our forums for assistance with any tutorials or, if you're just looking for a fun place, to meet new people and chat.</div></div></div></div>
<div class="sb">said Daniel St. Jules</div>

</body>
</html>

Above is just a basic html file with all the code from this tutorial slapped into it. Simply copy this code, paste it into an html file, and save it to the folder in which the images from earlier in the tutorial were stored. Give it a quick load in your favourite browsers (and not-so-favourites, if you?d like) and voila! You?ve created a page which implements fluid speech bubbles. No fancy JavaScript, which can be disabled by the user, is required, just CSS power.

Speech bubbles are a fairly simple thing to accomplish, but because the images cannot be transparent with this manner of creating them, its use may be slightly limited. You?ll have to create separate images so that they blend in with the background of your web pages, although it shouldn?t be too difficult.

Well, that?s all. It really isn?t all that difficult to create the speech bubbles with CSS, even without proper support for the border-radius property, although it does require a few extra divs to accomplish. But anyway, I hope some have found this tutorial useful.
Happy designing.