Table Of ContentImprint
Copyright 2012 Smashing Media GmbH, Freiburg, Germany
Version 1: June 2012
ISBN: 978-3-943075-27-4
Cover Design: Ricardo Gimenes
PR & Press: Stephan Poppe
eBook Strategy: Thomas Burkert
Technical Editing: Talita Telma Stöckle, Andrew Rogerson
Idea & Concept: Smashing Media GmbH
Smashing eBook #19│Mastering CSS3│ 2
ABOUT SMASHING MAGAZINE
Smashing Magazine is an online magazine dedicated to Web designers and
developers worldwide. Its rigorous quality control and thorough editorial
work has gathered a devoted community exceeding half a million
subscribers, followers and fans. Each and every published article is carefully
prepared, edited, reviewed and curated according to the high quality
standards set in Smashing Magazine's own publishing policy. Smashing
Magazine publishes articles on a daily basis with topics ranging from
business, visual design, typography, front-end as well as back-end
development, all the way to usability and user experience design. The
magazine is — and always has been — a professional and independent
online publication neither controlled nor influenced by any third parties,
delivering content in the best interest of its readers. These guidelines are
continually revised and updated to assure that the quality of the published
content is never compromised.
ABOUT SMASHING MEDIA GMBH
Smashing Media GmbH is one of the world's leading online publishing
companies in the field of Web design. Founded in 2009 by Sven Lennartz
and Vitaly Friedman, the company's headquarters is situated in southern
Germany, in the sunny city of Freiburg im Breisgau. Smashing Media's lead
publication, Smashing Magazine, has gained worldwide attention since its
emergence back in 2006, and is supported by the vast, global Smashing
community and readership. Smashing Magazine had proven to be a
trustworthy online source containing high quality articles on progressive
design and coding techniques as well as recent developments in the Web
design industry.
Smashing eBook #19│Mastering CSS3│ 3
About this eBook
New possible uses of CSS appear every day, and you shouldn’t miss any of
them. This eBook Mastering CSS3 brings together tips on the newest
approaches to CSS, such as CSS animation guidelines, CSS grid frameworks
and modern techniques for constructing page layouts, among others. Also,
you will get guidelines on how to use CSS in email newsletters and how to
code email designs with improved readability and usability for the Web,
mobile and email desktop.
Table of Contents
CSS3 vs. CSS: A Speed Benchmark
Why We Should Start Using CSS3 And HTML5 Today
Connecting The Dots With CSS3
An Introduction To CSS3 Keyframe Animations
The New Hotness: Using CSS3 Visual Effects
Adventures In The Third Dimension: CSS 3D Transforms
How To Use CSS3 Pseudo-Classes
CSS3 Flexible Box Layout Explained
The Guide To CSS Animation: Principles And Examples
Beercamp: An Experiment With CSS 3D
Using CSS3: Older Browsers And Common Considerations
About The Authors
Smashing eBook #19│Mastering CSS3│ 4
CSS3 vs. CSS: A Speed Benchmark
Trent Walton
I believe in the power, speed and “update-ability” of CSS3. Not having to
load background images as structural enhancements (such as PNGs for
rounded corners and gradients) can save time in production (i.e. billable
hours) and loading (i.e. page speed). At our company, we’ve happily been
using CSS3 on client websites for over a year now, and I find that
implementing many of these properties right now is the most sensible way
to build websites.
Until today, all of that was based on an assumption: that I can produce a
pixel-perfect Web page with CSS3 quicker than I can with older image-
based CSS methods, and that the CSS3 page will load faster, with a smaller
overall file size and fewer HTTP requests. As a single use case experiment, I
decided to design and code a Web page and add visual enhancements
twice: once with CSS3, and a second time using background images sliced
directly from the PSD. I timed myself each round that I added the
enhancements, and when finished, I used Pingdom to measure the loading
times.
Here’s a fictitious Web page for Mercury Automobiles that might have been
online had the Interweb existed back in the 1950s. The page was designed
to showcase specific widely compliant CSS3 properties that in the past
would have had to be achieved using background images.
Smashing eBook #19│Mastering CSS3│ 5
Smashing eBook #19│Mastering CSS3│ 6
Above is a diagram that breaks down where I applied visual enhancements
first with CSS3, and then with CSS background images (i.e. the image-based
approach):
1. linear-gradient
2. border-radius
3. radial-gradient
4. text-shadow
5. box-shadow with RGBa
!e Experiment Process
Day 1
I coded the HTML and CSS from a structural standpoint. That means no
rounded corners, no shadows, no gradients and no images aside from logos
and car photographs. I decided to include Web fonts at this phase because I
wanted to focus on stuff that could also be done with the Web-safe font of
your choice (Helvetica, Georgia, etc.). Furthermore, @font-face was
around long before CSS3.
Smashing eBook #19│Mastering CSS3│ 7
Smashing eBook #19│Mastering CSS3│ 8
This gave me a blank canvas to add visual enhancements. The index page
shows the end of my day 1 work, as well as what unsupported browsers will
display, the appearance of which is structurally intact and visually pleasing.
More on this later, but the way I see it, older browsers aren’t penalized with
a broken layout, and modern browsers are rewarded with a few visual
bonuses. Part of implementing CSS3 is about planning ahead and designing
websites that look fine as a fallback.
Day 2
Starting with the base index page, I created a CSS3 page. It took 49 minutes
to complete. Here is the CSS code (css3.css):
/*-----CSS3 Started on 2/26/11 at 7:28 AM CST-----*/
h1 {
text-shadow: -3px 2px 0px #514d46; }
#nav {
-moz-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);
-webkit-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);
box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);
background-image: -moz-linear-gradient(top, #5c5850,
#48473e);
background-image: -webkit-gradient(linear,left top,left
bottom,color-stop(0, #5c5850),color-stop(1, #48473e));
background-image: -webkit-linear-gradient(#5c5850, #48473e);
background-image: linear-gradient(top, #5c5850, #48473e); }
nav a {
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px; }
nav a:hover {
background-color: #3a3e38;
background-color: rgba(47, 54, 48, .7); }
nav a.active {
background-color: #070807;
Smashing eBook #19│Mastering CSS3│ 9
background-color: rgba(7, 8, 7, .7); }
body {
background-image: -webkit-gradient(radial, 50% 10%, 0, 50%
10%, 500, from(#FBF8E3), to(#E6E3D0));
background-image: -moz-radial-gradient(50% 10%, farthest-
side, #FBF8E3, #E6E3D0); }
#learn_more, #details img {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0px 0px 8px rgba(88, 83, 74, .2);
-moz-box-shadow: inset 1px 0px 1px rgba(88, 83, 74, .2);
box-shadow: inset 0px 0px 1px rgba(88, 83, 74, .2); }
#learn_more a {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: #cc3b23;
background-image: -moz-linear-gradient(top, #cc3b23,
#c00b00);
background-image: -webkit-gradient(linear,left top,left
bottom,color-stop(0, #cc3b23),color-stop(1, #c00b00));
background-image: -webkit-linear-gradient(#cc3b23, #c00b00);
background-image: linear-gradient(top, #cc3b23, #c00b00); }
a {
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in; }
/*-----CSS3 Finished on 2/26/11 at 8:17 AM CST (49 minutes)
-----*/
Smashing eBook #19│Mastering CSS3│ 10
