SitePoint Sponsor

User Tag List

Page 4 of 7 FirstFirst 1234567 LastLast
Results 76 to 100 of 165
  1. #76
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    no i meant, just use :active and nothing else.

  2. #77
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    no i meant, just use :active and nothing else.
    I see!
    But I am not sure whether that would work.
    Maybe a combination of :active and the adjacent sibling selector (+) could work.

  3. #78
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    http://timo.geekcavecreations.com/affe.html

    ok here is your animation thing done without the use of :hover
    it does not seem to work in safari, but works in FF,Opera,IE8

    i don't see much of an advantage in my method, with the exception that you don't need to keep hovering your mouse over the box, it is now a looping image, and that now he does a moonwalk.

  4. #79
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    and that now he does a moonwalk
    ha ha

  5. #80
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    timo.geekcavecreations.com/affe.html

    ok here is your animation thing done without the use of :hover

    i don't see much of an advantage in my method, with the exception that you don't need to keep hovering your mouse over the box, it is now a looping image, and that now he does a moonwalk.
    Nice!
    I like that it moves forwards with "tab" and backwards with "click".

    My original idea was that you would have to click on the monkey. I made that work with the hover-variation in FF. But it did not work well in other browsers...

  6. #81
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    after looking at http://www.romancortes.com/blog/pure-css-coke-can/ i decided to recreate the whole thing with my preferred unhealthy bubbling beverage.
    http://timo.geekcavecreations.com/pepsi/ xD

    so powerful, yet so simple when you understand it.

  7. #82
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    ha ha very good but it's not diet pepsi

    Quote Originally Posted by YuriKolovsky View Post
    after looking at http://www.romancortes.com/blog/pure-css-coke-can/ i decided to recreate the whole thing with my preferred unhealthy bubbling beverage.
    http://timo.geekcavecreations.com/pepsi/ xD
    Where did you get the flattened pepsi image from so quickly. Did you make that?

    so powerful, yet so simple when you understand it.
    Do you want to give a brief explanation of how it's accomplished for those watching?

  8. #83
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    the image was googled.

    explaining it is a bit more complicated than understanding it. :S

    basically its several 1px wide vertical lines that are floated against each other, they become wider in the middle to give it a more correct rotational feel. (it will still rotate if but with distortion)

    the background for these lines is fixed so it does not move when you scroll, so when you do scroll, the lines move showing a small bit of their own background (which is shifted by 1px to actually match the floated positioning)

    so essentially he just grabs "some" 1px wide line, and puts it where he wants it to, this way distorting the image as he wants to. (by reducing the amount of pixels visible from the image or compressing them together)

    you scroll, the lines move, the background image does not, but it does maintain the background distortion, he also added a transparent png for effects of a CAN.

    he also seems to have had a y axis distortion too that he didn't use.


    right now im thinking that you could probably make it spin when you scroll without moving the can (maybe by reversing the background and float positioning types)

    definitely inspiring stuff

  9. #84
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Yes I think the foreshortening at the edges is due to the 1px wide paragraphs but shifting the background by 2px therefore shortening the image by 1px each time to provide the illusion of turning the corner.

    It's a great demo and is being discussed in this thread also.

  10. #85
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    The fixed background image reminded me of another trick I knew so I knocked this up in about 2 minutes

    http://www.pmob.co.uk/maze/light.htm

    Very simple.

  11. #86
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    simple but pretty

  12. #87
    SitePoint Enthusiast stunic's Avatar
    Join Date
    Sep 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a variation on the 'rabbit' method at http://www.cssplay.co.uk/menu/css3-animation.html which auto-runs in IE8.

  13. #88
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    hahaha, very nice stuff Stu! very polished to say the least.

  14. #89
    SitePoint Enthusiast stunic's Avatar
    Join Date
    Sep 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was amazed that it auto ran in IE8. You just need to put the mouse over the second image and it works!
    I am still trying to find out why Safari and Chrome do not support b:hover ~ b.last so that you can target a single element when hovering over a list of sibling elements.
    <b></b>
    <b></b>
    <b></b>
    <b></b>
    <b class="last"></b>

  15. #90
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,616
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Nice work, Stu. I must say, it's quite exciting to find you posting in this forum.

  16. #91
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stunic View Post
    I was amazed that it auto ran in IE8. You just need to put the mouse over the second image and it works!
    I am still trying to find out why Safari and Chrome do not support b:hover ~ b.last so that you can target a single element when hovering over a list of sibling elements.
    <b></b>
    <b></b>
    <b></b>
    <b></b>
    <b class="last"></b>
    Just like that it should work, however there is a webkit bug where in combination (I think from memory) in combination with the + selector it won't use the rule. I forget the exsact details but it's something like that . I remember the bug happening to me while coding once.

    Webkit in general support ~ though so please provide a test case for tha
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  17. #92
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Great demonstration Stu (as would be expected from you)
    I am still trying to find out why Safari and Chrome do not support b:hover ~ b.last
    Yes we've run into that bug a few times in these quizzes now and there are quite a few bug reports about it but no real solution. It seems to half work.

  18. #93
    SitePoint Enthusiast stunic's Avatar
    Join Date
    Sep 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it does look like the implementation is only half complete and this has been the case for over a year.
    What I have been trying to do in incorporate the rolling can with the animation effect on hover but I guess it will have to be limited to Firefox, Opera and IE8:
    http://www.cssplay.co.uk/menu/css3-can-roll.html
    I did discover that when placing this demo into the <object> that Firefox now give the animation without moving the mouse.

  19. #94
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Coke, Pepsi, and Now Crazy Baked Beans!! haha precious!

  20. #95
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    I did discover that when placing this demo into the <object> that Firefox now give the animation without moving the mouse.
    That's an interesting effect

    I wonder why it does it though? I assume the hover is somehow interfered with causing it to switch on and off quickly.

  21. #96
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I think it is because firefox made the hover static on newer versions, I think it was mainly for performance gains, and it seems they left that original behavior inside the object tag, maybe for consistency?

  22. #97
    SitePoint Enthusiast stunic's Avatar
    Join Date
    Sep 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firefox did continually monitor mouse 'hovers' but in the last few versions it has removed this feature and only checks the hover state when the mouse moves. But as you say, it looks like they still continually monitor the hover state when over an <object>.
    This could prove useful for future developments.

  23. #98
    SitePoint Enthusiast stunic's Avatar
    Join Date
    Sep 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been working in collaboration with Javier Román Cortés over the last few days to produce a infinite zoom-in demo using nothing more than 26 images and Safari css3 webkit styling.
    http://www.cssplay.co.uk/menu/css3-zoom.html

    This one is for Safari and Chrome only.

  24. #99
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    That's a stunning demo Stu

    Thanks for giving us a peek at it. I'll have to look under the hood when I have a few days spare and if my brain can handle it!

  25. #100
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    how the... just wow, Amazing work STU!! and tell Roman the same from me!!
    this is a true demo of CSS3! and Transformations (which i havent nearly explored)


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
  •