O'Reilly logo

Stunning CSS3: A Project-Based Guide to the Latest in CSS by Zoe Mickley Gillenwater

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

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 ...

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