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;
}
Polecamy: Sekurak Academy 2024
Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.
Książka: Wprowadzenie do bezpieczeństwa IT
Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!
Pomóż dzieciom
Polska Akcja Humanitarna od wielu lat dożywia dzieci. Prosimy, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękujemy!
Komentarze
Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać w komentarzach! Dziękujemy Wam za poświęcony na to czas!
Disqus