

Pure CSS new 3D effect - texeltexel
http://www.romancortes.com/blog/pure-css-coke-can/
Even better than the 3D Meninas
======
coderdude
The other examples on his blog are even cooler... check this out.
<http://www.romancortes.com/blog/css-3d-meninas/>

~~~
ableal
And that one points to an explanation of the method, with diagrams and the
partial pictures used:

<http://www.romancortes.com/blog/3d-meninas-explained/>

------
flog
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
I got js disabled. And the effect worked fine.

~~~
flog
Yep, 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.

------
middus
Awesome hack. I don't really have any application for this, though.

~~~
amichail
Why are you interested in hacks? What's wrong with using better tech such as
OpenGL?

~~~
eru
> Why are you interested in hacks?

Did you notice the name of this site? (And yes, for practical purposes OpenGL
can be better.)

~~~
amichail
This site is more about startups than hacks.

~~~
eru
Perhaps. And the focus was even more sharp in the early days, when the name
was still "startup news". Still, interesting hacks seems to have their place
here.

------
citricsquid
<http://m00d.net/mirror/coke/> <\- mirrored.

------
robotron
This experiment is definitely worthy of a post. I haven't looked at how he did
that or the "CSS Bird" shadow effect but I'm impressed that can be done
without Javascript.

------
faramarz
Very cool. My question is.. how did he scan the coke-can?
<http://www.romancortes.com/ficheros/coke-label.jpg>

~~~
javanix
I bet you could do it without "scanning it" per se.

Taking a set of pictures and then using stitching software, followed by some
Photoshop touch-ups would probably give you a pretty good start.

------
nobosh
This is slick. I wonder how long it took to build that image/

------
polynomial
PROTIP: Try hiding the the width and the float on p and/or the padding and
width on the 'div div' with firebug.

------
sscheper
That looks great. No trying to be a dick, but what's the point?

~~~
tvon
To demonstrate cool shit you can do with CSS.

------
sandGorgon
wow!

------
levesque
Seems cpu intensive :) Server down.

~~~
tvon
Were it CPU intensive it would be so on the client side and have no affect on
the server, and fwiw, scrolling back and forth quickly I saw no cpu spike
(fairly new MBP, granted).

It's more likely that the site has been taken down by being posted on sites
like HN/reddit/digg/etc (it was easier when we could just say it was "the /.
effect").

------
vinhboy
Wow amazing. Now I feel like a total CSS noob.

