SitePoint Sponsor

User Tag List

Page 2 of 7 FirstFirst 123456 ... LastLast
Results 26 to 50 of 165

Thread: CSS - Test Your CSS Skills Number 32 - animation

  1. Jan 11, 2010 07:59 #26
    YuriKolovsky
    YuriKolovsky is offline
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,067
    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. Jan 11, 2010 08:11 #27
    Dave Morton
    Dave Morton is offline
    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. Jan 11, 2010 08:28 #28
    Dave Morton
    Dave Morton is offline
    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. Jan 11, 2010 08:29 #29
    ryanhellyer
    ryanhellyer is offline
    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
    Ryan Hellyer | Twitter | My Geek blog | WP Realm
  5. Jan 11, 2010 09:02 #30
    YuriKolovsky
    YuriKolovsky is offline
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,067
    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. Jan 11, 2010 09:04 #31
    Dave Morton
    Dave Morton is offline
    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. Jan 11, 2010 09:24 #32
    molona
    molona is offline
    #titanic {float:none} silver trophy
     molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    7,324
    Mentioned
    116 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
    Before asking, do a search... if you don't find the answer, then ask
    The purpose of this forum is to help others in the community, that's why it's called Sitepoint and not Linkpoint.
    SP Guidelines - No fluff.

    Thinking Web: Voices of the Community - The Community Book
  8. Jan 11, 2010 09:24 #33
    YuriKolovsky
    YuriKolovsky is offline
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,067
    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. Jan 11, 2010 10:19 #34
    Dave Morton
    Dave Morton is offline
    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. Jan 11, 2010 10:50 #35
    YuriKolovsky
    YuriKolovsky is offline
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,067
    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. Jan 11, 2010 13:54 #36
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open silver trophybronze trophy
     SitePoint Award Recipient Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    37,749
    Mentioned
    99 Post(s)
    Tagged
    3 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.
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
    Check out SitePoint's latest JavaScript challenge
  12. Jan 11, 2010 15:20 #37
    markbrown4
    markbrown4 is offline
    padawan silver trophy
     SitePoint Award Recipient markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,014
    Mentioned
    25 Post(s)
    Tagged
    0 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.
    --
    twitter | yellowshoe
  13. Jan 11, 2010 16:39 #38
    YuriKolovsky
    YuriKolovsky is offline
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,067
    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. Jan 12, 2010 07:14 #39
    Luki_be
    Luki_be is offline
    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. Jan 12, 2010 08:24 #40
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open silver trophybronze trophy
     SitePoint Award Recipient Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    37,749
    Mentioned
    99 Post(s)
    Tagged
    3 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
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
    Check out SitePoint's latest JavaScript challenge
  16. Jan 12, 2010 08:38 #41
    YuriKolovsky
    YuriKolovsky is offline
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,067
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I have 3 more ideas in progress.
  17. Jan 12, 2010 10:23 #42
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open silver trophybronze trophy
     SitePoint Award Recipient Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    37,749
    Mentioned
    99 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    I have 3 more ideas in progress.
    Great
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
    Check out SitePoint's latest JavaScript challenge
  18. Jan 12, 2010 13:40 #43
    YuriKolovsky
    YuriKolovsky is offline
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,067
    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. Jan 12, 2010 14:04 #44
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open silver trophybronze trophy
     SitePoint Award Recipient Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    37,749
    Mentioned
    99 Post(s)
    Tagged
    3 Thread(s)
    That's pretty good also Timo I was actually wondering if anyone was going to think of using mitred borders.
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
    Check out SitePoint's latest JavaScript challenge
  20. Jan 12, 2010 16:53 #45
    YuriKolovsky
    YuriKolovsky is offline
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,067
    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
  21. Jan 12, 2010 20:08 #46
    Dave Morton
    Dave Morton is offline
    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. Jan 12, 2010 20:10 #47
    Dave Morton
    Dave Morton is offline
    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. Jan 12, 2010 20:24 #48
    markbrown4
    markbrown4 is offline
    padawan silver trophy
     SitePoint Award Recipient markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,014
    Mentioned
    25 Post(s)
    Tagged
    0 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..
    --
    twitter | yellowshoe
  24. Jan 12, 2010 20:42 #49
    RyanReese
    RyanReese is offline
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    5 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. Jan 13, 2010 05:51 #50
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open silver trophybronze trophy
     SitePoint Award Recipient Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    37,749
    Mentioned
    99 Post(s)
    Tagged
    3 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).
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
    Check out SitePoint's latest JavaScript challenge
« Previous Thread | Next Thread »

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
  •  

Forum Rules