CSS3 – kolor na Twojej witrynie


4 czerwca 2011 / Michał Kortas


Ostatnimi czasy, w dobie najnowszych przeglądarek, kiedy to powoli na stronach www coraz częściej pojawia się HTML5 i CSS3, nie jesteśmy już skazani na okrojoną skalę barw, lub też ograniczone możliwości deklarowania kolorów w dokumentach hipertekstowych. Nowe technologie dostarczają nam nowych narzędzi, dzięki którym łatwiej zapanujemy nad swoją pracą.

Dzięki obecnym standardom projektowanie witryn staje się łatwiejsze, lub jeśli nie łatwiejsze, to na pewno przyjemniejsze. W dzisiejszym artykule chciałbym przybliżyć Wam sposoby ustawiania kolorów na stronach www, systemy zapisu oraz wskazać nowe możliwości, które odkrywa przed nami CSS3. Zapraszam do lektury!

Zapis szesnastkowy

Standardowo, do zapisu barw, używamy systemu szesnastkowego. Dwie cyfry tworzą liczbę z zakresu 0-FF, która określa ile światła o kolorze ustalonym przez daną parę ma być wyświetlane. Pary kolorów, którymi się posługujemy, ustalone są w odpowiedniej kolejności: czerwony, zielony, niebieski.

Przykład użycia:
color: #FF0A09;

Zapis szesnastkowy – skrócony

Jeżeli w każdej parze liczb koloru, w zapisie szesnastkowym, występują takie same cyfry, zapis ten możemy uprościć, zapisując tylko jedną z nich. Z założenia więc kolor w postaci #22BBCC jest równy kolorowi #2BC.

Przykład użycia:
color: #2BC;

Zapis RGB

Barwy tego typu zapisujemy w postaci funkcji z trzema parametrami w systemie dziesiętnym (z przedziału 0-255). Kolejne parametry określają ilość użytego koloru: czerwonego, zielonego i niebieskiego.

Przykład użycia:
color: rgb(255,0,66);

Zapis RGB – parametry procentowe

Funkcja rgb(r,g,b) przyjmować może również parametry procentowe. Oblicza się je dzieląc wartość dziesiętną, użytą przy określeniu danego koloru, przez liczbę 255 (czyli maksimum, które możemy użyć). Z doświadczenia wiem, że dzięki takiemu zapisowi łatwiej nam się później zorientować, który z zapisanych kolorów jest np. jaśniejszy. W parametrach możemy także wstawiać liczby z rozwinięciem po przecinku, jednak zamiast niego wstawiamy kropkę (np: 78.552%).

Przykład użycia:
color: rgb(75%,25%,30%)

Zapis HSL

W CSS możemy, zamiast standardowego zapisu RGB, użyć systemu HSL, czyli hue-saturation-lightness (kolor-nasycenie-jasność). W tym wypadku pierwsza składowa, kolor, jest reprezentowana jako kąt w kole kolorów (zakres 0-360, bez podawania jednostki, którą są stopnie). Kolejne składowe, nasycenie i jasność są zapisywane w procentach. Aby lepiej zorientować się w zapisie kolorów jako HSL polecam odwiedzenie strony, przygotowanej przez W3C >> www.w3.org/TR/2003/CR-css3-color-20030514/#hsl-color

Przykład użycia:
color: hsl(210,22,60);

Zapis słowny

Niektóre barwy możemy zapisać również w sposób słowny. Stosowanie takiego rozwiązania jest jednak mało wygodne, ponieważ znakomita większość kolorów (99,89%) nie jest w żaden sposób nazwana. Listę z kolorami nazwanymi CSS znajdziecie na stronie W3C >> www.w3.org/TR/css3-color/#svg-color

Przykład użycia:
color: red;

Zapis RGBa i HSLa – kanał alpha

Obecnie kolory nie muszą wypełniać danego obiektu w 100%. Dopuszczalne jest używanie tzw. kanału alpha, czyli poziomu przezroczystości. Aby zastosować takie rozwiązanie, należy wykorzystać funkcje rgba() i hsla(), tym razem z czterema parametrami. Pierwsze trzy są identycznie ustawiane jak w podstawowych funkcjach (rgb i hsl), natomiast czwarty odpowiada za w/w kanał alpha, gdzie 1 – wartość domyślna – ustawia 100% koloru, a 0 – jego brak. 

Przykład użycia:
rgba(255,120,35,0.5);

Pamiętajcie, że każde rozwiązanie (szczególnie to uwzględniające przezroczystość) winniśmy przetestować w różnych przeglądarkach, mowa tu szczególnie o Internet Explorerze. Nie każdy też używa najnowszych wersji programów, co również może zaszkodzić naszej witrynie, przez błędne wyświetlanie barw. Eksperymentujcie, jednak uważajcie, aby nie przesadzić.



Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.