You are previewing CSS3 Pushing the Limits.
O'Reilly logo
CSS3 Pushing the Limits

Book Description

Push CSS3 and your design skills to the limit—and beyond!

Representing an evolutionary leap forward for CSS, CSS3 is chock-full of new capabilities that dramatically expand the boundaries of what a styling language can do. But many of those new features remain undocumented, making it difficult to learn what they are and how to use them to create the sophisticated sites and web apps clients demand and users have grown to expect.

Until now.

This book introduces you to all of CSS3's new and advanced features, and, with the help of dozens of real-world examples and live demos, it shows how to use those features to design dazzling, fully-responsive sites and web apps.

Among other things, you'll learn how to:

  • Use advanced selectors and an array of powerful new text tools

  • Create adaptable background images, decorative borders, and complex patterns

  • Create amazing effects with 2D and 3D transforms, transitions, and keyframe-based animations

  • Take advantage of new layout tools to solve an array of advanced layout challenges—fast

  • Vastly simplify responsive site design using media queries and new layout modules

  • Create abstract and scalable shapes and icons with pseudo-elements

  • Leverage preprocessors and use CSS like a programming language within a stylesheet context

Don't pass up this opportunity to go beyond the basics and learn what CSS3 can really do!

Table of Contents

  1. Cover Page
  2. Title Page
  3. Copyright
  4. Publisher's Acknowledgements
  5. About the Author
  6. Acknowledgments
  7. Contents
  8. Introduction
    1. What Is CSS3?
    2. Who This Book Is For
    3. What This Book Covers
    4. How This Book Is Structured
    5. A Word of Caution
    6. Demos and Browser Support
  9. Part I: New Toys
    1. Chapter 1: Advanced Selectors
      1. Child and Sibling Selectors
      2. Attribute Selectors
      3. Pseudo-Classes
      4. Bringing It All Together
      5. Summary
      6. Further Reading
    2. Chapter 2: New Tools for Text
      1. Perfecting Your Type
      2. Writing Modes
      3. Looking Good Is Half the Battle
      4. Summary
      5. Further Reading
    3. Chapter 3: New Tools for Backgrounds and Borders
      1. More Control with CSS3 Backgrounds
      2. Multiple Backgrounds
      3. New Tools for Borders
      4. Gradients
      5. Linear Gradients
      6. Summary
      7. Further Reading
    4. Chapter 4: Into the Browser with CSS3 Filters and Blending Modes
      1. CSS3 Filters
      2. Blending Modes
      3. Summary
      4. Further Reading
  10. Part II: Transforms, Transitions, and Animation
    1. Chapter 5: Introducing CSS3 2D Transforms
      1. The Transform Property
      2. Transform Origin
      3. Combining Transforms
      4. Browser Support
      5. Summary
      6. Further Reading
    2. Chapter 6: Bringing 2D Transforms to Life with Transitions
      1. Introducing CSS Transitions
      2. Transitions in Action
      3. Combining Transitions and 2D Transforms
      4. Creating a Scattered Image Gallery
      5. Summary
      6. Further Reading
    3. Chapter 7: A New Dimension with 3D Transforms
      1. What Are 3D Transforms?
      2. It's All About Perspective
      3. Moving on to More Transform Properties
      4. Creating a Cube Using 3D Transforms
      5. Animating the Cube with Transitions
      6. Examining Browser Support for 3D Transforms
      7. Summary
      8. Further Reading
    4. Chapter 8: Getting Animated
      1. Introducing CSS3 Animation
      2. Looking at CSS3 Animations in Action
      3. Adding Progressive Enhancement with Subtle Animation
      4. Combining Animations
      5. Examining Browser Support for CSS Animation
      6. Summary
      7. Further Reading
  11. Part III: Getting to Grips with New Layout Tools
    1. Chapter 9: Creating a Multicolumn Layout
      1. The Evolution of Layout Tools
      2. What's New in Layout Solutions?
      3. Introducing Multi-column Layout
      4. Creating a Multicolumn Layout
      5. Examining Browser Support for Multi-column Layout
      6. Summary
      7. Further Reading
    2. Chapter 10: Flexible Box Layout
      1. What Is Flexbox?
      2. New Flexbox Properties
      3. Creating a Flexible Box Layout
      4. Examining Browser Support for Flexbox
      5. Summary
      6. Further Reading
    3. Chapter 11: Grid Layout, Regions, and Exclusions
      1. Introducing CSS Grid Layout
      2. Introducing CSS Regions
      3. Introducing CSS Exclusions
      4. Summary
      5. Further Reading
    4. Chapter 12: Going Responsive with CSS3 Media Queries
      1. What Is Responsive Web Design?
      2. Using Media Queries to Design for Device Differences
      3. Using the Viewport Meta Tag
      4. Making a Multicolumn Layout Responsive
      5. Making a Flexbox Layout Responsive
      6. A Word on CSS Grid Layout
      7. The Here and Now of RWD
      8. Summary
      9. Further Reading
  12. Part IV: Pushing the Limits
    1. Chapter 13: Getting Creative with Pseudo-elements
      1. Distinguishing Pseudo-elements and Pseudo-classes
      2. Exploring the Current Range of Pseudo-elements
      3. Enhancing Your Typography with Pseudo-elements
      4. Using Pseudo-elements to Generate Content
      5. Pushing Pseudo-elements to the Limit
      6. Summary
      7. Further Reading
    2. Chapter 14: Using Preprocessors to Push CSS3 to the Limit
      1. What Is a CSS Preprocessor?
      2. What Can CSS Preprocessors Do for You?
      3. Choosing the Right Preprocessor for You
      4. Getting to Grips with the Dark Side of Preprocessors
      5. Making CSS3 More Efficient with Mixins
      6. Creating Proportional Layouts with Simple Math
      7. Using Functions to Form a Dynamic Color Palette
      8. A Word of Caution on Preprocessors
      9. Summary
      10. Further Reading
    3. Chapter 15: Creating Practical Solutions Using Only CSS3
      1. Creating Tabbed Content Using Only CSS3
      2. Creating a Lightbox Feature Using Only CSS3
      3. Creating a 3D Image Carousel Using Only CSS3
      4. Summary
      5. Further Reading
    4. Chapter 16: The Future of CSS
      1. CSS Variables
      2. CSS Selectors: Level 4
      3. Browser Support Using CSS Conditional Rules
      4. Pseudo-elements: Level 4
      5. Have Your Say
      6. Summary
      7. Further Reading
  13. Index