HTML & CSS

CSS Zen Garden, Lichtblicke in Cascading-Style-Sheets

CSS-Techniken von den besten Grafik- und Webkünstlern lernen

Der Erfolg des WorldWideWeb ist nicht zuletzt dadurch zustande gekommen, das es mit einem Male möglich war Informationen über eine weite Entfernung auszutauschen und diese auch noch ansprechend verpacken zu können. Musste man sich in den ersten Jahren mit koloriertem Text und ein paar Bildern begnügen, entstand mit der Zeit immer feinere Techniken um anspruchsvolle Web-Seiten zu erstellen.

Der Durchbruch kam allerdings erst mit den sog. "Cascading Style Sheets", mit deren Hilfe wirkliches Layouten möglich wurde. Das Interessanteste an CSS war und ist jedoch die strikte Trennung von Inhalt und Form. Der Inhalt steckt in der HTML-Datei und die Form wird mit entsprechend gestalteten Anweisungen in der CSS-Datei definiert. Wenn man sich die ersten White-Papers für den zukünftigen WWW-Standard XHTML 2.0 anschaut, so wird klar, wie weit die Reise in Sachen Trennung in den nächsten Jahren noch gehen wird. Es wird vollkommen egal sein mit welchem "Gadget" man sich im Internet bewegt. Über das entsprechende Style-Sheet bekommt man die Informationen so geliefert wie es zum eigenen Medium passt. Egal ob dies ein PC, ein Handy oder der Fernseher ist. Die Inhalte sind die gleichen nur die Darreichungsform ist eine andere.

Um aufzuzeigen was mit CSS alles geht, gründete der amerikanische Web-Designer Dave Shea (mezzoblue.com) vor einiger Zeit das Projekt CSS Zen Garden, indem es schlicht darum geht interessierte Webdesigner und Grafikkünstler aus aller Welt zu bewegen für eine einzige vorgegebene HTML-Seite immer neue Darstellungsformen in Form von CSS-Dateien zu schreiben.

Erlaubt ist bei der Programmierung alles was gefällt, sofern es nicht allzu sehr aus dem gesellschaftlichen Rahmen fällt. Einzige Restriktion ist, dass der XHTML-Code unangetastet bleibt. Erwünscht ist bei der Programmierung CSS1. CSS2-Tags sollten nur dann eingesetzt werden, wenn die gängigen Browser die Tags unterstützen und am Ende der CSS-Validator des W3C den Code noch als valide anerkennt.

Hauptfokus bei der Entwicklung eines CSS-Datei für den Zen Garden sollte nicht sein, möglichst viele Tricks und Hacks zu verwenden, die nur ein Bruchteil der browsenden Öffentlichkeit gesehen werden kann, sondern möglichst praktischen und funktionalen Code.

Die CSS-Datei und alle dazugehörigen Grafiken eines interessierten Web-Entwicklers können beim Projekt angemeldet werden und haben somit die Chance in den "CSS Zen Garden" aufgenommen zu werden. 

Nach eigenem Bekenntniss strebt das Projekt danach "zu begeistern, zu inspirieren und zur Teilnahme zur ermutigen". Und das tut es auch, denn was die Web-Entwickler dieses Projekts in ihren bislang über 170 verschiedenen Designs für die Seite geschaffen haben ist schlicht und ergreifend fantastisch. Durch die einzelnen Seiten zu "zappen" ist entspannend wie der Blick ins Aquarium und aufregend wie eine Nacht beim brasilianischen Karneval.

Blickt man einmal in die einzelnen hinterlegten CSS-Dateien hinein, kann man immer wieder Techniken entdecken, die einem vielleicht so noch nicht bekannt waren. Der Lerneffekt ist enorm. Gerade wenn es darum geht die Browser zu einer korrekten Anzeige zu bewegen, die schon ein paar Jahre auf dem Buckel haben (IE6 lässt grüssen ;)

Wer sich dieses Kleinod der Web-Entwicklung einmal anschauen möchte, hier noch einmal der Link:

http://www.csszengarden.com

Für all jene, die die Informationen der Seite, d.h. auch die Teilnahmedebingungen, lieber auf deutsch lesen möchten, gibt es inzwischen auch eine deutsche Übersetzung unter:

http://www.csszengarden.com/tr/deutsch

Es dauert seine Zeit, bis man alle Designs gesichtet hat, aber es lohnt sich. Für die Eiligen unter uns habe ich einmal eine kleine Auswahl zusammengestellt, die aus meiner Sicht die besten Kreationen des Zen Gardens darstellen:

007 : Deep Thoughts by Jason Estes
016 : The Garden Beneath by Minz Meyer
057 : This is Cereal by Shaun Inman
062 : Gemination by Egor Kloos
069 : Bonsai Sky by Mike Davidson
073 : Emmakade by Alexander Christiaan Jacob
075 : Lost HighWay by Julien Roumagnac
087 : Maya by Bernd Willenberg
089 : Dark Industrial by Ray Henr
092 : Port of Call by Jessica Dunn
094 : Deco by Marc Trudel
098 : Edo and Tokyo by Daisuke Sato
103 : Odyssey by Terrence Conley
106 : Mediterranean by John Whittet
118 : Some Leafs by Michael Tupy
124 : Teatime by Michaela Maria Sampl
130 : Pseudo Sahara by John Barrick
141 : Golden Cut by Petr Stanicek
147 : Attitude by Stephane Moens
154 : Butterfly Effect by Kevin Linkous
162 : Angelus by Vladimir Lukic
163 : Like the Sea by Lars Daum
166 : Obsequience by Pierce Gleeson
171 : Shaolin Yokobue by Javier Cabrera
176 : Kelmscott by Bronwen Hodgkinson

Alle Designs des CSS Zen Garden verbleiben urheberrechtlich beim Schöpfer, auch wenn Dave Shea die Teilnehmer bittet sie doch unter die Creative Commons Lizenz zu stellen. Wer also Lust hat an dem Projekt teilzunehmen, sollte es tunlichst vermeiden kompletten Code zu übernehmen, sondern die darin enthaltene Technik studieren und daraus etwas neues, einzigartiges erstellen.

kick it on dotnet-kicks.de AddThis 0 wikio-Stimme(n) Trackback-Url...

Schlagworte

Keine Kommentare bislang...

Dein Kommentar hierzu...


Kommentar-Feed für diesen Beitrag
Gravatare werden unterstützt .:. eMail-Adressen werden nicht veröffentlicht
 

RSS-Feed

Die URL des Standard-Newsfeed von zerbit.de lautet:

http://www.zerbit.de/rssfeed.aspx

Login


 

 

Statistik



kürzlich kommentiert

Artikel 42

  • Datum: 05.09.2005
    Kategorie: HTML & CSS
    Zugriffe: 1.570
    Kommentare: 0
    Trackbacks: 0

Letzte Beiträge

Kategorien

Buttons & More

Blog-Roll

Banner Piraten-Partei