CSS3 Pushing the Limits

Push CSS3 and your design skills to the limit—and beyond!

Representing an evolutionary leap forward for CSS, CSS3 is chock-full of new capabilities that dramatically expand the boundaries of what a styling language can do. But many of those new features remain undocumented, making it difficult to learn what they are and how to use them to create the sophisticated sites and web apps clients demand and users have grown to expect.

Until now.

This book introduces you to all of CSS3’s new and advanced features, and, with the help of dozens of real-world examples and live demos, it shows how to use those features to design dazzling, fully-responsive sites and web apps.

 Among other things, you’ll learn how to:

•         Use advanced selectors and an array of powerful new text tools

•         Create adaptable background images, decorative borders, and complex patterns

•         Create amazing effects with 2D and 3D transforms, transitions, and keyframe-based animations

•         Take advantage of new layout tools to solve an array of advanced layout challenges—fast

•         Vastly simplify responsive site design using media queries and new layout modules

•         Create abstract and scalable shapes and icons with pseudo-elements 

•         Leverage preprocessors and use CSS like a programming language within a stylesheet context

 Don’t pass up this opportunity to go beyond the basics and learn what CSS3 can really do!

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