Subscribe to RSSRolling a coke can around with pure CSS
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.
Rolling a coke can around with pure CSS
CATEGORIES
| Web Development & Design |
 |
| Flash |
|
| Photography |
|
| Photoshop |
|
| Vector |
|
| Audio |
|
| Graphics |
|
| AfterEffects |
|
| SEO |
|
Translator
 |  |  |  |  |  |  |  |  |  |
 |  |  |  |  |  |  |  |  |  |
 |  |  |  |  |  |  |  |  |  |
 |  |  |  |  |  |  |  |  |  |
 |  | ||||||||
0 Comments
You can be the first one to leave a comment.