Funzione radial-gradient
La funzione radial-gradient imposta un gradiente
radiale. Questa funzione viene applicata alle proprietà che
impostano un'immagine di sfondo: background,
background-image
o un'immagine del bordo: border-image,
background-image-source.
Sintassi
selettore {
background: radial-gradient([forma tipo posizione], colore1 dimensione1, colore2 dimensione2...);
}
Valori
| Valore | Descrizione |
|---|---|
| forma |
Valori accettati:
ellipse gradiente ellittico (predefinito),
circle gradiente circolare.
|
| tipo |
Imposta l'estensione del gradiente.
Valori accettati:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| posizione |
Dopo la parola chiave at
viene specificata una posizione in qualsiasi unità di misura per le dimensioni
o utilizzando le parole chiave top, bottom,
left, right, center
in varie combinazioni.
|
| colore1 | Colore iniziale del gradiente in qualsiasi unità di misura per il colore. |
| colore2 | Colore finale del gradiente in qualsiasi unità di misura per il colore. |
| dimensione | Imposta l'estensione di un determinato colore del gradiente in qualsiasi unità di misura per le dimensioni. |
Valori per il tipo
| Valore | Descrizione |
|---|---|
closest-side |
La forma del gradiente coincide con il lato più vicino ad esso del blocco. |
closest-corner |
La forma del gradiente viene calcolata in base alla distanza dall'angolo più vicino del blocco. |
farthest-side |
Il gradiente si estende fino al lato più lontano del blocco. |
farthest-corner |
La forma del gradiente viene calcolata in base alla distanza dall'angolo più lontano del blocco. |
Osservazione
Il tipo e la forma possono essere scambiati, mentre la posizione deve essere alla fine del primo parametro. Il tipo di gradiente e la sua dimensione non funzionano insieme (logicamente, sono in conflitto). Vince la dimensione.
Esempio . L'opzione più semplice
Impostiamo semplicemente il colore iniziale e finale:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
Esempio . Aggiungiamo la posizione
Impostiamo la posizione del centro:
30px - margine sinistro, 100px - margine superiore:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
Esempio . Posizione in percentuale
Impostiamo la posizione del centro in percentuale:
30% - margine sinistro, 50% - margine superiore:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
Esempio . Posizione con parola chiave
Possono essere utilizzate le parole chiave
top, bottom, left,
right, center in varie
combinazioni. Posizioniamo, ad esempio, il gradiente
a destra al centro:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
Esempio . Dimensione del gradiente
In questo caso il gradiente funzionerà così:
da 0px a 20px ci sarà colore
rosso puro, da 20px a 60px - gradiente
da rosso a blu, dopo 60px - blu
puro:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Esempio . Più colori in sequenza
In questo caso il gradiente funzionerà così:
da 0px a 20px ci sarà colore
rosso puro, da 20px a 40px
ci sarà colore blu puro, da 40px
a 60px - gradiente da blu a verde,
dopo 60px - verde puro:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
Esempio . Dimensione + posizione
Impostiamo contemporaneamente le dimensioni per diversi colori e la posizione del centro del gradiente:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
Esempio . Forma del gradiente
La forma del gradiente è impostata dal primo parametro
e può accettare 2 valori: circle
(gradiente circolare) o ellipse (gradiente ellittico,
predefinito). Perché fino ad ora
non abbiamo visto gradienti ellittici, sebbene
sia impostato per impostazione predefinita? Perché fino ad ora
la forma dei blocchi era quadrata. Se cambiamo
la forma in rettangolare, allora vedremo un gradiente ellittico:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Esempio . Gradiente circolare
Creiamo un gradiente circolare in un blocco
rettangolare. Per fare questo, impostiamo la forma del gradiente
come primo parametro utilizzando la parola chiave
circle:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Esempio . Aggiungiamo la posizione
Aggiungiamo anche la posizione del gradiente al codice precedente:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
Esempio . Tipo farthest-corner + circle
La forma del gradiente viene calcolata in base alla distanza dall'angolo più lontano del blocco:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Esempio . Tipo farthest-corner + ellipse
La forma del gradiente viene calcolata in base alla distanza dall'angolo più lontano del blocco:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Esempio . Tipo farthest-side + circle
Il gradiente si estende fino al lato più lontano del blocco:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Esempio . Tipo farthest-side + ellipse
Il gradiente si estende fino al lato più lontano del blocco:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Esempio . Tipo closest-corner + circle
La forma del gradiente viene calcolata in base alla distanza dall'angolo più vicino del blocco:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Esempio . Tipo closest-corner + ellipse
La forma del gradiente viene calcolata in base alla distanza dall'angolo più vicino del blocco:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Esempio . Tipo closest-side + circle
La forma del gradiente coincide con il lato più vicino ad esso del blocco:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Esempio . Tipo closest-side + ellipse
La forma del gradiente coincide con il lato più vicino ad esso del blocco:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
Vedi anche
-
la funzione
linear-gradient,
che crea un gradiente lineare -
la funzione
repeating-linear-gradient,
che crea un gradiente lineare ripetuto -
la funzione
repeating-radial-gradient,
che crea un gradiente radiale ripetuto
