An interesting css effect

HTML & CSS
1

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:



that first label image is the only label image.

2

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

3

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.

4

Cool. It’s from the same guy who did the css-3d-meninas. He has a [URL=“http://www.romancortes.com/blog/3d-meninas-explained/”]tutorial about that last one.

5

Yes it’s a great demo and Timo was inspired to do a pepsi [U]version here.[/U]
We also talked about it in this thread also.

Don’t you just love CSS :slight_smile:

6

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.

7

I think we’ll soon see the full tut :slight_smile:

8

oh yeah, old news, didn’t realise.

Don’t you just love CSS :slight_smile:

hmm, it’s ok… :slight_smile: (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.

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

9
Off Topic:

His contact form is also unusual

10

Neat.

11

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! :slight_smile: