Angolo e direzione del gradiente: da che parte farlo andare

L’angolo del gradiente è la direzione in cui cambiano i colori di un gradiente, e fa più lavoro di quanto la maggior parte delle persone si aspetti. Decide da dove sembra arrivare la luce, dove l’occhio comincia e finisce, e se il design sembra calmo, entusiasmante o inquieto. Come regola generale, più chiaro in alto sembra naturale, le diagonali sembrano energiche e l’estremità chiara dovrebbe stare lontana dalle tue parole. In CSS, gli angoli partono da 0deg che punta in su e girano in senso orario.

Come la direzione del gradiente cambia la sensazione

La luce dall’alto

Le persone tendono a supporre che la luce arrivi dall’alto, perché quasi sempre è così, dal sole o da un soffitto. Un gradiente più chiaro in alto corrisponde a quell’aspettativa, quindi si legge come naturale e calmo: cielo sulla terra, una parete illuminata, un oggetto illuminato dolcemente. Capovolgilo così che la luce sia in basso e gli stessi colori sembrano teatrali, come un falò, un palco o uno schermo che brilla nel buio. Nessuno dei due è sbagliato, ma il secondo dovrebbe essere una scelta.

La stessa aspettativa riguarda pulsanti e card. Una superficie un po’ più chiara in alto sembra rialzata; una più chiara in basso sembra premuta. Vale la pena saperlo quando aggiungi un gradiente sottile a un pulsante con gradiente.

Diagonali ed energia

Le linee diagonali sembrano movimento, perché appaiono instabili rispetto a verticali e orizzontali. È per questo che le diagonali, soprattutto dall’alto a sinistra al basso a destra, sono la scelta più comune per post social, pulsanti e grafiche di lancio. La partenza in alto a sinistra corrisponde anche al punto in cui i lettori delle lingue da sinistra a destra cominciano una pagina, così l’estremità chiara li accoglie per prima.

Diagonali più ripide o più dolci cambiano l’atmosfera. Intorno ai 100-120 gradi sembra quasi verticale con una lieve inclinazione, calma ma non statica. Intorno ai 150-160 gradi sembra una luce tarda che striscia su una superficie. Un 45 o 135 preciso è il più dinamico, e anche il più comune, ed è un motivo per provare qualcosa di leggermente diverso se vuoi distinguerti; vedi i gradienti a due colori.

Tieni la luce lontana dalle parole

La direzione è anche impaginazione. L’estremità luminosa di un gradiente attira l’occhio, quindi mettila dove vuoi attenzione, e tieni il testo sull’estremità più calma dove il contrasto è più stabile. Un titolo in cima a un post va bene con un gradiente che si scurisce verso l’alto, con il bagliore nell’angolo in basso, oppure viceversa con testo scuro.

Come funzionano gli angoli dei gradienti in CSS

In CSS, l’angolo di un gradiente lineare descrive la direzione in cui viaggiano i colori. 0deg punta dritto in su, e gli angoli girano in senso orario: 90deg va da sinistra a destra, 180deg dall’alto in basso e 270deg da destra a sinistra. Se ometti l’angolo, il valore predefinito è 180deg. Puoi anche usare parole chiave come to right e to bottom left.

/* These pairs are identical */
.a { background: linear-gradient(90deg,  #fde68a, #7c2d12); }
.b { background: linear-gradient(to right, #fde68a, #7c2d12); }

.c { background: linear-gradient(180deg, #fde68a, #7c2d12); }
.d { background: linear-gradient(#fde68a, #7c2d12); } /* default: to bottom */

/* These are only identical in a square box */
.e { background: linear-gradient(45deg, #fde68a, #7c2d12); }
.f { background: linear-gradient(to top right, #fde68a, #7c2d12); }

La differenza nell’ultima coppia conta su banner e storie. Un angolo fisso come 45deg corre sempre a 45 gradi, qualunque sia la forma. Una parola chiave d’angolo come to top right inclina l’angolo per adattarsi al riquadro, così il colore del punto medio corre esattamente tra gli altri due angoli. Su un banner largo 3:1, to top right risulta di circa 18deg, molto più vicino alla verticale di 45deg, perché le bande di colore devono stare lungo la diagonale lunga. Usa le parole chiave quando vuoi che il gradiente vada da un angolo all’altro su qualsiasi forma; usa i gradi quando vuoi la stessa inclinazione ovunque.

Scegliere una direzione, passo dopo passo

1. 1

   Decidi da dove arriva la luce

   Dall’alto per calmo e naturale, dal basso per bagliore e drammaticità, da un angolo per un faro.

2. 2

   Metti prima le parole

   Metti il titolo dove va nell’impaginazione, poi fai correre il gradiente in modo che la sua estremità calma stia dietro di esso.

3. 3

   Scegli l’inclinazione per l’atmosfera

   Verticale per la calma, diagonale per l’energia, orizzontale per il progresso.

4. 4

   Controlla ogni formato

   Una direzione che funziona su un quadrato può mettere la luce nel posto sbagliato su una storia o un banner. Regola per ogni dimensione invece di ritagliare.

Per il resto della sintassi dei gradienti lineari, vedi i gradienti lineari in CSS. Per altre forme che non hanno affatto una direzione unica, vedi i tipi di gradiente. I Mark di Gradiently vengono generati per ogni dimensione in cui progetti, così la loro luce cade in un punto sensato su ogni formato invece che dove la lascia un ritaglio.