CSS Cookbook

10.7. Making Word Balloons

Problem

You want to create a word-balloon effect as shown in Figure 10-16.

Figure 10-16. The word balloon

Solution

Mark up the content for a word balloon, and include both the text to appear in the word balloon as well as the name of the person cited as the source (see Figure 10-17):

<blockquote>
 <p>
  <span>
   Be bold, baby!
  </span>
 </p>
 <cite>
  Christopher Schmitt
 </cite>
</blockquote>

Figure 10-17. Structured content for a word balloon

Form the word balloon using the CSS border and background properties. Then align the cited text so that it falls underneath the balloon tail image:

blockquote {
 width: 250px;
}
blockquote p {
 background: url(balloontip.gif);
 background-repeat: no-repeat;
 background-position: bottom;
 padding-bottom: 28px;
}
blockquote p span {
 display: block;
 padding:  0.25em 0.25em 0.5em 0.5em;
 border: 1pt solid black;
 border-bottom-width: 0;        
 font-size: 3em;
 font-family: "Comic Sans MS", Verdana, Helvetica, sans-serif;
 line-height: 0.9em;
}
cite {
 text-align: right;
 display: block;
 width: 250px;
}

Discussion

To create a word balloon you need at least one image, which includes a balloon tail and one border of the balloon (see Figure 10-18). The image is available for download at this book’s site, mentioned in the Preface. You create the other three sides ...