Gradienti conici in CSS

Cascading Style Sheets (CSS) ti consente di aggiungere stile alle tue pagine Web in numerosi modi fornendo una gamma enorme di proprietà e metodi. Oltre a questi, CSS fornisce anche gradienti che consentono la visualizzazione di una transizione uniforme di vari colori.

Ci sono un totale di tre gradienti specificati in CSS, gradiente lineare, gradiente radiale e gradiente conico. In questo tutorial, discuteremo dei gradienti conic e impareremo come usarli.

Cos'è un gradiente conico in CSS

In CSS, un gradiente conico è una funzione integrata che consente di aggiungere gradienti come immagini di sfondo con transizioni di colore attorno a un punto medio.

Sintassi

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

È necessario specificare almeno due colori per far funzionare il centesimo conico (), inoltre, se non si specifica il grado di colore, i colori si diffondono uniformemente intorno al punto medio.

Esploriamo alcuni esempi.

Esempio 1

L'esempio seguente dimostra il funzionamento del gradiente conico () usando tre colori.

Html

Qui stiamo semplicemente creando un contenitore div per illustrare il funzionamento dei gradienti conici.

CSS

.div
Altezza: 180px;
larghezza: 180px;
Immagina di sfondo: gradiente conico (rosso, verde, blu);

L'altezza e la larghezza del div sono impostate su 180px e stiamo assegnando tre colori di base alla funzione conic-gradiente (). Poiché non è specificato nessun grado di colori, quindi questi colori si diffondono uniformemente attraverso il punto medio del contenitore Div.

Produzione

Un gradiente conico con tre colori.

Esempio 2

L'esempio seguente dimostra il funzionamento del gradiente conico () usando quattro colori.

CSS

.div
Altezza: 180px;
larghezza: 180px;
Immagina di sfondo: gradiente conico (rosa, viola, verde, giallo);

Qui abbiamo assegnato quattro colori alla funzione conic-gradiente ().

Produzione

Un gradiente conico con quattro colori.

Ora che abbiamo una buona comprensione del concetto, esploriamo come aggiungere gradi ai gradienti conici in CSS con l'aiuto di alcuni esempi.

Esempio 3: come aggiungere gradi al gradiente conico

L'esempio seguente dimostra il modo in cui è possibile specificare i gradi insieme ai colori del gradiente conico.

CSS

.div
Immagina di sfondo: gradiente conico (rosa 45DEG, viola 90DEG, giallo 230DEG);

Nel codice sopra, stiamo specificando tre colori insieme al grado per ogni colore.

Produzione

Un gradiente conico con gradi di colore specificati.

Esempio 4: come realizzare grafici a torta usando gradienti conic

Ai fini di creare un grafico a torta, impostare innanzitutto il raggio del bordo del contenitore Div al 50% insieme a una certa altezza e larghezza.

CSS

.div
Altezza: 180px;
larghezza: 180px;
raggio di frontiera: 50%;
Immagina di sfondo: gradiente conico (rosso, verde, blu);

Il raggio di confine dell'elemento Div è stato impostato al 50%.

Produzione

Una forma simile a una torta arrotondata è stata generata con successo.

Ora è possibile creare un cartello a torta specificando la gamma di gradi di colore nella funzione conico-gradiente () come mostrato nello snippet del codice CSS di seguito:

CSS

.div
Altezza: 180px;
larghezza: 180px;
raggio di frontiera: 50%;
Immagina di background: gradiente conico (rosso 0deg, 90deg rosso,
Green 90Deg, Green 180Deg,
Blue 180Deg, blu 270deg,
giallo 270deg, giallo 360DEG);

Nel codice sopra, abbiamo specificato quattro colori rosso, verde, blu e giallo. Ora per ogni colore, è stato specificato un grado orizzontale e verticale coprendo così l'intero 360 gradi di un cerchio.

Produzione

Un cartom per la torta con gradi di colore definiti.

Esempio 5: come aggiungere un gradiente conico da un angolo specifico

Ai fini dell'aggiunta di gradienti conici da un angolo particolare, è necessario specificare tale angolo nella funzione conico-gradiente (). Ecco come lo fai.

CSS

.div
Altezza: 180px;
larghezza: 180px;
raggio di frontiera: 50%;
Immagina di background: gradiente conico (da 270DEG, rosso, verde, blu);

Qui abbiamo specificato che i colori rosso, verde e blu dovrebbero essere uniformemente diffusi da un angolo di 270 gradi.

Produzione

Un gradatore di torte con gradiente conico da un angolo specificato viene aggiunto correttamente.

Esempio 6: come aggiungere un gradiente conico da una posizione specifica

Dal momento che sappiamo che i colori in un gradiente conico si diffondono uniformemente attraverso un punto medio, quindi definendo la posizione, stiamo effettivamente definendo il punto medio del gradiente conico. Considera l'esempio per imparare a farlo.

CSS

.div
Altezza: 180px;
larghezza: 180px;
raggio di frontiera: 50%;
Immagina di sfondo: gradiente conico (al 30% 45%, rosso, verde, blu);

Nel codice precedente abbiamo definito la posizione del punto medio al 30% 45%.

Produzione

Viene aggiunto un gradiente conico da una posizione specificata.

Esempio 7: come ripetere un gradiente conico

Ai fini della ripetizione di un gradiente conico, utilizzare la funzione di cronometro (). Considera l'esempio di seguito.

CSS

.div
Altezza: 180px;
larghezza: 180px;
raggio di frontiera: 50%;
Immagina di sfondo: detenzione-cronometro (rosa 10deg, 20 gradi rosa, 20deg giallo, 30deg giallo);

Qui stiamo usando la funzione di cronometro () ripetuto e usando due colori insieme a specificare i loro gradi.

Produzione

È stato inserito un gradiente conico ripetuto

Conclusione

Un gradiente conico in CSS è una funzione integrata che consente di aggiungere gradienti con transizioni di colore attorno a un punto medio. Devi specificare almeno due colori per creare un gradiente conico. Ci sono molte cose divertenti che puoi fare a un gradiente conico come specificare gradi di colore, angoli o una posizione. Inoltre, usando i gradienti di conico puoi anche creare cartoni per torte. In questo articolo, abbiamo discusso dei gradienti conici insieme a numerosi esempi.