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

107 Kommentare bislang...

  • Secondly you will also want to
    Longchamp UK get as much education under your belt as Longchamp Handbags possible. Throughout your education as a photographer Longchamp Outlet you should also be taking as many photographs Longchamp Handbags as possible to help build your Longchamp Outlet portfolio. You will need to ensure your photography portfolio Longchamp Online stands above the rest by paying extra special baskets Isabel Marant attending to detail. Look at the book itself, the paper it's printed Isabel Marant Online on, the font of descriptions, your borders, your themes, picture Isabel Marant Boots sizes, colors, layout and so on. Do not simply fill a scrap book or photo album with Isabel Marant Online photographs. Once finished, you should be able to walk Isabel Marant Boots away from your portfolio and be impressed with your own Isabel Marant Online work, which is
    macpldtim maczjsdgpl not easy task for Isabel Marant Sneaker many photographers, as most of them are their own worst critics.
    107
    Tods Sale : Donnerstag, 10. Mai 2012 07:17
  • nike air ma En face de ne jamais moins de rivaux, mais le pouvoir de Songyuan forte capacité à faire face, mais il est plus que suffisant. Side balayé envoyé sur le front des démons, et les envoyer au royaume d'Amaterasu, tandis qu'il parcourait le public, puis le front, ils ne peuvent pas aider, mais légèrement plissé. Niveau des troupes britanniques quotidienne de la formation est vraiment mauvais, même si elle est sélectionnée, un des escadrons de la mort de prisonniers de guerre Lan Lujia "les joueurs, et les petits diables n'a pas encore un petit écart. Cette fois-ci, Tulane et Willie commandement temporaire de la guerre des gangs soldat britannique faible devient important.

    ?Ma?tre, je vais aller!" Charlie a répondu, et puis un morceau de pain à partir du champ de bataille, il ya la distance en kilomètres environ Willie s'est passé.

    Résisté aux escadrons de la mort du Japonais mitrailleuse, le pire en tête-à-tête, les cris des différentes versions à la fois est devenu le thème principal du champ de bataille. Tulane, à la lueur des torches loin pour voir un soldat britannique a été plus grand que son nain beaucoup de soldats japonais gravement poignardé à l'abdomen, puis les deux mains pour tenir le la ba?onnette grande bouche ouverte Canhao, il venait d'être allumé près le sang immédiatement refroidi, traces devient hésité.

    Les officiers étaient plus ces creeps ne m'attends pas à de bonnes performances, ils ne sont pas demi-tour et courir est considéré comme un très courageux. Charlie a vite couru vers eux, plus la colère la plus grande, est allé à l'avant de la file d'attente, juste pour entendre Willie déplacement amour Xiao tentative raisonnable de convaincre les gens d'accélérer la ruée vers l', il éclata boisson bient?t interrompu par Willie attitude de convaincre le coup d'envoi de l'air rugit:? "Vous bande de laches, le front est le Cidaoxianhong japonaise N'est-ce pas vos camarades camarades afin de retrouver la liberté pour tous est le saignement, vous avez réellement le c?ur de sorte impuissants regardé et nous sommes morts, vous serez en mesure de vivre? un tas de courte vue débile! majeure, pour faire face à ces prédication laches est inutile et devrait être, "at-il grogné à faire une bribe brusques arraché aux mains d'un soldat britannique. trois huit couvercle, puis retirez le boulon, le cercle vicieux comme montrant la foule, puis a crié: ?tout et en cours d'exécution, cinq minutes plus tard, il se tenait devant moi, alors je Xiuguai impitoyable!"
    106
    nike air max 2010 pas cher : Freitag, 4. Mai 2012 16:36
  • Cheap louis vuitton uk wholesale offers a variety of options to satisfy your needs. Some new ones even has fashionable styles fold over flap to disguise the snap closure and a draw string is added for a convenient closure.Certainly, nobody would argue, simply because several long-time wallet customers can agree with the fact, louis vuitton bags for sale delivers some thing now we have consistently yearned with regard to,as well as which usually we tend to despite the fact.louis vuitton bags uk. If you need to be stylish but want to save your professional look you can use tote bags. Bag is something that many girls select because of its ability to add sophistication and style to any outfit. Louis Vuitton Purse Buy Online. Louis Vuitton Purses Patent Leather. For over 50 years Chanel purses have represented luxury and fashion and are timeless. A Chanel handbag can also be considered an asset and is something that can be handed over to future generations.<br/>
    105
    louis vuitton uk : Samstag, 14. April 2012 12:13
  • On the date when the louis vuitton uk on sale, all people will pour into the stores. At this time, it on the booths will be wiped out, and only one or two days the seller will declare that there is no stock anymore.The conventional louis vuitton handbags are produced for qualified females in add-on to university college students for there are so various styles and styles.The women and females is the louis vuitton handbags uk enthusiasts of gorgeous along with gleaming jewelry. Tiffany-Jewelry stands out as the representative of jewelry so it provides a very good fame as well as good reputation.<br/>
    104
    louis vuitton handbags : Samstag, 14. April 2012 11:54
  • Nowadays mulberry uk become more and more fashionable all over the world.mulberry uk outlet provide a bag can variety in cost, but are actually inexpensive for your average person.mulberry recommended you to buy MB Kristin Bags, the one which can fully display women's elegance and nobleness.<br/>
    103
    mulberry uk : Samstag, 14. April 2012 11:30

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: 3.918
    Kommentare: 107
    Trackbacks: 0

Letzte Beiträge

Kategorien

Buttons & More

Blog-Roll

Banner Piraten-Partei