Chapter 2. Speech Bubbles

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. We’ll use 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.

What You’ll Learn

We’ll create the appearance of speech bubbles without using any images, just these pieces of pure CSS:

•; The word-wrap property to contain overflowing text

•; The border-radius property to create rounded corners

•; HSLA to create semitransparent backgrounds

•; The linear-gradient function to create gradient backgrounds ...

Get Stunning CSS3: A Project-Based Guide to the Latest in CSS 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.