Un gradiente si riferisce a un'immagine con effetti di transizione e un gradiente può essere usato ovunque come le immagini. I gradienti sono creati con l'aiuto di CSS e si offre di creare gradienti con proprietà estese. Ad esempio, un gradiente potrebbe essere lineare, radiale o conico. Ogni tipo di gradiente è assistito dalla rispettiva funzione.

In questo articolo, abbiamo fornito una visione dei gradienti in CSS e sono previsti i seguenti risultati di apprendimento.

• Tipi di gradienti in CSS
• funzione lineare-gradiente ()
• funzione radiale-gradient ()
• funzione conica-gradiente ()

Tipi di gradiente in CSS

Il gradiente può essere diviso in tre categorie, lineari, radiali e conic. Le sezioni imminenti presenteranno le basi di ogni tipo di gradiente e come vengono utilizzate in CSS.

Gradiente lineare

Il gradiente lineare può essere applicato per ottenere l'effetto di transizione in una dimensione lineare (una direzione alla volta).

Come utilizzare la funzione lineare-gradiente ()

La funzione lineare-gradiente () consente di creare un gradiente lineare con vari effetti.

IL direzione del gradiente lineare può accettare i seguenti valori

a destra: usato per mostrare il gradiente dalla direzione sinistra a destra

a sinistra: per mostrare il gradiente da destra a sinistra

in basso (per impostazione predefinita): Verso il fondo

In cima: mostra l'effetto gradiente dal basso verso l'alto

Inoltre, l'effetto del gradiente lineare può essere applicato in diagonale utilizzando i seguenti valori del direzione parametro.

In basso a destra: Il gradiente inizierà dall'alto sinistra e si sporge verso in basso a destra

in basso a sinistra: Il gradiente inizia dall'angolo in alto a destra verso il basso a sinistra

In cima a destra: Inizia dall'angolo in basso a sinistra verso l'alto a destra

In alto a sinistra: Dal basso a destra ad in alto a sinistra

Esempio

Il seguente codice pratichi l'uso del gradiente lineare su un elemento HTML.

Html

Gradiente lineare

Il codice sopra crea un e un

elemento all'interno di quel div.

CSS

Il codice sopra utilizza un gradiente lineare con i seguenti valori

• La direzione è impostata su “da sinistra a destra"
• Il valore di Color1 e Color2 è impostato su viola e Luceeagreen rispettivamente

Produzione

Poiché la direzione del gradiente era da sinistra a destra, quindi il viola Il colore inizia da sinistra mentre il Luceeagreencorcor prende il via da destra.

Gradiente radiale

Come mostra il nome, il gradiente radiale viene generato dal punto centrale dell'immagine. L'effetto di transizione può essere generato a forma di un cerchio o un'eclissi.

Come utilizzare la funzione radiale-gradiente ()

Un gradiente radiale può essere creato seguendo la sintassi fornita di seguito.

Immagina di sfondo: gradiente radiale (dimensione della forma in posizione, color1, color2…);

Nella sintassi sopra,

• IL forma (L'impostazione predefinita è un'ellisse) potrebbe essere un'ellisse o un cerchio
• IL misurare (L'impostazione predefinita è più lontana) può accettare il corro più lontano/più lontano, il lato più vicino/più vicino.
• IL pendenza inizierà da Color1 (al centro a forma di eclissi o forma del cerchio) seguito da Color2 e così via.

Esempio

Il codice scritto di seguito mostra la creazione del gradiente radiale.

Html

Gradiente radiale

CSS

Il CSS sopra crea un gradiere radiale con color1 = "verde", color2 = "giallo" e color3 = "rosso".

Produzione

Dall'output si osserva che il gradiente è iniziato con il colore verde, circondato dal giallo, e il rosso è alla fine.

Gradiente conico

Il gradiente conico viene utilizzato per creare un gradiente in modo tale che ogni colore inizi e ruota attorno al centro. Sono simili a un gradiente radiale, ma i colori sono fermati sul bordo della forma mentre il colore in gradiente radiale si ferma

Come usare il gradiente conico

Il gradiente conico può essere creato seguendo la sintassi fornita di seguito: