Sfumatura

The CSS Podcast - 021: Gradienti

Immagina di dover creare un sito e in alto c'è un'introduzione con un'intestazione, un riepilogo e un pulsante. Il designer ha consegnato un design con sfondo viola per questa intro. L'unico problema è che lo sfondo presenta due tonalità di viola come sfumatura. Come si fa?

Inizialmente potresti pensare che per farlo dovrai esportare un'immagine dal tuo strumento di progettazione, ma puoi utilizzare un linear-gradient.

Una sfumatura è un'immagine e può essere utilizzata ovunque sia possibile utilizzare le immagini, ma viene creata con CSS ed è composta da colori, numeri e angoli. Le sfumature CSS ti consentono di creare qualsiasi cosa, da una sfumatura graduale tra due colori fino a artwork impressionanti, mescolando e ripetendo più sfumature.

Sfumatura lineare

La funzione linear-gradient() genera un'immagine di uno o più colori in modo progressivo. Richiede più argomenti, ma nella sua configurazione più semplice, puoi passare uno o più colori come questo e verranno suddivisi automaticamente in modo uniforme, durante l'unione.

.my-element {
    background: linear-gradient(black, white);
}

Sebbene sia valido in CSS utilizzare un solo colore nelle funzioni di gradiente, verrà prodotto solo un colore a tinta unita:

.my-element {
    background: linear-gradient(red);
}

Puoi anche passare un angolo o parole chiave che rappresentano un angolo. Se scegli di utilizzare le parole chiave, specifica una direzione dopo la parola chiave to. Ciò significa che se vuoi un gradiente bianco e nero che va da sinistra (nero) a destra (bianco), devi specificare l'angolo come to right come primo argomento.

.my-element {
    background: linear-gradient(to right, black, white);
}

Un valore di interruzione del colore definito dove un colore si interrompe e si mescola con i colori vicini. Per un gradiente che inizia con una tonalità scura di rosso e si estende a un angolo di 45 gradi, al 30% delle dimensioni del gradiente diventa di un rosso più chiaro: ha questo aspetto.

.my-element {
    background: linear-gradient(45deg, darkred 30%, crimson);
}

Puoi aggiungere tutti i colori e le relative interruzioni che vuoi in un linear-gradient(), e puoi sovrapporre i gradienti separandoli con una virgola.

Sfumatura radiale

Per creare una sfumatura che si irradia in modo circolare, la funzione radial-gradient() viene in soccorso. È simile a linear-gradient(), ma anziché specificare un angolo, puoi specificare facoltativamente una posizione e una forma finale. Se specifichi solo i colori, radial-gradient() seleziona automaticamente la posizione come center e un cerchio o un'ellisse, a seconda delle dimensioni della casella.

.my-element {
    background: radial-gradient(white, black);
}

La posizione del gradiente è simile a background-position con l'utilizzo di parole chiave e/o valori numerici. Le dimensioni della sfumatura radiale determinano le dimensioni della forma finale della sfumatura (cerchio o ellisse) e per impostazione predefinita sarà farthest-corner, il che significa che incontra esattamente l'angolo più lontano della casella dal centro. Puoi anche utilizzare le seguenti parole chiave:

• closest-corner incontrerà il angolo più vicino al centro del gradiente.
• closest-side incontrerà il lato della casella più vicino al centro del gradiente.
• farthest-side eseguirà l'operazione opposta a closest-side.

Puoi aggiungere tutti i punti di colore che vuoi, proprio come con linear-gradient. Analogamente, puoi aggiungere tutti i radial-gradients che vuoi.

Gradiente conico

Una sfumatura conica ha un punto centrale nella casella, inizia dall'alto (per impostazione predefinita) e gira in un cerchio di 360 gradi.

.my-element {
    background: conic-gradient(white, black);
}

La funzione conic-gradient() accetta gli argomenti posizione e angolo.

Per impostazione predefinita, l'angolo è di 0 gradi e inizia in alto, al centro. Se imposti l'angolo su 45deg, si tratta dell'angolo in alto a destra. L'argomento angolare accetta qualsiasi tipo di valore angolare, ad esempio le sfumature lineari e radiali.

La posizione è al centro per impostazione predefinita. Come per i gradienti radiali e lineari, il posizionamento può essere basato su parole chiave o definito con valori numerici.

Puoi aggiungere tutti gli stop di colore che vuoi, come con altri tipi di gradiente. Un buon caso d'uso per questa funzionalità, con gradienti conici, è il rendering dei grafici a torta con CSS.

Ripetizione e mixaggio

Anche ogni tipo di gradiente ha un tipo ripetuto. Si tratta di repeating-linear-gradient(), repeating-radial-gradient() e repeating-conic-gradient(). Sono simili alle funzioni non ripetitive e accettano gli stessi argomenti. La differenza è che se la sfumatura definita può essere ripetuta per riempire la casella, lo farà in base a entrambe le dimensioni.

Se il gradiente non sembra ripetersi, è probabile che non tu abbia impostato una lunghezza per una delle interruzioni di colore. Ad esempio, puoi creare uno sfondo a strisce con un repeating-linear-gradient impostando le lunghezze delle interruzioni di colore.

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 30px,
    white 30px,
    white 60px
  );
}

Puoi anche combinare le funzioni di gradiente nelle proprietà background, nonché definire tutti i gradienti che vuoi, come faresti con un'immagine di sfondo. Ad esempio, puoi combinare più gradienti lineari o due gradienti lineari con un gradiente radiale.

Interpolazione e spazi colore

Ogni tipo di gradiente può eseguire l'interpolazione tra i colori in modi diversi utilizzando gli spazi di colore e la parola chiave in. Questa opzione ti consente di personalizzare i risultati tra due stop di colore in un gradiente.

Ad esempio, puoi utilizzare lo spazio di colore oklab per rimuovere in genere i colori medi non saturi e ottenere un gradiente più sicuro e vivace.

.my-element {
  background: linear-gradient(in oklch, deeppink, yellow);
}

La seguente demo ti consente di confrontare lo stesso gradiente con e senza interpolazione personalizzata. Prova a cambiare gli spazi di colore per vedere come si confrontano o addirittura a cambiare i colori per vedere in che modo l'interpolazione influisce sul gradiente.

Puoi anche utilizzare le parole chiave increasing o decreasing con spazi di colore cilindrici per controllare la direzione della progressione dell'angolo di tonalità quando un gradiente passa da un colore all'altro. L'angolo si sposta sempre nella direzione della parola chiave scelta, indipendentemente dal fatto che sia più lunga o più breve.

.my-element.increasing {
  background: linear-gradient(in oklch increasing hue, deeppink, yellow);
}

.my-element.decreasing {
  background: linear-gradient(in oklch decreasing hue, deeppink, yellow);
}

Oltre a personalizzare l'interpolazione, gli spazi colore cilindrici (HSL, HWB, LCH e OKLCH) offrono le parole chiave shorter (predefinita) o longer per specificare se la linea di gradiente deve seguire il percorso lungo intorno alla ruota dei colori o il percorso corto tra i due colori.

.my-element {
  background: linear-gradient(in oklch longer hue, deeppink, yellow);
}

Risorse

• Guida di MDN ai gradienti
• Generatore di gradienti
• Conic.css: una raccolta utile di sfumature coniche

Verificare di aver compreso

Testa le tue conoscenze sui gradienti