TobyInkster.co.uk
More Complex Spiral
HTML
Really easy...
<ul id="spiral">
<li id="sp1"><a href="#">Home<span></span></a></li>
<li id="sp2"><a href="#">Articles<span></span></a></li>
<li id="sp3"><a href="#">News<span></span></a></li>
<li id="sp4"><a href="#">Links<span></span></a></li>
<li id="sp5"><a href="#">Contact Us<span></span></a></li>
</ul>CSS
Really hard...
#spiral {
list-style: none;
width: 350px;
height: 350px;
padding: 0;
margin: 0;
color: white;
background: black url("/Images/spiral/bg.png");
position: relative;
border: 1px solid black;
}
#spiral li {
margin: 0;
padding: 0;
}
#spiral li a:link, #spiral li a:visited {
color: white;
font-size: 50%;
}
#spiral li a:link span, #spiral li a:visited span {
position: absolute;
text-decoration: none;
z-index: 10;
}
#spiral li a:focus {
outline: 0 transparent none;
border: 0 transparent none;
}
#sp1 a:link span, #sp1 a:visited span {
height: 88px;
width: 60px;
top: 142px;
left: 188px;
background: transparent url("/Images/spiral/home1.png");
}
#sp1 a:hover span, #sp1 a:focus span {
background: transparent url("/Images/spiral/home2.png");
}
#sp2 a:link span, #sp2 a:visited span {
height: 65px;
width: 75px;
top: 140px;
left: 75px;
background: transparent url("/Images/spiral/articles1.png");
}
#sp2 a:hover span, #sp2 a:focus span {
background: transparent url("/Images/spiral/articles2.png");
}
#sp3 a:link span, #sp3 a:visited span {
height: 91px;
width: 52px;
top: 145px;
left: 257px;
background: transparent url("/Images/spiral/news1.png");
}
#sp3 a:hover span, #sp3 a:focus span {
background: transparent url("/Images/spiral/news2.png");
}
#sp4 a:link span, #sp4 a:visited span {
height: 61px;
width: 82px;
top: 238px;
left: 41px;
background: transparent url("/Images/spiral/links1.png");
}
#sp4 a:hover span, #sp4 a:focus span {
background: transparent url("/Images/spiral/links2.png");
}
#sp5 a:link span, #sp5 a:visited span {
height: 96px;
width: 123px;
top: 42px;
left: 25px;
background: transparent url("/Images/spiral/contact1.png");
}
#sp5 a:hover span, #sp5 a:focus span {
background: transparent url("/Images/spiral/contact2.png");
}