SitePoint Sponsor

User Tag List

Page 3 of 7 FirstFirst 1234567 LastLast
Results 51 to 75 of 165
  1. #51
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    (Thanks for putting it online Dave)
    No problem, Paul. More than happy to assist.
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  2. #52
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,791
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Here's another one that is a bit sloppy and in need of improvement but I have some work to do so feel free to copy/imitate etc.

    It needs more logic and more routines as it gives the answer away too easily.

  3. #53
    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 Paul O'B View Post
    BTW what is the attachment for as you don't seem to have an image mentioned in the code (unless I missed it).

    It just shows the source of the eye xD nothing serious.

    also I reinstalled my pc right now as it was glitching too much after the years and years of use, so that held me back from finishing the last CSS animation that i have in mind.

  4. #54
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,791
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Any more entries on their way?

    Anyone got any ideas but don't know how to accomplish it? Maybe we can help.

    Here's a simple one that took about 10 minutes to do.

  5. #55
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Oh, you took that idea from me xD
    but yours is finished and smooth... nice!

    im still installing my programs, ill try and finish my last example today.

  6. #56
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the final chapter in my attempts at making a programatically engineered maze using CSS and PHP. It still (barely, lol) qualifies as "CSS animation" (sorta), but it does nothing fancy, like failing you if you hit a wall (still have no idea how to do that).

    http://www.geekcavecreations.com/mazeClass.php

    It DOES, however, feature a single, non-looping path through, where the previous ones had multiple solutions, or sometimes no solution. It's also configurable for size, and the larger ones are a LOT more complex. Feedback is welcome.
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  7. #57
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Any more entries on their way?
    I'll have a good shot at it on the weekend - it will most probably be image heavy though. CSS just aint' built for animation! That being said, I love seeing the examples you guys have come up with - that's some thinking outside the square.

  8. #58
    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 Dave Morton View Post
    Here's the final chapter in my attempts at making a programatically engineered maze using CSS and PHP. It still (barely, lol) qualifies as "CSS animation" (sorta), but it does nothing fancy, like failing you if you hit a wall (still have no idea how to do that).

    http://www.geekcavecreations.com/mazeClass.php

    It DOES, however, feature a single, non-looping path through, where the previous ones had multiple solutions, or sometimes no solution. It's also configurable for size, and the larger ones are a LOT more complex. Feedback is welcome.
    very nice work Dave! I especially like the way that it has just 1 correct path.
    I also thought about how to make it possible, and the only way i thought was if it would follow some path on its own (i mean like my maze, if i was making it) and then fill the blank spaces, it would obviously need to index the reserved spaces and make sure not to block itself, i can imagine this being a TON of work.

    and also here's my 3rd last CSS animation for now, its kinda low on frames (simply no time to make all of the frames) but you get the idea.

    (I sill lack hosting space xD)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Book: YuriKolovsky</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    p,h1,h3 {
    	margin:20px;
    }
    #container {
    	margin:20px;
    	/*border:solid #000 3px;*/
    	height:300px;
    	width:720px; /*40 x 10*/
    }
    b, u {/*b stands for pixel*/
    	display:block;
    	width:80px;
    	height:300px;
    	float:left;
    }
    b b {
    	margin-left:80px;
    }
    
    b u {
    	margin-left:-80px;
    }
    b.back {
    	background:green;
    	margin-top:-300px;
    	margin-left:160px;
    }
    b.back:hover {
    	width:160px;
    	margin-left:80px;
    }
    u.back {
    	background:green;
    	margin-top:0;
    	margin-left:-160px;
    }
    u.back:hover {
    	width:160px;
    	margin-left:-160px;
    }
    
    
    b.start {
    	background:purple;
    }
    /*lock*/
    b.start b {
    	visibility:hidden;
    }
    b.start:hover b {
    	visibility:visible;
    }
    
    
    
    
    b.checkpoint u {
    	visibility:hidden;
    }
    b.checkpoint:hover u {
    	visibility:visible;
    }
    
    b.checkpoint u.checkpoint b {
    	visibility:hidden;
    }
    b.checkpoint u.checkpoint:hover b {
    	visibility:visible;
    }
    
    
    #container {
    	position:relative;
    	z-index:10;
    }
    #image {
    	position:absolute;
    	width:560px;
    	height:300px;
    	top:0;
    	left:80px;
    	background:#fff;
    	z-index:-1;
    	border-bottom:solid transparent 300px;
    }
    .start:hover #image {
    	visibility:visible;
    }
    
    #image .side1, #image .side2 {
    	float:left;
    }
    
    #image i, #image s {
    	width:0;
    	height:0;
    	display:block;
    	float:left;
    }
    
    #image .bg1,
    #image .bg2 {
    	position:absolute;
    	top:0;
    	left:280px;
    	width:280px;
    	height:300px;
    	background:red;
    }
    #image .bg1 {
    	left:0;
    }
    
    .start b b b b b b b #image .side1,
    .start b b b b b b b #image .side2 {
    	position:relative;
    	z-index:1;
    }
    
    
    .start b b b b b b b #image .side1 s {
    	visibility:hidden;
    }
    .start b b b b b b b #image .side2 s {
    	visibility:hidden;
    }
    .start b b b b b b b #image .side1 i {
    	visibility:hidden;
    }
    .start b b b b b b b #image .side2 i {
    	visibility:hidden;
    }
    .start b b b b b b b #image .bg1,
    .start b b b b b b b #image .bg2 {
    	background:red;
    }
    
    
    .start b b b:hover b b b b #image .bg1 {
    	background:yellow;
    }
    .start b b b:hover b b b b #image .side1,
    .start u b:hover b b b b b b #image .side1 {
    	margin-top:-200px;
    	margin-left:80px;
    }
    .start b b b:hover b b b b #image .side2,
    .start u b:hover b b b b b b #image .side2 {
    	margin-top:-150px;
    	margin-left:80px;
    }
    .start b b b:hover b b b b #image .side1 s,
    .start u b:hover b b b b b b #image .side1 s {
    	border-left:200px solid red;
    	border-top:solid transparent 200px;
    	border-bottom:solid red 150px;
    	visibility:visible;
    }
    .start b b b:hover b b b b #image .side2 s,
    .start u b:hover b b b b b b #image .side2 s {
    	border-right:200px solid red;
    	border-top:solid transparent 150px;
    	border-bottom:solid transparent 150px;
    	visibility:visible;
    }
    .start b b b:hover b b b b #image .side1 i,
    .start u b:hover b b b b b b #image .side1 i {
    	border-right:200px solid red;
    	border-top:solid transparent 200px;
    	border-bottom:solid transparent 150px;
    	visibility:hidden;
    }
    .start b b b:hover b b b b #image .side2 i,
    .start u b:hover b b b b b b #image .side2 i {
    	border-left:200px solid red;
    	border-top:solid transparent 150px;
    	border-bottom:solid transparent 150px;
    	visibility:hidden;
    }
    
    
    .start b b b b:hover b b b #image .side1,
    .start u b b:hover b b b b b #image .side1 {
    	margin-top:-200px;
    	margin-left:180px;
    }
    .start b b b b:hover b b b #image .side2,
    .start u b b:hover b b b b b #image .side2 {
    	margin-top:-200px;
    	margin-left:180px;
    }
    .start b b b b:hover b b b #image .side1 s,
    .start u b b:hover b b b b b #image .side1 s {
    	border-left:100px solid red;
    	border-top:solid transparent 200px;
    	border-bottom:solid red 200px;
    	visibility:visible;
    }
    .start b b b b:hover b b b #image .side2 s,
    .start u b b:hover b b b b b #image .side2 s {
    	border-right:100px solid red;
    	border-top:solid transparent 200px;
    	border-bottom:solid transparent 100px;
    	visibility:visible;
    }
    .start b b b b:hover b b b #image .side1 i,
    .start u b b:hover b b b b b #image .side1 i {
    	border-right:100px solid red;
    	border-top:solid transparent 200px;
    	border-bottom:solid transparent 200px;
    	visibility:hidden;
    }
    .start b b b b:hover b b b #image .side2 i,
    .start u b b:hover b b b b b #image .side2 i {
    	border-left:100px solid red;
    	border-top:solid transparent 200px;
    	border-bottom:solid transparent 200px;
    	visibility:hidden;
    }
    
    
    .start b b b b b:hover b b #image .side1,
    .start u b b b:hover b b b b #image .side1 {
    	margin-top:-200px;
    	margin-left:180px;
    }
    .start b b b b b:hover b b #image .side2,
    .start u b b b:hover b b b b #image .side2 {
    	margin-top:-200px;
    	margin-left:180px;
    }
    .start b b b b b:hover b b #image .side1 s,
    .start u b b b:hover b b b b #image .side1 s {
    	border-left:100px solid yellow;
    	border-top:solid transparent 200px;
    	border-bottom:solid transparent 200px;
    	visibility:hidden;
    }
    .start b b b b b:hover b b #image .side2 s,
    .start u b b b:hover b b b b #image .side2 s {
    	border-right:100px solid yellow;
    	border-top:solid transparent 200px;
    	border-bottom:solid transparent 100px;
    	visibility:hidden;
    }
    .start b b b b b:hover b b #image .side1 i,
    .start u b b b:hover b b b b #image .side1 i {
    	border-right:100px solid yellow;
    	border-top:solid transparent 200px;
    	border-bottom:solid yellow 200px;
    	visibility:visible;
    }
    .start b b b b b:hover b b #image .side2 i,
    .start u b b b:hover b b b b #image .side2 i {
    	border-left:100px solid yellow;
    	border-top:solid transparent 200px;
    	border-bottom:solid transparent 100px;
    	visibility:visible;
    }
    
    
    .start b b b b b b:hover b #image .side1,
    .start u b b b b:hover b b b #image .side1 {
    	margin-top:-200px;
    	margin-left:80px;
    }
    .start b b b b b b:hover b #image .side2,
    .start u b b b b:hover b b b #image .side2 {
    	margin-top:-150px;
    	margin-left:80px;
    }
    .start b b b b b b:hover b #image .side1 s,
    .start u b b b b:hover b b b #image .side1 s {
    	border-left:200px solid yellow;
    	border-top:solid transparent 200px;
    	border-bottom:solid transparent 150px;
    	visibility:hidden;
    }
    .start b b b b b b:hover b #image .side2 s,
    .start u b b b b:hover b b b #image .side2 s {
    	border-right:200px solid yellow;
    	border-top:solid transparent 150px;
    	border-bottom:solid transparent 150px;
    	visibility:hidden;
    }
    .start b b b b b b:hover b #image .side1 i,
    .start u b b b b:hover b b b #image .side1 i {
    	border-right:200px solid yellow;
    	border-top:solid transparent 200px;
    	border-bottom:solid yellow 150px;
    	visibility:visible;
    }
    .start b b b b b b:hover b #image .side2 i,
    .start u b b b b:hover b b b #image .side2 i {
    	border-left:200px solid yellow;
    	border-top:solid transparent 150px;
    	border-bottom:solid transparent 150px;
    	visibility:visible;
    }
    
    
    .start b b b b b b b:hover #image .side1 s {
    	visibility:hidden;
    }
    .start b b b b b b b:hover #image .side2 s {
    	visibility:hidden;
    }
    .start b b b b b b b:hover #image .side1 i {
    	visibility:hidden;
    }
    .start b b b b b b b:hover #image .side2 i {
    	visibility:hidden;
    }
    .start b b b b b b b:hover #image .bg2 {
    	background:yellow;
    }
    
    
    
    
    
    
    
    
    
    
    
    .start u b:hover b b b b b b #image .bg1 {
    	background:green;
    }
    
    
    
    
    .start u b:hover b b b b b b #image .side1 s {
    	border-left:200px solid yellow;
    	border-bottom:solid yellow 150px;
    	visibility:visible;
    }
    .start u b:hover b b b b b b #image .side2 s {
    	border-right:200px solid yellow;
    	visibility:visible;
    }
    .start u b:hover b b b b b b #image .side1 i {
    	visibility:hidden;
    }
    .start u b:hover b b b b b b #image .side2 i {
    	visibility:hidden;
    }
    
    
    
    
    .start u b b:hover b b b b b #image .side1 {
    	margin-top:-200px;
    	margin-left:180px;
    }
    .start u b b:hover b b b b b #image .side2 {
    	margin-top:-200px;
    	margin-left:180px;
    }
    .start u b b:hover b b b b b #image .side1 s {
    	border-left:100px solid yellow;
    	border-top:solid transparent 200px;
    	border-bottom:solid yellow 200px;
    	visibility:visible;
    }
    .start u b b:hover b b b b b #image .side2 s {
    	border-right:100px solid yellow;
    	border-top:solid transparent 200px;
    	border-bottom:solid transparent 100px;
    	visibility:visible;
    }
    .start u b b:hover b b b b b #image .side1 i {
    	border-right:100px solid yellow;
    	border-top:solid transparent 200px;
    	border-bottom:solid transparent 200px;
    	visibility:hidden;
    }
    .start u b b:hover b b b b b #image .side2 i {
    	border-left:100px solid yellow;
    	border-top:solid transparent 200px;
    	border-bottom:solid transparent 200px;
    	visibility:hidden;
    }
    
    
    
    
    
    .start u b b b:hover b b b b #image .side1 {
    	margin-top:-200px;
    	margin-left:180px;
    }
    .start u b b b:hover b b b b #image .side2 {
    	margin-top:-200px;
    	margin-left:180px;
    }
    .start u b b b:hover b b b b #image .side1 s {
    	border-left:100px solid green;
    	border-top:solid transparent 200px;
    	border-bottom:solid transparent 200px;
    	visibility:hidden;
    }
    .start u b b b:hover b b b b #image .side2 s {
    	border-right:100px solid green;
    	border-top:solid transparent 200px;
    	border-bottom:solid transparent 100px;
    	visibility:hidden;
    }
    .start u b b b:hover b b b b #image .side1 i {
    	border-right:100px solid green;
    	border-top:solid transparent 200px;
    	border-bottom:solid green 200px;
    	visibility:visible;
    }
    .start u b b b:hover b b b b #image .side2 i {
    	border-left:100px solid green;
    	border-top:solid transparent 200px;
    	border-bottom:solid transparent 100px;
    	visibility:visible;
    }
    
    
    
    
    .start u b b b b:hover b b b #image .side1 {
    	margin-top:-200px;
    	margin-left:80px;
    }
    .start u b b b b:hover b b b #image .side2 {
    	margin-top:-150px;
    	margin-left:80px;
    }
    .start u b b b b:hover b b b #image .side1 s {
    	border-left:200px solid green;
    	border-top:solid transparent 200px;
    	border-bottom:solid transparent 150px;
    	visibility:hidden;
    }
    .start u b b b b:hover b b b #image .side2 s {
    	border-right:200px solid green;
    	border-top:solid transparent 150px;
    	border-bottom:solid transparent 150px;
    	visibility:hidden;
    }
    .start u b b b b:hover b b b #image .side1 i {
    	border-right:200px solid green;
    	border-top:solid transparent 200px;
    	border-bottom:solid green 150px;
    	visibility:visible;
    }
    .start u b b b b:hover b b b #image .side2 i {
    	border-left:200px solid green;
    	border-top:solid transparent 150px;
    	border-bottom:solid transparent 150px;
    	visibility:visible;
    }
    
    
    
    .start u b b b b b:hover b b #image .bg2 {
    	background:green;
    }
    .start u b b b b b:hover b b #image .side1 s {
    	visibility:hidden;
    }
    .start u b b b b b:hover b b #image .side2 s {
    	visibility:hidden;
    }
    .start u b b b b b:hover b b #image .side1 i {
    	visibility:hidden;
    }
    .start u b b b b b:hover b b #image .side2 i {
    	visibility:hidden;
    }
    
    
    b.checkpoint:hover {
    	cursor:pointer;
    }
    b.checkpoint u:hover {
    	cursor:default;
    }
    #container u.checkpoint:hover {
    	cursor:pointer;
    }
    #container u.checkpoint b:hover {
    	cursor:default;
    }
    
    
    #container b.start {
    	width:50px;
    	border-right:solid 30px #fff;
    }
    #container b.back {
    	width:50px;
    	border-left:solid 30px #fff;
    }
    #container u.back {
    	width:50px;
    	border-right:solid 30px #fff;
    }
    #container b.back:hover {
    	width:160px;
    	border-left:0;
    }
    #container u.back:hover {
    	width:160px;
    	border-right:0;
    }
    </style>
    
    </head>
    <body>
    <h1>CSS book flip Test</h1>
    <p>Timo says: This is a test, to see how CSS can change its behavour (only visually), the plan was to make this into a page changing book, and possibly to only trigger the forward/back "boxes" using :focus instead of :hover, the code is also unclean, but it's only a test</p>
    <h3>Instuctions:</h3>
    <p> simply move your mouse over the first purple box, the move it to the right until the end, but without touching the green "bak (back)" box, then move your mouse over to the left without touching the green box, then over to the right again and then to the left again, move it to the sides until the cursor changes, that means its time to move it back (its the points that would potentially be clickable).<br>
    the green boxes are there to allow you to go back to where you came from instead of continuing the cycle.</p>
    <p>doesent work in IE6, Tested in firefox only</p>
    <div id="container">
    <b class="start"><b><b><b><b><b><b><b class="checkpoint"><u><u><u><u><u><u class="checkpoint"><b><b><b><b><b><b><b><div id="image"><div class="bg1"></div><div class="bg2"></div><div class="side1"><s></s><i></i></div><div class="side2"><s></s><i></i></div></div></b></b></b></b></b></b></b></u><u class="back">bak</u></u></u></u></u></u></u></b><b class="back">bak</b></b></b></b></b></b></b></b></b>
    </div>
    
    
    </body>
    </html>
    lots of excessive code, but I didn't bother with the cleanup
    its a test, but it also serves as proof of concept that you CAN make a interactive book with CSS.

  9. #59
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting concept, my friend. Saved it to:

    http://www.geekcavecreations.com/Timo/cssBook.php
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  10. #60
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Timo and Dave and Paul,

    your demos are awesome!
    Happy ADD/ADHD with Asperger's

  11. #61
    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 Erik J View Post
    Timo and Dave and Paul,

    your demos are awesome!

    I was wondering where you were and why we haven't seen any of your demos!?

    edit:
    p.s. I love how international this thread is
    I can see UK, Spain, Australia, USA, Sweden.

  12. #62
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,791
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Dave that's good You just need to stop the smiley face jumping over the line (the little cheat)

    Timo I like the book effect - very clever

  13. #63
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,791
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    If no one else has anything in the pipeline then I'll wrap this up tomorrow.

    Meanwhile perhaps you'd like to listen to some music with the sound off

  14. #64
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    nice effect Paul!

    I also wanted to do some musical thing, but i called it disco.html
    because the mouse would make it move and animate musical effects, it proved to be much too time consuming (more than the maze) so i dropped the idea.

  15. #65
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,791
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    because the mouse would make it move and animate musical effects
    Could it squeak

  16. #66
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    haha most likely not.

  17. #67
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like the quiz and the examples so far.

    I wanted to show my idea just after the start.
    But there are those weeks when nothing goes as expected...

    So here is my little entry:
    web.drjochum.de/css_fun/catch_it.htm
    You have to try to catch the rabbit.

    Nothing extraordinary. It is inspired by Demo3.
    But I like the fact that you actually can catch the rabbit.
    It sometimes gets a bit slow (and on IE it sometimes did not react properly).
    It worked best on Safari for me.


    I have another more original idea in the pipeline.
    But I will not be able to put it together before the weekend.

    Jochen Drechsler.

  18. #68
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by drjochum View Post
    You have to try to catch the rabbit.
    Got him! That was fun, well done.

  19. #69
    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 drjochum View Post
    I like the quiz and the examples so far.

    I wanted to show my idea just after the start.
    But there are those weeks when nothing goes as expected...

    So here is my little entry:
    http://web.drjochum.de/css_fun/catch_it.htm
    You have to try to catch the rabbit.

    Nothing extraordinary. It is inspired by Demo3.
    But I like the fact that you actually can catch the rabbit.
    It sometimes gets a bit slow (and on IE it sometimes did not react properly).
    It worked best on Safari for me.


    I have another more original idea in the pipeline.
    But I will not be able to put it together before the weekend.

    Jochen Drechsler.
    very well done Jochen, I also like the idea that when you catch him you get to enter your name in the field,
    also have you noticed that you have successfully reversed the mouse axis on the orange box?

    p.s. on demo 3 you can catch it pretty easily by moving your mouse from top right until bottom left really quick.

  20. #70
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,791
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by drjochum View Post

    So here is my little entry:
    web.drjochum.de/css_fun/catch_it.htm
    You have to try to catch the rabbit.
    lol - that was good and I like the rabbit Well done.

    I have another more original idea in the pipeline.
    But I will not be able to put it together before the weekend.

    Jochen Drechsler.
    I'll leave the quiz open for the weekend then as there's no rush and others may be able to chime in before then.

  21. #71
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by drjochum View Post
    I like the quiz and the examples so far.

    I wanted to show my idea just after the start.
    But there are those weeks when nothing goes as expected...

    So here is my little entry:
    web.drjochum.de/css_fun/catch_it.htm
    You have to try to catch the rabbit.

    Nothing extraordinary. It is inspired by Demo3.
    But I like the fact that you actually can catch the rabbit.
    It sometimes gets a bit slow (and on IE it sometimes did not react properly).
    It worked best on Safari for me.


    I have another more original idea in the pipeline.
    But I will not be able to put it together before the weekend.

    Jochen Drechsler.
    Cool idea, well done

    Sorry I didn't end up making an entry, I had writers-block Congratulations to everyone who made entries.

  22. #72
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    also have you noticed that you have successfully reversed the mouse axis on the orange box?
    yes. I wanted to make it a bit harder to catch it.

    I also like the idea that when you catch him you get to enter your name in the field
    Yes, and it opens up without any JavaScript!

    Here is my second entry.
    I wanted to do some animation that works only on click.
    This is a small example. I wanted to do more, but...
    One could enhance it in different ways (moving the monkey around a wall, only clicking on the mokey will move it)...
    Internetexplorer is so bad with :active or :focus that I did not want to bother...
    Safari works, but only if you do not move the mouse!
    Opera works, but only if you move the mouse!!
    Firefox (3.5.7) worked fine.

    web.drjochum.de/css_fun/click_and_run.htm

    I like the css skill test. See you next time!

  23. #73
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,791
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I like the css skill test.
    Thanks and we like your demos also

    Well done - it's a great little demo.

  24. #74
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    @drjochum
    wow that last one is brilliant!
    very original use of :focus + :hover!!

    although im thinking that you could make it without the hover dependability.

    also your animation demonstrated a safari + opera flaw! how nice! xD

  25. #75
    SitePoint Member
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    very original use of :focus + :hover!!
    I did not use :focus at all, I used :active. :focus could also be triggered with "tab". But I wanted to have "click"

    although im thinking that you could make it without the hover dependability.
    I could have used "#a5:hover" instead of "#a5:hover + a, #a5:hover". But the first one does flicker a bit.


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
  •