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?

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

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

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

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