Download Safari Books Online apps: Apple iOS | Android

Entire Site

Safari Books Online

    Free Trial

    Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


    • Create BookmarkCreate Bookmark
    • Create Note or TagCreate Note or Tag
    • DownloadDownload
    • 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