Sfumatura

Podcast su CSS - 021: Gradients

Immagina di avere un sito da creare e in alto ci sia un'introduzione con un'intestazione, un riepilogo e un pulsante. Il designer ha consegnato un design con uno sfondo viola per questa introduzione. L'unico problema è che lo sfondo presenta due tonalità di viola come gradiente. Come fai?

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

Un gradiente è un'immagine e può essere usato ovunque sia possibile usare le immagini, ma viene creato con CSS ed è fatto di colori, numeri e angoli. I gradienti CSS consentono di creare qualsiasi cosa, da un gradiente uniforme tra due colori a un'opera d'arte di grande impatto mescolando e ripetendo più gradienti.

Sfumatura lineare

La funzione linear-gradient() genera un'immagine di due o più colori in modo progressivo. Sono necessari più argomenti, ma nella sua configurazione più semplice puoi passare alcuni colori come questo che li dividerà automaticamente in modo uniforme e li mescolerà.

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

Puoi anche passare un angolo o parole chiave che rappresentano un angolo. Se scegli di utilizzare parole chiave, specifica un'indicazione dopo la parola chiave to. Ciò significa che se vuoi un gradiente in 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 nel punto in cui un colore si interrompe e si mescola con i colori vicini. Per una sfumatura che inizia con una sfumatura di rosso scuro con un angolo di 45°, il 30% della sfumatura diventa un rosso più chiaro: l'aspetto è questo.

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

In linear-gradient() puoi aggiungere tutti i colori e le interruzioni di colore che vuoi e sovrapporre i gradienti separando ogni gradiente con una virgola.

Sfumatura radiale

Per creare un gradiente che si irradia in modo circolare, interviene la funzione radial-gradient(). È simile a linear-gradient(), ma invece di specificare un angolo, puoi specificare la posizione e la forma finale. Se specifichi solo i colori, radial-gradient() selezionerà automaticamente la posizione center e sceglierà un cerchio o un'ellisse, a seconda delle dimensioni della casella.

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

La posizione del gradiente è simile a quella del gradiente background-position utilizzando parole chiave e/o valori numerici. La dimensione del gradiente radiale determina la dimensione della forma finale del gradiente (cerchio o ellisse) e, per impostazione predefinita, sarà farthest-corner, il che significa che corrisponde esattamente all'angolo più lontano dal centro del riquadro. Puoi anche utilizzare le seguenti parole chiave:

• closest-corner incontrerà l'angolo più vicino al centro del gradiente.
• closest-side incontrerà il lato della casella più vicino al centro della sfumatura.
• farthest-side farà il contrario di closest-side.

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

Gradiente conico

Un gradiente conico ha un punto centrale nella casella e inizia dall'alto (per impostazione predefinita) e si sviluppa intorno a un cerchio di 360 gradi.

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

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

Per impostazione predefinita, l'angolo è di 0 gradi e inizia dalla parte superiore, al centro. Se dovessi impostare l'angolo su 45deg, sarebbe l'angolo in alto a destra. L'argomento angolo accetta qualsiasi tipo di valore di angolo, come i gradienti lineari e radiali.

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

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

Ripetizione e mixaggio

Ogni tipo di sfumatura ha anche un tipo ricorrente. Questi sono 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 il gradiente definito può essere ripetuto per riempire il riquadro, lo farà in base a entrambe le dimensioni.

Se il gradiente non sembra ripetuto, probabilmente non hai impostato una lunghezza per una delle interruzioni di colore. Ad esempio, puoi creare uno sfondo a strisce con repeating-linear-gradient impostando la lunghezza delle interruzioni di colore.

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

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

Risorse

• Conic.css: un'utile raccolta di gradienti conici
• Guida MDN ai gradienti
• Generatore di sfumatura

Verifica la tua comprensione

Verifica la tua conoscenza delle sfumature