Stunning CSS A PROJECT-BASED GUIDE TO THE LATEST IN CSS Zoe Mickley Gillenwater Stunning CSS3: A project-based guide to the latest in CSS Zoe Mickley Gillenwater New Riders 1249 Eighth Street Berkeley, CA 94710 (510) 524-2178 Fax: (510) 524-2221 Find us on the Web at www.newriders.com To report errors, please send a note to errata@peachpit.com New Riders is an imprint of Peachpit, a division of Pearson Education Copyright © 2011 by Zoe Gillenwater Acquisitions Editor: Wendy Sharp Production Editor: Hilal Sala Project/Copy Editor: Wendy Katz Technical Editor: Chris Mills Cover design: Charlene Charles-Will Interior design: Mimi Heft, Charlene Charles-Will Compositor: Danielle Foster Indexer: Emily Glossbrenner Notice of Rights All rights reserved No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher For information on getting permission for reprints and excerpts, contact permissions@peachpit.com Notice of Liability The information in this book is distributed on an “As Is” basis, without warranty While every precaution has been taken in the preparation of the book, neither the author nor New Riders 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 instructions contained in this book or by the computer software and hardware products described in it Trademarks Acrobat, Dreamweaver, Fireworks, and Photoshop are all trademarks or registered trademarks of Adobe Systems, Inc Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark All other product names and services identified throughout this book are used in editorial fashion only and for the benefit of such companies with no intention of infringement of the trademark No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book ISBN 13: 978-0-321-72213-3 ISBN 10: 0-321-72213-2 987654321 Printed and bound in the United States of America Wow! eBook To Mr Butkus, for teaching me HTML and Photoshop at Downers Grove North High School Wow! eBook This page intentionally left blank Wow! eBook ACKNOWLEDGMENTS v Acknowledgments I want to thank everyone whose assistance has made writing this book possible and painless Immense thanks go to my copy editor Wendy Katz for ensuring my writing was clear, precise, and polished It was wonderful to work with you again Thank you for your guidance, advice, and revisions, particularly your continual correction of my placement of the word “only.” Someday I’ll learn its mysteries My writing also owes a lot to the tremendous work of Chris Mills, my technical editor Thank you for painstakingly checking my code, offering helpful suggestions, answering my technical questions, and pointing out areas to correct or clarify I’m grateful to my acquisitions editor at Peachpit, Wendy Sharp, for making the book a reality Thanks also to all the other staff at Peachpit/New Riders who have been involved in producing this book I don’t know your names, but I know how hard you’ve worked on this and how talented you are, and I’m grateful Thanks to David Fugate, my literary agent, for his guidance and advocacy There are many people who weren’t directly involved in the writing of the book but to whom I owe so much of my knowledge Thanks to Zoltan Hawryluk, Paul Irish, and Richard Fink for answering my technical questions and providing great tools for working with CSS3 I’m grateful to my high school teacher Mr Butkus for starting me down this path by teaching me HTML and Photoshop Thanks also to my former boss Lamar Heyward for putting the crazy idea of using CSS for all style and layout into my head I’ve also learned so much from the work of John Allsopp, Dan Cederholm, Andy Clarke, Chris Coyier, Roger Johansson, Eric Meyer, Trent Walton, Estelle Weyl, and many others Thanks for being so brilliant and sharing it with the rest of us Finally, thanks to my fantastic family Cary, I’m so thankful for your loving support through this second book-writing expedition You’ve been incredibly patient with my long hours and listening to me complain about browser bugs and confusing W3C specs, and you’ve taken such good care of Asha while I’ve toiled away Mom, Dad, and Faith, you also watched Asha a good bit during this process, and I’m very grateful for your help Asha, thanks also to you for letting Mama work and coming to visit me with hug breaks every once in a while I love you all Wow! eBook This page intentionally left blank Wow! eBook TABLE OF CONTENTS vii Table of Contents Introduction xiii CHAPTER The CSS3 Lowdown What is CSS3? Overview of What’s New Where CSS3 Stands Use CSS3 Now The State of Browser Support Browser Market Share How the Major Players Stack Up Progressive Enhancement 11 Advantages 11 Let Me Put it This Way 13 Benefits of CSS3 15 Reduced Development and Maintenance Time 16 Increased Page Performance 16 Better Search Engine Placement 18 Increased Usability and Accessibility 19 Staying at the Front of the Pack 19 Case Study: The Highway Safety Research Center 19 Before CSS3 20 After CSS3 22 Wow! eBook viii TABLE OF CONTENTS Using CSS3 Wisely 25 Browser Prefixes 25 Dealing with Non-supporting Browsers 30 Filtering IE with Conditional Comments 36 Dealing with Unsupportive Clients or Bosses 41 Don’t Tell Them Everything 41 Educate Them About Progressive Enhancement Up Front 42 Manage Expectations from Design Mockups 43 CHAPTER Speech Bubbles 47 The Base Page 48 Corralling Long Text 49 Graphic Effects Sans Graphics 51 Rounding the Corners 51 Adding the Bubble’s Tail 55 Semitransparent Backgrounds with RGBA or HSLA 62 Image-free Gradients 72 Image-free Drop Shadows 81 Image-free Text Shadows 85 Transforming the Avatars 89 What are Transforms? 89 Rotating the Avatars 92 The Finished Page 96 Wow! eBook TABLE OF CONTENTS CHAPTER Notebook Paper ix 99 The Base Page 100 Beyond the Basic Background 101 Scaling the Background Image 101 Multiple Background Images on One Element 109 Adding a Graphic Border 114 Adding a Drop Shadow 125 Embedding Unique Fonts 126 What is @font-face? 127 Choosing Acceptable Fonts 128 Browser Support 134 Converting Fonts 135 Using @font-face 137 The Finished Page 146 CHAPTER Styling Images and Links by Type 149 The Base Page 150 What are Attribute Selectors? 151 Indicating File Types with Dynamically Added Icons 153 Alternative Icon Ideas 156 Fixing IE 157 Styling Full-size Photos and Thumbnails Differently 160 The Trouble with Classes 160 Using Attribute Selectors to Target by Type 164 The Finished Page 165 Wow! eBook ... xiii CHAPTER The CSS3 Lowdown What is CSS3? Overview of What’s New Where CSS3 Stands Use CSS3 Now The.. .Stunning CSS A PROJECT-BASED GUIDE TO THE LATEST IN CSS Zoe Mickley Gillenwater Stunning CSS3: A project-based guide to the latest in CSS Zoe... 19 Before CSS3 20 After CSS3 22 Wow! eBook viii TABLE OF CONTENTS Using CSS3 Wisely 25