an interesting css effect

[johnyboy]

quite an interesting non-javascript pure css effect:

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

haven't fully worked out how it's done. the foreshortening of the label when it's near the edge of the can is got somehow by many paragraphs getting narrower and narrower towards the edge of the can. maybe the foreshortening is got by simply using the thin slithers of the image in such a way to miss out parts of the image near the edges thus achieving the foreshortening effect. don't quite get it but i think it's something like that.

these are the two main images:

http://www.romancortes.com/ficheros/coke-label.jpg
http://www.romancortes.com/ficheros/coke-can.png

that first label image is the only label image.

[RyanReese]

Too bad my browser is tming out . I don't get to see the effect

[johnyboy]

yes it seems to be a bit of a dodgy server; much longer delay than usual, but i find it does work in the end.

[Luki_be]

Cool. It's from the same guy who did the css-3d-meninas. He has a tutorial about that last one.

[Paul O'B]

Yes it's a great demo and Timo was inspired to do a pepsi version here.
We also talked about it in this thread also.

Don't you just love CSS

[Paul O'B]

haven't fully worked out how it's done. the foreshortening of the label when it's near the edge of the can is got somehow by many paragraphs getting narrower and narrower towards the edge of the can. maybe the foreshortening is got by simply using the thin slithers of the image in such a way to miss out parts of the image near the edges thus achieving the foreshortening effect. don't quite get it but i think it's something like that.

I've only looked quickly but it seems the edges are created with 1px wide paragraphs but the fixed background is shifted by 2 pixels each time resulting in 1px being missing from the image at the edges.

[Luki_be]

I think we'll soon see the full tut :-)

[johnyboy]

We also talked about it in this thread also.

oh yeah, old news, didn't realise.

Don't you just love CSS

hmm, it's ok... (i'm still seathing from many, many, many wasted hours but that's more down to ie than css.)

I've only looked quickly but it seems the edges are created with 1px wide paragraphs but the fixed background is shifted by 2 pixels each time resulting in 1px being missing from the image at the edges.

yup thought it was something like that.

I think we'll soon see the full tut :-)

yup that'd be good. 'tis a bit tricky to grasp.

[Luki_be]

Off Topic:

His contact form is also unusual

[Michael Morris]

Neat.

[AlexDawson]

I think it's really clever how people are taking the existing CSS elements and pushing them to show how fresh unique effects can be achieved through the use of style itself. It's great to see this guy innovating with style (in opposition to just re-using the same conventions over and over), so kudos to him!