CSS3 adds powerful new functionality to the web’s visual style language to help you create beautiful and engaging designs more easily than ever. With CSS3, you can create eye-catching visual effects such as semitransparent backgrounds, gradients, and drop shadows without using images; display text in beautiful, unique, non-web-safe fonts; create animations without Flash; and customize a design to the user’s unique device or screen size without JavaScript. You’ll learn how to accomplish these effects and more by working through a series of practical yet cutting-edge projects. Each chapter walks you through standalone exercises that you can integrate into projects you’re working on, or use as inspiration. You’ll learn all of the most popular, useful, and well-supported CSS3 techniques, plus:
- How to use CSS3 to enhance your pages, not just in terms of looks, but also in terms of usability, accessibility, and efficiency
- When and how to provide workarounds and fallbacks for older, non-supporting browsers
- How to create stunning designs with unique typography and beautiful graphic details
- Advanced new selectors to streamline your markup and make it less prone to human errors
- New methods for creating multiple-column layouts
- How to quickly and easily create mobile-optimized web designs without using scripting
Author(s): Zoe Mickley Gillenwater
Series: Voices That Matter
Edition: 1
Publisher: New Riders Press
Year: 2010
Language: English
Pages: 321
Table of Contents......Page 8
Introduction......Page 14
CHAPTER 1 The CSS3 Lowdown......Page 20
Overview of What’s New......Page 21
Where CSS3 Stands......Page 23
Use CSS3 Now......Page 24
The State of Browser Support......Page 25
Browser Market Share......Page 26
How the Major Players Stack Up......Page 27
Advantages......Page 30
Let Me Put it This Way.........Page 32
Benefits of CSS3......Page 34
Increased Page Performance......Page 35
Better Search Engine Placement......Page 37
Case Study: The Highway Safety Research Center......Page 38
Before CSS3......Page 39
After CSS3......Page 41
Browser Prefixes......Page 44
Dealing with Non-supporting Browsers......Page 49
Filtering IE with Conditional Comments......Page 55
Don’t Tell Them Everything......Page 60
Educate Them About Progressive Enhancement Up Front......Page 61
Manage Expectations from Design Mockups......Page 62
CHAPTER 2 Speech Bubbles......Page 66
The Base Page......Page 67
Corralling Long Text......Page 68
Rounding the Corners......Page 70
Adding the Bubble’s Tail......Page 74
Semitransparent Backgrounds with RGBA or HSLA......Page 81
Image-free Gradients......Page 91
Image-free Drop Shadows......Page 100
Image-free Text Shadows......Page 104
What are Transforms?......Page 108
Rotating the Avatars......Page 111
The Finished Page......Page 115
CHAPTER 3 Notebook Paper......Page 118
The Base Page......Page 119
Scaling the Background Image......Page 120
Multiple Background Images on One Element......Page 128
Adding a Graphic Border......Page 133
Adding a Drop Shadow......Page 144
Embedding Unique Fonts......Page 145
What is @font-face?......Page 146
Choosing Acceptable Fonts......Page 147
Browser Support......Page 153
Converting Fonts......Page 154
Using @font-face......Page 156
The Finished Page......Page 165
CHAPTER 4 Styling Images and Links by Type......Page 168
The Base Page......Page 169
What are Attribute Selectors?......Page 170
Indicating File Types with Dynamically Added Icons......Page 172
Alternative Icon Ideas......Page 175
Fixing IE 6......Page 176
The Trouble with Classes......Page 179
Using Attribute Selectors to Target by Type......Page 183
The Finished Page......Page 184
CHAPTER 5 Improving Efficiency Using Pseudo-classes......Page 186
Targeting Specific Elements Without Using IDs or Classes......Page 187
New Structural Pseudo-classes......Page 188
Back to the Speech Bubbles: Alternating Colors......Page 190
Back to the Photos: Random Rotation......Page 195
Dynamically Highlighting Page Sections......Page 199
The :target Pseudo-class......Page 200
Adding the Table of Contents......Page 201
Changing Background Color on the Jumped-to Section......Page 207
Animating the Change with Pure CSS......Page 210
CHAPTER 6 Different Screen Size, Different Design......Page 224
The Base Page......Page 225
What are Media Queries?......Page 227
Changing the Layout for Large Screens......Page 228
From Horizontal Nav Bar to Vertical Menu......Page 232
Multi-column Text......Page 233
Changing the Layout for Small Screens......Page 239
Changing the Layout for Mobile Devices......Page 245
What is Device Width?......Page 246
The Third Media Query......Page 247
Improving the Look on High-resolution Displays......Page 252
The Viewport meta Tag......Page 254
Workarounds for Non-supporting Browsers......Page 259
The Finished Page......Page 260
CHAPTER 7 Flexing Your Layout Muscles......Page 262
Changes on the Horizon......Page 263
Creating Multi-column Layouts Without Floats or Positioning......Page 264
Making Blocks Flex......Page 267
Adding Columns......Page 272
Reordering Columns......Page 274
Equal-height Columns......Page 277
Vertical and Horizontal Centering......Page 280
Reality Check: What Works Now......Page 285
Flexible Form Layout......Page 287
Sticky Footers......Page 291
The box-sizing Property......Page 296
Future Layout Systems......Page 303
APPENDIX A: Browser Support......Page 306
Conclusion......Page 308
B......Page 310
C......Page 311
F......Page 312
G......Page 313
I......Page 314
M......Page 315
Q......Page 316
S......Page 317
W......Page 318
Z......Page 319
Credits......Page 320
