En demonstrasjon av hva som kan oppnås visuelt gjennom CSS–basert design. Velg en stil fra listen for å laste den inn på denne siden.
Last ned html-filen og css-filen
Selv om vi har kommet langt i dag, så er det en mørk og trist vei som har ført oss hit, og som vi med gru kan snu oss og se tilbake på. Veien ligger der, forsøplet av levningene etter slik html-kode som bare virker i noen nettlesere, inkompatible DOMs, og dårlig støtte for CSS.
I dag er det på tide å rense minnet og glemme hvordan man laget nettsider i tidligere tider. Opplysningstiden på Nettet har kommet i gang, takket være den utrettelige innsatsen til folk som W3C, WaSP og de største Nettleser-produsentene.
css Zen Garden inviterer deg til å slappe av og meditere rundt den viktige undervisningen til de store mestrene. Begynn å se med klarhet. Lær å bruke teknikkene som (ikke enda) har vært anerkjent i lange tider på nye og stimulerende måter. Bli ett med Nettet.
Det er et klart behov for at CSS skal bli tatt seriøst av grafiske designere. Zen Gardens mål er å pirre, inspirere og oppmuntre til deltakelse. Til å begynne med kan du jo ta en kikk på noen av de ekisterende designene. Klikk på hvilken som helst på listen, og den vil den bli lastet som det gjeldene stilarket på denne siden. HTML-koden forblir den samme, det eneste som har endret seg er den eksterne .css-filen. Det er faktisk helt sant!
CSS tillater fullstendig kontroll over stilene i et dokument. Den eneste pirrende måten å demonstrere dette på er å vise hva som kan skje når tømmene er i hendene på de som har muligheten til å skape skjønnhet av struktur. Til dags dato har de fleste eksemplene på stilige triks og lure omveier blitt demonstrert av de som egentlig er flinkest til å strukturere og lage kode. Designere har enda ikke satt spor etter seg. Det er tid for en forandring.
Bare grafiske designere, takk. Du endrer på denne siden, så svært gode egenskaper med CSS er nødvendig, men eksempelfilene er kommentert godt nok til at selv nybegynnere med CSS kan bruke de som gode steder å begynne. Se CSS Resource Guide for praktisk undervisning og gode tips til hvordan man jobber med CSS.
Du kan endre stilarket på akkurat den måten du føler for, men kan ikke endre på HTML-dokumentet. Dette kan kanskje ta motet fra deg i begynnelsen hvis du aldri har jobbet på denne måten før. Men bare følg lenkene som er listet opp for å lære mer, og bruk eksempelfilene som guide.
Last ned html-filen og css-filen for å jobbe på en kopi lokalt. Når du har fullført mesterverket ditt (vær snill å ikke sende inn halvgjort arbeid) laster du opp .css-filen til en webserver som du har tilgang til. Send oss en lenke til filen. Hvis vi velger å bruke den, vil vi hente bildene som hører til og legge de på serveren vår.
Oppdatering: Jeg leter etter oversettere. Hvis du snakker flytende engelsk og et annet språk, er dette en annen måte å bli involvert i prosjektet på. Vennligst kontakt meg for detaljer. Denne oversettelsen er ved Thomas Hammer.
Hvorfor delta? For å få anerkjennelse og inspirasjon. Og for å skape en ressurs som alle kan benytte seg av når man trenger slagkraftig dokumentasjon på hva man kan utrette med CSS–basert design. Det siste er sårt tiltrengt, også i dag. Flere og flere større sider tar steget, med ikke mange nok har gjort det enda. En dag vil dette galleriet være en historisk kuriositet. Den dagen er ikke i dag.
Vi har lyst til å se så mye CSS1 som mulig. CSS2 bør være begrenset til elementer som det er vid støtte for. css Zen Garden handler om funksjonell, praktisk CSS, ikke de siste, hotte triksene som bare virker hos 2% av befolkningen. Men det eneste virkelige kravet vi har er at CSSen din validerer.
Dessverre er det sånn at å designe på denne måten røper svakhetene i de ulike implementasjonene av CSS. Ulike nettlesere viser nettsider forskjellig, noen ganger til og med når det er helt gyldig CSS. Dette blir frustrerende når noe som fikser saken for den ene nettleseren fører til en feil i den andre. Se Resources-siden for informasjon om noen av de gode måtene å fikse på. Full støtte i alle nettlesere er fortsatt en litt fjern drøm, og vi forventer ikke at du skal levere kode som er perfekt ned til den minste piksel på tvers av alle slags plattformer. Men test den i så mange nettlesere du kan. Hvis designet ditt ikke virker i IE5+/Win og Mozilla (som blir brukt av over 90% av befolkningen), er det stor sannsynlighet for at vi ikke kommer til å akseptere det.
Vi ber om at du sender originalt arbeide. Vennligst respekter opphavsrettslovgivning. Vennligst hold et lavest mulig nivå av upassende materiale, smakfull nakenhet er akseptert, pornografi vil bli avvist.
Dette er en læringsøvelse så vel som en demonstrasjon. Du beholder opphavsretten til bildene dine, men vi ber deg om at du frigir CSS-filen under en Creative Commons-lisens som er identisk til den som brukes på denne siden slik at andre kan lære fra arbeidet ditt.
Båndvidden er nådig donert av mediatemple