Pro HTML5 and CSS3 Design Patterns

Pro HTML5 and CSS3 Design Patterns

by Michael Bowers, Dionysios Synodinos, Victor Sumner
Released November 2011
Publisher(s): Apress
ISBN: 9781430237808

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

O’Reilly members get unlimited access to live online training experiences, plus books, videos, and digital content from O’Reilly and nearly 200 trusted publishing partners.

Start your free trial

Book description

Pro HTML5 and CSS3 Design Patterns is a reference book and a cookbook on how to style web pages using CSS3 and HTML5. It contains 350 ready–to–use patterns (CSS3 and HTML5 code snippets) that you can copy and paste into your code. Each pattern can be combined with other patterns to create an unlimited number of solutions, and each pattern works reliably in all major browsers without the need for browser hacks.

The book is completely up-to-date with code, best practices, and browser compatibilities for HTML5 and CSS3—enabling you to dive in and make use of these new technologies in production environments.

Pro HTML5 and CSS3 Design Patterns is so much more than just a cookbook, though! It systematically covers every usable feature of CSS3 and combines these features with HTML5 to create reusable patterns. Each pattern has an intuitive name to make it easy to find, remember, and refer to. Accessibility and best practices are carefully engineered into each design pattern, example, and source code.

The book's layout, with a pattern's example on the left page and its explanation on the right, makes it easy to find a pattern and study it without having to flip between pages. The book is also readable from cover to cover, with topics building carefully upon previous topics.

Pro HTML5 and CSS3 Design Patterns book unleashes your productivity and creativity in web design and development. Instead of hacking your way toward a solution, you'll learn how to predictably create successful designs every time by reusing and combining modular design patterns.

What you'll learn

  • Code CSS3 and HTML5

  • Use CSS3 Selectors

  • Use six CSS3 Box Models

  • Create rounded corners, shadows, gradients, sprites, and transparency

  • Replace text with images without affecting accessibility

  • Style text with fonts, highlights, decorations, and shadows

  • Create flexible, fluid layouts

  • Position elements with absolute pixel precision

  • Stack elements in layers

  • Size, stretch, shrinkwrap, indent, align, and offset elements

  • Style tables with borders and alternating striped rows

  • Size table columns automatically

  • Integrate CSS3 and JavaScript without embedding JavaScript in HTML5

  • Create drop caps, callouts, quotes, and alerts

    • Who this book is for

    A software developer can use this book to learn CSS3 for the first time. A designer familiar with CSS3 can use this book to master CSS3 and HTML5. If you are completely new to coding or completely new to CSS3 and HTML5, you may want to read an introductory book on CSS3 and HTML5 first.

    Table of contents

    1. Title
    2. Dedication
    3. Contents at a Glance
    4. Contents
    5. About the Authors
    6. About the Technical Reviewer
    7. Acknowledgments
    8. Introduction
      1. Audience
      2. Innovations
      3. Conventions
      4. Using This Book
      5. How This Book Is Structured
      6. Downloading the Code
      7. Using the Code
      8. Contacting the Authors
    9. Chapter 1: Design Patterns: Making CSS Easy!
      1. Design Patterns—Structured Recipes
      2. Using Design Patterns
      3. Using Style Sheets
      4. CSS Syntax
      5. Using Cascade Order
      6. Simplifying the Cascade
      7. CSS and HTML Links
      8. Common CSS Properties
      9. CSS Properties and Values: Common
      10. CSS Properties and Values: Content
      11. CSS Properties and Values: Layout
      12. CSS Properties and Values: Specialized
      13. Selectors
      14. Media Queries
      15. Flexible Units of Measure
      16. Fixed Units of Measure
      17. Ratios Between Units of Measure at 96 dpi
      18. Typical font-size Values at 96 dpi
      19. Transitions, Animations, and 2D Transformations
      20. Troubleshooting CSS
      21. Normalized Style Sheet
    10. Chapter 2: HTML Design Patterns
      1. Chapter Outline
      2. HTML Structure
      3. HTML Structure
      4. XHTML
      5. DOCTYPE
      6. Header Elements
      7. Conditional Style Sheet
      8. Structural Block Elements
      9. Terminal Block Elements
      10. Multi-purpose Block Elements
      11. Inline Elements
      12. Class and ID Attributes
      13. HTML Whitespace
    11. Chapter 3: CSS Selectors and Inheritance
      1. Chapter Outline
      2. Type, Class, and ID Selectors
      3. Position and Group Selectors
      4. Attribute Selectors
      5. Pseudo-element Selectors
      6. Pseudo-class Selectors
      7. Subclass Selector
      8. Inheritance
      9. Visual Inheritance
    12. Chapter 4: Box Models
      1. Chapter Outline
      2. Display
      3. Box Model
      4. Inline Box
      5. Inline-Block Box
      6. Block Box
      7. Table Box
      8. Absolute Box
      9. Floated Box
    13. Chapter 5: Box Model Extents
      1. Chapter Outline
      2. Width
      3. Height
      4. Sized
      5. Shrinkwrapped
      6. Stretched
    14. Chapter 6: Box Model Properties
      1. Chapter Outline
      2. Margin
      3. Border
      4. Padding
      5. Background
      6. Overflow
      7. Visibility
      8. Page Break
    15. Chapter 7: Positioning Models
      1. Chapter Outline
      2. Positioning Models
      3. Positioned
      4. Closest Positioned Ancestor
      5. Stacking Context
      6. Atomic
      7. Static
      8. Absolute
      9. Fixed
      10. Relative
      11. Float and Clear
      12. Relative Float
    16. Chapter 8: Positioning: Indented, Offset, and Aligned
      1. Chapter Outline
      2. Indented
      3. Offset Static
      4. Offset or Indented Static Table
      5. Offset Float
      6. Offset Absolute and Offset Fixed
      7. Offset Relative
      8. Aligned Static Inline
      9. Aligned and Offset Static Block
      10. Aligned and Offset Static Table
      11. Aligned and Offset Absolute
      12. Aligned-center Absolute
      13. Aligned Outside
    17. Chapter 9: Positioning: Advanced
      1. Chapter Outline
      2. Left Aligned
      3. Left Offset
      4. Right Aligned
      5. Right Offset
      6. Center Aligned
      7. Center Offset
      8. Top Aligned
      9. Top Offset
      10. Bottom Aligned
      11. Bottom Offset
      12. Middle Aligned
      13. Middle Offset
    18. Chapter 10: Styling Text
      1. Chapter Outline
      2. Font
      3. Highlight
      4. Text Decoration
      5. Text Shadow
      6. Text Replacement with Image
      7. Text Replacement with Canvas and VML
      8. Font Embedding
      9. Invisible Text
      10. Screenreader-only
    19. Chapter 11: Spacing Content
      1. Spacing
      2. Blocked
      3. Nowrap
      4. Preserved
      5. Code
      6. Padded Content
      7. Inline Spacer
      8. Inline Decoration
      9. Line Break
      10. Inline Horizontal Rule
    20. Chapter 12: Aligning Content
      1. Text Indent
      2. Hanging Indent
      3. Horizontal-Aligned Content
      4. Vertical-Aligned Content
      5. Vertical-Offset Content
      6. Subscript and Superscript
      7. Nested Alignment
      8. Advanced Alignment Example
    21. Chapter 13: Blocks
      1. Chapter Outline
      2. Structural Meaning
      3. Visual Structure
      4. Section
      5. Lists
      6. Background Bulleted
      7. Inlined
      8. Collapsed Margins
      9. Run-In
      10. Horizontal Rule
      11. Block Spacer
      12. Block Space Remover
      13. Left Marginal
      14. Right Marginal
    22. Chapter 14: Images
      1. Chapter Outline
      2. Image
      3. Image Map
      4. Fade-Out
      5. Semi-transparent
      6. Replaced Text
      7. Content over Image
      8. Content over Background Image
      9. CSS Sprite
      10. CSS Sprite cont.
      11. Basic Shadowed Image
      12. Shadowed Image
      13. Shadowed Image cont.
      14. Shadowed Image cont.
      15. Rounded Corners
      16. Rounded Corners cont.
      17. Image Example
    23. Chapter 15: Tables
      1. Chapter Outline
      2. Table
      3. Row and Column Groups
      4. Table Selectors
      5. Separated Borders
      6. Collapsed Borders
      7. Styled Collapsed Borders
      8. Hidden and Removed Cells
      9. Removed and Hidden Rows and Columns
      10. Vertical-Aligned Data
      11. Striped Tables
      12. Tabled, Rowed, and Celled
      13. Table Layout
    24. Chapter 16: Table Column Layout
      1. Table Layout Models
      2. Using Column Layouts
      3. Chapter Outline
      4. Column Width
      5. Shrinkwrapped Columns
      6. Sized Columns
      7. Content-Proportioned Columns
      8. Size-Proportioned Columns
      9. Percentage-Proportioned Columns
      10. Inverse-Proportioned Columns
      11. Equal Content-Sized Columns
      12. Equal-Sized Columns
      13. Undersized Columns
      14. Flex Columns
      15. Mixed Column Layouts
    25. Chapter 17: Layouts
      1. Chapter Outline
      2. Fluid Layout Overview
      3. Outside-in Box
      4. Floating Section
      5. Float Divider
      6. Fluid Layout
      7. Opposing Floats
      8. Event Styling
      9. Rollup
      10. Tab Menu
      11. Tabs
      12. Flyout Menu
      13. Button
      14. Layout Links
      15. Multi-column Layout
      16. Template Layout
      17. Layout Example
    26. Chapter 18: Drop Caps
      1. Chapter Outline
      2. Aligned Drop Cap
      3. First-Letter Drop Cap
      4. Hanging Drop Cap
      5. Padded Graphical Drop Cap
      6. Floating Drop Cap
      7. Floating Graphical Drop Cap
      8. Marginal Drop Cap
      9. Marginal Graphical Drop Cap
    27. Chapter 19: Callouts and Quotes
      1. Chapter Outline
      2. Left Floating Callout
      3. Right Floating Callout
      4. Center Callout
      5. Left Marginal Callout
      6. Right Marginal Callout
      7. Block Quote
      8. Inline Block Quote
      9. Inline Quote
    28. Chapter 20: Alerts
      1. Chapter Outline
      2. JavaScript Alert
      3. Tooltip Alert
      4. Pop-Up Alert
      5. Pop-Up Alert
      6. Alert
      7. Inline Alert
      8. Hanging Alert
      9. Graphical Alert
      10. Run-In Alert
      11. Floating Alert
      12. Left Marginal Alert
      13. Right Marginal Alert
      14. Form Validation
    29. INDEX

    Product information

    • Title: Pro HTML5 and CSS3 Design Patterns
    • Author(s): Michael Bowers, Dionysios Synodinos, Victor Sumner
    • Release date: November 2011
    • Publisher(s): Apress
    • ISBN: 9781430237808