I gradienti in CSS hanno spiegato
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.
Immagina di sfondo: gradiente lineare (direzione, color1, color2, ...);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:
Immagina di sfondo: gradiente conico (dall'angolo in posizione, color1La sintassi sopra è descritta di seguito,
- IL "dall'angolo"Definisce la rotazione del gradiente in una direzione in senso orario e"in posizione"Definisce l'inizio del gradiente conico.
- IL colore Definisce il colore e la condizione di arresto per quel colore.
- IL "Da angolo", "in posizione" e sono parametri opzionali
Esempio
L'esempio seguente dimostra come è possibile creare un gradiente conico
Html
Gradiente conico
CSS
Nel codice sopra, viene utilizzata la funzione conic-gradiente () che crea un gradiente avente verde, giallo e rosso.
Produzione
Poiché vengono utilizzati i valori predefiniti per i parametri dell'angolo, quindi il gradiente è iniziato dal centro con l'angolo di rotazione di 0 gradi.
Conclusione
Un gradiente è un'immagine con effetti di transizione o solido ed è creata con l'aiuto di CSS. Un gradiente può essere creato con varie funzionalità e tipi come il gradiente lineare, il gradiente radiale o il gradiente conico. Questo articolo dimostra il funzionamento e l'uso del gradiente in CSS. Il gradiente lineare crea un effetto gradiente in una singola direzione mentre il radiale e la conica possono essere utilizzati per gli effetti rotativi.