
Gradienti
Come funzionano i gradienti, tutti i tipi e come farne di eleganti.
200 guide · 11 argomenti
GradientiChe 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.
GradientiLineare, 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.
GradientiGradienti 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.
GradientiCome 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.
GradientiGradienti 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.
GradientiGradienti 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.
GradientiPerché 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.
GradientiPerché 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.
Gradienti60 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.
GradientiGradienti 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.
GradientiSfondo 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.
GradientiGradienti 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.
GradientiGradienti 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.
GradientiGradienti 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.
GradientiL’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.
GradientiGradiente 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.
GradientiTexture 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.
GradientiGlassmorphism 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.
GradientiMappa 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.
GradientiAngolo 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.
GradientiNove 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.
GradientiGradienti 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.
GradientiGradienti 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.
GradientiStampare 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.