CSS: Colori, background, gradienti

Transcript

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 <body>.
<!DOCTYPE html>
<html>
<head>
<title>Tecnologie web</title>
<style type="text/css">
li { background-color: gray; }
ul { background-color: red; }
</style>
</head>
<body>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>
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>
<html>
<head>
li#p1 { background-color: white;
ul { background-color: red; }
</style>
</head>
<body>
<ul>
<li id="p1">Elemento 1</li>
</ul>
opacity:
opacity:
opacity:
opacity:
1 }
.5 }
.25 }
0 }
</body>
</html>
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
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>
<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; }
</style>
</head>
<body>
<p id="p1">Lorem ipsum dolor sit amet...</p>
</body>
</html>
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).
<!DOCTYPE html>
<html>
<head>
p#p1 { background-image: url(imgs/html5.png);
background-repeat: no-repeat; }
background-repeat: repeat-x; }
background-repeat: repeat-y; }
</style>
</head>
<body>
</body>
</html>
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 {
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-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>
<html>
<head>
div {
border: 1px solid;
background-color: orange;
background-repeat: no-repeat;
background-position: 50% 50%;
}
</style>
</head>
<body>
<div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</body>
</html>
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-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>
<html>
<head>
div {
border: 1px solid;
background: orange url(imgs/html5.png) no-repeat
50% 50% fixed;
}
</style>
</head>
<body>
<div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</body>
</html>
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.
<!DOCTYPE html>
<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%;
}
</style>
</head>
<body>
<div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</body>
</html>
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).
<!DOCTYPE html>
<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%);
}
</style>
</head>
<body>
<div id="d1">
<p> </p><p> </p><p> </p>
</div>
<div id="d2">
<p> </p><p> </p><p> </p>
</div>
<button id="btn1">Button</button>
</body>
</html>
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, 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>
<html>
<head>
div#d1 {
background-image: -webkit-radial-gradient(60% 55%,
circle closest-corner, red, green 20%, yellow 70%, black);
}
</style>
</head>
<body>
<div id="d1">
<p> </p><p> </p><p> </p>
</div>
</body>
</html>
Per semplificare la creazione dei gradienti è possibile
utilizzare generatori online come quello disponibile al
seguente indirizzo http://www.colorzilla.com/gradienteditor/

CSS: Colori, background, gradienti

Transcript

Documenti analoghi

16 generatori di avatar per creare l`immagine del profilo

Il libro della giungla

Cinema e cosmetica: matrimonio perfetto

"Princesa De Mi Barrio", il rap italiano si fonde con il

Descrizione della struttura

La Baronessa di Carini