CSS3 Pushing the Limits

Introduction 1 Part I New Toys 7 Chapter 1 Advanced Selectors 9 Child and Sibling Selectors 9 Child Combinator 9 Adjacent Sibling Combinator 10 General Sibling Combinator 10 Attribute Selectors 11 Selecting Based on the Existence of an HTML Attribute 11 Selecting Based on the Exact Value of an HTML Attribute 11 Selecting Based on the Partial Contents of an HTML Attribute Value 12 Selecting Based on the Beginning of an HTML Attribute Value 12 Selecting Based on the End of an HTML Attribute Value 13 Selecting Based on Space-Separated HTML Attribute Values 13 Pseudo-Classes 13 Firsts and Lasts 14 Nth Child Selectors 15 Taking Nth Child to the Next Level with Expressions 16 Using Keywords with Nth Child 17 Using Negative Numbers with Nth Child 17 The Best of the Rest 19 Bringing It All Together 20 Summary 23 Further Reading 24 Chapter 2 New Tools for Text 25 Perfecting Your Type 25 Ligatures 25 Kerning 27 Borrowing from SVG 28 Maintaining Legibility with Aspect Values 30 More Control with More New Toys 33 Font Stretch 33 Synthetic Font Styling 33 By the Numbers 34 Hyphenation 35 Writing Modes 37 The Direction Property 38 The Writing Mode Property 38 The Text Orientation Property 38 SVG to the Rescue! 38 Looking Good Is Half the Battle 39 Text Decoration 39 Masking Background Images Over Text 40 Text Shadow 42 Creating 3D Text 42 Creating Outer Glow 44 Summary 45 Further Reading 46 Chapter 3 New Tools for Backgrounds and Borders 47 More Control with CSS3 Backgrounds 47 Background Clip and Background Origin 47 Background Size 50 Understanding the Background Shorthand 52 Handling Box Breaks 52 Into the Future with the Image Function 53 Multiple Backgrounds 55 The Syntax for Multiple Backgrounds 55 Layered Backgrounds 56 Animating Multiple Backgrounds 57 New Tools for Borders 58 Border Image 58 Into the Future with Border Corner Shape 62 Gradients 63 Linear Gradients 63 The Linear Gradient Syntax 63 Browser Support 65 Linear Gradients in Action 65 Radial Gradients 66 The Radial Gradients Syntax 66 Radial Gradients in Action 68 Browser Support 69 Pushing the Limits with Gradient Patterns 70 Summary 73 Further Reading 74 Chapter 4 Into the Browser with CSS3 Filters and Blending Modes 75 CSS3 Filters 75 How Do CSS Filters Work? 76 Grayscale 76 Brightness 77 Contrast 77 Saturate 78 Sepia 78 Hue-Rotate 79 Invert 79 Opacity 80 Drop Shadow 80 Blur 81 Combining Filters 82 Blending Modes 83 What Are Blending Modes? 84 The Blending Modes Syntax 85 Summary 85 Further Reading 86 Part II Transforms, Transitions, and Animation 87 Chapter 5 Introducing CSS3 2D Transforms 89 The Transform Property 89 Translate 90 Skew 93 Rotate 94 Scale 96 Transform Origin 99 Combining Transforms 100 Browser Support 102 Summary 102 Further Reading 102 Chapter 6 Bringing 2D Transforms to Life with Transitions 103 Introducing CSS Transitions 103 Controlling Your Transitions 104 Understanding the Shorthand Syntax 105 Understanding the Transition Property 106 Applying Separate On and Off Transitions 107 Understanding the Timing Function 108 The Bézier Curve 109 Ease 111 Linear 112 Ease-In 113 Ease-Out 113 Ease-In-Out 114 Stepping Functions 115 Browser Support for Transitions 117 Transitions in Action 117 Combining Transitions and 2D Transforms 120 Transitioning Rotate 120 Transitioning Translate 123 Transitioning Scale 127 Transitioning Skew 128 Creating a Scattered Image Gallery 129 Summary 133 Further Reading 134 Chapter 7 A New Dimension with 3D Transforms 135 What Are 3D Transforms? 135 It's All About Perspective 136 The Perspective Property 137 Perspective Origin 141 Maintaining Perspective 142 Backface Visibility 145 Moving on to More Transform Properties 148 Rotating in a 3D Environment 149 Translating in a 3D Environment 151 Scaling in a 3D Environment 153 Creating a Cube Using 3D Transforms 154 Animating the Cube with Transitions 157 Examining Browser Support for 3D Transforms 159 Summary 160 Further Reading 160 Chapter 8 Getting Animated 161 Introducing CSS3 Animation 161 Defining Keyframes 161 Applying the Animation 163 Further Control 163 Looking at CSS3 Animations in Action 166 Adding Progressive Enhancement with Subtle Animation 170 Fade In Effects 171 Attention Seekers 173 Shake 173 Wobble 174 Combining Animations 175 Forming the Structure 176 Creating an Animated Slide Show 177 Creating a Swinging Animation 178 Introducing Content with Subtle Animation 180 Seeking Attention with Loud Animation 182 Examining Browser Support for CSS Animation 182 Summary 183 Further Reading 183 Part III Getting to Grips with New Layout Tools 185 Chapter 9 Creating a Multicolumn Layout 187 The Evolution of Layout Tools 187 What's New in Layout Solutions? 188 Introducing Multi-column Layout 189 New Multicolumn Properties 189 Defining Your Columns 189 Handling Column Breaks 198 Limitations 201 Creating a Multicolumn Layout 202 Examining Browser Support for Multi-column Layout 206 Summary 207 Further Reading 208 Chapter 10 Flexible Box Layout 209 What Is Flexbox? 209 New Flexbox Properties 210 Establishing the Flex Formatting Context 210 Examining Direction, Flow, and Visual Ordering 212 Controlling Alignment 217 Defining Flex Factors 223 Creating a Flexible Box Layout 225 Examining Browser Support for Flexbox 230 Summary 231 Further Reading 231 Chapter 11 Grid Layout, Regions, and Exclusions 233 Introducing CSS Grid Layout 233 What Is Grid Layout? 234 Creating a Grid Element 234 Defining the Grid 235 Positioning Elements into the Grid 237 Making Your Grid Flexible and Adaptable 238 Introducing CSS Regions 241 What Are CSS Regions? 241 How Do Regions Work? 242 Introducing CSS Exclusions 243 What Are CSS Exclusions? 244 How Do Exclusions Work? 244 Playing with Shapes 247 A Caveat on Exclusions and Shapes 249 Summary 249 Further Reading 250 Chapter 12 Going Responsive with CSS3 Media Queries 251 What Is Responsive Web Design? 251 Using Media Queries to Design for Device Differences 252 Understanding Media Types and Media Features 253 Applying the Mobile-First Approach 253 Using the Viewport Meta Tag 256 Making a Multicolumn Layout Responsive 256 Making a Flexbox Layout Responsive 261 A Word on CSS Grid Layout 268 The Here and Now of RWD 269 Summary 269 Further Reading 270 Part IV Pushing the Limits 271 Chapter 13 Getting Creative with Pseudo-elements 273 Distinguishing Pseudo-elements and Pseudo-classes 273 What Is a Pseudo-class? 273 What Is a Pseudo-element? 274 Syntactical Differences 274 Exploring the Current Range of Pseudo-elements 275 Enhancing Your Typography with Pseudo-elements 275 Drawing Users into Your Copy 276 Getting Creative with Type-based Pseudo-elements 278 Using Pseudo-elements to Generate Content 282 Pushing Pseudo-elements to the Limit 285 A Contemporary Clearfix 287 Creating Scalable Icons and Shapes 288 Creating a Speech Bubble 288 Creating an OK Icon 289 Creating a Print Icon 290 Creating a Save Icon 291 Pushing the Limits Even Further and Knowing When to Stop 293 Summary 293 Further Reading 294 Chapter 14 Using Preprocessors to Push CSS3 to the Limit 295 What Is a CSS Preprocessor? 295 What Can CSS Preprocessors Do for You? 295 Choosing the Right Preprocessor for You 296 Declaring Variables 297 Doing Functions and Simple Math 298 Using Mixins 299 Selector Inheritance 300 Nested Selectors 301 Getting to Grips with the Dark Side of Preprocessors 302 Step 1: Installing Ruby 303 Step 2: Installing Sass 304 Step 3: Creating Your First Sass File 304 Step 4: Compiling Your Sass Code 305 Helpful Tools 306 Making CSS3 More Efficient with Mixins 307 Creating Proportional Layouts with Simple Math 309 Using Functions to Form a Dynamic Color Palette 310 A Word of Caution on Preprocessors 311 Summary 311 Further Reading 311 Chapter 15 Creating Practical Solutions Using Only CSS3 313 Creating Tabbed Content Using Only CSS3 313 The Markup 314 Applying Basic Styling to the Panels 316 Styling the Tabs 317 Making the Tabs Functional 318 Applying the Finishing Touches 320 Creating a Lightbox Feature Using Only CSS3 321 Laying the Foundations for the Markup 322 Styling the Thumbnail Gallery 324 Adding the Lightbox Markup 326 Making the Lightbox Functional 327 Applying the Polish to the Final Design 330 Creating a 3D Image Carousel Using Only CSS3 334 Marking Up the Carousel 334 Establishing a 3D Formatting Context 335 Positioning the Images in a 3D Environment 335 Making the Carousel Functional 339 Applying the Finishing Touches 340 Summary 342 Further Reading 343 Chapter 16 The Future of CSS 345 CSS Variables 346 CSS Selectors: Level 4 348 Browser Support Using CSS Conditional Rules 352 Pseudo-elements: Level 4 353 Have Your Say 354 Summary 354 Further Reading 355 Index 357