CSS / GESTIONE DEL COLORE E DEI BACKGROUND · INFORMATICA E GRAFICA PER IL WEB | HTML+CSS | docente: Alessandro Gabbiadini 7 Il colore del testo e dei bordi è definito tramite la

INFORMATICA E GRAFICA PER IL WEB | HTML+CSS | docente: Alessandro Gabbiadini 1

CSS / GESTIONE DEL COLORE E DEI BACKGROUND


CSS / DEFINIRE IL COLORE SECONDO IL MDELLO RGB

Modello Additivo del colore

Le lunghezze d’onda della luce si sommano

la somma di tutte le lunghezze d’onda dei vari colori da il bianco


» La descrizione dei tre colori principali dell’RGB (Red Green Blue) avviene attraverso un numero da 0 a 255 (28 bit) per ogni colore della terna.

» Questo ci consente di avere una gamma pari a 256*256*256=16777216 colori.

» RGB ≡ -> Red, Green, Blue » Ogni pizel di un monitor LED ci permette di modulare i colori attraverso questa codifica in bit, attraverso la codifica di rosso , verde e blu (luce emessa dai diodi LED)

COME FUNZIONA IL SISTEMA RGB


» Nomi predefiniti: black, green, navy, aqua... » I valori di RGB

» valori rgb rgb(r,g,b) (r,g,b = {0 - 255}) Ogni canale ha un valore da 0 a 255 (28 per canale). Il nero avrà i valori più bassi: rgb(0,0,0), il bianco quelli più alti: rgb(255,255,255)

» percentuali rgb rgb(r%,g%,b%) (r,g,b = {0.0 - 100.0}) Ogni canale ha un valore da 0.0% a 100.0%. Il nero avrà i valori più bassi: rgb(0%,0%,0%)

» notazione esadecimale (HEX) o colori HTML #rrggbb (r,g,b = {0 - F}): ogni canale è definito da due cifre. Il valore più basso è 00 (0), il più alto è FF (255).

es bianco #FFFFFF nero #000000 rosso #FF0000 ciclamino #D51364

Per esempio, i valori aqua, #00FFFF, rgb(0,255,255) e rgb(0,100%,100%) si riferiscono tutti al medesimo colore verde acqua.

CSS / DEFINIRE IL COLORE


In alcuni casì può essere utile avere degli elementi di colore in trasparenza, con i CSS3 è stata introdotta una nuova codifica rgba, che aggiunge il canale alpha alla codifica rgb.

I valori dei canali rgb vengono definiti come nella notazione rgb (0-255). Mentre il canale alpha viene definito con un valore da 0.0 a 1.

Per esempio: un nero con trasparenza al 70% avrà valori rgba(0, 0, 0, 0.7) un rosso con trasparenza al 50% avrà valori rgba(255, 0, 0, 0.5)

CSS3 / DEFINIRE IL COLORE E LA TRASPARENZA



Il colore del testo e dei bordi è definito tramite la proprietà color.

Il valore predefinito è quello ereditato dal testo del blocco padre.

Sintassi dichiarazione:

color: #FF0000;

color: rgb(255,0,0);

Se non diversamente specificato, il colore per <body> (o meglio ancora <html>) è quello assegnato per il testo dalle impostazioni del sistema operativo o del browser, spesso ma non necessariamente è nero.

CSS / COLORE IN PRIMO PIANO (TESTO E BORDI)


Lo sfondo può essere: » Trasparente » Caratterizzato da una tinta piatta (colore) » Riempito del tutto o in parte da una immagine

Lo sfondo può essere gestito attraverso le seguenti proprietà: » background-color » background-image » background-repeat » background-position » background-attachment » background (riassume le diverse proprietà)

CSS / SFONDI


La proprietà background-color può assumere i seguenti valori: » transparent (valore predefinito) » <colore>

A differenza di color, il valore per background-color non è ereditato.

Sintassi dichiarazione:

background-color: #FF0000;

background-color: rgb(255,0,0);

Se non diversamente specificato, lo sfondo della pagina è stabilito dalle impostazioni del sistema operativo o del browser e non è necessariamente bianco

CSS / COLORE DI SFONDO - BACKGROUND-COLOR


Per inserire un’immagine di sfondo è sufficiente specificarne l’url tramite la proprietà background-image. Il valore predefinito è none.

Sintassi dichiarazione:background-image:url(img/sfondo.png);

background-image:url("img/sfondo.png");

L’immagine sarà posizionata in alto a destra e sarà ripetuta verticalmente e orizzontalmente e scorrerà assieme al testo

CSS / IMMAGINE DI SFONDO - BACKGROUND-IMAGE


Tramite background-repeat è possibile stabilire se e come l’immagine sarà ripetuta

» background-repeat:repeat indica che l’immagine sarà ripetuta orizzontalmente e verticalmente (valore predefinito)

» background-repeat:repeat-x indica che l’immagine sarà ripetuta solo orizzontalmente

» background-repeat:repeat-y indica che l’immagine sarà ripetuta solo verticalmente

» background-repeat:no-repeat indica che comparirà una sola occorrenza dell’immagine

CSS / IMMAGINE DI SFONDO - BACKGROUND-REPEAT


REPEAT X E REPEAT Y


» E’ solo questa immagine che viene ripetuta lungo l’asse delle X per tutta la dimensione della pagina.

» La rimanenza è colorata tramite background color

» Si carica una sola immagine leggera » Non ci interessa sapere la dimensione del

monitorhtml{

background: url(img/gradient.jpg) repeat-x top;

background-color: #E6E6E6;

}


» Come prima, l’immagine viene ripetuta in verticale con repeat-y. » » Si carica una sola immagine leggera » Utilizzata per DIV i contenuti in verticale (Height) no si conoscono a priori ma possono variare. Ad esempio il div PAGE


Tramite background-attachment è possibile stabilire se l’immagine di sfondo sarà fissa ovvero scorrerà con la pagina

» background-attachment:scroll indica che l’immagine scorrerà assieme alla pagina (valore predefinito)

» background-attachment:fixed indica che l’immagine sarà fissata nella sua posizione iniziale indipendentemente dallo scorrimento della pagina (il funzionamento è garantito solo con <body>)

CSS / IMMAGINE DI SFONDO - BACKGROUND-ATTACHEMENT


Tramite background-position è possibile stabilire la posizione iniziale dell’immagine.I valori ammessi sono:

» Unità di lunghezza (100px) » Unità percentuali (20%) » Parole chiave:

left | center | right (per il posizionamento orizzontale) top | center | bottom (per il posizionamento verticale)I valori vanno espressi in coppia e indicano rispettivamente il posizionamento orizzontale e verticale. Per esempio:background-position: 20% 50px; background-position: right top;

CSS / IMMAGINE DI SFONDO - BACKGROUND-POSITION


Quando sono usate le unità di lunghezza, l’angolo superiore sinistro dell’immagine è posizionato relativamente all’angolo superiore sinistro dell’area del padding.

Quando sono utilizzate le unità percentuali si ha il seguente comportamento:

» Sia X% il valore percentuale per la posizione orizzontale » Sia Y% il valore percentuale per la posizione verticale » Il punto dell’immagine che si trova alle coordinate X%,Y% sarà posto in posizione X%,Y% dell’area del padding

CSS / IMMAGINE DI SFONDO - BACKGROUND-POSITION


La proprietà background permette di definire con un’unica dichiarazione tutte le varie proprietà contemporaneamente.Se non sono specificati alcuni valori, allora vengono implicitamente assegnati quelli predefiniti:body { background: #fff url(img.jpg) 100% 0 no-repeat fixed; }

CSS / SFONDO - BACKGROUND


I CSS3 hanno permesso di dare allo stesso elemento più sfondi (multiple backgrounds) e aggiunto alcune nuove proprietà tra cui background-size

E’ molto utile per gestire dei background full screen che si adattano alle dimensioni dello schermo utente.

CSS3 / SFONDI: NUOVE POSSIBILITÀ E PROPRIETÀ


Tramite background-size è possibile stabilire una dimensione dell’immagine di sfondo fissa o relativa all’elemento.

» background-size: cover; Scala l’immagine di sfondo in modo da coprire l’intera area dell’elemento. Alcune parti dell’immagine di sfondo potrebbero non essere visibili.

» background-size: contain; Scala l’immagine di sfondo in modo da riempire l’elemento. L’mmagine di sfondo verrà visualizzata intera, ma potrebbe non coprire interamente l’area dell’elemento.

» background-size: valoreX valoreY; dove valoreX e valoreY possono essere dei valori in pixel o percentuali e indicano la dimensione dell’immagine di sfondo

CSS3 / IMMAGINE DI SFONDO - BACKGROUND-SIZE


#div{background-image: url(img/bkg.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

Le proprietà COVER e CONTAIN non vengono renderizzate allo stesso modo dai vari browser. Quindi è necessario accompagnalre con del codice aggiuntivo che specifica ad ogni browser come comportarsi


DOMANDE?

Documents

CSS / GESTIONE DEL COLORE E DEI BACKGROUND · INFORMATICA E GRAFICA PER IL WEB | HTML+CSS | docente: Alessandro Gabbiadini 7 Il colore del testo e dei bordi è definito tramite la