CSS: Colori, background, gradienti

Transcript

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

2 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 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

3 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 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.

4 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

5 stile per IE che gli altri browser ignorano, come nell'esempio seguente che si applica alla versioni di IE minori o uguali di IE8. <!--[if lte IE 8]> <style> p {background: transparent url(black-50.png); <![endif]--> 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. <!DOCTYPE html> <head> li { background-color: gray; ul { background-color: red;

6 <ul> <li>elemento 1</li> <li>elemento 2</li> <li>elemento 3</li> </ul> </body> 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. <!DOCTYPE html> <head> 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; <ul> <li id="p1">elemento 1</li> <li id="p2">elemento 2</li> <li id="p3">elemento 3</li> <li id="p4">elemento 4</li> </ul>

7 </body> 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 <img>, 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

8 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. <!DOCTYPE html> <head> 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; <p id="p1">lorem ipsum dolor sit amet...</p> <p id="p2">lorem ipsum dolor sit amet...</p> </body> 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),

9 repeat-x (replica orizzontalmente su una sola riga), repeat-y (replica verticalmente su una sola colonna), no-repeat (nessuna replica). <!DOCTYPE html> <head> 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; <p id="p1">lorem ipsum dolor sit amet...</p> <p id="p2">lorem ipsum dolor sit amet...</p> <p id="p3">lorem ipsum dolor sit amet...</p> </body> background-position La proprietà background-position permette di specificare la posizione dell'immagine inserita tramite backgroundimage 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 <div> che la contiene. div {

10 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). <!DOCTYPE html> <head> div { border: 1px solid; background-color: orange; background-image: url(imgs/html5.png); background-repeat: no-repeat; background-position: 50% 50%; <div>

11 </div> </body> 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. <!DOCTYPE html>

12 <head> div { border: 1px solid; background: orange url(imgs/html5.png) no-repeat 50% 50% fixed; <div> </div> </body> 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.

13 <!DOCTYPE html> <head> 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%; <div> </div> </body> 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.

14 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

15 omessi). <!DOCTYPE html> <head> 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%); <div id="d1"> </div> <div id="d2"> </div> <button id="btn1">button</button> </body> 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

16 una parola chiave che indica il lato o angolo in cui deve fermarsi l'ultimo colore (closest-side, farthest-side, closestcorner, 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. <!DOCTYPE html> <head> div#d1 { background-image: -webkit-radial-gradient(60% 55%, circle closest-corner, red, green 20%, yellow 70%, black); <div id="d1"> </div> </body> Per semplificare la creazione dei gradienti è possibile utilizzare generatori online come quello disponibile al seguente indirizzo