gradienti di CSS3 consentono di visualizzare transizioni uniformi tra due o più determinati colori.
In precedenza, era necessario utilizzare le immagini di questi effetti. Tuttavia, utilizzando gradienti di CSS3 è possibile ridurre il tempo di download e l'uso della larghezza di banda. Inoltre, gli elementi con gradienti aspetto migliore quando l'ingrandimento, perché il gradiente è generata dal browser.
CSS3 definisce due tipi di gradienti:
- Sfumature lineari (va giù / su / sinistra / destra / in diagonale)
- Gradienti radiali (definito dal loro centro)
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit-, -moz- , o -o- specificare la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS3 gradienti lineari
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 (o un angolo) insieme con l'effetto sfumato.
Sintassi
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );Sfumatura lineare - verso il basso (questa è l'impostazione predefinita)
L'esempio seguente mostra un gradiente lineare che inizia nella parte superiore. Si inizia rosso, la transizione al giallo:
Esempio
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For
Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard
syntax */
} Prova tu stesso " Sfumatura lineare - da sinistra a destra
L'esempio seguente mostra un gradiente lineare che parte da sinistra. Si inizia rosso, la transizione al giallo:
Esempio
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,
red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , yellow); /* Standard syntax */
} Prova tu stesso " Sfumatura lineare - Diagonal
È possibile effettuare una sfumatura diagonale specificando entrambe le posizioni di partenza orizzontale e verticale.
L'esempio seguente mostra un gradiente lineare che inizia in alto a sinistra (e va a destra in basso). Si inizia rosso, la transizione al giallo:
Esempio
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left
top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red, yellow); /* Standard syntax */
} Prova tu stesso " con angoli
Se si desidera un maggiore controllo sulla direzione del gradiente, è possibile definire un angolo, al posto delle direzioni predefinite (verso il basso, verso l'alto, a destra, a sinistra, a destra in basso, etc.).
Sintassi
background: linear-gradient( angle , color-stop1 ,
color-stop2 );
L'angolo viene specificato come un angolo tra una linea orizzontale e la linea di sfumatura.
L'esempio seguente mostra come utilizzare gli angoli su gradienti lineari:
Esempio
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(-90deg,
red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg,
red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg,
red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(-90deg,
red, yellow); /* Standard syntax */
} Prova tu stesso " Utilizzo di più interruzioni di colore
L'esempio seguente mostra un gradiente lineare (dall'alto verso il basso) con più interruzioni di colore:
Esempio
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,
yellow, green); /* For Firefox 3.6 to 15 */
background:
linear-gradient(red, yellow, green); /* Standard syntax */
} Prova tu stesso " L'esempio seguente mostra come creare un gradiente lineare (da sinistra a destra) con il colore dell'arcobaleno e del testo:
Esempio
#grad {
background: red; /* For browsers that do not
support gradients */
/* 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 " utilizzando la trasparenza
gradienti CSS3 supportano anche la trasparenza, che può essere usato per creare effetti di dissolvenza.
Per aggiungere la trasparenza, si usa il rgba() la funzione di definire le interruzioni di colore. L'ultimo parametro nel rgba() funzione può essere un valore da 0 a 1, e definisce la trasparenza del colore: 0 indica trasparenza completa, 1 indica colori (senza trasparenza).
L'esempio seguente mostra un gradiente lineare che parte da sinistra. Si inizia completamente trasparente, la transizione a colori rosso:
Esempio
#grad {
background: red; /* For browsers that do not
support gradients */
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 " Ripetizione lineare gradiente
La repeating-linear-gradient() funzione viene utilizzata per ripetere gradienti lineari:
Esempio
Un ripetendo gradiente lineare:
#grad {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} Prova tu stesso " CSS3 radiali gradienti
Un gradiente radiale è definito dal suo centro.
Per creare un gradiente radiale è anche necessario definire almeno due interruzioni di colore.
Sintassi
background: radial-gradient( shape size at position, start-color, ..., last-color );Per impostazione predefinita, la forma è un'ellisse, la dimensione è più lontano angolo, e la posizione è centrale.
Radial Gradient - equidistanti Colore fermate (questa è l'impostazione predefinita)
L'esempio seguente mostra un gradiente radiale con interruzioni di colore equidistanti:
Esempio
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red, yellow, green); /*
Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera
11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /*
For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green);
/* Standard syntax */
} Prova tu stesso " Sfumatura radiale - a differenza Spaced interruzioni di colore
L'esempio seguente mostra un gradiente radiale con interruzioni di colore diverso distanziati:
Esempio
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red 5%,
yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow
15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%,
green 60%); /*
For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow
15%, green 60%);
/* Standard syntax */
} Prova tu stesso " set Forma
Il parametro di forma definisce la forma. Si può prendere il cerchio valore o ellisse. Il valore predefinito è un'ellisse.
L'esempio seguente mostra un gradiente radiale con la forma di un cerchio:
Esempio
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
} Prova tu stesso " L'utilizzo di dimensioni diverse parole chiave
Il parametro size definisce la dimensione del gradiente. Si può prendere quattro valori:
- vicino-side
- più lontano-side
- vicino-angolo
- più lontano angolo
Esempio
Un gradiente radiale con parole chiave diverse dimensioni:
#grad1 {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,
red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
} Prova tu stesso " Ripetizione di una radiale gradiente
La repeating-radial-gradient() funzione viene utilizzata per ripetere gradienti radiali:
Esempio
Un gradiente radiale ripetendo:
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox
3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* Standard syntax */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
} Prova tu stesso " Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 » Esercizio 6» Esercizio 7 »