Siamo abituati a pensare che alla proprietà background o background-image possiamo associare solo url che puntano a immagini ma in realtà, dall’introduzione di CSS3, è possibile impostare anche un gradiente (linear-gradient o radial-gradient) come sfondo di un box o di una pagina.

Ecco un esempio di un uso semplice dei gradienti per creare uno sfondo colorato con sfumatura verticale a due colori:

background: linear-gradient(#e66465, #9198e5);

Possiamo ottenere combinazioni anche più complesse come in questo esempio con tre colori, sfumature inclinate e trasparenze:

background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

Con un po’ di pratica potremo inserire diversi colori e regolarne: sfumatura, angolo di inclinazione, trasparenza e altro.

Ecco altri esempi:

L’uso dei gradienti per generare sfondi con sfumature di colore è ormai supportato da tutti i moderni browser ma per questo occorre prestare attenzione e usare la corretta sintassi.

Per questo motivo ci vengono in aiuto numerosi siti che ci permettono di generare graficamente la combinazione di colori desiderata e scaricare il corretto codice adatto a tutti browser.

Io mi sono servito di CSSmatic per generare gli sfondi per l’ultimo sito che ho realizzato.

 

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.