I’m going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.
Laying the foundations
First we are going to make our images look like mini polaroids with captions. Here’s the markup:
<div class="polaroid pull-right">
<img src="../img/seal.jpg" alt="">
<p class="caption">Found this little cutie on a walk in New Zealand!</p>
</div>
You’ll notice we’re using a somewhat presentational class of pull-right here. This means the logic is kept separate from the code that applies the polaroid effect. The polaroid class has no positioning, which allows it to be used generically anywhere that the effect is required. The pull classes set a float and add appropriate margins—they can be used for things like blockquotes as well.
.polaroid {
width: 150px;
padding: 10px 10px 20px 10px;
border: 1px solid #BFBFBF;
background-color: white;
-webkit-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
-moz-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
}
The actual polaroid effect itself is simply applied using padding, a border and a background colour. We also apply a nice subtle box shadow, using a property that is supported by modern WebKit browsers and Firefox 3.5+. We include the box-shadow property last to ensure that future browsers that support the eventual CSS3 specified version natively will use that implementation over the legacy browser specific version.
The box-shadow property takes four values: three lengths and a colour. The first is the horizontal offset of the shadow—positive values place the shadow on the right, while negative values place it to the left. The second is the vertical offset, positive meaning below. If both of these are set to 0, the shadow is positioned equally on all four sides. The last length value sets the blur radius—the larger the number, the blurrier the shadow (therefore the darker you need to make the colour to have an effect).
The colour value can be given in any format recognised by CSS. Here, we’re using rgba as explained by Drew behind the first door of this year’s calendar.
Rotation
For browsers that understand it (currently our old favourites WebKit and FF3.5+) we can add some visual flair by rotating the image, using the transform CSS 3 property.
-webkit-transform: rotate(9deg);
-moz-transform: rotate(9deg);
transform: rotate(9deg);
Rotations can be specified in degrees, radians (rads) or grads). WebKit also supports turns unfortunately Firefox doesn’t just yet.
For our example, we want any polaroid images on the left hand side to be rotated in the opposite direction, using a negative degree value:
.pull-left.polaroid {
-webkit-transform: rotate(-9deg);
-moz-transform: rotate(-9deg);
transform: rotate(-9deg);
}
Multiple class selectors don’t work in IE6 but as luck would have it, the transform property doesn’t work in any current IE version either. The above code is a good example of progressive enrichment: browsers that don’t support box-shadow or transform will still see the image and basic polaroid effect.
Animation
WebKit is unique amongst browser rendering engines in that it allows animation to be specified in pure CSS. Although this may never actually make it in to the CSS 3 specification, it degrades nicely and more importantly is an awful lot of fun!
Let’s go nuts.
In the next demo, the image is contained within a link and mousing over that link causes the polaroid to animate from being angled to being straight.
Here’s our new markup:
<a href="http://www.flickr.com/photos/nataliedowne/2340993237/" class="polaroid">
<img src="../img/raft.jpg" alt="">
White water rafting in Queenstown
</a>
And here are the relevant lines of CSS:
a.polaroid {
/* ... */
-webkit-transform: rotate(10deg);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
a.polaroid:hover,
a.polaroid:focus,
a.polaroid:active {
/* ... */
-webkit-transform: rotate(0deg);
}
The @-webkit-transition@ property is the magic wand that sets up the animation. It takes three values: the property to be animated, the duration of the animation and a ‘timing function’ (which affects the animation’s acceleration, for a smoother effect).
-webkit-transition only takes affect when the specified property changes. In pure CSS, this is done using dynamic pseudo-classes. You can also change the properties using JavaScript, but that’s a story for another time.
Throwing polaroids at a table
Imagine there are lots of differently sized polaroid photos scattered on a table. That’s the effect we are aiming for with our next demo.
As an aside: we are using absolute positioning to arrange the images inside a flexible width container (with a minimum and maximum width specified in pixels). As some are positioned from the left and some from the right when you resize the browser they shuffle underneath each other. This is an effect used on the UX London site.
This demo uses a darker colour shadow with more transparency than before. The grey shadow in the previous example worked fine, but it was against a solid background. Since the images are now overlapping each other, the more opaque shadow looked fake.
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
On hover, as well as our previous trick of animating the image rotation back to straight, we are also making the shadow darker and setting the z-index to be higher than the other images so that it appears on top.
And Finally…
Finally, for a bit more fun, we’re going to simulate the images coming towards you and lifting off the page. We’ll achieve this by making them grow larger and by offsetting the shadow & making it longer.
Screenshot 1 shows the default state, while 2 shows our previous hover effect. Screenshot 3 is the effect we are aiming for, illustrated by demo 4.
a.polaroid {
/* ... */
z-index: 2;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-transition: all 0.5s ease-in;
}
a.polaroid:hover,
a.polaroid:focus,
a.polaroid:active {
z-index: 999;
border-color: #6A6A6A;
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: rotate(0deg) scale(1.05);
-moz-transform: rotate(0deg) scale(1.05);
transform: rotate(0deg) scale(1.05);
}
You’ll notice we are now giving the transform property another transform function: scale, which takes increases the size by the specified factor. Other things you can do with transform include skewing, translating or you can go mad creating your own transforms with a matrix.
The box-shadow has both its offset and blur radius increased dramatically, and is darkened using the alpha channel of the rgba colour.
And because we want the effects to all animate smoothly, we pass a value of all to the -webkit-transition property, ensuring that any changed property on that link will be animated.
Demo 5 is the finished example, bringing everything nicely together.
CSS transitions and transforms are a great example of progressive enrichment, which means improving the experience for a portion of the audience without negatively affecting other users. They are also a lot of fun to play with!
Further reading
- -moz-transform – the mozilla developer center has a comprehensive explanation of transform that also applies to
-webkit-transformandtransform. - CSS: Animation Using CSS Transforms – this is a good, more indepth tutorial on animations.
- CSS Animation – the Safari blog explains the usage of
-webkit-transform. - Dinky pocketbooks with transform – another use for transforms, create your own printable pocketbook.
- A while back, Simon wrote a little bookmarklet to spin the entire page… warning: this will spin the entire page.
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
14/12/2009
FYI box-shadow has been removed from the CSS3 spec, http://www.w3.org/TR/css3-background/#the-box-shadow, for further discussion and most likely won’t make it back in. We are more likely see a new property like drop-shadow, http://www.bradclicks.com/cssplay/drop-shadow/Drop-Shadow.html, replace box-shadow. But of course it’s all still in discussion.
Also Firefox 3.7 (Minefield) also has support for transitions through -moz-transition. Since transitions are a working draft probably would be wise to declare it like you have for box-shadow.
Vote Helpful or Unhelpful
14/12/2009
I love how easy it is to add such fun effects to our projects now—thanks for this great example!
One question though: what do you think about the use of box-shadow since it’s been removed from the CSS3 specs? I felt it was a great property that saved us a lot of work, but it’s true that the specs were a bit blurry (the way it handles overflowing, etc).
Vote Helpful or Unhelpful
14/12/2009
another excellent article ~ been trying to find some time and a suitable project to play with these for a while now…
Touches like these will just add that certain extra :-) even if a little limited for now….
Thanks for the demos and links, Natalie :)
(also looks like you and Simon had a great time in NZ :-)
Vote Helpful or Unhelpful
14/12/2009
This is a good one. I saw something similar to this awhile back over on CSS tricks and liked it so much that I made it into a WordPress plugin to get photos from flickr.
Vote Helpful or Unhelpful
14/12/2009
As mentioned above, Firefox trunk builds have support for CSS transitions.
Vote Helpful or Unhelpful
14/12/2009
Great! The box-shadow does not seem to be recognized in Firebug yet, but it renders great in Firefox.
Vote Helpful or Unhelpful
14/12/2009
Last time I tested Firefox 3.7 (Minefield), -moz-transition didn’t support animating -moz-transform property.. hopefully that’ll get in there.
Great article!
Vote Helpful or Unhelpful
14/12/2009
Nice article Nat! I was playing around with something similar a while ago. Add a bit of jQuery in and you can have lots of fun with animation to really throw the images and a bit of drag & drop goodness to attemt to improve the usability :) Might finish it off and write it up sometime…
Vote Helpful or Unhelpful
14/12/2009
I am loving CSS animations in safari and hope they make it to other browsers soon. The only problem I see is that the redraw speed can sometimes cause some pretty weird flickering which I really dislike.
Hopefully these things will get ironed out soon because these features are really nice.
Great article.
Vote Helpful or Unhelpful
14/12/2009
Thank you, thank you, thank you for also caring about keyboard users! I’ve seen so many tutorials on awesome CSS transitions that forgot basic usability. It can be done right.
Vote Helpful or Unhelpful
14/12/2009
Some very cool tricks and nice clean mark-up. Looking forward to trying them out.
I also really like the design / layout of these 24 ways pages, but scrolling them up and down in Chrome makes an extraordinary demand on the CPU. At first I thought it was the transitions, but having run a few experiments, it is a site-wide issue. Try it out…
Vote Helpful or Unhelpful
14/12/2009
Nice use cases!
Regarding this point:
“IE6 doesn’t handle multiple classes” the nit-picky ( but important ) clarification is that IE6 will not always CASCADE correctly with multiple class selectors if the secondary selectors are shared across multiple contexts.
While shirt.big and shoe.big would be problematic, classes shirt.bigShirt and shoe.bigShoe would work fine in IE6.
IE6 just applies multiple class rules individually ( shirt & bigShirt ) without regard to any multi-class context.
Vote Helpful or Unhelpful
14/12/2009
I tried rotation a few weeks back but it looks absolutely awful in both Chrome and Firefox. The text was so jagged it was barely legible. Not for me until the browser performance improves.
Vote Helpful or Unhelpful
14/12/2009
My favorite 24 Ways entry of 2009 thus far!
I’m adding part of this technique to my online holiday newsletter – it will definitely impress the friends and family… at least the one’s on modern, standards based browsers!
Thanks for the knowledge!
Vote Helpful or Unhelpful
14/12/2009
Yeah, I see a noticeable degradation in the image quality when you rotate it. None the less it is a cleaner more dynamic method then using photoshop. I have now implemented it in my site. You can also get rotation in ie with :
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
but I don’t think you can get all angles only 0, 90, 180, 270.
check Snook.ca for more.
Vote Helpful or Unhelpful
14/12/2009
Rubbish!
Now I have to redo my perfectly crafted, absolute positioned, overlapping, z-indexed, jquerified Navigation Menu on my personal website.
Vote Helpful or Unhelpful
15/12/2009
Rotate has to be the best thing I’ve learned yet this year on 24ways. (although I’m yet to try it outside of Safari…)
Vote Helpful or Unhelpful
15/12/2009
I agree with Alan, this is my favorite 24 ways article so far this year. Great job Natalie!
Vote Helpful or Unhelpful
16/12/2009
Thanks for writing this! I am blown away at the possibilities with CSS. It’s also fairly simple to implement these techniques, which is fantastic.
Vote Helpful or Unhelpful
16/12/2009
Great article and good somewhat useful examples!
Just one note: as many mentioned already you have missed Firefox 3.7 which started supporting transitions.
Since this is experimental stuff it would be better to include as many browsers as possible to experiment. So browser developers can use your examples as additional test cases and in a couple months or so your examples will work in more browsers (Firefox 3.7, Opera 10 Mobile and Opera 11).
Here is CSS specs that supported by Opera: http://www.opera.com/docs/specs/presto23/#css They use
oprefix.BTW, I also recently went nuts with CSS3 transformations :-) Comments are welcome.
Vote Helpful or Unhelpful
16/12/2009
@dougwig – shirt.big and shoe.big would work fine in IE6 if you styled an element inside them instead e.g. “shirt.big span” and “shoe.big span” would style the spans as expected.
I wrote a blog post about this many moons ago:
The #id.class selector in IE6
Although it talks about using an ID and a class, the same applies for multiple classes.
P.S. Great article! =)
Vote Helpful or Unhelpful
16/12/2009
Best article on 24 so far, really cool!
Vote Helpful or Unhelpful
16/12/2009
You actually can do rotation in IE6+. The implementation transforms an object using a matrix, and if you can remember your maths lessons you can do far more than just rotate.
here is the link. http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx
Vote Helpful or Unhelpful
17/12/2009
I like the effect, I want to use it, but what is the alternative for something similar that complies with web standards?
Vote Helpful or Unhelpful
17/12/2009
@Luke – this complies with web standards. The experimental browser features are implemented using
-mozand-webkitprefixes, as per the spec, so that they are silently discarded by older browsers without causing harm.Vote Helpful or Unhelpful
17/12/2009
I found very interesting the way CSS handles rotation and transitions. It’s now possible to save a lot of effort with Javascript codes and files.
Great article describing this new feature. Thanks!
Vote Helpful or Unhelpful
19/12/2009
I am all for box shadows, better floats, etc but animation from CSS?
That is going too far IMHO as that is [now] moving into the realm of Javascript; that separation is looking very blurry and if it [WebKit] continues down that road then I for one will not be using any browser based off the back of it.
Lets keep the technologies separate okay?
Just because you can doesn’t mean to say that you should – try to imagine the fun those at Microsoft will have trying to implement those features, then try to imagine the bugs we would have and the hacks and work arounds.
The grass ain’t always greener on the other side.
Vote Helpful or Unhelpful
24/12/2009
Thank you for your really interesting article. Inspired by your entry, I’ve just written a CSS3 transform compatible script for IE8.
CSS3 Tranform Gallery for IE
Vote Helpful or Unhelpful
27/12/2009
Wouldn’t your technique work a little more universally if you set the width property of the .polaroid class to auto, or didn’t set it at all?
I’m just thinking the polaroid container could then apply well to images of any width.
Vote Helpful or Unhelpful
04/01/2010
Thanks for the article, I have been using css based galleries for many years, I love this type of demo as it shows the way forward.
I will have to try this on my own website soon.
Vote Helpful or Unhelpful
01/02/2010
Really like your creative application of CSS. It’s people like you that make this online space a more beautiful place. I especially love the first example. So easy and so effective! I’m going to say goodbye to the boring straight up and down pictures. Time to jazz things up. Thanks.
Vote Helpful or Unhelpful
22/02/2010
After first reading this I was also concerned about these methods infringeing on JavaScript territory, but having thought it through I think this is the right direction.
The transitions are living up to their name – giving a visual effect to a transition between states e.g. :hover. For me, this still comes under the umbrella of presentation rather than behaviour. Transitions don’t manipulate the DOM which is what JavaScript is really all about. It’s fine.
I particularly like the idea of applying transitions to :focus as well as :hover so that keyboard users get some nice visual feedback as they tab through the document.
Vote Helpful or Unhelpful
13/03/2010
Hi Nat,
Thanx muchly for your great article. I have just started playing with CSS3 to see how much of it will do my websites good.
I have been experimenting with your code for a few days now. It is such a pity that one company is showing us such a CSS3 foot-dragging exercise, thus holding up the whole show.
Regards to you in the UK from me in Germany (expat) KenHen
Vote Helpful or Unhelpful
24/04/2010
Wow, great CSS 3 examples. Very useful. Great job Natalie..!
Vote Helpful or Unhelpful
Impress us