«

»

CSS Zen Garden

CSS ist eine coole Sau. Das wusste ich schon lange. Aber wie real cool man damit spielen kann hat mir erst der CSS Zen Garden mal so wirklich gezeigt.

Ein wenig Hintergrund: CSS ist ein Ansatz und eine Technik, die auf dem Gedanken beruht, dass Inhalt und Formatierung voneinander zu trennen sind. HTML verfolgt einen uneinheitlichen Kombinationsansatz: Inhalte werden mit “Tags” gekennzeichnet. Die gibt es sowohl funktionell (also etwas, was etwas tut, zum Beispiel “B”), als auch deskriptiv (also etwas, was etwas beschreibt, zum Beispiel “DIV”).
CSS geht davon aus, dass man nur deskriptive Tags verwenden sollte, um auf diese Weise Inhalte zu strukturieren. Deren tatsächliche Darstellung regelt man dann mit CSS. So weit, so gut.CSS Zen Garden ist eine ganz simple Seite, die inhaltlich beschreibt, was das Projekt eigentlich will: Nämlich genau diese Seite so aufregend und phantastisch wie möglich zu gestalten, indem NUR CSS benutzt wird.
Bevor man sich das ansieht sollte man unbedingt einen Blick auf die Grundseite werfen: http://www.csszengarden.com/zengarden-sample.html. Dass ist das Seitengrundgerüst – welches sich nie verändert. Es werden nur im Hintergrund verschiedene CSS-Scripte auf die Seite angewandt. Daraus entstehen Kunstwerke wie zum Beispiel:

Natürlich ist die Seite auf das alte IKEA-Prinzip begrenzt: Entdecke die Möglichkeiten. Die Seite selbst hat keinen weiteren nutzen als zu demonstrieren, was geht. Reproduzieren lässt sich das kaum, vor allem nicht im praktischen Betrieb – keines der Designs ist dazu angetan auf größere Systeme oder auch nur sich verändernde Seiteninhalte reagieren zu können. Eine Zeile Text mehr, und viele der sorgsam abgestimmten Details brechen einfach zusammen.

Trotzdem ist das klar: Cool!

1 Kommentar

  1. Sab

    hmm … ich hab nu die hübschen schwarzen zeichen gelesen und in den ordner “fachsinologie” abgelegt. ich glaub das muss ich nicht verstehen

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Sie können diese HTML-Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>