Gradienti CSS3

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 */