Dalla sintassi si osserva che la funzione lineare-gradiente () dipende dal parametro di direzione e dai colori utilizzati.

Il parametro di direzione definisce il punto di partenza e accetta i seguenti valori:

• "To Top" o "0Deg": inizia dal basso verso la parte superiore
• "A destra" o "90DEG": Il gradiente inizia da sinistra verso il lato destro
• "In basso" o "180DEG": da cima a fondo
• "A sinistra" o "270DEG": inizia dal lato destro verso il lato sinistro

I parametri sopra indicati hanno equivalenza con gli angoli. Ad esempio, puoi definire anche l'inizio del gradiente con l'aiuto degli angoli. L'equivalenza di angoli e lati è descritta come: "ad top" = "0deg", "a destra" = "90deg", "su basso" = "180DEG" e "a sinistra" = "270Deg".

Esempio 1: gradiente lineare con parametri predefiniti

Per praticare il gradiente lineare a livello di base, abbiamo usato il seguente codice.

Html

Gradiente lineare

CSS

Nel codice sopra, il parametro di direzione della funzione del gradiente lineare è impostato sul valore predefinito. Dove il gradiente inizierebbe dal colore verde e passerà verso il colore rosso.

Produzione

Dall'output, si osserva che la direzione predefinita della funzione del gradiente lineare è dall'alto verso il basso.

Esempio 2: un gradiente lineare personalizzato

Questo esempio dimostra la creazione di un gradiente con valori personalizzati di direzione e angoli di colore.

Html

Gradiente lineare

CSS

Il codice CSS sopra è descritto come,

• a destra: mostra la direzione del gradiente da sinistra a destra
• verde 10%: mostra che l'effetto di transizione inizierà dal 10% dell'intera durata del gradiente
• rosso 50%: Ciò dimostra che l'effetto di transizione andrà fino al 50% della lunghezza del gradiente

Produzione

L'uscita mostra che il verde solido continua fino alla lunghezza del 10%. La transizione inizia dal 10% e continua fino al 50% della lunghezza. Dopo il 50% inizia il colore rosso solido che termina con la lunghezza del gradiente.

Esempio 3: un gradiente lineare ripetitivo

La funzione di gradiente () ripetutamente lineare può essere utilizzata per creare un gradiente ripetitivo.

Html

Un gradiente lineare ripetuto

CSS

Il codice CSS sopra è descritto come,

• La direzione sarebbe da sinistra a destra poiché l'angolo è 90DEG
• Il gradiente sarebbe partito dal rosso seguito da verde e verde marino chiaro. Questi colori verranno ripetuti fino alla lunghezza del gradiente

Nota: Devi definire la percentuale con almeno l'ultimo colore. Altrimenti, il modello non si ripeterà.

Produzione

L'output sopra mostra che il gradiente con i colori rosso, verde e delle luci viene ripetuto più volte fino a tutta la lunghezza del gradiente.

Conclusione

Un gradiente lineare in CSS può essere creato utilizzando la funzione di gradiente lineare () di CSS. Questa funzione accetta più parametri che definiscono la direzione del gradiente e il colore utilizzato. Questo articolo fornisce una guida descrittiva sui gradienti lineari in CSS. Seguendo questo post, saresti in grado di ottenere il concetto di base di gradienti lineari in CSS con esempi che dimostrano la creazione di gradienti lineari in CSS. Inoltre, è possibile esercitare una funzione di gradiente () ripetutamente lineare per creare un gradiente ripetitivo.