Guida CSS, come utilizzare i colori nelle pagine web

Guida CSS, come utilizzare i colori nelle pagine web – 2 parte

Postato il 01. feb, 2009 da Carmine Picariello in CSS

Dopo aver visto nel mio precedente articolo come utilizzare i colori Nominati vediamo il secondo metodo utilizzato dai css per definire i colori nelle nostre pagine web.

Per creare i colori i Computer si avvalgono di combinazioni di diversi livelli dei colori Rosso, Verde e Blu. Questo è il motivo per cui il colore viene indicato come RGB.

Anche i monitor attuali e non solo i vecchi CRT si avvalgono ancora delle combinazioni di colore RGB per creare i colori. Per definire il colore in questo modo esistono 4 metodi diversi, vediamoli insieme.

Colori RGB Funzionali

Vengono definiti in due modi, RGB color, che è definito mediante un gruppo di tre percentuali o numeri interi, i primi si trovano nell’intervallo o% – 100% ed i secondo nell’intervallo 0-255.

Vediamo ad esempio come utilizzarli per specificare il colore bianco ed il colore nero nelle due varianti:

Percentuale RGB

(100%,100%,100%)

rgb (0%,0%,0%)

Numeri Interi

rgb (255,255,255)

rgb (0,0,0)

Possiamo divertirci a vedere come cambiare le diverse percentuali ed i diversi numeri interi nel nostro css, creando classi e poi visualizzando il risultato.

Colori RGB Esadecimali

La potenza dei CSS è che ci consente di utilizzare i noti (per chi fa pagine web) colori esadecimali, i pc li supportano ormai da molto tempo e quindi molti programmatori li utilizzano in maniera tale che è divenuto il modo più diffuso di dichiarare i colori nelle pagine web.

Come funzionano?

Mettendo insieme dei tre coppie di numeri esadecimali nell’intervallo 00-ff, è possibile impostare un colore. La sintassi è praticamente questa: #RRGGBB.

Vediamo come viene utilizzato il nostro esempio precedente relativo al nero e bianco:

rgb (255,255,255) = ESADECIMALE #FFFFFF (BIANCO)

rgb (0,0,0) = ESADECIMALE #000000 (NERO)

Quindi lo spazio di intervallo va da nero (RGB 0) al bianco (RGB 255).

Possiamo utilizzare la 4° variante degli esadecimali che è quella della notazione abbreviata, ad esempio per il codice esadecimale esteso bianco (#FFFFFF) è possibile utilizzare il codice abbreviato #FFF e cosi via, ovviamente per fare questa abbreviazione bisogna tenere presente che il browser effettua una replicazione del primo numero della coppia per cui non è possibile usare un codice abbreviato per una combinazione che non abbia numeri di coppia uguali (es: #112233 viene preso #123 ossia la prima cifra di ogni coppia). Se invece abbiamo una combinazione di questo tipo: #123456 e volessimo abbreviarla: #135 il browser ci trasformerebbe in #113355 in quanto duplica il primo numero di ogni coppia uguale.

Al prossimo tutorial….

Segnala questo tutorial: