Pure CSS new 3D effect(romancortes.com)

252 pointsby texeltexelvor 17 Jahren28 comments

romancortes.com

Pure CSS new 3D effect

http://www.romancortes.com/blog/pure-css-coke-can/

Even better than the 3D Meninas

14 comments

coderdudevor 17 Jahren

The other examples on his blog are even cooler... check this out. http://www.romancortes.com/blog/css-3d-meninas/

ablealvor 17 Jahren

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/

m0th87vor 17 Jahren

Strange, I had to refresh the page twice to get the effect to work correctly in Chrome. Each time it worked progressively better!

flogvor 17 Jahren

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)

ajrossvor 17 Jahren

No scripting. Here's a direct link to the effect page:

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.

morphirvor 17 Jahren

I got js disabled. And the effect worked fine.

flogvor 17 Jahren

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.

middusvor 17 Jahren

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

dagwvor 17 Jahren

Well I can think of a use or two for the bird example, but I'm unsure why I'd want to use this method over something javascript based.

ams6110vor 17 Jahren

I think it could be used on any kind of catalog page to allow users to rotate the product image. Wonder what it would take to add a vertical scroll so you could rotate it in any direction. This kind of image manipulation is something I have no experience in.

amichailvor 17 Jahren

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

eruvor 17 Jahren

> Why are you interested in hacks?

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

amichailvor 17 Jahren

This site is more about startups than hacks.

eruvor 17 Jahren

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.

citricsquidvor 17 Jahren

http://m00d.net/mirror/coke/ <- mirrored.

robotronvor 17 Jahren

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.

faramarzvor 17 Jahren

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

ElbertFvor 17 Jahren

Perhaps he cut it open.

javanixvor 17 Jahren

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.

noboshvor 17 Jahren

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

polynomialvor 17 Jahren

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

[deleted]vor 17 Jahren

sschepervor 17 Jahren

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

tvonvor 17 Jahren

To demonstrate cool shit you can do with CSS.

dtegartvor 17 Jahren

Well the first time you do it to see if you can, the second time because you can and the third time you use it to see if you can do something else

sandGorgonvor 17 Jahren

wow!

levesquevor 17 Jahren

Seems cpu intensive :) Server down.

tvonvor 17 Jahren

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").

[deleted]vor 17 Jahren

vinhboyvor 17 Jahren

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