CSS3 for Everyone: Second Edition
()
About this ebook
From advanced selectors to generated content to web fonts, and from gradients, shadows, and rounded corners to elegant animations, CSS3 holds a universe of creative possibilities. No one can better guide you through these galaxies than Dan Cederholm. In this second edition, he tackles new properties and techniques, including micro layouts. Learn
Related to CSS3 for Everyone
Related ebooks
Sass for Web Designers Rating: 0 out of 5 stars0 ratingsThe Web Designer's Idea Book, Volume 3: Inspiration from Today's Best Web Design Trends, Themes and Styles Rating: 0 out of 5 stars0 ratingsBootstrap 4 Quick Start: A Beginner's Guide to Building Responsive Layouts with Bootstrap 4 Rating: 0 out of 5 stars0 ratingsLess Web Development Essentials Rating: 0 out of 5 stars0 ratingsGet Ready for CSS Grid Layout Rating: 0 out of 5 stars0 ratingsResponsive Web Design with HTML5 and CSS3 Rating: 4 out of 5 stars4/5Beginning CSS: Cascading Style Sheets for Web Design Rating: 4 out of 5 stars4/5The New CSS Layout Rating: 0 out of 5 stars0 ratingsBuild Your First Web App: Learn to Build Web Applications from Scratch Rating: 0 out of 5 stars0 ratingsIan Talks CSS Frameworks A-Z: WebDevAtoZ, #5 Rating: 0 out of 5 stars0 ratingsInstant Responsive Web Design Rating: 5 out of 5 stars5/5Bridging UX and Web Development: Better Results through Team Integration Rating: 0 out of 5 stars0 ratingsWireframing for Everyone Rating: 0 out of 5 stars0 ratingsMastering HTML and CSS for Modern Development Rating: 0 out of 5 stars0 ratingsGoing Offline Rating: 0 out of 5 stars0 ratingsYour First Week With Bootstrap Rating: 0 out of 5 stars0 ratingsUnleashing the Power of CSS Rating: 0 out of 5 stars0 ratingsInstant SASS CSS How-to Rating: 5 out of 5 stars5/5Generic Pipelines Using Docker: The DevOps Guide to Building Reusable, Platform Agnostic CI/CD Frameworks Rating: 0 out of 5 stars0 ratingsHTML5,CSS3,Javascript and JQuery Mobile Programming: Beginning to End Cross-Platform App Design Rating: 5 out of 5 stars5/5Modern CSS: Master the Key Concepts of CSS for Modern Web Development Rating: 0 out of 5 stars0 ratingsServerless Beyond the Buzzword: What Can Serverless Architecture Do for You? Rating: 0 out of 5 stars0 ratingsVue.js for Jobseekers: A complete guide to learning Vue.js, building projects, and getting hired (English Edition) Rating: 0 out of 5 stars0 ratingsJump Start Sass: Get Up to Speed With Sass in a Weekend Rating: 0 out of 5 stars0 ratingsResponsive Web Design with HTML5 and CSS3 - Second Edition Rating: 4 out of 5 stars4/5HTML5 & CSS3 For The Real World: Powerful HTML5 and CSS3 Techniques You Can Use Today! Rating: 0 out of 5 stars0 ratingsPractical Responsive Typography Rating: 0 out of 5 stars0 ratingsJumpstart UIKit: Learn to Build Enterprise-Level, Feature-Rich Websites that Work Elegantly with Minimum Fuss Rating: 0 out of 5 stars0 ratings50 Recipes for Programming CSS3 Rating: 0 out of 5 stars0 ratings
Software Development & Engineering For You
Tiny Python Projects: Learn coding and testing with puzzles and games Rating: 5 out of 5 stars5/5How to Write Effective Emails at Work Rating: 4 out of 5 stars4/5Python For Dummies Rating: 4 out of 5 stars4/5Level Up! The Guide to Great Video Game Design Rating: 4 out of 5 stars4/5Hand Lettering on the iPad with Procreate: Ideas and Lessons for Modern and Vintage Lettering Rating: 4 out of 5 stars4/5Lua Game Development Cookbook Rating: 0 out of 5 stars0 ratingsPYTHON: Practical Python Programming For Beginners & Experts With Hands-on Project Rating: 5 out of 5 stars5/5Adobe Illustrator CC For Dummies Rating: 5 out of 5 stars5/5Modern C++ for Absolute Beginners: A Friendly Introduction to C++ Programming Language and C++11 to C++20 Standards Rating: 0 out of 5 stars0 ratingsGood Code, Bad Code: Think like a software engineer Rating: 5 out of 5 stars5/5Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5Coding All-in-One For Dummies Rating: 0 out of 5 stars0 ratingsLearn to Code. Get a Job. The Ultimate Guide to Learning and Getting Hired as a Developer. Rating: 5 out of 5 stars5/5Kanban in Action Rating: 0 out of 5 stars0 ratingsSalesforce Certification: Earn Salesforce certifications and increase online sales real and unique practice tests included Kindle Rating: 0 out of 5 stars0 ratingsRy's Git Tutorial Rating: 0 out of 5 stars0 ratingsData Visualization: a successful design process Rating: 4 out of 5 stars4/5Reversing: Secrets of Reverse Engineering Rating: 4 out of 5 stars4/5Android App Development For Dummies Rating: 0 out of 5 stars0 ratingsEngineering Management for the Rest of Us Rating: 5 out of 5 stars5/5Learning Java by Building Android Games Rating: 0 out of 5 stars0 ratingsGray Hat Hacking the Ethical Hacker's Rating: 5 out of 5 stars5/5Git Essentials Rating: 4 out of 5 stars4/5How Do I Do That in Photoshop?: The Quickest Ways to Do the Things You Want to Do, Right Now! Rating: 4 out of 5 stars4/5C# in Depth Rating: 5 out of 5 stars5/5Beginning Programming For Dummies Rating: 4 out of 5 stars4/5
Reviews for CSS3 for Everyone
0 ratings0 reviews
Book preview
CSS3 for Everyone - Dan Cederholm
Copyright © 2014 Dan Cederholm
First edition published 2011
All rights reserved
Publisher: Jeffrey Zeldman
Designer: Jason Santa Maria
Executive Director: Katel LeDû
Technical Editor: Rachel Andrew
Copyeditor: Sally Kerrigan
Compositor: Rob Weychert
Ebook Production: India Amos
Editor, first edition: Mandy Brown
Technical Editor, first edition: Ethan Marcotte
Copyeditor, first edition: Krista Stevens
Compositor, first edition: Neil Egan
ISBN 978-1-9375572-1-8
A Book Apart
New York, New York
http://abookapart.com
FOREWORD
WEBSITES ARE NOT
the same as pictures of websites. When one person designs in Photoshop and another converts the design to markup and CSS, the coder must make guesses and assumptions about what the designer intended. This interpretive process is never without friction—unless the coder is Dan Cederholm. When Dan codes other people’s designs, he gets everything right, including the parts the designer got wrong. For instance, Dan inevitably translates a designer’s fixed Photoshop dimensions into code that is flexible, accessible, and bulletproof. (Indeed, Dan coined the phrase bulletproof web design
while teaching the rest of us how to do it.)
In Dan’s case, flexible never means sloppy. The details always matter. That’s because Dan is not only a brilliant front-end developer and user advocate, he is also a designer to his core. He dreams design, bleeds design, and even gave the world a new way to share design at dribbble.com. Dan is also a born teacher and funny guy whose deadpan delivery makes Steven Wright look giddy by comparison. Dan speaks all over, helping designers improve their craft, and he not only educates, he kills.
And that, my friends, is why we’ve asked him to be our (and your) guide to CSS3. You couldn’t ask for a smarter, more experienced, more design-focused guide or a bigger web standards geek than our man Dan. Enjoy the trip!
—Jeffrey Zeldman
INTRODUCTION
A LOT HAS PROGRESSED
since the initial pressing of this little green book. All good things! Many of the CSS3 properties discussed now have wider browser support, which means you can feel even more confident putting them to use. Several new properties have emerged. The economy is looking—wait.
In this second edition, I’ve brought everything up to present day. I’ve removed old hacks that are no longer necessary. And I’ve added a chapter at the end of the book on micro layouts. While we wait patiently for a true cross-browser layout system, work carries on. Fortunately, new specifications such as Flexbox and Multi-column Layout are usable today, when applied to smaller components of the overall design. The new chapter explores those options and how they dovetail our existing CSS3 toolbox.
There’s never been a better time to dive into CSS3. I hope you enjoy this updated version of what was a very fun book to write, and I look forward to the myriad ways you’ll creatively use CSS3. Onward!
Chapter 1: Using CSS3 TodayLOOKING BACK
upon the storied history of CSS, we see some important milestones that have shaped our direction as web designers. These watershed techniques, articles, and events helped us create flexible, accessible websites that we could be proud of both visually as well as under the hood.
You could argue that things began to get interesting back in 2001, when Jeffrey Zeldman wrote To Hell With Bad Browsers
(http://bkaprt.com/css3-2/1/), signaling the dawn of the CSS Age. This manifesto encouraged designers to push forward and use CSS for more than just link colors and fonts, leaving behind older, incapable browsers that choked on CSS1. Yes, CSS1.
We spent the next several years discovering and sharing techniques for using CSS to achieve what we wanted for our clients and bosses. It was an exciting time to be experimenting, pushing boundaries, and figuring out complex ways of handling cross-browser rendering issues—all in the name of increased flexibility, improved accessibility, and reduced code.
Somewhere around 2006 or so, the talk about CSS went quiet. Most of the problems we needed to solve had documented solutions. Common browser bugs had multiple workarounds. We created support groups for designers emotionally scarred by inexplicable Internet Explorer bugs. Our hair started to gray. (OK, I’m speaking for myself here.) Most importantly though, the contemporary crop of browsers was relatively stagnant. This period of status quo gave us time to craft reusable approaches and establish best practices, but things got a little, dare I say, boring for the CSS aficionado yearning for better tools.
Thankfully things changed. Browsers began iterating and updating more rapidly (well, some of them anyway). Firefox and Safari not only started to gain market share, they also thrived on a quicker development cycle, adding solid standards support alongside more experimental properties. In many cases, the technologies that these forward-thinking browsers chose to implement were then folded back into draft specifications. In other words, periodically it was the browser vendors that pushed the spec along.
BUT DON’T READ THE SPEC
Ask a roomful of web designers, Who likes reading specs?
and you might get one person to raise their hand. (If you are that person, I commend you and the free time you apparently have.) Although they serve as important references, I certainly don’t enjoy reading specifications in their entirety, nor do I recommend doing so in order to grasp CSS3 as a whole.
The good news is that CSS3 is actually a series of modules that are designed to be implemented separately and independently from each other. This is a very good thing. This segmented approach has enabled portions of the spec to move faster (or slower) than others, and has encouraged browser vendors to implement the pieces that are further along before the entirety of CSS3 is considered finished.
The W3C (http://bkaprt.com/css3-2/2/) explains the module approach:
Rather than attempting to shove dozens of updates into a single monolithic specification, it will be much easier and more efficient to be able to update individual pieces of the specification. Modules will enable CSS to be updated in a more timely and precise fashion, thus allowing for a more flexible and timely evolution of the specification as a whole.
The benefit here for us web designers is that along with experimentation and faster release cycle comes the ability to use many CSS3 properties before waiting until they become Candidate Recommendations, perhaps years from now.
Now, by all means, if you enjoy reading specifications, go for it! Naturally there’s a lot to be learned in there—but it’s far more practical to focus on what’s currently implemented and usable today, and those are the bits that we’ll be talking about in the rest of this chapter. Later, we’ll apply those bits in examples throughout the rest of the book.
I’ve always learned more about web design by dissecting examples in the wild rather than reading white papers, and that’s what we’ll stress in the pages that follow.
CSS3 IS FOR EVERYONE
I’ve been hearing this quite a bit from fellow web designers across the globe: "I can’t wait to use CSS3 . . . when it’s supported in all browsers."
But the truth is large portions of CSS3 are now very well supported in the majority of browsers, and everyone can begin using CSS3 right now. Fortunately you don’t have to think differently or make drastic changes to the way you craft websites in order to do so. How can anyone use CSS3 on any project? By carefully choosing the situations where we apply CSS3, focusing squarely on the experience layer.
Targeting the experience layer
If we’ve been doing things right over the past several years, we’ve been building upon a foundation of web standards (semantic HTML and CSS for layout, type, color, etc.), leaving many of the interaction effects—animation, feedback, and movement—to technologies like Flash and JavaScript. With CSS3 properties being slowly but steadily introduced in forward-thinking browsers, we can start to shift