CSS: Colori, background, gradienti - Laboratorio di Tecnologie Web Dott. Stefano Burigat

Laboratorio di Tecnologie Web

    CSS: Colori,
background, gradienti
       Dott. Stefano Burigat
       www.dimi.uniud.it/burigat

Colore di foreground
Come abbiamo visto in precedenti esempi, è possibile
modificare il colore del testo tramite l'utilizzo della
proprietà “color”. Per la precisione, la proprietà “color”
specifica il colore di foreground di un elemento, il che
corrisponde a modificarne il colore del testo e del bordo (a
meno di non utilizzare una proprietà più specifica per
quest'ultimo).

Specifica del colore
Il valore di “color” può essere specificato per nome,
utilizzando uno dei nomi di colore predefiniti oppure, più
comunemente, tramite un valore numerico che descrive un
colore RGB o HSL (in CSS3).
I nomi predefiniti utilizzabili per specificare un colore sono
17 in CSS2.1 e 140 in CSS3 140 (potete trovare la lista
all'indirizzo http://www.w3schools.com/cssref/
css_colornames.asp).

p { color: gray; }

Per specificare un colore RGB, si può utilizzare la
notazione esadecimale oppure la notazione funzionale. La
notazione esadecimale consiste nel carattere speciale #
seguito da 6 caratteri esadecimali, due per ciascuna delle
componenti red, green e blue.
p { color: #636662; }

Nel caso in cui ogni componente sia rappresentata da due

caratteri uguali, allora è possibile utilizzare un solo
carattere per componente anziché entrambi.
p { color: #6F2; } /* equivale a #66FF22 */

La notazione funzionale per specificare un colore RGB si
basa sull'utilizzo della funzione rgb(val1,val2,val3) dove
val1, val2, val3 sono dei numeri compresi tra 0 e 255
(oppure delle percentuali tra 0 e 100%) che specificano i tre
componenti red, green e blue. rgb(0,0,0) corrisponde al
nero, rgb(255,255,255) al bianco.
p { color: rgb(102,102,102); }

L'utilizzo della notazione esadecimale o funzionale
consente di poter specificare una quantità di colori molto
superiore rispetto alla specifica per nome. D'altra parte,
nella maggior parte dei casi, è necessario ricorrere ad un
tool grafico oppure un sito come www.colorpicker.com per
determinare quali valori utilizzare per un dato colore.

CSS3 ha introdotto la possibilità di specificare i colori in
notazione HSL (Hue, Saturation, Lightness). Hue
rappresenta il tono di base ed è un valore tra 0 e 360,
saturation determina la saturazione ed è un valore
precentuale (dove 0% corrisponde a rendere il colore
grigio), lightness determina la luminosità del colore ed è un
valore percentuale (dove 0% corrisponde a luminosità
minima). Il sistema HSL è più intuitivo rispetto al sistema
RGB in quanto permette di creare più facilmente delle
varianti di un colore di base.

p { color: hsl(265, 23%, 90%); }

Trasparenza
Sia la notazione RGB che quella HSL permettono in
inserire un quarto valore che rappresenta il livello di
trasparenza del colore che si sta impostando. Il valore
(decimale) può variare da 0 (trasparenza piena) a 1 (opacità
piena). Per poter aggiungere il livello di trasparenza è
necessario utilizzare la notazione rgba o hsla come negli
esempi seguenti.
p#p1 { color: rgba(0, 0, 0, .5); }
p#p2 { color: hsla(0, 0%, 0%, .5); }

L'unico problema nell'utilizzare tale notazione è che IE8 e
precedenti non la supportano. Una possibile soluzione è
specificare una versione opaca del colore da far precedere
alla versione con trasparenza (in tal modo IE userà la
versione opaca e tralascierà quella con la trasparenza
mentre gli altri browser sovrascriveranno la prima con la
seconda).
h1 {
   color: rgb(120, 120, 120);
   color: rgba(0, 0, 0, 50%);
}

Se si vuole supportare la trasparenza anche in IE8 e
precedenti, è necessario utilizzare una soluzione alternativa
(ad esempio, un'immagine trasparente o un filtro IE
proprietario) e attivarla con un commento condizionale. I
commenti condizionali permettono di specificare regole di

stile per IE che gli altri browser ignorano, come
nell'esempio seguente che si applica alla versioni di IE
minori o uguali di IE8.

Colore di background
La proprietà “background-color” può essere utilizzata per
specificare il colore di background dell'area occupata da un
qualsiasi elemento. Tale area include il contenuto vero e
proprio e lo spazio aggiuntivo inserito tramite padding (che
vedremo più avanti) fino al bordo esterno dell'elemento. I
valori possibili sono i valori di colore che abbiamo già visto
nel caso della proprietà “color” (inclusa la possibilità di
specificare il livello di trasparenza) ed il valore transparent
che è il default. “background-color” non viene ereditata ma
poiché il colore di default è transparent, può sembrare che
anche i figli di un elemento ne ereditino il colore di
background. Per applicare lo stesso colore di fondo ad una
pagina, è quindi possibile applicare “background-color”
all'elemento .

       Tecnologie web
       
          li { background-color: gray; }
          ul { background-color: red; }

Elemento 1
          Elemento 2
          Elemento 3
      
Opacità
CSS3 ha introdotto la possibilità di variare il livello di
trasparenza di un elemento tramite utilizzo della proprietà
“opacity”, che non viene ereditata. Il valore della proprietà
è un numero tra 0 (trasparenza piena) e 1 (opacità piena).
L'utilizzo di questa proprietà consente di specificare la
trasparenza del foreground e del background in una sola
volta. IE8 e precedenti non supportano “opacity”.

       Tecnologie web
       
          li#p1 { background-color: white;   opacity:   1 }
          li#p2 { background-color: white;   opacity:   .5 }
          li#p3 { background-color: white;   opacity:   .25 }
          li#p4 { background-color: white;   opacity:   0 }
          ul { background-color: red; }
       
          Elemento 1
          Elemento 2
          Elemento 3
          Elemento 4

Utilizzo del colore
Per utilizzare in modo appopriato i colori nelle pagine web,
si dovrebbero seguire alcune linee guida fondamentali:
  • Limitare il numero di colori utilizzati. Un uso
    eccessivo di colori crea “color pollution” e rende
    difficile “leggere” un sito.
  • Assicurarsi che ci sia adeguato contrasto tra i colori di
    background e quelli di foreground per facilitare la
    lettura. In generale, è preferibile utilizzare testo scuro
    su fondo chiaro.
  • Specificare assieme sia i colori di background che
    quelli di foreground per evitare strane combinazioni di
    colori dovute a fogli di stile utente.

Immagini di background
Abbiamo incontrato in precedenza l'elemento html ,
utilizzato per inserire immagini all'interno del contenuto
delle pagine. CSS mette invece a disposizione diverse
proprietà per includere nelle pagine web delle immagini
decorative di background, come sfondi, separatori, etc.

background-image
La proprietà “background-image” permette di aggiungere
un'immagine di background ad un qualsiasi elemento. Il

valore della proprietà è il path dell'immagine (relativo al
file in cui si trova la regola) espresso in notazione
funzionale url() come nell'esempio seguente.

       Tecnologie web
       
          p#p1 { background-image: url(imgs/css3.png); }
          p#p2 { background-image: url(imgs/css3.png); opacity:
.5 }
          body { background-image: url(imgs/html5.png);
background-color: orange; }
       
          Lorem ipsum dolor sit amet...
          Lorem ipsum dolor sit amet...
   
Di default, l'immagine viene inserita nell'angolo in alto a
sinistra dell'elemento e viene replicata sia orizzontalmente
che verticalmente fino a riempire l'intero elemento. Se
vengono specificate sia “background-image” che
“background-color”, l'immagine viene mostrata sopra al
colore (e lo fa intravedere in caso di trasparenza). E' sempre
consigliabile definire un colore di background di tonalità
simile a quella dell'immagine che si vuole inserire.

background-repeat
La proprietà “background-repeat” determina in che modo
un'immagine inserita tramite “background-image” debba
essere replicata. I valori inseribili sono repeat (il default),

repeat-x (replica orizzontalmente su una sola riga), repeat-y
(replica verticalmente su una sola colonna), no-repeat
(nessuna replica).

       Tecnologie web
       
          p#p1 { background-image: url(imgs/html5.png);
background-repeat: no-repeat; }
          p#p2 { background-image: url(imgs/html5.png);
background-repeat: repeat-x; }
          p#p3 { background-image: url(imgs/html5.png);
background-repeat: repeat-y; }
       
       Lorem ipsum dolor sit amet...
       Lorem ipsum dolor sit amet...
       Lorem ipsum dolor sit amet...
   
background-position
La proprietà “background-position” permette di specificare
la posizione dell'immagine inserita tramite “background-
image” all'interno dell'elemento considerato. Per
posizionare l'immagine, vengono utilizzati due valori, uno
per la posizione orizzontale, uno per quella verticale. I
valori possono essere definiti in diversi modi:
  • Tramite parole chiave left, right, top, bottom, e center.
    L'esempio seguente posiziona un'immagine nell'angolo
    in basso a sinistra dell'elemento  che la contiene.
    div {

background-image: url(imgs/html5.png);
      background-position: left bottom;
  }

  Se si inserisce un solo valore, si assume che il secondo
  corrisponda a center.
• Come distanza dall'angolo in alto a sinistra
  dell'elemento contenitore (in una delle unità di misura
  della lunghezza viste in precedenza).
  div {
    background-image: url(imgs/html5.png);
    background-position: 200px 50px;
  }

• Tramite coppia di valori percentuali, dove 0% 0%
  corrisponde all'angolo in alto a sinistra e 100% 100%
  all'angolo in basso a destra. Come per le parole chiave,
  l'assenza di uno dei valori implica percentuale 50%
  (centro).
  
       Tecnologie web
       
           div {
              border: 1px solid;
              background-color: orange;
              background-image: url(imgs/html5.png);
              background-repeat: no-repeat;
              background-position: 50% 50%;
           }

 
             
background-attachment
La proprietà “background-attachment” permette di decidere
se un'immagine di background deve scrollare assieme al
contenuto dell'elemento in cui è inserita (valore scroll,
impostato di default) oppure se deve rimanere fissa nella
stessa posizione in relazione alla finestra del browser.
div {
   background-image: url(imgs/html5.png);
   background-position: 200px 50px;
   background-attachment: fixed;
}

background
La proprietà “background” può essere utilizzata per
specificare in una sola volta tutte le proprietà relative al
background descritte nelle sezioni precedenti. I valori
possono essere inseriti nell'ordine che si vuole a patto che il
valore orizzontale della proprietà “background-position”
appaia prima del valore verticale.

Tecnologie web
      
          div {
             border: 1px solid;
             background: orange url(imgs/html5.png) no-repeat
50% 50% fixed;
          }
      
Attenzione che qualunque proprietà non venga specificata
esplicitamente in caso di utilizzo di “background” viene
reinizializzata al suo valore di default, non mantiene il
valore che assumeva in precedenza.

Background multipli
CSS3 permette di applicare immagini di background
multiple allo stesso elemento. Quando si specificano le
diverse proprietà viste in precedenza singolarmente, è
sufficiente separare i diversi valori, ciascuno corrispondente
ad una delle immagini di background, tramite virgole. Sarà
il browser ad associare i valori all'immagine corretta.

Tecnologie web
       
          div {
              border: 1px solid;
              background-image: url(imgs/html5.png),
url(imgs/css3.png);
              background-repeat: no-repeat, no-repeat;
              background-position: 0% 0%, 100% 100%;
          }
       
In caso di utilizzo della proprietà “background”, i valori
vengono raggruppati per immagine.
div {
   background:
      url(imgs/html5.png) no-repeat 0% 0%,
      url(imgs/css3.png) no-repeat 100% 100%,
}

Va tenuto presente che le immagini vengono disegnate
nell'ordine inverso a quello indicato e quindi immagini
precedenti possono sovrapporsi a quelle successive.

Gradienti
CSS3 ha introdotto la possibilità di definire gradienti di
colore come background di un elemento (in generale
dovunque possa essere impostata un'immagine tramite CSS
come per “list-style-image”).

Esistono due tipi di gradiente:
  • I gradienti lineari permettono di creare gradienti che
    variano in modo lineare da un lato ad un altro
    dell'elemento.
  • I gradienti radiali iniziano in un punto e si espandono
    verso l'esterno in modo circolare o ellittico.

Per impostare un gradiente lineare si utilizza la notazione
funzionale linear-gradient() i cui argomenti sono costituiti
dalla direzione nella quale si sviluppa il gradiente e dai
colori attraverso i quali il gradiente deve passare (come
minimo due, quello iniziale e quello finale). La direzione
può essere specificata tramite un valore angolare o tramite
parola chiave. In notazione angolare, 0deg indica una
direzione dal basso verso l'alto e, procedendo in senso
orario, 90deg indica una direzione da sinistra verso destra,
180deg dall'alto verso il basso, 270deg da destra verso
sinistra. Le parole chiave specificano una direzione in
incrementi di 90 gradi (to top, to right, to bottom, to left). I
colori possono essere specificati nei modi visti in
precedenza e sono seguiti da un valore percentuale che
indica in quale punto nella direzione indicata deve essere
visualizzato quel colore (i valori 0% e 100% possono essere

omessi).

       Tecnologie web
       
          div#d1 {
              background-image: linear-gradient(180deg, yellow,
green);
          }
          div#d2 {
              background-image: linear-gradient(to right,
yellow, orange 25%, blue);
          }
          button#btn1 {
              font-size: 2em;
              background-image: linear-gradient(to bottom,
#e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
          }
       
             
       
             
       
       Button
   
I gradienti radiali vengono impostati utilizzando la
notazione funzionale radial-gradient() i cui argomenti, oltre
ai colori da utilizzare, sono costituiti dalla forma del
gradiente (circle oppure ellipse, circle è il default), dalla
posizione del centro del gradiente (stessa sintassi della
proprietà “background-position”) e dalla dimensione
dell'effetto, specificata come lunghezza del raggio o tramite

una parola chiave che indica il lato o angolo in cui deve
fermarsi l'ultimo colore (closest-side, farthest-side, closest-
corner, farthest-corner, cover, contain).
NOTA: la funzione radial-gradient() non sembra funzionare
in Chrome ma si può utilizzare il prefisso proprietario
-webkit- (mantenendo il resto della sintassi) per ottenere lo
stesso risultato (esiste un prefisso di questo tipo per ogni
browser). Ovviamente, in tal caso è necessario definire
regole per tutti i browser.

       Tecnologie web
       
          div#d1 {
              background-image: -webkit-radial-gradient(60% 55%,
circle closest-corner, red, green 20%, yellow 70%, black);
          }
       
             
       
Per semplificare la creazione dei gradienti è possibile
utilizzare generatori online come quello disponibile al
seguente indirizzo http://www.colorzilla.com/gradient-
editor/