Esempio
L'esempio seguente mostra un gradiente lineare che inizia nella parte superiore. Si inizia rosso, la transizione al giallo, poi al blu:
#grad {
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(red,yellow,blue); /*
Opera 11.1-12.0 */
background: -moz-linear-gradient(red,yellow,blue); /*
Firefox 3.6-15 */
background: linear-gradient(red,yellow,blue); /* Standard
syntax */
}
Prova tu stesso " Definizione e utilizzo
Il linear-gradient() funzione crea una "image" che rappresenta un gradiente lineare di colori.
Per creare un gradiente lineare è necessario definire almeno due interruzioni di colore. interruzioni di colore sono i colori che si desidera rendere transizioni uniformi tra. È inoltre possibile impostare un punto di partenza e una direzione (or an angle) insieme con l'effetto sfumato.
Esempio di Sfumatura lineare:
| Versione: | CSS3 |
|---|
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la funzione.
Numeri seguiti da -webkit-, -moz-, o -o- specificare la prima versione che ha lavorato con un prefisso.
| Funzione | |||||
|---|---|---|---|---|---|
| linear-gradient() | 26.0 10.0 -webkit- | 10.0 | 16,0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
CSS Sintassi
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );
| Valore | Descrizione |
|---|---|
| direction | Definisce un punto di partenza e una direzione (or an angle) insieme con l'effetto gradiente. |
| color-stop1, color-stop2,... | interruzioni di colore sono i colori che si desidera rendere transizioni uniformi tra. Questo valore è costituito da un valore di colore, seguito da una posizione di arresto opzionale (a percentage between 0% and 100% or a length along the gradient axis) . |
Altri esempi
Esempio
Un gradiente lineare che parte dalla sinistra. Si inizia rosso, la transizione al blu:
#grad {
background: -webkit-linear-gradient(left,
red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , blue); /* Standard syntax */
} Prova tu stesso " Esempio
Un gradiente lineare che parte in alto a sinistra (and goes to bottom right) :
#grad {
background: -webkit-linear-gradient(left
top, red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red , blue); /* Standard syntax */
} Prova tu stesso " Esempio
Una sfumatura lineare con un angolo specificato:
#grad {
background: -webkit-linear-gradient(180deg,
red, blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg,
red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(180deg, red, blue); /* Standard syntax */
} Prova tu stesso " Esempio
Un gradiente lineare con più interruzioni di colore:
#grad {
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} Prova tu stesso " Esempio
Un gradiente lineare con la trasparenza:
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} Prova tu stesso " Pagine correlate
Tutorial CSS: CSS3 gradienti
Funzioni CSS di riferimento