Con CSS3 un gradiente lineare è dichiarato dalla funzione chiamata linear-gradient(). La funzione si compone di 3 valori primari. Il primo valore definisce la posizione di partenza del gradiente. Per essa possono essere specificate le posizioni top, bottom, right, left, a seconda di quale direzione si voglia dare al gradiente. Di seguito un esempio di sintassi standard della funzione.
1 2 3 |
div { background-image: linear-gradient(top, #FF5A00, #FFAE00); } |
E’ anche possibile specificare la posizione di orientamento del gradiente anche specificando i gradi di angolazione:
1 2 3 |
div { background-image: linear-gradient(45deg, #FF5A00, #FFAE00); } |
Il secondo valore della funzione specifica il primo colore e la sua posizione di arresto che è riportata in percentuale. La posizione di arresto è in realtà opzionale, in quanto il browser è abbastanza intelligente per determinare la posizione corretta, cosicchè quando non è specifica il browser la imposterà allo 0%
come default.
Il terzo valore della funzione specifica il secondo colore. Funziona come il valore precedente, a differenza che se la posizione di arresto non viene specificata, in questo caso il browser imposterà il valore di 100%
come predefinito.
1 2 3 |
div { background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%); } |
Sfortunatamente, in questo momento, non tutti i browser supportano la sintassi standard sopra esposta e necessitano dei relativi prefissi proprietari (-webkit-
, -moz-
, -ms-
and -o-
) da associare alla funzione per la sua interpretazione. Così volendo garantire la compatibilità tra i browser, l’utilizzo della funzione di gradiente lineare sarà:
1 2 3 4 5 6 7 |
div { background-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%); background-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%); } |
Questo codice sarà compatibile con i vari browser escluso purtroppo Internet Explorer, verisone 9 inclusa e inferiori, che utilizza la funzione denominata filter
per riprodurre i gradienti.
1 2 3 |
div { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00, endColorstr=#FFAE00); } |