L’anno scorso avevamo analizzato la proprietà CSS gradient spiegando come realizzare un gradiente cross-browser senza l’utilizzazione di immagini.
Oggi voglio, oltre a presentare una nuova regola introdotta dal team di webkit, analizzare alcune particolari tecniche per sfruttare i gradient CSS per scopi appariscenti.
Cosa cambia in webkit
La scelta di webkit è stata quella di avvicinare la sintassi della proprietà CSS gradient a quella ufficiale della definizione W3C. Ricordiamo, infatti, che la proprietà CSS che webkit offriva fino a qualche mese fa era (ad esempio):
[html]
-webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#000000))
[/html]
Ora, invece:
[html]
-webkit-linear-gradient(top center, #ffffff, #000000)
[/html]
La vecchia proprietà offerta in precedenza rimane comunque supportata dalle nuove versioni dell’engine in questione, mentre invece, chiaramente, -webkit-linear-gradient non può essere supportata dalle versioni passate di Webkit.
Il mio consiglio è, per lo meno in questo momento di transizione tra le versioni e di confusione per il supporto tra engine e browser, quello di sfruttare entrambe le proprietà in combinazione, così da offrire la compatibilità anche per le vecchie versioni di webkit. Inoltre è un buon modo per iniziare ad utilizzare -webkit-linear-gradient che tende ad essere simile a quella che sarà la versione definitiva come definito dallo standard.
Sfruttare i gradienti per grafiche particolari
Tra gli sviluppatori web molti hanno sicuramente già notato il blog molto interessante di una Web developer greca che propone, tra gli altri post, una gallery di pattern CSS3 realizzati con uso massiccio di gradienti.
Nel prossimo post analizzerò uno di questi pattern e mostrerò come poterne realizzare da zero.
