Un foglio di stile CSS descrive come vengono presentate le pagine Web, compresi i loro colori, layout e caratteri. Ci sono molte proprietà che vengono utilizzate per creare attraenti pagine Web, come colore, sfondo, immagine di sfondo, gradiente e molti altri. Più specificamente, i gradienti vengono utilizzati per aggiungere più colori allo sfondo.

In questo articolo, discuteremo dei gradienti CSS. Quindi iniziamo!

Quali sono i gradienti CSS?

In CSS, il “pendenza"Ti consente di visualizzare senza problemi la transizione tra colori diversi. Puoi anche visualizzare colori diversi contemporaneamente per migliorare l'aspetto degli elementi HTML. Esistono tre tipi di gradienti che sono:

• Gradiente lineare
• Gradiente radiale
• Gradiente conico

Ora esploreremo ciascuno dei tipi di gradiente menzionati uno per uno! A tale scopo, prima, creeremo un div in HTML e poi applicheremo un "pendenza"Ad esso.

Esempio

In HTML, creeremo un contenitore o un div con il nome di classe "div”E all'interno del""Tag, aggiungi una voce

.

Html

Pendenza

Ora ci sposteremo sul file CSS e useremo "div"Per accedere al contenitore creato in HTML e impostare l'altezza del Div come"200px". Dopodiché, imposta il colore dell'intestazione come "RGB (1, 32, 4)"E la dimensione del carattere come"35px". Successivamente, aggiungi il bordo attorno al Div, larghezza come "5px", Stile come"cresta”, E colore come"RGB (0, 0, 0)".

CSS

div
Altezza: 200px;
Colore: RGB (1, 32, 4);
Font-size: 35px;
Bordo: 5px Ridge RGB (0, 0, 0);

Utilizzando il codice sopra, si ottiene il seguente output:

Ora applicheremo i tipi di gradiente nel div.

Quali sono i gradienti lineari CSS?

Per generare un gradiente lineare, il "Lineare-gradient ()"La funzione del CSS viene utilizzata come valore del"immagine di sfondo" O "sfondo" proprietà. Con questa funzione, è possibile creare un'immagine composta da una progressione simile a una linea di colori diversi. Esistono vari tipi di gradienti lineari, come ripetuti gradienti lineari, gradienti da sinistra a destra e gradienti da destra a sinistra.

Sintassi

La sintassi del "Lineare-gradient ()"La funzione è:

Immagina di sfondo: gradiente lineare (direzione, color-1, color-2,…);

Qui, il "direzione"Il parametro viene utilizzato per impostare la direzione del gradiente lineare da cui inizierà la transizione come in alto, a destra, a sinistra e in basso. Puoi aggiungere più colori a questa funzione.

Come continuazione dell'esempio precedente, applicheremo un semplice "Lineare-gradient ()"Funzione per il div.

Esempio

Qui useremo il "Lineare-gradient ()Funzione "nella"immagine di sfondo"Proprietà e aggiungere direzione come"in cima"; Questa è la direzione predefinita della funzione. Successivamente, aggiungeremo tre colori come "RGB (0, 255, 213)","RGB (187, 255, 0)", E "RGB (51, 255, 0)"Per il nostro gradiente:

div
..
Immagina di sfondo: gradiente lineare (in alto, RGB (0, 255, 213), RGB (187, 255, 0), RGB (51, 255, 0));

Nell'immagine sotto fornita, puoi vedere che viene generato un gradiente lineare:

Ora, passa al tipo successivo in cui cambieremo la direzione del gradiente lineare come "a destra".

Gradiente lineare a destra

Per generare un gradiente lineare a destra, cambieremo la direzione da "in cima" A " a destra"E imposta cinque colori diversi come"RGB (32, 42, 134)","RGB (202, 231, 255)","RGB (0, 255, 170)","RGB (85, 250, 79)", E "RGB (128, 243, 138)":

div
..
Immagina di sfondo: gradiente lineare (a destra, RGB (32, 42, 134), RGB (202, 231, 255), RGB (0, 255, 170), RGB (85, 250, 79), RGB (128 , 243, 138));

Nell'output di seguito, puoi vedere che il gradiente lineare è creato nella giusta direzione:

Successivamente, cambieremo la direzione del gradiente lineare a "a sinistra".

Gradiente lineare a sinistra

Qui, cambieremo la direzione in "a sinistra". I colori saranno usati come nell'esempio sopra:

div
..
Immagina di sfondo: gradiente lineare (a sinistra, RGB (32, 42, 134), RGB (202, 231, 255), RGB (0, 255, 170), RGB (85, 250, 79), RGB (128 , 243, 138));

Dall'output puoi vedere che il gradiente lineare a sinistra viene creato perfettamente:

Puoi anche creare una transizione ripetuta dei colori. Quindi, facciamolo!

Ripetendo gradienti lineari

Per creare gradienti lineari ripetuti, il "REPLEDING-LINEAAR-BADIENTS ()"La funzione viene utilizzata. In questo tipo di gradiente lineare, la sequenza del colore viene ripetuta in base al valore dato.

Sintassi

La sintassi del "REPLEDING-LINEAAR-BADIENTS ()" È:

Immagina di sfondo: gradiente ripetuto-lineare (lunghezza del colore, lunghezza del colore-lunghezza del colore, ...);

Nella sintassi sopra, "lunghezza del colore"Viene utilizzato per impostare la distanza tra le fermate del primo e dell'ultimo colore che determina la lunghezza del gradiente che si ripete.

Continuiamo con l'esempio precedente.

Esempio

Qui, imposteremo il colore del testo come "bianco"E aggiungi il valore dei colori del gradiente in"REPLEDING-LINEAAR-BADIENTS ()"Funzioni. Oltre ad ogni colore, specificheremo il "Lunghezza di arresto del colore" COME "0px","20px", E "40px". Viene usato per ripetere i colori dopo la lunghezza data:

div
..
colore bianco;
Immagina di sfondo: gradiente ripetuto-lineare (RGB (122, 12, 145) 0px, RGB (171, 76, 209) 20px, RGB (13, 0, 128) 40px);

Nota: Senza il "lunghezza del colore"Valore, il gradiente lineare non può essere impostato per la ripetizione.

Nell'immagine sotto fornita, puoi vedere che il gradiente lineare viene ripetuto:

Quali sono i gradienti radiali CSS?

Un gradiente radiale è una transizione di colori in cui la transizione inizia dall'origine dell'elemento. Per creare un gradiente radiale, il "radiale-gradient ()"La funzione viene utilizzata in cui è possibile specificare la forma della transizione e dei colori.

Sintassi

La sintassi del "radiale-gradient ()"La funzione è:

Immagina di sfondo: gradiente radiale (forma,-colore,…, ultimo colore);

Puoi impostare la forma del "radiale-gradient ()"Funzione come"ellisse" O "cerchio".

Esempio

Qui continueremo l'esempio precedente e useremo il "radiale-gradient ()"Funzione per impostare la forma della transizione come"ellisse". Successivamente, aggiungeremo cinque colori diversi come "RGB (17, 0, 255)","RGB (0, 174, 255)","RGB (109, 250, 255)","RGB (0, 190, 79)", E "RGB (2, 70, 2)":

div
..
Immagina di background: gradiente radiale (Ellisse, RGB (17, 0, 255), RGB (0, 174, 255), RGB (109, 250, 255), RGB (0, 190, 79), RGB (2, 70, 2));

L'immagine sotto fornita indica che la transizione del colore è iniziata con successo dall'origine dell'elemento:

Ora passeremo all'ultimo tipo di gradiente.

Quali sono i gradienti conici CSS?

IL "conico-gradiente ()"La funzione viene utilizzata per creare un gradiente conico. È un gradiente in cui le transizioni di colori sono ruotate attorno a un punto centrale. Per creare un gradiente conico, è necessario definire almeno due colori.

Sintassi

La sintassi del "conico-gradiente ()"La funzione è:

Immagina di sfondo: gradiente conico (colore, colore, ... colore);

È possibile impostare più colori nella funzione di "conico-gradiente ()".

Passiamo all'esempio in cui creeremo il gradiente conico.

Esempio

Ora imposteremo il colore dell'intestazione come "bianco". Successivamente, usa il “conico-gradiente ()"Funzionare e creare un gradiente conico arcobaleno aggiungendo colori arcobaleno, come"rosso","arancia","giallo","verde","blu","indaco", E "Viola":

div
colore bianco;
Immagina di sfondo: gradiente conico (rosso, arancione, giallo, verde, blu, indaco, viola);

Ecco il risultato che dimostra che il gradiente conico è stato creato con successo:

Questo è tutto! Abbiamo spiegato in dettaglio il gradiente CSS.

Conclusione

Il CSS "pendenza"Consente di visualizzare transizioni fluide tra due o più colori specificati. Esistono tre tipi di funzioni di gradiente utilizzate come valore di "sfondo"Proprietà in CSS, come"Lineare-gradient ()","radiale-gradient ()", E "conico-gradiente ()". In questo manuale, abbiamo spiegato il gradiente CSS e i suoi tipi in dettaglio.