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'.
#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
- The Hotfix forum for windows
- UK Game Server Hosting
- Complete travelguide to Phuket
- Free layouts and more - Myspace
- pay as you go e-commerce
Build your own SEO friendly webshop - web hosting, dedicated servers
web reseller, managed servers - Host Color
Web Hosting for 30 Websites - Web design in Dorset
Bournmouth based web design agency
