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.
Author(s): Peter Gasston
Edition: 1
Publisher: No Starch Press
Year: 2011
Language: English
Pages: 308
Tags: Библиотека;Компьютерная литература;HTML / CSS / JavaScript;HTML5 / CSS3;
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
