Qualche anno fa Safari aveva già introdotto la feature gradient offerta da CSS3. Ora finalmente possiamo creare i gradienti per i nostri siti internet, senza dover ricorrere a immagini, adattando il nostro codice per poter risultare cross-browser (anche per IE).
Come sicuramente già sai, le specifiche CSS3 sono ancora in bozza di definizione, quindi alcune proprietà possono avere sintassi differenti tra i vari browser. Gradient è una di queste proprietà, quindi…
…per i browser Webkit…
Voglio introdurre i gradienti CSS con un esempio di come, per i diversi browser, è possibile ottenere la medesima soluzione. Sfruttando l’esempio di CSS transition per la creazione di animazioni su web, voglio modificare i pulsanti del primo esempio inserendo anche una sfumatura di sfondo per i pulsanti e che allo stato hover inverta la propria visualizzazione.
La sintassi per usare i gradient CSS3 su Webkit è la seguente:
[css]
background:-webkit-gradient(modalità, punto_inizio, punto_fine, from(colore_inizio), to(colore_fine));
[/css]
La modalità indica il tipo di gradiente che vogliamo disegnare. I tipi in questione sono due:
- linear
- radial
I valori di punto_inizio e punto_fine devono essere indicati da due paia di coordinate, mentre colore_inizio e colore_fine possono essere definiti come vengono identificati i colori nei CSS.
Quindi il nostro esempio per Webkit diventa:
[css]
background:-webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#77bbFF));
[/css]
…per Firefox…
La sintassi della rispettiva proprietà per Firefox è più semplice.
[css]
background:-moz-linear-gradient(punto_inizio, colore_inizio, colore_fine);
[/css]
Notiamo subito che il tipo di gradiente è definito direttamente nel nome della proprietà -moz-linear-gradient.
Da qui, possiamo semplicemente dedurre il nostro esempio:
[css]
background:-moz-linear-gradient(top, #ffffff, #77bbff);
[/css]
…e per IE…
Chiaramente cosa ci aspettiamo da Internet Explorer? Una definizione proprietaria (molto difficile da ricordare) per la gestione dei suoi filtri interni.
Ebbene sì, anche questa volta IE ci accontenta:
[css]
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr=’colore_inizio’,
endColorstr=’colore_fine’
);
[/css]
che applicata al nostro esempio diventa:
[css]
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr=’#77bbFF’,
endColorstr=’#ffffff’
);
[/css]
La limitazione che comporta Internet Explorer è la gestione dei soli gradienti lineari con un colore di inizio ed uno finale.
…ed ecco l’esempio…
[iframe src=”//jsfiddle.net/3nKHg/embedded/”]
Anche in questo caso l’unico limite che possiamo porre ad esempi e test di sviluppo è legato alla nostra creatività (e, magari un po’ anche ad Internet Explorer).
Buon divertimento!
