The Book of CSS3, 2nd Edition A Developers Guide to the Future of Web Design (Peter Gasston) (Z-Library)

P X 24 30 P X 24 30 A D E V E L O P E R ’ S G U I D E T O T H E F U T U R E O F W E B D E S I G N P E T E R G A S S T O N T H E B O O K O F C S 3 2 N D E D I T I O N P X 24 30 P X 24 30 5 3 4 9 5 9 781593 275808 ISBN: 978-1-59327-580-8 www.nostarch.com TH E F I N EST I N G E E K E NTE RTA I N M E NT™ SHELVE IN: COM PUTERS/W EB DEVELOPM ENT $34.95 ($36.95 CDN) T H E F U T U R E O F W E B D E S I G N I S N O W CSS3 is the technology behind most of the eye-catching visuals on the Web. But the docs can be dry, murky, and full of dastardly caveats for inconsistent browser implementations. This completely updated second edition of the best-selling Book of CSS3 distills the dense technical language of the CSS3 specification into plain English and shows you what CSS3 can do now, in all major browsers. You’ll find fully revised coverage of the updated syntax of gradients, grids, and flexible box layout, as well as all-new chapters on values and sizing, and graphical effects like filter effects and blend modes. With an abundance of real-world examples and a focus on the principles of good design, The Book of CSS3 will help you expand your CSS skills, as you learn how to: • Style text with custom font choices, drop shadows, and other effects • Create, position, and resize 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 • Take control of layout with grids, columns, and flexible alignment • Tailor a website’s appearance to every type of web-capable device The companion website includes up-to-date browser compatibility charts, links to tutorials and resources, and live CSS3 examples. The Web can be an ugly place. Make it pretty with The Book of CSS3. A B O U T T H E A U T H O R Peter Gasston has been making websites professionally for more than 14 years in both agency and corporate settings. One of the original contributors to CSS3.info, the leading online destination for CSS3, Gasston is the author of The Modern Web (No Starch Press) and has been published in Smashing Magazine, A List Apart, and net magazine. He also writes the web development blog Broken Links. He lives in London, England. “ I L I E F LAT .” Th is book uses a lay-f la t b ind ing that won't snap shut. 6 89145 75803 0 G A S S T O N T H E B O O K O F C S S 3 T H E B O O K O F C S S 3 www.it-ebooks.info

Praise for the first edition of The Book of CSS3 “I can honestly say I will never need another book on this subject, and I doubt anyone else will either.” —Devon Young, writer for css3.info “One of the best technology books I’ve read.” —craig Buckler, optimalworks ltD “An absolutely fantastic resource for developers and serious designers.” —visual swirl “A book you more than likely should have, even if you think you already have a pretty good handle on everything CSS.” —456 Berea street “An excellent introduction to CSS3—both what you can do with it now and what is proposed for the future.” —stephen chapman, felgall.com “There are entire sections of the CSS3 spec that I never really appreciated until I read this book.” —Designorati www.it-ebooks.info

www.it-ebooks.info

T h e B o o k o f C S S 3 2 n d e d i T i o n A d e v e l o p e r ’ s G u i d e t o t h e f u t u r e o f W e b d e s i g n by Peter Gasston San Francisco www.it-ebooks.info

The Book of CSS3, 2nd ediTion. Copyright © 2015 by Peter Gasston. All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. Printed in USA First printing 18 17 16 15 14 1 2 3 4 5 6 7 8 9 ISBN-10: 1-59327-580-3 ISBN-13: 978-1-59327-580-8 Publisher: William Pollock Production Editor: Serena Yang Cover Illustration: Octopod Studios and Garry Booth Interior Design: Octopod Studios Developmental Editor: William Pollock Technical Reviewer: Patrick Lauke Copyeditor: LeeAnn Pickrell Compositor: Lynn L’Heureux Proofreader: James Fraleigh Indexer: Nancy Guenther For information on distribution, translations, or bulk sales, please contact No Starch Press, Inc. directly: No Starch Press, Inc. 245 8th Street, San Francisco, CA 94103 phone: 415.863.9900; info@nostarch.com www.nostarch.com The Library of Congress has catalogued the first edition as follows: Gasston, Peter. The book of CSS3 : a developer's guide to the future of web design / Peter Gasston. p. cm. Includes index. ISBN-13: 978-1-59327-286-9 ISBN-10: 1-59327-286-3 1. Web sites--Design. 2. Cascading style sheets. I. Title. TK5105.888G376 2011 006.7--dc22 2011010098 No Starch Press and the No Starch Press logo are registered trademarks of No Starch Press, Inc. Other product and company names mentioned herein may be the trademarks of their respective owners. Rather than use a trademark symbol with every occurrence of a trademarked name, we are using the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been taken in the preparation of this work, neither the author nor No Starch Press, Inc. shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in it. www.it-ebooks.info

For Sarah, my sister. Your courage is inspiring. www.it-ebooks.info

www.it-ebooks.info

B r i e f C o n T e n T S Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xvii Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix Chapter 1: Introducing CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Chapter 2: Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Chapter 3: Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Chapter 4: Pseudo-classes and Pseudo-elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Chapter 5: Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Chapter 6: Text Effects and Typographic Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Chapter 7: Multiple Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Chapter 8: Background Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Chapter 9: Border and Box Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Chapter 10: Color and Opacity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Chapter 11: Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Chapter 12: 2D Transformations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Chapter 13: 3D Transformations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Chapter 14: Transitions and Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Chapter 15: Flexible Box Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Chapter 16: Values and Sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Chapter 17: Grid Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Chapter 18: Blend Modes, Filter Effects, and Masking . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Chapter 19: The Future of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Appendix A: CSS3 Support in Current Major Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Appendix B: Online Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 www.it-ebooks.info

www.it-ebooks.info

C o n T e n T S i n d e T A i l PrefaCe xvii inTroduCTion xix The Scope of This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx Chapter by Chapter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx The Appendices and Further Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi Introduction to the Second Edition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi 1 inTroduCing CSS3 1 What CSS3 Is and How It Came to Be . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 A Brief History of CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 CSS3 Is Modular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 There Is No CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Module Status and the Recommendation Process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Introducing the Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Vendor Prefixes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Let’s Get Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 2 Media QuerieS 7 The Advantages of Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Media Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Width and Height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Pixel Ratio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Device Width and Height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Orientation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Aspect Ratio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Multiple Media Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Mobile-First Web Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Media Queries: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 3 SeleCTorS 21 Attribute Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 New Attribute Selectors in CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Beginning Substring Attribute Value Selector . . . . . . . . . . . . . . . . . . . . . . . . . 23 Ending Substring Attribute Value Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Arbitrary Substring Attribute Value Selector . . . . . . . . . . . . . . . . . . . . . . . . . 26 Multiple Attribute Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 www.it-ebooks.info

x Contents in Detail The General Sibling Combinator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Selectors: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 4 PSeudo-ClaSSeS and PSeudo-eleMenTS 31 Structural Pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 The :nth-* Pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 :first-of-type, :last-child, and :last-of-type . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 :only-child and :only-of-type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Other Pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 :target . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 :empty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 :root . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 :not() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 UI Element States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Constraint Validation Pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Pseudo-elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 The ::selection Pseudo-element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 DOM and Attribute Selectors: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 5 WeB fonTS 47 The @font-face Rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Defining Different Faces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 True vs . Artificial Font Faces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 A “Bulletproof” @font-face Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Using Local Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Font Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 The Final “Bulletproof” Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Licensing Fonts for Web Use . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 A Real-World Web Fonts Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Controlling Font Loading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 More Font Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 font-size-adjust . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 font-stretch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 OpenType Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Enabling Font Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Font Feature Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Web Fonts: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 6 TexT effeCTS and TyPograPhiC STyleS 63 Understanding Axes and Coordinates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Applying Dimensional Effects: text-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Multiple Shadows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Restricting Overflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 www.it-ebooks.info

Contents in Detail xi Aligning Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Controlling Line Wrapping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Breaking Words . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Hyphenating Words . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Resizing Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Text Effects and Typographic Styles: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . 74 7 MulTiPle ColuMnS 75 Column Layout Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Prescriptive Columns: column-count . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Dynamic Columns: column-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Varying Distribution of Content Across Columns . . . . . . . . . . . . . . . . . . . . . . 78 Combining column-count and column-width . . . . . . . . . . . . . . . . . . . . . . . . . 79 Column Gaps and Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Containing Elements Within Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Elements Spanning Multiple Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Multiple Columns: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 8 BaCkground iMageS 85 Updates to Existing Background Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 background-position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 background-attachment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 background-repeat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Multiple Background Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Dynamically Scaled Background Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Background Clip and Origin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Updated Background Shortcut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Background Images: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 9 Border and Box effeCTS 97 Giving Your Borders Rounded Corners . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 The border-radius Shorthand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Using Percentage Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Using Images for Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 border-image-source . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 border-image-slice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 border-image-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 border-image-outset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 border-image-repeat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 The border-image Shorthand Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Drop Shadows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Inset Shadows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 www.it-ebooks.info

xii Contents in Detail Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Border and Box Effects: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 10 Color and oPaCiTy 111 The opacity Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 New and Extended Color Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 The Alpha Channel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Hue, Saturation, Lightness . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 HSLA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 The Color Variable: currentColor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Color and Opacity: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 11 gradienTS 121 Linear Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Setting Gradient Direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Adding Extra Color-Stop Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Repeating Linear Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Radial Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Using Radial Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Using Multiple Color-Stop Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Repeating Radial Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Multiple Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Gradients: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 12 2d TranSforMaTionS 135 The transform Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 rotate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 translate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 scale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 skew . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 An Important Note About Transformation Functions . . . . . . . . . . . . . . . . . . . . . . . . . 144 Transforming Elements with Matrices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 2D Transformations: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 13 3d TranSforMaTionS 149 3D Elements in CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 The Transformation Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Rotation Around an Axis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Perspective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Translation Along the Axis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 www.it-ebooks.info

Contents in Detail xiii Scaling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 The Transformation Matrix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 The perspective and perspective-origin Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 The Transformation Origin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 The transform-style Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Showing or Hiding the Backface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 3D Transformations: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 14 TranSiTionS and aniMaTionS 165 Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 transition-property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 transition-duration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 transition-timing-function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 transition-delay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 The transition Shorthand Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 The Complete Transition Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Multiple Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Keyframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 animation-name . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 animation-duration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 animation-timing-function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 animation-delay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 animation-iteration-count . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 animation-direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 animation-fill-mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 animation-play-state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 The animation Shorthand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 The Complete Animations Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Multiple Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Transitions and Animations: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 15 flexiBle Box layouT 185 Declaring the Flexible Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Flexbox Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Reversing the Content Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Fully Reordering Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Adding Flexibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 The flex-grow Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 The flex-shrink Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 The flex-basis Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 The flex Shorthand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Alignment Inside the Container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Horizontal Alignment with justify-content . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Vertical Alignment with align-items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 www.it-ebooks.info

xiv Contents in Detail Cross-Axis Alignment with align-self . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Wrap and Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 The flex-flow Shorthand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Aligning Multiple Lines with align-content . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Browser Support and Legacy Syntaxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 Flexbox: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 16 ValueS and Sizing 199 Relative Length Units . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Root-Relative Units . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Viewport-Relative Units . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Calculated Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Sizing Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Box Sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Intrinsic and Extrinsic Sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Values and Sizing: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 17 grid layouT 209 Grid Terminology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Declaring and Defining the Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Creating Explicit Grids by Setting Track Size . . . . . . . . . . . . . . . . . . . . . . . 211 Placing Items in an Explicit Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Grid Placement Shorthand Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Repeating Grid Lines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 Named Grid Areas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 The grid-template Shorthand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Implicit Grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Grid Items Without a Declared Place . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Combining Explicit and Implicit Grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 The grid Shorthand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 Grid Item Stacking Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Internet Explorer’s Grid Layout Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Grid Layout: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 18 Blend ModeS, filTer effeCTS, and MaSking 225 Blend Modes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 background-blend-mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 mix-blend-mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 isolation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 Filter Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 blur() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 brightness() and contrast() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 www.it-ebooks.info

Contents in Detail xv grayscale(), sepia(), and saturate() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 hue-rotate() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 opacity() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 drop-shadow() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Multiple Filter Effect Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 Filters in SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Masking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Clipping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Image Masking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 Border Masking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 Masking in SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 Combining Filter Effects and Masking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Blend Modes, Filter Effects, and Masking: Browser Support . . . . . . . . . . . . . . . . . . . . 244 19 The fuTure of CSS 245 Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 Exclusions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 Regions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Feature Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Device Adaptation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Sticky Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 And Much, Much More . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Future CSS: Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 a CSS3 SuPPorT in CurrenT Major BroWSerS 257 Media Queries (Chapter 2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 Selectors (Chapter 3) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 DOM and Attribute Selectors (Chapter 4) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 Web Fonts (Chapter 5) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Text Effects and Typographic Styles (Chapter 6) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Multiple Columns (Chapter 7) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Background Images (Chapter 8) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Border and Box Effects (Chapter 9) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Color and Opacity (Chapter 10) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Gradients (Chapter 11) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 2D Transformations (Chapter 12) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 3D Transformations (Chapter 13) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Transitions and Animations (Chapter 14) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Flexbox (Chapter 15) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Values and Sizing (Chapter 16) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Grid Layout (Chapter 17) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 Blend Modes, Filter Effects, and Masking (Chapter 18) . . . . . . . . . . . . . . . . . . . . . . . 262 Future CSS (Chapter 19) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 www.it-ebooks.info

xvi Contents in Detail B online reSourCeS 263 General CSS Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 Chapter 2: Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 Chapters 3 and 4: Selectors, and Pseudo-classes and Pseudo-elements . . . . . . . . . . . . 264 Chapters 5 and 6: Web Fonts, and Text Effects and Typographic Styles . . . . . . . . . . . 264 Chapter 7: Multiple Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 Chapters 8 and 9: Background Images, and Border and Box Effects . . . . . . . . . . . . . 265 Chapter 10: Color and Opacity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Chapter 11: Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Chapters 12 and 13: 2D and 3D Transformations . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Chapter 14: Transitions and Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Chapter 15: Flexible Box Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Chapter 16: Values and Sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Chapter 17: Grid Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Chapter 18: Blend Modes, Filter Effects, and Masking . . . . . . . . . . . . . . . . . . . . . . . 266 Chapter 19: The Future of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 index 267 www.it-ebooks.info

P r e f A C e This book is the culmination of eight years’ writ- ing about CSS3, both on the Web and in print. The browser and CSS landscape has changed a lot in that short time and continues to change today, bringing new features and implementations at a rate that’s difficult to keep up with. The CSS3 specification is written in (often dense) technical language that’s intended for implementers rather than end users, and my intent in writing this book was to bridge the gap between specification and web developer. The book follows a loose order based on stability of implementation: In the earlier chapters, I cover the CSS properties that are well implemented and used on a daily basis, but as the book progresses, the technologies become more experimental and are implemented in fewer browsers. As a result, in the final few chapters I sometimes rely on interpretation of the CSS3 specification to explain how future properties should behave. I would hope that there are few mistakes, but I accept that any that exist are based on my own misunderstanding. www.it-ebooks.info

xviii Preface In addition to the various modules of the CSS3 specification itself, an invaluable resource for me while writing the book was the Mozilla Developer Network (https://developer.mozilla.org/), a peerless collection of articles about anything web related—not least CSS—which is all the more amazing for being written by volunteers. The text used in many of the code examples is taken from books in the public domain that are available from Project Gutenberg (http://www .gutenberg.org/). All images in the book that are not my own creations are credited in the relevant chapters. This book would not have been possible without the guidance of the team at No Starch Press, especially Serena Yang and my editors, Keith Fancher (first edition) and Bill Pollock (second edition); between them they made me write more clearly and helped me transition from blogger to author. I’d also like to thank my technical editors: Patrick Lauke’s rigorous eye for detail and understanding of technical specifications was instrumen- tal in helping me find focus in the expanded scope of the second edition, and Joost de Valk not only acted as my technical editor for the first edition but also gave me my first opportunity to write about CSS3 when he created CSS3.info eight years ago. I’d also like to thank my colleagues at Preloaded, Poke, Top10, and rehabstudio for their support and encouragement in writing two editions of this book; everyone at the many London web community meet-ups; my mum for teaching me the value of hard work; and my dad for buying me my first computer almost thirty years ago—I promised I’d pay him back one day, and hopefully this book will go some way toward that debt. www.it-ebooks.info

i n T r o d u C T i o n Let me tell you a little about who I think you are: You’re a web professional who’s been hand-coding HTML and CSS for a few years; you’re pretty comfort- able with creating complex layouts, and you know not only your div from your span but also your bold from your strong; you’ve read a little about CSS3 and may even have started experimenting with some of its more decorative features like rounded corners, but you want to gain a deeper understanding of the fundamentals. The Book of CSS3 helps you leverage the excellent knowledge you have of CSS2.1 in order to make learning CSS3 easier. I won’t explain the funda- mentals of CSS (except for the occasional reminder), as I assume you know them already. I won’t talk you through step-by-step demonstrations of using CSS to make a listed navigation or an image gallery, because I assume you can apply the examples in this book to anything you want to build on your own. I’ll introduce you to what you can do with CSS3 now and show you what you’ll be able to do with it in the future. At the same time, I’ll take the dense technical language of the CSS3 specification and translate it into language that’s plain and practical. www.it-ebooks.info