I colori e gli sfondi

Dopo aver visto come si adoperano i links, le immagini grafiche ed il testo siamo praticamente in grado di produrre un documento completo in xhtml ma visto che anche l’occhio vuole la sua parte, vedremo come abbellire il documento con colori ed immagini di sfondo facendo uso del foglio di style.

Il colore del testo è definito dalla proprietà color alla quale è possibile assegnare uno qualsiasi dei 16 milioni di colori disponibili. Stessa cosa per il colore di sfondo definito dalla proprietà background-color che accetta gli stessi valori assegnabili a color con l’aggiunta del valore transparent.

Se non vengono specificati i colori, siano questi per il testo e/o per lo sfondo, saranno usati quelli scelti dalle impostazioni del sistema operativo dell’utente, a questo proposito è bene specificare sempre entrambi i due parametri per evitare che magari un testo (o uno sfondo) di un colore possa risultare uguale o simile ad un colore di un testo o di uno sfondo impostato dall’utente nel proprio browser. Specificandoli entrambi si avrà la certezza di una buona leggibilità sempre, a prescindere dalle impostazioni personalizzate. Ritengo che non ci sia cosa peggiore che visitare un sito che costringe ad uno sforzo visivo per leggere testi scritti magari in rosso o in blu su sfondo scuro, oppure giallo su sfondo chiaro, in quei casi io chiudo la pagina e non ritorno su quel sito neppure se fosse l’unico a trattare l’argomento di mio interesse.

Vediamo come inserire nel nostro foglio di style il colore blu per il testo su sfondo bianco:

Nelle lezioni precedenti si è accennato alla eredità dei vari elementi (tags) inseriti all’interno di altri elementi, in base a questa regola tutto quello che viene assegnato all’elemento body, che è padre di tutti gli altri elementi inseriti al suo interno, farà si che i parametri a lui assegnati saranno applicati anche a tutti gli altri elementi, a meno che non abbiano una loro definizione personalizzata. Per come inserire i parametri e per i vari attributi e loro valori vi rimando alla Guida CSS.

In alternativa ad un colore a tinta unita è possibile usare come sfondo una immagine grafica usando la proprietà background-image che accetta come parametro un url valido, con percorso (assoluto o relativo), seguito dal nome dell’immagine da adoperare, questa potrà essere solo di tipo: gif, jpg o png, gli stessi formati grafici ammessi dal web per le immagini.

Le immagini usate come sfondo si ripetono in tutte le direzioni fino a riempire completamente l’intera pagina, questo a prescindere dalle dimensioni della finestra del browser e dalla sua risoluzione grafica. Scorrono insieme al testo, a meno che non si intervenga su apposite proprietà che ne cambiano il comportamento di default, vediamo un esempio, questa l’immagine grafica che useremo come sfondo:

e su questo link il risultato dell’immagine che riempie l’intera pagina.

Gli sfondi colorati, siano a tinta unita o fatti da immagini grafiche sono applicabili anche a singole parti di codice all’interno dello stesso documento, praticamente quello che vedete qui nei vari box di questo corso oppure nell’esempio più enfatizzato come questo sotto:

Ho voluto usare un colore del testo rosso su uno sfondo variopinto proprio per evidenziare meglio e maggiormente quanto detto all’inizio di questa lezione: la difficoltà di leggere un testo quando non c’è il giusto contrasto cromatico e la giusta differenza di luminosità con lo sfondo.

Ci sono altre proprietà che è possibile adoperare insieme alla proprietà background-image, si tratta di:

background-attachment: scroll
background-attachment: fixed

I valori scroll o fixed
Servono rispettivamente per tenere fermo o muovere lo sfondo mentre si scorre col testo lungo la pagina, per default lo sfondo scorre con la pagina, scroll se si adopera fixed lo sfondo resta fermo.
(su i due links è possibile vedere il relativo esempio pratico)

background-repeat: repeat-y;
background-repeat: repeat-x;
background-repeat: no-repeat

I valori repeat-y o repeat-x o no-repeat
Servono per avere una ripetizione dell’immagine di sfondo non su tutta la pagina ma soltanto in senso verticale: repeat-y o soltanto in senso orizzontale: repeat-xo nessuna ripetizione: no-repeat
(su i tre links è possibile vedere il relativo esempio pratico)

Con background-repeat: no-repeat è possibile adoperare un’altra proprietà:
background-position: xxx, yyy

con i seguenti possibili valori:

xxx

background-position: top
background-position: center
background-position: bottom

yyy

background-position: left
background-position: center
background-position: right

o posizioni numeriche con

background-position: 100px, 50px
background-position: 50%, 30%

I valori top, center, bottom, left, right, valori numerici, valori in percentuale
servono per posizionare l’immagine di sfondo in alto, al centro in basso, a sinistra, a destra, ad una precisa distanza dai bordi, ad una distanza dai bordi della finestra del browser che varia in percentuale.

E’ possibile adoperare uno solo valore di x e y o combinarli entrambi come in questi esempi: bottom e left, top e right e tutte le altre possibili combinazioni.
(su i vari links è possibile vedere un esempio pratico su pagina a parte)

Con questa lezione avete imparato ad usare i colori e le immagini grafiche di sfondo, nella prossima lezione vedremo cosa si deve inserire nella parte head e l’importanza dei meta comandi per essere reperiti meglio dai motori di ricerca.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.