3 ms·
Nice effect. I think a bit of JS is being used to create the DIV structure, but that's not important. It could also be improved a bit: you could remove the sh
by flog 17y ago
Nice effect.
I think a bit of JS is being used to create the DIV structure, but that's not important.
It could also be improved a bit: you could remove the shading gradient from the Coke can mask PNG, and render the shading using an CSS gradient with RGBA values.
That would mimic the specular highlighting, and you could also animate the shading.
I still haven't quite grok'd the displacement method though... it must be carefully calculated background x pos offsets? (I don't have firebug on this machine)
- morphir 17y agoI got js disabled. And the effect worked fine.
- flog 17y agoYep, cool - it just means a lot of empty div structures (n * width) to contain the samples... I assumed JS as it would have been more efficient.
- ajross 17y agoNo scripting. Here's a direct link to the effect page: http://www.romancortes.com/ficheros/css-coke.html http://www.romancortes.com/ficheros/css-coke.html Looks like it's just slicing up a wraparound texture vertically -- no scaling, just subsampling. The can and highlight are just composited on top. Slick and clever. Note that it's really not "3D" in a meaningful sense. It's doing pixel-aligned warping only, and is hard-coded to a cylinder (any "lathe" shape would also work). This is the same trick that the Amiga used for the bouncing ball in 1985.