SitePoint Sponsor

User Tag List

Page 1 of 7 12345 ... LastLast
Results 1 to 25 of 165
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)

    CSS - Test Your CSS Skills Number 32 - animation

    CSS - Test Your CSS Skills Number 32 : Quiz now ended - summary in post #156

    For the first quiz in 2010 I am going to allow you some creative leeway and rather than set a specific puzzle for you to solve I want you to come up with your own CSS only animation effect.

    This could be some sort of simple interactive game, image trick or an effect caused by moving the mouse or moving the browser window.

    To get you started I have come up with three little demos to get you in the mood. These are pretty basic but will give you the flavour of what I am looking for.

    Demo1: Maze Game
    Demo2: Magnifier
    Demo3: Catch me if you can.

    They should work in IE7 and upwards (and other modern browsers) and contain no scripting. The animation is pure CSS only.

    Try not to peek at my code unless you have no idea how to do this. If you can't think of anything to do then as a last resort try to improve on my versions above in some way.

    I'm not looking for webkit transformations but something that we can use now in most of the major browsers. However, I'll be lenient with the rules as long as the demo is interesting.

    The animations can be anything you can think of but something more than a simple on/off rollover effect.

    Try not to use too many images to accomplish this either. My examples above use 2 images at most.

    Unlike other quizzes please do post a link to your demo in this thread for all to see (do not PM me with your answers) and we will decide the best animation effect at the end of the quiz. If you do not have the facility to set up an online demo then post your code in this thread but make sure you attach the images you have used so we can see the effect.

    Try to think of your own ideas and not copy others but of course you can be inspired by them.Here are a couple of classic examples of CSS animation to inspire you:

    Alex Walker's demo - open and close the browser window horizontally.
    Román Cortés' 3d css.

    Remember this is just for fun
    and there are no prizes.

    Have fun.



    PS. : In case you missed the other tests you can find them all listed here:

  2. #2
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I have one, but it crashes most browsers, but on my pc it works in Chrome, Safari, IE8, somewhat works in Opera, IE7, breaks in FF.
    would it count too?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    I have one, but it crashes most browsers, but on my pc it works in Chrome, Safari, IE8, somewhat works in Opera, IE7, breaks in FF.
    would it count too?
    Yes post it and let us see

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Wow Paul, I love the demos you linked to. Don't know if I'm imaginative enough to do something like this... but I'll see if anything comes to mind. Look forward to what people come up with.

  5. #5
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That last demo is a bit irritating, lol. Sent in my entry. I'll post the link here once the quiz is nearing completion.
    Edit:

    oops! read ALL instructions prior to posting, Dave...

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

  6. #6
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    haha nice one Dave Morton, sadly my demo after finally finishing it now only works in safari and chrome (other browsers go mad or crash), and not because of its css, but because of its html.

    now i just need to fit it to screen size and im done.


    what are your screen sizes btw?

  7. #7
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I test at screen sizes of 800x600, and 1024x768, when I think about it. Sometimes I forget.

    BTW, a couple of fun facts about the page I wrote:

    1.) although the page is over 1200 lines long, the script that creates it takes up less than 50 lines of code. PHP is a wonderful thing.
    2.) Since it's written in PHP, the locations of the party cell and the "go to jail" cells are randomly placed, making it a new game with every reload.
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I've got an idea that may just challenge Walt Disney.

    Actually it's same concept as linked to above. http://www.sitepoint.com/examples/stretchy/test.php But it would been cooler
    I'll keep thinking.

  9. #9
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    whoops, i sent my entry to paul instead of posting it here, i misread the "do post" as "do not post" xD

    ok here it is anyway.

    Code CSS:
    <!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>Maze</title>
    <style type="text/css">
    /*reset*/
    * {
    	margin:0;
    	padding:0;
    }
    /*container*/
    #container {
    	margin:20px;
    	border:solid #000 3px;
    	overflow:hidden;
    	width:876px;/*73 x 12 + 3 + 3*/
    	padding-top:240px;/*12 x 20*/
    	padding-bottom:264px;/*22 x 12*/
    	background:url(maze.png);
    }
    /*standart*/
    .start {
    	width:20px;/*10 + 10*/
    	height:10px;/*10*/
    	float:left;
    }
    b, i, u, s, strong {
    	display:block;
    	width:10px;
    	height:10px;
    	float:left;
    }
    /*lock*/
    .start b, .start i, .start u {
    	display:none;
    }
    .start:hover b, .start:hover i, .start:hover u {
    	display:block;
    }
    /*remove from context*/
    b, i, u, s, strong {
    	margin-bottom:-22px;/*10 + 10 + 2*/
    }
    /*positioning*/
    b, strong {
    	margin-left:12px;
    	width:12px;
    }
    i {
    	margin-top:-12px;
    	height:12px;
    }
    u {
    	margin-top:10px;
    	height:12px;
    }
    s {
    	margin-left:-12px;
    	width:12px;
    }
     
     
    i > b,
    i > strong {
    	margin-left:10px;
    }
    u > b,
    u > strong {
    	margin-left:10px;
    	margin-top:2px;
    }
    u > s {
    	margin-top:2px;
    }
    i > b,
    i > strong {
    	margin-left:10px;
    }
    b > b,
    b > strong {
    	margin-left:12px;
    }
    u > u {
    	margin-top:12px;
    }
    b > i,
    b > u {
    	margin-left:2px;
    }
    s > i,
    s > u {
    	margin-left:0;
    }
     
    .last {
    	height:10px;
    	margin-top:-10px;
    }
    .end {
    	line-height:8px;
    	text-indent:-12px;
    	color:green;
    	background:#000;
    	text-decoration:none;
    	font-style:normal;
    	font-weight:normal;
    }
     
    /*superiority*/
     
    i:hover, b:hover, u:hover {
    	position:relative;
    }
    /*colorisation*/
    .start {
    	background:#000;
    }
    /*original coloring*/
    b:hover,
    strong:hover {
    	background:red;
    }
    i:hover {
    	background:green;
    }
    u:hover {
    	background:blue;
    }
    s:hover {
    	background:yellow;
    }
    /*altered coloring*/
    b:hover,
    strong:hover,
    i:hover,
    u:hover,
    s:hover{
    	background:red;
    }
     
    .start {
    	position:relative;
    }
    .start span {
    	position:absolute;
    	display:block;
    	top:0;
    	line-height:8px;
    	color:#fff;
    	cursor:pointer;
    }
     
     
     
    /*original coloring*/
    b, strong {
    	background:rgba(225,0,0,0.5);
    }
    i {
    	background:rgba(0,225,0,0.5);
    }
    u {
    	background:rgba(0,0,225,0.5);
    }
    s {
    	background:rgba(225,225,0,0.5);
    }
    /*altered coloring*/
    i,u,s, b, strong {
    	background:#fff;
    }
    #container {
    	background-color:#000;
    }
    /*
    .start b, .start i, .start u {
    	display:block;
    }*/
    </style>
     
    </head>
    <body>
    <h1>Welcome to Timo's Extreme CSS Maze</h1>
    <p>It is so extreme that only Safari and Chrome are up to the task of rendering it</p>
    <p>This is a maze I drew several years ago on paper, now I have recreated it in CSS</p>
    <p>All the browsers above IE6 supported this maze until I reached a certain extreme amount of tags...</p>
    <p>So far I have discovered that Safari and Chrome support the most same tags withing tags, namely 20 of them.</p>
    <p>The other browsers went mad much sooner, and i didn't exactly catch at what point, but initially I worked with firefox with supported more than 20 tags, but was unbearably slow.</p>
    <p>To avoid the browser from crashing immediately as you move your mouse over the maze I have locked it and its walls (no cheating), now it's a true test of mouse wielding skill.</p>
    <p>Resizing doesn't work, it worked with larger versions of the maze with even numbers, but not this size...</p>
    <p>You can add the maze.png image as the background, but only if you don't resize the maze, because both safari and chrome incorrectly resize the maze.</p>
    <p>Due to the extremely reduced size, it was 4 times larger, it will be 4 times harder to navigate using the mouse, and this shrinking allows for cheating, which is not what I intended this maze for, if you want to pass it, then do it fair or not at all.</p>
    <p><b>Instructions</b>: Move your mouse through the maze, don't let the mouse touch the walls, they are electrocuted.</p>
    <div id="container">
    <div class="start"><span>start</span>
    <b>
    <b><b><b>
    <i><s><i><b><b><b><b><b><b><b></b></b></b></b></b></b></b></i></s>
    <b><b><b><b><b><b><b><i><b><b><i><b><u><u><u><s></s><u><u><b><i><i><i><i><i><i><s><s><s><u><s><s></s></s></u></s></s></s></i></i></i></i></i></i></b></u></u></u></u></u></b></i><u></u></b></b></i></b></b></b></b></b></b></b></i>
     
    <b><b><b><b><b>
    <b><b><b><i></i><u><u><b><i></i><u><b><b></b></b><u><u><u></u></u></u></u></b><u><u><u><u><u><b><u><b><i><i><i><i><b><u><u><u><b><i><i><i><i><i><i><i><i><i><i><i><i><s><s><s><s><s><s><s><s><s><s><s></s></s></s></s></s></s></s></s></s></s></s></i></i></i></i></i></i></i></i></i></i></i></i></b></u></u></u></b></i></i></i></i></b></u></b><u><s><s><u><s><u><u><u><u><u><b><b><b><b></b></b></b></b></u></u></u></u></u></s><b><b><u><s><s><u><u><u><b><b><b><i><i><i><i><b><b><i></i></b></b></i></i></i></i></b></b></b></u></u></u></s></s><u><u><s><i></i></s></u></u></u></b></b></u></s></s></u></u></u></u></u></u></u></u></b></b></b>
     
    <u>
    <s><s><s><s><s><s><s><s></s></s></s></s></s></s></s></s>
     
    <b><b><u><u><u><u><u><u><s><i><i><i><i><i><s><s><s><u><b><b><u>
    <s><s><s><s><s><s><s><i><b><b><b><b><i><s><s><s><s><s><u><u><u><u><u><b><u><u><u><u><u></u></u></u></u></u></b></u></u></u></u></u></s></s></s></s></s></i></b></b></b></b></i></s></s></s></s></s></s></s>
     
    <u><s><s><s><s><s><s><s><u><b>
    <b><b><b><b><b><b><u><u></u></u></b></b></b></b></b></b>
     
    <u><u><u><u>
     
    <b>
    <u><u><u><b><b><b><i><i><i><i><i><s><s><u><u><u><u><b><i><i><i></i></i></i></b></u></u></u></u></s></s></i></i></i></i></i></b></b></b></u></u></u>
     
    <i><i><i><b><b><b><b><u><u><u><u><u><u><u><s><s><s><s><s><u><b><b>
    <b><b><b><b></b></b></b></b>
     
    <u><u><u>
    <s><s><i><i><b><u></u></b></i></i><u><b><b><b></b></b></b></u></s></s>
     
     
    <b><b>
     
    <b><b><b><b><b><i><s><s><s><s><s><s><i><b><b><b><b><b><b><b><b><i>
    <s><s><s><s></s></s></s></s>
     
    <i><i>
     
    <i>
    <i><i><b><u><b><b><b><b><b><b><b><i><b><u><u><s><s><u><b><b><u><s><s><u><b><b><b><b> </b></b></b></b></u></s></s></u></b></b></u></s></s></u></u></b></i></b></b></b></b></b></b></b></u></b></i></i>
     
    <b><b><b><b><b><b><u><u><u><u><b><b>
     
    <b><b><b><b><i><b><b><b><b>
     
    <i><s><s><s><s><s><s><i>
    <b><b><b><b><b><b><b><b><b><b><b><i><i><i><b><b><b><b><b><b><b><b><b><u><s><s><s><s><s><s><s><u><u><u><u> </u></u></u></u></s></s></s></s></s></s></s></u><i><s><s><s><i><s><s><s><s><s><s><s><s><s><u><u><u><u><s><s><s><s><s><s><s><i><i><i><i><b><u><u><u><b><b><b><b><b><i><i><i><s><s><s><s><u><u><b><b><b><i><s><s> </s></s></i></b></b></b></u></u></s></s></s></s></i></i></i></b></b></b></b></b></u></u></u></b></i></i></i></i></s></s></s></s></s></s></s></u></u></u></u></s></s></s></s></s></s></s></s></s><b><b><b><b><b><b><b><b><b><b><b><b><b><b> </b></b></b></b></b></b></b></b></b></b></b></b></b></b></i></s></s></s><b><b><b><b><b><b><b><b><b><b><b><u><u><b><b><u><u><u><u><u><u><s><i><i><s><s> </s></s></i></i></s></u></u></u></u></u></u></b></b></u></u></b></b></b></b></b></b></b></b></b></b></b></i></b></b></b></b></b></b></b></b></b></i></i></i></b><i><s><i><b><i><s><i><b><b><b><b><b><b><b> </b></b></b></b></b></b></b></i></s></i></b></i></s></i></b></b></b></b></b></b></b></b></b></b>
     
    <i><i><i><i><i><s><s><s><s>
     
    <s><s><u><u><s><s><i><i><b>
    <u> </u>
     
    <i><i><i><i><i><i>
     
    <i>
     
    <i>
     
    <i>
     
    <i>
     
    <i><i><i><i>
     
    <s><s><s><s><s><i><i><i><i><i><i><i><i><i><s><s><s><s><s><s><s><s><s><u><u><u><u><u><u><u><u><b><b><b><b><b><b><b><i><i><i><i><i><i><s><s><s><s><s><u><u><u><u><b><b><b><i><i><s><u><s><i><i><b><b><b><u><u><u><u><s><s><s><s><s><i><i><i><i><i><i><b><b><b><b><b><b><b><u><u><u><u><u><u><u><u><s><s><s><s><s><s><s><s>
     
    <s><i><i><i><i><i><i><i><i><i><i><b><b><b><b><b><b><b><b><b><b><b><b><b><b>
     
    <b><b><b><b><b>
     
    <b><strong><b>
    <u><u><u><u><s><i><i><i><s><u><u><u> </u></u></u></s></i></i></i></s><u><u><u><b><i><i><i><i><i><i><i><i><b><u><u><u><u><u><b><u><u> </u></u></b></u></u></u></u></u></b></i></i></i></i></i></i><b><u><u> </u></u></b></i></i></b></u></u></u></u></u></u></u>
     
    <i><i>
     
    <s><s><s><s><s><s><s><s><i><b><b><b><b><b><b><b><b><b><b><b><b><u><u><u><u><u><b>
    <i><i><i><b><b><i><s><s><i><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><i><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><b><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><b><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><u><u><u><u><u><u><u><u><u><u><u><u><u><u><u><u><u><u><u> </u></u></u></u></u></u></u></u></u></u></u></u></u></u></u></u></u></u></u></s></s></s></s></s></s></s></s></s></s></s><u><u><u><s><s><s><s><s><s><s><s><s><s><u><u><u><u><u><u><u><u><u><u><u><u><u><u><u><u><b><i><i><i><b><u><b><b><b><b><b><b> </b></b></b></b></b></b></u></b></i></i></i></b></u></u></u></u></u></u></u></u></u></u></u></u></u></u></u></u></s></s></s></s></s></s><i><i><s><u><s><i><s><u><s><i><s><u><s><i> </i></s></u></s></i></s></u></s></i></s></u></s><b><b><b><u><s><s> </s></s></u></b></b></b></i></i></s></s></s></s><b><b><b><b><i><i><s><s><s><u><b><b> </b></b></u></s></s></s></i></i><b><b><b><b><b><b><b><b> </b></b></b></b></b></b></b></b></b></b></b></b></u></u></u></s></s></s></s></b></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></b></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></i></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></i></s></s></i></b></b></i></i></i>
     
    <b><b><b><b><b><b><b><b><b><b><b><b><b><b>
    <u><u><u><u><u><b><b><i><i><i><i><s><u><u><u> </u></u></u></s></i></i></i></i></b></b></u></u></u></u></u>
     
    <i>
     
    <i><b><b><b><b><i><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s>
    <u><b><b><b><b><b><b><b><b><b><b><u><s><s><s><s><s><s><s><s><s><s><s><s><i><b> </b></i></s></s></s></s></s></s></s></s></s></s></s></s></u></b></b></b></b></b></b></b></b></b></b></u>
     
    <i><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><u><u><u><u><b><b><b><u>
    <s><s><s><u><u><u><u><u><u><b><b><i><i><i><i><i><s><u><u><u><u> </u></u></u></u></s></i></i></i></i></i></b></b></u></u></u></u></u></u></s></s></s>
     
    <u><u><u><u><u><u><u><u><u><u><u><u><u><u><s><s><s><i><i><i><i><i><i><b><u><u><u><u><u><b><i><i><i><i><i><i><s><s><s><u><u><u><u><u><u><u><u><b><b><b><b><b><i><i><i><i><i><i><i><i><i><i><i><i><i><i><i><i><i><s><s><s><i><i><i><i><i><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><u><s><s><s><s><s><s><s><s><s>
    <s><s><s><s><s><u><u><u><b><b><i><i><s><u> </u></s><b><b><u><s><u><u><u><u><b><b><b><b><b><b><u><u><u> </u></u></u></b></b></b></b></b></b></u></u></u></u></s></u></b></b></i></i></b></b></u></u></u></s></s></s></s></s>
     
    <u><u>
     
    <b><b><b><b><b><b><u><u><u><u><u><u><b><b><b><b><b><i><i><i><i><i><i><b><b><u><s><u><u><u><b><i><i><b><u><u><u><u>
     
    <b>
     
    <u><u><u><u><u><u><u><u><s><s><s><i>
    <i><i><i> </i></i></i>
     
    <b><i><i><i><i><s><s><u><u><u><u><u><s><i><i><i><i><i><i><s><s>
     
    <u><s><s><s><s><i><s>
    <u><u><u><u><u><b><b><b><b><b><i><i><i><s><s><s><s><u><u><b><b><b><i><s><s> </s></s></i></b></b></b></u></u></s></s></s></s></i></i></i></b></b></b></b></b></u></u></u></u></u>
     
    <i><i><i><s><s><s><s><s><u><u><u><u><u><u><u><u><u><u><u><u><u><u><b><i><i><i><i><i><i><i><i><i><i><i><i><i><b><b><b><u><u><u><u><u><u><u><u>
    <b><b><b><b><b><b><b><i><i><i><i><i> </i></i></i></i></i></b></b></b></b></b></b></b>
     
    <u><u><u><u><u><u><u><u><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><i><i><i><s><s><i>
     
    <i><i><i><i><i><i><i><i><i><i><i><s><s><s><s><s><s><s><s><s><s>
    <s><i><i><b><b><b><b><b><b><b><b><b><b><b><b><b><u><u><u> </u></u></u></b></b></b></b></b></b></b></b></b></b></b></b></b></i></i></s>
     
    <u><u><u><u><u><u><u><u><u><u><b><b><b><b><b><b><i><i><i><s><s><s><s>
     
    <u><u>
     
    <s><i><i><i><i><i><i><i><i><b><u><b><i><b><u><b><i><b><u><b><i><b>
     
    <b><u><u><u><u><u><u><u><u><u><u><u><u>
    <b><b><u><s><u><b><u><s> </s><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><u><b><i> </i></b><u><u> </u></u></u></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></u></b></u></s></u></b></b>
     
    <u><u><u><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><i><i><i><s><s><u><u><u><u><b>
    <i><i><i> </i></i></i>
     
    <b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><strong><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><u><u><u><b><b>
     
    <u><u><u><u>
     
    <b>
    <u><u><u><u><u><b> </b></u></u></u></u></u>
     
    <i><i><i><i><i><i><i><i><b><b><b><b><b>
    <u><s><s><s><s><u><u><u><u><u><u><u><u><u><u><u><b><u><u><s><s><s><u><b><b><b><b><i><i><i><i><s><i><i><i><i><i><i><i><i><i><b><b><b><b><b><b><b><b><b><b><u><u><u><u><u><u><u><u><u><u><u><u><s><s><s><s><s><s><s> </s></s></s></s></s></s></s></u></u></u></u></u></u></u></u></u></u></u></u></b></b></b></b></b></b></b></b></b></b></i></i></i></i></i></i></i></i></i></s></i></i></i></i></b></b></b></b></u></s></s></s></u></u></b></u></u></u></u></u></u></u></u></u></u></u></s></s></s></s></u>
     
    <i><i><s><s><s><s><s><i><i><i><i><i><b><b><b><b>
     
    <b><b><i>
    <s><s><s><s><s><s><s><u><u><u><u><u><u><u><b><b><b><b><b> </b></b></b></b></b></u></u></u></u></u></u></u></s></s></s></s></s></s></s>
     
    <b><b><b>
    <b><b><b><u><s><s> </s></s></u><i><i><i><i><i><i><i><i><i><i><i><i><i><i><i> </i></i></i></i></i></i></i></i></i><b><u><u><u><u><u> </u></u></u></u></u><i><i><i><i><i><i><i><i><i><i><i><i><s><s><s><s><s><u><b><b><b><u><b><i> </i></b></u></b></b></b></u></s></s></s></s></s></i></i></i></i></i></i></i></i></i></i></i></i></b></i></i></i></i></i></i></b></b></b>
     
    <u><u><b><b>
    <b><b><i><i> </i></i></b></b>
     
    <u>
    <s><s><s><u><u><u><u><b><b><b><i><s><s><i><b><b><b><u><u><u><s><s><s><s><s><i><i><i><i><s><s><s><s><i><i><s><s><u><u><u><b><i><i> </i></i></b></u></u></u></s></s></i></i></s></s></s></s></i></i></i></i></s><u><s><s><i><i><i><i><s><s><s> </s></s></s></i></i></i></i></s></s><b><b><b><b><b><u><u><u><u><u><u><u><u><u><u><u><u><u><u><s><s><s><s><s><s><s><s><s><i><i><i><i><b><b><b><b><b><b><b><i><i><i><i><i><i><i><i><s><s><s><s><s><s><s><s><u><u><u><u><u><u><u><b><b><b><b><b><b><i><i><i><i><i><s><s><s><s><u><u><u><b><b><i><s><i><b><b><u><u><u><s><s><s><s><i><i><i><i><i><b><b><b><b><b><b><u><u><u><u><u><u> </u></u></u></u></u></u></b></b></b></b></b></b></i></i></i></i></i></s></s></s></s></u></u></u></b></b></i></s></i></b></b></u></u></u></s></s></s></s></i></i></i></i></i></b></b></b></b></b></b></u></u></u></u></u></u></u></s></s></s></s></s></s></s></s></i></i></i></i></i></i></i></i></b></b></b></b></b></b></b></i></i><b><b><b><b><b><b><b><i><s><s><s><s><s><s> </s></s></s></s></s></s></i></b></b></b></b></b></b></b></i></i></s></s></s></s></s></s></s></s></s><u><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><b><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><b><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><b><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><s><i><i><i><i><i><i><i><i><i><i><i><i><i><u><i><i><i><i><i><i><i><i><i class="last"> </i></i></i></i></i></i></i></i></i></u></i></i></i></i></i></i></i></i></i></i></i></i></i></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></b></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></b></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></b></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></u></u></u></u></u></u></u></u></u></u></u></u></u></u></u></b></b></b></b></b></u></s></s></s></s><b><i><i><i><i><s><s><s><s> </s></s></s></s></i></i></i></i></b></u></u></u></b></b></b></i></s></s></i></b></b></b></u></u></u></u><i><i><s><u><s><s> </s></s></u></s></i></i></s></s></s>
     
    <b>
    <b class="end">End</b>
    </b>
     
    </u>
     
    </b></b></u></u>
     
    </b></b></b>
     
    </i></b></b>
     
    <u><u><b><b><b> </b></b></b></u></u>
    </b></b></b></b></i></i></i></i></i></s></s></s></s></s></i></i>
     
    </b></b></b></b></b></i></i></i></i></i></i></i></i>
     
    </b>
     
    <u><u><u><u><u><s> </s></u></u></u></u></u>
    </u></u></u></u>
     
    <i><i> </i></i>
    </b></b></u></u></u></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></strong></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b>
     
    </b></u></u></u></u></s></s></i></i></i></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></u></u></u>
     
    </u></u></u></u></u></u></u></u></u></u></u></u></b>
     
    <u><u><u><s><s><s><s><s> </s></s><u><s><s><s><i><i><b><b><b><b><b> </b></b></b></b></b></i></i></s></s></s></u></s></s></s></u></u></u>
    </b></i></b></u></b></i></b></u></b></i></b></u></b></i></i></i></i></i></i></i></i></s>
     
    <b><b><b><i><s><s> </s></s></i></b></b></b>
    </u></u>
     
    <i><b><b><b><b><b><u><u><u><u><u><s><s><s><s><s><s><s><s><i><i><i><i><i><i><i><i><i><i><s><u><u><u><u><u><u><u><u><u><u><u><b><b><b><b><b><b><b><b><b> </b></b></b></b></b></b></b></b></b></u></u></u></u></u></u></u></u></u></u></u></s></i></i></i></i></i></i></i></i></i></i></s></s></s></s></s></s></s></s></u></u></u></u></u></b></b></b></b></b></i>
    </s></s></s></s></i></i></i></b></b></b></b></b></b></u></u></u></u></u></u></u></u></u></u>
     
    </s></s></s></s></s></s></s></s></s></s></i></i></i></i></i></i></i></i></i></i></i>
     
    <b><b><b><u><u><u><b><b><i><i><i><i><i><i><i><i><i><i><s><s><s><u><u><u><u><u><u><b><b><u><u><u> </u></u></u><i><i><i><i><i><s><u><u><u><u> </u></u></u></u></s></i></i></i></i></i></b></b></u></u></u></u></u></u></s></s></s></i></i></i></i></i></i></i></i></i></i></b></b></u></u></u></b></b></b>
    </i></s></s></i></i></i></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></u></u></u></u></u></u></u></u>
     
    </u></u></u></u></u></u></u></u></b></b></b></i></i></i></i></i></i></i></i></i></i></i></i></i></b></u></u></u></u></u></u></u></u></u></u></u></u></u></u></s></s></s></s></s></i></i></i>
     
    </s></i></s></s></s></s></u>
     
    <i><s><u><s><i><s><u> </u><i><i><i><i><i><i><s><s><s><s> </s></s></s></s></i></i></i></i></i></i></s></i></s></u></s><b><b><b><u><b><b><i><i><i><s><u><u> </u></u></s></i></i></i></b></b></u></b></b></b></i>
    </s></s></i></i></i></i></i></i></s></u></u></u></u></u></s></s></i></i></i></i></b>
     
    </i></s></s></s></u></u></u></u></u></u></u></u>
     
    <i><i><i><i><i><s> </s><i><s><i><s><s><s><i><i><s><u><u><s><s><u><u><u><u><u><b><i><i><i><i> </i></i></i></i></b></u></u></u></u></u></s></s><u><u><u><u><u><u><s><s><s><i><i><i><i><i><i><s><s><s><s><s><s> </s></s></s></s></s></s></i></i></i></i></i></i></s></s></s></u></u></u></u></u></u></u></u></s></i></i></s></s></s></i></s></i></i></i></i></i></i>
    </b>
     
    <u><u><u><u><u><u><u> </u></u></u></u></u></u></u>
    </u></u></u></u></b></i></i></b></u></u></u></s></u></b></b></i></i></i></i></i></i></b></b></b></b></b></u></u></u></u></u></u></b></b></b></b></b></b>
     
    <u><u><b><b><b><b><u><s><s><s><s><s><i><i> </i></i></s></s></s></s></s></u></b></b></b></b></u></u>
    </u></u>
     
    </s></s></s></s></s></s></s></s></s></u></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></i></i></i></i></i></s></s></s></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i></b></b></b></b></b></u></u></u></u></u></u></u></u></s></s></s></i></i></i></i></i></i></b></u></u></u></u></u></b></i></i></i></i></i></i></s></s></s></u></u></u></u></u></u></u></u></u></u></u></u></u></u>
     
    </u></b></b></b></u></u></u></u></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></i>
     
    </s></s></s></s></s></s></s></s></s></s></s></s></s></s></s></i></b></b></b></b></i>
     
    <b><b><b><b><u><u><u><u><u><u><u><u> </u></u></u></u></u></u></u></u></b></b></b></b>
    </i>
     
    </b></b></b></b></b></b></b></b></b></b></b></b></b></b>
     
    </b></u></u></u></u></u></b></b></b></b></b></b></b></b></b></b></b></b></i></s></s></s></s></s></s></s></s>
     
    <b><b><b><u><u><u><u><u><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><u><u><u><u><u><s><s><i><i><i><s><s><s><s><s><s><s><s><s><s><s> </s></s></s></s></s></s></s></s></s></s></s></i></i></i></s></s><b><b><b><b><u><u><u><u><u><u><u><u><s><u><u><u><u><b><b><b><b><b><b><b><b><b><b><b><i><i><i><i><i><i><i><i><i><i><i><i><i><i> </i></i></i></i></i></i></i></i></i></i></i></i></i></i></b></b></b></b></b></b></b></b></b></b></b></u></u></u></u><i><i><i><i><i><i><i><s><s><s><s><s><u><u><u><u><u><u><u> </u></u></u></u></u></u></u></s></s></s></s></s></i></i></i></i></i></i></i></s><u><u><u><b><b><b><b><b><b><b><b><b><i><i><i><i><i><i><i><i><i><i><i><i><i> </i></i></i></i></i></i></i></i></i></i></i></i></i></b></b></b></b></b></b></b></b></b></u></u></u></u></u></u></u></u></u></u></u><i><i><i><i><i><i><s><s> </s></s></i></i></i></i></i></i></b></b></b></b></u></u></u></u></u></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></u></u></u></u></u></b></b></b>
    </i></i>
     
    </b></strong></b>
     
    <u><u><u><u><u><u><s><s><s><u><u><b><b><b><u> </u><i><s><s> </s></s></i></b></b></b></u></u><i><i><i><i><b> </b></i></i></i></i></s></s></s></u></u></u></u></u></u>
    </b></b></b></b></b>
     
    <u><u><s><s><u><u><u><b><u><u><u><u><b><i><i><i><i><i><b><u><u><u><u><u><b><b><b> </b></b></b></u></u></u></u></u></b></i></i></i></i></i></b></u></u></u></u><i><i><b><b><i><i><b><b><b><u><u><u><u><s><i><i> </i></i></s></u></u></u></u></b></b></b></i></i></b></b></i></i></b><u><u><u><u><s><i><i><i><i><i><i><i><i><b><b> </b></b></i></i></i></i></i></i></i></i></s></u></u></u></u></u></u></u></s></s></u></u>
    </b></b></b></b></b></b></b></b></b></b></b></b></b></b></i></i></i></i></i></i></i></i></i></i></s>
     
    <u><s> </s><b><u><b><b><b><b><b><b><b> </b></b></b></b></b></b></b></u></b></u>
    </s></s></s></s></s></s></s></s></u></u></u></u></u></u></u></u></b></b></b></b></b></b></b></i></i></i></i></i></i></s></s></s></s></s></u></u></u></u></b></b></b></i></i></s></u></s></i></i></b></b></b></u></u></u></u></s></s></s></s></s></i></i></i></i></i></i></b></b></b></b></b></b></b></u></u></u></u></u></u></u></u></s></s></s></s></s></s></s></s></s></i></i></i></i></i></i></i></i></i></s></s></s></s></s>
     
    <b><b><b><b> </b></b></b></b>
    </i></i></i></i>
     
    <b><b><b><i><i><s> </s></i></i></b></b></b>
    </i>
     
    <b><b><b><b><i><i><i><i><s><s><s><u><u><b> </b></u></u></s></s></s></i></i></i><b><u><b><i><i><i><i><i><i><i><i><i><i><s><u><u><u><u><u><u> </u></u></u></u></u></u></s></i></i></i></i></i></i></i></i></i></i></b></u><i><i> </i></i></b></i></b></b></b></b>
    </i>
     
    <b><b><b><b><b><b><b><i><i><i><i><i><i><i><i><b><u><u><u><u><u><b><i><i><i><i><i> </i></i></i></i></i></b></u></u></u></u></u></b></i></i></i></i></i></i></i></i></b></b></b></b></b></b></b>
    </i>
     
    <b><b><b><b><b><b><b><b><u><u><u><b><b><b><b><b><b><b><b><b><b><b><b><i><i><i><i><i><i><i><i><i><s><s> </s></s></i></i></i></i></i></i></i></i></i></b></b></b></b></b></b></b></b></b></b></b></b></u></u></u><i><i><i><b><u><u><u><u><u><b><b><b><b><b><b><b><b><b><b> </b></b></b></b></b></b></b></b></b></b></u></u></u></u></u></b></i></i></i></b></b></b></b></b></b></b></b>
    </i>
     
    <b><b><b><b><b><b><b><u><u><u><b><b><b><b><b><b><b><b><b><b><b><b><b> </b></b></b></b></b></b></b></b></b></b></b></b></b></u></u></u></b></b></b></b><u><u><u><u><u><s><s><i><i><i><i><b><u><u><u> </u></u></u></b></i></i></i></i></s></s></u></u></u></u></u></b></b></b>
    </i></i></i></i></i></i>
     
    </b></i></i></s></s></u></u></s></s>
     
    <u><s><u><b><b><i><b><b> </b></b></i></b></b></u></s></u>
    </s></s></s></s></i></i></i></i></i>
     
    </i></s></s></s></s></s></s></i>
     
    <b><i><b><b><b><b> </b></b></b></b></i><b><b><b><b><b><i><i><i><i> </i></i></i></i></b></b></b></b></b></b>
    </b></b></b></b></i></b></b></b></b>
     
    <u><s><s> </s></s><b><b><b><b><u><s><s><s><s><s><s><u><b><b><b><b><b><b> </b></b></b></b></b></b></u></s></s></s></s></s></s></u></b></b></b></b></u>
    </b></b></u></u></u></u></b></b></b></b></b></b>
     
    </i>
     
    <b><b><b><b><b><u><u><u><u><u><s><s><s><s><s><s><u><s><s><s><s><s><u><b><b><b><b><b><b><b> </b></b></b></b></b></b></b></u></s></s></s></s></s><b> </b></u></s></s></s></s></s><i><i><i><i><s><s><s><u><u><b><i><b><u><u><s><s><s><s> </s></s></s></s></u></u></b></i></b></u></u></s></s></s></i></i></i></i></s><u><u><b><b><b><b><b><b><b><b><i><i><i><i><b><b><b><b><b><b><b><b><b><b><b><b><u><u><u><s><s><i><b><i><s><s> </s></s></i></b></i></s></s></u></u></u><i><i><i><b><b><b><b><b><b><u><u><u><u><u><u><u><b><i><i><i><i><b><b><b><i><i><i><i><i><s><u><u><u><u><s><s><i><i><i><i><i><s><u><u><s><s><s><s><s><s><s><u><u><u> </u></u></u></s></s></s></s></s></s></s></u></u></s><b><b><b><b><u><u><u><u><u> </u></u></u></u></u></b></b></b></b></i></i></i></i></i></s><i><i><i><i></i></i></i></i></s></u></u></u></u></s></i></i></i></i></i><b><b><i><i><i><i><i><i><b><b><b><u><s><s><u><b><b><u><u><b><i><i><b><u><u> </u></u></b></i></i></b></u></u></b></b></u></s></s></u></b></b></b></i></i></i></i></i></i></b></b></b></b></b></i></i></i></i></b></u></u></u></u></u></u></u></b><u><s><s><s><s> </s></s></s></s><u><u><u><u><u><u><u><b><b><b><b><b><b><b><b><b><b><i><i><i><i><s><s><s><s><s><s><s><u><u><u><b><b><b><b><b><b><i><i><s><s><s><s><s><u><b><b><b><b> </b></b></b></b></u></s></s></s></s></s></i></i></b></b></b></b></b></b></u></u></u></s></s></s></s></s><i><i><i><i><b><u><u><u><b><b><u><u><u><u><u><b><b><i><s><i><i><b> </b></i></i></s></i></b></b></u></u></u></u></u></b></b></u></u></u></b></i></i></i></i></s></s></i></i></i></i></b></b></b></b></b></b></b></b></b></b></u></u></u></u></u></u></u></u></b></b></b></b></b></i></i></i></b></b></b></b><u><s><s><s><s><s><s><s><u><u><u><b><b><b><b><b><b><b><i> </i></b></b></b></b></b></b></b></u></u></u></s></s></s></s></s></s></s></u></b></b></b></b></b></b></b></b></i></i></i></i></b></b></b></b></b></b></b></b></u></u></u></u></u></u></u></b></b></b></b></b>
    </i></i>
     
    </i></b></b></b></b></b></b></b></b></i></s></s></s></s></s></s></i></b></b></b></b></b>
     
    <u><u><u><s><s><s><s><s><s><i><i><i><i><i><i><i><i><i><i><i><i><i> </i></i></i></i></i></i></i></i></i></i></i></i></i></s></s></s></s></s></s><b><b><b><b><b><b><b><b><b><b><i><i><b><u><u><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><i><i><i><s><s><s><s><s><s><s><u><b><b><b><b><b> </b></b></b></b></b></u></s></s></s></s></s></s></s></i></i></i><b><i><b><u><b><b><b><b><b><i><i><i><i><i><i><s><s><s><u><u><u><u><b><b><i><i><i><s><u><u> </u></u></s></i></i></i><u><s><s><s> </s></s></s></u></b></b></u></u></u></u></s></s></s></i></i></i></i></i></i></b></b></b></b></b></u></b></i></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></u></u></b></i></i></b><i><i><s> </s></i></i></b></b></b></b></b></b></b></b></b></u></u></u>
    </b></b>
     
     
    </u></u></u>
     
    </b></b></u></s></s></s></s></s></u></u></u></u></u></u></u></b></b></b></b></i></i></i>
     
    </b>
     
    <u><u><u><s><u><u><u><u><u><u><u><b><b><b><b></b></b></b></b></u></u></u></u></u></u></u></s></u></u></u>
    </u></u></u></u>
     
    </b></u></s></s></s></s></s></s></s></u>
     
    </u></b></b></u></s></s></s></i></i></i></i></i></s></u></u></u></u></u></u></b></b>
     
    </u>
     
    </b></b></b></b></b>
     
    </b></b></b>
    </b>
    </div>
    </div>
    </body>
    </html>

    It successfully crashes most browsers, and goes mad in firefox and opera (i was unable to track the exact moment they went mad), but works in Safari and Chrome just fine.

    while the image is pending approval, download it here: http://i119.photobucket.com/albums/o...ovsky/maze.png
    Attached Images Attached Images

  10. #10
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL this quiz should be called "Find crash bugs in browsers by just using HTML and CSS"
    Simon Pieters

  11. #11
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Yuri
    That, sir, is a raging BEAST!
    How you even came up with a concept such as that is beyond me. Working or not, my hat's off to you.
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  12. #12
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    thank you Dave , Right now all that is left to do is to somehow find the opera/firefox bug's, fix them, and then add some javascript to make the sections highlight and stay lit.

  13. #13
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again, @Yuri
    Having a look at your maze, I'm wondering if it could be done programatically, using different classes, such as n, s, e, w, ew, ns, etc. where the different classes have border properties that correspond to the cardinal directions they represent (e.g. class nw has border-top and border-left properties assigned), making for a truly (and sometimes, admittedly, unsolvable) maze. Hmmm. Something to think about.
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Dave and Timo well done - They both look good.

    Timo - I have placed your version online to make it easier for others to see (use Safari to view that link).


    I solved it but I had to use the keyboard because I couldn't do it with the mouse.

    Great entries so far





  15. #15
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    didn't you read my comment paul?
    solve it fair or not at all. xD

  16. #16
    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
    Again, @Yuri
    Having a look at your maze, I'm wondering if it could be done programatically, using different classes, such as n, s, e, w, ew, ns, etc. where the different classes have border properties that correspond to the cardinal directions they represent (e.g. class nw has border-top and border-left properties assigned), making for a truly (and sometimes, admittedly, unsolvable) maze. Hmmm. Something to think about.
    Ive been making mazes since i was 10, and one thing i have noticed is that they can not be made programatically as a lot of optical illusions and trickery is involved into tricking the person in the wrong direction, the original one was a little harder as it had a lot of "back to where you came from" paths that i had to remove.

    When i ask someone to pass it on a piece of paper, 90% of the time i get told that it is impossible to pass and that i made a mistake somewhere (i didn't).

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    didn't you read my comment paul?
    solve it fair or not at all. xD
    Yes - that was the first thing I ignored

  18. #18
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    a maze cheated is a maze wasted for nothing.
    the original one had the solution hidden at all times until you hovered over each correct square, but then the css became much too massive, so i simplified it and made it vulnerable to cheating.

    at least mark your solution as a *spoiler*

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    at least mark your solution as a *spoiler*
    Sorry I removed the link instead.

  20. #20
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thanks paul, can i post a javascriped version of it? i mean the css/html is the same, im just removing the annoying "touch the wall and die" effect.

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    Thanks paul, can i post a javascriped version of it? i mean the css/html is the same, im just removing the annoying "touch the wall and die" effect.
    Yes post the scripted version as well as you've shown how to do it with css.

    I quite like the fact that you can't touch the walls in the CSS version but my mouse isn't smooth enough to get through which is why I used the keyboard (and I didn't want to change my mouse settings either)

    I actually solved it by eye anyway but it was still very tricky - Good work

  22. #22
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Having made hundreds of mazes in my youth (I once had a few dozen graph paper pads, all full of various types of mazes. Can't do it any more because of my hands. ), I can appreciate the difficulties involved in creating one programatically. However, that said, I've taken up the challenge, and will make that my next project. I have a simple maze script already done, that has a reasonable chance of creating a solvable maze (about 50-60&#37, and I'm sure that I can increase the probability to over 95%, in time. You can see it here.
    The "animation" part is just a simple hover that places a smilie in the hovered div, but it's something, at least.
    I'll post my progress with this project, as it improves.
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  23. #23
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BTW, one thing that's giving me fits with this is the 1 pixel "jump" some of the borders are taking in random directions. There seems to be no rhyme or reason for it. Anyone have any clues as to why that is?
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  24. #24
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The 1px jump is the 1px border in action


    ill await your programmatic solution in the meanwhile

  25. #25


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
  •