O'Reilly logo

CSS Cookbook, 3rd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Making Word Balloons

Problem

You want to create a word-balloon effect, as shown in Figure 4-50.

A word balloon

Figure 4-50. A 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 4-51):

<blockquote>
 <p>
  <span>
   Be bold, baby!
  </span>
 </p>
 <cite>
  Christopher Schmitt
 </cite>
</blockquote>
Structured content for a word balloon

Figure 4-51. 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 4-52). The image is available for download at this book’s site, http://csscookbook.com/. You create the other three sides of the word balloon by setting the border in the span tag.

The word balloon tail

Figure 4-52. The word balloon tail

For a comic book look and feel, be sure to set the font family to Comic Sans MS, a free font from Microsoft, or use a font-embedding technique as shown in Embedding Font Files for another font:

font-family: "Comic Sans MS", Verdana, Helvetica, sans-serif;

If you have a computer running the Windows OS, the Comic Sans MS font might be installed on your computer already. Although this is a common font, some users might not have it installed on their systems. If that is the case, the browser will look for the next font, in the order listed in the value, until it finds a font available to render the page.

You can create a more whimsical presentation using the word-balloon technique by adjusting the markup and CSS slightly. First, place a span element with a class attribute set to no around the name in the cite element:

<blockquote>
 <p>
  <span>
   Be bold, baby!
  </span>
 </p>
 <cite>
  <span class="no">
   Christopher Schmitt
  </span>
 </cite>
</blockquote>

Next, in CSS, add the following rule, which keeps the text from being displayed in the browser:

.no {
 display: none;
}

Place a photograph in the cite element through the background-position property to finish the effect (see Figure 4-53):

cite {
 margin: 0;
 padding: 0;
 background-image: url(baby.jpg);
 background-position: 0 0;
 height: 386px;
 text-align: right;
 display: block;
 width: 250px;
}

See Also

Background information about Comic Sans MS at http://www.microsoft.com/typography/web/fonts/comicsns/default.htm; propaganda on why not to use Comic Sans MS at http://www.bancomicsans.com

Word balloon coming from an image

Figure 4-53. Word balloon coming from an image

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required