CSS3 is here to make our lives easier as web designers and developers. While it’s not something we can always rely on heavily for layout purposes just yet, we can use it to enhance certain aspects of our designs by spending a considerably less amount of time doing so.
However, CSS3 has not been created for the sole purpose of making it easier and quicker to create a website but also so we can create much better sites than we ever could with CSS before. Here are a few examples of how CSS3 can improve the web.
Polaroids – View Demo
Despite not being around today, polaroid images are still iconic and because of this is still a great way to display photos. It’s simple enough to display a basic polaroid image using a white border on all sides with a thicker border for the bottom but we can enhance it with CSS3. As you’ll see in the demo, viewed in the latest versions of Safari, Firefox or Chrome, you can add an extra layer of depth with the addition of drop-shadow and transitions.
img {
border: 15px solid #fff;
border-bottom: 65px solid #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
}
img:hover {
-webkit-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(1deg) scale(1.05);
-moz-transform: rotate(1deg) scale(1.05);
}A subtle shadow gives the impression that is sitting on a flat surface and by scaling and increasing the size and positioning of the shadow on a hover state we can create the illusion that it has been raised slightly from the surface.
Buttons – View Demo
Why do buttons exist in web design? The web is an interactive medium and buttons are a form of interaction, they are easy to understand as a metaphor for real, physical buttons we use everyday on things like computers, mp3 players, televisions and any other electronic devices we use on a daily basis.
The key to making the buttons behave more like real physical buttons using CSS3 is using code such as shown below for the second button. To achieve a circle with CSS3, set a width and a height and define border-radius as half of those values.
button.two {
width: 30px;
height: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-indent: -9999px;
border: 1px solid #696969;
background: #696969 url(power.png) no-repeat 6px 5px;
}
The active state uses CSS3′s gradient ability to create a gradient that goes from dark at the top to a lighter colour at the bottom. To further emphasise the depression of a button, a CSS transform is applied, scaling down the button slightly. To maintain the background image of the power button, include it in the background property and separate the gradient values with a comma.
button.two:active {
-webkit-transform: scale(0.97);
-moz-transform: scale(0.97);
background: url(power.png) no-repeat 6px 5px, -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.13, #696969),
color-stop(0.72, #2a2a2a)
);
background: url(power.png) no-repeat 6px 5px, -moz-linear-gradient(
center bottom,
#696969 13%,
#2a2a2a 62%
);
}
The recessed border also uses CSS3 gradient to get the full effect. The border class is applied to a div containing the button.
.border {
margin: 0 auto;
height: 42px;
width: 42px;
display: block;
background-color: #fcfcfc;
-webkit-border-radius: 21px;
-moz-border-radius: 21px;
border-radius: 21px;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.13, #fcfcfc),
color-stop(0.72, #c0c0c0)
);
background: -moz-linear-gradient(
center bottom,
#fcfcfc 13%,
#c0c0c0 62%
);
-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
}View the demo in the latest versions of Safari, Chrome or Firefox.
DVD Animation – View Demo
CSS3 has an animation module which is plenty of fun to play with especially as you’ll be able to do things with CSS that you weren’t able to do before.
a:hover img[alt*="Disc"] {
-moz-transform: translate(50px,0) rotate(330deg);
-webkit-transform: translate(50px,0) rotate(330deg);
transform: translate(50px,0) rotate(330deg);
}Here the animation is being used to animate the DVDs as as you hover over the link that encapsulates bot the cover and the disc.
img[alt*="Disc"] {
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
Anyone who follows the work of Andy Clarke will likely have seen the DVD animation of the homepage of For a Beautiful Web. The above code demonstrates how Andy implemented this effect. At this point I want to highlight what you can do when you see something interesting on the web. All you have to do is have a look at the source code to see exactly how it works and learn from it to see how you could use it in the future. Now I’m not saying copy someone’s work but adjust it to your or your client’s needs.
Zurb also have an excellent demonstration of a similar effect which the wrote for Smashing Magazine.
BONUS: 3D Book Animation – View Demo
This one is for WebKit based browsers only so fire up the latest version of Safari or Chrome to see it in action and is based on this example found on the Surfin’ Safari blog. I’ll let you hunt around for code to see how it works as discovery is half the fun of learning about CSS. If you have any questions let me know in the comments and either myself or one of our great readers will help you out.
Tweet
Great job! I liked the one with DVD case especially, really cool
.
This was a rather cool post, good job, I love to see stuff on CSS3
Great post! I may use the dvd example on a project that I am building.
Though I do sprinkle some CSS3 goodies in currently projects, I do so very sparingly and only when it enhances the UX and not interferes with it. And I do believe that it will be a wonderful tool, once the specs are approved and adapted by the modern browsers. My only hope is that we are not about to enter an era of CSS3 abuse akin to the animated gif of the mid 1990s.
Brilliant! I really love the example with the polaroid! CSS3 is a lot of fun!
Opera 10.5 also supports CSS transitions, transforms, rounded borders and box shadow:
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
http://dev.opera.com/articles/view/css3-border-background-boxshadow/
Multi-columns can also help with realism. See my multi-page, multi-column book design proof-of-concept, and a tutorial on how to make this work not only with CSS3-capable browsers, but also with a Javascript solution for older browsers: multi-page, multi-column web pages.
Nice tips!
I’m afraid I have to be the jerk who points out that ‘Polaroid’ is misspelled in its section header.
Very good examples, gives me some inspiration.
I think you should add “-moz-transition” for Firefox 3.7+ in the DVD example though, it’s been supported in the alpha for a while.
Great work!
Oh, it is/was there already. Somehow I missed it. I’m too tired to be making comments right now ;p
nice css3 works, great
Very helpful, loved the Polaroid and DVD effects, will definitely use later on!
Thanks for sharing
Great! some examples that show very good the capability of CSS3 for design. CSS3 and HTML5 can build new design elements for designers but if browsers like IE ( any version! ) let them.. but i hope these events improve quickly…
great tutorial! really nice, simple and eye catch
thanks for share it !
PD: try to put “outline:none” because in firefox I can see a border when te buttons are in active positition…
Thanks dlv, that does help.
Cheers!
Really the DVD sample. Nice job..
The rotated photo on the polaroid looks like crap with the jaggies. never will that go over with a client.
I can’t view the last one. The Bonus one. I have tried in Safari 4.0.4, Chrome 5.0.307.7 beta and Opera 10.10. Nothing.
Just curious on what it might be.
You may need to download the latest version of WebKit. I found it doesn’t work in the latest version of Safari in OS X Leopard but does work in Snow Leopard.
Thanks for this. A very cool post. I especially like the 3-D book animation!
These are cool elements! I just wish someone would make a comprehensive list of the css3 webkit properties… That would be nice
Thanks for crediting me on your rotating DVD demo.
In case anyone is wondering about the markup and attribute selectors, here is the original write-up from November last year: http://forabeautifulweb.com/blog/about/realigning_for_a_beautiful_web_using_html5_css_transforms_and_transitions/
Thanks, Andy. I forgot to mention the attribute selectors so if anyone is wondering how they work, make sure to read all about them over at CSS Tricks.
Very interesting, but I wish we could use them in real life as well.
What do you mean? Of course you can use them.
nice post, very helpful, thanks
awesome tut. thanks for sharing.
Just what I was looking for. I really enjoy reading your articles!
Very interesting! However the Polaroid makes the edges of the picture all pixelated and ugly, and on the second button demo a line pop ups when it is pressed.
fantastic!
any ideas on getting captions onto the lower part of the polaroids?
Please use -o- vendor prefixes too (like -o-border-radius ), otherwise it won’t display in Opera, even though its capable of displaying it.
Also, it a good idea to include a non-vendor prefix version (like border-radius: ) for future compatibility’s sake.
Useful information’s thanks for sharing…
Meh… the polaroid looks like crap when rotated and the book animation doesn’t work. I’m using Chrome 5.0.375.70 on Windows 7. I do like the DVD example, your fonts, and your site in general, though!
Owesome and quite simple. Thanks for this tut. Good Luck!
You can change:
with:
/* CSS DVD Animation */a:hover img[alt*="Disc"] {
-moz-transform: translate(50px,0) rotate(330deg);
-webkit-transform: translate(50px,0) rotate(330deg);
-o-transform: translate(50px,0) rotate(330deg);
transform: translate(50px,0) rotate(330deg);
}
img[alt*="Disc"] {
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all .5s ease-in-out;
}
Into: