SitePoint Sponsor

User Tag List

Page 2 of 7 FirstFirst 123456 ... LastLast
Results 26 to 50 of 165
  1. #26
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul for hosting it.

    I tried to reduce its laggyness to a minimum and made the links hover state permanent, so that you don't have to worry about touching the walls.

  2. #27
    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 YuriKolovsky View Post
    The 1px jump is the 1px border in action


    ill await your programmatic solution in the meanwhile
    lol, already posted the link, but here it is again. I'm currently working on the jumping border problem, and you can see it in action. I've colored the borders differently, to show which border is jumping, but it doesn't help me to figure it out. The divs are also titled, so you can see which div is the culprit (or victim, as it were, since a previous div may be poking it out). What I may have to do is reduce the size of the divs by 2 pixels in width/height, and set 1 pixel margins, then remove the margins on the opposite side of the div that the border is on. At least, that's what I'm thinking.
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  3. #28
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I have the jumping border figured out. I did what I mentioned, but removed the margin from the same side of the border. Makes for strange looking intersections, but I can live with that. . I've also made the rows and columns adjustable. Here's a larger example:

    http://www.geekcavecreations.com/css...ows=30&cols=50
    Edit:

    Please note that I still have no pathing coded in, so there will be some mazes that can't be solved, due to complete blockades, but these are almost always within three or four squares of the entrance or exit.
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  4. #29
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Timo, that maze is AWESOME!

    I can't believe you managed to crash so many browser with nothing but a piddly amount of HTML/CSS. Good job

  5. #30
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thanks ryanhellyer, you compliments are always welcome.

    also I made another little animation demo that was inspired by Dave:

    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>Minesweeper: YuriKolovsky</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    #container {
    	position:relative;
    	margin:20px;
    	border:solid #000 3px;
    	overflow:auto;
    	width:270px;/*30 x 9*/
    }
    #container div {
    	float:left;
    	height:28px;
    	width:28px;
    	background:#c0c0c0;
    	border:solid #999 1px;
    	border-top-color:#fff;
    	border-left-color:#fff;
    	border-bottom-color:#808080;
    	border-right-color:#808080;
    	line-height:28px;
    	font-weight:bold;
    	text-align:center;
    }
    #container div:hover {
    	border-color:#c0c0c0;
    }
    #container div, 
    #container div b,
    #container div i,
    #container div u {
    	color:#c0c0c0;
    }
    #container div:hover b {/*b stands for blue*/
    	color:blue;
    }
    #container div:hover i {
    	color:green;
    	font-style:normal;
    }
    #container div:hover u {
    	color:red;
    	text-decoration:none;
    }
    #container div:hover s {
    	position:absolute;
    	width:270px;
    	height:270px;
    	top:0;
    	left:0;
    	background:red;
    	color:#000;
    	text-decoration: none;
    }
    s:hover:after {
    	content:"ine blew up, and you died a gruesome *_* DEATH *_*";
    }
    </style>
    
    </head>
    <body>
    <h1>Mindsweeper</h1>
    <p>A CSS minesweeper</p>
    <p><a href="http://www.geekcavecreations.com/css_animation.php">Inspired By Dave Morton</a> Created by Timo H</p>
    <p>Memory, remember the sections and find every mine, a mine can't appear before a number, so be careful when passing numbers.</p>
    <div id="container">
    <div> </div><div><i>2</i></div><div><s>m</s></div><div><u>3</u></div><div><b>1</b></div><div> </div><div><b>1</b></div><div><s>m</s></div><div><b>1</b></div>
    <div> </div><div><i>2</i></div><div><s>m</s></div><div><s>m</s></div><div><b>1</b></div><div> </div><div><i>2</i></div><div><i>2</i></div><div><i>2</i></div>
    <div> </div><div><b>1</b></div><div><u>3</u></div><div><u>3</u></div><div><i>2</i></div><div> </div><div><b>1</b></div><div><s>m</s></div><div><b>1</b></div>
    <div> </div><div> </div><div><b>1</b></div><div><s>m</s></div><div><b>1</b></div><div> </div><div><b>1</b></div><div><b>1</b></div><div><b>1</b></div>
    <div> </div><div> </div><div><i>2</i></div><div><i>2</i></div><div><i>2</i></div><div> </div><div> </div><div> </div><div> </div>
    <div> </div><div> </div><div><b>1</b></div><div><s>m</s></div><div><i>2</i></div><div><b>1</b></div><div> </div><div> </div><div> </div>
    <div> </div><div> </div><div><b>1</b></div><div><i>2</i></div><div><s>m</s></div><div><b>1</b></div><div> </div><div><b>1</b></div><div><b>1</b></div>
    <div> </div><div><b>1</b></div><div><b>1</b></div><div><i>2</i></div><div><b>1</b></div><div><b>1</b></div><div> </div><div><b>1</b></div><div><s>m</s></div>
    <div> </div><div><b>1</b></div><div><s>m</s></div><div><b>1</b></div><div> </div><div> </div><div> </div><div><b>1</b></div><div><b>1</b></div>
    </div>
    </body>
    </html>

  6. #31
    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 Love It!!!
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  7. #32
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,175
    Mentioned
    233 Post(s)
    Tagged
    1 Thread(s)
    I have to say that I don't feel myself creative or knowledgeable enough to od this... but what a great way to start 2010! Good luck guys

  8. #33
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I thought id post this one too, its the same thing but clickable instead of hover, can't really figure out how to have multiple clicks though.

    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>Minesweeper: YuriKolovsky</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    #container {
    	position:relative;
    	margin:20px;
    	border:solid #000 3px;
    	overflow:hidden;
    	width:270px;/*30 x 9*/
    }
    #container a {
    	display:block;
    	float:left;
    	height:28px;
    	width:28px;
    	background:#c0c0c0;
    	border:solid #999 1px;
    	border-top-color:#fff;
    	border-left-color:#fff;
    	border-bottom-color:#808080;
    	border-right-color:#808080;
    	line-height:28px;
    	font-weight:bold;
    	text-align:center;
    }
    #container a:focus {
    	border-color:#c0c0c0;
    	outline:none;
    	cursor:default;
    }
    #container a, 
    #container a b,
    #container a i,
    #container a u {
    	color:#c0c0c0;
    }
    #container a:focus b {/*b stands for blue*/
    	color:blue;
    }
    #container a:focus i {
    	color:green;
    	font-style:normal;
    }
    #container a:focus u {
    	color:red;
    	text-decoration:none;
    }
    #container a:focus s {
    	position:absolute;
    	width:270px;
    	height:270px;
    	top:0;
    	left:0;
    	background:red;
    	text-decoration: none;
    	color:#000;
    }
    #container a:focus s:after {
    	content:"ine blew up, and you died a gruesome *_* DEATH *_*";
    }
    
    </style>
    
    </head>
    <body>
    <h1>Mindsweeper</h1>
    <p>A CSS minesweeper</p>
    <p><a href="http://www.geekcavecreations.com/css_animation.php">Inspired By Dave Morton</a> Created by Timo H</p>
    <p>Memory, remember the sections and find every mine, a mine can't appear before a number, so be careful when passing numbers.</p>
    <div id="container">
    <a href="#void"> </a><a href="#void"><i>2</i></a><a href="#mine"><s>m</s></a><a href="#void"><u>3</u></a><a href="#void"><b>1</b></a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#mine"><s>m</s></a><a href="#void"><b>1</b></a>
    <a href="#void"> </a><a href="#void"><i>2</i></a><a href="#mine"><s>m</s></a><a href="#mine"><s>m</s></a><a href="#void"><b>1</b></a><a href="#void"> </a><a href="#void"><i>2</i></a><a href="#void"><i>2</i></a><a href="#void"><i>2</i></a>
    <a href="#void"> </a><a href="#void"><b>1</b></a><a href="#void"><u>3</u></a><a href="#void"><u>3</u></a><a href="#void"><i>2</i></a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#mine"><s>m</s></a><a href="#void"><b>1</b></a>
    <a href="#void"> </a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#mine"><s>m</s></a><a href="#void"><b>1</b></a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#void"><b>1</b></a><a href="#void"><b>1</b></a>
    <a href="#void"> </a><a href="#void"> </a><a href="#void"><i>2</i></a><a href="#void"><i>2</i></a><a href="#void"><i>2</i></a><a href="#void"> </a><a href="#void"> </a><a href="#void"> </a><a href="#void"> </a>
    <a href="#void"> </a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#mine"><s>m</s></a><a href="#void"><i>2</i></a><a href="#void"><b>1</b></a><a href="#void"> </a><a href="#void"> </a><a href="#void"> </a>
    <a href="#void"> </a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#void"><i>2</i></a><a href="#mine"><s>m</s></a><a href="#void"><b>1</b></a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#void"><b>1</b></a>
    <a href="#void"> </a><a href="#void"><b>1</b></a><a href="#void"><b>1</b></a><a href="#void"><i>2</i></a><a href="#void"><b>1</b></a><a href="#void"><b>1</b></a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#mine"><s>m</s></a>
    <a href="#void"> </a><a href="#void"><b>1</b></a><a href="#mine"><s>m</s></a><a href="#void"><b>1</b></a><a href="#void"> </a><a href="#void"> </a><a href="#void"> </a><a href="#void"><b>1</b></a><a href="#void"><b>1</b></a>
    </div>
    </body>
    </html>

  9. #34
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about mouse3, or shift-click?
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  10. #35
    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
    What about mouse3, or shift-click?
    As far as i know, its all the same one type of :focus!
    just some open a new window and so on, but then id need to map all the possible clicks on different pages, which would work but would no longer be much about CSS.

  11. #36
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    also I made another little animation demo that was inspired by Dave:
    Good work - I'm liking these demos

    Dave that maze creation is good also.

  12. #37
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Pretty impressive Timo. Have you had a look at the maze example that's in 'The art and science of Javascript' made by James Edwards?
    http://articles.sitepoint.com/print/...nce-javascript

    How he mapped out the data with four numbers makes sense for a map that size. I know that this was a css challenge so I'm not trying to minimize yours - it's awesome. The js version is more fun to play with as you can go back and try other routes easily.

  13. #38
    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 markbrown4 View Post
    Pretty impressive Timo. Have you had a look at the maze example that's in 'The art and science of Javascript' made by James Edwards?
    http://articles.sitepoint.com/print/...nce-javascript
    No haven't seen it, thanks for pointing me at it, ill have a look.

  14. #39
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's something simple i cooked up in 2004. That's why i posted the direct link instead of the full code. (with Paul's' permission)

    Hover over the ladies face to see the effect.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  15. #40
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks for all entries so far

    Any one else have any ideas or working on anything?

    It doesn't have to be that complicated so don't be over-awed by Timos version.

    I have a couple more ideas If I get time to work on them

  16. #41
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I have 3 more ideas in progress.

  17. #42
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    I have 3 more ideas in progress.
    Great

  18. #43
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ok here is another one, not sure if I can manage to do the other 2, one is pretty amazing, while the other has been seen before on the CSS quizzes.

    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>Cube : YuriKolovsky</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    #container {
    	position:relative;
    	margin:20px;
    	border:solid #000 3px;
    	overflow:hidden;
    	width:450px; /*90 x 5*/
    }
    b {
    	display:block;
    	width:90px;
    	height:300px;
    	float:left;
    }
    b b {
    	margin-left:90px;
    }
    /*
    b:hover {
    	background:red;
    }
    b.start {
    	background:red;
    }*/
    /*lock*/
    /*
    b.start b {
    	display:none;
    }
    b.start:hover b {
    	display:block;
    }*/
    
    
    
    
    #square {
    	position:absolute;
    	top:20&#37;;
    	left:35%;
    	width:160px;
    	z-index:-1;
    }
    #square div {
    	width:0;
    	height:0;
    	float:left;
    }
    
    
    #container b b b b b #square .a {
    	border-right:70px solid red;
    	border-top:58px dashed transparent;
    }
    #container b b b b b #square .b {
    	border-left:70px solid #cc0000;
    	border-top:58px dashed transparent;
    }
    #container b b b b b #square .c {
    	height:70px;
    	width:70px;
    	background:red;
    	margin-top:0px;
    }
    #container b b b b b #square .d {
    	height:70px;
    	width:70px;
    	background:#cc0000;
    }
    #container b b b b b #square .e {
    	border-top:solid red 28px;
    	border-right:solid #a70000 70px;
    }
    #container b b b b b #square .f {
    	border-bottom:solid #a70000 28px;
    	border-right:solid #cc0000 70px;
    }
    #container b b b b b #square .g {
    	border-bottom:solid transparent 16px;
    	border-right:solid #a70000 70px;
    	margin-top:0px;
    }
    #container b b b b b #square .h {
    	border-bottom:0;
    	border-left:0;
    	margin-top:0;
    }
    #container b b b b b #square .i {
    	border-bottom:solid transparent 16px;
    	border-left:solid #a70000 70px;
    }
    
    
    #container b:hover b b b b #square .a {
    	border-right:120px solid red;
    	border-top:30px dashed transparent;
    }
    #container b:hover b b b b #square .b {
    	border-left:20px solid #cc0000;
    	border-top:72px dashed transparent;
    }
    #container b:hover b b b b #square .c {
    	height:92px;
    	width:120px;
    	background:red;
    	margin-top:-42px;
    }
    #container b:hover b b b b #square .d {
    	height:50px;
    	width:20px;
    	background:#cc0000;
    }
    #container b:hover b b b b #square .e {
    	border-top:solid red 16px;
    	border-right:solid #a70000 120px;
    }
    #container b:hover b b b b #square .f {
    	border-bottom:solid #a70000 40px;
    	border-right:solid #cc0000 20px;
    }
    #container b:hover b b b b #square .g {
    	border-bottom:solid transparent 32px;
    	border-right:solid #a70000 40px;
    	margin-top:-24px;
    }
    #container b:hover b b b b #square .h {
    	border-bottom:solid #a70000 24px;
    	border-left:solid #a70000 80px;
    	margin-top:-24px;
    }
    #container b:hover b b b b #square .i {
    	border-bottom:solid transparent 8px;
    	border-left:solid #a70000 100px;
    }
    
    
    
    #container b b:hover b b b #square .a {
    	border-right:70px solid transparent;
    	border-top:15px solid transparent;
    }
    #container b b:hover b b b #square .b {
    	border-left:70px solid transparent;
    	border-top:15px solid transparent;
    }
    #container b b:hover b b b #square .c {
    	height:100px;
    	width:120px;
    	background:red;
    	margin-top:0;
    }
    #container b b:hover b b b #square .d {
    	height:100px;
    	width:20px;
    	background:red;
    }
    #container b b:hover b b b #square .e {
    	border-right:solid red 70px;
    	border-top:solid red 25px;
    }
    #container b b:hover b b b #square .f {
    	border-bottom:solid red 25px;
    	border-right:solid red 70px;
    }
    #container b b:hover b b b #square .g {
    	margin-top:0;
    	border-bottom:solid transparent 20px;
    	border-right:solid #a70000 45px;
    }
    #container b b:hover b b b #square .h {
    	border-bottom:solid #a70000 50px;
    	border-left:solid #a70000 50px;
    	margin-top:0;
    	border-bottom:20px #a70000 solid;
    }
    #container b b:hover b b b #square .i {
    	border-bottom:solid transparent 20px;
    	border-left:solid #a70000 45px;
    }
    
    
    #container b b b:hover b b #square .a {
    	border:0;
    	border-right:20px solid #cc0000;
    	border-top:72px dashed transparent;
    }
    #container b b b:hover b b #square .b {
    	border:0;
    	border-left:120px solid red;
    	border-top:30px dashed transparent;
    }
    #container b b b:hover b b #square .c {
    	border:0;
    	height:92px;
    	width:120px;
    	background:red;
    	margin-top:0;
    }
    #container b b b:hover b b #square .d {
    	border:0;
    	height:50px;
    	width:20px;
    	background:#cc0000;
    	margin-top:-50px;
    	margin-right:10px;
    }
    #container b b b:hover b b #square .e {
    	border:0;
    	border-bottom:solid #a70000 40px;
    	border-left:solid #cc0000 20px;
    }
    #container b b b:hover b b #square .f {
    	border:0;
    	border-top:solid red 16px;
    	border-left:solid #a70000 120px;
    }
    #container b b b:hover b b #square .g {
    	border:0;
    	margin:0;
    	border-bottom:solid #a70000 24px;
    	border-left:solid #a70000 80px;
    }
    #container b b b:hover b b #square .h {
    	border:0;
    	margin:0;
    	border-bottom:solid transparent 32px;
    	border-left:solid #a70000 40px;
    }
    #container b b b:hover b b #square .i {
    	border:0;
    	border-bottom:solid transparent 8px;
    	border-right:solid #a70000 100px;
    	margin-top:-8px;
    }
    
    
    
    
    #container b b b b:hover b #square .a {
    	border:0;
    	margin:0;
    	border-right:70px solid #cc0000;
    	border-top:58px dashed transparent;
    }
    #container b b b b:hover b #square .b {
    	border:0;
    	margin:0;
    	border-left:70px solid red;
    	border-top:58px dashed transparent;
    }
    #container b b b b:hover b #square .c {
    	border:0;
    	margin:0;
    	height:70px;
    	width:70px;
    	background:#cc0000;
    }
    #container b b b b:hover b #square .d {
    	border:0;
    	margin:0;
    	height:70px;
    	width:70px;
    	background:red;
    }
    #container b b b b:hover b #square .e {
    	border:0;
    	margin:0;
    	border-top:solid #cc0000 28px;
    	border-right:solid #a70000 70px;
    }
    #container b b b b:hover b #square .f {
    	border:0;
    	margin:0;
    	border-bottom:solid #a70000 28px;
    	border-right:solid red 70px;
    }
    #container b b b b:hover b #square .g {
    	border:0;
    	margin:0;
    	border-bottom:solid transparent 16px;
    	border-right:solid #a70000 70px;
    	margin-top:0px;
    }
    #container b b b b:hover b #square .h {
    	border:0;
    	margin:0;
    	border-bottom:0;
    	border-left:0;
    	margin-top:0;
    }
    #container b b b b:hover b #square .i {
    	border:0;
    	margin:0;
    	border-bottom:solid transparent 16px;
    	border-left:solid #a70000 70px;
    }
    
    </style>
    
    </head>
    <body>
    <h1>3D CSS: Cube animation</h1>
    <p>Note from Timo: sorry for the disproportional 3D, the dimensions were measured by eye.</p>
    <div id="container">
    <b class="start">
    <b><b><b><b>
    	<div id="square">
    	<div class="a"></div>
    	<div class="b"></div>
    	<div class="c"></div>
    	<div class="d"></div>
    	<div class="e"></div>
    	<div class="f"></div>
    	<div class="g"></div>
        <div class="h"></div>
        <div class="i"></div>
    	</div>
    </b></b></b></b>
    </b>
    </div>
    
    </body>
    </html>
    At first I intended the spin to be a full 360, so that the mouse out or over would look completely natural, but then I realized how short on time i was for the other 2 demos.

    p.s. does anyone have any book animations disposable? i need a link for a book that changes pages, the sections, like the movement of the actual page to the next one, it would break the rules of this quiz a little, but i think the idea is worth it.

  19. #44
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    That's pretty good also Timo I was actually wondering if anyone was going to think of using mitred borders.

  20. #45
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    OK here is the other easier one, I decided to re use the technique from Quiz 18B, because it also counts as a animation, but this time i made the "senses" auto generate with PHP, so i could make it larger but decided to keep it between large and medium for performance reasons:

    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>Eye can see you: YuriKolovsky</title>
    <style type="text/css">
    #sixthsense {
    	width:600px;
    	height:600px;
    	border:solid red 3px;
    }
    
    .sense {
    	position:relative;
    	z-index:2;
    	width:60px;
    	height:60px;
    	float:left;
    }
    .sense:hover {
    	background:rgba(100,100,100,0.5);
    	cursor:pointer;
    	border:5px solid black;
    	width:50px;
    	height:50px;
    	border-radius:60px;
    	-moz-border-radius:60px;
    	-webkit-border-radius:60px;
    }
    
    #eye {
    	border:3px solid black;
    	-moz-border-radius:400px;
    	-webkit-border-radius:400px;
    	border-radius:400px;
    	width:400px;
    	height:400px;
    	position:relative;
    	left:90px;
    	top:90px;
    }
    #eye .iris {
    	border:100px solid green;
    	-moz-border-radius:100px;
    	-webkit-border-radius:100px;
    	border-radius:100px;
    	width:0;
    	height:0;
    	position:relative;
    	left:97px;
    	top:97px;
    }
    #eye .pupil {
    	border:50px solid #000;
    	-moz-border-radius:50px;
    	-webkit-border-radius:50px;
    	border-radius:50px;
    	width:0;
    	height:0;
    	position:relative;
    	left:-50px;
    	top:-51px;
    }
    #eye .highlight {
    	border:17px solid #fff;
    	-moz-border-radius:17px;
    	-webkit-border-radius:17px;
    	border-radius:17px;
    	width:0;
    	height:0;
    	position:relative;
    	left:-50px;
    	top:-50px;
    }
    
    
    #sixthsense #a5:hover ~ #eye .pupil {
    	/*border-color:red;*/
    	
    }
    
    
    #sixthsense #a1:hover ~ #eye .iris {left:57px;top:57px;}
    #sixthsense #a2:hover ~ #eye .iris {left:65px;top:57px;}
    #sixthsense #a3:hover ~ #eye .iris {left:73px;top:57px;}
    #sixthsense #a4:hover ~ #eye .iris {left:81px;top:57px;}
    #sixthsense #a5:hover ~ #eye .iris {left:89px;top:57px;}
    #sixthsense #a6:hover ~ #eye .iris {left:97px;top:57px;}
    #sixthsense #a7:hover ~ #eye .iris {left:105px;top:57px;}
    #sixthsense #a8:hover ~ #eye .iris {left:113px;top:57px;}
    #sixthsense #a9:hover ~ #eye .iris {left:121px;top:57px;}
    #sixthsense #a10:hover ~ #eye .iris {left:129px;top:57px;}
    #sixthsense #a11:hover ~ #eye .iris {left:57px;top:65px;}
    #sixthsense #a12:hover ~ #eye .iris {left:65px;top:65px;}
    #sixthsense #a13:hover ~ #eye .iris {left:73px;top:65px;}
    #sixthsense #a14:hover ~ #eye .iris {left:81px;top:65px;}
    #sixthsense #a15:hover ~ #eye .iris {left:89px;top:65px;}
    #sixthsense #a16:hover ~ #eye .iris {left:97px;top:65px;}
    #sixthsense #a17:hover ~ #eye .iris {left:105px;top:65px;}
    #sixthsense #a18:hover ~ #eye .iris {left:113px;top:65px;}
    #sixthsense #a19:hover ~ #eye .iris {left:121px;top:65px;}
    #sixthsense #a20:hover ~ #eye .iris {left:129px;top:65px;}
    #sixthsense #a21:hover ~ #eye .iris {left:57px;top:73px;}
    #sixthsense #a22:hover ~ #eye .iris {left:65px;top:73px;}
    #sixthsense #a23:hover ~ #eye .iris {left:73px;top:73px;}
    #sixthsense #a24:hover ~ #eye .iris {left:81px;top:73px;}
    #sixthsense #a25:hover ~ #eye .iris {left:89px;top:73px;}
    #sixthsense #a26:hover ~ #eye .iris {left:97px;top:73px;}
    #sixthsense #a27:hover ~ #eye .iris {left:105px;top:73px;}
    #sixthsense #a28:hover ~ #eye .iris {left:113px;top:73px;}
    #sixthsense #a29:hover ~ #eye .iris {left:121px;top:73px;}
    #sixthsense #a30:hover ~ #eye .iris {left:129px;top:73px;}
    #sixthsense #a31:hover ~ #eye .iris {left:57px;top:81px;}
    #sixthsense #a32:hover ~ #eye .iris {left:65px;top:81px;}
    #sixthsense #a33:hover ~ #eye .iris {left:73px;top:81px;}
    #sixthsense #a34:hover ~ #eye .iris {left:81px;top:81px;}
    #sixthsense #a35:hover ~ #eye .iris {left:89px;top:81px;}
    #sixthsense #a36:hover ~ #eye .iris {left:97px;top:81px;}
    #sixthsense #a37:hover ~ #eye .iris {left:105px;top:81px;}
    #sixthsense #a38:hover ~ #eye .iris {left:113px;top:81px;}
    #sixthsense #a39:hover ~ #eye .iris {left:121px;top:81px;}
    #sixthsense #a40:hover ~ #eye .iris {left:129px;top:81px;}
    #sixthsense #a41:hover ~ #eye .iris {left:57px;top:89px;}
    #sixthsense #a42:hover ~ #eye .iris {left:65px;top:89px;}
    #sixthsense #a43:hover ~ #eye .iris {left:73px;top:89px;}
    #sixthsense #a44:hover ~ #eye .iris {left:81px;top:89px;}
    #sixthsense #a45:hover ~ #eye .iris {left:89px;top:89px;}
    #sixthsense #a46:hover ~ #eye .iris {left:97px;top:89px;}
    #sixthsense #a47:hover ~ #eye .iris {left:105px;top:89px;}
    #sixthsense #a48:hover ~ #eye .iris {left:113px;top:89px;}
    #sixthsense #a49:hover ~ #eye .iris {left:121px;top:89px;}
    #sixthsense #a50:hover ~ #eye .iris {left:129px;top:89px;}
    #sixthsense #a51:hover ~ #eye .iris {left:57px;top:97px;}
    #sixthsense #a52:hover ~ #eye .iris {left:65px;top:97px;}
    #sixthsense #a53:hover ~ #eye .iris {left:73px;top:97px;}
    #sixthsense #a54:hover ~ #eye .iris {left:81px;top:97px;}
    #sixthsense #a55:hover ~ #eye .iris {left:89px;top:97px;}
    #sixthsense #a56:hover ~ #eye .iris {left:97px;top:97px;}
    #sixthsense #a57:hover ~ #eye .iris {left:105px;top:97px;}
    #sixthsense #a58:hover ~ #eye .iris {left:113px;top:97px;}
    #sixthsense #a59:hover ~ #eye .iris {left:121px;top:97px;}
    #sixthsense #a60:hover ~ #eye .iris {left:129px;top:97px;}
    #sixthsense #a61:hover ~ #eye .iris {left:57px;top:105px;}
    #sixthsense #a62:hover ~ #eye .iris {left:65px;top:105px;}
    #sixthsense #a63:hover ~ #eye .iris {left:73px;top:105px;}
    #sixthsense #a64:hover ~ #eye .iris {left:81px;top:105px;}
    #sixthsense #a65:hover ~ #eye .iris {left:89px;top:105px;}
    #sixthsense #a66:hover ~ #eye .iris {left:97px;top:105px;}
    #sixthsense #a67:hover ~ #eye .iris {left:105px;top:105px;}
    #sixthsense #a68:hover ~ #eye .iris {left:113px;top:105px;}
    #sixthsense #a69:hover ~ #eye .iris {left:121px;top:105px;}
    #sixthsense #a70:hover ~ #eye .iris {left:129px;top:105px;}
    #sixthsense #a71:hover ~ #eye .iris {left:57px;top:113px;}
    #sixthsense #a72:hover ~ #eye .iris {left:65px;top:113px;}
    #sixthsense #a73:hover ~ #eye .iris {left:73px;top:113px;}
    #sixthsense #a74:hover ~ #eye .iris {left:81px;top:113px;}
    #sixthsense #a75:hover ~ #eye .iris {left:89px;top:113px;}
    #sixthsense #a76:hover ~ #eye .iris {left:97px;top:113px;}
    #sixthsense #a77:hover ~ #eye .iris {left:105px;top:113px;}
    #sixthsense #a78:hover ~ #eye .iris {left:113px;top:113px;}
    #sixthsense #a79:hover ~ #eye .iris {left:121px;top:113px;}
    #sixthsense #a80:hover ~ #eye .iris {left:129px;top:113px;}
    #sixthsense #a81:hover ~ #eye .iris {left:57px;top:121px;}
    #sixthsense #a82:hover ~ #eye .iris {left:65px;top:121px;}
    #sixthsense #a83:hover ~ #eye .iris {left:73px;top:121px;}
    #sixthsense #a84:hover ~ #eye .iris {left:81px;top:121px;}
    #sixthsense #a85:hover ~ #eye .iris {left:89px;top:121px;}
    #sixthsense #a86:hover ~ #eye .iris {left:97px;top:121px;}
    #sixthsense #a87:hover ~ #eye .iris {left:105px;top:121px;}
    #sixthsense #a88:hover ~ #eye .iris {left:113px;top:121px;}
    #sixthsense #a89:hover ~ #eye .iris {left:121px;top:121px;}
    #sixthsense #a90:hover ~ #eye .iris {left:129px;top:121px;}
    #sixthsense #a91:hover ~ #eye .iris {left:57px;top:129px;}
    #sixthsense #a92:hover ~ #eye .iris {left:65px;top:129px;}
    #sixthsense #a93:hover ~ #eye .iris {left:73px;top:129px;}
    #sixthsense #a94:hover ~ #eye .iris {left:81px;top:129px;}
    #sixthsense #a95:hover ~ #eye .iris {left:89px;top:129px;}
    #sixthsense #a96:hover ~ #eye .iris {left:97px;top:129px;}
    #sixthsense #a97:hover ~ #eye .iris {left:105px;top:129px;}
    #sixthsense #a98:hover ~ #eye .iris {left:113px;top:129px;}
    #sixthsense #a99:hover ~ #eye .iris {left:121px;top:129px;}
    #sixthsense #a100:hover ~ #eye .iris {left:129px;top:129px;}
    #sixthsense #a1:hover ~ #eye .pupil {left:-70px;top:-71px;}
    #sixthsense #a2:hover ~ #eye .pupil {left:-66px;top:-71px;}
    #sixthsense #a3:hover ~ #eye .pupil {left:-62px;top:-71px;}
    #sixthsense #a4:hover ~ #eye .pupil {left:-58px;top:-71px;}
    #sixthsense #a5:hover ~ #eye .pupil {left:-54px;top:-71px;}
    #sixthsense #a6:hover ~ #eye .pupil {left:-50px;top:-71px;}
    #sixthsense #a7:hover ~ #eye .pupil {left:-46px;top:-71px;}
    #sixthsense #a8:hover ~ #eye .pupil {left:-42px;top:-71px;}
    #sixthsense #a9:hover ~ #eye .pupil {left:-38px;top:-71px;}
    #sixthsense #a10:hover ~ #eye .pupil {left:-34px;top:-71px;}
    #sixthsense #a11:hover ~ #eye .pupil {left:-70px;top:-67px;}
    #sixthsense #a12:hover ~ #eye .pupil {left:-66px;top:-67px;}
    #sixthsense #a13:hover ~ #eye .pupil {left:-62px;top:-67px;}
    #sixthsense #a14:hover ~ #eye .pupil {left:-58px;top:-67px;}
    #sixthsense #a15:hover ~ #eye .pupil {left:-54px;top:-67px;}
    #sixthsense #a16:hover ~ #eye .pupil {left:-50px;top:-67px;}
    #sixthsense #a17:hover ~ #eye .pupil {left:-46px;top:-67px;}
    #sixthsense #a18:hover ~ #eye .pupil {left:-42px;top:-67px;}
    #sixthsense #a19:hover ~ #eye .pupil {left:-38px;top:-67px;}
    #sixthsense #a20:hover ~ #eye .pupil {left:-34px;top:-67px;}
    #sixthsense #a21:hover ~ #eye .pupil {left:-70px;top:-63px;}
    #sixthsense #a22:hover ~ #eye .pupil {left:-66px;top:-63px;}
    #sixthsense #a23:hover ~ #eye .pupil {left:-62px;top:-63px;}
    #sixthsense #a24:hover ~ #eye .pupil {left:-58px;top:-63px;}
    #sixthsense #a25:hover ~ #eye .pupil {left:-54px;top:-63px;}
    #sixthsense #a26:hover ~ #eye .pupil {left:-50px;top:-63px;}
    #sixthsense #a27:hover ~ #eye .pupil {left:-46px;top:-63px;}
    #sixthsense #a28:hover ~ #eye .pupil {left:-42px;top:-63px;}
    #sixthsense #a29:hover ~ #eye .pupil {left:-38px;top:-63px;}
    #sixthsense #a30:hover ~ #eye .pupil {left:-34px;top:-63px;}
    #sixthsense #a31:hover ~ #eye .pupil {left:-70px;top:-59px;}
    #sixthsense #a32:hover ~ #eye .pupil {left:-66px;top:-59px;}
    #sixthsense #a33:hover ~ #eye .pupil {left:-62px;top:-59px;}
    #sixthsense #a34:hover ~ #eye .pupil {left:-58px;top:-59px;}
    #sixthsense #a35:hover ~ #eye .pupil {left:-54px;top:-59px;}
    #sixthsense #a36:hover ~ #eye .pupil {left:-50px;top:-59px;}
    #sixthsense #a37:hover ~ #eye .pupil {left:-46px;top:-59px;}
    #sixthsense #a38:hover ~ #eye .pupil {left:-42px;top:-59px;}
    #sixthsense #a39:hover ~ #eye .pupil {left:-38px;top:-59px;}
    #sixthsense #a40:hover ~ #eye .pupil {left:-34px;top:-59px;}
    #sixthsense #a41:hover ~ #eye .pupil {left:-70px;top:-55px;}
    #sixthsense #a42:hover ~ #eye .pupil {left:-66px;top:-55px;}
    #sixthsense #a43:hover ~ #eye .pupil {left:-62px;top:-55px;}
    #sixthsense #a44:hover ~ #eye .pupil {left:-58px;top:-55px;}
    #sixthsense #a45:hover ~ #eye .pupil {left:-54px;top:-55px;}
    #sixthsense #a46:hover ~ #eye .pupil {left:-50px;top:-55px;}
    #sixthsense #a47:hover ~ #eye .pupil {left:-46px;top:-55px;}
    #sixthsense #a48:hover ~ #eye .pupil {left:-42px;top:-55px;}
    #sixthsense #a49:hover ~ #eye .pupil {left:-38px;top:-55px;}
    #sixthsense #a50:hover ~ #eye .pupil {left:-34px;top:-55px;}
    #sixthsense #a51:hover ~ #eye .pupil {left:-70px;top:-51px;}
    #sixthsense #a52:hover ~ #eye .pupil {left:-66px;top:-51px;}
    #sixthsense #a53:hover ~ #eye .pupil {left:-62px;top:-51px;}
    #sixthsense #a54:hover ~ #eye .pupil {left:-58px;top:-51px;}
    #sixthsense #a55:hover ~ #eye .pupil {left:-54px;top:-51px;}
    #sixthsense #a56:hover ~ #eye .pupil {left:-50px;top:-51px;}
    #sixthsense #a57:hover ~ #eye .pupil {left:-46px;top:-51px;}
    #sixthsense #a58:hover ~ #eye .pupil {left:-42px;top:-51px;}
    #sixthsense #a59:hover ~ #eye .pupil {left:-38px;top:-51px;}
    #sixthsense #a60:hover ~ #eye .pupil {left:-34px;top:-51px;}
    #sixthsense #a61:hover ~ #eye .pupil {left:-70px;top:-47px;}
    #sixthsense #a62:hover ~ #eye .pupil {left:-66px;top:-47px;}
    #sixthsense #a63:hover ~ #eye .pupil {left:-62px;top:-47px;}
    #sixthsense #a64:hover ~ #eye .pupil {left:-58px;top:-47px;}
    #sixthsense #a65:hover ~ #eye .pupil {left:-54px;top:-47px;}
    #sixthsense #a66:hover ~ #eye .pupil {left:-50px;top:-47px;}
    #sixthsense #a67:hover ~ #eye .pupil {left:-46px;top:-47px;}
    #sixthsense #a68:hover ~ #eye .pupil {left:-42px;top:-47px;}
    #sixthsense #a69:hover ~ #eye .pupil {left:-38px;top:-47px;}
    #sixthsense #a70:hover ~ #eye .pupil {left:-34px;top:-47px;}
    #sixthsense #a71:hover ~ #eye .pupil {left:-70px;top:-43px;}
    #sixthsense #a72:hover ~ #eye .pupil {left:-66px;top:-43px;}
    #sixthsense #a73:hover ~ #eye .pupil {left:-62px;top:-43px;}
    #sixthsense #a74:hover ~ #eye .pupil {left:-58px;top:-43px;}
    #sixthsense #a75:hover ~ #eye .pupil {left:-54px;top:-43px;}
    #sixthsense #a76:hover ~ #eye .pupil {left:-50px;top:-43px;}
    #sixthsense #a77:hover ~ #eye .pupil {left:-46px;top:-43px;}
    #sixthsense #a78:hover ~ #eye .pupil {left:-42px;top:-43px;}
    #sixthsense #a79:hover ~ #eye .pupil {left:-38px;top:-43px;}
    #sixthsense #a80:hover ~ #eye .pupil {left:-34px;top:-43px;}
    #sixthsense #a81:hover ~ #eye .pupil {left:-70px;top:-39px;}
    #sixthsense #a82:hover ~ #eye .pupil {left:-66px;top:-39px;}
    #sixthsense #a83:hover ~ #eye .pupil {left:-62px;top:-39px;}
    #sixthsense #a84:hover ~ #eye .pupil {left:-58px;top:-39px;}
    #sixthsense #a85:hover ~ #eye .pupil {left:-54px;top:-39px;}
    #sixthsense #a86:hover ~ #eye .pupil {left:-50px;top:-39px;}
    #sixthsense #a87:hover ~ #eye .pupil {left:-46px;top:-39px;}
    #sixthsense #a88:hover ~ #eye .pupil {left:-42px;top:-39px;}
    #sixthsense #a89:hover ~ #eye .pupil {left:-38px;top:-39px;}
    #sixthsense #a90:hover ~ #eye .pupil {left:-34px;top:-39px;}
    #sixthsense #a91:hover ~ #eye .pupil {left:-70px;top:-35px;}
    #sixthsense #a92:hover ~ #eye .pupil {left:-66px;top:-35px;}
    #sixthsense #a93:hover ~ #eye .pupil {left:-62px;top:-35px;}
    #sixthsense #a94:hover ~ #eye .pupil {left:-58px;top:-35px;}
    #sixthsense #a95:hover ~ #eye .pupil {left:-54px;top:-35px;}
    #sixthsense #a96:hover ~ #eye .pupil {left:-50px;top:-35px;}
    #sixthsense #a97:hover ~ #eye .pupil {left:-46px;top:-35px;}
    #sixthsense #a98:hover ~ #eye .pupil {left:-42px;top:-35px;}
    #sixthsense #a99:hover ~ #eye .pupil {left:-38px;top:-35px;}
    #sixthsense #a100:hover ~ #eye .pupil {left:-34px;top:-35px;}
    /*
    #sixthsense #a1:hover ~ #eye .iris {
    	left:67px;
    	top:67px;
    }
    #sixthsense #a1:hover ~ #eye .pupil {
    	left:-65px;
    	top:-66px;
    }*/
    
    </style>
    </head>
    <body>
    <h1>Eye can see you</h1>
    <p>Timo says: I just thought it would be fun to re-do this.</p>
    <div id="sixthsense">
    <div class="sense" id="a1"></div>
    <div class="sense" id="a2"></div>
    
    <div class="sense" id="a3"></div>
    <div class="sense" id="a4"></div>
    <div class="sense" id="a5"></div>
    <div class="sense" id="a6"></div>
    <div class="sense" id="a7"></div>
    <div class="sense" id="a8"></div>
    <div class="sense" id="a9"></div>
    <div class="sense" id="a10"></div>
    <div class="sense" id="a11"></div>
    <div class="sense" id="a12"></div>
    <div class="sense" id="a13"></div>
    <div class="sense" id="a14"></div>
    <div class="sense" id="a15"></div>
    <div class="sense" id="a16"></div>
    <div class="sense" id="a17"></div>
    <div class="sense" id="a18"></div>
    <div class="sense" id="a19"></div>
    
    <div class="sense" id="a20"></div>
    <div class="sense" id="a21"></div>
    <div class="sense" id="a22"></div>
    <div class="sense" id="a23"></div>
    <div class="sense" id="a24"></div>
    <div class="sense" id="a25"></div>
    <div class="sense" id="a26"></div>
    <div class="sense" id="a27"></div>
    <div class="sense" id="a28"></div>
    <div class="sense" id="a29"></div>
    <div class="sense" id="a30"></div>
    <div class="sense" id="a31"></div>
    <div class="sense" id="a32"></div>
    <div class="sense" id="a33"></div>
    <div class="sense" id="a34"></div>
    <div class="sense" id="a35"></div>
    <div class="sense" id="a36"></div>
    
    <div class="sense" id="a37"></div>
    <div class="sense" id="a38"></div>
    <div class="sense" id="a39"></div>
    <div class="sense" id="a40"></div>
    <div class="sense" id="a41"></div>
    <div class="sense" id="a42"></div>
    <div class="sense" id="a43"></div>
    <div class="sense" id="a44"></div>
    <div class="sense" id="a45"></div>
    <div class="sense" id="a46"></div>
    <div class="sense" id="a47"></div>
    <div class="sense" id="a48"></div>
    <div class="sense" id="a49"></div>
    <div class="sense" id="a50"></div>
    <div class="sense" id="a51"></div>
    <div class="sense" id="a52"></div>
    <div class="sense" id="a53"></div>
    
    <div class="sense" id="a54"></div>
    <div class="sense" id="a55"></div>
    <div class="sense" id="a56"></div>
    <div class="sense" id="a57"></div>
    <div class="sense" id="a58"></div>
    <div class="sense" id="a59"></div>
    <div class="sense" id="a60"></div>
    <div class="sense" id="a61"></div>
    <div class="sense" id="a62"></div>
    <div class="sense" id="a63"></div>
    <div class="sense" id="a64"></div>
    <div class="sense" id="a65"></div>
    <div class="sense" id="a66"></div>
    <div class="sense" id="a67"></div>
    <div class="sense" id="a68"></div>
    <div class="sense" id="a69"></div>
    <div class="sense" id="a70"></div>
    
    <div class="sense" id="a71"></div>
    <div class="sense" id="a72"></div>
    <div class="sense" id="a73"></div>
    <div class="sense" id="a74"></div>
    <div class="sense" id="a75"></div>
    <div class="sense" id="a76"></div>
    <div class="sense" id="a77"></div>
    <div class="sense" id="a78"></div>
    <div class="sense" id="a79"></div>
    <div class="sense" id="a80"></div>
    <div class="sense" id="a81"></div>
    <div class="sense" id="a82"></div>
    <div class="sense" id="a83"></div>
    <div class="sense" id="a84"></div>
    <div class="sense" id="a85"></div>
    <div class="sense" id="a86"></div>
    <div class="sense" id="a87"></div>
    
    <div class="sense" id="a88"></div>
    <div class="sense" id="a89"></div>
    <div class="sense" id="a90"></div>
    <div class="sense" id="a91"></div>
    <div class="sense" id="a92"></div>
    <div class="sense" id="a93"></div>
    <div class="sense" id="a94"></div>
    <div class="sense" id="a95"></div>
    <div class="sense" id="a96"></div>
    <div class="sense" id="a97"></div>
    <div class="sense" id="a98"></div>
    <div class="sense" id="a99"></div>
    <div class="sense" id="a100"></div>
      
        
        <div id="eye">
        	<div class="iris"><div class="pupil"><div class="highlight"></div></div></div>
    
        </div>
    
    </div>  
    </body>
    </html>
    edit:
    forgot to add the attachment.
    Attached Images Attached Images

  21. #46
    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 you go, Timo. I've made a link for you, to that page on my site.

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

  22. #47
    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, I'm still working on that maze page. I'm getting closer, but it's still not ready yet.
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  23. #48
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    You're a nut Timo , these are very cool ideas.
    I'm scatching my head trying to think how to do animation without mouse interaction..

  24. #49
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'll give you a hint for one way...

    CSS sprites and empty elements.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  25. #50
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    OK here is the other easier one, I decided to re use the technique from Quiz 18B, because it also counts as a animation, but this time i made the "senses" auto generate with PHP, so i could make it larger but decided to keep it between large and medium for performance reasons:
    I was actually going to mention that original demo in the intro but forgot. Looks very good now

    BTW what is the attachment for as you don't seem to have an image mentioned in the code (unless I missed it).

    (Thanks for putting it online Dave).


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
  •