Nella parte precedente abbiamo cominciato ad affrontare le novità riguardanti i Cascading Style Sheet, ricordandone i concetti di base, illustrando il fondamentale tema dei selettori, considerando la compatibilità con i vari browser e presentando una serie di semplici esempi. In questo numero, i CSS3 vengono ulteriormente analizzati e prendono vita: vedremo infatti l‘evoluzione cui sono giunti e le possibilità che riservano a chi li saprà usare con competenza (e senso estetico…). Tra layout complessi, effetti tipografici quali la scelta dei font e l‘incolonnamento, transizioni e animazioni grafiche, le possibilità offerte al web designer sono infatti davvero notevoli.
Ma ve le ricordate le pagine web nel periodo in cui Internet cominciava ad affermarsi? Quegli sfondi grigi o celestini, il testo inevitabilmente in Times New Roman con le righe che si estendevano per tutta la larghezza dello schermo, qualche discutibile elemento lampeggiante, link azzurri chiaramente sottolineati e, immancabile, qualche bandierina sventolante? Sembra preistoria, vero? In effetti, da un certo punto di vista, lo è: ma in realtà si tratta solo della metà degli anni Novanta (dello scorso secolo…).
In quel che riguarda Internet, di passi in avanti da allora ne sono stati fatti moltissimi anche per gli aspetti prettamente visuali, con graduali miglioramenti e arricchimenti delle pagine. In quest’ottica, i CSS3 sembrano promettere ancor di più e consentiranno di portare nelle pagine web certe finezze grafiche tipiche del mondo della stampa (forzatamente “espulse” per anni dalle linee guida del bravo web designer) o certi effetti finora realizzati con tecnologie, diciamo così, esterne, come Flash e i suoi surrogati.
In questo articolo ci concentriamo proprio su tali funzionalità, messe a disposizione dai nuovi CSS3.
I layout complessi sono alla portata dei fogli di stile?
Prima di addentrarci nell’analisi tecnica dei diversi aspetti, rispondiamo subito a un paio di interrogativi che in molti si saranno posti: ma in definitiva, le potenzialità dei nuovi CSS3 sono tali da consentire di realizzare layout complessi? O tecnologie mature e potenti come Flash restano ancora un passo avanti?
La risposta è leggeremente più articolata di un semplice “sì” o “no”. CSS3 presenta una serie di funzionalità (e le vedremo nella seconda parte dell’articolo) che consentono effetti di transizione, trasformazione e animazione anche piuttosto complessi e risultati decisamente interessanti: al momento attuale le trasformazioni 3D sono in parte definite, ma ancora non godono di un supporto sufficientemente ampio tale da consigliarne l’utilizzo fin d’ora. D’altro canto, in CSS3 è già presente tutto ciò che, in qualche modo, tende a ridurre le distanze fin qui abbastanza evidenti tra tipografia “tradizionale” e web design: tutto quello che riguarda l’uso dei font, le impaginazioni “a griglia complessa” e altri aspetti che migliorano nettamente la leggibilità e l’aspetto estetico della nostra “pagina” è già pronto per essere usato (si spera con il dovuto buon gusto grafico).
Laddove si richiedano layout in cui l’effetto wow rivesta un ruolo di primaria importanza, le tecnologie Flash mantengono ancora la loro innegabile potenza, anche in virtù del loro grado di maturità: resta da capire poi, quando tali effetti complessi siano realmente funzionali alla comunicazione che si intende effettuare (a volte lo sono… a volte molto meno).
Il web e un’impaginazione di stampo “tipografico”
Abbiamo appena detto che i CSS3 consentono un’impaginazione che si avvicina a una grafica più tradizionale. Ma in cosa consistono queste funzionalità? Fondamentalmente ci muoviamo nell’ambito della gestione e della visualizzazione dei font, dell’incolonnamento del testo, dello scontorno del testo, dell’utilizzo dei gradienti. Vediamo in dettaglio questi diversi aspetti.
Importare i font
Per molti anni, il web designer si è dovuto accontentare di una scelta di font piuttosto limitata: la possibilità di impaginare il proprio sito scegliendo la tipologia di font più adatta alle esigenze grafiche e di utilizzare il lettering in maniera creativa per un’efficace comunicazione grafica è rimasta limitata alla carta stampata (o ai documenti PDF con i font incorporati, che poi, concettualmente, sono comunque delle “stampe”).
Con le novità dei CSS3, diventa possibile importare i font dentro le pagine di un sito, consentendo così all’utente finale di vedere (presumibilmente) la pagina proprio come la si era pensata in fase di progettazione e sviluppo. È chiaro come tutto questo fornisca la base tecnologica a certe tendenze editoriali che stanno prendendo piede con l’avvento dell’iPad e dei tablet in generale: pubblicazioni “usa e getta”, come i giornali quotidiani o anche le riviste, tenderanno sempre più ad essere fruite su tali dispositivi, ma solo se il livello di presentazione grafica per l’utente non è penalizzante rispetto alla loro tradizionale controparte cartacea. Fermo restando che la certi caratteri graziati o particolari si leggono sullo schermo meno bene dei caratteri lineari senza grazie, va anche detto che i nuovi dispositivi hanno schermi a definizione sempre maggiore, o adottano soluzioni come l’e-ink di certi e-reader, che li avvicinano sempre più alla nitidezza della carta (che per ora resta insuperata).
Da un punto di vista pratico, il meccanismo funziona come segue. All’interno della regola @font-face, si stabilisce un nome per il font da utilizzare nella nostra pagina (font-family, usando, chiaramente, dei nomi “sensati” e coerenti). Poi si collega questa definizione a un file di font presente su un server (poi vedremo i dettagli relativi a questi file), e infine, tramite la classica regola font dei CSS, si richiama il font precedentemente definito. Nel caso in cui il font in questione sia già presente sul sistema dell’utente, ne evitiamo il download ridondante con la dichiarazione src: local.
Vediamolo in dettaglio nel codice:
Ci sono comunque alcuni aspetti importanti da approfondire, che riguardano il formato dei file di font e le implicazioni “legali” connesse all’utilizzo di questi file. Partiamo dal discorso del formato di questi file di font.
Figura 1 – Un esempio di utilizzo di font per il web scaricabili.
A livello di formato, i font per il web scaricabili sono dei TTF (True Type) o degli OTF (Open Type): va detto anche che alcune case produttrici di font si stanno orientando sulla creazione di caratteri specificamente disegnati per essere visualizzati al meglio sugli schermi ma, da un punto di vista tecnico e operativo, questo non cambia molto il discorso, poiche’ la compatibilità di questo meccanismo è piuttosto buona già con quasi tutti i browser. Internet Explorer, infatti, non è compatibile con questi formati “comuni”; e questo avviene, paradossalmente, non per una sua mancanza o arretratezza, ma proprio perche’ Microsoft aveva messo a punto questo sistema già a partire dalla versione 4 di IE. Il problema è solo che lo aveva fatto con un formato di font proprietario che si chiama EOT (Embedded Open Type), per cui Explorer è in grado di importare font in formato EOT, ma non TTF o OTF. Va detto che esistono comunque dei tool di conversione ([3], [4], [5]),che trasformano i TTF o gli OTF in EOT: da notare che spesso le conversioni effettuate da alcuni di questi strumenti [6] funzionano solo a partire da uno dei due formati standard. Come si vede, la questione non è assolutamente problematica.
A livello “legale”, invece, sussistono tuttora delle criticità legate alle differenti condizioni di utilizzo proposte dalle varie case produttrici di font, che al momento ancora non si sono accordate su una linea comune per l’uso di questi file da parte degli utenti web. Si consiglia pertanto di leggere attentamente le condizioni d’uso legate ai diversi file di font e magari di privilegiare, almeno fino a quando la situazione non sarà chiarita definitivamente, font di libero utilizzo, come quelli presenti sul sito “Font Squirrel” [7].
Disposizione del testo in colonne
Altra caratteristica tipografica che i CSS3 consentono di ottenere è quella dell’incolonnamento del testo. Le colonne consentono di disporre il testo in maniera che ne venga migliorata la lettura, se la riga non è eccessivamente corta, specie laddove i testi siano relativamente lunghi.
Figura 2 – Testo in colonne.
Nei CSS3 si possono ottenere colonne bilanciate grazie a una serie di proprietà che stabiliscono il numero di colonne (column-count), la distanza tra le colonne (column-gap) e l’eventuale presenza, spessore e colore del filetto verticale di separazione (column-rule).
Nel codice seguente possiamo vedere quanto appena detto (come spiegato nell’articolo del mese scorso, le proprietà riferite ai diversi browser sono caratterizzate dai prefissi):
Al momento attuale, Opera e Internet Explorer ancora non supportano queste caratteristiche.
Contornare il testo
CSS3 consente anche di contornare i caratteri in maniera tale che un testo ad esempio giallo possa essere visto su uno sfondo giallo: pensiamo a una scritta fatta di font e scontornata su uno sfondo. Le proprietà coinvolte sono text-fill-color per dare il colore di riempimento del carattere, text-stroke-color per indicare il colore dello scontorno, text-stroke-width per scegliere lo spessore in pixel del contorno.
Figura 3 – Testo contornato.
Il codice che contiene di ottenere un tale effetto è il seguente:
:#FFC;}
Si tratta di un effetto che però potrebbe causare dei problemi: nei browser in cui non è supportato, il risultato finale potrebbe essere, ad esempio, un testo bianco su sfondo bianco… con ovvie conseguenze di invisibilità. Si raccomanda pertanto di usare con cautela tale effetto prestando attenzione a inserire regole che permettano ai browser non compatibili di degradare in maniera corretta, mantenendo la visibilità del testo.
Gestire i gradienti
I gradienti sono quegli effetti di sfumatura che permettono di avere un passaggio graduale da un colore a un altro: le due tipologie più comuni sono il gradiente lineare e quello radiale (dove il colore sfuma seguendo un andamento circolare). Questa proprietà è stata sviluppata inizialmente per webkit ma è presente anche nei browser gecko-based: l’unico inconveniente è che le due categorie di browser scrivono queste proprietà in maniera decisamente diversa e di questa cosa occorre sempre ricordarsi (non basta cambiare il prefisso!). Per rendersi conto di questi effetti, è piuttosto utile l’applicazione online [11] che consente di crearli per le diverse tipologie di browser.
Per quanto riguarda i gradienti lineari, in webkit la sintassi prevede quanto segue:
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFF00), to(#FF0000))
Dopo l’indicazione della proprietà (gradient), all’interno delle parentesi si trovano, nell’ordine
- il tipo di gradiente: linear
- la coppia di valori con la posizione orizzontale e verticale del primo colore: 0% 0%
- la coppia di valori con la posizione orizzontale e verticale del secondo colore: 0% 100%
- l’indicazione del primo colore, quello da cui si parte: from(#FFFF00)
- l’indicazione del secondo colore, quello a cui si arriva: to(#FF0000)
Qualche sperimentazione con l’applicazione online [11] sopra indicata (dentro un browser come Chrome o Safari), consentirà al lettore di comprendere la versatilità e la potenzialità derivante dalla combinazione dei diversi elementi (con il comando Add Stop, per esempio, si possono creare gradienti anche a tre o più colori) e di verificare la traduzione in codice dell’effetto ottenuto.
Per i gradienti lineari realizzati per i browser gecko, la sintassi è decisamente diversa e prevede quanto segue:
-moz-linear-gradient(0% 100% 90deg,#FF0000, #FFFF00)
Dopo aver indicato la proprietà (linear-gradient), all’interno delle parentesi abbiamo, nell’ordine
- lo sviluppo delle linee verticali del gradiente (v position): 0%
- lo sviluppo delle linee orizzontali del gradiente (h position): 100%
- i gradi di inclinazione del gradiente: 90deg
- il primo colore: #FF0000
- il secondo colore: #FFFF00
Anche qui, qualche prova online con l’applicazione indicata [11] (dentro un browser come Firefox), consentirà al lettore di prendere dimestichezza con gli effetti e con la loro traduzione nel codice (oltre che con le evidenti differenze rispetto al codice per webkit).
Figura 4 – Esempio di gradiente lineare generato dall’applicazione online di John Allsopp.
Per quanto riguarda i gradienti radiali, in webkit la sintassi prevista è la seguente:
-webkit-gradient(radial, 80 50, 100, 80 50, 30, from(#0000FF), to(#00FFFF))
Dopo l’indicazione della proprietà (gradient), all’interno delle parentesi si trovano, nell’ordine
- il tipo di gradiente: radial
- la coppia di valori con la posizione orizzontale e verticale del centro del gradiente del primo colore: 80 50
- il raggio del primo gradiente: 100
- la coppia di valori con la posizione orizzontale e verticale del centro del gradiente del secondo colore: 80 50
- il raggio del secondo gradiente: 30
- l’indicazione del primo colore, quello esterno: from(#FFFF00)
- l’indicazione del secondo colore, quello interno: to(#FF0000)
Per avere gradienti “regolari”, è consigliabile usare gli stessi valori di posizionamento per entrambi i colori. Anche qui, un po’ di prove con l’applicazione [11] possono aiutare (o magari, solo confondere ulteriormente le idee).
Ancora più complicata è la sintassi dei gradienti radiali per i browser gecko-based (moz-radial-gradient). Rimandiamo direttamente il lettore alle prove con l’applicazione online di John Allsopp [11] per fare degli esperimenti e vederne la loro traduzione in codice. A questa maggiore complessità della proprietà moz-radial-gradient corrisponde comunque anche una maggiore versatilità degli effetti ottenibili.
Figura 5 – Esempio di gradiente radiale generato dall’applicazione online di John Allsopp.
Tutto scorre: le transizioni CSS
Tra le novità più evidenti dei nuovi CSS ci sono alcuni effetti che avvicinano i risultati ottenibili con questo linguaggio a quelli ottenuti tradizionalmente con tecnologie JavaScript. Con il progredire delle specifiche, sono aumentati gli effetti ottenibili ricorrendo direttamente ai CSS. In questo senso, CSS3 fa un ulteriore passo in avanti per quanto riguarda le transizioni. Le transizioni, come anche le animazioni, sono state sviluppate sostanzialmente dai browser basati su webkit ed è su questi che funzionano bene: invitiamo pertanto i lettori, almeno per quel che riguarda le transizioni, a provare gli esempi allegati (file EsempiCSS3.zip scaricabile dal menu in alto a destra) principalmente su browser come Chrome e Safari (sebbene anche con Opera possano funzionare).
Un esempio di transizione
Una transizione si basa su regole che, quando avviene un passaggio di stato di un elemento (p.e.: il rollover di un bottone), specificano chiaramente che cosa deve cambiare, in quanto tempo deve avvenire il cambiamento, con quale curva temporale (lineare, accelerata, decelerata, combinata etc.) si deve verificare, e con quale ritardo rispetto all’evento scatenante si manifesta il cambiamento. I tempi di cambiamento e di ritardo sono espressi in secondi, gli elementi che cambiano sono abbastanza chiari (il colore di sfondo, per esempio) ma le “curve temporali” con cui avvengono i cambiamenti vanno spiegate un po’: in pratica si tratta di curve che stabiliscono l’andamento della transizione (accelerazioni, decelerazioni etc.) nell’arco di tempo previsto. Queste curve sono diversificate in 6 tipi:
- ease (default): rappresenta un andamento equilibrato, con un rallentamento alla fine;
- linear: ha un andamento strettamente lineare;
- ease-in: la transizione parte lentamente e accelera verso la fine;
- ease-out: è il contrario della precedente, parte velocemente ma decelera alla fine;
- ease-in-out: parte lenta, accelera, prosegue veloce, decelera, conclude lenta;
- cubic-bezier: se serve qualcosa di “speciale”, questo valore lo mette a disposizione dell’utente.
Il codice che riportiamo fa riferimento a un pulsante che muta il colore di sfondo da giallo a rosso, in 1 secondo, con un mutamento di tipo ease-in, e con un ritardo di mezzo secondo sull’evento scatenante.
a.transizione{
font-family: Verdana, Geneva, sans-serif;
font-size:16px;
font-weight:bold;
width: 300px;
padding: 6px 12px;
border: solid 3px;
color:#666;
text-decoration:none;
background:#FF0;
/* Transizioni: proprietà */
-webkit-transition-property: all;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in;
-webkit-transition-delay: 0.5s;
}
a.transizione:hover{
color:#000;
background:#F00;
}
Figura 7 – Gli step della transizione (per vedere l’effetto reale, fare riferimento agli esempi in allegato).
Nella porzione seguente è presente un sistema condensato di scrittura dove, accanto alla proprietà transition, completa di prefisso per browser, vengono indicati, separati da spazio, i quattro valori relativi, rispettivamente, a ciò su cui avviene la transizione (all), il tempo di durata della stessa (1s), la tipologia di curva di temporizzazione (ease-in) e, infine, il tempo di ritardo (0.5s).
/* Transizioni: proprietà */ -webkit-transition: all 1s ease-in 0.5s; -moz-transition: all 1s ease-in 0.5s; -o-transition: all 1s ease-in 0.5s; transition: all 1s ease-in 0.5s;
Le transizioni possono essere attivate su diverse proprietà dell’elemento. Nel nostro caso abbiamo scelto di applicarle su tutto (all), ma in effetti è possibile scegliere di applicare la transizione solo, per esempio, sulla larghezza (width), sull’opacità (opacity), sull’arrotondamento degli angoli del pulsante (corner-radius), e più in generale su tutto quello che può generare un effetto coinvolgente.
Le transizioni, essendo in genere un effetto volto soprattutto a dare enfasi e movimento alla pagina, e più raramente un portatore di contenuto comunicativo, di solito degradano senza difficoltà.
Scalare, ruotare, distorcere: le trasformazioni
La possibilità di mutare gli elementi rappresenta un’altra delle novità dei CSS3: gli effetti di trasformazione consentono di operare sugli oggetti scalandoli, ruotandoli, distorcendone la forma o spostandone la posizione nella pagina. Tali possibilità, se usate in maniera adeguata, concorrono ad accrescere la dinamicità delle pagine e a migliorare l’esperienza dell’utente. Per vedere l’effetto reale delle trasformazioni, provare nei diversi browser gli esempi allegati
Scalature
È possibile scalare degli oggetti, cioè farne aumentare o diminuire le dimensioni. L’esempio seguente, abbastanza intuitivo, è una pseudoclasse con cui, al passaggio del mouse su un’immagine, questa aumenta le sue dimensioni del 50% in più.
a:hover img{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
transform:scale(1.5);
}
Figura 8 – Scalare le immagini.
Rotazioni
Ruotare gli oggetti di un certo numero di gradi è piuttosto semplice: il codice seguente, abbastanza autoesplicativo, mostra come fare. Di default, la rotazion avviene rispetto al centro dell’elemento, ed è indicata, nel nostro caso, da (-30deg), ma è possibile anche stabilire che tale rotazione avvenga rispetto a un’origine specificata attraverso la proprietà transform-origin cui attribuire una coppia di valori scelta tra bottom, center o top per la posizione verticale e left, center o right,per la posizione orizzontale (p.e.: transform-origin: bottom left;)
a:hover img{
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
transform:rotate(-30deg);
}
Figura 9 – Ruotare le immagini.
Distorsioni
Effettuare una “distorsione” degli oggetti (skew) segue lo stesso meccanismo appena visto (vengono indicati gli angoli di traslazione rispetto al centro):
a:hover img{
-webkit-transform:skew(-5deg, 30deg);
-moz-transform:skew(-5deg, 30deg);
-o-transform:skew(-5deg, 30deg);
transform:skew(-5deg, 30deg);
}
Figura 10 – Distorcere delle immagini.
Spostamenti
Nessuna differenza concettuale, infine, nel codice che consente di realizzare gli spostamenti (viene indicato, in pixel, rispettivamente lo spostamento verso il basso e verso destra).
a:hover img{
-webkit-transform:translate(40px, 60px);
-moz-transform:translate(40px, 60px);
-o-transform:translate(40px, 60px);
transform:translate(40px, 60px);
}
Figura 11 – Effettuare uno spostamento delle immagini.
Nel complesso, le trasformazioni presentano una ottima compatibilità con le ultime versioni di tutti i browser (per Internet Explorer, la versione 9, ancora in beta, ma non le precedenti).
Barra a dritta verso Flash: le animazioni con i CSS
In CSS3, le animazioni funzionano prevalentemente nei browser basati su webkit, pertanto nei nostri esempi indicheremo soltanto il prefisso relativo a questi browser. Il meccanismo, apparentemente complesso, è in realtà abbastanza lineare e si basa su concetti che risulteranno noti a chi abbia già avuto esperienza con le tecnologie Flash: i keyframe, ad esempio.
Animazioni: le pagine HTML che utilizzano i keyframe
Un keyframe è un tipo di fotogramma che definisce lo stato iniziale, finale e/o intermedio di un’animazione computerizzata, in pratica i “punti” dell’animazione dove qualcosa cambia. Una volta stabilite queste tappe, l’animazione avviene per interpolazione, seguendo delle tipologie di andamento come quelle viste a proposito delle curve di temporizzazione nelle transizioni.
Quindi, per creare una animazione, occorre anzitutto definire dei keyframe mediante una regola @-webkit-keyframe. Nel nostro esempio creiamo una animazione cui diamo il nome pulse (una variazione oscillante del livello di opacità) che ha 3 keyframe (inizio, metà, fine: 0% 50% 100%) al cui interno scegliamo di mettere la proprietà -webkit-box-shadow. Ciò che cambia, e che determina la pulsazione oscillante, è proprio il valore di opacità (nel nostro caso passa da 0.2 a 0.9 e poi torna a 0.2).
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);
}
50% {
-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.9);
}
100% {
-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);
}
}
Successivamente sarà necessario effettuare il reference dell’animazione creata all’evento scatenante, ad esempio utilizzando una pseudoclasse hover al cui interno si richiama il nome esatto precedentemente attribuito all’animazione (pulse).
a:hover {
-webkit-animation-name: pulse;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
L’interpretazione del codice non presenta difficoltà di sorta: per le funzioni di temporizzazione dell’animazione, fare riferimento alle curve di temporizzazione viste in precedenza (figura 6).
Conclusioni
Abbiamo visto le principali novità dei CSS relative agli aspetti visuali: grafica e font, gradienti, transizioni e trasformazioni, e abbiamo riportato anche i principi base dell’animazione. Appare chiaro come si stia puntando su CSS3 per ottenere uno strumento sempre più potente, sebbene ancora non sia a un livello di compiutezza totale. Cosa si prevede per il futuro? L’orizzonte di riferimento è già stato delineato e questa tecnologia si è instradata sui binari già descritti. Si spera però che nell’evoluzione a breve termine dei CSS3, si proceda verso una maggiore uniformità nella sintassi delle proprietà: le notevoli differenze che in certi casi si riscontrano (vedi gradienti) nella scrittura del codice per i diversi tipi di browser rischia infatti di risultare indigesta a molti sviluppatori e di frustrare i tentativi di adozione di certi effetti.
Abbiamo già detto che le diverse componenti della terna HTML5-CSS3-API JS non possono essere suddivise in maniera assolutamente netta, ma nella nostra esposizione stiamo comunque cercando di mantenere una certa progressione logica: e quindi, nel prossimo numero, ci orienteremo verso il discorso API JavaScript.
Riferimenti
[1] Il sito del WHATWG
[2] Dan Cederholm, “CSS3 for Web Designers”, A Book Apart, 2010
[3] WEFT. “Web Embedding Fonts Tool” è un convertitore da TTF a EOT
http://www.microsoft.com/typography/WEFT.mspx
[4] “ttf2eot” è un convertitore da TTF a EOT per Linux
http://code.google.com/p/ttf2eot/
[5] “TTF to EOT font converter” è un convertitore online
http://www.kirsle.net/wizards/ttf2eot.cgi
[6] “Online Font Converter” è un convertitore online da OTF a EOT
http://onlinefontconverter.com
[7] Font Squirrel, una risorsa per il download di font free per il web
[8] Il sito di CSS3 generator, per la scrittura e il testing “al volo” del codice CSS3.
[9] Jeremy Keith, “HTML5 for Web Designers”, A Book Apart, 2010
[10] Il sito di HTML5Rocks che fornisce una nutrita serie di esempi
[11] L’applicazione di John Allsopp che consente di creare gradienti per le diverse categorie di browser
http://westciv.com/tools/gradients/index.html