SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    an interesting css effect

    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.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,569
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Too bad my browser is tming out . I don't get to see the effect
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool. It's from the same guy who did the css-3d-meninas. He has a tutorial about that last one.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by johnyboy View Post

    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.

  7. #7
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think we'll soon see the full tut :-)
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  8. #8
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

    Quote Originally Posted by Luki_be View Post
    I think we'll soon see the full tut :-)
    yup that'd be good. 'tis a bit tricky to grasp.

  9. #9
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    His contact form is also unusual
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  10. #10
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,026
    Mentioned
    64 Post(s)
    Tagged
    0 Thread(s)
    Neat.

  11. #11
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •