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 books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

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.

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