Stephen Greig
CSS3 Pushing the Limits (eBook, ePUB)
Schade – dieser Artikel ist leider ausverkauft. Sobald wir wissen, ob und wann der Artikel wieder verfügbar ist, informieren wir Sie an dieser Stelle.
Stephen Greig
CSS3 Pushing the Limits (eBook, ePUB)
- Format: ePub
- Merkliste
- Auf die Merkliste
- Bewerten Bewerten
- Teilen
- Produkt teilen
- Produkterinnerung
- Produkterinnerung
Bitte loggen Sie sich zunächst in Ihr Kundenkonto ein oder registrieren Sie sich bei
bücher.de, um das eBook-Abo tolino select nutzen zu können.
Hier können Sie sich einloggen
Hier können Sie sich einloggen
Sie sind bereits eingeloggt. Klicken Sie auf 2. tolino select Abo, um fortzufahren.
Bitte loggen Sie sich zunächst in Ihr Kundenkonto ein oder registrieren Sie sich bei bücher.de, um das eBook-Abo tolino select nutzen zu können.
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…mehr
- Geräte: eReader
- eBook Hilfe
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!
Produktdetails
- Produktdetails
- Verlag: John Wiley & Sons
- Seitenzahl: 384
- Erscheinungstermin: 16. Juli 2013
- Englisch
- ISBN-13: 9781118652619
- Artikelnr.: 39157004
- Verlag: John Wiley & Sons
- Seitenzahl: 384
- Erscheinungstermin: 16. Juli 2013
- Englisch
- ISBN-13: 9781118652619
- Artikelnr.: 39157004
Stephen Greig is the author of CSS3 Pushing the Limits, published by Wiley.
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
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
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
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