The Book of CSS3: A Developer's Guide to the Future of Web Design

Description

CSS3 is the technology behind most of the eye-catching visuals on the Web today, but the official documentation can be dry and hard to follow. Luckily, The Book of CSS3 distills the heady technical language of the CSS3 specification into plain English, so you can get started on your next project right away. With real-world examples and a focus on results, The Book of CSS3 shows you how to transform ordinary text into stunning, richly detailed web pages fit for any browser. You'll master the latest cutting-edge CSS features, like multi-column layouts, borders and box effects, and new color and opacity settings. You'll also learn how to: Stylize text with fully customizable outlines, drop shadows, and other effects Create, position, and resize unlimited background images on the fly Spice up static web pages with event-driven transitions and animations Apply 2D and 3D transformations to text and images Use linear and radial gradients to create smooth color transitions Tailor a website's appearance to smartphones and other devices From the simplest blog layout to the most feature-rich web portal, The Book of CSS3 puts the whole wide world of web design at your fingertips. The future of web design is now—what will you create with it? 5 Reasons to Start Using CSS3 from the Author Device-responsive pages The big growth area of web browsing is on smartphone and tablet devices such as Android, iPhone and iPad. New media features and page layout modules in CSS3 let you make pages which respond to the capabilities of the device that's viewing them, automatically optimizing your content for multiple screen sizes and giving your visitors a tailored experience. Eye candy! CSS3 brings web documents to life without complicated JavaScript. Rotate, scale and skew page elements in both two and three dimensions, add smooth transitional animations to elements when their values change, and go even further with keyframe animations which give you fine control over the behavior of your page elements. A better reading experience The web was made for reading text, but for years we've had to use a handful of fonts in a very conservative way. CSS3 brings the power to use any font you wish, to decorate the text with drop shadows and outlining, plus new ways of laying out the text such as in multiple columns, like a newspaper or magazine. Easier to maintain Using CSS2.1 usually means adding images (and extra markup) to your documents in order to achieve what should be simple effects. Something as basic as adding rounded corners to an element can mean using up to four extra empty elements to accommodate the graphics required to fake the appearance. CSS3 was created to address just these problems, so you can add rounded corners, drop shadows, gradient backgrounds and much more without writing unnecessary markup or creating multiple image files -- meaning a lot less work to make and maintain your documents. Cleaner code The greatly expanded range of selectors in CSS3 means you can add special formatting to links depending on their destination, loop through long tables and lists, even select form elements depending on their current state -- all without having to clutter your code with surplus class attributes. Copyright......Page 6 Dedication......Page 7 Foreword......Page 19 Preface......Page 21 Introduction......Page 23 A Quick Note About Browsers and Platforms......Page 24 The Appendices and Further Resources......Page 25 1: Introducing CSS3......Page 27 CSS3 Is Modular......Page 28 Module Status and the Recommendation Process......Page 29 Let’s Get Started: Introducing the Syntax......Page 30 Browser-Specific Prefixes......Page 33 Getting Started......Page 34 2: Media Queries......Page 35 The Advantages of Media Queries......Page 36 Syntax......Page 37 Media Features......Page 38 Width and Height......Page 39 Device Width and Height......Page 41 Using Media Queries in the Real World......Page 42 Orientation......Page 43 Aspect Ratio......Page 44 Pixel Ratio......Page 45 Multiple Media Features......Page 46 Media Queries: Browser Support......Page 47 3: Selectors......Page 49 Attribute Selectors......Page 50 Beginning Substring Attribute Value Selector......Page 51 Ending Substring Attribute Value Selector......Page 53 Arbitrary Substring Attribute Value Selector......Page 54 Multiple Attribute Selectors......Page 55 The General Sibling Combinator......Page 56 Selectors: Browser Support......Page 57 4: Pseudo-classes and Pseudo-elements......Page 59 Structural Pseudo-classes......Page 60 The nth-* Pseudo-classes......Page 61 first-of-type, last-child, and last-of-type......Page 66 only-child and only-of-type......Page 67 target......Page 68 not......Page 70 UI Element States......Page 71 Pseudo-elements......Page 72 The selection pseudo-element......Page 73 DOM and Attribute Selectors: Browser Support......Page 74 5: Web Fonts......Page 75 The @font-face Rule......Page 76 Defining Different Faces......Page 77 True vs. Artificial Font Faces......Page 79 Using Local Fonts......Page 80 Font Formats......Page 81 The Fontspring Bulletproof Syntax......Page 82 A Real-World Web Fonts Example......Page 83 font-size-adjust......Page 85 font-stretch......Page 86 OpenType Features......Page 87 Summary......Page 89 Web Fonts: Browser Support......Page 90 6: Text Effects and Typographic Styles......Page 91 Understanding Axes and Coordinates......Page 92 Applying Dimensional Effects: text-shadow......Page 93 Multiple Shadows......Page 96 Letterpress Effect......Page 97 Adding Definition to Text: text-outline and text-stroke......Page 98 Restricting Overflow......Page 99 Resizing Elements......Page 100 Aligning Text......Page 101 Wrapping Text......Page 102 Setting Text Rendering Options......Page 103 Applying Punctuation Properties......Page 105 Text Effects: Browser Support......Page 106 7: Multiple Columns......Page 107 Prescriptive Columns: column-count......Page 108 Dynamic Columns: column-width......Page 109 A Note on Readability......Page 110 Different Distribution Methods in Firefox and WebKit......Page 112 Combining column-count and column-width......Page 113 Column Gaps and Rules......Page 114 Containing Elements within Columns......Page 116 Elements Breaking over Multiple Columns......Page 117 Multiple Columns: Browser Support......Page 118 8: Background Images and Other Decorative Properties......Page 119 Multiple Background Images......Page 120 Background Size......Page 122 Background Clip and Origin......Page 124 background-repeat......Page 128 Background Image Clipping......Page 129 Image Masks......Page 130 Background Images: Browser Support......Page 132 9: Border and Box Effects......Page 133 Giving Your Borders Rounded Corners......Page 134 border-radius Shorthand......Page 135 Using Images for Borders......Page 137 Multicolored Borders......Page 140 Adding Drop Shadows......Page 141 Border and Box Effects: Browser Support......Page 143 10: Color and Opacity......Page 145 Setting Transparency with the opacity Property......Page 146 The Alpha Channel......Page 148 Hue, Saturation, Lightness......Page 151 The Color Variable: currentColor......Page 153 Matching the Operating System’s Appearance......Page 155 Color and Opacity: Browser Support......Page 156 11: Gradients......Page 157 Linear Gradients in Firefox......Page 158 Linear Gradients in WebKit......Page 159 Using Linear Gradients......Page 160 Adding Extra color-stop Values......Page 161 Radial Gradients......Page 162 Radial Gradients in WebKit......Page 163 Using Radial Gradients......Page 164 Multiple color-stop Values......Page 166 Multiple Gradients......Page 167 Repeating Gradients in Firefox......Page 168 Repeating Linear Gradients......Page 169 Repeating Radial Gradients......Page 170 Summary......Page 171 Gradients: Browser Support......Page 172 12: 2D Transformations......Page 173 The transform Property......Page 174 Position in Document Flow......Page 175 transform-origin......Page 176 translate......Page 178 skew......Page 179 scale......Page 180 Transforming Elements with Matrices......Page 182 Reflections with WebKit......Page 185 2D Transformations: Browser Support......Page 187 13: Transitions and Animations......Page 189 Transitions......Page 190 Duration......Page 191 Timing Function......Page 192 Delay......Page 194 The Complete Transition Example......Page 195 Multiple Transitions......Page 196 Triggers......Page 197 Key Frames......Page 198 Animation Properties......Page 199 Multiple Animations......Page 203 Transitions and Animations: Browser Support......Page 204 14: 3D Transformations......Page 205 3D Elements in CSS......Page 206 The Transformation Functions......Page 208 Rotation Around an Axis......Page 209 Translation Along the Axis......Page 211 Scaling......Page 212 The Transformation Matrix......Page 213 Perspective......Page 214 The perspective and perspective-origin Properties......Page 216 The Transformation Origin......Page 217 Showing or Hiding the Backface......Page 219 3D Transformations: Browser Support......Page 220 15: Flexible Box Layout......Page 221 Triggering the Flexible Box Layout......Page 222 The box Value in Firefox......Page 223 Inline Boxes......Page 224 Making the Boxes Flexible......Page 225 Unequal Ratios......Page 227 Zero Values and Firefox Layouts......Page 228 Grouping Flexible Boxes......Page 229 Changing Orientation......Page 230 Reversing the Order......Page 231 Further Control over Ordering......Page 232 Alignment......Page 234 Same-Axis Alignment......Page 235 Cross-Browser Flex Box with JavaScript......Page 237 Summary......Page 238 Flexible Box Layout: Browser Support......Page 239 16: Template Layout......Page 241 Using position and display to Create Rows......Page 242 Multiple Rows......Page 245 Slots and the ::slot() Pseudo-element......Page 246 Setting Height and Width on Rows and Columns......Page 249 Setting Both Row Height and Column Width......Page 251 Default Content: The @ Sign......Page 252 Template Layout: Browser Support......Page 254 17: The Future of CSS......Page 255 Calculation Functions......Page 256 The Grid Positioning Module......Page 259 Implicit and Explicit Grids......Page 260 The Grid Unit (gr)......Page 262 Extending the Possibilities of Images......Page 263 Image Slices......Page 264 Image Sprites......Page 265 Grouping Selectors......Page 267 Constants and Variables......Page 268 Extending Variables Using Mixins......Page 271 CSS Modules......Page 272 Nested Rules......Page 273 Summary......Page 274 Future CSS: Browser Support......Page 275 A: CSS3 Support in Current Major Browsers......Page 277 Web Fonts (Chapter 5)......Page 278 Background Images and Other Decorative Properties (Chapter 8)......Page 279 2D Transformations (Chapter 12)......Page 280 The Future of CSS (Chapter 17)......Page 281 CSS Modules......Page 283 Firefox......Page 284 Quirks Mode......Page 285 Modernizr......Page 286 CSS3 Gradient Generator......Page 287 Fontdeck......Page 288 Font Squirrel......Page 289 CSS3 Cheat Sheet......Page 290 Index......Page 291 About the Technical Reviewer......Page 306