Smashing CSS: Professional Techniques for Modern Layout

Smashing CSS: Professional Techniques for Modern Layout

by Eric A. Meyer
Released November 2010
Publisher(s): Wiley
ISBN: 9780470684160

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

PROFESSIONAL TECHNIQUES FOR MODERN LAYOUT

Smashing CSS takes you well beyond the basics, covering not only the finer points of layout and effects, but introduces you to the future with HTML5 and CSS3. Very few in the industry can show you the ins and outs of CSS like Eric Meyer and inside Smashing CSS Eric provides techniques that are thorough, utterly useful, and universally applicable in the real world. From choosing the right tools, to CSS effects and CSS3 techniques with jQuery, Smashing CSS is the practical guide to building modern web layouts.

With Smashing CSS you will learn how to:

  • Throw elements offscreen/hide them

  • Create body/HTML backgrounds in XHTML

  • Usemore than 15 layout techniques including clearfix, two/three simple columns, faux columns, One True Layout, Holy Grail, em-based layout, fluid grids, sticky footers, and more

  • Use a variety of CSS effects including CSS popups, boxpunching, rounded corners, CSS sprites, Sliding Doors, Liquid Bleach, ragged floats, and more

  • Apply CSS table styling including using thead, tfoot, and tbody, row headers, column-oriented styling (classes); styling data tables with jQuery, tables to graphs, tables to maps; and more

  • Use CSS3 elements including rounded corners, multiple backgrounds, RGBA, using jQuery to do CSS3 selections and so much more.

Eric Meyer is an internationally recognized expert on the subjects of HTML, CSS, and Web standards, and has been working on the Web since 1993. Smashing CSS is for developers who already have some experience with CSS and JavaScript and are ready for more advanced techniques.

Smashing Magazine (smashingmagazine.com) is one of the world's most popular web design sites. True to the Smashing mission, the Smashing Magazine book series delivers useful and innovative information to Web designers and developers.

Table of contents

  1. Copyright
  2. PUBLISHER'S ACKNOWLEDGMENTS
  3. About the Author
  4. Acknowledgements
  5. Introduction
  6. I. FUNDAMENTALS
    1. 1. TOOLS
      1. 1.1. FIREBUG
      2. 1.2. WEB DEVELOPER TOOLBAR
      3. 1.3. INTERNET EXPLORER DEVELOPER TOOLBAR (OR TOOLS)
      4. 1.4. DRAGONFLY (FOR OPERA)
      5. 1.5. WEB INSPECTOR (SAFARI)
      6. 1.6. XRAY
      7. 1.7. SELECTORACLE
      8. 1.8. DIAGNOSTIC STYLE SHEET
      9. 1.9. REBOOT STYLES
      10. 1.10. IE9.JS
    2. 2. SELECTORS
      1. 2.1. PSEUDO WHAT?
      2. 2.2. TARGETS WITH STYLE
      3. 2.3. SPECIFICITY
      4. 2.4. IMPORTANCE
      5. 2.5. WHAT HAPPENS WHEN YOU OMIT SHORTHAND VALUE KEYWORDS
      6. 2.6. SELECTIVELY OVERRIDING SHORTHANDS
      7. 2.7. UNIVERSAL SELECTION
      8. 2.8. ID VS. CLASS
      9. 2.9. ID WITH CLASS
      10. 2.10. MULTICLASSING
      11. 2.11. SIMPLE ATTRIBUTE SELECTION
      12. 2.12. ATTRIBUTE SELECTION OF CLASSES
      13. 2.13. ID VS. ATTRIBUTE SELECTOR
      14. 2.14. SUBSTRING ATTRIBUTE SELECTION
      15. 2.15. MORE SUBSTRING ATTRIBUTE SELECTION
      16. 2.16. CHILD SELECTION
      17. 2.17. SIMULATED PARTIAL CHILD SELECTION
      18. 2.18. SIBLING SELECTION
      19. 2.19. GENERATING CONTENT
  7. II. ESSENTIALS
    1. 3. TIPS
      1. 3.1. VALIDATE!
      2. 3.2. ORDERING YOUR FONT VALUES
      3. 3.3. ROLLING IN LINE-HEIGHT
      4. 3.4. UNITLESS LINE-HEIGHT VALUES
      5. 3.5. AVOID STYLE-LESS BORDER VALUES
      6. 3.6. CONTROLLING BORDER APPEARANCE WITH COLOR
      7. 3.7. SUPPRESSING ELEMENT DISPLAY
      8. 3.8. SUPPRESSING ELEMENT VISIBILITY
      9. 3.9. THROWING ELEMENTS OFF-SCREEN
      10. 3.10. IMAGE REPLACEMENT
      11. 3.11. PRINT STYLES
      12. 3.12. DEVELOPING PRINT STYLES
      13. 3.13. BLOCK-LEVEL LINKS
      14. 3.14. MARGIN OR PADDING?
      15. 3.15. OUTDENTING LISTS
      16. 3.16. BULLETING LISTS
      17. 3.17. BACKGROUND BULLETS
      18. 3.18. GENERATING BULLETS
      19. 3.19. YOU HAVE MORE CONTAINERS THAN YOU THINK
      20. 3.20. DOCUMENT BACKGROUNDS
      21. 3.21. SERVER-SPECIFIC CSS
    2. 4. LAYOUTS
      1. 4.1. OUTLINES INSTEAD OF BORDERS
      2. 4.2. CENTERING BLOCK BOXES
      3. 4.3. FLOAT CONTAINMENT: OVERFLOW
      4. 4.4. FLOAT CONTAINMENT: FLOATING
      5. 4.5. CLEARFIXING
      6. 4.6. ADJACENT CLEARING
      7. 4.7. TWO SIMPLE COLUMNS
      8. 4.8. THREE SIMPLE COLUMNS
      9. 4.9. FAUX COLUMNS
      10. 4.10. LIQUID BLEACH
      11. 4.11. THE ONE TRUE LAYOUT
      12. 4.12. THE HOLY GRAIL
      13. 4.13. FLUID GRIDS
      14. 4.14. EM-BASED LAYOUT
      15. 4.15. NEGATIVE MARGINS IN FLOW
      16. 4.16. POSITIONING WITHIN A CONTEXT
      17. 4.17. PUSHING OUT OF THE CONTAINING BLOCK
      18. 4.18. FIXED HEADERS AND FOOTERS
    3. 5. EFFECTS
      1. 5.1. COMPLEXSPIRAL
      2. 5.2. CSS POP-UPS
      3. 5.3. CSS MENUS
      4. 5.4. BOXPUNCHING
      5. 5.5. PRE-CSS 3 ROUNDED CORNERS
      6. 5.6. CSS 3 ROUNDED CORNERS
      7. 5.7. CSS SPRITES
      8. 5.8. SLIDING DOORS
      9. 5.9. CLIPPED SLIDING DOORS
      10. 5.10. CSS PARALLAX
      11. 5.11. RAGGED FLOATS
      12. 5.12. BETTER RAGGED FLOATS
      13. 5.13. BOXING YOUR IMAGES
      14. 5.14. CONSTRAINED IMAGES
  8. III. CUTTING EDGE
    1. 6. TABLES
      1. 6.1. HEAD, BODY, FOOT
      2. 6.2. ROW HEADERS
      3. 6.3. COLUMN-ORIENTED STYLING
      4. 6.4. TABLE MAPPING
      5. 6.5. TABLE GRAPHS
    2. 7. THE (NEAR) FUTURE
      1. 7.1. STYLING HTML 5
      2. 7.2. CLASSING LIKE HTML 5
      3. 7.3. MEDIA QUERIES
      4. 7.4. STYLING OCCASIONAL CHILDREN
      5. 7.5. STYLING OCCASIONAL COLUMNS
      6. 7.6. RGB ALPHA COLOR
      7. 7.7. HSL AND HSL ALPHA COLOR
      8. 7.8. SHADOWY STYLES
      9. 7.9. MULTIPLE BACKGROUNDS
      10. 7.10. 2D TRANSFORMS

Product information

  • Title: Smashing CSS: Professional Techniques for Modern Layout
  • Author(s): Eric A. Meyer
  • Release date: November 2010
  • Publisher(s): Wiley
  • ISBN: 9780470684160