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 [URL=“http://www.sitepoint.com/examples/stretchy/test.php”]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.:slight_smile:

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

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 :slight_smile:

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. :slight_smile:

That last demo is a bit irritating, lol. Sent in my entry. I’ll post the link here once the quiz is nearing completion. :smiley:

Edit:

oops! read ALL instructions prior to posting, Dave… :frowning:

Here’s mine:
http://www.geekcavecreations.com/css_animation.php

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?

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. :slight_smile:
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.

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 :wink:
I’ll keep thinking.

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.

<!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/o126/yurikolovsky/maze.png

LOL this quiz should be called “Find crash bugs in browsers by just using HTML and CSS” :slight_smile:

@Yuri
That, sir, is a raging BEAST! :eek: :lol:
How you even came up with a concept such as that is beyond me. Working or not, my hat’s off to you. :smiley:

thank you Dave :D, 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.

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.

Dave and Timo well done - They both look good.:slight_smile:

Timo - I have placed your version online to make it easier for others to see (use Safari to view that link).
[COLOR=#000000][FONT=Times New Roman][FONT=Tahoma]

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

Great entries so far :slight_smile:

[/FONT][/FONT][/COLOR]

didn’t you read my comment paul?
solve it fair or not at all. xD

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).

Yes - that was the first thing I ignored :slight_smile:

a maze cheated is a maze wasted for nothing. :frowning:
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

Sorry I removed the link instead.

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.