En demonstration av vad som kan uppnås visuellt med CSS–baserad design. Välj en stilmall från listan för att ladda in den på denna sida.
Ladda ned html-filen och css-filen
Längs en mörk och dyster väg ligger det förflutnas kvarlevor i form av webbläsarspecifik kod, DOM-inkompatibilitet och dåligt stöd för CSS.
Idag måste vi rensa sinnet från det förflutnas vanor. Upplysningens era har börjat på webben, tack vare outtröttliga ansträngningar av till exempel W3C, WaSP och de största webbläsartillverkarna.
css Zen Garden inbjuder dig att koppla av och meditera kring mästarnas viktiga lektioner. Börja se klart. Lär dig att använda (vad som med tiden kommer att bli) sedan länge erkänd teknik på nya och stimulerande sätt. Bli ett med webben.
Det finns ett tydligt behov för CSS att tas på allvar av grafiska formgivare. Zen Garden är tänkt att locka, inspirera och uppmana till deltagande. Börja med att titta på några av de befintliga bidragen. Klicka på vilken design som helst i listan, och dess stilmall laddas in på denna sida. Koden är densamma. Det enda som ändras är den externa .css-filen. Jo, faktiskt!
CSS tillåter fullständig kontroll över hur ett dokument presenteras. Det enda spännande sättet att visa detta på är att visa vad som är möjligt när de som har förmågan att skapa skönhet av struktur får fria händer. Hittills har de flesta exemplen på smarta trick och kluriga hack visats av de som egentligen är bäst på att strukturera och skriva kod. Formgivare har ännu inte gjort mycket väsen av sig. Det är dags att ändra på det.
Endast grafiska formgivare, tack. Du kommer att ändra i detta dokument, så goda CSS-kunskaper är nödvändiga, men exempelfilerna är tillräckligt välkommenterade för att även nybörjare på CSS kan utgå från dem. Se CSS Resource Guide för avancerade handledningar och tips på hur man jobbar med CSS.
Du får ändra .css-filen precis hur du vill, men inte HTML-koden. Det kan verka skrämmande först om du inte har jobbat på det sättet tidigare, men följ länkarna som listas för att lära dig mer och använd exempelfilerna som guide.
Ladda ned html-filen och css-filen för att ha en lokal kopia att ändra i. När du är klar med ditt mästerverk (och snälla, skicka inte in halvfärdiga saker) laddar du upp .css-filen till en webbserver som du har tillgång till. Skicka oss en länk till filen och om vi väljer att använda den laddar vi ned de tillhörande bilderna och lägger allt på vår egen server.
Uppdatering: Jag letar efter översättare. Om du talar engelska och något annat språk flytande är detta ett annat sätt att delta i projektet. Vänligen kontakta mig för detaljer. Svensk Översättning Av Roger Johansson.
Varför delta? För att få erkännande och inspiration, och vara med och skapa en resurs som vi alla kan använda för att visa vad man kan åstadkomma med CSS–baserad design. Det finns fortfarande ett stort behov av det sistnämnda. Fler och fler stora webbplatser tar steget, men inte tillräckligt många har gjort det. En dag kommer detta galleri att vara en historisk kuriositet. Den dagen är ännu inte kommen.
Vi vill se så mycket CSS1 som möjligt. CSS2 bör begränsas till delar som har utbrett stöd bland webbläsare. css Zen Garden handlar om funktionell, användbar CSS och inte de senaste, mest avancerade lösningarna som bara 2% av webbanvändarna kan se. Det enda verkliga kravet vi har är dock att din CSS är giltig.
Tyvärr kommer detta sätt att jobba på att påvisa bristerna i de olika implementationerna av CSS. Olika webbläsare visar webbsidor på olika sätt, ibland även när man använder helt giltig CSS, och detta blir frustrerande när något som fungerar i en webbläsare leder till problem i en annan. Se Resources-sidan för information om en del av de sätt man kan undvika problemen på. Fullt utbyggt stöd i alla webbläsare är fortfarande till vissa delar en avlägsen dröm, och vi förväntar oss inte att ditt bidrag ser på pixeln likadant ut i alla kombinationer av webbläsare och operativsystem. Men testa i så många olika du kan. Om din design inte fungerar i åtminstone IE5+/Win och Mozilla (som tillsammans används av över 90% av alla webbanvändare), är det troligt att vi inte godkänner ditt bidrag.
Vi vill att du använder egenhändigt framtagen grafik. Vänligen respektera upphovsrättslagar. Vänligen använd så litet opassande material som möjligt. Smakfull nakenhet är acceptabelt, ren pornografi kommer att avvisas.
Detta är en inlärningsövning såväl som en demonstration. Du behåller upphovsrätten till dina bilder, men vi ber dig frigöra CSS-filen med en Creative Commons-licens som är likadan som den som används på denna webbplats så att andra kan lära av ditt arbete.
Bandbredden är donerad av DreamFire Studios