O'Reilly logo

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

The Book of CSS3, 2nd Edition

The Book of CSS3, 2nd Edition

by Peter Gasston
Publisher: No Starch Press
Release Date: November 2014
ISBN: 9781457185502
View table of contents
Start reading

Book Description

The Book of CSS3, 2nd Edition distills the murky language of the CSS3 specification into plain English and shows you what CSS3 can do now, in all major browsers.

Table of Contents

  1. Cover
  2. Praise for the First Edition of the Book of CSS3
  3. Title Page
  4. Copyright Page
  5. Dedication
  6. Brief Contents
  7. Contents in Detail
  8. PREFACE
  9. INTRODUCTION
    1. The Scope of This Book
    2. Chapter by Chapter
    3. The Appendices and Further Resources
    4. Introduction to the Second Edition
  10. 1 INTRODUCING CSS3
    1. What CSS3 Is and How It Came to Be
      1. A Brief History of CSS3
      2. CSS3 Is Modular
      3. There Is No CSS3
    2. Module Status and the Recommendation Process
    3. Introducing the Syntax
    4. Vendor Prefixes
    5. Let’s Get Started
  11. 2 MEDIA QUERIES
    1. The Advantages of Media Queries
    2. Syntax
    3. Media Features
      1. Width and Height
      2. Pixel Ratio
      3. Device Width and Height
      4. Orientation
      5. Aspect Ratio
    4. Multiple Media Features
    5. Mobile-First Web Development
    6. Summary
    7. Media Queries: Browser Support
  12. 3 SELECTORS
    1. Attribute Selectors
    2. New Attribute Selectors in CSS3
      1. Beginning Substring Attribute Value Selector
      2. Ending Substring Attribute Value Selector
      3. Arbitrary Substring Attribute Value Selector
      4. Multiple Attribute Selectors
    3. The General Sibling Combinator
    4. Summary
    5. Selectors: Browser Support
  13. 4 PSEUDO-CLASSES AND PSEUDO-ELEMENTS
    1. Structural Pseudo-classes
      1. The :nth-* Pseudo-classes
      2. :first-of-type, :last-child, and :last-of-type
      3. :only-child and :only-of-type
    2. Other Pseudo-classes
      1. :target
      2. :empty
      3. :root
      4. :not()
      5. UI Element States
      6. Constraint Validation Pseudo-classes
    3. Pseudo-elements
      1. The ::selection Pseudo-element
    4. Summary
    5. DOM and Attribute Selectors: Browser Support
  14. 5 WEB FONTS
    1. The @font-face Rule
      1. Defining Different Faces
      2. True vs. Artificial Font Faces
    2. A “Bulletproof” @font-face Syntax
      1. Using Local Fonts
      2. Font Formats
      3. The Final “Bulletproof” Syntax
    3. Licensing Fonts for Web Use
    4. A Real-World Web Fonts Example
    5. Controlling Font Loading
    6. More Font Properties
      1. font-size-adjust
      2. font-stretch
    7. OpenType Features
      1. Enabling Font Features
      2. Font Feature Properties
    8. Summary
    9. Web Fonts: Browser Support
  15. 6 TEXT EFFECTS AND TYPOGRAPHIC STYLES
    1. Understanding Axes and Coordinates
    2. Applying Dimensional Effects: text-shadow
      1. Multiple Shadows
    3. Restricting Overflow
    4. Aligning Text
    5. Controlling Line Wrapping
      1. Breaking Words
      2. Hyphenating Words
    6. Resizing Elements
    7. Summary
    8. Text Effects and Typographic Styles: Browser Support
  16. 7 MULTIPLE COLUMNS
    1. Column Layout Methods
      1. Prescriptive Columns: column-count
      2. Dynamic Columns: column-width
      3. Varying Distribution of Content Across Columns
      4. Combining column-count and column-width
    2. Column Gaps and Rules
    3. Containing Elements Within Columns
    4. Elements Spanning Multiple Columns
    5. Summary
    6. Multiple Columns: Browser Support
  17. 8 BACKGROUND IMAGES
    1. Updates to Existing Background Properties
      1. background-position
      2. background-attachment
      3. background-repeat
    2. Multiple Background Images
    3. Dynamically Scaled Background Images
    4. Background Clip and Origin
    5. Updated Background Shortcut
    6. Summary
    7. Background Images: Browser Support
  18. 9 BORDER AND BOX EFFECTS
    1. Giving Your Borders Rounded Corners
      1. The border-radius Shorthand
      2. Using Percentage Values
    2. Using Images for Borders
      1. border-image-source
      2. border-image-slice
      3. border-image-width
      4. border-image-outset
      5. border-image-repeat
      6. The border-image Shorthand Property
      7. Browser Support
    3. Drop Shadows
    4. Inset Shadows
    5. Summary
    6. Border and Box Effects: Browser Support
  19. 10 COLOR AND OPACITY
    1. The opacity Property
    2. New and Extended Color Values
    3. The Alpha Channel
      1. Hue, Saturation, Lightness
      2. HSLA
      3. The Color Variable: currentColor
    4. Summary
    5. Color and Opacity: Browser Support
  20. 11 GRADIENTS
    1. Linear Gradients
      1. Setting Gradient Direction
      2. Adding Extra Color-Stop Values
      3. Repeating Linear Gradients
    2. Radial Gradients
      1. Using Radial Gradients
      2. Using Multiple Color-Stop Values
      3. Repeating Radial Gradients
    3. Multiple Gradients
    4. Summary
    5. Gradients: Browser Support
  21. 12 2D TRANSFORMATIONS
    1. The transform Property
      1. rotate
      2. translate
      3. scale
      4. skew
    2. An Important Note About Transformation Functions
    3. Transforming Elements with Matrices
    4. Summary
    5. 2D Transformations: Browser Support
  22. 13 3D TRANSFORMATIONS
    1. 3D Elements in CSS
    2. The Transformation Functions
      1. Rotation Around an Axis
      2. Perspective
      3. Translation Along the Axis
      4. Scaling
      5. The Transformation Matrix
    3. The perspective and perspective-origin Properties
    4. The Transformation Origin
    5. The transform-style Property
    6. Showing or Hiding the Backface
    7. Summary
    8. 3D Transformations: Browser Support
  23. 14 TRANSITIONS AND ANIMATIONS
    1. Transitions
      1. transition-property
      2. transition-duration
      3. transition-timing-function
      4. transition-delay
      5. The transition Shorthand Property
      6. The Complete Transition Example
      7. Multiple Transitions
    2. Animations
      1. Keyframes
      2. animation-name
      3. animation-duration
      4. animation-timing-function
      5. animation-delay
      6. animation-iteration-count
      7. animation-direction
      8. animation-fill-mode
      9. animation-play-state
      10. The animation Shorthand
      11. The Complete Animations Example
      12. Multiple Animations
    3. Summary
    4. Transitions and Animations: Browser Support
  24. 15 FLEXIBLE BOX LAYOUT
    1. Declaring the Flexible Box Model
    2. Flexbox Alignment
    3. Reversing the Content Order
    4. Fully Reordering Content
    5. Adding Flexibility
      1. The flex-grow Property
      2. The flex-shrink Property
      3. The flex-basis Property
      4. The flex Shorthand
    6. Alignment Inside the Container
      1. Horizontal Alignment with justify-content
      2. Vertical Alignment with align-items
      3. Cross-Axis Alignment with align-self
      4. Wrap and Flow
      5. The flex-flow Shorthand
      6. Aligning Multiple Lines with align-content
    7. Browser Support and Legacy Syntaxes
    8. Summary
    9. Flexbox: Browser Support
  25. 16 VALUES AND SIZING
    1. Relative Length Units
      1. Root-Relative Units
      2. Viewport-Relative Units
    2. Calculated Values
    3. Sizing Elements
      1. Box Sizing
      2. Intrinsic and Extrinsic Sizing
    4. Summary
    5. Values and Sizing: Browser Support
  26. 17 GRID LAYOUT
    1. Grid Terminology
    2. Declaring and Defining the Grid
      1. Creating Explicit Grids by Setting Track Size
      2. Placing Items in an Explicit Grid
      3. Grid Placement Shorthand Properties
      4. Repeating Grid Lines
      5. Named Grid Areas
      6. The grid-template Shorthand
      7. Implicit Grids
      8. Grid Items Without a Declared Place
    3. Combining Explicit and Implicit Grids
      1. The grid Shorthand
    4. Grid Item Stacking Order
    5. Internet Explorer’s Grid Layout Syntax
    6. Summary
    7. Grid Layout: Browser Support
  27. 18 BLEND MODES, FILTER EFFECTS, AND MASKING
    1. Blend Modes
      1. background-blend-mode
      2. mix-blend-mode
      3. isolation
    2. Filter Effects
      1. blur()
      2. brightness() and contrast()
      3. grayscale(), sepia(), and saturate()
      4. hue-rotate()
      5. opacity()
      6. drop-shadow()
      7. Multiple Filter Effect Functions
      8. Filters in SVG
    3. Masking
      1. Clipping
      2. Image Masking
      3. Border Masking
      4. Masking in SVG
    4. Combining Filter Effects and Masking
    5. Summary
    6. Blend Modes, Filter Effects, and Masking: Browser Support
  28. 19 THE FUTURE OF CSS
    1. Shapes
    2. Exclusions
    3. Regions
    4. Variables
    5. Feature Queries
    6. Device Adaptation
    7. Sticky Positioning
    8. And Much, Much More
    9. Conclusion
    10. Future CSS: Browser Support
  29. A CSS3 SUPPORT IN CURRENT MAJOR BROWSERS
    1. Media Queries (Chapter 2)
    2. Selectors (Chapter 3)
    3. DOM and Attribute Selectors (Chapter 4)
    4. Web Fonts (Chapter 5)
    5. Text Effects and Typographic Styles (Chapter 6)
    6. Multiple Columns (Chapter 7)
    7. Background Images (Chapter 8)
    8. Border and Box Effects (Chapter 9)
    9. Color and Opacity (Chapter 10)
    10. Gradients (Chapter 11)
    11. 2D Transformations (Chapter 12)
    12. 3D Transformations (Chapter 13)
    13. Transitions and Animations (Chapter 14)
    14. Flexbox (Chapter 15)
    15. Values and Sizing (Chapter 16)
    16. Grid Layout (Chapter 17)
    17. Blend Modes, Filter Effects, and Masking (Chapter 18)
    18. Future CSS (Chapter 19)
  30. B ONLINE RESOURCES
    1. General CSS Resources
    2. Chapter 2: Media Queries
    3. Chapters 3 and 4: Selectors, and Pseudo-classes and Pseudo-elements
    4. Chapters 5 and 6: Web Fonts, and Text Effects and Typographic Styles
    5. Chapter 7: Multiple Columns
    6. Chapters 8 and 9: Background Images, and Border and Box Effects
    7. Chapter 10: Color and Opacity
    8. Chapter 11: Gradients
    9. Chapters 12 and 13: 2D and 3D Transformations
    10. Chapter 14: Transitions and Animations
    11. Chapter 15: Flexible Box Layout
    12. Chapter 16: Values and Sizing
    13. Chapter 17: Grid Layout
    14. Chapter 18: Blend Modes, Filter Effects, and Masking
    15. Chapter 19: The Future of CSS
  31. INDEX
  32. UPDATES
  33. Footnote
    1. 7 Multiple Columns
    2. 8 Background Images
    3. 10 Color and Opacity
    4. 13 3D Transformations
    5. 18 Blend Modes, Filter Effects, and Masking
  34. About the Author