Programowanie webowe | 04. CSS potrzebny do egzaminu

Zapis kolorów, nieprzezroczystość opacity

Mirosław Zelent

Do tej pory używaliśmy jedynie słów angielskich określających kolory: white, black, red, green, blue etc. Jest to jednak tylko jeden ze sposobów – na pewno zauważyliśmy niejednokrotnie w różnych arkuszach istnienie zapisu szesnastkowego. Wyjaśnijmy go teraz! Taki zapis składa się z trzech składowych, poprzedzonych znakiem “#”.

Każda składowa zajmuje maksymalnie dwa znaki – składowa czerwona R (ang. red), zielona G (ang. green) i niebieska B (ang. blue). Wartości każdej składowej są z przedziału od 00 do maksymalnie FF. Wartość “F” to szesnastkowo 15, co w praktyce daje 16 możliwości (od 0 do 15 to razem 16).

Oznacza to, że każda składowa daje 16×16 możliwości kolorów czyli jest dziesiętnie z przedziału od 0 do 255. Łącznie mamy zatem 256x256x256 = 16777216 możliwych barw. Istnieje też zapis skrócony, tej 16-stkowej wersji. Jeżeli jakiś kolor składa się z tych samym sześć cyfr, no to możemy zapisać tylko trzy, a przeglądarka też zrozumie o co nam chodzi (#FFFFFF = #FFF albo #555555 = #555).

Istnieje także inny, dziesiętny zapis w CSS – notacja z rgb i nawiasami oraz dziesiętnymi wartościami składowych rozdzielonych przecinkami:

Zestawienie przykładowych zapisów koloru białego:

 {
   background-color: white;
   background-color: #FFFFFF;
   background-color: #FFF;
   background-color: rgb(255,255,255);
 }

Nieprzezroczystość: opacity

Ustawienie stopnia przezroczystości elementu – jeżeli wartość opacity jest równa 1 to mamy pełną nieprzezroczystość (element jest całkowicie widoczny), zaś opacity równe 0 oznacza zerową nieprzezroczystość (element jest całkowicie niewidoczny). Oczywiście to tylko wartości skrajne, w praktyce mamy do dyspozycji wszystkie wartości z przedziału od 0 do 1.

W przypadku wartości mniejszych od 1, zamiast pisać np. 0.7 możemy zapisać wartość bez poprzedzającego zera (ale z kropką! – patrz ramka z kodem poniżej), a przeglądarka internetowa i tak zrozumie nasz zapis jako 0.7.

Zestawienie przykładowych zapisów koloru białego:

 {
   opacity: 0;
   opacity: 1;
   opacity: 0.7;
   opacity: .7;
 }