Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS Sfondi CSS Confini CSS Margini CSS Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS Testo CSS Font CSS Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS Ombre CSS Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Gradienti conici CSS


Gradienti conici CSS

Una sfumatura conica è una sfumatura con transizioni di colore ruotate attorno a un punto centrale.

Per creare un gradiente conico devi definire almeno due colori.

Sintassi

background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);

Per impostazione predefinita, l'angolo è 0 gradi e la posizione è centrale.

Se non viene specificato alcun grado , i colori verranno distribuiti uniformemente attorno al punto centrale.


Gradiente conico: tre colori

L'esempio seguente mostra un gradiente conico con tre colori:

Esempio

Un gradiente conico con tre colori:

#grad {
  background-image: conic-gradient(red, yellow, green);
}

Gradiente conico: cinque colori

L'esempio seguente mostra un gradiente conico con cinque colori:

Esempio

Un gradiente conico con cinque colori:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

Gradiente conico: tre colori e gradi

L'esempio seguente mostra un gradiente conico con tre colori e un grado per ogni colore:

Esempio

Un gradiente conico con tre colori e un grado per ogni colore:

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}


Crea grafici a torta

Basta aggiungere border-radius: 50%per rendere il gradiente conico simile a una torta:

Esempio

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

Ecco un altro grafico a torta con gradi definiti per tutti i colori:

Esempio

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
  border-radius: 50%;
}

Gradiente conico con specificato dall'angolo

[from angle ] specifica un angolo di cui ruota l'intero gradiente conico.

L'esempio seguente mostra un gradiente conico con un angolo da 90 gradi:

Esempio

Un gradiente conico con a dall'angolo:

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
}

Gradiente conico con posizione centrale specificata

La [at position ] specifica il centro del gradiente conico.

L'esempio seguente mostra un gradiente conico con una posizione centrale del 60% 45%:

Esempio

Un gradiente conico con una posizione centrale specificata:

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
}

Ripetizione di un gradiente conico

La repeating-conic-gradient()funzione viene utilizzata per ripetere i gradienti conici:

Esempio

Un gradiente conico ripetuto:

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
  border-radius: 50%;
}

Ecco un gradiente conico ripetuto con inizio e fine colore definiti:

Esempio

Un gradiente conico ripetuto con inizio e fine colore definiti:

#grad {
  background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  border-radius: 50%;
}

Funzioni di gradiente CSS

La tabella seguente elenca le funzioni del gradiente CSS:

Function Description
conic-gradient() Creates a conic gradient. Define at least two colors (around a center point)
linear-gradient() Creates a linear gradient. Define at least two colors (top to bottom)
radial-gradient() Creates a radial gradient. Define at least two colors (center to edges)
repeating-conic-gradient() Repeats a conic gradient
repeating-linear-gradient() Repeats a linear gradient
repeating-radial-gradient() Repeats a radial gradient