“Solo artisti della grafica, per favore“.
CSS Zen Garden (http://www.csszengarden.com) è un’iniziativa che ha come obiettivo la promozione di una migliore cultura del web orientata alla realizzazione di siti internet utilizzando i fogli di stile CSS esterni per la formattazione dei contenuti. Il Giardino Zen si prefigge di ispirare ed incoraggiare la partecipazione dei web designer di tutto il mondo stimolando l’interesse verso un utilizzo sempre più spinto, creativo ed innovativo delle tecniche CSS nella creazione siti internet. Sul sito csszengarden.com sono raccolti i progetti di tutti i web designer che hanno aderito all’iniziativa, lavori estremamente originali che possono essere liberamente visionati e dai quali poter trarre spunto ed ispirazione. Come spiega la frase che fa da introduzione al sito, si tratta di “una dimostrazione di cosa si può realizzare per mezzo del design basato sui CSS“. Sostanzialmente CSS Zen Garden lancia una sfida ai professionisti del web mettendoli alla prova nella realizzazione di layout web mediante il solo uso di fogli di stile esterni. Si tratta di un esercizio di apprendimento, ma anche una dimostrazione, per la quale è necessaria una solida conoscenza dei CSS.
Come funziona?
Il sito mette a disposizione un file html, contenente la struttura della pagina principale del sito stesso, per il quale va realizzato un file css che fornirà la formattazione dei contenuti. Chi intende cimentarsi nell’impresa non deve far altro che scaricare il file html e creare un layout per esso mediante un unico foglio di stile css esterno. Solo alcuni vincoli: il file html non deve essere modificato in nessun modo ed il file css deve poter essere validato e supportato dai vari browser in circolazione. A parte questo, si ha piena libertà di espressione e si possono usare a piacimento le tecniche di formattazione che si ritengono più opportune, gli effetti grafici desiderati, le immagini che servono, ecc., il tutto, però, agendo solo ed esclusivamente sul foglio di stile CSS.
L’agenzia web CODENCODE (http://www.codencode.it) ha raccolto la sfida CSS Zen Garden iscrivendo al concorso un proprio progetto. Il layout realizzato si intitola “Full moon” (Luna piena) ed è disponibile sul sito dell’azienda informatica all’indirizzo http://www.codencode.it/css-zen-garden. Il tema grafico, come lascia intuire il nome, rappresenta un paesaggio notturno con una grande luna piena, nel quale trovano posto anche un lupo che ulula in direzione della luna e degli alberi in primo piano e sullo sfondo. All’interno di questo scenario sono stati inseriti i contenuti testuali presenti nel file html scaricato dal sito CSS Zen Garden. La scelta delle immagini e dei colori e gli effetti applicati, il tutto realizzato rigorosamente attraverso il solo uso del foglio di stile, rispecchiano il tema del layout. Nell’applicare lo stile alla pagina da formattare si è fatto largo uso delle potenti tecniche CSS per raggiungere il risultato desiderato. In particolare, si è fatto ricorso all’uso combinato dei posizionamenti relativi ed assoluti per ottenere l’effetto di sovrapposizione tra gli elementi, che permette di distinguere tra primo piano e sfondo quando si scorre il testo della pagina. In questo modo si ha la sensazione che la luna ed il testo si trovino “più lontani” rispetto al lupo, agli alberi ed al prato che rimangono fissi in primo piano mentre il resto si sposta verso l’alto. Il layout è robusto, non risente della risoluzione dello schermo ed è compatibile con tutti i principali browser in circolazione. Gli utenti che utilizzano browser diversi da Internet Explorer, inoltre, possono beneficiare di effetti grafici più accattivanti e di funzionalità ulteriori che migliorano l’interazione con la pagina. In questo senso, infatti, sono state usate anche alcune regole CSS3 per realizzare effetti di retroilluminazione per i titoli dei paragrafi e per il link presenti nella colonna a sinistra del testo. Inoltre, sempre per gli utenti che non utilizzano IE, è stata migliorata l’interazione sfruttando le media query per rendere adattivo il contenuto della pagina in base alla dimensione della finestra del browser. Il risultato si può notare provando a ridimensionare la finestra: mano a mano che si restringe, il contenuto della pagina di sposta occupando lo spazio a disposizione; quando la larghezza scende al di sotto dei 750 pixel, la colonna a sinistra si dispone in maniera centrata sotto il testo principale, aumentando, in tal modo, lo spazio a disposizione e permettendo di restringere ulteriormente la finestra senza che il contenuto venga tagliato fuori dall’area visibile.
Il layout creato dalla web agency CODENCODE, così come tutti quelli presenti sul sito CSS Zen Garden, può offrire spunti interessanti per i professionisti del settore che già fanno uso di queste tecniche e può essere un ottimo punto di partenza per tutti i designer che intendono esplorare l’affascinante mondo dei fogli di stile nella realizzazione dei siti web, scoprendo, come afferma il pay-off del sito, “la bellezza del design CSS“.