The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

xvi Contents in Detail

• Chapter 1: Introducing CSS3 Introduction .xix


• Chapter 2: Media Queries


• Chapter 3: Selectors


• Chapter 4: Pseudo-classes and Pseudo-elements


• Chapter 5: Web Fonts


• Chapter 6: Text Effects and Typographic Styles


• Chapter 7: Multiple Columns


• Chapter 8: Background Images


• Chapter 9: Border and Box Effects


• Chapter 10: Color and Opacity


• Chapter 11: Gradients


• Chapter 12: 2D Transformations


• Chapter 13: 3D Transformations


• Chapter 14: Transitions and Animations


• Chapter 15: Flexible Box Layout


• Chapter 16: Values and Sizing


• Chapter 17: Grid Layout


• Chapter 18: Blend Modes, Filter Effects, and Masking


• Chapter 19: The Future of CSS


• Appendix A: CSS3 Support in Current Major Browsers


• Appendix B: Online Resources


• Index


• Introduction to the Second Edition .xxi


• inTroduCing CSS3


• What CSS3 Is and How It Came to Be


• A Brief History of CSS3


• CSS3 Is Modular


• There Is No CSS3


• Module Status and the Recommendation Process


• Introducing the Syntax


• Vendor Prefixes


• Let’s Get Started


• 
  


• Media QuerieS


• The Advantages of Media Queries


• Syntax


• Media Features


• Width and Height


• Pixel Ratio


• Device Width and Height


• Orientation


• Aspect Ratio


• Multiple Media Features


• Mobile-First Web Development


• Summary


• Media Queries: Browser Support


• 
  


• 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 x Contents in Detail


• Summary


• Selectors: Browser Support


• 
  


• PSeudo-ClaSSeS and PSeudo-eleMenTS


• Structural Pseudo-classes


• The :nth-* Pseudo-classes


• :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


• Constraint Validation Pseudo-classes


• Pseudo-elements


• The ::selection Pseudo-element


• Summary


• DOM and Attribute Selectors: Browser Support


• 
  


• 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


• Licensing Fonts for Web Use


• A Real-World Web Fonts Example


• Controlling Font Loading


• More Font Properties


• font-size-adjust


• font-stretch


• OpenType Features


• Enabling Font Features


• Font Feature Properties


• Summary


• Web Fonts: Browser Support


• 
  


• TexT effeCTS and TyPograPhiC STyleS


• Understanding Axes and Coordinates


• Applying Dimensional Effects: text-shadow


• Multiple Shadows


• Restricting Overflow


• Aligning Text Contents in Detail xi


• Controlling Line Wrapping


• Breaking Words


• Hyphenating Words


• Resizing Elements


• Summary


• Text Effects and Typographic Styles: Browser Support


• 
  


• MulTiPle ColuMnS


• Column Layout Methods


• Prescriptive Columns: column-count


• Dynamic Columns: column-width


• Varying Distribution of Content Across Columns


• Combining column-count and column-width


• Column Gaps and Rules


• Containing Elements Within Columns


• Elements Spanning Multiple Columns


• Summary


• Multiple Columns: Browser Support


• 
  


• BaCkground iMageS


• Updates to Existing Background Properties


• background-position


• background-attachment


• background-repeat


• Multiple Background Images


• Dynamically Scaled Background Images


• Background Clip and Origin


• Updated Background Shortcut


• Summary


• Background Images: Browser Support


• 
  


• Border and Box effeCTS


• Giving Your Borders Rounded Corners


• The border-radius Shorthand


• Using Percentage Values


• Using Images for Borders


• border-image-source


• border-image-slice


• border-image-width


• border-image-outset


• border-image-repeat


• The border-image Shorthand Property


• Browser Support


• Drop Shadows


• Inset Shadows


• Summary xii Contents in Detail


• Border and Box Effects: Browser Support


• 
  


• Color and oPaCiTy


• The opacity Property


• New and Extended Color Values


• The Alpha Channel


• Hue, Saturation, Lightness


• HSLA


• The Color Variable: currentColor


• Summary


• Color and Opacity: Browser Support


• 
  


• gradienTS


• Linear Gradients


• Setting Gradient Direction


• Adding Extra Color-Stop Values


• Repeating Linear Gradients


• Radial Gradients


• Using Radial Gradients


• Using Multiple Color-Stop Values


• Repeating Radial Gradients


• Multiple Gradients


• Summary


• Gradients: Browser Support


• 
  


• 2d TranSforMaTionS


• The transform Property


• rotate


• translate


• scale


• skew


• An Important Note About Transformation Functions


• Transforming Elements with Matrices


• Summary


• 2D Transformations: Browser Support


• 
  


• 3d TranSforMaTionS


• 3D Elements in CSS


• The Transformation Functions


• Rotation Around an Axis


• Perspective


• Translation Along the Axis


• Scaling Contents in Detail xiii


• The Transformation Matrix


• The perspective and perspective-origin Properties


• The Transformation Origin


• The transform-style Property


• Showing or Hiding the Backface


• Summary


• 3D Transformations: Browser Support


• 
  


• TranSiTionS and aniMaTionS


• Transitions


• transition-property


• transition-duration


• transition-timing-function


• transition-delay


• The transition Shorthand Property


• The Complete Transition Example


• Multiple Transitions


• Animations


• Keyframes


• animation-name


• animation-duration


• animation-timing-function


• animation-delay


• animation-iteration-count


• animation-direction


• animation-fill-mode


• animation-play-state


• The animation Shorthand


• The Complete Animations Example


• Multiple Animations


• Summary


• Transitions and Animations: Browser Support


• 
  


• flexiBle Box layouT


• Declaring the Flexible Box Model


• Flexbox Alignment


• Reversing the Content Order


• Fully Reordering Content


• Adding Flexibility


• The flex-grow Property


• The flex-shrink Property


• The flex-basis Property


• The flex Shorthand


• Alignment Inside the Container


• Horizontal Alignment with justify-content


• Vertical Alignment with align-items


• Cross-Axis Alignment with align-self xiv Contents in Detail


• Wrap and Flow


• The flex-flow Shorthand


• Aligning Multiple Lines with align-content


• Browser Support and Legacy Syntaxes


• Summary


• Flexbox: Browser Support


• 
  


• ValueS and Sizing


• Relative Length Units


• Root-Relative Units


• Viewport-Relative Units


• Calculated Values


• Sizing Elements


• Box Sizing


• Intrinsic and Extrinsic Sizing


• Summary


• Values and Sizing: Browser Support


• 
  


• grid layouT


• Grid Terminology


• Declaring and Defining the Grid


• Creating Explicit Grids by Setting Track Size


• Placing Items in an Explicit Grid


• Grid Placement Shorthand Properties


• Repeating Grid Lines


• Named Grid Areas


• The grid-template Shorthand


• Implicit Grids


• Grid Items Without a Declared Place


• Combining Explicit and Implicit Grids


• The grid Shorthand


• Grid Item Stacking Order


• Internet Explorer’s Grid Layout Syntax


• Summary


• Grid Layout: Browser Support


• 
  


• Blend ModeS, filTer effeCTS, and MaSking


• Blend Modes


• background-blend-mode


• mix-blend-mode


• isolation


• Filter Effects


• blur()


• brightness() and contrast()


• grayscale(), sepia(), and saturate() Contents in Detail xv


• hue-rotate()


• opacity()


• drop-shadow()


• Multiple Filter Effect Functions


• Filters in SVG


• Masking


• Clipping


• Image Masking


• Border Masking


• Masking in SVG


• Combining Filter Effects and Masking


• Summary


• Blend Modes, Filter Effects, and Masking: Browser Support


• 
  


• The fuTure of CSS


• Shapes


• Exclusions


• Regions


• Variables


• Feature Queries


• Device Adaptation


• Sticky Positioning


• And Much, Much More


• Conclusion


• Future CSS: Browser Support


• CSS3 SuPPorT in CurrenT Major BroWSerS a


• Media Queries (Chapter 2)


• Selectors (Chapter 3)


• DOM and Attribute Selectors (Chapter 4)


• Web Fonts (Chapter 5)


• Text Effects and Typographic Styles (Chapter 6)


• Multiple Columns (Chapter 7)


• Background Images (Chapter 8)


• Border and Box Effects (Chapter 9)


• Color and Opacity (Chapter 10)


• Gradients (Chapter 11)


• 2D Transformations (Chapter 12)


• 3D Transformations (Chapter 13)


• Transitions and Animations (Chapter 14)


• Flexbox (Chapter 15)


• Values and Sizing (Chapter 16)


• Grid Layout (Chapter 17)


• Blend Modes, Filter Effects, and Masking (Chapter 18)


• Future CSS (Chapter 19)


• online reSourCeS B


• General CSS Resources


• Chapter 2: Media Queries


• Chapters 3 and 4: Selectors, and Pseudo-classes and Pseudo-elements


• Chapters 5 and 6: Web Fonts, and Text Effects and Typographic Styles


• Chapter 7: Multiple Columns


• Chapters 8 and 9: Background Images, and Border and Box Effects


• Chapter 10: Color and Opacity


• Chapter 11: Gradients


• Chapters 12 and 13: 2D and 3D Transformations


• Chapter 14: Transitions and Animations


• Chapter 15: Flexible Box Layout


• Chapter 16: Values and Sizing


• Chapter 17: Grid Layout


• Chapter 18: Blend Modes, Filter Effects, and Masking


• Chapter 19: The Future of CSS


• index