The Book of CSS3

The Book of CSS3

Released May 2011
Publisher(s): No Starch Press
ISBN: 9781593272869

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

The Book of CSS3 uses real-world examples to teach developers the fundamentals of the CSS3 specification, highlighting the latest developments and future features, while paying close attention to current browser implementations. Each chapter examines a different CSS3 module, and teaches the reader to use exciting new features like web fonts, background images, gradients, 2D and 3D transformations, animation, box effects, and more.

Table of contents

  1. The Book of CSS3
  2. Dedication
  3. Foreword
  4. Preface
  5. Introduction
    1. The Scope of This Book
    2. A Quick Note About Browsers and Platforms
    3. The Appendices and Further Resources
  6. 1. Introducing CSS3
    1. What CSS3 Is and How It Came to Be
      1. A Brief History of CSS3
      2. CSS3 Is Modular
      3. Module Status and the Recommendation Process
      4. CSS3 Is Not HTML5
    2. Let’s Get Started: Introducing the Syntax
      1. Browser-Specific Prefixes
      2. Future-Proofing Experimental CSS
    3. Getting Started
  7. 2. Media Queries
    1. The Advantages of Media Queries
    2. Syntax
    3. Media Features
      1. Width and Height
      2. Device Width and Height
      3. Using Media Queries in the Real World
      4. Orientation
      5. Aspect Ratio
      6. Pixel Ratio
      7. Multiple Media Features
      8. Mozilla-Specific Media Features
    4. Summary
    5. Media Queries: Browser Support
  8. 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
  9. 4. Pseudo-classes and Pseudo-elements
    1. Structural Pseudo-classes
      1. The nth-* Pseudo-classes
        1. nth-child and nth-of-type
        2. nth-last-child and nth-last-of-type
      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
    3. Pseudo-elements
      1. The selection pseudo-element
    4. Summary
    5. DOM and Attribute Selectors: Browser Support
  10. 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
      4. The Fontspring Bulletproof Syntax
    3. Licensing Fonts for Web Use
    4. A Real-World Web Fonts Example
    5. More Font Properties
      1. font-size-adjust
      2. font-stretch
    6. OpenType Features
    7. Summary
    8. Web Fonts: Browser Support
  11. 6. Text Effects and Typographic Styles
    1. Understanding Axes and Coordinates
    2. Applying Dimensional Effects: text-shadow
      1. Multiple Shadows
      2. Letterpress Effect
    3. Adding Definition to Text: text-outline and text-stroke
    4. More Text Properties
      1. Restricting Overflow
      2. Resizing Elements
      3. Aligning Text
      4. Wrapping Text
        1. word-wrap
        2. text-wrap
      5. Setting Text Rendering Options
      6. Applying Punctuation Properties
    5. Summary
    6. Text Effects: Browser Support
  12. 7. Multiple Columns
    1. Column Layout Methods
      1. Prescriptive Columns: column-count
      2. Dynamic Columns: column-width
      3. A Note on Readability
      4. Different Distribution Methods in Firefox and WebKit
      5. Combining column-count and column-width
    2. Column Gaps and Rules
    3. Containing Elements within Columns
      1. Elements Spanning Multiple Columns
      2. Elements Breaking over Multiple Columns
    4. Summary
    5. Multiple Columns: Browser Support
  13. 8. Background Images and Other Decorative Properties
    1. Background Images
      1. Multiple Background Images
      2. Background Size
      3. Background Clip and Origin
      4. background-repeat
      5. Background Image Clipping
    2. Image Masks
    3. Summary
    4. Background Images: Browser Support
  14. 9. Border and Box Effects
    1. Giving Your Borders Rounded Corners
      1. border-radius Shorthand
      2. Differences in Implementation Across Browsers
    2. Using Images for Borders
    3. Multicolored Borders
    4. Adding Drop Shadows
    5. Summary
    6. Border and Box Effects: Browser Support
  15. 10. Color and Opacity
    1. Setting Transparency with the opacity Property
    2. New and Extended Color Values
      1. The Alpha Channel
        1. RGBA and Graceful Degradation
        2. Border Overlap Issue in WebKit
      2. Hue, Saturation, Lightness
      3. HSLA
      4. The Color Variable: currentColor
    3. Matching the Operating System’s Appearance
    4. Summary
    5. Color and Opacity: Browser Support
  16. 11. Gradients
    1. Linear Gradients
      1. Linear Gradients in Firefox
      2. Linear Gradients in WebKit
      3. Using Linear Gradients
      4. Adding Extra color-stop Values
    2. Radial Gradients
      1. Radial Gradients in Firefox
      2. Radial Gradients in WebKit
      3. Using Radial Gradients
      4. Multiple color-stop Values
      5. The WebKit Advantage
    3. Multiple Gradients
    4. Repeating Gradients in Firefox
      1. Repeating Linear Gradients
      2. Repeating Radial Gradients
    5. Summary
    6. Gradients: Browser Support
  17. 12. 2D Transformations
    1. The transform Property
    2. rotate
      1. Position in Document Flow
      2. transform-origin
    3. translate
    4. skew
    5. scale
    6. Multiple Transformations
    7. Transforming Elements with Matrices
    8. Reflections with WebKit
    9. Summary
    10. 2D Transformations: Browser Support
  18. 13. Transitions and Animations
    1. Transitions
      1. Property
      2. Duration
      3. Timing Function
        1. Timing Function Keywords
        2. The Cubic Bézier Curve
      4. Delay
      5. Shorthand
      6. The Complete Transition Example
      7. Multiple Transitions
      8. Triggers
    2. More Complex Animations
      1. Key Frames
      2. Animation Properties
        1. Name
        2. Duration
        3. Timing Function
        4. Delay
        5. Iteration Count
        6. Direction
        7. Shorthand
        8. Play State
      3. The Complete Animations Example
      4. Multiple Animations
    3. Summary
    4. Transitions and Animations: Browser Support
  19. 14. 3D Transformations
    1. 3D Elements in CSS
    2. Transform Style
    3. The Transformation Functions
      1. Rotation Around an Axis
      2. Translation Along the Axis
      3. Scaling
      4. The Transformation Matrix
      5. Perspective
    4. The perspective and perspective-origin Properties
    5. The Transformation Origin
    6. Showing or Hiding the Backface
    7. Summary
    8. 3D Transformations: Browser Support
  20. 15. Flexible Box Layout
    1. Triggering the Flexible Box Layout
      1. The box Value in Firefox
      2. Inline Boxes
    2. Making the Boxes Flexible
      1. Unequal Ratios
      2. Zero Values and Firefox Layouts
    3. Grouping Flexible Boxes
    4. Changing Orientation
    5. Changing the Order of Flexible Boxes
      1. Reversing the Order
      2. Further Control over Ordering
    6. Alignment
    7. Same-Axis Alignment
    8. Multiple Rows or Columns
    9. Cross-Browser Flex Box with JavaScript
    10. Stop the Presses: New Syntax
    11. Summary
    12. Flexible Box Layout: Browser Support
  21. 16. Template Layout
    1. Setting Up the JavaScript
    2. Using position and display to Create Rows
    3. Multiple Rows
    4. Slots and the ::slot() Pseudo-element
    5. Creating Empty Slots
    6. Setting Height and Width on Rows and Columns
      1. Width Keyword Values
      2. Setting Both Row Height and Column Width
    7. Default Content: The @ Sign
    8. Summary
    9. Template Layout: Browser Support
  22. 17. The Future of CSS
    1. Mathematical Operations
      1. Calculation Functions
      2. Cycle
    2. The Grid Positioning Module
      1. Implicit and Explicit Grids
      2. The Grid Unit (gr)
      3. Extended Floats
    3. Extending the Possibilities of Images
      1. Image Fallback
      2. Image Slices
      3. Image Sprites
    4. Grouping Selectors
    5. Constants and Variables
    6. WebKit CSS Extensions
      1. CSS Variables
      2. Extending Variables Using Mixins
      3. CSS Modules
      4. Nested Rules
    7. Haptic Feedback
    8. Summary
    9. Future CSS: Browser Support
  23. A. CSS3 Support in Current Major Browsers
    1. Media Queries (Chapter 2)
    2. Selectors (Chapter 3)
    3. Pseudo-classes and Pseudo-elements (Chapter 4)
    4. Web Fonts (Chapter 5)
    5. Text Effects and Typographic Styles (Chapter 6)
    6. Multiple Columns (Chapter 7)
    7. Background Images and Other Decorative Properties (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. Transitions and Animations (Chapter 13)
    13. 3D Transformations (Chapter 14)
    14. Flexible Box Layout (Chapter 15)
    15. Template Layout (Chapter 16)
    16. The Future of CSS (Chapter 17)
  24. B. Online Resources
    1. CSS Modules
    2. Browsers
      1. WebKit
      2. Firefox
      3. Opera
      4. Internet Explorer
    3. Browser Support
      1. When Can I Use . . .
      2. Quirks Mode
      3. Find Me By IP
    4. Feature Detection and Simulation
      1. Perfection Kills
      2. Modernizr
      3. CSS3 Pie
    5. Code-Generation Tools
      1. CSS3, Please!
      2. CSS3 Generator
      3. CSS3 Gradient Generator
      4. Type Folly
    6. Web Fonts
      1. Typekit
      2. Fontdeck
      3. Fonts.com Web Fonts
      4. Google Font API
      5. Web FontFonts
      6. Font Squirrel
      7. Fontspring
    7. Other Resources
      1. CSS3.info
      2. CSS3 Watch
      3. CSS3 Cheat Sheet
  25. C. About the Technical Reviewer
  26. Index
  27. About the Author
  28. Copyright

Product information

  • Title: The Book of CSS3
  • Author(s):
  • Release date: May 2011
  • Publisher(s): No Starch Press
  • ISBN: 9781593272869