The Book of CSS3 by Gasston, Peter -- Read -- Imperial Library of Trantor

Index

The Book of CSS3

Foreword Preface Introduction

The Scope of This Book A Quick Note About Browsers and Platforms The Appendices and Further Resources

1. Introducing CSS3

What CSS3 Is and How It Came to Be

A Brief History of CSS3 CSS3 Is Modular Module Status and the Recommendation Process CSS3 Is Not HTML5

Let’s Get Started: Introducing the Syntax

Browser-Specific Prefixes Future-Proofing Experimental CSS

Getting Started

2. Media Queries

The Advantages of Media Queries Syntax Media Features

Width and Height Device Width and Height Using Media Queries in the Real World Orientation Aspect Ratio Pixel Ratio Multiple Media Features Mozilla-Specific Media Features

Summary Media Queries: Browser Support

3. Selectors

Attribute Selectors New Attribute Selectors in CSS3

Beginning Substring Attribute Value Selector Ending Substring Attribute Value Selector Arbitrary Substring Attribute Value Selector Multiple Attribute Selectors

The General Sibling Combinator Summary Selectors: Browser Support

4. Pseudo-classes and Pseudo-elements

Structural Pseudo-classes

The nth-* Pseudo-classes

nth-child and nth-of-type nth-last-child and nth-last-of-type

first-of-type, last-child, and last-of-type only-child and only-of-type

Other Pseudo-classes

target empty root not UI Element States

Pseudo-elements

The selection pseudo-element

Summary DOM and Attribute Selectors: Browser Support

5. Web Fonts

The @font-face Rule

Defining Different Faces True vs. Artificial Font Faces

A “Bulletproof” @font-face Syntax

Using Local Fonts Font Formats The Final “Bulletproof” Syntax The Fontspring Bulletproof Syntax

Licensing Fonts for Web Use A Real-World Web Fonts Example More Font Properties

font-size-adjust font-stretch

OpenType Features Summary Web Fonts: Browser Support

6. Text Effects and Typographic Styles

Understanding Axes and Coordinates Applying Dimensional Effects: text-shadow

Multiple Shadows Letterpress Effect

Adding Definition to Text: text-outline and text-stroke More Text Properties

Restricting Overflow Resizing Elements Aligning Text Wrapping Text

word-wrap text-wrap

Setting Text Rendering Options Applying Punctuation Properties

Summary Text Effects: Browser Support

7. Multiple Columns

Column Layout Methods

Prescriptive Columns: column-count Dynamic Columns: column-width A Note on Readability Different Distribution Methods in Firefox and WebKit Combining column-count and column-width

Column Gaps and Rules Containing Elements within Columns

Elements Spanning Multiple Columns Elements Breaking over Multiple Columns

Summary Multiple Columns: Browser Support

8. Background Images and Other Decorative Properties

Background Images

Multiple Background Images Background Size Background Clip and Origin background-repeat Background Image Clipping

Image Masks Summary Background Images: Browser Support

9. Border and Box Effects

Giving Your Borders Rounded Corners

border-radius Shorthand Differences in Implementation Across Browsers

Using Images for Borders Multicolored Borders Adding Drop Shadows Summary Border and Box Effects: Browser Support

10. Color and Opacity

Setting Transparency with the opacity Property New and Extended Color Values

The Alpha Channel

RGBA and Graceful Degradation Border Overlap Issue in WebKit

Hue, Saturation, Lightness HSLA The Color Variable: currentColor

Matching the Operating System’s Appearance Summary Color and Opacity: Browser Support

11. Gradients

Linear Gradients

Linear Gradients in Firefox Linear Gradients in WebKit Using Linear Gradients Adding Extra color-stop Values

Radial Gradients

Radial Gradients in Firefox Radial Gradients in WebKit Using Radial Gradients Multiple color-stop Values The WebKit Advantage

Multiple Gradients Repeating Gradients in Firefox

Repeating Linear Gradients Repeating Radial Gradients

Summary Gradients: Browser Support

12. 2D Transformations

The transform Property rotate

Position in Document Flow transform-origin

translate skew scale Multiple Transformations Transforming Elements with Matrices Reflections with WebKit Summary 2D Transformations: Browser Support

13. Transitions and Animations

Transitions

Property Duration Timing Function

Timing Function Keywords The Cubic Bézier Curve

Delay Shorthand The Complete Transition Example Multiple Transitions Triggers

More Complex Animations

Key Frames Animation Properties

Name Duration Timing Function Delay Iteration Count Direction Shorthand Play State

The Complete Animations Example Multiple Animations

Summary Transitions and Animations: Browser Support

14. 3D Transformations

3D Elements in CSS Transform Style The Transformation Functions

Rotation Around an Axis Translation Along the Axis Scaling The Transformation Matrix Perspective

The perspective and perspective-origin Properties The Transformation Origin Showing or Hiding the Backface Summary 3D Transformations: Browser Support

15. Flexible Box Layout

Triggering the Flexible Box Layout

The box Value in Firefox Inline Boxes

Making the Boxes Flexible

Unequal Ratios Zero Values and Firefox Layouts

Grouping Flexible Boxes Changing Orientation Changing the Order of Flexible Boxes

Reversing the Order Further Control over Ordering

Alignment Same-Axis Alignment Multiple Rows or Columns Cross-Browser Flex Box with JavaScript Stop the Presses: New Syntax Summary Flexible Box Layout: Browser Support

16. Template Layout

Setting Up the JavaScript Using position and display to Create Rows Multiple Rows Slots and the ::slot() Pseudo-element Creating Empty Slots Setting Height and Width on Rows and Columns

Width Keyword Values Setting Both Row Height and Column Width

Default Content: The @ Sign Summary Template Layout: Browser Support

17. The Future of CSS

Mathematical Operations

Calculation Functions Cycle

The Grid Positioning Module

Implicit and Explicit Grids The Grid Unit (gr) Extended Floats

Extending the Possibilities of Images

Image Fallback Image Slices Image Sprites

Grouping Selectors Constants and Variables WebKit CSS Extensions

CSS Variables Extending Variables Using Mixins CSS Modules Nested Rules

Haptic Feedback Summary Future CSS: Browser Support

A. CSS3 Support in Current Major Browsers

Media Queries (Chapter 2) Selectors (Chapter 3) Pseudo-classes and Pseudo-elements (Chapter 4) Web Fonts (Chapter 5) Text Effects and Typographic Styles (Chapter 6) Multiple Columns (Chapter 7) Background Images and Other Decorative Properties (Chapter 8) Border and Box Effects (Chapter 9) Color and Opacity (Chapter 10) Gradients (Chapter 11) 2D Transformations (Chapter 12) Transitions and Animations (Chapter 13) 3D Transformations (Chapter 14) Flexible Box Layout (Chapter 15) Template Layout (Chapter 16) The Future of CSS (Chapter 17)

B. Online Resources

CSS Modules Browsers

WebKit Firefox Opera Internet Explorer

Browser Support

When Can I Use . . . Quirks Mode Find Me By IP

Feature Detection and Simulation

Perfection Kills Modernizr CSS3 Pie

Code-Generation Tools

CSS3, Please! CSS3 Generator CSS3 Gradient Generator Type Folly

Web Fonts

Typekit Fontdeck Fonts.com Web Fonts Google Font API Web FontFonts Font Squirrel Fontspring

Other Resources

CSS3.info CSS3 Watch CSS3 Cheat Sheet

C. About the Technical Reviewer Index About the Author

← Prev
Back
Next →

← Prev
Back
Next →