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 due o più colori, in modo progressivo. Richiede più argomenti, ma nella sua configurazione più semplice, puoi passare alcuni colori come questo e verranno suddivisi automaticamente in modo uniforme, mentre vengono mescolati.

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

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 con un'angolazione 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 gli arresti 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 sulle parole chiave o definito con valori numerici.

Puoi aggiungere tutti gli stop di colore che vuoi, come con gli 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 il gradiente definito può essere ripetuto per riempire la casella, in base a entrambe le dimensioni, lo farà.

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.

Risorse

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

Verificare di aver compreso

Metti alla prova le tue conoscenze sui gradienti