CSS Zen Garden – The Beauty of CSS Design

CSS Zen Garden ist ein Projekt, dass im Mai 2003 begann: Dave Shea stellte ein HTML-Gerüst online und rief dazu auf, den enthaltenen Text mit CSS-Dateien zu designen. Herausgekommen ist unterdessen eine erstaunliche Sammlung von vollkommen unterschiedlichen Designs.

Wozu denn eigentlich CSS?

CSS (Cascading Style Sheets) ist eigentlich „nur“ Dekoration. Angefangen hat das Internet mit reinen HTML-Seiten, die lediglich die Semantik einer Seite beschreiben sollen. Zusammengehörige Textabschnitte werden markiert, außerdem Überschriften verschiedener Ebenen, Aufzählungen, Verlinkungen und ähnliches. Ein Browser formatiert diese Angaben dann rudimentär, stellt Überschriften in einer größeren Schrift dar, fügt Abstände zwischen Textabschnitten ein etc., sodass der Text gut lesbar ist. Ein reines HTML-Dokument sieht dann allerdings immer noch recht spartanisch aus:

Reine HTML-Website

Damit eine Website farbenfroh wird, verwendet man CSS. So lassen sich Farben und Schrift verändern, Hintergrundbilder einfügen, Elemente auf der Seite unterschiedlich anordnen und vieles mehr. Diese Informationen, wie eine Seite dargestellt werden soll, lassen sich in das HTML-Dokument einflechten oder alternativ auslagern in eine einzelne Datei. Letztere Variante ist deutlich ordentlicher und besser zu pflegen, weil sie den semantischen Inhalt der Seite (im HTML-Dokument) klar von der Darstellung und Formatierung (im CSS-Dokument) trennt.

Werbung für CSS

Diese Trennung von Inhalt und Darstellung wollte Shea mit seinem Projekt CSS Zen Garden bewerben. Seine Seite sollte zeigen wie viel mit CSS möglich ist – ohne ein einziges Zeichen im HTML-Dokument, und damit im eigentlichen Inhalt der Seite, zu ändern. 2003 war es noch weit verbreitet das Layout einer Seite über HTML-Tabellen zu gestalten und somit Darstellung und Inhalt der Seite zu vermischen. CSS Zen Garden sollte zeigen wie viel schöner und eleganter ein Design mit CSS werden kann.

Heute muss niemand mehr davon überzeugt werden, dass diese Trennung und die Verwendung von CSS sinnvoll ist. Dennoch ist es nach wie vor faszinierend und einfach schön zu sehen wie unterschiedlich die Designs auf csszengarden.com aussehen und wie liebevoll sie gestaltet sind. Die Seite wird nicht mehr regelmäßig aktualisiert, aber im Mai 2013 wurde der HTML-Code zum zehnjährigen Jubiläum überarbeitet und es können wieder neue Designs eingereicht werden. Jetzt geht es dort auch um moderne Designprinzipien, HTML5, CSS3 und mobile Browser. Nicht mehr um irgendjemanden von CSS zu überzeugen, sondern schlicht und einfach weil es Entwicklern Spaß macht, die Designs zu entwickeln, und vielen anderen Menschen, sie anzusehen.

Eine kleine Auswahl

Aktuell sind 221 Designs bei csszengarden.com online und jedes einzelne davon ist sehenswert. Klicken Sie sich ruhig einmal durch, wenn Sie gerade eine kleine Pause brauchen, und genießen sie. Es findet sich hier alles von bunt und verspielt mit vielen kleinen Details, über modern mit großen Farbflächen bis hin zu minimalistisch mit viel Weiß und nur sehr dezenten Effekten. Verändern Sie die Größe des Browserfensters – manche Designs reagieren darauf mit interessanten Effekten. Einige besonders sehenswerte Beispiele haben wir hier für Sie aufgelistet.

CSS Zen Garden Vin Rouge Vin Rouge – Dunkel und schwer wie guter Rotwein. Insgesamt ist das Layout der Seite sehr klassisch: oben ein Header, rechts die Navigation in einer Seitenleiste. Die Hauptrolle spielt das große Glas Rotwein, an dessen Farben sich die gesamte Seite orientiert.

CSS Zen Garden webZine webZine – Eine alte Zeitung mit Kaffeeflecken war Vorlage für dieses Design. Die Navigation ist nach oben gerutscht und der gesamte Text wurde in Spalten gegliedert. Interessante Schriftarten, besagte Kaffeeflecken und ein Stift (mit dem augenscheinlich die Links unterstrichen wurden) betonen den Zeitungscharakter.

CSS Zen Garden Retro Theater Retro Theater – Hier wurde tief in die CSS-Trickkiste gegriffen. Wie auf einer alten schwarz-weiß-Leinwand (beachten Sie das leichte Flimmern derselben) zieht hier der Text der Website vorbei – komplett formatiert wie die Credits am Ende eines Films. Nein, gut zu lesen und übersichtlich ist das nicht. Aber es demonstriert eindrucksvoll was CSS leisten kann, und genau darum geht es ja auf dieser Seite.

CSS Zen Garden Gemination Gemination – Auch diese Seite bietet ein ungewöhnliches Format: Querformat. Zieht man das Browserfenster größer, so erscheint immer mehr des Hintergrundbildes während die Elemente im Vordergrund linksbündig im Fenster bleiben. Im kleinen Hauptfenster lässt sich der Text der Seite durchscrollen und der Inhalt der Seitenleiste rechts daneben kann mit vertikalen Tabs umgeschaltet werden. All das wurde natürlich ohne Javascript, sondern nur mittels CSS

CSS Zen Garden Tulipe Tulipe – Wieder ein horizontales Design, dessen Hauptrolle die große Blüte links spielt. Die einzelnen Textblöcke sind in Rechtecken angeordnet, die aufgereiht sind als würden sie nebeneinander von einer horizontalen Stange herabhängen. Oben mittig findet sich die Navigation, die bei Mouse-Over wie ein Dropdown ausklappt. Auch diese Funktionalität wird meist mit Javascript umgesetzt, aber wie man sieht geht es auch nur mit CSS.

CSS Zen Garden A Robot Named Jimmy A Robot Named Jimmy – Hier bewegt sich was, allerdings nur im Header: ein weißer Stern dreht sich hinter dem Bild von Roboter Jimmy. Scrollt man nach unten schiebt sich weißer bzw. hellblauer Hintergrund über dieses Bild, der Roboter an sich bleibt als heller Schemen aber an derselben Stelle des Fensters sichtbar. Lediglich die Bereiche mit dunklem Hintergrund überlagern ihn. Sie dienen gleichzeitig zur Strukturierung der Website. Dieses Design ist modern in mehrerlei Hinsicht – versuchen Sie doch einmal das Browserfenster sehr schmal zu ziehen.

CSS Zen Garden Fountain Kiss Fountain Kiss - Viele warme Farben und ein verschwommenes Hintergrundbild fallen als erstes ins Auge. Hier wurde Responsive Design umgesetzt: ziehen Sie das Browserfenster so groß wie möglich, machen Sie es dann nach und nach schmäler und beobachten Sie, wie sich die Seite Element für Element anpasst, sodass sie immer gut aussieht. Ein weiteres schönes Detail: scrollen Sie den Inhalt nach unten durch und lesen Sie die Geschichte, die in den dunkelroten Rechtecken der Zwischenüberschriften erzählt wird. In jedem dieser Rechtecke erscheint ein passendes Silhouetten-Bild, wenn es beim Scrollen die Mitte der Seite passiert.

Spielwiese

Der CSS Zen Garden ist in erster Linie Spielwiese und Inspirationsquelle für Webdesigner. Die Seite zeigt was alles möglich ist und auch wie, denn alle CSS-Dateien sind direkt auf den Seiten verlinkt und in der Regel ausführlich kommentiert. Hier kann man sich so manchen Kniff abschauen. Und für alle, die keinen Code schreiben, ist es einfach schön die Werke zu betrachten und zu sehen wie einfallsreich Designer sind.