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