Abbiamo già trattato l'argomento colore, e tutte le novità introdotte con i CSS per specificare e gestire tonalità e trasparenze, stavolta vedremo come creare sfumature solo usando codice CSS3. Ebbene sì, possiamo fare a meno di Photoshop e Co. per creare elementi con più colori che si fondono tra di loro grazie alla funzione GRADIENT. Vediamola insieme.

Gradient si applica alla proprietà background-image (anche allo shorthand background), e a list-style-image, funziona con elementi di blocco e in linea. I gradienti sono un tipo di immagine generata, non una proprietà, questo significa che si possono usare ovunque è possibile usare un url(image.jpg).

Gradient è supportato dai browser Firefox, Safari e Chrome, che hanno i loro specifici attributi con prefisso proprio (ricordiamo: -moz per Mozilla Firefox, -webkit per Safari e Chrome) e sintassi leggermente diversa, per capirne le diversità e riuscire a rendere una sfumatura identica in ogni browser partiremo proprio con l'analizzare degli esempi:


gradient css3

Immagine 1

SFUMATURE LINEARI

linear gradient css3

Immagine 2


div{<br />        background: -moz-linear-gradient(100% 100% 180deg, red, yellow);<br />        background: -webkit-gradient(linear, right top, left bottom, from(red), to(yellow));<br />    }

Questa regola applica allo sfondo una sfumatura orizzontale tra il rosso e il giallo (primo div della foto).

Abbiamo visto nell'immagine 1 che per Mozilla il metodo della sfumatura (linear) va specificato fuori dalle parentesi, a differenza della sitassi usata per webkit.
Altri metodi di fusione dei colori sono: radial, repeating-linear-gradient e repeating-radial-gradient, questi ultimi due però sono attualmente supportati solo da Firefox, anche se, come vedremo più avanti, Webkit sta già lavorando per aggiornarsi.

Il W3C ci dice che abbiamo due modi per definire il gradiente lineare:

  1. Specificando l'angolo della linea di pendenza in gradi (questo è il metodo Firefox)- foto 2
  2. Attraverso le parole chiave left, right, top e bottom per definire il punto d'inizio e il punto finale della sfumatura. (metodo Webkit, funzionante anche su Firefox)


SFUMATURE RADIALI

Sono le sfumature che invece di partire da un lato del nostro elemento HTML per arrivare ad un altro lato in modo lineare, si irradiano da un punto allargandosi in modo circolare o ellittico.

E' possibile definire attraverso CSS3 il punto da cui partirà il gradiente, (di default è il centro dell'elemento), la forma (circolare o ellettica) e la dimensione, che possiamo specificare attraverso specifiche parole-chiave (closest-side | closest-corner | farthest-side | farthest-corner | contain | cover) per i dettagli consultare il W3C:

Esempi di sfumature radiali:

radial gradient css3
Immagine 3

#primo{<br />        background: -moz-radial-gradient(center 45deg, circle closest-corner, red 0%, yellow 100%);<br />    }        <br />    #secondo{
    background: -moz-radial-gradient(center 90deg, circle contain, red 0%, yellow 100%);<br />    }<br />    #terzo{<br />        background: -moz-radial-gradient(bottom left, farthest-side, red, yellow 50px, green);<br />    }<br />    #quarto{<br />        background: -moz-radial-gradient(20px 30px, contain, red, yellow, blue);<br />    }

E' possibile specificare più colori e le percentuali per ogni singolo colore, fermare il gradiente di ogni colore in punti specifici con l'attributo di gradient color- stop:

gradient css3 stop-color

Immagine 4


#color-stop{<br />         background:-webkit-gradient(linear, left bottom, left top,<br />                color-stop(0.26, red),<br />                color-stop(0.7, yellow),<br />                color-stop(0.89, green)<br />         );<br />         -moz-linear-gradient(center bottom, red 26%, yellow 70%,green 89%);<br />    }

E'   possibile creare effetti ottici con  repeating-linear-gradient

repeating reImmagine 5


Il mio consiglio è di fare esperimenti con i vari tool on line quali ad esempio http://gradients.glrzad.com/ e http://www.westciv.com/tools/radialgradients/index.html per comprendere le potenzialità di questa nuova funzione CSS3, visto che è possibile scrivere il codice in vari modi, c'è da ammettere infatti, che le differenti sintassi dei vari browsers rendono un po' macchinosa la scrittura del codice a mano, ma la buona notizia è che queste divergenze  saranno ben presto eliminate per raggiungere uno standard che sarà quello già in uso in Firefox.

Infatti, recentemente il team di Webkit ha annunciato che l'ultima versione nightly build (ovviamente in versione beta) supporta già la sintassi Mozilla, accanto ai vecchi valori -webkit, potete scaricarla e testarla da qui.