Creare un rettangolo div con il CSS con gradiente o sfumatura di colore.

Come creare dei contenitori rettangolari con uno sfondo a 2, 3, o 4 colori con gradiente o sfumatura lineare o radiale con il CSS.

Nei precedenti articoli abbiamo visto come personalizzare le intestazioni attraverso degli sfondi anche di più colori creati con immagini.

Come promesso in questo articolo vedremo come creare dei contenitori con il tag <div> (o <p>) aggiungendovi uno sfondo con sfumatura o gradiente.

Non è compito di questo post fare una lezione di cosa sia il gradiente, mi limiterò solo ad alcuni concetti generali. Se prendiamo due colori e individuiamo una direzione si può creare una interpolazione tra i due colori che ne individui tutte le tonalità che stanno tra i due colori dati.

In pratica se si fissa il primo colore come blu e il secondo come rosso, la sfumatura mostrerà tutte le tonalità che stanno tra i due colori iniziali. Il gradiente o sfumatura è molto usato nei programmi di grafica che hanno strumenti per creare sfumature lineari, radiali o anche più complesse con più di due colori.

Con il linguaggio CSS si può fare ugualmente molto ma non proprio tutto quello che si fa con Photoshop o Gimp. In questo articolo vedremo come aggiungere una sfumatura a un contenitore.

Considerando un gradiente lineare in un rettangolo si possono individuare le seguenti direzioni finali:

1. top
2. top left
3. top right
4. bottom
5. bottom left
6. bottom right
7. left
8. right

Facendo un paio di esempi con il tag to top right il gradiente partirà dal basso a sinistra con il primo colore fino ad arrivare in alto a destra (top right) con il secondo colore. Con il tag to right invece la direzione sarà da sinistra verso destra e il gradiente sarà quindi orizzontale. Con i tag top e bottom sarà invece verticale.

Insieme al codice dei colori vengono indicati anche i valori di offset, solitamente in percentuale, per determinare i punti di stop di ciascun colore. Se i colori sono solo due le percentuali più ovvie sono 0% e 100%. 

Per esempio questo codice

<style>
.elemento {    
       color: #191919;
       max-width:500px;
       font-family: Georgia;    
       background: linear-gradient(to top right, #d2dcf3 0%, #f85cc6 100%);
       font-size: 12px;
}
</style>
<div class='elemento'>Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio urna, tempus molestie, porttitor ut, iaculis quis, sem. Phasellus rhoncus. Aenean id metus id velit ullamcorper pulvinar. Vestibulum fermentum tortor id mi. Pellentesque ipsum. Nulla non arcu lacinia neque faucibus fringilla.</div>

e quest'altro codice

<style>
.elemento {    
       color: #191919;
       max-width:500px;
       font-family: Georgia;    
       background: linear-gradient(to right, #fff 0%, #00f 100%);
       font-size: 12px;
}
</style>
<div class='elemento'>Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio urna, tempus molestie, porttitor ut, iaculis quis, sem. Phasellus rhoncus. Aenean id metus id velit ullamcorper pulvinar. Vestibulum fermentum tortor id mi. Pellentesque ipsum. Nulla non arcu lacinia neque faucibus fringilla.</div>

producono rispettivamente questi due risultati pratici

GRADIENTE CON TRE O PIÙ COLORI

Si possono creare dei contenitori con gradienti formati anche da tre o più colori. Ecco un codice di esempio

<style>
.elemento {    
       color: #191919;
       max-width:500px;
       font-family: Georgia;    
       background: linear-gradient(to left, #0FF 0%, #DF15AA 33%, #FF0 66%,  #AACFEF 100%);
       font-size: 12px;
}
</style>
<div class='elemento'>Nam quis nulla. Integer malesuada. In in enim a arcu imperdiet malesuada. Sed vel lectus. Donec odio urna, tempus molestie, porttitor ut, iaculis quis, sem. Phasellus rhoncus. Aenean id metus id velit ullamcorper pulvinar. Vestibulum fermentum tortor id mi. Pellentesque ipsum. Nulla non arcu lacinia neque faucibus fringilla.</div>

che produce questo risultato

Nel codice sono presenti tg e attributi che non hanno nulla a che vedere con il gradiente. Il codice del colore del testo, la larghezza del contenitore, la famiglia di caratteri, la dimensione dei font e il contenuto del div si possono personalizzare inserendo nel div anche formattazione, link, elenchi e immagini.

GRADIENTE RADIALE CON I CSS

Concludo questo post con un accenno al gradiente radiale che può essere utile per creare contenitori in grado di evidenziare la loro parte centrale. Un esempio di codice è il seguente

<style>
.elemento {    
       color: #191919;
       max-width:500px;
       font-family: Georgia;    
       background: radial-gradient(#FFF 0%, yellow 30%, green 50%, #0FF 70%, blue 100%);
       font-size: 12px;
}
</style>
<div class='elemento'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia.</div>

che produce questo risultato

Il gradiente radiale partirà dal punto centrale e i colori si interpoleranno seguendo direzioni perpendicolare a delle ellissi concentriche.

Concludo ricordando che ci sono anche generatori online di CSS  e addon per i gradienti:

1. Generatore di bottoni con gradienti
2. ColorZilla per creare CSS con gradiente.