Wednesday, January 27th, 2010

Rolling a coke can around with pure CSS

Category: CSS, Showcase

Román Cortés is having a lot of fun with CSS tricks these days. He just built an example rolling CSS coke can that uses background-attachment, background-position, and a few other tricks to get the effect. No fancy CSS3 needed here!

Pure CSS Coke Can by Román Cortés

The key pieces used:

  1. p {
  2.     background-image: url(coke-label.jpg);
  3.     background-attachment: fixed;
  4.     background-repeat: repeat-x;
  5.     width: 1px;
  6. }
  8. #x1 {background-position: 5px 30px;}
  9. #x2 {background-position: 0px 30px;}
  10. #x3 {background-position: -3px 30px;}
  11. #x4 {background-position: -6px 30px;}
  12. #x5 {background-position: -8px 30px;}

It helps to see the can and the wrapper that is placed around it.



[Edit: Fixed the hotlinking – well played Román – he Rick-rolled us]

Posted by Dion Almaer at 6:33 am

4.7 rating from 160 votes


Comments feed TrackBack URI

Awesome !

Comment by ywg — January 27, 2010

I love it!
Awesome x2

Comment by DamirSecki — January 27, 2010

Very very cool :O

Comment by WyriHaximus — January 27, 2010

Coo! But… Isn’t it rolling in an unnatural direction?

Comment by vdidenko — January 27, 2010

Very nifty effect.

Comment by iliad — January 27, 2010

Nice example, although is not anything new!

Comment by stoimen — January 27, 2010

Wow. That’s awesome.

Comment by Skilldrick — January 27, 2010

Lest Coca-Cola get free advertising without criticism, let’s not forget that the company hires paramilitary death squads to intimidate union organizers in Colombia, often leading to their abduction, torture and sometimes even murder.

Comment by eyelidlessness — January 27, 2010

@eyelidlessness – yeah, but at least they’re not as bad as IE6.

Comment by Yansky — January 27, 2010

that is completely awesome!!!

Comment by YangombiUmpakati — January 27, 2010

Nice effect

Comment by Darkimmortal — January 27, 2010

Amazingly cool!!

Comment by Thasmo — January 27, 2010

excelent one verry ingenious

Comment by dragospopovici — January 28, 2010

Do they pay the paramilitary death squads in coke? or pepsi perhaps?

Comment by bucketface — January 28, 2010

@stoimen it’s new to me, oh mr. ‘I’ve seen it all before. *yawn*’

I’ve read the source several times and I still can’t really figure out how it works.

Comment by Breton — January 28, 2010

They pay the paramilitaries in money, obviously. I’m not sure why human rights abuse is such a joke.

Now, this post getting rick-rolled, that’s funny.

Comment by eyelidlessness — January 29, 2010

It actually works if you click on ‘rolling CSS coke can’, though it sends you to another page. So, no coke joke

Comment by Bosworth — January 29, 2010

Bosworth, LOL I knew it was replaced with Astley because Ajaxian hotlinked; the address of the image came from the same domain and had “ajaxian-rolled” or something similar in the filename.

Comment by eyelidlessness — January 29, 2010

Actually, Eyelidlessness, it’s still rickrolled. Justo click on the new photo and see… He, he :o)

Comment by Bosworth — January 29, 2010

Bosworth, maybe it’s your cache? Going to the actual page shows the original coke can. The Flickr link is, quite obviously, a screen capture from before it was replaced.

Comment by eyelidlessness — January 29, 2010

Leave a comment

You must be logged in to post a comment.