Creare sfondi con gradiente e a strisce orizzontali o verticali con i CSS

Come creare degli sfondi per evidenziare testo o immagini con un gradiente lineare o radiale oppure creare rettangoli a strisce orizzontali o verticali per creare la bandiera italiana

Oggi ci divertiremo un po' con i CSS per creare degli sfondi colorati non omogenei, in cui inserire del testo o delle immagini da evidenziare in un modo originale. Per esempio si possono inserire i testi di alcuni articoli della Costituzione Italiana in uno sfondo con i classici colori tradizionali verde, bianco e blu.

Partiremo dalla situazione più semplice per poi mostrare delle personalizzazioni sempre più sofisticate. Chi non avesse sufficiente dimestichezza con i linguaggi HTML e CSS, può scaricarsi gratis il mio ebook dal titolo Guida all'HTML e al CSS, in cui troverà informazioni propedeutiche ma sufficienti per avvinarsi a questi linguaggi di markup.

Nel seguito del post vedremo come creare un rettangolo in cui avere uno sfondo di un solo colore o con una sfumatura di colore ovvero con quello che si chiama Gradiente. All'interno del rettangolo potremo poi inserire del testo, anche formattato, immagini o altri oggetti HTML.

Nella parte finale dell'articolo mostrerò come creare dei rettangoli con diversi colori, senza sfumature, ma con spazi ben delimitati che possono essere delle strisce orizzontali o verticali.

Di qui appunto la possibilità di creare anche sfondi cha abbiano i colori della bandiera italiana.

SFONDI OMOGENEI E CON GRADIENTE

Per mostrare un testo con uno sfondo si usa questo codice

<style>
.elemento {
background-color:red;
}
</style>
<div class="elemento">Testo visualizzato all'interno del contenitore</div>

dove al posto del colore red si può anche inserire un codice di colore esadecimale. Il colore in inglese si digita così com'è, mentre il codice esadecimale del colore deve essere preceduto dal simbolo del cancelletto.

Inserire un gradiente significa avere uno sfondo che inizia con un dato colore che progressivamente si trasforma in un altro secondo una regola che può essere lineare o anche radiale.

Si può far partire il primo colore da una delle quattro direzioni o da uno dei quattro angoli. Ci sono in sostanza otto diverse opzioni di gradiente: top, top left, top right, bottom, bottom left, bottom right, left, right.

Per indicare la direzione si antepone la preposizione to alla direzione di arrivo. P.e. questo codice

<style>
.elemento {    
        color: #191919;     
        height: 10em;
        width: 30em;
        font-family: Georgia;    
        background: linear-gradient(to top right, yellow 0%, red 100%);
        font-size: 16px;
}
</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>

produce questo risultato:

Il colore giallo parte dal basso a sinistra per diventare progressivamente rosso in alto a destra (to top right). Ovviamente si possono fare esempi analoghi per tutte le altre sette direzioni lineari.

GRADIENTI CON PIÙ COLORI

Si possono creare degli sfondi con sfumature anche di più colori. P.e. questo codice

<style>
.elemento2 {    
        color: #000;
        max-width:500px;
        font-family: Georgia;
        text-align:justify;    
        background: linear-gradient(to left, #0FF 0%, #DF15AA 33%, #FF0 66%,  #AACFEF 100%);
        font-size: 18px;
}
</style>
<div class='elemento2'>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>

porta a questo risultato

Oltre ai codici dei colori, e alle loro percentuali, possono essere personalizzati anche gli altri parametri, quali la larghezza, la famiglia di font, la dimensione dei caratteri, l'allineamento e aggiungere anche altre righe di CSS. Il contenuto del rettangolo con lo sfondo deve essere incollato nel campo <div> con la classe dell'elemento.

Si può creare anche un gradiente radiale sostituendo il tag linear-gradient con radial-gradient. In questo caso la direzione della sfumatura parte dal centro e si irradia in tutte le direzioni. P.e. con questo codice:

<style>
.elemento3 {    
        color: #000;
        max-width:500px;
        font-family: Georgia;    
        background: radial-gradient(#FFF 0%, yellow 30%, green 50%, #0FF 70%, blue 100%);
        font-size: 20px;
        text-align:justify;
}
</style>
<div class='elemento3'>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>

si ottiene questo risultato.

Si possono creare gradienti radiali anche scegliendo la forma del gradiente. Quella di default è l'ellisse, come si vede anche dallo screenshot precedente. Possiamo però creare un gradiente circolare con il tag circle. Si può pure aggiungere della trasparenza con la notazione RGBA. P.e. questo codice:

<style>
.elemento4 {    
        color: #000;
        max-width:500px;
        font-family: Georgia;    
        background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
        font-size: 20px;
        text-align:justify;
}
</style>
<div class='elemento4'>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>

utilizza solo il colore rosso che parte da sinistra totalmente trasparente e arriva a destra totalmente opaco. La quantità di trasparenza è data dall'ultimo valore della quartina che va da 0 (trasparenza) a 1 (opacità).

Invece quest'altro codice

<style>
.elemento5 {    
        color: #000;
        max-width:500px;
        font-family: Georgia;    
        background: radial-gradient(circle, red, yellow, green, blue);
        font-size: 20px;
        text-align:justify;
}
</style>
<div class='elemento5'>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>

porta a un gradiente perfettamente circolare visto che abbiamo usato il tag circle.

Il gradiente di irradia in modo circolare nonostante il contenitore sia un rettangolo e non un quadrato.

SFONDI A STRISCE ORIZZONTALI E VERTICALI

Per creare uno sfondo con due strisce di colori orizzontali si usa un codice come questo

<style>
.elemento6 {
max-width:500px;
text-align:justify;
background: linear-gradient(yellow 50%, green 50%);
font-size:16px;
}
</style>
<div class="elemento6">
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 porta a questo risultato

Per avere un gradiente con due strisce verticali si usa un codice come il seguente

<style>
.elemento7 {
max-width:500px;
text-align:justify;
background: linear-gradient(to right, #82FFCA 50%, #F52B97 50%);
font-size:16px;
}
</style>
<div class="elemento7">
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 porta a questo risultato:

Invece per avere tre strisce verticali, e ottenere i colori della bandiera italiana, occorre inserire tre percentuali e i tre codici dei colori della nostra bandiera che sono per legge i seguenti #009246, #F1F2F1 e #CE2B37.

<style>
.bandiera-italiana {
height: 20em;
width: 30em;
font-size:1.2em;
text-align:justify;
background: linear-gradient(
to right,#009246 33.33%, #F1F2F1 33.33%, #F1F2F1 66.66%, #CE2B37 66.66%);
}
</style>
<div class="bandiera-italiana">
Aenean placerat. In vulputate urna eu arcu. Aliquam erat volutpat. Suspendisse potenti. Morbi mattis felis at nunc. Duis viverra diam non justo. In nisl. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere. Nullam lectus justo, vulputate eget, mollis sed, tempor sed, magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam neque. Curabitur ligula sapien, pulvinar a, vestibulum quis, facilisis vel, sapien. Nullam eget nisl. Donec vitae arcu.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Aliquam erat volutpat. Nunc auctor. Mauris pretium quam et urna. Fusce nibh. Duis risus. Curabitur sagittis hendrerit ante. Aliquam erat volutpat. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Duis condimentum augue id magna semper rutrum. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae,
</div>

con cui si ottiene il risultato mostrato nel primo screenshot. Qualche precisazione sul resto del codice. I valori di altezza e larghezza del rettangolo sono indicati secondo la unità di misura em, che rappresenta la dimensione di default dei font. Ho usato la stessa unità di misura per scegliere la dimensione dei caratteri. I colori partono da sinistra verso destra e il colore centrale va inserito due volte con due diverse percentuali.

Si possono anche creare sfondi a 4 strisce orizzontali o verticali. Per esempio questo codice

<style>
.quattro-strisce-verticali {
height: 20em;
width: 30em;
font-size:1.2em;
text-align:justify;
background: linear-gradient(
to right,#009246 25%, #F1F2F1 25%, #F1F2F1 50%, #CE2B37 50%, #CE2B37 75%, blue 75%);
}
</style>
<div class="quattro-strisce-verticali">
Testo da visualizzare nel rettangolo
</div>

e quest'altro

<style>
  .quattro-strisce-orizzontali {
  height: 20em;
  width: 30em;
  font-size:1.2em;
  text-align:justify;
  background: linear-gradient(#009246 25%, #F1F2F1 25%, #F1F2F1 50%, #CE2B37 50%, #CE2B37 75%, blue 75%);
  }
  </style>
  <div class="quattro-strisce-orizzontali">
  Testo da visualizzare nel rettangolo
  </div>

portano rispettivamente a questi risultati

Spero che questa personalizzazione per creare sfondi con gradienti possa essere utile a qualcuno. Ovviamente il codice dei CSS all'interno dei tag <style> può anche essere messo nel Tema di Blogger per inserire questi background in alcune, o in tutte le pagine del blog, o anche solo quando serve, riportando solo la classe.