CSS3 Solutions : Essential Techniques for CSS3 Developers: Essential Techniques for Css3 Developers

CSS3 brings a mass of changes, additions, and improvements to CSS across a range of new modules. Web designers and developers now have a whole host of new techniques up their sleeves, from working with colors and fonts accurately, to using media queries to ensure correct styling across a multitude of devices. But all of these new technologies bring more tags to learn and more avenues for things to go wrong. CSS3 Solutions provides a collection of solutions to all of the most common CSS3 problems. Every solution contains sample code that is production-ready and can be applied to any project. What you’ll learn Real-world solutions for everyday CSS3 development, saving hours of frustration. Problems covered include: Developing across multiple devices Design patterns for user experience and mobile Working with the CSS box model Who this book is for Web developers and designers seeking practical advice on making CSS3 work. APress CSS3 Solutions 315 Contents at a Glance 3 Contents 318 About the Authors 328 About the Technical Reviewer 331 About the Cover Image Designer 332 Acknowledgments 333 Introduction 4 Who is this book for? 4 What you need 4 Conventions used in this book 5 Questions and Contacts 5 Chapter 1: CSS Basics 6 CSS3 Modules 7 Anatomy of a CSS3 declaration 9 Understanding the Box Model 12 Understanding CSS inheritance 13 Solution 1-1: Discovering CSS3 compatibilities across browsers 14 What’s involved 15 How to build it 15 Expert tips 18 Solution 1-2: Adding a CSS3 file with JavaScript 18 What’s involved 18 How to build it 20 Expert tips 21 Solutions 1-3: Declaring multiple backgrounds for your web page 21 What’s involved 22 How to build it 22 Expert tips 23 Solution 1-4: Controlling the image aspect ratio 24 What’s involved 24 How to build it 24 Expert tips 26 Solution 1-5: Resetting CSS3 default values 27 What’s involved 27 How to build it 27 Summary 28 Chapter 2: CSS Selectors 30 Differences compared to CSS2 selectors 30 Pseudo-classes 31 Solution 2-1: Highlighting selected text 32 What’s involved 32 How to build it 33 Expert tips 33 Solution 2-2: Enhancing the readability of tabular data 34 What’s involved 34 How to build it 34 Expert tips 38 Solution 2-3: Toggling form elements 39 What’s involved 39 How to build it 40 Expert Tips 42 Solution 2-4: Preventing content from being selectable 43 What’s involved 43 How to build it 43 Expert tips 44 Solution 2-5: Hiding empty elements within a page 45 What’s involved 45 How to build it 45 Expert tips 48 Solution 2-6: Using the sibling combinator 48 What’s involved 48 How to build it 49 Solution 2-7: Putting an icon image next to links 50 What’s involved 51 How to build it 51 Summary 53 Chapter 3: Fonts, Text, and Color 54 Solution 3-1: Using @font-face 54 What’s involved 54 Generate your own @font-face kit 55 Font formats 56 Browser support 57 How to build it 57 @font-face syntax 57 Making the font work 58 Multiple web fonts 58 Expert tips 59 Solution 3-2: Using fallback fonts 60 What’s involved 60 x-height value 60 What does font-size-adjust do? 61 Browser support 61 How to build it 61 An example 62 Solution 3-3: Using advanced text effects with text-shadow 64 What’s involved 64 Browser support 64 How to build it 64 Advanced effects: Letterpress typography 65 How to create a letterpress effect 66 More advanced effects 67 Expert tips 68 Solution 3-4: Forcing text to wrap 68 What’s involved 68 Allowed values 68 Browser support 69 How to build it 69 Without word-wrap 69 With word-wrap 69 Expert tips 70 Solution 3-5: Creating elegant text over fl ow 70 What’s involved 70 Syntax 71 Browser support 71 How to build it 71 Expert tip 73 Solution 3-6: Using color RGBa 73 What’s involved 74 Syntax 74 Browser support 74 How to build it 75 Expert tip 77 What’s involved 77 HSL model representation 77 HSL example 78 Browser support 79 How to build it 79 Expert tips 79 Solution 3-8: Optimizing text legibility with text-rendering 79 What’s involved 80 Kerning and ligatures 80 Syntax 80 Browser support 81 How to build it 81 Summary 82 Chapter 4: CSS Typography 83 Solution 4-1: Handling hyphenation of text 83 What’s involved 83 How to build it 85 Expert tips 86 Solution 4-2: Creating drop caps 86 What’s involved 86 How to build it 87 Expert tips 88 Solution 4-3: Creating hanging punctuation 88 What’s involved 88 How to build it 92 Expert tips 93 Solution 4-4: Creating a typographic hierarchy 94 What’s involved 94 How to build it 95 Expert tips 97 Solution 4-5: Creating multicolumn text blocks 97 What’s involved 98 How to build it 99 Expert tips 100 Summary 101 Chapter 5: Tables and Lists 102 Solution 5-1: Zebra-striping table rows 102 What’s involved 103 :nth-child syntax 103 Browser support 104 How to build it 104 Expert tip 105 Solution 5-2: Creating a styled pricing table 105 What’s involved 105 box-shadow 106 text-shadow 106 :nth-last-child 107 How to build it 107 The markup 107 Shadow effects 109 Traversing 110 Expert tip 110 Solution 5-3: Making tables responsive 110 What’s involved 111 Using clean markup 111 Identifying breakpoints 111 Implement media queries 111 Browser support 111 How to build it 111 Screen resolution breakpoint 113 Expert tip 114 Solution 5-4: Creating a practical table with rounded corners 114 What’s involved 115 The border-radius revolution 115 Browser support 115 How to build it 116 Expert tip 117 Solution 5-5: Creating a drop-down menu with lists 118 What’s involved 118 Why use ? 118 No images—CSS only 118 Browser support 119 How to build it 119 HTML markup 119 CSS style sheet 120 The drop-down effect 120 Expert tip 121 Solution 5-6: Using @counter-style for custom lists 122 What’s involved 122 @counter-style syntax 122 Symbols and additive-symbols 123 How to build it 123 Predefined style: circle bullet 123 Triangle bullet 124 Expert tips 124 Solution 5-7: Using a fl exible lists marker 124 What’s involved 125 The syntax 125 How to build it 125 Expert tips 126 Summary 126 Chapter 6: CSS Box Model 127 Solution 6-1: Setting background color and opacity 129 What’s involved 129 How to build it 131 Expert tips 132 Solution 6-2: Creating background gradients 132 What’s involved 132 How to build it 134 Expert tips 135 Solution 6-3: Setting background size 135 What’s involved 135 How to build it 136 Expert tips 137 Solution 6-4: Creating multiple backgrounds 138 What’s involved 138 How to build it 138 Expert tips 140 Solution 6-5: Creating border outlines 140 What’s involved 141 How to build it 141 Expert tips 142 Solution 6-6: Creating rounded corners 142 What’s involved 142 How to build it 143 Solution 6-7: Creating image borders 144 What’s involved 144 How to build it 147 Expert tips 147 Solution 6-8: Creating drop shadows 148 What’s involved 148 How to build it 149 Expert tips 150 Solution 6-9: Creating resizable boxes 150 What’s involved 150 How to build it 151 Expert tips 151 Summary 152 Chapter 7: CSS Positioning and Layouts 153 Solution 7-1: Changing the display property 156 What’s involved 156 How to build It 156 Expert tips 158 Solution 7-2: Using CSS positioning 158 What’s involved 158 How to build It 159 Expert tips 162 Solution 7-3: Floating elements with CSS 162 What’s involved 162 How to build It 162 Expert tips 167 Solution 7-4: Clearing fl oats 167 What’s involved 167 How to build It 167 Expert tips 171 Solution 7-5: Using a CSS reset 175 What’s involved 175 How to build It 176 Expert tips 177 Summary 177 Chapter 8: Multidevice Development 178 Solution 8-1: Defining different style sheets to target different devices with media queries 179 What’s involved 179 The screen media type: From desktop to mobile screens 180 The syntax of media queries 181 Browser support of media queries 184 How it works 185 Expert tips 186 Solution 8-2: Adapting a layout for different screen sizes with CSS3 186 What’s involved 187 Responsive design 187 The device size and the viewport 188 Some design and styles considerations 190 How it works 191 Expert tips 200 Solution 8-3: Handling layout orientation on mobile devices with CSS3 200 What’s involved 201 Syntax 201 device-width vs. orientation 201 How it works 203 Expert tips 209 Device pixel and CSS pixel 210 Solution 8-4: Defining style rules for high-density pixel screens 210 What’s involved 210 How it works 211 Expert tips 212 What to print 214 Font size 214 Solution 8-5: Styling a document for printing devices with CSS3 213 What’s involved 213 How does it work 215 Expert tips 217 Summary 217 Chapter 9: Transitions and Transformations 218 Solution 1: Applying simple 2D transformations on HTML elements with CSS3 218 What’s involved 219 The transform property 219 The transform-origin property 221 Browser support 222 How it works 223 Expert tips 226 Solution 9-2: Using matrix 2D transformations in CSS3 226 What’s involved 227 Matrices and the 2D coordinate system 227 Syntax 228 Browser support 229 How it works 230 Expert tips 231 Solution 9-3: Making elements move with CSS3 transitions 232 What’s involved 232 Transition properties 232 Syntax 234 Browser support 235 How it works 236 Expert tips 239 Solution 9-4: Going further with animations in CSS3 239 What’s involved 240 The keyframes rule 240 Binding the animation to an element 241 Multiple animations 242 Browser support 242 How it works 242 Expert tips 246 Solution 9-5: Applying 3D transformations in CSS3 246 What’s involved 246 The 3D transform functions 247 Perspective 247 Perspective origin 248 The transform-style property 248 The backface-visibility property 249 3D transforms and animation 249 Browser support 249 How it works 250 Expert tips 252 Summary 252 Chapter 10: Multimedia and Accessibility 253 Solution10-1: Building a custom video player 253 What’s involved 254 Browser support 254 How it works 254 jQuery stuff 255 Look and feel 255 Thanks to basic CSS knowledge and some new properties introduced with CSS3, you can finally personalize a video player to your liking. 258 Expert tip 258 Solution 10-2: A CSS3 music player 258 What’s involved 258 The element 258 How it works 260 Solution 10-3: Improve the form accessibility with CSS3 validation 261 What’s involved 261 We’ll make use of both HTML5 type attributes for input fields and CSS3 pseudo-classes. The following sections provide an overview. 261 CSS3 pseudo-classes for the user interface 261 New type of inputs and attributes with HTML5 262 Browser support 262 How it works 262 Validation input message 262 Finding the pattern 263 Adding help 263 Solution 10-4: An unobtrusive skip navigation link 264 What’s involved 265 How it works 265 Summary 266 Chapter 11 UX Patterns 267 Rules of thumb 267 Solution 11-1: Ensuring visibility of system status 268 What’s involved 268 How to build it 269 Expert tips 271 Solution 11-2: Matching the system to the real world 271 What’s involved 272 How to build it 273 Expert tips 274 Solution 11-3: Building in user control and freedom 274 What’s involved 275 How to build it 276 Expert tips 277 Solution 11-4: Establishing error prevention 277 What’s involved 278 How to build it 279 Expert tips 280 Solution 11-5: Promoting recognition over recall 280 What’s involved 281 How to build it 282 Expert tips 283 Solution 11-6: Designing for efficiency of use 284 What’s involved 284 How to build it 286 Expert tips 287 Solution 11-7: Helping users recognize, diagnose, and recover from errors 287 What’s involved 288 How to build it 289 Expert tips 290 Solution 11-8: Help and documentation 290 What’s involved 290 How to build it 291 Expert tips 293 Summary 293 Chapter 12: Mobile UX Patterns 294 Considering mobile 294 Solution 12-1: Scope. Cut. Repeat. 295 What’s involved 295 How to build it 295 Expert tips 296 Solution 12-2: Design for context 296 What’s involved 297 How to build it 297 Expert tips 298 Solution 12-3: Craft the right approach 299 What’s involved 299 How to build it 300 Expert tips 301 Solution 12-4: Respond to the target view 302 What’s involved 302 How to build it 303 Expert tips 304 Solution 12-5: Go mobile first 304 What’s involved 304 How to build it 305 Expert tips 306 Summary 306 Index 307