渐变(Gradients)CSS3

La funzione di gradazione in CSS3 ti permette di creare una transizione da un colore a un altro senza utilizzare immagini.

Uso dei gradienti in CSS3

La funzione di gradazione in CSS3 fornisce una soluzione flessibile per generare transizioni morbide tra due o più colori. Per raggiungere questo effetto, dobbiamo utilizzare immagini. L'uso di gradienti in CSS3 può ridurre il tempo di download e risparmiare l'uso della larghezza di banda. Gli elementi di gradazione possono essere ingranditi o ridotti in proporzione a qualsiasi livello senza ridurre la qualità, e il rendering sarà più veloce perché generato dal browser.

Ci sono due stili di gradazione:Lineare (linear) eRadiale(radial).

Creazione di gradienti lineari in CSS3 (linear)

Per creare una gradazione lineare, è necessario definire almeno due colori di riferimento. Ma per creare un effetto di gradazione più complesso, è possibile definire più colori di riferimento. I colori di riferimento sono i colori che si desidera presentare con una transizione morbida. È anche possibile impostare il punto di partenza e la direzione (o l'angolo) dell'applicazione della gradazione. La sintassi di base per creare una gradazione lineare in CSS3 può essere fornita nel modo seguente:

linear-gradient(angle, color-stop1, color-stop2, ...)

Gradazione lineare - da alto a basso

Esempio seguente creerà una gradazione lineare da alto a basso. Questo è il valore predefinito.

.gradient {
　　　　/* Fallback for browsers that don't support gradients */
　　　　background: red;
　　　　/* Per Safari 5.1 a 6.0 */
　　　　background: -webkit-linear-gradient(red, yellow);
　　　　/* Per Internet Explorer 10 */
　　　　background: -ms-linear-gradient(red, yellow);
　　　　
　　　　background: linear-gradient(red, yellow);
}

Gradazione lineare - da sinistra a destra

Esempio seguente creerà una gradazione lineare da sinistra a destra.

.gradient {
　　　　/* Fallback for browsers that don't support gradients */
　　　　background: red;
　　　　/* Per Safari 5.1 a 6.0 */
　　　　background: -webkit-linear-gradient(left, red, yellow);
　　　　/* Per Internet Explorer 10 */
　　　　background: -ms-linear-gradient(left, red, yellow);
　　　　
　　　　background: linear-gradient(to right, red, yellow);
}

Gradiente lineare - diagonale

Puoi anche creare gradienti lungo le direzioni diagonali. L'esempio seguente creerà un gradiente lineare dall'angolo in basso a sinistra all'angolo in alto a destra dell'elemento.

.gradient {
　　　　/* Fallback for browsers that don't support gradients */
　　　　background: red;
　　　　/* Per Safari 5.1 a 6.0 */
　　　　background: -webkit-linear-gradient(bottom left, red, yellow);
　　　　/* Per Internet Explorer 10 */
　　　　background: -ms-linear-gradient(bottom left, red, yellow);
　　　　
　　　　background: linear-gradient(to top right, red, yellow);
}

Impostazione della direzione del gradiente lineare utilizzando angoli

Se si desidera specificare ulteriormente la direzione del gradiente, è possibile impostare l'angolo invece di utilizzare parole chiave predefinite. L'angolo 0deg crea un gradiente dall'alto verso il basso, mentre gli angoli positivi rappresentano una rotazione oraria, il che significa che l'angolo 90deg crea un gradiente dall'alto verso destra. La sintassi di base per creare gradienti lineari utilizzando angoli è la seguente:

linear-gradient(angle, color-stop1, color-stop2, ...)

L'esempio seguente creerà un gradiente lineare dall'angolo sinistro in direzione destra.

.gradient {
　　　　/* Fallback for browsers that don't support gradients */
　　　　background: red;
　　　　/* Per Safari 5.1 a 6.0 */
　　　　background: -webkit-linear-gradient(0deg, red, yellow);
　　　　/* Per Internet Explorer 10 */
　　　　background: -ms-linear-gradient(0deg, red, yellow);
　　　　
　　　　background: linear-gradient(90deg, red, yellow);
}

Creazione di gradienti lineari utilizzando più colori di riferimento

Puoi anche creare gradienti di più di due colori. L'esempio seguente ti mostrerà come creare gradienti lineari utilizzando più colori di riferimento. Tutti i colori sono distribuiti uniformemente.

.gradient {
　　　　/* Fallback for browsers that don't support gradients */
　　　　background: red;
　　　　/* Per Safari 5.1 a 6.0 */
　　　　background: -webkit-linear-gradient(red, yellow, lime);
　　　　/* Per Internet Explorer 10 */
　　　　background: -ms-linear-gradient(red, yellow, lime);
　　　　
　　　　background: linear-gradient(red, yellow, lime);
}

Impostazione del colore di riferimento della posizione

I colori di riferimento sono punti lungo la linea di trasformazione, che avranno un colore specifico in quella posizione. La posizione dei colori di riferimento può essere specificata come percentuale o lunghezza assoluta. Puoi specificare più colori di riferimento di necessità, per ottenere l'effetto desiderato.

.gradient {
　　　　/* Fallback for browsers that don't support gradients */
　　　　background: red;
　　　　/* Per Safari 5.1 a 6.0 */
　　　　background: -webkit-linear-gradient(red, yellow 30%, lime 60%);
　　　　/* Per Internet Explorer 10 */
　　　　background: -ms-linear-gradient(red, yellow 30%, lime 60%);
　　　　
　　　　background: -webkit-linear-gradient(red, yellow 30%, lime 60%);
}

Gradiente lineare ripetuto

Puoi utilizzare la funzione repeating-linear-gradient() per ripetere il gradiente lineare.

.gradient {
　　　　/* Fallback for browsers that don't support gradients */
　　　　background: white;
　　　　/* Per Safari 5.1 a 6.0 */
　　　　background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
　　　　/* Per Internet Explorer 10 */
　　　　background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
　　　　
　　　　background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
}

Crea il gradiente radiale CSS3 (radial)

Nel gradiente radiale, i colori emergono da un singolo punto e si diffondono in modo uniforme in forma circolare o ellittica, diversamente dal gradiente lineare che cambia da un colore a un altro in una singola direzione. La sintassi di base per creare un gradiente radiale può essere fornita nel modo seguente:

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

I parametri della funzione radial-gradient() hanno il seguente significato:

• position — Specifica il punto di partenza del gradiente, che può essere specificato in unità (px, em o percentuale) o tramite parole chiave (left, bottom, ecc.).

• shape — Specifica la forma finale della forma del gradiente. Può essere circolare o ellittica.

• size — Specifica la dimensione della forma finale del gradiente. Il valore predefinito è farthest-side.

Esempio seguente mostrerà la creazione di gradienti radiali con etichette di colore uniformemente spaziati.

.gradient {
　　　　/* Fallback for browsers that don't support gradients */
　　　　background: red;
　　　　/* Per Safari 5.1 a 6.0 */
　　　　background: -webkit-radial-gradient(red, yellow, lime);
　　　　/* Per Internet Explorer 10 */
　　　　background: -ms-radial-gradient(red, yellow, lime);
　　　　
　　　　background: radial-gradient(red, yellow, lime);
}

Impostazione della forma della progressione radiale

Il parametro shape della funzione radial-gradient() viene utilizzato per definire la forma finale della progressione radiale. Può assumere i valori circle o ellipse. Ecco un esempio:

.gradient {
　　　　/* Fallback for browsers that don't support gradients */
　　　　background: red;
　　　　/* Per Safari 5.1 a 6.0 */
　　　　background: -webkit-radial-gradient(circle, red, yellow, lime);
　　　　/* Per Internet Explorer 10 */
　　　　background: -ms-radial-gradient(circle, red, yellow, lime);
　　　　
　　　　background: radial-gradient(circle, red, yellow, lime);
}

Impostazione della dimensione della progressione radiale

Il parametro size della funzione radial-gradient() viene utilizzato per definire la dimensione finale della progressione. La dimensione può essere impostata con unità o parole chiave: closest-side, farthest-side, closest-corner, farthest-corner.

.gradient {
　　　　/* Fallback for browsers that don't support gradients */
　　　　background: red;
　　　　/* Per Safari 5.1 a 6.0 */
　　　　background: -webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
　　　　/* Per Internet Explorer 10 */
　　　　background: -ms-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
　　　　
　　　　background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime);
}

Progressione radiale ripetuta

È anche possibile utilizzare la funzione repeating-radial-gradient() per ripetere la progressione radiale.

.gradient {
　　　　/* Fallback for browsers that don't support gradients */
　　　　background: white;
　　　　/* Per Safari 5.1 a 6.0 */
　　　　background: -webkit-repeating-radial-gradient(black, white 10%, lime 20%);
　　　　/* Per Internet Explorer 10 */
　　　　background: -ms-repeating-radial-gradient(black, white 10%, lime 20%);
　　　　
　　　　background: repeating-radial-gradient(black, white 10%, lime 20%);
}

CSS3 Opacità e Gradient

CSS3 Gradient supporta ancheOpacità.staccatoBackground multipliin questo caso puoi usarlo per creare un effetto di sfumatura per l'immagine di sfondo.

.gradient {
　　　　/* Fallback for browsers that don't support gradients */
　　　　background: url("images/sky.jpg");
　　　　/* Per Safari 5.1 a 6.0 */
　　　　background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
　　　　/* Per Internet Explorer 10 */
　　　　background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
　　　　
　　　　background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
}