Eine Demonstration dessen, was sich visuell mit Hilfe von CSS erreichen läßt. Wählen Sie eine Stil–Vorlage aus der Liste um sie mit dieser Seite anzeigen zu lassen.

Laden Sie die Beispieldateien für HTML und CSS herunter

Der Weg der Erleuchtung

Wir blicken zurück auf den dunklen Weg vergangener Relikte wie browserspezifischen Tags, inkompatiblen DOMs und einer brüchigen CSS Unterstützung.

Heute müssen wir den Kopf von den alten Praktiken befreien. Die Erleuchtung im Web wurde nicht zuletzt dank der unermüdlichen Anstrengungen von Leuten wie dem W3C, WaSP sowie den großen Browserherstellern erreicht.

Der css Zen Garden läd Sie ein zu entspannen und über die wesentlichen Lektionen der Meister zu mediteren. Beginnen Sie klar zu sehen. Lernen Sie die (letzten Endes) Zeit gewinnenden Techniken in einer neuen und anregenden Weise anzuwenden. Werden Sie Eins mit dem Web.

Also, worum geht’s hier eigentlich?

Es ist klar erforderlich, dass CSS von Grafikkünstlern erst genommen wird. Der Zen Garden strebt danach zu begeistern, zu inspirieren und zur Teilname zu ermutigen. Betrachten Sie sich zunächst einige der existierenden Designs aus der Liste. Wenn Sie eines davon anklicken wird es in diese Seite geladen. Der Code bleibt der selbe, das einzige, dass sich geändert hat ist die externe CSS Datei. Ja, wirklich.

CSS erlaubt vollständige und totale Steuerung über die Gestaltung eines Hypertext–Dokuments. Der einzige Weg es auf eine Weise zu illustrieren welche die Leute begeistert, besteht darin zu demonstrieren wie es wirklich sein kann, wenn man die Zügel denjenigen in die Hand gibt die in der Lage sind, Schönheit aus Struktur zu schaffen. Bis heute wurden die meisten Beispiele der geschickten Tricks und Hacks von Strukturisten und Programmierern vorgeführt. Designer müssen ihre Spuren erst noch hinterlassen. Das muss sich ändern.

Teilnahme

Bitte nur Grafikkünstler. Sie modifizieren diese Seite, daher sind erhebliche Kenntnisse in CSS erforderlich, jedoch sind die Beispieldateien ausreichend kommentiert, damit sie auch von CSS–Anfängern als Ausgangspunkt verwendet werden können. Bitte schauen Sie in den Quellenführer für CSS nach fortgeschrittenen Tutorien und Tipps zur Arbeit mit CSS.

Sie können das Stylesheet nach Ihren Wünschen modifizieren, aber nicht das HTML. Das mag zunächst entmutigend klingen, wenn Sie vorher noch nie auf diese Weise gearbeitet haben, folgen Sie den aufgeführten Links um mehr darüber zu lernen und verwenden Sie die Beispieldateien als Anleitung.

Laden Sie sich die HTML– und CSS–Beispieldateien herunter um mit einer lokalen Kopie zu arbeiten. Nachdem Sie ihr Meisterstück vollendet haben (und bitte, senden Sie keine halbfertigen Arbeiten ein), laden Sie ihre .css Datei auf einen Webserver auf den Sie Zugriff haben. Senden Sie uns einen Link zu der Datei und wenn wir uns entschliessen sie zu verwenden, werden wir die zugehörigen Bilder herunterladen. Entgültige Einsendungen werden auf unserem Server platziert.

Übersetzt von R. Serradeil.

Vorteile

Warum teilnehmen? Wegen der Anerkennung, Inspiration und einer Quelle auf die wir alle verweisen können, wenn es um den Anwendungsfall von CSS basierendem Design geht. Dies ist dringend erforderlich, selbst heutzutage. Immer mehr bedeutende Seiten machen den Sprung, aber bislang zu wenige. Eines Tages wird diese Galerie eine historische Kuriosität sein; dieser Tag ist nicht heute.

Voraussetzungen

Wir möchten so viel CSS1 sehen wir möglich. CSS2 sollte auf die am weitesten unterstützten Elemente beschränkt werden. Beim css Zen Garden geht es um funktionales, praktisches CSS und nicht die allerheisstesten, letzten Tricks die von 2% der browsenden Öffentlichkeit gesehen werden können. Die einzig wirkliche Voraussetzung die wir haben ist, dass Ihr CSS validiert.

Unglücklicherweise hebt diese Art des Gestaltens die Mängel in den verschiedenen CSS–Implementierungen hervor. Verschiedene Browser zeigen Verschiedenes an, ab und an sogar ein völlig gültiges CSS, und dies wird äußerst argerlich, wenn ein Fix für den Einen zum Bruch bei einem Anderen führt. Schauen sie auf der Ressourcenseite nach Informationen zu einigen der verfügbaren Fixes. Volle Browserunterstützung ist immer noch ein gelegentlicher Wunschtraum und wir erwarten von Ihnen nicht, dass Sie pixelperfektem Code für jede Plattform abliefern. Testen Sie jedoch auf so vielen wie Ihnen möglich ist. Wenn Ihr Design nicht wenigstens in IE5+/Win und Mozilla (sie laufen bei über 90% der Bevölkerung) funktioniert, stehen die Chancen gut, dass wir es nicht akzeptieren werden.

Wir möchten sie bitten, nur Originalwerke einzusenden. Bitte respektieren Sie die Urheberrechte. Halten Sie anstößiges Material auf ein Minimum; geschmackvolle Nacktheit ist akzeptabel, absolute Pornographie wird abgelehnt.

Dies ist sowohl eine Lernübung als auch eine Demonstration. Sie behalten volles Copyright an ihren Grafiken, aber wir bitten Sie darum, ihr CSS unter die Creative Commons Lizenz zu stellen, identisch mit der auf dieser Seite, damit andere von Ihrer Arbeit lernen können.

Bandbreite freundlicherweise gespendet von DreamFire Studios