Background-color e la gestione dello sfondo con i CSS
Gestire l’aspetto dello sfondo con le proprietà CSS è molto semplice ma negli ultimi anni si sono aggiunte proprietà che permettono di gestire il background approfonditamente.
Oggi, come in queste ultime settimane, parlerò delle principali proprietà CSS, per determinare l’aspetto degli elementi html.
Lo sò…Annoierò magari i lettori più esperti ma negli ultimi tempi, con questo periodo di quarantena dovuto al Coronavirus ho ripassato alcune tra le principali proprietà css.
Quindi, dopo aver parlato della gestione dei bordi di un box html, ma anche della proprietà margin e padding, oggi tratterò un’altra proprietà.
Tra le molte esistenti, ho deciso di scrivere qualche riga sulla proprietà background.
Che detta così, sembro un pò approssimativo perchè esistono sia la proprietà background-image e sia il background-color.
Ma visto che ho già scritto qualche riga sull’utilizzo del background-image, oggi parlerò più del background-color.
Sperando di non annoiare troppo i designers con un più esperienza e che conosceranno al meglio questi cobcetti.
Ma si sà..Un pò di ripasso, ogni tanto, non fa mai male.
Cos’è la proprietà background-color ?
La proprietà background-color determina in maniera semplice quello che è lo sfondo del nostro box html.
Perciò, come si sarà capito anche dal nome, dopo aver creato il nostro elemento nel nostro file html, si potrà cambiare il colore inserendo questa proprietà nel css.
Come si potrà notare più avanti, questa proprietà ha una sintassi molto semplice.
Come ogni proprietà CSS, il backgreound-color accetta una serie di valori che vanno poi a dewterminare il colore dello sfondo.
I tipi di valore con cui dobbiamo inserire il nostro background-color sono i seguenti:
- Esadecimali
- RGB
- RGBA se si vuole avere un colore di sfondo con più opacità.
- HSL
- HSLA se si vuole, anche qui, utilizzare uno sfondo con opacità.
Nel caso, si usasse un valore differente da quelli indicati, il background non verrà settato e vedremo un box con sfondo trasparente.
Qual’è la differenza con il background-image?
Come detto, nelle prime righe di questo articolo, si può utilizzare il background-color o il background-image.
Ma qual’è la differenza tra le due proprietà?
E’ molto semplice…con il background-color si utilizzano i colori, senza nessuna immagine.
Invece si utilizza il background-image per dare un’immagine di sfondo ad un box, quindi si dovrà dare un url dell’immagine di sfondo.
Non è facile confondersi perchè hanno dei nomi ben differenti, anche se mi pareva giusto descrivere le differenze.
Per il background-color non c’è bisogno di gestire il background-repeat o il background-size, perchè il colore di sfondo si estende su tutto il box html.
Invece nel caso del background-image, se l’immagine di sfondo è più corta rispetto alla larghezza del box, l’immagine si ripeterà fino alla fine del box.
Qual’è la sintassi corretta?
Come tutte le proprietà, c’è una sintassi corretta per gestire al meglio il background-color nei file css.
Per inserire la proprietà background-color nei css, la sintassi è la seguente:
.box {
background-color: value of color
}
Come vediamo, dopo aver dichiarato la proprietà bisogna inserire il valore del nostro colore, tra quelli indicati nella parte iniziale dell’articolo.
Anche se questi valori, richiedono una sintassi differente, percjè alcuni richiedono più valori rispetto ad altri.
Parto con la sintassi per quando si vuole utilizzare valori esadecimali:
.box {
background-color: #eb8934;
}
Negli esadecimali, dopo aver dichiarato la proprietà background, bisogna inserire un valore preceduto dal carattere cancellletto ( # ).
In questo primo caso, se si vuole utilizzare un colore di sfondo con opacità, bisognerà abbinarci la proprietà opacity.
Se si vuole utilizzare invece i colori con gli RGB, bisogna utilizzare la seguente sintassi:
.box {
background-color: rgb (235, 137, 52);
}
Come tutti i grafici sapranno, l’rgb è la somma di tre colori che sono il Rosso ( R ), il verde ( G ), e Blu ( B ).
In questo caso se si vuole inserire un colore di sfondo con una leggere opacità basterà utilizzare la soluzione con valori in RGBA:
.box {
background-color: rgb (235, 137, 52, 0.5);
}
Cambia poco con la soluzione in RGB, infatti l’ultimo valore è per gestire l’opacità, e qui il valore massimo è 1, quello minimo è 0.
Infine si possono utilizzare i valori in HSL, che è lultima soluzione di quelle elencate all’inizio dell’articolo:
.box {
background-color: hsl (28°, 82%, 56%);
}
Anche qui, come nell’ RGB, vediamo tre valori all’interno delle parentesi tonde, ma chiaramente hanno un significato differente.
Il primo valore è l’ hue ( H ) cioè il colore e deve avere un cololore in gradi.
Il secondo valore è la saturation ( S ) che è la saturazione del colore, qui il valore deve essere un numero in percentuale.
il terzo ed ultimo valore è il lightness ( L ) cioè la luminosità del nostro colore di sfondo, ed anche qui, il valore deve essere un numero in percentuale.
Usando un valore in HSL, si può lavorare sull’opacità inserendo un valore in più senza utilizzare la proprietà opacity, quindi si utilizzeraà l’HSLA:
.box {
background-color: hsla (28°, 82%, 56%, 0.5);
}
Qui, come nel caso del RGBA, ‘ultimo valore è il canale alpha e lavora, per l’appunto, sull’opacità.
Ecco..in queste righe ho illustrato praticamente tutti i casi utili per utilizzare correttamente il background-color.
Come utilizzare un sfondo unico per tutto la pagina?
Molti web designer utilizzano un colore di sfondo unico per tutto il documento html.
In questo caso si possono utilizzare due soluzioni.
La prima è dare al nostro body un background color, come in questo esempio:
body {
background-color: hsla (28°, 82%, 56%, 0.5);
}
Pochissime righe per dare un colore di sfopndo unico a tutta la pagina html.
Se no, la seconda soluzione è inserire un div o una section html, con una larghezza e altezza al 100% e dargli un colore di sfondo.
.wrapper {
height:100%;
width:100%;
background-color: hsla (28°, 82%, 56%, 0.5);
}
Ma per intraprendere questa strada bisognerà dare un padding e margin a 0px sul tag <html> <body> :
html, body {
padding:0;
margin:0;
}
E non solo…dare anche un altezza del 100%, sempre a questi due tag html:
html, body {
height:100%;
padding:0;
margin:0;
}
.wrapper {
height:100%;
width:100%;
background-color: hsla (28°, 82%, 56%, 0.5);
}
A livello di struttura html, poi si dovrà inserire gli altri elementi html, all’interno dell’elemento con classe wrapper.
Come avere un colore di sfondo con una sfumatura?
Come ultima alternativa per dare un colore al roprio sfondo, è quello di utilizzare un gradiente, cioè una sfumatura.
Ho già trattato l’argomento, descrivendo come funzionano i gradienti css, con un pezzo scritto agli albori di questo blog.
Ha una sintassi che è leggermente diversa rispetto a quella che si utilizza per il background-color, ma comunque ne descrivo la sintassi e le funzionalità principali.
In questo caso non si usa la parola background-color, ma basta aggiungere il background, come nell’esempio seguente:
.box { background: linear-gradient (direction, color1, color2) }Qui vediamo come impostare un gradiente con una sintassi CSS corretta.
Il primo valore è la direzone del nostro gradiente, se parte dal basso verso l’alto o viceversa.
Il secondo valore è il primo colore della nostra sfumatura, e come terzo valore c’è il secondo colore della nostra sfumatura.
In questo caso ho usato un gradiente lineare; ma in caso si volesse creare un gradiente radiale, basterà inserire la seguente sintassi:
.box { background: radial-gradient (position of radial shape, color1, color2) }Come si può notare, la sintassi della proprietà rispetto al linea gradient cambia veramente di poco.
L’unica differenze è che il primo valore corrisponde alla posizione del nostro radiale, invece quelli successivi saranno sempre i colori che si utilizzano per formare il gradiente.
Link utili
Come in questi ultimi articoli del blog, anche qui ho deciso di consigliare alcuni link utili che possono servire per approfondire l’argomento degli sfondi.
Come primo link, consiglio sempre quello del W3school, che ha una sezione che parla approfonditamente della proprietà background-color, ed anche quella sui gradienti.
Un’altro sito che consiglio di consultare è Codrops, dove l’autrice del blog ha appena inserito una sezione interamente dedicata a tutte le proprietà CSS.
La conclusione
In queste poche righe abbiamo visto come utilizzare la proprietà background-color, che permette di colorare lo sfondo dei nostri elementi html.
Nella parte finale di questo articolo, sono andato leggermente al di fuori di questa proprietà, descrivendo come possiamo creare un gradiente con i CSS; che richiede una sintassi differente.
