CSS 2.1 ::Artikel
Versuch einer Spirale
Dies ist ein Versuch, per CSS eine Spirale darzustellen. Verschachtelte konzentrische Kreise, abwechselnd schwarz und weiß, sind relativ positioniert und gegeneinander verschoben. Der Einfachheit halber wurde stets die gleiche Graphik verwendet, ein Kreis mit 300 Pixel Durchmesser, und mit den Attributen width und height skaliert. Dadurch erscheinen die Bögen etwas stufig und unsauber.
Ein interessanter Effekt ist, dass zwei Spiralen gegeneinander zu laufen scheinen: eine links herum, die andere rechts herum. Ich kann mir aber nicht erklären, warum der Effekt zustandekommt.
Das CSS:
DIV#spiral { font-size: 1px; background: #000; width: 320px; height: 320px; padding: 0; border: 1em solid #000; margin: 0 auto; position: relative; } DIV#spiral DIV { display: block; position: absolute; }
Das HTML:
<div id="spiral"> <div style="top:10px; left:10px;"> <img src="/graphics/circlefff.gif" width="300" height="300" /> <div style="top:0px; right:10px;"> <img src="/graphics/circle000.gif" width="280" height="280" /> <div style="top:3px; right:3px;"> <img src="/graphics/circlefff.gif" width="260" height="260" /> <div style="top:10px; right:0px;"> <img src="/graphics/circle000.gif" width="240" height="240" /> <div style="top:17px; right:3px;"> <img src="/graphics/circlefff.gif" width="220" height="220" /> <div style="top:20px; right:10px;"> <img src="/graphics/circle000.gif" width="200" height="200" /> <div style="top:17px; right:17px;"> <img src="/graphics/circlefff.gif" width="180" height="180" /> <div style="top:10px; right:20px;"> <img src="/graphics/circle000.gif" width="160" height="160" /> <div style="top:3px; right:17px;"> <img src="/graphics/circlefff.gif" width="140" height="140" /> <div style="top:0px; right:10px;"> <img src="/graphics/circle000.gif" width="120" height="120" /> <div style="top:3px; right:3px;"> <img src="/graphics/circlefff.gif" width="100" height="100" /> <div style="top:10px; right:0px;"> <img src="/graphics/circle000.gif" width="80" height="80" /> <div style="top:17px; right:3px;"> <img src="/graphics/circlefff.gif" width="60" height="60" /> <div style="top:20px; right:10px;"> <img src="/graphics/circle000.gif" width="40" height="40" /> <div style="top:17px; right:17px;"> <img src="/graphics/circlefff.gif" width="20" height="20" /> <div style="top:10px; right:20px;"> <img src="/graphics/circle000.gif" width="1" height="1" /> </div></div></div></div></div></div></div></div></div></div> </div></div></div></div></div></div></div> </div>
Letzte Änderung dieser Seite am: 10-Jul-2004.
