Sfumatura

Podcast CSS - 021: Gradienti .

Immagina di avere un sito da creare e, in alto, c'è un'introduzione con titolo, riepilogo e pulsante. Per questa introduzione, il designer ha rinunciato a un design con uno sfondo viola. L'unico problema è che lo sfondo presenta due tonalità di viola come gradiente. Come puoi farlo?

Uno sfondo sfumato da scuro a viola chiaro con intestazione, paragrafo e link.

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

Un gradiente è un'immagine e può essere utilizzato ovunque sia possibile usare ma è creata con CSS ed è composta da colori, numeri e angoli. I gradienti CSS consentono di creare qualsiasi cosa, da una sfumatura uniforme tra due colori, fino a un'opera d'arte impressionante mescolando e ripetendo più sfumature.

Sfumatura lineare

Supporto dei browser

Origine

La linear-gradient() genera un'immagine di due o più colori progressivamente. Prende più argomenti, ma nella sua configurazione più semplice, puoi passare alcuni colori come questo e verranno suddivisi automaticamente in modo uniforme mentre li fonde.

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

Puoi anche trasmettere un angolo o parole chiave che rappresentano un angolo. Se scegli di utilizzare parole chiave, specifica una direzione 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 to right come primo argomento.

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

Un valore di interruzione colore definito in cui un colore si interrompe e si mescola con i colori vicini. Per una sfumatura che inizia con una tonalità di rosso scuro che va a un angolo di 45°, al 30% della dimensione del gradiente che diventa un rosso più chiaro: ha questo aspetto.

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

Puoi aggiungere tutti i colori e le fermate di colore che vuoi in un linear-gradient(), Puoi sovrapporre i gradienti e separarli con una virgola.

Sfumatura radiale

Supporto dei browser

Origine

Per creare un gradiente che si irradia in modo circolare, la radial-gradient() i passaggi della funzione per aiutarti. È simile a linear-gradient(). ma invece di specificare un angolo, puoi facoltativamente specificare una posizione e una forma finale. Se specifichi solo i colori, radial-gradient() selezionerà automaticamente la posizione come center e seleziona 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 se utilizzi 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 della scatola. Puoi anche utilizzare le seguenti parole chiave:

closest-corner incontrerà l'angolo più vicino al centro della sfumatura.
closest-side raggiungerà il lato del rettangolo 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. Allo stesso modo, puoi aggiungere tutti i radial-gradients che vuoi.

Gradiente conico

Supporto dei browser

Origine

Una sfumatura conica ha un punto centrale all'interno della casella e inizia dall'alto (per impostazione predefinita). e gira in un cerchio a 360°.

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

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

Per impostazione predefinita, l'angolo è 0 gradi e inizia dalla parte superiore, al centro. Se imposti l'angolo su 45deg, l'angolo sarà 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 è centrale. Come per i gradienti radiali e lineari, il posizionamento può essere basato sulle parole chiave o può essere definito con valori numerici.

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

Ripetizione e mix

Inoltre, per ogni tipo di gradiente è associato un tipo ripetuto. Si tratta di repeating-linear-gradient(), repeating-radial-gradient() e repeating-conic-gradient() Sono simili alle funzioni non ripetitive e utilizzano gli stessi argomenti. La differenza è che se il gradiente definito può essere ripetuto per riempire la casella, in base a entrambe le dimensioni.

Se la sfumatura non si ripete, probabilmente non hai impostato una lunghezza per uno degli arresti di colore. Ad esempio: puoi creare uno sfondo a righe con un elemento 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 desideri, proprio 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: un'utile raccolta di gradienti conici.
Guida ai gradienti per la MDN
Generatore di gradienti

Verifica le tue conoscenze

Verifica le tue conoscenze sui gradienti

Qual è il numero minimo di colori necessario per creare una sfumatura?

Riprova.

Possono essere dello stesso colore e avere un aspetto a tinta unita, ma sì, sono necessari almeno due colori.

Riprova.

Gli elementi possono avere più gradienti come sfondo?

Vero

La proprietà background-image consente molti gradienti, semplicemente separandoli con una virgola.

Falso

Oh, ma possono!