I love movies. There’s nothing better than experiencing a movie that drops your jaw or makes you go quiet for a minute, contemplating what you just witnessed. This can happen when the story takes a turn you never saw coming. The end of the Sixth Sense or when Brad Pitt finds out what’s in the box at the end of Seven are particular favorites of mine.
Sometimes the director brings a moment to the screen that just isn’t possible in real life. One of these moments happened for me when I first watched The Matrix and encountered “bullet time.” I didn’t get to see it in the theater but I remember rewinding that initial rooftop scene at least ten times while watching at a friend’s apartment. Another awe-inspiring experience was flying with the camera as it panned over and revealed the massive structure of Minas Tirith in Lord of the Rings: Return of the King.
These effects create profound experiences that enhance the movie and take the storytelling to another level entirely.
Would The Matrix have been a good movie without “bullet time”? Sure, it possessed both a good story, and good cinematography. But it was the “bullet time” effect that sent it over the top, that made you remember.
Would Lord of the Rings have been a good movie without its visual effects? Yes, because the story is so incredible. But with the amazing effects, the story was taken to a whole new level that gave us a truly magical experience.
The same can be said for CSS3.
Is it absolutely necessary to use CSS3 on our sites today? No. You still need a good foundation of content, usability and markup. But using it to enhance these things can take a site over the top and give the user a wonderful experience.
Some have said that using CSS3 is akin to cheap parlor tricks and that by using them we’re trying to pull the wool over the eyes of our users. This may be true in some cases where the content is weak, but our job is much like a movie effects designer in that we want our users to have the best experience possible. Consider what John Gaeta, the head of effects for The Matrix said about this:
My job has nothing to do with making zingers. The point is not to knock you over with a visual trick. The point is to be able to construct events that are so complex, in terms of what human bodies need to do, that the total ‘effect’ is impossible choreography. ‘My God! It looks real, but it just can’t be.’
As web designers we want to enhance our content to the point where it gives the user pleasure to be on our site. Much like advances in technology have allowed amazing effects to be brought to the silver screen, CSS3 allows us to bring really cool enhancements for our users to experience.
What is CSS3?
CSS3 is the third iteration of the CSS specification recommended by the W3C.
So, way back in the day, around 1996, a group of people called the World Wide Web Consortium put together a document called a specification or spec that officially recommended ways for browsers to handle CSS. It included suggested standards for things like font properties, text color, alignments and so on. This was CSS1.
Always wanting to push the boundaries as to what browsers could possibly display, the CSS2 specification was officially recommended in 1998 and included things such as positioning and layering attributes. There were a number of errors in this spec which were corrected. And the spec was enhanced in what was called CSS2.1 which was officially recommended in June 2011.
The Consortium decided to split up the next iteration of the spec — CSS3 — into modules. Theoretically this spec would allow browsers to adopt and support new selectors getting them into the hands of designers more quickly. And that’s where we are at right now.
Browser Support
Since the spec has been split into modules — and with the introduction of CSS3 — browser support for new selectors has been good across the board with the exception of Internet Explorer.
Generally IE6, 7 or 8 do not support CSS3. The good news is that the current version, IE9, implements a majority of the working draft and IE10 supports even more.
So Realistically Can I Use it?
My answer is yes—regardless of browser support.
In Dan Cederholm’s book CSS3 for Web Designers he talked about the reality of implementing CSS3:
…the truth is everyone can begin using CSS3 right now. And 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? Because we’re going to carefully choose the situations where we apply CSS3, focusing squarely on the experience layer.
As I stated above, we don’t absolutely need these things, because we still have our content and markup. CSS3 serves to enhance the experience.
What About the Poor IE Users?
The latest browser statistics have the market share of IE anywhere from 30%-50% depending on which study you look at. So is it realistic to not give half of my users an experience? I’ll defer again to Cederholm as he says we need to group the elements of our sites into critical and non-critical categories.
| Critical |
Non-Critical |
| Branding |
Interaction |
| Usability |
Visual Rewards |
| Accessibility |
Feedback |
| Layout |
Movement |
For those items that are critical we would not use elements that are not compatible with all of our target browsers.
For example, if part of the branding and distinct look of your site is to have all of your containers with rounded corners you’re probably going to have to use images, or a different solution than the CSS3 border-radius selector. But, if having rounded borders is just an enhancement — not critical to the site’s look — you can freely use it now.
Fixes and Workarounds
There are a couple decent solutions to using CSS3 with all versions of IE now.
The Case for Progressive Enhancement
In the past, when presented with the problem of designing for multiple browsers, the typical solution was to make sure our sites “degraded gracefully.”
We would design sites for the latest browsers, but would make sure they would look ok in the older ones. I always pictured the user wincing and shying away from their computer as the page loaded, not sure if their computer would explode …
Progressive Enhancement takes the exact opposite approach.
We design initially for the lowest common denominator and then progressively build in enhancements. This is one reason this idea works so well with mobile sites and responsive design.
Using progressive enhancement as a design philosophy caters more to users that can’t upgrade because of IT policies. It also saves the designer loads of time and headaches because they aren’t forced to come up with crazy hacks and solutions to make everything look the same.
A Case Study using Drop Shadows
Say I want to use drop shadows on images in my blog posts. I have basically three options:
- Import all of my images into a graphics editor and apply a drop shadow to each image
- Create an shadow in a graphics editor and then have each image use that shadow as a background with css
- Use the box-shadow element to apply a shadow to your image or container
All three will work, but:
- I’m spending loads of time creating these shadows for every image and increasing my file size
- I have to have crazy markup and rules to fit every image size or be restricted to one size. I also lose the ability to use the background selector for other purposes.
When I use the css3 box-shadow element I save myself developing time. I can preview changes quickly in the browser without having to create multiple images. I have the option to use my background for something other than a shadow and I save file size and processing time.
Just because some people are color blind doesn’t mean we design a site without color.
Examples of CSS3 You Can Use Right Now
Multiple Backgrounds
This property allows you to specify multiple backgrounds in a container with nothing more than a comma separated list in your css. The image listed first will appear on top of all others. In this example I’ve actually used only two images but have re-used the airmail strip to have it appear on the bottom of my container.
.envelope {
background-color: #e3dfba;
background:
url(images/airmail.png) top repeat-x,
url(images/airmail.png) bottom repeat-x,
url(images/grunge.jpg) no-repeat;
height: 400px;
width: 600px;
}
Border Radius
The border-radius property allows you to round the borders of your element. To learn more visit The Art of the Web.
.envelope {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.env-inner {
background-color: #1699e5;
background: url(images/blue-grunge.jpg);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
height: 319px;
float: left;
margin: 42px 20px;
width: 560px;
}
Box Shadow
In the example below we’ve added a shadow to our container. There are four parts to box shadow:
- The horizontal offset of the shadow. A positive value means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
- The vertical offset of the shadow. A negative value means the box-shadow will be above the box, a positive one means the shadow will be below the box.
- The blur radius. If the value is set to 0 the shadow will be sharp. The higher the value the blur will increase.
- The color of the shadow
.shadow {
-moz-box-shadow: 0 0 5px #666;
-webkit-box-shadow: 0 0 5px #666;
box-shadow: 0 0 5px #666;
}
CSS Transforms
The transform property is used to rotate, skew and scale elements. It can be applied to images, containers, and text elements.
In our example below we’ve rotated our containing element basically 1 degree backwards. It would have also worked to use -1deg for our value.
We’ve also used a scale transform on the sun graphic. Most often this property is used in conjunction with a hover action. Make sure you hover over the sun to see it in action. The last example in the article shows how this can be done smoothly with a transition property added.
For more information on using the transform property click over to zenelements.
.rotate {
-moz-transform: rotate(359deg);
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
.sun {
-moz-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.sun:hover {
-moz-transform: scale(2);
-webkit-transform: scale(2);
cursor: pointer;
transform: scale(2);
}
Child Pseudo-Selectors
ul.envelope-list li {
background-color: #e3dfba;
background:
url(images/airmail.png) top repeat-x,
url(images/airmail.png) bottom repeat-x,
url(images/grunge.jpg) no-repeat;
float: left;
height: 98px;
list-style-type: none;
margin: 10px 10px 10px 0;
width: 98px;
}
ul.envelope-list li:last-child {
margin: 10px 0 10px 0;
}
In this example we are changing the margin for the last list item. Last child refers to the last child of the parent item. So in this case the css will be applied to last li of the ul with the class of evelope-list.
ul.envelope-list-2 li:nth-child(2) {
background:
url(images/airmail.png) top repeat-x,
url(images/grunge.jpg) no-repeat;
}
In this example we are changing the background for the second item in the list. So nth-child lets us specify a specific numbered item of the parent element to change.
ul.envelope-list-3 li:nth-child(3n) {
background:
url(images/airmail.png) bottom repeat-x,
url(images/grunge.jpg) no-repeat;
}
In this last example we are applying a formula where the css is being applied to every 3rd item in the list. So every 3rd list item in the ul will have a different background.
Having a Bit of Fun
In this last example we’ll combine several of the examples we’ve already done plus add in some transitions to smooth everything out.
<div class="envelope radius">
<div class="env-inner shadow airplane">
<div class="text">
<div class="wave">Wave Next Time</div>
<div class="iowa">Iowa</div>
<div class="fly">You Fly Over</div>
</div>
<div class="sun-animate"><img src="sun.png"></div>
</div>
</div>
.airplane {
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
background:
url(images/airplane.png) no-repeat 600px -34px,
url(images/blue-grunge.jpg);
transition: all 0.7s ease-in-out;
}
.airplane:hover {
background:
url(images/airplane.png) no-repeat 0 -34px,
url(images/blue-grunge.jpg);
}
.sun-animate {
-moz-transform: scale(1);
-webkit-transform: scale(1);
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
float:left;
margin-top:-270px;
opacity: 1;
transform: scale(1);
transition: all 0.7s ease-in-out;
}
.sun-animate:hover {
-moz-transform: scale(10);
-webkit-transform: scale(10);
cursor: pointer;
opacity: 0;
transform: scale(10);
}
.text {
color:#efefef;
float:left;
font-family: Oswald;
margin-top:60px;
text-align:center;
text-transform:uppercase;
width:100%;
}
.iowa {
font-size: 130px;
height: 116px;
line-height: 107px;
}
.wave {
font-size: 40px;
height:36px;
line-height:35px;
margin:5px 0;
}
.fly {
font-size: 45px;
height:40px;
line-height:37px;
}
Iowa
Wave Next Time
You Fly Over
Resources
Find out what CSS3 properties and selectors can be used by today’s browsers:
http://www.findmebyip.com/litmus/
http://caniuse.com
All Around CSS Information and Goodness:
http://css-tricks.com
http://www.w3schools.com/css/default.asp
http://www.zenelements.com/blog/
http://trentwalton.com/category/articles/
Experimental Uses of CSS3
http://tympanus.net/codrops/
Books
CSS3 For Web Designers
Stunning CSS3
]]>
As many of you know, WordPress 3.3 was officially released. We wanted to let you know that we’ve updated the StudioPress site and all of the Genesis child theme demo sites — and all is well.