Una breve introduzione all’uso dei gradienti con CSS3
I gradienti CSS3 sono sicuramente una delle rivoluzioni più interessanti dei nuovi fogli stile. Ci permettono infatti con delle righe brevi di codice, di creare l’effetto di immagini sfumate (linearmente o radialmente) con indubbi vantaggi rispetto ai vecchi metodi.
NB: l’effetto è visibile su tutti i browser compresi Internet Explorer 6/7/8 (con un piccolo fix che trovate a fondo pagina).IE9 supporta questa proprietà nativamente a differenza dei predecessori che necessitano di un codice ad hoc.
Perchè usare i gradienti CSS3 al posto delle immagini?
I vantaggi sono sostanzialmente 3:
- Maggior flessibilità – Una modifica al css richiede minor tempo che la modifica di un’immagine
- Meno richieste http al server e quindi minor tempo di caricamento del sito
- Ridimensionamento – Il cambiamento delle dimensioni del contenitore permette il ridimensionamento automatico del gradiente
Andiamo allora a vedere nel concreto la sintassi per utilizzare i gradient css3:
Esempio di gradiente lineare:
body{
background-color: #440951;
background-image: -moz-linear-gradient(top, #b032cb, #440951);
background-image: -webkit-gradient(linear, left top,left bottom, from(#b032cb), to(#440951));
background-image: linear-gradient(top, #b032cb, #440951);
}
La prima linea indica il colore predominante di background, utile anche per i browser obsoleti. La seconda riga è la dichiarazione per mozilla, la terza per i browser basati su webkit (chrome e safari) e la quarta è la dichiarazione valida per gli standard W3C. Come potete notare la sintassi per webkit risulta leggermente diversa. Prendiamo l’esempio W3C per analizzare quello che stiamo scrivendo:
background-image: linear-gradient(top, #b032cb, #440951);
Linear gradient indica il tipo di gradiente. Top indica la posizione di partenza del colore a cui seguono il colore da cui si parte ed il colore a cui si vuole arrivare.
Esempio di gradiente radiale:
body{
background-color:#440951;
background-image: -moz-radial-gradient(center 45deg,circle cover, #b032cb, #440951);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#b032cb), to(#440951));
background-image: radial-gradient(center 45deg,circle cover, #b032cb, #440951);
}
Analizziamo anche per questo esempio la sintassi prendendo la dichiarazione W3C come riferimento (l’ultima riga).
Radial gradient indica il tipo di gradiente. Center indica il punto di partenza con i rispettivi gradi di angolazione, circle cover indica la forma del gradiente radiale mentre per i colori vale quanto appena detto per il gradiente lineare; il primo indica il colore di partenza ed il secondo il colore di arrivo.
Problemi di altezza del background
Sembra che i gradienti non occupino per intero il corpo del body a meno che non venga dichiarata la proprietà css:
{height:100%}
Non vi resta che fare i vostri esperimenti e verificare la comodità di utilizzo di questa nuova proprietà!
Gradiente CSS3 anche su Internet Explorer 6/7/8
PS:esiste un codice creato apposta per Internet Explorer per visualizzare l’effetto del gradient. Ecco come fare 🙂
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr=#b032cb, EndColorStr=#440951); /* vale solo per IE */