Gradienti

Come funzionano i gradienti, tutti i tipi e come farne di eleganti.

200 guide · 11 argomenti

Gradienti

Che cos’è un gradiente? Una guida semplice alle sfumature di colore

6 min di lettura

Un gradiente è l’idea più semplice del colore e una delle più facili da sbagliare. Ecco cos’è, come si costruisce e perché è tornato su tutti gli schermi.

Gradienti

Lineare, radiale, conico e mesh: tutti i tipi di gradiente spiegati

5 min di lettura

Ogni gradiente sposta il colore lungo un percorso. Cambia il percorso e cambi la sensazione. Ecco ogni tipo, come appare, il suo codice e il lavoro che fa meglio.

Gradienti

Gradienti mesh: cosa sono e come crearne uno

6 min di lettura

I gradienti mesh sono i campi di colore morbidi e fluttuanti dietro metà delle pagine di lancio che hai visto quest’anno. Ecco come funzionano, come costruirne uno a mano e i due errori che rovinano la maggior parte di essi.

Gradienti

Come fare uno sfondo con gradiente che non sembri generico

5 min di lettura

La maggior parte degli sfondi con gradiente si somiglia perché parte dagli stessi pochi preset. Ecco un metodo in cinque passi per farne uno che sembri pensato, con codici da copiare.

Gradienti

Gradienti con grana: perché un po’ di rumore rende il colore prezioso

6 min di lettura

Un gradiente pulito sembra un’impostazione predefinita dello schermo. Lo stesso gradiente con un sottile strato di grana sembra una stampa, un fotogramma di pellicola o un muro dipinto. Ecco perché, quanta grana aggiungere e come.

Gradienti

Gradienti aurora: luce soffusa, fatta bene

5 min di lettura

I gradienti aurora prendono in prestito l’aspetto dell’aurora boreale: veli luminosi di colore che scivolano sul buio. Sono bellissimi e scivolano in fretta nel territorio dello screensaver. Ecco come restare dalla parte giusta.

Gradienti

Perché il tuo gradiente ha le strisce e come correggere il banding

6 min di lettura

Hai fatto un gradiente liscio ed è tornato a strisce. È il banding, e ha una causa semplice e una manciata di rimedi affidabili. Ecco prima l’aritmetica, poi le cure.

Gradienti

Perché alcuni gradienti diventano grigi al centro, e come evitarlo

5 min di lettura

Blu e giallo dovrebbero dare un gradiente bellissimo. Fondili nel modo predefinito e al centro ottieni una macchia grigia. Ecco esattamente perché, e quattro modi per mantenere pulita ogni sfumatura.

Gradienti

60 combinazioni di colori per gradienti che funzionano, con i codici

5 min di lettura

Sessanta gradienti, ordinati per la sensazione che vuoi e non per tinta. Ognuno è un codice CSS vivo da copiare, e ogni gruppo spiega la regola per cui le sue sfumature funzionano.

Gradienti

Gradienti a due colori: 30 coppie che funzionano sempre

5 min di lettura

Due colori, una direzione, niente che possa andare storto. Quasi. Ecco le due regole che decidono se una coppia funziona, e trenta coppie che le rispettano entrambe, pronte da copiare.

Gradienti

Sfondo gradiente scuro: profondità senza cupezza

5 min di lettura

Un gradiente scuro può sembrare una scena notturna di lusso oppure uno schermo torbido con la luminosità abbassata. La differenza sta in poche scelte, tutte facili da copiare.

Gradienti

Gradienti pastello freschi, non stucchevoli

5 min di lettura

I pastelli sono i gradienti più facili da amare e i più facili da esagerare. Poche regole li fanno sembrare luce di primavera sulla carta invece di una torta di compleanno.

Gradienti

Gradienti neon: bagliore senza affaticare la vista

5 min di lettura

Il neon è colore al massimo. Su un fondo scuro brilla; steso su tutto lo schermo ronza. Ecco come tenere il bagliore e perdere il ronzio.

Gradienti

Gradienti olografici e iridescenza: come funzionano

5 min di lettura

La lamina olografica, le bolle di sapone e la madreperla cambiano colore mentre ti muovi. Uno schermo piatto non può farlo, ma un gradiente ben costruito può convincere l’occhio del contrario.

Gradienti

L’effetto duotone: foto coerenti col brand in due colori

5 min di lettura

Il duotone trasforma qualsiasi foto in due colori a tua scelta: uno per le ombre, uno per la luce. È il modo più rapido per far sembrare di un unico brand immagini che non c’entrano tra loro.

Gradienti

Gradiente o colore piatto? Quando vince ciascuno

6 min di lettura

Il colore piatto è chiaro, economico ed esatto. I gradienti sono vivi, distintivi e più difficili da controllare. La maggior parte dei buoni brand usa entrambi. Ecco come decidere di quale ha bisogno ogni superficie.

Gradienti

Texture per gradienti: grana, carta, vetro e seta spiegate

5 min di lettura

Due gradienti con colori identici possono sembrare un fotogramma di pellicola, un biglietto stampato a caratteri mobili, lo schermo di un telefono o un abito da sera. La differenza è la texture, e dice più dei colori.

Gradienti

Glassmorphism e gradienti: una guida pratica

5 min di lettura

Il vetro smerigliato su un gradiente luminoso è uno degli effetti più attraenti del design delle interfacce, e uno dei più facili da rendere illeggibile. Ecco come ottenere la bellezza e conservare le parole.

Gradienti

Mappa di gradiente: ricolora qualsiasi cosa in pochi secondi

5 min di lettura

Una mappa di gradiente prende qualsiasi immagine, foto, texture o illustrazione e la ridipinge con i colori che scegli, mantenendone tutta la luce e l’ombra. È lo strumento di ricolorazione più veloce che esista.

Gradienti

Angolo e direzione del gradiente: da che parte farlo andare

6 min di lettura

Gli stessi due colori possono sembrare calmi, entusiasmanti o inquieti solo a seconda della direzione in cui corrono. Ecco come scegliere una direzione di proposito, e come avere l’angolo esatto nel codice.

Gradienti

Nove errori nei gradienti che fanno sembrare economico un lavoro

6 min di lettura

La maggior parte dei gradienti che sembrano economici sbaglia in uno di nove modi prevedibili. Ecco ogni errore, cosa lo causa e la modifica precisa che lo risolve.

Gradienti

Gradienti radiali: il riflettore che guida lo sguardo

5 min di lettura

Un gradiente radiale è quanto di più vicino ci sia, nel design, a puntare una luce su qualcosa. Ecco come orientarlo, dimensionarlo ed evitare che sembri un bersaglio.

Gradienti

Gradienti conici: cerchi cromatici, grafici e riflessi

5 min di lettura

I gradienti lineari viaggiano, quelli radiali si espandono e quelli conici girano. Questa sola differenza li rende lo strumento giusto per cerchi cromatici, grafici, metallo e fasci di luce.

Gradienti

Stampare i gradienti senza banding né colori sporchi

7 min di lettura

Un gradiente che brilla sullo schermo può tornare dalla tipografia piatto, a strisce o marroncino. Quasi tutti questi difetti sono prevedibili, e la maggior parte si può correggere prima che il file lasci la tua scrivania.