Gradiente di sfondo CSS | Spiegato

Un colore gradiente è quello composto da due o più tonalità. Nello sviluppo web, i progettisti utilizzano colori diversi nelle applicazioni per renderli visivamente accattivanti. Più specificamente, i gradienti CSS sono una classe unica di immagine che fornisce un cambiamento graduale tra i colori complementari. Questi gradienti sono di tre tipi principali: lineare, radiale e conico. Puoi utilizzarli per aggiungere colori a gradiente agli elementi.

Questo tutorial fornirà una guida dettagliata su quali sono i gradienti CSS.

Quali sono i tipi di gradienti CSS?

I tipi di funzioni del gradiente CSS sono elencati di seguito:

• Lineare-gradient ()
• conico-gradiente ()
• radiale-gradient ()
• ripetutamente lineare-gradiente ()
• ripetutamente cronico-gradiente ()
• ripetuta gradiente-radiale ()

Ogni proprietà sarà discussa in dettaglio con dimostrazioni pratiche.

Metodo 1: come aggiungere il gradiente lineare in CSS?

In CSS, viene creato un gradiente lineare con "Lineare-gradient ()" funzione. Per utilizzarlo, dai un'occhiata al prossimo esempio.

Esempio 1: aggiunta di un semplice gradiente lineare in CSS

In HTML, all'interno dell'elemento corporeo, aggiungi un div con più classi "rettangolo gradiente semplice". Faremo una scatola con contenuti di classe Div su cui applicheremo diverse proprietà del gradiente.

Html

Le due classi menzionate nel codice HTML sono applicate con stili usando CSS.

Stile "rettangolo" di div

.rettangolo
larghezza: 90%;
Altezza: 200px;
Margine: auto;

Qui:

"larghezza" E "altezza"La proprietà è determina la dimensione dell'elemento in verticale e in orizzontale. "margine"La proprietà genera uguale spazio attorno all'elemento.

Stile "Simple-Gradient" Div

.gradiente semplice
Sfondo: gradiente lineare (blu, nero);

Il Div a gradiente semplice viene data la proprietà "sfondo"Con il valore"Lineare-gradient ()" funzione. Questa funzione è fornita con due colori, blu e nero, come parametri.

Salva il file e aprilo nel browser. L'uscita verrà visualizzata come mostrato di seguito:

Esempio 2: aggiunta di gradiente lineare usando gli angoli in CSS

Per controllare la direzione dei colori, gli angoli possono anche essere specificati come segue:

.angolo-gradiente
Sfondo: gradiente lineare (40deg, giallo, rosso);

Produzione

Esempio 3: aggiunta di gradiente lineare usando più di due colori in CSS

Non è limitato all'utilizzo di solo due colori. Come designer, puoi utilizzare tutti i colori che vuoi. Per impostazione predefinita, i colori sono uniformemente distanziati. Ad esempio:

Sfondo: gradiente lineare ( #181818, #8758ff, #EAF290, #5CB8E4, #F2F2F2, #182747);

Produzione

Esempio 4: aggiunta del gradiente lineare specificando le arresti di colore in percentuali in CSS

Qui, i colori specificati con le percentuali iniziano a quel valore specificato:

Sfondo: gradiente lineare (a sinistra, #00F5ff 20px, #FCE700 40%, #FF6D28 60%, #EA047E 2PX);

Produzione

Esempio 5: aggiunta di gradiente lineare per linee dure in CSS

Per fare una linea dura tra i colori, le due o più fermate di colore sono utilizzate nello stesso punto. Nella funzione lineare-gradiente () prima, specificare la direzione, quindi i colori con percentuale:

Sfondo: gradiente lineare (in alto a destra, #00abb3 45%, #3C4048 45%);

Fornendo la stessa posizione ai colori, otteniamo il risultato visualizzato nell'immagine seguente:

Esempio 6: aggiunta di gradiente lineare usando suggerimenti di colore in CSS

Il gradiente passa uniformemente da un colore all'altro. È possibile specificare il suggerimento di colore per spostare il punto medio della transizione. La percentuale è impostata su "50%"In modo che il gradiente passerà al colore dal blu al rosso:

Sfondo: gradiente lineare (blu, 50%, rosso);

Produzione

Metodo 2: come aggiungere il gradiente conico in CSS?

Un gradiente conico specifica le transizioni di colore ruotate attorno a un centro. È progettato utilizzando il "conico-gradiente ()" funzione. Per utilizzarlo, devono essere definiti almeno due colori. Inoltre, per impostazione predefinita, l'angolo è "0"Deg e la posizione è impostata come"centro".

Sintassi

Immagina di sfondo: gradiente conico ([dall'angolo] [in posizione,] colore [gradi], colore [grado], ...);

La funzione conico-gradiente () viene data tre colori come parametri:

Immagina di background: gradiente conico ( #FF5858, #E0144C, #9A1663);

Produzione

Esempio 1: aggiunta di cartoni per torta conic in CSS

La funzione conic-gradiente () ci fornisce la struttura per creare grafici a torta. Per questo, è necessario specificare i colori con gli angoli di inizio e fine. Più specificamente, per creare settori a colori distinti, il valore dell'angolo di avvio del colore successivo deve essere uguale o inferiore al valore dell'angolo di fine del primo colore.

Background: conico-gradiente (blu 50deg, rosso 50deg 120deg, arancione 120deg);

Produzione

Esempio 2: aggiunta di gradiente conico usando gli angoli in CSS

Il gradiente conico è circolare e il centro dell'elemento funge da punto sorgente della fermata del colore. Ci sono da 0 gradi a 360 gradi nell'angolo del gradiente conico:

Immagina di background: gradiente conico (da 70DEG, #F1D4D4, #6A097D);

Si può vedere che il colore ruotato dalla 70DEG:

Metodo 3: come aggiungere il gradiente radiale in CSS?

Un gradiente radiale può essere creato con "radiale-gradient ()" funzione. Questa funzione produce un'immagine che consiste in una transizione graduale tra più colori che vengono utilizzati per irradiarsi dal punto centrale. Potrebbe essere un'ellisse o un cerchio.

Il codice seguente mostra il "sfondo"Proprietà con il valore come funzione di gradiente radiale:

Sfondo: gradiente radiale (cerchio, RGBA (241, 151, 216, 1) 28%, RGBA (148, 187, 233, 1) 59%);

Produzione

Esempio: aggiungere radiali non centrati in CSS

L'esempio seguente mostra come realizzare un gradiente radiale non centrato.

Immagina di background: gradiente radiale (corro più lontano a 60px 90px,
#ff9f30 0%,
#B60C3C 100%);

Produzione

Metodo 4: come aggiungere i gradienti lineari ripetuti in CSS?

La funzione "ripetutamente lineare-gradiente ()"Ha progettato un'immagine lungo i gradienti lineari ripetuti. Prende i parametri come colori, gradi o percentuali.

Sfondo: gradiente di ripetizione lineare (25DEG, #00A8CC, #142850 23.3%);

Produzione

Metodo 5: come aggiungere i gradienti radiali ripetuti in CSS?

IL "ripetuta gradiente-radiale ()"La funzione genera un'immagine costituita da gradienti ripetuti che si irradiano dal centro.

Background: ripetuta gradiente-radiale ( #313131, #CA3E47 30%);

Produzione

Metodo 6: come aggiungere gradienti conici ripetuti in CSS?

IL "ripetutamente cronico-gradiente ()"La funzione produce un'immagine costituita da un gradiente ripetuto. Queste transizioni di colore ruotano attorno a un punto centrale.

Ecco un esempio per dimostrare il gradiente conico ripetuto:

Background: ripetuta clessiente (da 74 gradi all'86% 50%,
#A21232 0DEG 15DEG,
#1A1831 10DEG 21DEG,
#Dece9c 20deg 31DEG);

Produzione

In questo modo, i gradienti di fondo CSS sono utilizzati in CSS.

Conclusione

HTML fornisce molti metodi per rendere i documenti accattivanti e attraenti. Questi metodi includono colori, formattazione del testo, gradienti e altro ancora. I gradienti CSS sono le immagini speciali che mostrano transizioni di colore tra due o più colori. L'elemento di sfondo utilizza principalmente le funzioni del gradiente. Questo post fornirà una guida sul gradiente di fondo CSS.