CSS e web

CSS e web

Gradiente lineare in CSS: la guida completa a linear-gradient()

7 min di lettura

Ogni parte di linear-gradient() spiegata con un esempio dal vivo accanto al suo codice, dalla direzione predefinita ai punti netti, ai riflessi a più livelli e alle sfumature OKLCH più morbide.

CSS e web

Gradiente radiale in CSS: forme, dimensioni e posizioni

5 min di lettura

radial-gradient() disegna il colore verso l’esterno a partire da un punto. Ecco ogni sua parte, con esempi dal vivo, più i trucchi di sovrapposizione dietro bagliori morbidi, fari e vignettature.

CSS e web

Gradiente conico in CSS: cerchi, grafici a torta e riflessi

5 min di lettura

conic-gradient() fa girare il colore attorno a un punto come la lancetta di un orologio. Da questa sola idea nascono cerchi cromatici, grafici a torta e ad anello, riflessi metallici e raggiere.

CSS e web

Gradiente mesh in CSS: come costruirlo con livelli radiali

6 min di lettura

In CSS non esiste mesh-gradient(). Ecco il metodo a livelli che ne crea uno convincente, la sfocatura e la grana che lo rifiniscono e quando un’immagine o uno shader sono la scelta migliore.

CSS e web

Testo a gradiente in CSS, fatto bene

5 min di lettura

Tre righe di CSS mettono un gradiente dentro le tue lettere. Renderlo leggibile, robusto e di buon gusto ne richiede qualcuna in più, e sapere quando lasciare il testo semplice.

CSS e web

Bordo a gradiente in CSS: quattro modi per disegnarlo

5 min di lettura

border-color non accetta un gradiente, quindi ogni contorno a gradiente è un ripiego. Ecco i quattro che contano, cosa può e non può fare ciascuno e quale scegliere.

CSS e web

Sfondi con gradiente animato in CSS, fatti come si deve

5 min di lettura

I gradienti non si possono animare direttamente, ma tutto ciò che li circonda sì. Quattro tecniche, quanto costa ciascuna al browser e come mantenere il movimento calmo e facoltativo.

CSS e web

Interpolazione OKLCH nei gradienti CSS per sfumature più morbide

5 min di lettura

La maggior parte dei gradienti spenti, con il centro grigio, non è un problema di colore ma di matematica. Due parole, in oklch, cambiano dove il browser fa i calcoli.

CSS e web

Texture di rumore in CSS: aggiungere grana ai gradienti con SVG

5 min di lettura

Un debole strato di rumore nasconde il banding e fa sembrare il colore piatto dello schermo stampa o pellicola. Ecco il filtro SVG che lo produce, regolato e pronto da incollare.

CSS e web

Gradienti in Tailwind: lineari, radiali e conici nella v4

5 min di lettura

Tailwind v4 ha rinominato le utility per i gradienti, ha aggiunto angoli, gradienti radiali e conici e ha portato la sfumatura predefinita in oklab. Ecco l’intero sistema, con il CSS che ogni classe produce.

CSS e web

Gradienti SVG: lineari, radiali, tratti, testo e maschere

6 min di lettura

L’SVG ha un suo sistema di gradienti, più vecchio dei gradienti CSS e capace di cose che loro non sanno fare: colorare un tratto, riempire una parola, condividere un gradiente tra molte forme e sfumare qualsiasi cosa con una maschera.

CSS e web

Pulsanti a gradiente in CSS che sembrano di qualità

5 min di lettura

Quasi tutti i pulsanti a gradiente sembrano dozzinali per gli stessi pochi motivi: troppe tonalità, un hover che salta e testo che sparisce nell’estremo chiaro. Ecco la ricetta che li evita tutti e tre.

CSS e web

Prestazioni dei gradienti CSS: rallentano un sito?

6 min di lettura

Un gradiente CSS statico è quasi gratis. I costi vengono da ciò che si fa con i gradienti: sfocature enormi, sfondi che si ridisegnano durante lo scorrimento e animazioni che non finiscono mai. Ecco come distinguere.

CSS e web

Motivi CSS con gradienti ripetuti

5 min di lettura

I punti di colore netti trasformano i gradienti in forme, e background-size trasforma le forme in riquadri. Con queste due idee disegni la maggior parte dei motivi classici in poche righe, senza file immagine.

CSS e web

Gradienti in Figma: consigli per risultati più morbidi

6 min di lettura

Figma fa un gradiente in due clic e uno buono in venti. Ecco il percorso veloce nell’editor dei gradienti, più le soluzioni per centri grigi, banding e CSS che non corrisponde.

CSS e web

Gli shader per gradienti WebGL, spiegati ai designer

7 min di lettura

Alcuni gradienti sul web scorrono, brillano e luccicano come nessuna immagine o regola CSS può fare. Sono shader. Ecco come funzionano, con parole che un designer può usare.

CSS e web

Sfondi con gradiente nelle email: cosa funziona in Gmail e Outlook

6 min di lettura

I gradienti sono bellissimi in un browser e imprevedibili in una casella di posta. Costruiscili a livelli, e ogni lettore vedrà qualcosa che sembra voluto.

CSS e web

Immagini OG dinamiche: genera in automatico le anteprime dei link

6 min di lettura

Fare a mano un’immagine di anteprima per ogni pagina non regge la scala, e una sola immagine generica per tutto il sito spreca l’immagine più vista che hai. Meglio generarle.