You are previewing CSS3 Solutions: Essential Techniques for CSS3 Developers.
O'Reilly logo
CSS3 Solutions: Essential Techniques for CSS3 Developers

Book Description

CSS3 brings a mass of changes, additions, and improvements to CSS across a range of new modules. Web designers and developers now have a whole host of new techniques up their sleeves, from working with colors and fonts accurately, to using media queries to ensure correct styling across a multitude of devices. But all of these new technologies bring more tags to learn and more avenues for things to go wrong. CSS3 Solutions provides a collection of solutions to all of the most common CSS3 problems. Every solution contains sample code that is production-ready and can be applied to any project.

What you'll learn

Real-world solutions for everyday CSS3 development, saving hours of frustration. Problems covered include:

  • Developing across multiple devices

  • Design patterns for user experience and mobile

  • Working with the CSS box model

  • Who this book is for

    Web developers and designers seeking practical advice on making CSS3 work.

    Table of Contents

    1. Title
    2. Dedication
    3. Contents at a Glance
    4. Contents
    5. About the Authors
    6. About the Technical Reviewer
    7. About the Cover Image Designer
    8. Acknowledgments
    9. Introduction
    10. Chapter 1: CSS Basics
      1. CSS3 Modules
      2. Solution 1-1: Discovering CSS3 compatibilities across browsers
      3. Solution 1-2: Adding a CSS3 file with JavaScript
      4. Solutions 1-3: Declaring multiple backgrounds for your web page
      5. Solution 1-4: Controlling the image aspect ratio
      6. Solution 1-5: Resetting CSS3 default values
      7. Summary
    11. Chapter 2: CSS Selectors
      1. Differences compared to CSS2 selectors
      2. Solution 2-1: Highlighting selected text
      3. Solution 2-2: Enhancing the readability of tabular data
      4. Solution 2-3: Toggling form elements
      5. Solution 2-4: Preventing content from being selectable
      6. Solution 2-5: Hiding empty elements within a page
      7. Solution 2-6: Using the sibling combinator
      8. Solution 2-7: Putting an icon image next to links
      9. Summary
    12. Chapter 3: Fonts, Text, and Color
      1. Solution 3-1: Using @font-face
      2. Solution 3-2: Using fallback fonts
      3. Solution 3-3: Using advanced text effects with text-shadow
      4. Solution 3-4: Forcing text to wrap
      5. Solution 3-5: Creating elegant text overflow
      6. Solution 3-6: Using color RGBa
      7. Solution 3-8: Optimizing text legibility with text-rendering
      8. Summary
    13. Chapter 4: CSS Typography
      1. Solution 4-1: Handling hyphenation of text
      2. Solution 4-2: Creating drop caps
      3. Solution 4-3: Creating hanging punctuation
      4. Solution 4-4: Creating a typographic hierarchy
      5. Solution 4-5: Creating multicolumn text blocks
      6. Summary
    14. Chapter 5: Tables and Lists
      1. Solution 5-1: Zebra-striping table rows
      2. Solution 5-2: Creating a styled pricing table
      3. Solution 5-3: Making tables responsive
      4. Solution 5-4: Creating a practical table with rounded corners
      5. Solution 5-5: Creating a drop-down menu with lists
      6. Solution 5-6: Using @counter-style for custom lists
      7. Solution 5-7: Using a flexible lists marker
      8. Summary
    15. Chapter 6: CSS Box Model
      1. Solution 6-1: Setting background color and opacity
      2. Solution 6-2: Creating background gradients
      3. Solution 6-3: Setting background size
      4. Solution 6-4: Creating multiple backgrounds
      5. Solution 6-5: Creating border outlines
      6. Solution 6-6: Creating rounded corners
      7. Solution 6-7: Creating image borders
      8. Solution 6-8: Creating drop shadows
      9. Solution 6-9: Creating resizable boxes
      10. Summary
    16. Chapter 7: CSS Positioning and Layouts
      1. Solution 7-1: Changing the display property
      2. Solution 7-2: Using CSS positioning
      3. Solution 7-3: Floating elements with CSS
      4. Solution 7-4: Clearing floats
      5. Solution 7-5: Using a CSS reset
      6. Summary
    17. Chapter 8: Multidevice Development
      1. Solution 8-1: Defining different style sheets to target different devices with media queries
      2. Solution 8-2: Adapting a layout for different screen sizes with CSS3
      3. Solution 8-3: Handling layout orientation on mobile devices with CSS3
      4. Solution 8-4: Defining style rules for high-density pixel screens
      5. Solution 8-5: Styling a document for printing devices with CSS3
      6. Summary
    18. Chapter 9: Transitions and Transformations
      1. Solution 9-1: Applying simple 2D transformations on HTML elements with CSS3
      2. Solution 9-2: Using matrix 2D transformations in CSS3
      3. Solution 9-3: Making elements move with CSS3 transitions
      4. Solution 9-4: Going further with animations in CSS3
      5. Solution 9-5: Applying 3D transformations in CSS3
      6. Summary
    19. Chapter 10: Multimedia and Accessibility
      1. Solution10-1: Building a custom video player
      2. Solution 10-2: A CSS3 music player
      3. Solution 10-3: Improve the form accessibility with CSS3 validation
      4. Solution 10-4: An unobtrusive skip navigation link
      5. Summary
    20. Chapter 11: UX Patterns
      1. Rules of thumb
      2. Solution 11-1: Ensuring visibility of system status
      3. Solution 11-2: Matching the system to the real world
      4. Solution 11-3: Building in user control and freedom
      5. Solution 11-4: Establishing error prevention
      6. Solution 11-5: Promoting recognition over recall
      7. Solution 11-6: Designing for efficiency of use
      8. Solution 11-7: Helping users recognize, diagnose, and recover from errors
      9. Solution 11-8: Help and documentation
      10. Summary
    21. Chapter 12: Mobile UX Patterns
      1. Considering mobile
      2. Solution 12-1: Scope. Cut. Repeat
      3. Solution 12-2: Design for context
      4. Solution 12-3: Craft the right approach
      5. Solution 12-4: Respond to the target view
      6. Solution 12-5: Go mobile first
      7. Summary
    22. Index