• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 2. Speech Bubbles

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

  • The box-shadow property to create drop shadows behind objects

  • The text-shadow property to create drop shadows behind (you guessed it) text

  • The transform property to rotate objects

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint