CSS Gradienti di sfondo


Esempio

I gradienti sono nuovi tipi di immagine, aggiunti in CSS3. Come immagine, le sfumature sono impostate con la proprietà background-image , o con la stenografia dello background .

Esistono due tipi di funzioni sfumate, lineari e radiali. Ogni tipo ha una variante non ripetitiva e una variante ripetitiva:

  • linear-gradient()
  • repeating-linear-gradient()
  • radial-gradient()
  • repeating-radial-gradient()

lineare-gradiente ()

Un linear-gradient ha la seguente sintassi

background: linear-gradient( <direction>?, <color-stop-1>, <color-stop-2>, ...);
Valore Senso
<direction> Potrebbe essere un argomento come to top , to bottom , to right oa to left ; o un angolo come 0deg , 90deg .... L'angolo inizia dall'alto e ruota in senso orario. Può essere specificato in deg , grad , rad o turn . Se omesso, il gradiente scorre dall'alto verso il basso
<color-stop-list> Elenco di colori, opzionalmente seguito ciascuno di una percentuale o lunghezza per visualizzarlo a. Ad esempio, yellow 10% , rgba(0,0,0,.5) 40px , #fff 100% ...

Ad esempio, questo crea un gradiente lineare che parte da destra e passa da rosso a blu

.linear-gradient {
  background: linear-gradient(to left, red, blue); /* you can also use 270deg */
}

Puoi creare un gradiente diagonal dichiarando una posizione di partenza sia orizzontale che verticale.

.diagonal-linear-gradient {
  background: linear-gradient(to left top, red, yellow 10%);
}

È possibile specificare qualsiasi numero di interruzioni di colore in una sfumatura separandole con virgole. I seguenti esempi creeranno una sfumatura con 8 stop di colore

.linear-gradient-rainbow {
  background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)
}

radiale gradiente ()

.radial-gradient-simple {
  background: radial-gradient(red, blue);
}

.radial-gradient {
  background: radial-gradient(circle farthest-corner at top left, red, blue);
}
Valore Senso
circle Forma del gradiente I valori sono circle o ellipse , il valore predefinito è l' ellipse .
farthest-corner Parole chiave che descrivono quanto deve essere grande la forma finale. I valori sono il closest-side farthest-side closest-corner , il farthest-side closest-corner farthest-corner , l' closest-corner farthest-corner closest-corner farthest-corner
top left Imposta la posizione del centro del gradiente, allo stesso modo background-position .

Ripetendo le sfumature

La ripetizione delle funzioni del gradiente assume gli stessi argomenti degli esempi precedenti, ma affianca il gradiente sullo sfondo dell'elemento.

.bullseye {
  background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.warning {
  background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}
Valore Senso
-45deg Unità angolare . L'angolo inizia dall'alto e ruota in senso orario. Può essere specificato in deg , grad , rad o turn .
to left Direzione del gradiente, il valore predefinito è to bottom . Sintassi: to [y-axis(top OR bottom)] [x-axis(left OR right)] cioè to top right
yellow 10% Colore, opzionalmente seguito da una percentuale o lunghezza per visualizzarlo. Ripetuto due o più volte.

Si noti che possono essere usati i codici colore HEX, RGB, RGBa, HSL e HSLa al posto dei nomi dei colori. I nomi dei colori sono stati utilizzati per motivi illustrativi. Si noti inoltre che la sintassi del gradiente radiale è molto più complessa del gradiente lineare e qui viene mostrata una versione semplificata. Per una spiegazione completa e specifiche, vedere i documenti MDN