Eine Demonstration dessen, was sich visuell mit Hilfe von CSS erreichen läßt. Wähle eine Stil–Vorlage aus der Liste um sie mit dieser Seite anzeigen zu lassen.
Lade hier die Beispieldateien für HTML und CSS herunter.
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 W3C, WaSP sowie den großen Browserherstellern erreicht.
Der SAE CSS Zen Garden läd Dich ein zu entspannen und über die wesentlichen Lektionen der Meister zu meditieren. Beginne klar zu sehen. Lerne die (letzten Endes) Zeit gewinnenden Techniken in einer neuen und anregenden Weise anzuwenden. Werde Eins mit dem Web.
Es ist klar erforderlich, dass CSS von Grafikkünstlern ernst genommen wird. Der Zen Garden strebt danach zu begeistern, zu inspirieren und zur Teilname zu ermutigen. Betrachte Dir zunächst einige der existierenden Designs aus der Liste des Originalen css zengarden. Wenn Du 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.
Wenn du diese Seite modifizierst 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 schaue in den Nachschlagewerken, z.B. css4you nach fortgeschrittenen Tipps zur Arbeit mit CSS.
Du kannst das Stylesheet nach Deinen Wünschen modifizieren, aber nicht den HTML Code. Das mag zunächst entmutigend klingen, wenn Du vorher noch nie auf diese Weise gearbeitet hast, folge den aufgeführten Links um mehr darüber zu lernen und verwende die Beispieldateien als Anleitung.
Lade Dir die HTML und CSS–Beispieldateien herunter um mit einer lokalen Kopie zu arbeiten. Nachdem Du Dein Meisterstück vollendet hast, lass Deine Arbeit von einem Supervisor korrigieren. Wenn alles in Ordnung ist, wird dieser Deinen Ordner speichern und auf einer eigenen SAE CSS Zengarden Webseite veröffentlichen.
Ich wünsch Euch viel Spass bei Eurem CSS Kunstwerk!
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. Ausserdem ist dies eine Pflichtübung :)
Ich möchte so viel CSS1 und CSS2 sehen wie möglich. CSS3 und Browsermodifizierungen sollten auf die am weitesten unterstützten Elemente beschränkt werden. Beim SAE CSS Zen Garden geht es um funktionales, praktisches CSS und nicht die allerheißesten, letzten Tricks die von 2% der browsenden Öffentlichkeit gesehen werden können. Die einzig wirkliche Voraussetzung die wir haben ist, dass Dein 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. Schaue auf der Seite css4you nach Informationen zu einigen der verfügbaren Fixes. Volle Browserunterstützung ist immer noch ein gelegentlicher Wunschtraum und ich erwarte von Dir nicht, dass Du pixelperfekten Code für jede Plattform ablieferst. Teste jedoch auf so vielen wie Dir möglich ist. Wenn Dein Design in Mozilla Firefox und besten Falls in IE6+/win (sie laufen bei über 90% der Bevölkerung) funktioniert, stehen die Chancen gut, dass deine Übung ein Erfolg wird.
Bitte respektiere die Urheberrechte. Halte anstößiges Material auf einem Minimum; geschmackvolle Nacktheit ist akzeptabel, absolute Pornographie wird abgelehnt.
Dies ist sowohl eine Lernübung als auch eine Demonstration.