Wednesday, January 27th, 2010
Rolling a coke can around with pure CSS
<p>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!
The key pieces used:
CSS:
-
-
p {
-
background-image: url(coke-label.jpg);
-
background-attachment: fixed;
-
background-repeat: repeat-x;
-
width: 1px;
-
}
-
-
#x1 {background-position: 5px 30px;}
-
#x2 {background-position: 0px 30px;}
-
#x3 {background-position: -3px 30px;}
-
#x4 {background-position: -6px 30px;}
-
#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]
Related Content:
4.7 rating from 152 votes
Awesome !
I love it!
Awesome x2
Very very cool :O
Coo! But… Isn’t it rolling in an unnatural direction?
Very nifty effect.
Nice example, although is not anything new!
Wow. That’s awesome.
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.
@eyelidlessness – yeah, but at least they’re not as bad as IE6.
that is completely awesome!!!
Nice effect
Amazingly cool!!
excelent one verry ingenious
Do they pay the paramilitary death squads in coke? or pepsi perhaps?
@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.
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.
It actually works if you click on ‘rolling CSS coke can’, though it sends you to another page. So, no coke joke
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.
Actually, Eyelidlessness, it’s still rickrolled. Justo click on the new photo and see… He, he :o)
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.