Stunning CSS3: Speech Bubbles
- Feb 21, 2011
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 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.