Stu Nicholls | CSSplay | CSS Fibonacci spiral

Information

Prompted by a recent comment I give you my CSS version of Fibonacci's spiral (and no, I hadn't heard of it either). But here it is, produced by using just four quadrants of a circle images and sizes in ems so that it will scale up and down with text sizes.

1st July 2005

My pure CSS version using no graphics (but a bit chunky) added. This used em size containers and percentage size 'curves'.

Cascading Style Sheet

#spiral {position:relative; height:34em;}
#spiral21 {width:21em; position:absolute; left:0; top:13em;}
#spiral13 {width:13em; position:absolute; left:8em; top:0;}
#spiral8 {width:8em; position:absolute; left:0; top:0;}
#spiral5 {width:5em; position:absolute; top:8em; left:0;}
#spiral3 {width:3em; position:absolute; top:10em; left:5em;}
#spiral2 {width:2em; position:absolute; top:8em; left:6em;}
#spiral1a {width:1em; position:absolute; top:8em; left:5em;}
#spiral1b {width:1em; position:absolute; top:9em; left:5em;}

xhtml

<div id="spiral">
  <img id="spiral8" src="nw.gif" />
  <img id="spiral13" src="ne.gif" />
  <img id="spiral5" src="sw.gif" />
  <img id="spiral3" src="se.gif" />
  <img id="spiral2" src="ne.gif" />
  <img id="spiral1a" src="nw.gif" />
  <img id="spiral1b" src="sw.gif" />
  <img id="spiral21" src="se.gif" />
</div>

Copyright

Please ask permission before using or copying this example to your own web site.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Recommended Sites

SEO
First Rate - Australian SEO Company
web hosting, dedicated servers
web reseller, managed servers
Web design in Dorset
Bournmouth based web design agency
Create Free Flash website
Create amazing websites with Wix.com
CSS Menus
A CSSplay develoment
VPS Hosting
Virtuozzo VPS Hosting - $19.95/mo

"The web site uses
CSS Play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."