Un’altra interessante novità di CSS3 consiste nella possibilità di specificare un gradiente per la proprietà background-image (prima di questa innovazione, la proprietà in oggetto poteva accettare come valore solo la URL di un file di immagine).
In altre parole, è possibile utilizzare come sfondo, di una pagina o di un box, una sfumatura.
I gradienti supportati sono di due tipi:
- gradienti lineari (linear-gradient)
- gradienti radiali (radial-gradient)
Gradienti lineari
Sono la forma più comune di sfumatura: in pratica si ha il passaggio graduale da un colore di partenza ad uno finale, seguendo una determinata direzione lineare.
Vediamo un esempio:
background-image: linear-gradient(top left, #FFFFFF 0%, #ff6600 100%);
Come potete vedere, nell’esempio abbiamo riempito lo sfondo di un box quadrato con un gradiente che si irradia dall’angolo alto/sinistro e sfuma il bianco in arancio.
La sintassi dell’attributo linear-gradient prevede una serie di valori:
- direzione: il punto di orgine può essere un angolo (come nel nostro esempio) o un lato. I possibili valori sono:
- top
- top left
- top right
- bottom
- bottom left
- bottom right
- left
- right
- colore e offset: possono essere previste due o più coppie di valori colore/offset. Il colore viene espresso nei modi consueti (ad esempio, esadecimale) mentre l’offset è un valore espresso in percentuale o decimale (da 0.0 a 1.0) che determina il punto di partenza del colore sulla linea di gradiente.
Nel nostro esempio abbiamo, per semplicità, creato un gradeinte a due colori. Nulla vieta di utilizzarne tre o qnache di più. Vediamo, di seguito, un esempio di gradiente lineare con quattro colori:
background-image: linear-gradient(top left, #FFFFFF 0%, #ffff00 33%, #00CC00 66%, #ff0000 100%);
Nel nostro esempio il primo colore è il bianco, il secondo è un giallo, il terzo un verde e il quarto un rosso.
Gradienti radiali
Oltre ai gradienti lineari, CSS3 supporta i cosiddetti gradienti radiali, cioè gradienti che si diffondono irradiandosi da un centro esattamente come farebbero le onde all’interno di un lago dove è stato lanciato un sasso.
L’attributo che dovrà essere utilizzato per la proprietà background-image è, in questo caso, radial-gradient. Vediamo un esempio:
background-image: radial-gradient(top, circle, #FFFFFF 0%, #CC0000 100%);
La sintassi dell’attributo radial-gradient prevede i seguenti valori:
- punto di origine: il valore di default è center (il gradiente si irradia dal centro dell’elemento); altri possibili valori sono top, bottom, left e right (singoli o combinati tra loro);
- forma (shape): i possibili valori per la "forma" del gradiente sono circle (circolare) o ellipse (ellittica); quest’ultimo è il valore di defult;
- dimensione (size): questo valore definisce la dimensione del gradiente. I possibili valori sono:
- farthest-corner (default)
- closest-side
- closest-corner
- farthest-side
- colore e offset: valgono le stesse osservazioni visti per i gradienti lineari.
I primi tre parametri sono facoltativi. Per generare un gradiente radiale, infatti, è sufficiente specificare come minimo due coppie di valori colori/offset. Vediamo un esempio:
background-image: radial-gradient(#FFFFFF 0%, #CC0000 100%);
