Molto spesso in passato, per realizzare uno sfondo sfumato si utilizzava un’immagine, anche solo di 1 px, che viene poi replicata in orizzontale.
L’immagine veniva inserita nello stile background-image.
Nel background-color invece veniva inserito il colore verso cui virava il gradiente (se da blu a bianco dal top al bottom, sarà il bianco).
Un piccolo trucco per evitare l’inserimento delle immagini è quello di utilizzare il css.
In questo caso viro dal celeste al bianco, come dice il codice stesso: from(#b5d4ec), to(#ffffff)
body
{
margin: 0px;
padding: 0px;
font-family:verdana; /*tipo di carattere*/
font-size: 10px; /* dimensione carattere */
color: #000000; /*colore del testo*/
background-color: #ffffff; /* sfondo sotto il gradiente, nel mio caso bianco */
height:100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#b5d4ec’, endColorstr=’#ffffff’); /* per IE */
background: -webkit-gradient(linear, left top, left bottom, from(#b5d4ec), to(#ffffff)); /* per Safari */
background: -moz-linear-gradient(top, #b5d4ec, #ffffff); /* per firefox */
background-repeat: no-repeat; /* Non ripetere lo sfondo gradiente */
}
Un sito per creare gradienti css? Eccolo!
Negli ultimi anni sono nati molti tool per la creazione di gradienti css per evitare di dover mettere mani al codice
Eccone uno molto interessante: https://cssgradient.io/
Nata nel 1974, Alexia si interessa al web nel lontano 1999 grazie ad un corso di formazione regionale. Crea le sue prime pagine html dapprima con programmi wysiwyg (Dreamweaver), poi direttamente con notepad ++. Inizia a creare siti web nel 2001. Pur essendo amante delle interfacce, studia php assecondando la sua grande curiosità. Lavora in campo digitale per molti anni e si butta poi nel favoloso mondo della seo. Artemedialab nasce come laboratorio sperimentale nel 2008 e diventa nel 2020 azienda individuale. Attualmente insegnante di informatica nella scuola primaria, docente nei corsi di formazione professionale per l’assolvimento dell’obbligo scolastico, media educator.