Table Of ContentSpis treści
Wstęp ............................................................................................. 5
Niezbędne narzędzia .......................................................................................................... 5
Edytor ...................................................................................................................... 5
Przeglądarka ............................................................................................................ 6
Walidator kodu CSS i HTML .................................................................................. 7
HTML, CSS .......................................................................................................................8
Szablon strony HTML ............................................................................................. 8
Poprawność kodu HTML ........................................................................................ 8
CSS .......................................................................................................................... 9
Rozdział 1. Animacje ...................................................................................... 15
1.1. Kolejno wpisywane litery ......................................................................................... 15
1.2. Przesuwający się tekst .............................................................................................. 32
1.3. Obracanie obiektu ..................................................................................................... 42
1.4. Karta animowana trójwymiarowa ............................................................................ 51
1.5. Animowany pierścień trójwymiarowy ................................................................... 66
1.6. Animowany sześcian ................................................................................................ 81
Rozdział 2. Cienie ......................................................................................... 107
2.1. Cienie prostokątów ................................................................................................. 107
Przesunięcie ......................................................................................................... 109
Rozmycie ............................................................................................................. 113
Rozszerzenie ........................................................................................................ 117
Kolory .................................................................................................................. 120
Cień wewnętrzny ................................................................................................. 125
Kilka cieni ........................................................................................................... 127
2.2. Cienie tekstu ........................................................................................................... 131
Napisane biało na białym ..................................................................................... 136
Poświata ............................................................................................................... 137
2.3. Cień obiektu ............................................................................................................ 140
Odsyłacz .............................................................................................................. 141
Pogrubienie .......................................................................................................... 142
Lista ..................................................................................................................... 143
Rozdział 3. Identyfikacja elementu ................................................................ 145
3.1. Identyfikacja elementu poprzez class i id .............................................................. 145
Identyfikacja elementu poprzez id ...................................................................... 156
3.2. Identyfikacja elementu poprzez span i div ............................................................. 157
4 CSS3. Zaawansowane projekty
Rozdział 4. Kolory ......................................................................................... 163
4.1. Odcień, nasycenie i jasność .................................................................................... 163
Przezroczystość alfa ............................................................................................ 163
Odcień, nasycenie i jaskrawość .......................................................................... 165
Odcień, nasycenie, jaskrawość i przezroczystość ............................................... 167
4.2. Gradienty ................................................................................................................ 169
Gradienty liniowe ................................................................................................ 169
Gradienty promieniowe ....................................................................................... 174
Gradienty rozchodzące się od narożnika ............................................................ 177
Gradienty wielokolorowe .................................................................................... 179
4.3. Ciągła zmiana jednolitego koloru tła ................................................................... 181
Rozdział 5. Nawigacja ................................................................................... 185
5.1. Nietypowe podkreślenia hiperłączy ......................................................................... 186
5.2. Menu pionowe zmieniające kolor po najechaniu kursorem ................................... 190
5.3. Menu poziome zmieniające kolor po najechaniu kursorem ................................... 195
5.4. Tooltip .................................................................................................................... 200
5.5. Tooltip animowany ................................................................................................. 205
Rozdział 6. Wybór szablonu w zależności od wielkości ekranu ........................ 211
6.1. Postać strony zależna od urządzenia użytego do jej oglądania .............................. 213
Szerokość okna .................................................................................................... 213
Wydruk ................................................................................................................ 215
Kilka reguł ........................................................................................................... 217
Rozdział 7. Przekształcenia geometryczne ..................................................... 219
7.1. Pochylanie obiektu ................................................................................................. 220
7.2. Transformacje ......................................................................................................... 223
Przekoszenie ........................................................................................................ 223
Skalowanie .......................................................................................................... 224
Przesunięcie ......................................................................................................... 227
7.3. Przekształcenia geometryczne złożone .................................................................. 228
7.4. Efekty kolorystyczne .............................................................................................. 229
Przezroczystość alpha .......................................................................................... 229
Odcień, nasycenie i jasność ................................................................................ 231
Odcień, nasycenie, jasność i przezroczystość ..................................................... 232
Rozdział 8. Tło .............................................................................................. 235
8.1. Ruchome tło ............................................................................................................ 235
8.2. Skalowanie tła ........................................................................................................ 239
8.3. Tło — usuwanie ..................................................................................................... 242
8.4. Tło wieloobrazowe ................................................................................................. 245
8.5. Tło z gradientem liniowym ..................................................................................... 246
8.6. Tło z gradientem promieniowym ........................................................................... 251
Rozdział 9. Layout ........................................................................................ 255
9.1. Umieszczanie napisów lub obrazków w wybranym miejscu ................................. 255
Pozycjonowanie statyczne ................................................................................... 256
Pozycjonowanie absolutne ................................................................................... 257
Pozycjonowanie ustalone ..................................................................................... 259
Pozycjonowanie względne .................................................................................. 260
9.2. Zaokrąglone narożniki ............................................................................................ 262
9.3. Projekt strony z odsyłaczami ................................................................................. 269
Zakończenie ............................................................................... 275
Skorowidz ................................................................................... 277
Wstęp
Informatyk mówi do kolegi:
— Popracuj dziś sam nad tym naszym programem, bo ja muszę być na urodzinach
mamy, kończy dziś 64 lata!
— Ooo, to musisz iść koniecznie! To taka piękna, okrągła rocznica.
Jeżeli rozumiesz dowcip, oznacza to, że książka jest przeznaczona dla Ciebie. Każde śro-
dowisko ma swój punkt widzenia. Tak jak różne są punkty widzenia lekarza i pacjenta,
podobnie różne są punkty widzenia informatyka i użytkownika strony WWW. Nie zna-
czy to, że któryś z nich jest lepszy. Są po prostu inne. Lekarz skupia się na dobru pa-
cjenta, który nie do końca musi rozumieć, co się z nim dzieje. W książce skupimy się na
uzyskiwaniu efektów na stronach WWW za pomocą kodu CSS. Osoba korzystająca z ser-
wisu nie musi wiedzieć, jak zostały one osiągnięte. Ja skupię się właśnie na owym: „jak?”.
Niezbędne narzędzia
Do pracy z projektami opisanymi w książce potrzebne będą:
edytor,
przeglądarka,
walidator kodu CSS i HTML.
Aby można było korzystać z walidatorów, konieczne jest połączenie z internetem.
Wszystkie pozostałe operacje opisane w książce można wykonywać, posługując się
plikami zapisanymi na dysku lokalnym.
Edytor
Aby nie zmuszać czytelnika do instalacji dodatkowego oprogramowania, w przykładach
używałem Notatnika (rysunek W.1) standardowo instalowanego wraz z systemem Win-
dows. Było mi przez to nieco trudniej, ale liczy się wygoda czytelnika. Oczywiście nic
nie stoi na przeszkodzie, abyś używał innego edytora.
6 CSS3. Zaawansowane projekty
Rysunek W.1.
Edytor, którego
używałem do pisania
przykładów omawianych
w książce
Sprawdzanie składni, w które wyposażone są bardziej rozbudowane edytory, zastąpiłem
walidacją kodu w darmowym serwisie zewnętrznym.
Przeglądarka
Wygląd strony zależy niekiedy od przeglądarki, w której jest ona wyświetlana. Różnice
wynikają z odmiennego interpretowania przez nie standardów CSS i HTML. Co począć
w takiej sytuacji?
Na to, co ma zainstalowane w komputerze osoba oglądająca stronę, nie mamy wpływu.
Można natomiast rozbudować kod strony oraz zamieścić w nim instrukcje i tą właśnie
drogą poszedłem.
Objętość książki znacznie by wzrosła, jeśliby zostały załączone ilustracje i przeprowa-
dzona dyskusja dotycząca różnic w wyglądzie kodu wyświetlonego w poszczególnych
przeglądarkach. Zamiast tego zadbałem o zgodność kodu ze standardem.
Ilustracje do książki wykonałem, używając przeglądarki Google Chrome (rysunek
W.2) uruchomionej w komputerze z zainstalowanym systemem operacyjnym Win-
dows 7 Home Premium w wersji 64-bitowej. Jeżeli pracujesz z inną przeglądarką lub
innym systemem operacyjnym — wygląd okien może różnić się od pokazanych na
ilustracjach.
Rysunek W.2. To jest przeglądarka, której używałem do sprawdzania wyglądu programów opisanych
w książce. Kilka kategorii zakładek świadczy o tym, że przeglądarka naprawdę jest używana
Wstęp 7
Walidator kodu CSS i HTML
Przeglądarka zweryfikowana została za pomocą dwóch walidatorów:
HTML (http://validator.w3.org/) — rysunek W.3,
CSS (http://jigsaw.w3.org/css-validator/) — rysunek W.4.
Rysunek W.3. Aby serwis sprawdził poprawność kodu HTML zapisanego do pliku, należy kliknąć kartę
Validate by File Upload, a następnie kliknąć przycisk Wybierz plik i załadować plik HTML, którego
poprawność chcemy sprawdzić
Rysunek W.4. Aby serwis sprawdził poprawność kodu CSS zapisanego do pliku, należy kliknąć kartę
poprzez załadowanie pliku, a następnie kliknąć przycisk Wybierz plik i załadować plik zawierający kod
CSS, którego poprawność chcemy sprawdzić
8 CSS3. Zaawansowane projekty
HTML, CSS
W naszych przykładach szkielet strony WWW zbudujemy w HTML. Do niego dodawać
będziemy komponenty w CSS. Nie obawiaj się — nie będziesz musiał nic instalować
w komputerze. Obsługę kodu HTML i CSS mają wbudowane wszystkie obecnie
spotykane przeglądarki internetowe.
Standardy HTML i CSS są stale rozwijane. Prowadzone są również prace nad przeglą-
darkami. Świadczą o tym kolejne numery wersji. Jedyny problem może polegać na tym,
że używasz komputera, w którym nie jest zainstalowana wersja przeglądarki obsługują-
ca użytą w przykładzie instrukcję. W takim przypadku nie ujrzysz opisywanego efektu.
Szablon strony HTML
Kod HTML, który pozwala na wyświetlenie statycznej strony WWW, ma postać:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>001</title>
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="PL">
<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=iso-8859-2">
</head>
<body>
<h1>Nagłówek</h1>
<p>
Treść
</p>
</body>
</html>
Po wyświetleniu w oknie przeglądarki Chrome wersja 39.0.2171.95 m ma on postać,
jak na rysunku W.5.
Rysunek W.5.
Plik 001.html wyświetlony
w przeglądarce Chrome
wersja 39.0.2171.95 m
Poprawność kodu HTML
Powstaje pytanie, czy szablon strony jest zgodny ze standardem HTML i czy popraw-
nie wyświetla się tylko w jednym typie przeglądarki. Odpowiedzią na nie będzie sko-
rzystanie z walidatora (rysunek W.6).
Wstęp 9
Rysunek W.6. Pomyślny wynik walidacji kodu
CSS
Po co jest CSS? Czy nie można uzyskać ciekawego wyglądu strony w HTML? Aby
odpowiedzieć na oba pytania, trzeba cofnąć się do epoki (z punktu widzenia wielu
czytelników książki) dinozaurów, czyli do roku 1989. Wówczas Tim Berners-Lee
wystąpił z propozycją ogólnoświatowego projektu opartego na hipertekście — na-
zwanego World Wide Web (rysunek W.7).
Rysunek W.7.
Pierwsza strona
opublikowana przez
Tima Bernersa-Lee
Czy zdajesz sobie sprawę z tego, jak wielką rolę w naszym życiu odgrywa przypadek?
Jak wyglądałby współczesny świat, gdyby Tim Berners-Lee nie wynalazł HTML? Czy
internet by istniał w takiej postaci jak obecnie? Czy istniałyby media społeczno-
ściowe? Wielu osobom wydaje się, że ich obecność w naszym życiu jest naturalna.
U zarania swych dziejów język HTML był wykorzystywany do nadawania struktury
tekstowi (rysunek W.7). Autor mógł używać znaczników porządkujących tekst (rysu-
nek W.8).
10 CSS3. Zaawansowane projekty
Rysunek W.8. Kod strony http://info.cern.ch/, czyli szczytowe osiągnięcie informatyki lat osiemdziesiątych
XX wieku. Dziś wydaje się śmieszny. Wynalezienie go było wydarzeniem o podobnej randze jak wynalezienie
silnika spalinowego
Świat nie stoi w miejscu. Zawsze znajdzie się ktoś, kto będzie chciał czegoś więcej,
niż jest dostępne obecnie. Gdy internet zdobył popularność, twórcy stron zaczęli po-
szukiwać możliwości uatrakcyjniania wyglądu dokumentów HTML.
Niegdyś popularne były przeglądarki opracowane przez firmy Netscape i Microsoft.
Zostały one rozbudowane o interpretację znaczników, która nie była zgodna ze stan-
dardem HTML. Coraz częściej podczas surfowania po internecie spotykany był ko-
munikat: „Potrzebujesz przeglądarki X, aby wyświetlić stronę”. Bałagan utrudniał wy-
mianę informacji.
Postanowiono odseparować styl od treści dokumentu. Za treść odpowiedzialny pozo-
stał standard HTML, formą natomiast zajął się CSS.
Dwa sposoby umieszczania kodu CSS
Kod CSS możemy wbudować w kod strony. Nosi on wówczas nazwę kodu osadzonego.
Innym rozwiązaniem jest zapisanie kodu do oddzielnego pliku. W kodzie strony znaj-
duje się wówczas odwołanie do niego. Taki arkusz stylu zwany jest zewnętrznym.
CSS osadzony
W listingu po ostatnim znaczniku <META… umieszczono arkusz osadzony:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
Wstęp 11
<title>001</title>
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="PL">
<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=iso-8859-2">
<style type="text/css">
body {background-color: #DDDDDD;}
</style>
</head>
<body>
<h1>Nagłówek</h1>
<p>
Treść
</p>
</body>
</html>
Na rysunku W.9 pokazano, jak wygląda okno przeglądarki po wczytaniu pliku za
pomocą arkusza osadzonego.
Rysunek W.9.
Pomiędzy znacznikami
<style> i </style>
znajduje się polecenie
powodujące zmianę
koloru tła strony
Arkusz zewnętrzny
W listingu znajduje się odwołanie do arkusza 001b.css, który znajduje się w tym samym
katalogu, co plik HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>001b</title>
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="PL">
<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=iso-8859-2">
<link rel="stylesheet" type="text/css" href="001b.css" />
</head>
<body>
<h1>Nagłówek</h1>
<p>
Treść
</p>
</body>
</html>
Na rysunku W.10 pokazano, jak wygląda okno przeglądarki po wczytaniu pliku html
z odwołaniem do zewnętrznego arkusza stylów.
Posługując się edytorem, należy napisać kod (rysunek W.11) i zapisać go do pliku
o nazwie występującej w kodzie strony, czyli 001b.css.
