PRACA Z WARTOŚCIAMI KOLORÓW

Transkrypt

1 PODRĘCZNIK HTML5 ROZDZIAŁ 4 PRACA Z WARTOŚCIAMI KOLORÓW DO TEJ PORY zaprezentowałem już kilka przykładów użycia kodu koloru, ale jeżeli ich nie rozumiesz, to były one zapewne dla Ciebie jak kod enigma. W niektórych przykładach zostały użyte nazwy kolorów, ale już nie te podstawowe. Musisz zrozumieć, jak są one zbudowane w CSS3. Kiedy to zrozumiesz, będziesz mieć dostęp do miliona kolorów, a nie tylko do ich garstki.

2 CZĘŚĆ I: JĘZYK SIECI ZNAJOMOŚĆ KOLORÓW RGB Jeśli zdarzyło Ci się kiedykolwiek mieszać kolory w inny sposób, niż malując palcami czy akwarelami, wiesz, co się dzieje, kiedy miesza się kolory. Na ekranach komputerowych czerwony, zielony i niebieski są mieszane, by wytwarzać inne kolory. Na przykład kiedy zmieszasz równe ilości czerwonego i zielonego, otrzymasz żółty. Aby połączyć kolory na stronach internetowych, miesza się różne wartości, używając liczb całkowitych, procentów i liczb heksadecymalnych. CSS3 ma ograniczoną ilość dostępnych nazw kolorów, które mogą pomóc w wymyślaniu innych metod mieszania kolorów. HTML5 i CSS3 mają bardzo skomplikowane elementy, takie jak canvas, które mogą zrobić więcej z kolorami i rysunkami, niż było to możliwe w poprzednich wersjach HTML. Te zaawansowane elementy wymagają odrobiny JavaScriptu. Znajdziesz je omówione szczegółowo w rozdziale 13. Teraz zaczniemy od podstaw. UŻYWANIE NAZW Jednym z dziwniejszych doświadczeń przy pracy z HTML5 i CSS3 jest ustalanie nazw używanych dla określenia kolorów. Poniżej widzimy 16 standardowych kolorów, przedstawionych w tabeli Tabela 4.1. Standardowe nazwy kolorów aqua (turkusowy) black (czarny) blue (niebieski) fuchsia (fuksja) gray (szary) green (zielony) lime (jasnozielony) maroon (kasztanowy) navy (granatowy) olive (oliwkowy) purple (purpurowy) red (czerwony) silver (srebrny) teal (morski) white (biały) yellow (żółty) Korzystając z HTML5, którego nauczyłeś się do tej pory, możesz łatwo stworzyć schemat przedstawiający kolory. (W punkcie Do dzieła! na końcu tego rozdziału dowiesz się, jak odtworzyć tabelkę). Rysunek 4.1 przedstawia ich wygląd na przykładowej stronie 1. Rysunek 4.1. Standardowe kolory CSS3 na stronie 1 Dla wygody czytelnika niniejszy rozdział, w wersji z kolorowymi rysunkami, umieściliśmy na stronach wydawnictwa Helion, pod adresem przyp. red.

3 ROZDZIAŁ 4: PRACA Z WARTOŚCIAMI KOLORÓW Do tej podstawowej bazy możesz włączać 131 innych nazw, które zostały wybrane bez wyraźnej przyczyny. Wszystkie należą do zestawu stworzonego w latach 80. XX wieku i zostały nazwane X11. Zostały przyjęte przez wczesne przeglądarki i są z nami od zawsze. W oficjalnej dokumentacji W3C są wypisane pod nazwą formatu SVG (ang. Scalable Vector Graphics), a wszystkie nazwy kolorów zostały przyjęte z oryginalnego X11 (patrz strona Powód, dla którego wszystkie te nazwy nie zostały tu wypisane, jest taki, że projektanci i programiści zazwyczaj ich nie używają. Te 131 nazw nie tylko ogranicza paletę projektantów uważają je oni także za absurdalne! Nazwy takie jak papayawhip czy mistyrose nie są dobrymi nazwami według artystów. Podobnie programiści uważają, że używane wartości nie odpowiadają żadnym matematycznym ustawieniom, tak jak stare bezpieczne kolory stron, które odpowiadały logicznemu standardowi numerycznemu. (Oczywiście jeśli chcesz się trochę pobawić, kontynuuj i dołącz takie kolory jak darkkhaki czy ghostwhite do swojej palety kolorów strony). W następnych podrozdziałach zobaczysz, jak stworzyć kolor dokładnie taki, jaki chcesz, wybrany z miliona różnych kombinacji. RGB I WARTOŚCI PROCENTOWE HSL Podczas mieszania farb ich ilość jest czasami podawana w procentach. Pewien procent koloru czerwonego, zielonego i niebieskiego da nam różne kolory. W ustawieniach kolorów w CSS3 możesz używać procentów na dwa różne sposoby. Najpierw możesz przypisać wartość koloru, używając poniższego formatowania: 77 rgb(r%,g%,b%); Pierwsza wartość to procent koloru czerwonego, druga zielonego, a trzecia niebieskiego. Na przykład ustawienie rgb (43.9%, 50.2%, 56.5%) generuje kolor, którego używa drużyna Los Angeles Dodgers. Trzy wartości procentowe po dodaniu to więcej niż 100 procent, co pokazuje, że wartość określa procent samego koloru, a nie całości. Jak widzisz, możesz być bardzo precyzyjny, jeśli chodzi o wartości, kiedy podajesz liczby dziesiętne. Poniższy przykład (plik RGBpercent.html znajdujący się w folderze rozdziału 4. pod adresem ftp://ftp.helion.pl/przyklady/tfanh5.zip) przedstawia, jak używać tych ustawień kolorów na stronie HTML5: <!DOCTYPE HTML> <html> <head> <style type="text/css"> body { background-color:rgb(43.9%,50.2%,56.5%); h1 { background-color:rgb(11.8%,56.5%,100%); color:rgb(100%,100%,100%); font-family:"arial Black", Gadget, sans-serif; font-style:italic; text-align:center;

4 CZĘŚĆ I: JĘZYK SIECI </style> <meta charset="utf-8"> <title>dodger Blue</title> </head> <body> <h1>los Angeles Dodgers<br> (wcześniej Brooklyn Dodgers)</h1> </body> </html> Kiedy załadujesz stronę, wyświetlane kolory będą dokładnie takie, jak chciałeś; widać to na rysunku Rysunek 4.2. Ustawianie kolorów za pomocą procentów RGB Kolejnym sposobem przypisywania kolorów z użyciem procentów jest model HSL (odcień nasycenie jasność). Dużą zaletą HSL jest to, że jasność jest symetryczna. Ułatwia to podrasowanie koloru na taki, jaki byś chciał. Myśląc o 360-stopniowym kole barw jak o kompasie, możesz wybrać odcień. Na górze, gdzie wartość procentowa wynosi 0, znajdziesz barwy czerwone. Przesuwając wzrok zgodnie ze wskazówkami zegara w miejsce o wartości procentowej 30, zobaczysz, że barwy przechodzą z czerwonych w żółte. Na wartości procentowej 60 są one żółte. I tak wokoło spektrum kolorów, aż wrócisz do wartości procentowej 360 (0 procent), gdzie znów zobaczysz odcienie czerwone. Projektantom, którzy rozumieją spektrum kolorów, ułatwia to wybieranie kolorów. Aby stworzyć jaśniejszy kolor, zwiększ wartość jasności; zmniejsz ją natomiast, by uzyskać ciemniejszy kolor. Przypuśćmy na przykład, że próbujesz uzyskać właściwy odcień czerwieni. Zacznij od poniższego ustawienia kolorów: hsl(0,100%,50%); Zwróć uwagę, że pierwsza wartość nie jest określona w procentach. Jest tak, ponieważ ma wartości pomiędzy 0 a 359 w 360 stopniowym kole. (Pamiętaj: wartości 0 i 360 są w tym samym miejscu na kole). Zwiększając i zmniejszając jasność (trzeci parametr), możesz rozjaśniać lub przyciemniać swój kolor co jest bardziej intuicyjne niż zmienianie procentów RGB.

5 ROZDZIAŁ 4: PRACA Z WARTOŚCIAMI KOLORÓW Poniższy kod HTML5/CSS3 (plik HSLCOLOR.html znajdujący się w folderze rozdziału 4. pod adresem ftp://ftp.helion.pl/przyklady/tfanh5.zip) przedstawia, z jaką łatwością możesz zmniejszyć i zwiększyć wartość jasności, by uzyskać odpowiedni odcień czerwieni. <!DOCTYPE HTML> <html> <head> <style type="text/css">.redbase { color:hsl(0, 100%, 50%);.redDarker { color:hsl(0, 100%, 25%);.redLighter { color:hsl(0, 100%, 75%); </style> <meta charset="utf-8"> <title>ustawienia koloru HSL</title> </head> <body> <h1 class="redbase">czerwony bazowy</h1> <h1 class="reddarker">czerwony ciemniejszy</h1> <h1 class="redlighter">czerwony jaśniejszy</h1> </body> </html> 79 Jeśli używasz HSL po raz pierwszy, pomocne jest myślenie o dodawaniu jasności jak o przemieszczaniu się wyżej do słońca lub o przyciemnianiu jak o przesuwaniu się coraz bardziej w głąb studni. Proces podrasowywania kolorów jest łatwiejszy dla projektantów chcących uzyskać wymagane kolory. Rysunek 4.3 przedstawia, jak wyglądają różne barwy czerwieni. Rysunek 4.3. HSL ułatwia podrasowywanie barw

6 CZĘŚĆ I: JĘZYK SIECI Odcień i jasność rozumiemy dość intuicyjnie, ale pojęcie nasycenie może być trochę niejasne. Zasadniczo nasycenie to ilość zabarwienia w danym kolorze. Nasycenie o wartości 100 procent to pełne zabarwienie odcienia danej barwy, podczas kiedy niższa wartość procentowa jakby zabiera odcień to coś jak blednięcie koloru. Dla wszystkich kolorów środkowa barwa to szara, kiedy nasycenie wynosi 0 procent. Czasami wolimy blady lub stłumiony kolor, taki jak niebieskich wielokrotnie wypranych dżinsów. USTAWIANIE RGB ZA POMOCĄ LICZB CAŁKOWITYCH Drugim sposobem na mieszanie kolorów z użyciem ustawień wartości rgb() jest wstawianie wartości od 0 do 255 (w sumie wartości jest 256, gdyż liczymy też wartość 0) zamiast procentów używanych w poprzednim przykładzie. Wartość 256 reprezentuje ilość możliwych kombinacji na dwóch 8-bitowych bajtach. Innymi słowy, polega to na tym, jak komputer przechowuje i przetwarza informacje. Z zestawem trzech wartości od 0 do 255 możesz wygenerować kombinacji. Technologia koloru jest jednak dużo bardziej złożona niż ta, którą tu omawiamy, a nowoczesne tworzenie kolorów generuje lepsze procesory kolorów. Wystarczy powiedzieć, że możesz tworzyć wiele kolorów za pomocą tych kombinacji złożonych z barwy czerwonej, zielonej i niebieskiej. Oto sposób zapisu wartości kolorów: rgb(liczbacałkowitar, liczbacałkowitag, liczbacałkowitab); 80 Na przykład żółty, który powstaje po zmieszaniu czerwonego i zielonego, będzie wyglądał tak: rgb(255,255,0); Nie działa to tak intuicyjnie jak HSL, ale po chwili zaczniesz rozumieć mieszanki oparte na 256 wartościach lepiej niż wartości procentowe. Poniższy przykład (plik DecColor.html znajdujący się w folderze rozdziału 4. pod adresem ftp://ftp.helion.pl/przyklady/tfanh5.zip) przedstawia prostą implementację. <!DOCTYPE HTML> <html> <head> <style type="text/css"> body { /* czerwone tło */ background-color:rgb(255,0,0); h1 { /* duży żółty tekst */ color:rgb(255,255,0); font-family:"arial Black", Gadget, sans-serif; h2 { /*niebieski tekst na szarym tle */ color:rgb(0,0,255); background-color:rgb(150,150,150); </style>

7 ROZDZIAŁ 4: PRACA Z WARTOŚCIAMI KOLORÓW <meta charset="utf-8"> <title>kolory w systemie dziesiętnym</title> </head> <body> <h1>duży żółty nagłówek</h1> <h2>niebieski nagłówek z szarym tłem</h2> </body> </html> Jedyna różnica pomiędzy używaniem RGB z wartościami od 0 do 255 a wartości procentowych od 0 do 100 polega na tym, jak my to postrzegamy. Może Ci się wydawać, że używanie 256 wartości zamiast skali procentowej od 0 do 100 zapewni Ci większą precyzję, ale to nie o to chodzi, ponieważ możesz używać ułamków w ustawieniach procentowych. To, czy będziesz używać zapisu procentowego, czy wartości od 0 do 255, będzie zależało od Twoich osobistych preferencji. Rysunek 4.4 przedstawia rezultat użycia przeglądarki Opera Mini. 81 Rysunek 4.4. Kolory zmieszane za pomocą wartości całkowitych, przedstawione na telefonie komórkowym Jak widzisz na rysunku 4.4, wyświetlany na telefonie komórkowym tekst nie przyjmuje czcionki Arial Black, ale za to kolory wyświetlają się bez problemu. Upewnij się i sprawdź czcionki i inne efekty Twojego urządzenia przenośnego, jeśli są istotne przy wyświetlaniu strony. Pamiętaj: większość komputerów ma bardziej skomplikowany zestaw czcionek i styli niż urządzenia przenośne. Niedługo jednak będą one bardzo podobne. USTAWIENIA HEKSADECYMALNE: MYŚLENIE JAK TWÓJ KOMPUTER W poprzednich rozdziałach prezentowałem ustawienia kolorów stworzone z użyciem wartości złożonych z alfanumerycznych wartości. (Alfanumeryczną wartością jest każda wartość, która zawiera i liczby, i litery). Na przykład wartość 6F001C generuje bogatą czerwień mokka. Jeśli ją rozbijemy, możemy zobaczyć, że jest ona zwyczajną mieszanką barwy czerwonej, zielonej i niebieskiej. Aby zrozumieć, jak to się dzieje, potrzebujemy dowiedzieć się trochę o systemach liczbowych komputerów. Jesteśmy przyzwyczajeni do liczenia w systemie dziesiętnym. Używamy wartości od 0 do 9 (dziesięć cyfr), a kiedy te dziesięć cyfr zostanie zużytych, zaczynamy na nowo z dwoma liczbami 1 i 0 które nazywamy dziesięć. Jak pewnie wiesz, komputery bazują na przełącznikach,

8 CZĘŚĆ I: JĘZYK SIECI które mogą posiadać stan Włączony lub Wyłączony. Zamieniając 1 na Włączony, a 0 na Wyłączony, możemy zapisać kod oparty na systemie binarnym z użyciem liczb 1 i 0; zamiast pracować z dziesięcioma liczbami pracujemy więc tylko z dwoma. Tabela 4.2 przedstawia, co jest potrzebne, by policzyć do 16, używając systemu binarnego. Zawiera także trzecią kolumnę, która pokazuje system szesnastkowy zwany heksadecymalnym. Tabela 4.2. Systemy numeryczne Binarny Dziesiętny Heksadecymalny A B C D E F Każda wartość binarna nazywana jest bitem. Grupa bitów to bajt. W tabeli 4.2 największa binarna wartość to 4-bitowy bajt. Komputery bazują na różnych typach bajtów, a 8-bitowy bajt jest zwykle używany jako powszechne odniesienie do bajta. Prawdę mówiąc, nowoczesne komputery bazują na 8-, 16-, 32-, 64- i nawet 128-bitowych bajtach. (Stają się one coraz większe, więc nie spodziewaj się, że 128-bitowy bajt będzie stanowił górny limit). Najwyższą wartością w binarnym systemie liczenia w 8-bitowym bajcie jest wartość Kiedy na nią spojrzysz i porównasz z liczbą dziesiętną i heksadecymalną, zobaczysz bardzo interesujący wzór, pokazany w tabeli 4.3. Tabela 4.3. Wartości bajtowe Binarny Dziesiętny Heksadecymalny FF

9 ROZDZIAŁ 4: PRACA Z WARTOŚCIAMI KOLORÓW Jak widzisz w tabeli 4.3, wartość heksadecymalna FF jest najwyższą możliwą wartością dla dwóch cyfr; podobnie wartość binarna jest najwyższą możliwą wartością dla ośmiu cyfr (bajta). Liczba całkowita składa się jednak z trzech cyfr i nie stanowi dla nich limitu. Inaczej mówiąc, w przeciwieństwie do systemu heksadecymalnego, system dziesiętny nie jest w dużej mierze symetryczny z binarnym systemem liczenia. Jak wiesz, system RGB przypisujący liczby wartościom kolorów korzysta z wartości od 0 do 255. Używając wartości heksadecymalnych, potrzebujesz tylko dwóch cyfr (tak naprawdę liczb heksadecymalnych) reprezentujących wszystkie 256 wartości w 8-bitowym bajcie. Prowadzi to do korzystania z heksadecymalnych liczb podczas przypisywania kolorom wartości. Z użyciem sześciu wartości po dwóch do czerwonego, zielonego i niebieskiego wszystkie wartości kolorów mogą być przypisane za pomocą sześciu liczb heksadecymalnych. Wracając więc do wartości 6F001C, widzimy poniższe ustawienia: czerwony: 6F, niebieski: 00, zielony: 1C. Przyzwyczajenie się do liczb heksadecymalnych może zająć trochę czasu, ale kiedy już się uda, będzie Ci łatwo dodawać wartości kolorów. Możesz je również rozumieć w ten sam sposób co liczby dziesiętne RGB, ale zamiast z wartości od 0 do 255 będziesz korzystać z wartości od 00 do FF. Poniższy przykład (plik HexPalette.html znajdujący się w folderze rozdziału 4. pod adresem ftp://ftp.helion.pl/przyklady/tfanh5.zip) przedstawia pewne kolory stworzone za pomocą liczb heksadecymalnych. 83 <!DOCTYPE HTML> <html> <head> <style type="text/css"> /* Paleta kolorów -- używaj tylko tych kolorów! 69675C, 69623D, ECE8CF, E8D986, B5AA69 szary, oliwkowy, kremowy, ciemnokremowy, khaki */ body { font-family:"comic Sans MS", cursive; background-color:#ece8cf; color:#69675c; h1 { font-family:"arial Black", Gadget, sans-serif; color:#b5aa60; background-color:#e8d986; text-align:center; h2 { font-family:"lucida Sans Unicode", "Lucida Grande", sans-serif; color:#b5aa69; </style>

10 CZĘŚĆ I: JĘZYK SIECI <meta charset="utf-8"> <title>system heksadecymalny i paleta kolorów</title> </head> <body> <h1> Ostyluj z użyciem palety kolorów</h1> <h2>pustynia jesienią</h2> Jesienią powietrze robi się chłodniejsze, zapanowuje spokój i pustynię okrywają cieplejsze barwy. </body> </html> W tym przykładzie korzystamy z palety kolorów i ustawiamy wartości kolorów w komentarzu wewnątrz kontenera <style>, dzięki czemu mogą być one przeglądane podczas składania strony w jedną całość. Rysunek 4.5 przedstawia, czego możesz się spodziewać. 84 Rysunek 4.5. Heksadecymalna paleta kolorów Kolory należą do zestawu kolorów, który prezentuje pewien humor czy uczucie. Ten zatytułowany Pustynia jesienią jest oparty na palecie kolorów reprezentującej zdaniem projektanta kolory pustyni jesienią. DODAWANIE KOLOROM PRZEJRZYSTOŚCI Kolejną nową cechą zgodną z przeglądarką HTML5 jest przejrzystość lub zmienna siła krycia. Nieprzejrzysty obiekt na ekranie blokuje wszystko, co znajduje się poniżej, podczas kiedy przezroczysty obiekt zezwala na oglądanie wszystkiego poniżej jak szkło. Wartość używana do opisania poziomu siły krycia jest wyrażana za pomocą właściwości alfa ustawionej pomiędzy 0 i 1. Niezależnie od tego, czy używamy formatowania kolorów RGB, czy HSL, alfa będzie czwartym parametrem. (Niestety nie ma heksadecymalnego parametru alfa w CSS3). Na przykład za pomocą ustawień rgba(255,0,0,0.5) stworzymy barwę czerwoną z 50-procentową siłą krycia. Podobnie korzystając z ustawień hsla(120, 100%, 50%, 0.3), wygenerujemy barwę zieloną z 30-procentową siłą krycia (lub 70-procentową przejrzystością).

11 ROZDZIAŁ 4: PRACA Z WARTOŚCIAMI KOLORÓW W części IV książki omówię sposoby na dodanie głębi stronie za pomocą znacznika <canvas>. Kiedy umieścisz obiekty jeden na drugim, lepiej zobaczysz, dlaczego posiadanie przejrzystości na stronach jest ważne. Teraz potrzebujesz czegoś, co umieścisz poniżej bloków tekstu, które będą mogły być oglądane poprzez blok przezroczystego tekstu. Najłatwiejszą metodą jest umieszczenie obiektu tła za pomocą właściwości background-image. Poniższy fragment kodu pokazuje, jak to zrobić: body { background-image:url(plikobrazu.png); Twój obraz tła może być plikiem z rozszerzeniem.jpg,.gif lub.png. W tym przykładzie trzy koła w kolorze czerwonym, zielonym i niebieskim są użyte jako tło, a w górnej części znajduje się tekst <h1> z 50-procentową siłą krycia ma to pokazać, że różne kolory są widoczne poprzez przezroczysty obiekt. Poniższy kod (plik Transparent.html znajdujący się w folderze rozdziału 4. pod adresem ftp://ftp.helion.pl/przyklady/tfanh5.zip) korzysta z obu formatowań, rgba() i hsla(). <!DOCTYPE HTML> <html> <head> <style type="text/css"> body { background-image:url(rgbballs.png);.transred { color:rgba(255, 0, 0,.5);.transGreen { color:rgba(0, 255, 0,.5);.transBlue { color:hsla(240, 100%, 50%,.5);.transBackground { background-color:hsla(120, 100%, 50%,.5); </style> <meta charset="utf-8"> <title>przejrzystość/siła krycia</title> </head> <body> <h1 class="transred">test 123, Test 123, Test 123</h1> <h1 class="transgreen">test 123, Test 123, Test 123</h1> <h1 class="transblue">test 123, Test 123, Test 123</h1> <h1 class="transbackground">test 123, Test 123, Test 123</h1> </body> </html> 85 Wyniki pokazane na rysunku 4.6 są wyświetlane na iphonie i wyglądają inaczej niż na ekranie Twojego komputera.

12 CZĘŚĆ I: JĘZYK SIECI Jak widzisz, przezroczysty tekst i tło pozwalają, żeby obiekt tła był widoczny. Kiedy kolor jest przezroczysty, przejmuje część znajdujących się pod nim kolorów; kiedy więc z tego korzystasz, zwróć uwagę, jaką kombinację będą tworzyły nakładające się na siebie kolory. (Przy okazji rysunek 4.6 przedstawia, dlaczego rzadko używamy obiektów tła mają tendencję do zaśmiecania ekranu i psucia pozytywnego odbioru tekstu). Rysunek 4.6. Przezroczysty tekst na solidnej grafice TWORZENIE SCHEMATU KOLORU 86 Jeśli jesteś projektantem, możesz pomyśleć: Jak u licha zdobędę kolory, których potrzebuję, za pomocą tych wszystkich liczb?. Jeśli natomiast jesteś programistą, możesz się zastanawiać: Skąd mogę wiedzieć, czy kolory, których używam, do siebie pasują?. Na oba te pytania jest jedna odpowiedź: Kuler. W aplikacji tej wprowadzasz główny (podstawowy) kolor, a ona sprawdza, używając różnych algorytmów, które kolory są kompatybilne, oraz prezentuje informacje dla dziesiętnych i heksadecymalnych wartości kolorów. Projektanci mogą umieścić tam dowolne kolory, które chcą wykorzystać do stworzenia własnych schematów kolorów, i Kuler zajmie się całą matematyką; programiści natomiast mogą umieścić tam całą matematykę, a Kuler stworzy za nich schematy kolorów. Aplikację Kuler znajdziesz pod adresem Wymaga ona wtyczki Flasha jest ona już wbudowana w większości przeglądarek, ale jeśli Twoja przeglądarka jej nie posiada, możesz pobrać ją za darmo ze strony Możesz też pobrać widget Kulera, który będzie działał na Twoim komputerze. Z KOLORU PODSTAWOWEGO Aby stworzyć schemat kolorów za pomocą aplikacji Kuler, zacznij od podstawowego koloru i wypróbuj go za pomocą różnych algorytmów do generowania schematów kolorów. Potem wybierz algorytm, który pokaże różne kolory dobrze wyglądające razem na wiele sposobów. Opierając się na teorii kolorów, wybierz kategorię spośród analogicznych, jednobarwnych, trójwartościowych, uzupełniających, złożonych, cieni i niestandardowych. Kategoria niestandardowa jest dla projektantów, którzy używają swoich artystycznych umiejętności do generowania palety. (Programiści są dobrze obsługiwani przez jeden z automatycznych algorytmów). Rysunek 4.7 przedstawia typowy przykład schematu kolorów opartego na kolorze podstawowym z użyciem algorytmu trójwartościowego.

13 ROZDZIAŁ 4: PRACA Z WARTOŚCIAMI KOLORÓW Rysunek 4.7. Schemat kolorów z podstawowego koloru 87 Z OBRAZU Poza tworzeniem palety kolorów z koloru podstawowego możesz też załadować obraz i aplikacja Kuler automatycznie wygeneruje schemat kolorów w oparciu o kolory obrazu. Na przykład rysunek 4.8 przedstawia dwa różne obrazy logo i obraz z odpowiadającą im paletą kolorów. Rysunek 4.8. Schematy kolorów w oparciu o importowane obrazy

14 CZĘŚĆ I: JĘZYK SIECI Niewłaściwe kombinacje kolorów Aby zobaczyć różnicę pomiędzy użyciem dobrego i złego schematu kolorów, spójrz na przykład zaczerpnięty z książki Lesliego Cabargi The Designer s Guide to Color Combinations. Poniższy rysunek przedstawia wygląd dwóch identycznych stron wyświetlanych na urządzeniu przenośnym po lewej strona ze schematem kolorów opartym o zdjęcie, po prawej przykład użycia niewłaściwych barw. 88 Dobry i zły kolor Rysunek po lewej korzysta z kolorów wybranych ze zdjęcia, a ten po prawej nie dodatkowo przedstawia niewłaściwą kombinację kolorów. Kiedy korzystamy z obrazu, możesz bardziej modyfikować schemat kolorów przez wybieranie różnych odcieni kolorowego, jasnego, przytłumionego, głębokiego i ciemnego. Wszystkie schematy kolorów mogą być zapisywane i kiedy się ładują, zachowują wszystkie informacje, których potrzebujesz, by wprowadzić dane koloru na stronie HTML5. INTEGROWANIE TWOJEJ PALETY KOLORÓW Z TWOJĄ STRONĄ Posiadanie palety kolorów nie oznacza, że Twoja strona będzie wyglądać dobrze nawet jeżeli chodzi o właściwy dobór kolorów. Wewnątrz tej samej palety niektóre kolory pasują do siebie lepiej od innych. Na przykład tło o barwach pośrednich może nie dawać kontrastu pomiędzy innymi kolorami pośrednimi, więc ciemny lub jasny kolor w palecie może okazać się lepszym wyborem. Rysunek 4.9 pokazuje paletę kolorów rozbudowaną w oparciu o logo, która będzie wykorzystana jako paleta dla strony.

15 ROZDZIAŁ 4: PRACA Z WARTOŚCIAMI KOLORÓW Rysunek 4.9. Paleta kolorów w oparciu o logo Wartości liczb heksadecymalnych dla czterech kolorów zostały wklejone tutaj za pomocą CSS3 w górnej części strony HTML5 jako referencja. W poniższym listingu (plik SettingColors.html znajdujący się w folderze rozdziału 4. pod adresem ftp://ftp.helion.pl/przyklady/tfanh5.zip) są zastosowane kolory, które współgrają z logo i resztą strony. <!DOCTYPE HTML> <html> <head> <style type="text/css"> /* ,7FA646,D9B448,F2DFA7 */ body { margin-left:1em; background-color:#f2dfa7; color:#027333; font-family:verdana, Geneva, sans-serif; font-size:11px; h1 { font-family:tahoma, Geneva, sans-serif; color:#7fa646; h2 { font-family:"lucida Sans Unicode", "Lucida Grande", sans-serif; color:#7fa646; background-color:#d9b448; div { text-align:center; a { font-family:arial, Helvetica, sans-serif; text-align:center; font-size:10px; text-decoration:none; background-color:#027333; color:#f2dfa7; a:hover { color:#d9b448; </style> <meta charset="utf-8"> <title>ustalanie kolorów</title> </head> <body> <div><nav> 89

16 CZĘŚĆ I: JĘZYK SIECI <a href="#"> Odnośnik nr 1 </a> <a href="#"> Odnośnik nr 2 </a> <a href="#"> Odnośnik nr 3 </a> </nav> </div> <img src="sandlightlogo.gif" alt="logo" style="float:left;"> <header><h1> Witaj</h1></header> <br><br> <article> <h2> Kim jesteśmy...</h2> Sandlight Productions to międzynarodowa firma, która specjalizuje się w HTML5/CSS3, strumieniowym przesyłaniu obrazu wideo, rozwoju urządzeń przenośnych, edukacji online, architekturze Action-Script 3.0, Flashu i PHP. </article> <br> <footer><div> <nav> <a href="#"> Odnośnik nr 1 </a> <a href="#"> Odnośnik nr 2 </a> <a href="#"> Odnośnik nr 3 </a> </nav> </div></footer> </body> </html> 90 Arkusz stylów korzysta z właściwości a:hover do jej zmiany, kiedy użytkownik najedzie myszką na odnośnik. W znaczniku <a> definicji CSS3 text-decoration jest ustawiony na none, co oznacza, że tekst odnośnika nie będzie podkreślony. Należy więc coś zrobić, by poinformować użytkownika o obecności odnośnika; najlepiej za pomocą właściwości :hover. Zmieniony kolor subtelnie, ale efektywnie pokaże użytkownikowi, że najechał myszką na odnośnik. Kolor oryginalny i kolor odsyłacza należą do palety. Tworząc stronę, pamiętaj, że nie tylko znaczniki <body> i <h..> korzystają z kolorów palety. Projekt ten działa głównie na urządzeniach przenośnych (patrz prawy zrzut na rysunku 4.10), ale powinien się sprawdzić również na komputerach i ekranach projekcyjnych (patrz lewy zrzut na rysunku 4.10). Oczywiście Twoja strona zawsze będzie wyglądała lepiej, jeśli jej projekt wykona projektant. Programiści też mogą jednak ulepszyć jej wygląd, zwracając większą uwagę na kombinacje kolorów. DO DZIEŁA! Poniższe dwa wyzwania powinny sprawić Ci przyjemność; co więcej, podejmując się ich, wiele się nauczysz: Odtworzenie wykresu koloru podstawowego: Na rysunku 4.1 znajduje się obraz o standardowych kolorach. Twoim pierwszym wyzwaniem będzie sprawdzenie, czy potrafisz odtworzyć stronę, która wyświetla te kolory. Oto kilka wskazówek przed rozpoczęciem pracy:

17 ROZDZIAŁ 4: PRACA Z WARTOŚCIAMI KOLORÓW 91 Rysunek Schemat kolorów stosowany na stronie Zdefiniuj każdy nazwany kolor jako klasę w swoim kontenerze <style> tym samym kolorem dla tekstu i tła..aqua { color:aqua; background-color:aqua; Jednym ze sposobów jest użycie znacznika <span> do przypisania klas zawartości kontenera <span>. <h3> <span class=aqua>nazwa KOLORU</span><span class=black>nazwa KOLORU </span><span class=blue>nazwa KOLORU</span><span class=fuchsia>nazwa KOLORU </span> <h3> Twoje zdjęcie jest na stronie! To zadanie składa się z trzech części: 1. Zrób sobie zdjęcie cyfrowe, korzystając z wbudowanego w Twoim komputerze aparatu, lub zgraj jakieś z aparatu cyfrowego. 2. Załaduj zdjęcie w aplikacji Kuler i stwórz paletę kolorów. 3. Stwórz stronę ze swoim zdjęciem, korzystając z palety kolorów wykonanej za pomocą aplikacji Kuler.