Een demonstratie van hetgeen men visueel kan bereiken met CSS gebaseerde ontwerpen. Kies één van de style sheets (ontwerpen) uit de lijst om te gebruiken in deze pagina.
Download een voorbeeld html bestand en css bestand
We laten achter ons een duistere weg van overblijfselen van browser specieke tags, incompatibele DOMs, en niet werkende CSS ondersteuning.
Hedentendaage moeten we ons hoofd leeg maken en ontdoen van de technieken uit het verleden.Web Verlichting is mogelijk gemaakt door de onvermoeibare inspanningen van de mensen van de W3C,WaSP en de grote browser producenten.
De css Zen Garden nodigt u uit om te relaxen en te mediteren op de belangrijke lessen van de meesters. Begin met het zuiver zien. Leer om nieuwe (binnekort) tijd-winnende technieken op versterkende wijze te gebruiken.Wordt een met het web.
Er is een duidelijke noodzaak voor het serieus nemen van CSS door grafische ontwerpers. De Zen Garden richt zich op het enthousiast maken, inspireren en aanmoedigen van het gebruiken van CSS door grafische ontwerpers. Kijk om te beginnen in de lijst met aanwezige ontwerpen. Door te klikken op een ontwerp wordt het ontwerp in deze pagina ingeladen. De code blijft hetzelfde, het enige wat verandert is het externe .css bestand.
CSS stelt ons in staat complete en totale controle uit te oefenen over de opmaak van een hypertext document. De enige wijze waarop dit geïllustreerd kan worden ,op een manier dat dit mensen enthousiast maakt, is door middel van een demonstratie van wat css echt betekent in de handen van diegene die schoonheid creëeren vanuit structuur. Tot op heden, zijn de meeste voorbeelden van mooie trucs en hacks gedemonstreerd door 'structureerders' en programmeurs. Grafische ontwerpers moeten hier echter nog hun stempel drukken. Dit moet dus snel gaan gebeuren.
Bij voorkeur alleen grafische ontwerpers. U past deze pagina aan, dus goede vaardigheden op het gebied van CSS zijn noodzakelijk. Echter de voorbeeld bestanden zijn zodanige becommentarieert dat zelfs beginnende CSS-ers ze kunnen gebruiken als startpunt. Zie ook de CSS Bronnen voor geavanceerde handleidingen en tips voor het werken met CSS.
U mag de style sheet wijzigen zoals u wilt, echter de HTML niet! Dit komt misschien wat vreemd over als u nog nooit op deze wijze gewerkt heeft, maar volg de links op deze pagina om meer te leren en gebruik de voorbeeld bestanden als een richtlijn.
Download het voorbeeld html bestand en css bestand om er lokaal eraan te kunnen werken. Op het moment dat u uw meesterwerk klaar heeft (en alstublieft stuur geen half afgemaakt werk) kunt u uw .css bestand uploaden naar een web server waar u toegang tot heeft. Stuur ons het adres van uw bestand en als we besluiten om het te gaan gebruiken zullen we de bijbehorende plaatjes er bij downloaden. Uiteindelijk zullen toegezonden aanmeldingen op onze server geplaatst worden.
NB: Ik ben op zoek naar vertalers. Als u vloeiend Engels spreekt en daarnaast een andere taal, dan kunt u op deze wijze deelnemen aan dit project. Neem contact op met mij voor de details..Voor op- en aanmerkingen betreffende deze Nederlandse vertaling kunt u contact opnemen met Björn Wijers
Waarom deelnemen? Voor de (h)erkenning, inspiratie en het meewerken aan een bron waar we allemaal naar kunnen verwijzen om het gebruik van CSS gebaseerd ontwerpen te promoten. Dit is zeer noodzakelijk, zelfs hedentendaage. Steeds meer grote web sites nemen de stap naar CSS gebaseerd ontwerp, maar velen hebben dat nog niet gedaan. Ooit zal deze galerij een historische curiositeit zijn, maar die dag is nog niet daar.
We zouden graag zoveel mogelijk CSS1 willen zien. CSS2 moet beperkt blijven tot breed ondersteunde elementen. De css Zen Garden gaat over functioneel, praktisch CSS en niet over de laatste high-tech mogelijkheden die alleen zichtbaar zijn voor 2% van het surfendepubliek. De enige echte vereiste is dat u uw CSS valideert.
Helaas, belicht het ontwerpen van web sites op deze wijze de gaten in de diverse implementaties van CSS. Verschillende browsers vertonen, zelfs volledig valide CSS op verschillende wijzen. Dit wordt soms gek makend waarbij een oplossing voor de ene browser tot problemen leidt bij een andere browser. Bekijk de Bronnen pagina voor informatie over de verschillende oplossingen. Volledige browser compatibiliteit is soms een wensdroom en we verwachten dan ook niet dat u met pixel-perfecte code komt voor elk platform. Maar test in zoveel mogelijk browsers als u kunt. Als uw ontwerp niet werkt in minimaal Internet Explorer 5+/Win en Mozilla (in gebruik door 90% van de bevolking) dan heeft u grote kans dat we uw ontwerp niet accepteren.
We vragen u om alleen ontwerpen die door u zelf zijn gemaakt op te sturen. Houd hierbij alstublieft rekening met de auteursrechten. Beperk mogelijk bezwaarlijk materiaal tot een minimum; smaakvol bloot is geen probleem, harde porno wel.
Dit is een oefening alsmede een demonstratie. U behoudt uw auteursrecht over de beeldmaterialen, maar we vragen u om uw CSS vrij te geven onder een "Creative Commons" licentie identiek aan de degene van deze site, zodat anderen van uw werk kunnen leren.
Bandbreedte is gedoneerd door mediatemple