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 ...
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.