Come creare degli sfondi colorati a strisce con i CSS.

Come creare degli sfondi a strisce orizzontali e verticali e come creare un background come la bandiera italiana.

Quando si utilizzano i fogli di stile per definire la regola del colore dello sfondo si usa il tag background associato a un colore o a una immagine di sfondo. I neofiti possono leggersi il mio ebook gratuito Guida all'HTML per avere una infarinatura di base su questo argomento.

La sintassi che si usa in questo caso può essere simile a questa

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

dove si possono aggiungere alla regola altre righe che riguardino per esempio il colore del testo, la famiglia di caratteri, la dimensione dei font, la larghezza e l'altezza del contenitore e altro ancora. Ricordo che la classe dichiarata poi può essere ripresa con un tag <div>, <p>, <span> e che il colore può essere determinato dal suo nome in lingua inglese o dal suo codice.

SFONDI CON GRADIENTE

Il gradiente è uno strumento molto utile nei programmi di grafica tipo Photoshop o Gimp. È però una funzionalità che si può usare anche per rendere gli sfondi delle pagine web più originali. Facciamo qualche esempio che renda l'idea meglio di mille discorsi. Il seguente codice

<style>
.elemento {
background: linear-gradient(lightblue, tomato);
}
</style>
<div class="elemento">
Testo visualizzato all'interno del contenitore
</div>

serve per creare uno sfondo con tutti i colori intermedi tra i due estremi con questo aspetto

Come detto al posto del nome possono essere usati anche i codici dei colori in questo modo

<style>
.elemento {
background: linear-gradient(#003366, #ff0000);
}
</style>
<div class="elemento">
Testo visualizzato all'interno del contenitore
</div>

SFONDI A STRISCE ORIZZONTALI

Se invece di uno sfondo con un passaggio progressivo da un colore all'altro preferiamo creare delle strisce si utilizza un codice simile a questo

<style>
.elemento {
background: linear-gradient(lightblue 50%, lightgreen 50%);
}
</style>
<div class="elemento">
Testo visualizzato all'interno del contenitore
</div>

che produce questo risultato

Anche in questo caso si possono mettere i codici al posto dei nomi dei colori

<style>
.elemento {
background: linear-gradient(#82FFCA 50%, #F52B97 50%);
}
</style>
<div class="elemento">
Testo visualizzato all'interno del contenitore
</div>

SFONDO A STRISCE VERTICALI E BANDIERA ITALIANA

Invece che in orizzontale le strisce possono essere visualizzate in verticale. Per esempio questo codice

<style>
.bandiera-italiana {
height: 20em;
width: 30em;
background: linear-gradient(
to right,green 33.33%, white 33.33%, white 66.66%, red 66.66%);
}
</style>
<div class="bandiera-italiana">
Testo da visualizzare
</div>

genera lo sfondo della bandiera italiana. Si possono personalizzare altezza e larghezza del contenitore. Se si vuole fare un lavoro più preciso si possono utilizzare non dei generici verde, bianco e rosso ma proprio i codici della bandiera che sono #009246, #F1F2F1 e #CE2B37. Il codice allora diventa

<style>
.bandiera-italiana {
height: 20em;
width: 30em;
background: linear-gradient(
to right,#009246 33.33%, #F1F2F1 33.33%, #F1F2F1 66.66%, #CE2B37 66.66%);
}
</style>
<div class="bandiera-italiana">
Testo da visualizzare
</div>

e porta a questo risultato

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac justo sed tortor tincidunt pretium. Fusce ac pellentesque leo. Vivamus fermentum augue non ullamcorper placerat. Aliquam ullamcorper lectus ac mattis posuere. Phasellus hendrerit volutpat dignissim. Suspendisse et risus eu leo gravida tincidunt vitae sed urna. Pellentesque dignissim turpis in felis eleifend bibendum. Praesent turpis odio, euismod vel euismod ac, semper ut eros. Vestibulum sed eros nec libero gravida luctus id eu metus. Praesent erat eros, cursus quis volutpat sit amet, auctor ut eros. Sed molestie enim sit amet nisi mollis tincidunt. Nulla facilisi. Aenean ut aliquet est, quis pellentesque odio. Sed eleifend nisi a justo consectetur aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque aliquet sem non justo fermentum dignissim. Sed cursus nulla at ligula scelerisque, et facilisis turpis pellentesque. Morbi feugiat tincidunt justo, sit amet lobortis elit faucibus nec. Donec ac posuere ante. Aliquam eget luctus tellus. Suspendisse varius ultrices risus, ac venenatis elit porttitor quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor non nunc lobortis vestibulum. Quisque luctus quis tortor id volutpat. Praesent ullamcorper ultricies commodo. Cras a lorem vehicula, ultricies lacus vel, scelerisque eros. Nullam eget lectus eget sem viverra lacinia. Sed quis augue aliquam, laoreet eros ut, euismod tortor. Phasellus eget ante a magna dignissim pretium quis ut elit. Pellentesque tincidunt vel ipsum id semper.

COME CREARE SFONDI A QUATTRO STRISCE

Concludo mostrando il codice per creare uno sfondo a quattro strisce in verticale

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

quindi il codice per lo sfondo a quattro strisce orizzontali

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

dove possono essere personalizzati i codici dei colori. Usando la stessa sintassi ma la percentuale 20% al posto del 25% si può dividere lo sfondo in 5 parti e così via

Spero che questi codici possano essere utili per delle personalizzazioni particolari e originali. Ovviamente la parte dei CSS può anche essere messa nel modello per inserire questi background in tutte le pagine del blog.