Kolorystyka
Wstęp
W tej lekcji zajmiemy się szeroko pojętym tematem kolorystyki. Poznasz kilka sposobów na zapis kolorów. Dowiesz się również jak ustawić przezroczystość oraz kolor tła.
Metody zapisu kolorów
W CSS istnieje kilka metod zapisu kolorów. Jeden z nich już poznałeś, a mianowicie za pomocą nazwy koloru (oczywiście, że po angielsku). Obecnie CSS obsługuje duże ilości nazw kolorów od tych najbardziej popularnych czylired,green,bluepo bardziej egzotycznieblanchedalmond,darkolivegreenczydarkslategrey. To jest wręcz wiadome, że ich wszystkich nie zapamiętasz. Wiem z doświadczenia, że będziesz i tak korzystał znacznie częściej z pozostałych metod wyboru koloru. Warto jednak znać kilka najczęściej używanych nazw kolorów. Na przykład moim ulubionym kolorem jestteal, stosunkowo nie jest długa nazwa, a dosyć ładny kolor.
| 1 2 3 4 5 6 7 8 9101112 | h1{color:green;}h2{color:blanchedalmond;}h3{color:darkolivegreen;}h4{color:teal;} |
|---|---|
Kolejną metodą, która jest właściwie najbardziej popularna jest zapis w systemie heksadecymalnym, czyli szesnastkowym. Zapis jest prosty aczkolwiek z początku może być problematyczny. Musisz zapamiętać to, że wyraża on kolor w systemie RGB. Najlepiej posłużyć się przykładem. Zapiscolor: #008080;zmieni kolor czcionki nateal. Jak można zauważyć zapis szesnastkowy, jest poprzedzony przez hash czyli ten znak#i ma sześć miejsc na cyfry lub litery. Jak wiesz lub nie, system szesnastkowy ma szesnaście cyfr od0doF, gdzieAjest równe10,B-11,C-12,D-13,E-14,F-15.
Wracając do zapisu. Dwie pierwsze litery odpowiadają za kolor czerwony, trzecia i czwarta za zielony, a ostatnie dwie za niebieski. Czyli chcąc zapisać kolor czerwony w kodzie szesnastkowym należy użyć#ff0000, a fioletowy#ff00ff. Jeśli chciałbyś ciemniejszy czerwony to wystarczy zmniejszyć wartości zffna przykładowo99. Jeśli będzie taka sama ilość koloru czerwonego, zielonego i niebieskiego to wyjdą odcienie szarości. Na przykład#cacacada jasny szary, a#909090da ciemny szary. Wyjątkiem są kolory czarny i biały. Aby wyświetlić czarny należy użyć zerowych wartości dla każdego koloru, w praktyce to jest#000000. Natomiast aby uzyskać biały kolor trzeba ustawić odcienie RGB na maksymalne wartości, czyli#ffffff.
Istnieje jeszcze tak zwany skrócony zapis, w którym zamiast sześciu mamy trzy pola. Postać#137, odpowiada#113377.
| 123456789 | h1{color:#ff0000;}h2{color:#cacaca;}h3{color:#0ff;} |
|---|---|
Kolejną metodą jest zapis przezRGB. Zapis już jest prostszy ponieważ używa liczb w systemie dziesiątkowym. Przykład:color: rgb(95, 158, 160);da kolor tak zwanycadetblue, ale nazwa nie ważna, ważny jest zapis. Dla bardziej wtajemniczonych zapis jest taki, jak funkcji z trzema argumentami typu całkowitego. A dla mniej wtajemniczonych pisze siergbi w nawiasach okrągłych podaje się trzy liczby oddzielone przecinkami, które muszą mieć wartości od0do255. Posługując się tym przykładem koloru czerwonego jest95, koloru zielonego158, a koloru niebieskiego160.
Zapis RGB jest bardzo podobny do zapisu heksadecymalnego. Zasada tworzenia koloru z 3 części składowych (R - red - czerwony, G - green - zielony, B - blue - niebieski) jest ta sama, różnica polega jedynie na zmianie sposobu zapisu każdej z wartości.
| 123 | h1{color:rgb(95,158,160);} |
|---|---|
Kolejnym zapisem jest dodanie przezroczystości, czyli tak zwanego kanału alfa. Zapis ten jest nazywanyRGBAi jest on rozszerzeniemRGB. W RGB wpisywałeś trzy liczby z zakresu od0do255, w RGBA przekazujemy dodatkową liczbę z zakresu od0do1, która określa przezroczystość. Ułamki wpisujemy nie z przecinkiem, tylko z kropką. Przykład:color: rgba(95, 158, 160, 0.5);da kolorcadetbluez tym wyjątkiem, że będzie półprzezroczyste. Również możesz się spotkać z zapisem.5zamiast0.5, co jest również poprawne, a nawet zalecane.
| 123 | h1{color:rgba(95,158,160,0.5);} |
|---|---|
Być może reguły zapisu kolorów wydają Ci się skomplikowane i ciężko byłoby Ci zapisać przy ich użyciu oczekiwany kolor. Prawda jest taka, że dość rzadko twórcy stron internetowych od razu zapisują kolor w zapisie heksadecymalnym lub RBG, najczęściej korzysta się z programów, które w bardzo łatwy sposób pozwalają wybrać kolor i wypisują jego wartość w odpowiednim formacie. Aby zobaczyć jak wygląda taka aplikacja, możesz wejść na stronęhttps://color.adobe.com/pl/.
Kolory tła
Skoro wiesz jak zmienić kolor czcionki, to warto jeszcze wiedzieć jak można zmienić kolory tła danego elementu. Właściwością, która za to odpowiada jest background-color. Przyjmuje wartość koloru w postaciach, które które omówiliśmy w tej lekcji.
| 123 | h1{background-color:rgba(95,158,160,0.5);} |
|---|---|
Przeźroczystość
Przeźroczystość czyli kanał alfa. Wyżej pokazałem Ci jeden ze sposobów uzyskania przezroczystości. Drugim sposobem jest właściwość CSS o nazwieopacitygdzie wartości przyjmowane to liczby zmiennoprzecinkowe z zakresu od0do1.
Kod użyty w poniższym przykładzie zapewnia lekką przeźroczystość.
| 1234 | h1{color:rgb(95,158,160);opacity:0.9;} |
|---|---|
Pomiędzy użyciem koloru RGBA, a użyciem RGB wraz zopacitywystępuje następująca różnica. Gdy jako koloru tła użyjesz wartościrgba(150, 150, 150, 0.5);to tło będzie szare półprzezroczyste. Natomiast jeśli wpiszesz wartośćrgb(150, 150, 150);a także dodasz właściwośćopacityz wartością0.5, to nie tylko tło będzie półprzezroczyste ale także inne elementy jak na przykład czcionka i wszystkie elementy zagnieżdżone.
| 1234567 | h1{background-color:rgb(150,150,150);opacity:0.5;}h2{background-color:rgba(150,150,150,.5);} |
|---|---|
Zadanie 1
W tym zadaniu Twoim celem jest ustawienie białego koloru tekstu i czarnego tła dla elementubody. Dodatkowo ustaw przezroczystość całego elementubodyna50%.
Podsumowanie
W tej lekcji poznałeś kilka sposobów na zapis kolorów w CSS. Dowiedziałeś się również jak ustawić kolor tła oraz czym jest właściwośćopacityi jakie są jej wady.