SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)

    Román Cortés' 3d css

    http://www.romancortes.com/blog/
    (CSS 3D Meninas, 14 Dec 2009)

    Pretty neat, not that I'd say it validates (but it easily could). I almost can't believe he wrote all that CSS by hand.

    Note, I actually had to sit with my mouse over the image for a while before I saw the whole thing, so if you don't see humans, give it a bit.

    Pretty neat, does not use CSS transforms or anything goofy. This is plain-old shuffling sprites around on :hover but done in a complicated and awesome way.

    Just don't show your clients this, they'll want you to do this with their photos lawlz.

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Yes, it did take quite a while to load the whole lot but it is certainly interesting stuff.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That is quite beautiful .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    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 agree, a lot of work went into it's creation but it's a very clever and beautifully presented effect.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Looks very good (but a lot of work)

    Reminds me a bit of Alex's demo where you get scrolling where you get scrolling when you open or close the window. There's some other demos here.

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Good lord, is Cameron Adams giving us the finger? : )

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Ah, I love that! Fantastic work and definitely inspiring.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  8. #8
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    very very awesome, i will have to make some of my own now, i was actually planning on doing that (something similar), right after finishing the infinitely looping css perpetual wheel i was making.

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Yuri: all I want for Christmas is a p0ny and some parent selectors.

    Get on it!

    BTW Cortés is the guy who did that "image" of Homer Simpson totally from abso-po'd letters, which didn't work for me back when I first saw it because you need Verdana. Now that I have that font, it looks fantastic.

  10. #10
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    darn! i can't believe i have to do all that now!
    [leaves to find some pony and parent selectors]

    BTW Cortés is the guy who did that "image" of Homer Simpson totally from abso-po'd letters, which didn't work for me back when I first saw it because you need Verdana. Now that I have that font, it looks fantastic.
    linky linky? xD

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    That is very impressive indeed!
    That CSS is mind numbing, it must have been his pet project for quite some time.

    I am kinda confused though about these pixel background-position values in decimals. I didn't think that browsers were really honoring that, I was under the impression they were rounding them out.

    Code CSS:
    a#a7:hover b.d1 {
        background-position: 313px 0;
        width: 313px
    }
    a#a7:hover b.d2 {
        background-position: -440.7px 18px;
    }
    a#a7:hover b.d3 {
        background-position: -2.33333333333px -216px;
        width: 397.666666667px
    }
    a#a7:hover b.d4 {
        background-position: -4.66666666667px -74px;
    }
    a#a8:hover img {
        left: 312px
    }
    a#a8:hover b.d1 {
        background-position: 312px 0;
        width: 312px
    }
    a#a8:hover b.d2 {
        background-position: -440.8px 18px;
    }
    a#a8:hover b.d3 {
        background-position: -2.66666666667px -216px;
        width: 397.333333333px
    }
    a#a8:hover b.d4 {
        background-position: -5.33333333333px -74px;
    }
    a#a9:hover img {
        left: 311px
    }
    a#a9:hover b.d1 {
        background-position: 311px 0;
        width: 311px
    }
    a#a9:hover b.d2 {
        background-position: -440.9px 18px;
    }
    a#a9:hover b.d3 {
        background-position: -3px -216px;
        width: 397px
    }
    a#a9:hover b.d4 {
        background-position: -6px -74px;
    }
    a#a10:hover img {
        left: 310px
    }
    a#a10:hover b.d1 {
        background-position: 310px 0;
        width: 310px
    }
    a#a10:hover b.d2 {
        background-position: -441px 18px;
    }
    a#a10:hover b.d3 {
        background-position: -3.33333333333px -216px;
        width: 396.666666667px
    }
    a#a10:hover b.d4 {
        background-position: -6.66666666667px -74px;
    }
    a#a11:hover img {
        left: 309px
    }
    a#a11:hover b.d1 {
        background-position: 309px 0;
        width: 309px
    }
    a#a11:hover b.d2 {
        background-position: -441.1px 18px;
    }
    a#a11:hover b.d3 {
        background-position: -3.66666666667px -216px;
        width: 396.333333333px
    }
    a#a11:hover b.d4 {
        background-position: -7.33333333333px -74px;
    }
    a#a12:hover img {
        left: 308px
    }
    a#a12:hover b.d1 {
        background-position: 308px 0;
        width: 308px
    }

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    That is very impressive indeed!
    That CSS is mind numbing, it must have been his pet project for quite some time.
    I was thinking the same thing. The CSS is massive. Kudos to this
    I am kinda confused though about these pixel background-position values in decimals. I didn't think that browsers were really honoring that, I was under the impression they were rounding them out.

    Code CSS:
    a#a7:hover b.d1 {
        background-position: 313px 0;
        width: 313px
    }
    a#a7:hover b.d2 {
        background-position: -440.7px 18px;
    }
    a#a7:hover b.d3 {
        background-position: -2.33333333333px -216px;
        width: 397.666666667px
    }
    a#a7:hover b.d4 {
        background-position: -4.66666666667px -74px;
    }
    a#a8:hover img {
        left: 312px
    }
    a#a8:hover b.d1 {
        background-position: 312px 0;
        width: 312px
    }
    a#a8:hover b.d2 {
        background-position: -440.8px 18px;
    }
    a#a8:hover b.d3 {
        background-position: -2.66666666667px -216px;
        width: 397.333333333px
    }
    a#a8:hover b.d4 {
        background-position: -5.33333333333px -74px;
    }
    a#a9:hover img {
        left: 311px
    }
    a#a9:hover b.d1 {
        background-position: 311px 0;
        width: 311px
    }
    a#a9:hover b.d2 {
        background-position: -440.9px 18px;
    }
    a#a9:hover b.d3 {
        background-position: -3px -216px;
        width: 397px
    }
    a#a9:hover b.d4 {
        background-position: -6px -74px;
    }
    a#a10:hover img {
        left: 310px
    }
    a#a10:hover b.d1 {
        background-position: 310px 0;
        width: 310px
    }
    a#a10:hover b.d2 {
        background-position: -441px 18px;
    }
    a#a10:hover b.d3 {
        background-position: -3.33333333333px -216px;
        width: 396.666666667px
    }
    a#a10:hover b.d4 {
        background-position: -6.66666666667px -74px;
    }
    a#a11:hover img {
        left: 309px
    }
    a#a11:hover b.d1 {
        background-position: 309px 0;
        width: 309px
    }
    a#a11:hover b.d2 {
        background-position: -441.1px 18px;
    }
    a#a11:hover b.d3 {
        background-position: -3.66666666667px -216px;
        width: 396.333333333px
    }
    a#a11:hover b.d4 {
        background-position: -7.33333333333px -74px;
    }
    a#a12:hover img {
        left: 308px
    }
    a#a12:hover b.d1 {
        background-position: 308px 0;
        width: 308px
    }
    [/QUOTE]

    They do round them out Ray, there is no such thing as a half pixel, or in this case 2/3rds of a pixel .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post

    They do round them out Ray, there is no such thing as a half pixel, or in this case 2/3rds of a pixel .
    Right, that is how I have always understood it too.

    So what is the point in all of these decimal values then if they are not really being honored?

    I guess that would be an appropriate question for his blog.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Right, that is how I have always understood it too.

    So what is the point in all of these decimal values then if they are not really being honored?

    I guess that would be an appropriate question for his blog.
    Perhaps he himself doesn't know it? Many people are under the assumption that a half pixel exists. I'll shoot him an email or post a question on his blog about it . I want to hear his answer. It should be interesting either way.
    PS-I can't seem to find the link to his CSS file now? I just had it and now I can't find it...
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Here is the html with internal css
    http://www.romancortes.com/ficheros/meninas.html

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Maybe the dimensions were generated by a program of some sort.

    It could also be that it's making use of Geckos floating integer calculations where it seems to remember and re-distribute fractional measurements across the range rather than on a one to one basis.

    If I understand correctly then that's what's being said here.

    http://ejohn.org/blog/sub-pixel-problems-in-css/

  17. #17
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Yuri
    linky linky? xD
    http://www.romancortes.com/blog/homer-css/

    My Spanish has slowly been ebbing away from me, but I'll give it a try (tho Yuri can prolly do it better lawlz)
    Since doing my design of the SigT logo in CSS two years ago, I had the idea to do more complex drawings which could use the Verdana font and absolute positioning in CSS, generating a form of vector image that could be directly embedded in the HTML code.

    I opted for Homer Simpson as he is sufficiently popular and recognisable:
    [homer pic here]
    The result is cross-browser; it's compatible in the following browsers under Windows:

    • Internet Explorer 5.5, 6 and 7

    • Opera 9

    • Firefox 2

    • Safari 3

    (I wonder) How does this appear in other OSes and browsers?
    (Note: in order to correctly see this, you need to have the Verdana font installed on your machine)
    ...
    I've also seen the sub-pixel thing in Javascripts and I always wondered why they did that.

  18. #18
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)

  19. #19
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Holy Crap!

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Very nice - clever use of fixed positioning


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
  •