Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

Stunning CSS3: Speech Bubbles

  • Print
  • + Share This
  • 💬 Discuss
One of the most fun and easy uses of CSS3 is for layering on visual "frosting"—non-essential visual flair and little details that can push your design from adequate to alluring. Zoe Mickley Gillenwater uses some of the most straightforward and well-supported CSS3 properties to create the appearance of three-dimensional speech bubbles that can be used to style blog comments, pull quotes, and more.

The Base Page

Let's say you're working on styling a blog's comments section. Before delving into any CSS3 fanciness, you'd want to get some basic styles in place to take care of older, non-CSS3-supporting browsers. As I mentioned in Chapter 1, it's important to make sure your pages are functional and at least decent-looking in browsers that don't support CSS3 before you add on CSS3 as part of progressive enhancement.

Figure 2.1 shows a blog's comments section with some basic styles applied. The text, avatar image, commenter's name, and date for each comment have been laid out neatly, the text is formatted, and we even have some basic backgrounds and borders in place. There's nothing wrong with this comments area; it's usable, it's clean, it's attractive. Anyone seeing it in an older browser would not think they were missing something or that the page was "broken."

Figure 2.1

Figure 2.1 The comments area before any CSS3 is applied.

But there's a lot we can do with CSS3, without adding a single image or touching the markup, to jazz up the page's appearance. To get started, download the exercise files for this chapter at www.stunningcss3.com, and open speech-bubble_start.html in your code editor of choice. Its CSS is contained in a style element in the head of the page, for ease of editing.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus