Print this page Share

CSS3 Pushing the Limits

ISBN: 978-1-118-65261-9
384 pages
July 2013
CSS3 Pushing the Limits (1118652614) cover image


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!

See More

Table of Contents

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

See More

Related Titles

Back to Top