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

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