Podręcznik HTML5. Smashing Magazine

Transkrypt

4
ROZDZIAŁ
PODRĘCZNIK HTML5
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.
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 4.1.
Tabela 4.1. Standardowe nazwy kolorów
76
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 stronie1.
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 www.helion.pl/ksiazki/tfanh5 — przyp. red.
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
www.w3.org/TR/SVG/types.html#ColorKeywords).
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:
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;
77
}
</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 4.2.
78
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.
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>
.redBase {
color:hsl(0, 100%, 50%);
}
.redDarker {
color:hsl(0, 100%, 25%);
}
.redLighter {
color:hsl(0, 100%, 75%);
}
</style>
<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>
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
79
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ć
16 777 216 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>
body {
/* czerwone tło */
background-color:rgb(255,0,0);
}
h1 {
/* duży żółty tekst */
color:rgb(255,255,0);
}
h2 {
/*niebieski tekst na szarym tle */
color:rgb(0,0,255);
background-color:rgb(150,150,150);
}
</style>
<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,
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
82
Binarny
Dziesiętny
Heksadecymalny
0
0
0
1
1
1
10
2
2
11
3
3
100
4
4
101
5
5
110
6
6
111
7
7
1000
8
8
1001
9
9
1010
10
A
1011
11
B
1100
12
C
1101
13
D
1110
14
E
1111
15
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ść 11111111.
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
11111111
255
FF
Jak widzisz w tabeli 4.3, wartość heksadecymalna FF jest najwyższą możliwą wartością dla
dwóch cyfr; podobnie wartość binarna 11111111 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.
<!DOCTYPE HTML>
<html>
<head>
/* 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 {
color:#B5aa60;
background-color:#E8D986;
text-align:center;
}
h2 {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#b5aa69;
}
</style>
83
<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ą).
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>
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>
<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>
Wyniki pokazane na rysunku 4.6 są wyświetlane na iPhonie i wyglądają inaczej niż na ekranie
Twojego komputera.
85
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 http://kuler.adobe.com. 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 http://www.adobe.com/products/flashplayer.
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.
Rysunek 4.7. Schemat kolorów z podstawowego koloru
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
87
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.
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>
/* 027333,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>
<title>Ustalanie kolorów</title>
</head>
<body>
<div><nav>
89
<a href="#"> Odnośnik nr 1 | </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 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:
91
Rysunek 4.10. 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.

Podręcznik HTML5. Smashing Magazine

Transkrypt

Podobne dokumenty