CSS3. Zaawansowane projekty [PDF]

Zitiervorschau

---

Spis 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 środowisko 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 znaczy to, że któryś z nich jest lepszy. Są po prostu inne. Lekarz skupia się na dobru pacjenta, 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 serwisu 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 Windows. 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 przeprowadzona 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 Windows 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ć:

001



Nagłówek

Treść

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 poprawnie wyświetla się tylko w jednym typie przeglądarki. Odpowiedzią na nie będzie skorzystanie 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 — nazwanego 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 (rysunek 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 poszukiwać 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 standardem HTML. Coraz częściej podczas surfowania po internecie spotykany był komunikat: „Potrzebujesz przeglądarki X, aby wyświetlić stronę”. Bałagan utrudniał wymianę informacji. Postanowiono odseparować styl od treści dokumentu. Za treść odpowiedzialny pozostał 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 znajduje się wówczas odwołanie do niego. Taki arkusz stylu zwany jest zewnętrznym.

CSS osadzony W listingu po ostatnim znaczniku span { background-color:white; }

Zapis #tekst oznacza, że parametry odnoszą się do bloku o identyfikatorze tekst. Właściwość float: określa, w jaki sposób element ma być umieszczony w poziomie. Dzięki temu jego położenie zostaje wymuszone i inne elementy mogą zająć pozycję wokół niego. Właściwość ta ma pięć wartości:  none — wartość domyślna. Obiekt nie ma wymuszonego położenia,  left — element jest dosunięty do lewej,  right — element jest dosunięty do prawej,  initial — nadaje właściwości wartość domyślną,  inherit — położenie jest dziedziczone od rodzica.

W arkuszu css właściwości float: nadana została wartość left: float:left;

Kolejną właściwością jest font-size:. Określa ona wielkość czcionki. W przykładzie użyto jednostki em. Jest to miara względna. Jeden em to wielkość równa rozmiarowi czcionki.

18

CSS3. Zaawansowane projekty

Jeśli czcionka ma 6 punktów, to 1 em wynosi 6 punktów. Zapis font-size:2.1em oznacza, że wielkość czcionki w stosunku do domyślnej została zwiększona 2.1 razy. Wraz ze zmianą wielkości tekstu proporcjonalnie zmienione zostaną również wysokość wiersza oraz odstępy między elementami. Czy wpisanie wartości em jest jedynym sposobem określenia wielkości czcionki? Nie. Sposobów jest dość dużo (tabela 1.1). Tabela 1.1. Wartości właściwości font-size Wartość

Opis

medium

Wartość domyślna. Nadaje czcionce wielkość średnią.

xx-small

Nadaje czcionce wielkość xx-small.

x-small

Nadaje czcionce wielkość bardzo małą.

small

Nadaje czcionce wielkość małą.

large

Nadaje czcionce wielkość dużą.

x-large

Nadaje czcionce wielkość bardzo dużą.

xx-large

Nadaje czcionce wielkość jeszcze większą.

smaller

Nadaje czcionce wielkość mniejszą od elementu rodzica.

larger

Nadaje czcionce wielkość większą od elementu rodzica.

length

Nadaje czcionce wielkość w jednostkach px, cm itd.

%

Nadaje czcionce wielkość liczoną jako % w stosunku do wielkości czcionki.

initial

Nadaje właściwości wartość domyślną.

inherit

Wartość jest dziedziczona od rodzica.

Właściwość font-family: określa czcionkę elementu. Umożliwia to narzucenie przeglądarce, jakiej czcionki ma używać. A co się stanie w przypadku, gdy wyspecyfikowanej czcionki nie ma zainstalowanej w komputerze? Aby zminimalizować ryzyko utraty kontroli nad sposobem wyświetlania tekstu, należy… podać nie jedną, ale kilka czcionek. Gdy na liście nie będzie pierwszej, zostanie podjęta próba znalezienia drugiej, gdy i jej nie będzie, zostanie podjęta próba znalezienia trzeciej… Istnieją dwa typy rodzin czcionek:  family-name — należą do nich konkretne czcionki, takie jak: Times, Courier,

Arial itd.  generic-family — należą do nich czcionki o określonych właściwościach:

serif, sans-serif, cursive, fantasy, monospace. Zazwyczaj w deklaracji wpisuje się nazwę pożądanej czcionki (family-name) i nazwę rodziny (generic-family). Jeśli więc konkretna czcionka nie jest dostępna, przeglądarka może wybrać podobną czcionkę z rodziny generycznej.

Rozdział 1.  Animacje

19

W doborze rodziny czcionek pomocna może być tabela 1.2. Tabela 1.2. Rodziny czcionek Rodzina

Opis

serif

rodzina czcionek proporcjonalnych szeryfowych

sans-serif

rodzina czcionek proporcjonalnych bezszeryfowych

monospace

rodzina czcionek nieproporcjonalnych (równej szerokości)

cursive

rodzina czcionek naśladujących pismo odręczne (nie mylić z kursywą — pismem pochyłym)

fantasy

rodzina czcionek dekoracyjnych, ozdobnych, fantazyjnych

Nie lękaj się! Wybranie czcionki szeryfowej nie spowoduje, że na ekranie zaczną pojawiać się postacie z westernów. Szeryfy w typografii oznaczają elementy ozdobne. Czcionką szeryfową jest np. Times New Roman (rysunek 1.3). Rysunek 1.3. Po lewej czcionka szeryfowa. W jej dolnej części widać ozdobniki. Po prawej stronie czcionka bezszeryfowa. Litera nie ma ozdobników

Czcionki bezszeryfowe natomiast nie posiadają ozdobników. Czcionką szeryfową jest np. Arial. Czcionki szeryfowe są na ogół stosowane w publikacjach drukowanych. Natomiast czcionki bezszeryfowe używane są głównie w publikacjach elektronicznych.

Zapis: font-family:"Courier New", monospace;

oznacza, że preferowaną czcionką jest Courier New, a jeśli nie ma możliwości jej użycia, to dowolna czcionka o stałej szerokości. Czym podyktowane są te wymagania? W przykładzie chcemy, aby litery kolejno pojawiały się na ekranie. Jeżeli każda z liter będzie miała identyczną szerokość, wystarczy, aby zasłaniający je element przesuwał się w prawo zawsze o taką samą odległość. Ponieważ kolor liter nie został określony, będą one miały kolor domyślny, czyli czarny. W linii: background-color:white;

zdefiniowano kolor tła, na którym widoczne będą litery. Domyślnie tło jest przezroczyste. Jego kolor można określić za pomocą nazwy (tabela 1.3) lub udziału poszczególnych składowych. Dla elementu span mamy zdefiniowaną tylko jedną właściwość. Jest nią kolor tła.

20

CSS3. Zaawansowane projekty

Tabela 1.3. Wybrane kolory Nazwa

Składowe

Opis

aqua

#00ffff

cyjan

black

#000000

czarny

blue

#0000ff

niebieski

fuchsia

#ff00ff

fuksja

gray

#80808

szary

green

#008000

zielony

lime

#00ff00

limonka

maroon

#800000

wiśniowy

navy

#000080

granatowy

olive

#808000

oliwkowy

orange

#ffA500

pomarańczowy

purple

#800080

fioletowy

red

#ff0000

czerwony

silver

#c0c0c0

srebrny

teal

#008080

morski

white

#ffffff

biały

yellow

#ffff00

żółty

Pora zobaczyć, jak wygląda plik 003.html wyświetlony w oknie przeglądarki (rysunek 1.4). Rysunek 1.4. Dokument nie wygląda ładnie, gdy używanych jest w nim wiele krojów czcionek

Gdy do arkusza stylów dodamy specyfikację kroju czcionki, którym zapisany będzie nagłówek h1: body{ } h1{ font-size:3em; font-family:"Courier New", monospace; }

wówczas krój czcionki zostanie ujednolicony, a nagłówek h1 będzie o 0,9 większy od reszty tekstu (rysunek 1.5).

Rozdział 1.  Animacje

21

Rysunek 1.5. Wygląd dokumentu z rysunku 1.4 został zmieniony dzięki poprawce wprowadzonej w arkuszu stylów

Po sprawdzeniu poprawności kodu pliku HTML i arkusza stylów CSS możemy kontynuować pracę. Kolejnym etapem będzie przysłonięcie tekstu przez element span. Nie będziemy ingerować w treść dokumentu. Zmiany wprowadzimy tylko w arkuszu stylów. W pliku 003.html zmienimy tytuł odwołania do arkusza CSS. Zamiast do 003.css będzie odwoływał się do 004.css:

Zapiszemy go pod nazwą 004.html. Skupimy się teraz na arkuszu CSS. Uzupełnimy go o kilka linii. Uzyska on następującą postać: #tekst { float:left; font-size:2.1em; font-family:"Courier New", monospace; background-color:white; position:relative; } #tekst > span { background-color:white; position:absolute; top:0; right:0; height:100%; } body{ } h1{ font-size:3em; font-family:"Courier New", monospace; }

Aby uprościć analizę, nowe linie dodałem po już istniejących. W sekcji pierwszej pojawił się zapis position:relative;.

22

CSS3. Zaawansowane projekty

Właściwość position pozwala na określenie położenia elementu. Położenie jest określane względem punktu odniesienia. W CSS mamy następujące możliwości wybrania punktu odniesienia:  static — położenie elementu zależne jest od rozmieszczenia innych

składników strony. Opcja domyślna.  fixe — element można przesunąć w dowolnym kierunku względem kontenera. Możliwości przesunięcia to: top (od góry), bottom (od dołu), left (od lewej), right (od prawej). Podane w nawiasach słowa są nie tłumaczeniem,

ale wyjaśnieniem, jak wybranie opcji wpłynie na położenie elementu.  relative — element można przesunąć w dowolnym kierunku od miejsca, w którym by się znalazł domyślnie. Możliwości przesunięcia to: top (od góry), bottom (od dołu), left (od lewej), right (od prawej). Zapis top:20px przesunie

element o 20px w dół. Element zajmuje miejsce tam, gdzie powinien być domyślnie wyświetlany, a pokazywany jest w innym miejscu. Wartości przesunięcia mogą być ujemne. Tak pozycjonowany element może być kontenerem dla wszystkich innych, które są pozycjonowane w nim absolutnie.  absolute — element można przesunąć w dowolnym kierunku od miejsca

położenia w kontenerze. Kontenerem są elementy pozycjonowane za pomocą opcji: relative, absolute, fixed. Gdy nie ma takiego elementu nadrzędnego, to wybiera go przeglądarka. Domyślnie jest to body. Możliwości przesunięcia to: top (od góry), bottom (od dołu), left (od lewej), right (od prawej). Zatem w przykładzie element można przesunąć w dowolnym kierunku od miejsca, w którym by się znalazł domyślnie. Jest on kontenerem dla wszystkich innych, które są pozycjonowane w nim absolutnie. W drugiej części arkusza dodano polecenia: position:absolute; top:0; right:0; height:100%;

Układanka zaczyna być logiczną całością. Element span pozycjonowany jest absolutnie względem kontenera, którym jest element o identyfikatorze tekst. Parametr height: narzuca wysokość elementu. Wartość 100% informuje o tym, że nie jest ona zmieniona (czyli jest domyślna). Wysokość elementu jest zmieniona, gdy parametr ma wartość różną od 100%. Czy wprowadzone zmiany mają wpływ na wygląd dokumentu (rysunek 1.6)? Po sprawdzeniu poprawności kodu CSS i HTML w walidatorze możemy przejść do kolejnego etapu pracy. Będzie nim zwiększenie szarości elementu przysłaniającego napis, czyli span.

Rozdział 1.  Animacje

23

Rysunek 1.6. Pliki 004.html i 003.html wyświetlone w oknie przeglądarki różnią się nagłówkiem i tytułem strony. Po co dodano kilka linijek kodu? Mają one zapewnić kontrolę nad położeniem elementów oraz identyczny wygląd uzyskanego efektu w różnych przeglądarkach

Zaczniemy od wprowadzenia zmian w pliku HTML:

005



005 Nie prasować ubrań na ciele.

Nie są one duże. Ograniczają się do zmiany z 004 na 005 w tytule, nagłówku oraz nazwie pliku css. Plik 005.css ma postać: #tekst { float:left; font-size:2.1em; font-family:"Courier New", monospace; background-color:white; position:relative; } #tekst > span { background-color:white; position:absolute; top:0; right:0; height:100%; width:50%;} body{ } h1{ font-size:3em; font-family:"Courier New", monospace; }

24

CSS3. Zaawansowane projekty

Możesz pobawić się w zabawę: „Wytęż wzrok i znajdź X szczegółów” i porównać pliki 004.css oraz 005.css. Jeśli nie masz na to ochoty — podaję rozwiązanie zagadki. W drugiej części pliku dodano do linii: width:50%;}

Czy zmiana ma wpływ na wygląd pliku wyświetlanego w oknie przeglądarki (rysunek 1.7)? Rysunek 1.7. Coś pożarło połowę literek!!!

Łatwiej będzie sobie wyobrazić, co się stało, gdy kolor elementu span będzie inny od koloru tła napisu (rysunek 1.8). Rysunek 1.8. Element span jest widoczny na pierwszym planie. Rozpycha się tak, jak tylko mu na to pozwala parametr width:50%

Miała być animacja, a tymczasem do tej pory doszło jedynie do zasłaniania napisu — może stwierdzić rozczarowany nabywca książki. Zanim, drogi Czytelniku, zwrócisz książkę do wydawnictwa, uzbrój się jeszcze w nieco cierpliwości. Za chwilę pojawią się „wodotryski”. Po sprawdzeniu poprawności kodu CSS i HTML w walidatorze możemy przejść do kolejnego etapu pracy. Będzie nim zwiększenie animacji elementu przysłaniającego napis, czyli span. Zaczniemy od wprowadzenia zmian w pliku HTML:

006



Rozdział 1.  Animacje

25

006 Nie prasować ubrań na ciele.

Nie są one duże. Ograniczają się do zmiany z 005 na 006 w tytule, nagłówku oraz nazwie pliku css. Za to w przypadku pliku 006.css będzie tłumaczenia mnóstwo. Ma on bowiem postać: #tekst { float:left; font-size:2.1em; font-family:"Courier New", monospace; background-color:white; position:relative; } #tekst > span { background-color:lime; position:absolute; top:0; right:0; height:100%; width:50%; -webkit-animation: mymove 10s linear infinite; /* Chrome, Safari, Opera */ animation: mymove 10s linear infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { 0% { width:100%; } 100% { width:0; } } @keyframes mymove { 0% { width:100%; } 100% { width:0; } } body{ } h1{ font-size:3em; font-family:"Courier New", monospace; }

Webmaster przeżywa podobne rozterki jak np. archeolog. Ten drugi odkrywa ruiny miasta, pod którym znajdują się ruiny jeszcze starszego miasta. Czy można zniszczyć nowsze ruiny, aby dostać się do tych starszych? Dla webmastera kryterium podobnym

26

CSS3. Zaawansowane projekty

jak czas dla archeologa są wersje przeglądarek. Niektóre obsługują daną metodę, a inne nie. Co w takiej sytuacji począć? Można wybrać rozwiązanie salomonowe — napisać program, który będzie poprawnie działać w każdej popularnej przeglądarce. Właśnie takie rozwiązanie zostało zastosowane w naszym przykładzie. Zacznijmy od -webkit-animation:. Webkit jest silnikiem przeglądarki internetowej. Jego zadaniem jest przetwarzanie zawartości stron internetowych (kod HTML, XHTML, grafika, skrypty) oraz ich elementów formatujących (arkusze CSS i XSL), a następnie renderowanie rezultatu. Najpopularniejszymi programami korzystającymi z silnika WebKit są przeglądarki internetowe Maxthon, Safari, Google Chrome (do wersji 27) oraz Opera (od wersji 14). W składni standardowej wystarczy napisać animation. Parametry mymove 10s linear infinite to kolejno: nazwa, czas wykonywania, prędkość i liczba powtórzeń animacji. W przykładzie animacja trwa dziesięć sekund (10s). Ma stałe tempo (linear). Powtarza się w nieskończoność od początku do końca (infinite). W regule @keyframes zapisane zostały selektory czasu animacji. Oznaczone zostały jako 0% oraz 100%. Dzięki temu wiadomo, od jakich właściwości CSS animacja się rozpoczyna oraz z jakimi właściwościami CSS się kończy. W przykładzie animacja rozpoczyna się od szerokości równej całemu elementowi, zaś kończy z elementem o długości zerowej. Na rysunku 1.9 pokazano okno przeglądarki po wczytaniu pliku 006.html. Rysunek 1.9. Przeglądarka podczas wyświetlania animacji

Gdy kolor elementu span zmienimy na taki sam jak kolor tła napisu, uzyskamy efekt stopniowego odsłaniania liter (rysunek 1.10). Rysunek 1.10. Rozwiązanie już jest blisko. Zależy nam na tym, aby litery były odsłaniane skokowo, a nie płynnie

Rozdział 1.  Animacje

27

Podczas pisania tej książki (początek 2015 roku) webkit nie był uznany za standard CSS. Walidator informuje o błędzie występującym w linii, która zawiera jego specyfikację.

Typ animacji trzeba zmienić z linear (liniowe przesuwanie elementu span) na steps (przesuwanie skokowe). Ma ona inne parametry niż linear. Pierwszym parametrem funkcji steps, jaki należy podać, jest liczba klatek animacji. Co to oznacza w praktyce? Należy policzyć wszystkie znaki, które zostały umieszczone w elemencie #tekst. Znakiem jest również spacja. W przykładzie liczba klatek i znaków wynosi 28. Drugim parametrem może być start lub end. Domyślnie przyjmowana jest wartość end. Powoduje ona, że w animacji jest pomijana ostatnia klatka. Ponieważ chcemy, aby wyświetlana była również kropka, należy użyć wartości start. Kod CSS będzie miał postać: #tekst { float:left; font-size:2.1em; font-family:"Courier New", monospace; background-color:white; position:relative; } #tekst > span { background-color:white; position:absolute; top:0; right:0; height:100%; width:50%; -webkit-animation: mymove 10s steps(28,start) infinite; /* Chrome, Safari, Opera */ animation: mymove 10s steps(28,start) infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { 0% { width:100%; } 100% { width:0; } } @keyframes mymove { 0% { width:100%; } 100% { width:0; } } body{ }

28

CSS3. Zaawansowane projekty h1{ font-size:3em; font-family:"Courier New", monospace; }

Na rysunku 1.11 pokazano okno przeglądarki podczas „wpisywania” tekstu. Rysunek 1.11. Użycie parametru steps wraz liczbą odpowiadającą liczbie znaków sprawia, że przesłaniający tekst element span kurczy się o szerokość znaku. Efekt jest możliwy do uzyskania dzięki czcionce monospace

Gdy przyjrzymy się dłużej animacji, stwierdzimy, że czegoś jej brakuje. Jeszcze chwila namysłu i już wiemy, że jest to znak wstawiania. Jak wyświetlić pionową kreskę migającą w takt przesuwania się elementu span? Najprościej jest dodać lewe obramowanie, które na przemian będzie wyświetlane i ukrywane. Oto kod pliku 008.css: #tekst { float:left; font-size:2.1em; font-family:"Courier New", monospace; background-color:white; position:relative; } #tekst > span { background-color:white; position:absolute; top:0; right:0; height:100%; width:50%; border-left:1px solid;-webkit-animation: mymove 10s steps (28,start) infinite, kursor 1s step-end infinite; /* Chrome, Safari, Opera */ animation: mymove 10s steps(28,start) infinite, kursor 1s step-end infinite; } @-webkit-keyframes mymove /* Chrome, Safari, Opera */ { 0% { width:100%; } 100% { width:0; } } @-webkit-keyframes kursor /* Chrome, Safari, Opera */ { 0% { border-left-color:transparent; }

Rozdział 1.  Animacje

29

50% { border-left-color:black; } 100% { border-left-color:transparent; } } @keyframes mymove { 0% { width:100%; } 100% { width:0; } } @keyframes kursor { 0% { border-left-color:transparent; } 50% { border-left-color:black; } 100% { border-left-color:transparent; } } h1{ font-size:3em; font-family:"Courier New", monospace; }

Co zostało zmienione w porównaniu z poprzednią wersją pliku? Zdefiniowana została animacja: @keyframes kursor { 0% { border-left-color:transparent; } 50% { border-left-color:black; } 100% { border-left-color:transparent; } }

Za słowem kluczowym @keyframes znajduje się nazwa animacji. W przykładzie jest to kursor. W nawiasach klamrowych zapisane są reguły animacji. Do ich utworzenia użyte zostały dostępne reguły CSS. Ponieważ animacja dotyczy lewej ramki obszaru, użyta została reguła border-left-color. Obiekt raz ma kolor czarny (black), a raz jest przezroczysty (transparent) i tak na zmianę. Czas trwania każdego ze stanów określony jest przy użyciu selektora czasu animacji. Jego wartość jest zapisywana za pomocą jednostek wyrażonych w procentach. Selektory czasu animacji muszą być zapisane od wartości najmniejszej do największej. W przykładzie przez połowę czasu element jest czarny, a przez połowę czasu jest niewidoczny. W sekcji tekst dodano kod: border-left:1px solid;-webkit-animation: mymove 10s steps (28,start) infinite, kursor 1s step-end infinite; /* Chrome, Safari, Opera */ animation: mymove 10s steps(28,start) infinite, kursor 1s step-end infinite;

Zdefiniowana została lewa krawędź obszaru (border-left). Ma ona szerokość 1 piksela (1px). Na rysunku 1.12 pokazano, jakie znaczenie dla wyglądu ramki ma rodzaj linii, którą jest ona nakreślona.

30

CSS3. Zaawansowane projekty

Rysunek 1.12. Do symulowania kursora wybrana została linia solid

Jakie znaczenie ma kod kursor 1s step-end infinite;? Słowo kursor jest wywołaniem funkcji. Zapis 1s oznacza, że animacja trwa jedną sekundę. Aby nie zakończyła się na jednym mignięciu, powtarza się ona w nieskończoność od początku do końca (infinite). Tempo step-end oznacza, że animacja składa się z określonej liczby klatek animacji. Liczba klatek jest jednocześnie liczbą selektorów czasu animacji. W przykładzie są trzy klatki o wartościach 0%, 50%, 100%. Na rysunku 1.13 pokazano wygląd okna przeglądarki po wyświetleniu w niej pliku 008.html. Rysunek 1.13. Animacja jest powtarzana w nieskończoność

Pojawiające się kolejno litery intrygują, przyciągają uwagę, natomiast napis pojawiający się i znikający może irytować. Czy można spowodować, aby po wyświetleniu tekstu pozostał on na stronie, a nie znikał i był wpisywany od początku? Oczywiście!

Rozdział 1.  Animacje

31

Oto kod, który po załadowaniu strony powoduje wyświetlenie tekstu litera po literze: #tekst { float:left; font-size:2.1em; font-family:"Courier New", monospace; background-color:white; position:relative; } #tekst > span { background-color:white; position:absolute; top:0; right:0; height:100%; border-left:1px solid;-webkit-animation: mymove 10s steps (28,start), kursor 1s step-end infinite; /* Chrome, Safari, Opera */ animation: mymove 10s steps(28,start), kursor 1s infinite; } @-webkit-keyframes mymove /* Chrome, Safari, Opera */ { 0% { width:100%; } 100% { width:0; } } @-webkit-keyframes kursor /* Chrome, Safari, Opera */ { 0% { border-left-color:transparent; } 50% { border-left-color:black; } 100% { border-left-color:transparent; } } @keyframes mymove { 0% { width:100%; } 100% { width:0; } } @keyframes kursor { 0% { border-left-color:transparent; } 50% { border-left-color:black; } 100% { border-left-color:transparent; } } h1{ font-size:3em; font-family:"Courier New", monospace; }

Czym różni się kod z pliku 009.css od kodu z pliku 008.css? W nowej wersji, w części dotyczącej bloku span, brak jest parametrów step-end oraz width:50%. Pierwszy powodował nieprzerwane wykonywanie animacji, drugi zaś po zakończeniu animacji

32

CSS3. Zaawansowane projekty

nadawał blokowi span szerokość równą połowie szerokości nominalnej. Objawiało się to zasłonięciem prawej połowy napisu. Na rysunku 1.14 pokazano okno przeglądarki po załadowaniu pliku 009.html i wyświetleniu całego tekstu. Rysunek 1.14. Gdy wszystkie litery się pojawią, kursor znajduje się za ostatnim znakiem i miga, miga, miga…

1.2. Przesuwający się tekst W przykładzie uzyskany zostanie efekt polegający na wyświetlaniu na stronie WWW ramki, do której będzie wsuwała się jedna linijka tekstu. Rezultat powinien przypominać tablicę świetlną. Jak można uzyskać taki efekt? Czy istnieje funkcja, która spowoduje przesuwanie się wpisanego tekstu? Aby uzyskać oczekiwany efekt, trzeba wykonać cztery czynności:  Przygotować dokument HTML z tekstem.  Umieścić w dokumencie HTML ramkę.  Dodać polecenie, które spowoduje, że widoczny będzie tylko tekst znajdujący

się w ramce.  Wykonać animację, która spowoduje stopniowe wsuwanie się tekstu do ramki.

Proste? Logiczne? Zatem do rzeczy. Pierwszym krokiem jest przygotowanie kodu strony HTML:

010



Rozdział 1.  Animacje

33

010

Lorem ipsum dolor sit amet.

Zawiera on odwołanie do arkusza stylów 010.css. Tekst został umieszczony w akapicie (znaczniki

i

). Akapit w znajduje się w bloku div o unikalnym identyfikatorze tekst. Unikatowość polega na tym, że w dokumencie 010.html nie ma drugiego bloku o identyfikatorze tekst. Arkusz stylów 010.css ma za zadanie wyświetlenie nagłówka i tekstu wyraźnym pismem przypominającym ręczne: #tekst { font-size:2.1em; font-family:cursive; } h1{ font-size:3em; font-family:cursive; }

Określanie wielkości czcionki zostało opisane w tabeli 1.1, a kroju w tabeli 1.2. Na rysunku 1.15 pokazano okno przeglądarki po wczytaniu pliku 010.html. Rysunek 1.15. Dokument zawiera niemal samą treść. Teraz pora zająć się formą

Plik HTML w przykładzie odpowiedzialny jest za treść. Zasadniczo on się nie zmienia. W każdym jest odwołanie do innego arkusza stylów. Aby patrząc na ilustrację, łatwo było się zorientować, o który plik chodzi, zmieniane są również tytuł i nagłówek:

011



34

CSS3. Zaawansowane projekty 011

Lorem ipsum dolor sit amet.

Plik css w przykładzie odpowiedzialny jest za formę. To dzięki niemu elementy statyczne będą się poruszać. Ale to będzie dopiero za chwilę. Na razie określimy parametry wyjściowe: #tekst { font-size:2.1em; font-family:cursive; width:435px; height:2.5em; line-height:2.5em; margin:0 auto; border:5px solid lime; background-color:green; overflow:hidden; } p { position :relative; top: -33px; white-space:nowrap; } h1{ font-size:3em; font-family:cursive; color:green; }

W tabelach 1.1 i 1.2 wyjaśnione zostały właściwości font-size: i font-family. Zapis width:435px; oznacza mierzoną w pikselach szerokość bloku. Została ona dobrana tak, aby tekst mieścił się w ramce (rysunek 1.16). Rysunek 1.16. Animację poprzedza statyczne rozmieszczenie elementów

Rozdział 1.  Animacje

35

Właściwość height definiuje wysokość zawartości obszaru. Obszar znajduje się wewnątrz obramowania i marginesów elementu. Właściwość ta ma następującą składnię: height: | | auto | inherit

gdzie  length — wartość wyrażona jest w px, cm, in.  percentage — wartość wyrażona jest w % liczonych jako procenty wysokości

bloku zawierającego element.  auto — przeglądarka automatycznie obliczy i wybierze wysokość dla

określonego elementu  inherit — wartość jest dziedziczona z elementu nadrzędnego.

Właściwość line-height definiuje stopień pisma, tj. wysokość między górną i dolną linią pisma, zaś dla elementów blokowych określa minimalną wysokość stopnia pisma. Ma ona następującą składnię: line-height: normal | | | | inherit

gdzie:  normal — standardowa wysokość linii. Wartość domyślna.  number — liczba, przez którą pomnożona zostanie aktualna wielkość czcionki.  length — wartość wyrażona w px, pt, cm.  % — wysokość linii liczona jako procent aktualnej wysokości czcionki.  initial — przywrócenie właściwości wartości domyślnej.  inherit — wartość jest dziedziczona z elementu nadrzędnego.

Własność margin określa marginesy elementu. Wartości ujemne są dozwolone. Własność ta ma następującą składnię: margin: | | inherit | auto

gdzie:  length — wartość wyrażona w px, pt, cm.  percentage — wartość wyrażona w stosunku do wysokości lub szerokości

zawierającego bloku.  auto — przeglądarka automatycznie obliczy i wybierze margines dla

określonego elementu.  inherit — wartość jest dziedziczona z elementu nadrzędnego.

Jeśli podano:  jedną wartość — zostaje ona przypisana dla wszystkich stron.  dwie wartości — pierwsza odnosi się do: góra i dół, a druga do: prawo i lewo.

36

CSS3. Zaawansowane projekty  trzy wartości — pierwsza odnosi się do: góra, druga do: prawo i lewo,

a trzecia do: dół.  cztery wartości — kolejno odnoszą się do: góra, prawo, dół, lewo.

Właściwość border umożliwia określenie stylu, rozmiaru i koloru ramki elementu. Ma ona następującą składnię: border: [border-width || border-style || border-color | inherit] ;

gdzie:  border-width — określa szerokość obramowania bloku. Może mieć następujące wartości: thin (obramowanie cienkie), medium (obramowanie średniej grubości), thick (obramowanie grube). Oprócz wartości predefiniowanych można podać wartość w wybranych jednostkach miary (length) lub w procentach szerokości bloku (percentage). Możliwe jest również wyrażenie wartości w jednostkach em.  border-style — na rysunku 1.12 pokazano wpływ stylu na wygląd ramki.  border-color — kolor może być zdefiniowany jako szesnastkowa wartość RGB,

jako zwykła wartość RGB lub poprzez użycie jednego z predefiniowanych słów określających kolory. Parametr transparent oznacza, że obramowanie jest przezroczyste i zajmuje przestrzeń na stronie. Właściwość background-color określa kolor tła elementu. Ma ona następującą składnię: background-color:

gdzie:  color — kolor zdefiniowany przez nazwę (np. red) lub udział poszczególnych składowych modelu RGB (np. #ff0000).

Właściwość overflow określa, czy zawartość bloku zostanie obcięta, gdy „przeleje się” za pole elementu. Może ona przyjmować następujące wartości:  visible — zawartość nie jest obcinana.  hidden — zawartość jest obcinana. Brak jest pasków przewijania.  scroll — zawartość jest obcinana. Widoczne są paski przewijania.  auto — reakcja jest uzależniona od przeglądarki. Zasadniczo powinna

uaktywnić mechanizm przewijania, aby można było oglądać zawartość przepełnionego elementu.  inherit — wartość jest dziedziczona z elementu nadrzędnego.

Jak wynika z opisu hidden, ukrywa on niemieszczącą się w ramce zawartość danego elementu HTML.

Rozdział 1.  Animacje

37

Zapis p { position :relative; top: -33px; white-space:nowrap; }

odnosi się do elementów umieszczonych pomiędzy znacznikami początku i końca akapitu. Nie została wytłumaczona właściwość white-space. Określa ona sposób traktowania odstępów wewnątrz elementu. Może przyjmować następujące wartości:  normal — wszystkie sekwencje białych znaków i zakończenia linii będą

skracane. Zakończenia linii nie likwidują zawijania zawartości.  pre — wszystkie białe znaki w źródle będą zachowane, linie są przełamane

tylko na znakach nowej linii w źródle.

 nowrap — wszystkie sekwencje białych znaków i zakończenia linii będą

skracane, również przełamania linii (zawijanie tekstu) są zlikwidowane wewnątrz zawartości.

 pre-wrap — wszystkie białe znaki w źródle będą zachowane, linie są

przełamane na znakach nowej linii i w razie konieczności zawijają zawartość.  pre-line — wszystkie sekwencje białych znaków będą skrócone, linie są

przełamane na znakach nowej linii, a w razie potrzeby zawartość jest zawijana.  inherit — wartość jest dziedziczona z elementu nadrzędnego.

Użyta w przykładzie właściwość white-space:nowrap; powoduje, że tekst umieszczony pomiędzy znacznikami akapitu nie jest przełamywany na końcu szerokości elementu HTML. Dzięki temu jest wyświetlany w jednej poziomej linii. Właściwość white-space:nowrap; pozwala na wyświetlenie kilku białych znaków obok siebie. Zachęcam Cię do eksperymentowania z wartościami właściwości. Czym innym jest przeczytanie opisu polecenia, a zupełnie czym innym obejrzenie, jaki ma ono wpływ na wygląd dokumentu.

Po sprawdzeniu poprawności plików CSS i HTML za pomocą walidatora można przejść do kolejnego kroku. Nadeszła pora utworzenia animacji. W pliku HTML w porównaniu z poprzednim zmiany są niewielkie. Znacznie zmodyfikowany został natomiast plik CSS: #tekst { font-size:2.1em; font-family:cursive; width:435px; height:2.5em; line-height:2.5em; margin:0 auto; border:5px solid lime;

38

CSS3. Zaawansowane projekty background-color:green; overflow:hidden; } p { position :relative; top: -33px; white-space:nowrap; -webkit-animation: neon 15s infinite; /* Chrome, Safari, Opera */ animation: neon 15s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes neon { 0% {left: 500px;} 100% {left: 0px;} } /* Standard syntax */ @keyframes neon { 0% {left: 500px;} 100% {left: 0px;} } h1{ font-size:3em; font-family:cursive; color:green; }

Za animację odpowiada właściwość animation. Ma ona następującą składnię: animation: nazwa duration funkcja_czasu delay iteration-count direction fill-mode play-state;

gdzie:  nazwa — nazwa animacji.  czas — czas wykonywania jednego cyklu animacji. Jednostką miary są sekundy

(np. 2 s) lub milisekundy (np. 2000 ms). Pomiędzy liczbą a jednostką miary nie ma spacji.  funkcja_czasu — sposób zmiany prędkości poruszającego się elementu

w funkcji czasu. Jest on opisywany za pomocą parametrów wyjaśnionych w tabeli 1.4.  delay — opóźnienie, z jakim rozpocznie się animacja.  iteration-count — liczba powtórzeń animacji.  direction — kierunek powtarzania się oraz rozpoczęcia animacji.

Jest on opisywany za pomocą parametrów wyjaśnionych w tabeli 1.5.

Rozdział 1.  Animacje

39

Tabela 1.4. Sposób opisu zmian prędkości animacji Parametr

Znaczenie

linear

Animacja ma taką samą prędkość od początku do końca.

ease

Wartość domyślna. Animacja ma powolny start, potem przyspiesza i wolno się kończy.

ease-in

Animacja ma powolny początek.

ease-out

Animacja ma powolny koniec.

ease-in-out

Animacja ma zarówno powolny start, jak i powolny koniec.

cubic-bezier(n,n,n,n)

Zmiana prędkości odbywa się zgodnie z wykresem funkcji sześciennej Béziera. Parametry mogą przyjmować wartości 0 lub 1.

initial

Parametr przywraca wartość początkową (domyślną).

inherit

Wartość jest dziedziczona od rodzica.

Tabela 1.5. Sposób opisu kierunku animacji Parametr

Znaczenie

normal

Wartość domyślna.

reverse

Animacja będzie rozpoczynała się od końca.

alternate

Animacja będzie wykonywana jak normal w nieparzystych razach, a jako reverse w parzystych.

alternate-reverse

Animacja będzie wykonywana jak reverse w nieparzystych razach, a jako normal w parzystych.

initial

Parametr przywraca wartość początkową (domyślną).

inherit

Wartość jest dziedziczona od rodzica.  fill-mode — wartości, jakie są stosowane w animacji poza czasem, w którym

jest wykonywana.  play-state — parametr określający, kiedy animacja jest wykonywana,

a kiedy wstrzymywana.  initial — parametr przywracający wartość początkową (domyślną).  inherit — wartość jest dziedziczona od rodzica.

Korzystając z powyższych wyjaśnień, możemy odczytać, że animacja nosi nazwę neon. Czas jej wykonywania wynosi 15 sekund. Po załadowaniu strony odtwarzana jest nieprzerwanie. Reguła @keyframes opisuje animację, która jest tworzona przez stopniową zmianę jednego zestawu parametrów CSS w drugi. Podczas animacji można wielokrotnie zmieniać zestaw stylów CSS. 0% oznacza początek animacji. 100% oznacza koniec animacji. Aby nie utracić kontroli nad wyglądem dokumentu, należy zawsze zdefiniować zestaw parametrów dla 0% i dla 100%.

40

CSS3. Zaawansowane projekty

Reguła @keyframes ma składnię: @keyframes nazwa_animacji {keyframes-selektor {css-style;}}

gdzie:  nazwa_animacji — parametr wymagany. Określa nazwę animacji.  keyframes-selektor — parametr wymagany. Określa liczony w % czas trwania

poszczególnych stanów animacji. Akceptowane są wartości z przedziału od 0 do 100%. W jednej animacji może występować wiele selektorów uporządkowanych rosnąco.  css-style — parametr wymagany. Jeden lub więcej arkuszy stylów CSS.

Zapis @keyframes neon { 0% {left: 500px;} 100% {left: 0px;}}

oznacza, że utworzono animację CSS o nazwie neon. Zadaniem jej jest przesuwanie elementu HTML w lewo. O kierunku informuje większa wartość współczynnika na początku animacji niż po jej ukończeniu. Wartość 100% wskazuje, że przesunięcie zostanie wykonane na całą szerokość. Na rysunku 1.17 pokazano okno programu w trakcie wykonywania animacji. Rysunek 1.17. Napis wsuwa się do ramki od lewej strony. Jest to świetny sposób na przyciągnięcie uwagi internauty

Niewielka modyfikacja pliku CSS spowoduje, że napis nie będzie zatrzymywał się po dotarciu do lewej krawędzi ramki, ale będzie się za nią chował (rysunek 1.18). Kod CSS dla efektu pokazanego na rysunku 1.18 ma postać: #tekst { font-size:2.1em; font-family:cursive; width:435px; height:2.5em; line-height:2.5em; margin:0 auto;

Rozdział 1.  Animacje

41

Rysunek 1.18. Napis chowa się za ramkę. Jest to możliwe dzięki przypisaniu wartości ujemnej końcowemu położeniu napisu

border:5px solid lime; background-color:green; overflow:hidden; } p { position :relative; top: -33px; white-space:nowrap; -webkit-animation: neon 15s infinite; /* Chrome, Safari, Opera */ animation: neon 15s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes neon { 0% {left: 500px;} 100% {left: -500px;} } /* Standard syntax */ @keyframes neon { 0% {left: 500px;} 100% {left: -500px;} } h1{ font-size:3em; font-family:cursive; color:green; }

W porównaniu z poprzednią wersją pliku zmieniono sekcję: @keyframes neon { 0% {left: 500px;} 100% {left: -500px;}

Poprzednio animacja kończyła się (wiersz 100%) na współrzędnej 0. Obecnie jest to -500px.

42

CSS3. Zaawansowane projekty

1.3. Obracanie obiektu W przykładzie uzyskany zostanie efekt polegający na obracaniu obiektu o zadany kąt po naprowadzeniu na niego kursora. Jak można uzyskać taki rezultat? Czy istnieje funkcja, która spowoduje obrócenie obiektu? Aby uzyskać oczekiwany efekt, należy wykonać trzy czynności:  Przygotować dokument HTML z tekstem.  Umieścić obiekt w dokumencie HTML.  Dodać polecenie, które spowoduje obrócenie elementu po naprowadzeniu

na niego kursora. Proste? Logiczne? Zatem do rzeczy. Pierwszym krokiem jest przygotowanie kodu strony HTML:

014



014

Lorem ipsum dolor sit amet 1.

Lorem ipsum dolor sit amet 2.

Lorem ipsum dolor sit amet 3.

Aby czytelnik nie odniósł wrażenia, że opisane sztuczki działają tylko w odniesieniu do bloków, główną treść strony stanowi lista uporządkowana. Jej elementy są wyróżnione przez znacznik

. Jako elementy listy występują odsyłacze. Po zastąpieniu znaku # przez adres url staną się one pełnoprawnymi odsyłaczami. Plik zawiera odwołanie do arkusza stylów 014.css. Arkusz stylów 014.css ma za zadanie wyświetlenie nagłówka i tekstu wyraźnym pismem przypominającym ręczne: body { margin:10px 20px 30px 40px; background-color: #eeeeee } h1{ font-size:3em; font-family:fantasy;

Rozdział 1.  Animacje

43

color:navy; background-color: #cccccc } li { font-size:2.1em; font-family:fantasy; font-weight: bold; background-color: #dddddd }

W sekcji body zdefiniowane zostały ogólne właściwości dokumentu. Zapis margin:10px 20px 30px 40px; oznacza, że odstęp od poszczególnych krawędzi okna przeglądarki będzie wynosił: od górnej 10 pikseli, od prawej 20 pikseli, od dolnej 30 pikseli, od lewej 40 pikseli. Polecenie margin ma następującą składnię: margin: length|auto|initial|inherit;

gdzie:  length — szerokość marginesu. Jednostką miary może być px, pt, cm;  % — szerokość marginesu będąca częścią szerokości elementu;  auto — szerokość marginesu wyliczana jest przez przeglądarkę;  initial — parametr przywracający wartość początkową (domyślną);  inherit — wartość jest dziedziczona od rodzica (elementu nadrzędnego).

Zapis background-color: #eeeeee określa kolor tła dokumentu. Tło nagłówka ma kolor #cccccc. Tło listy uporządkowanej jest w kolorze #dddddd. Innymi słowy — właściwość background-color określa kolor elementu, w którego specyfikacji się znajduje. CSS dopuszcza kilka rodzajów opisu koloru. Zapis rgb(255,0,0) oznacza kolor czerwony w standardzie RGB. Każda z liczb określa udział składowej czerwonej (R — red), zielonej (G — green) i niebieskiej (B — blue). Składowe mogą przyjmować wartości z przedziału od 0 (brak składowej) do 100 (maksymalny udział składowej). Innymi słowy, zapis rgb(255,0,0) oznacza, że na element skierowane są trzy reflektory świecące światłem czerwonym, zielonym i niebieskim. Czerwony świeci z maksymalną siłą, a pozostałe są wyłączone. Kolor w standardzie RGB można również wyrazić w postaci liczby heksadecymalnej (np. #dddddd). Zapis musi być poprzedzony #. Możliwe jest również posłużenie się nazwą koloru, np. navy. Zapis rgba(255,0,0,0.3) jest zgodny ze standardem RGBA. Jest on bardzo podobny do standardu RGB. Parametr A oznacza kanał alfa, czyli przezroczystość obiektu. Ostatni parametr może przyjmować wartości z przedziału od 0.0 (zerowy wpływ na wygląd obiektu) do 1.0 (maksymalny wpływ na wygląd obiektu).

44

CSS3. Zaawansowane projekty

Właściwość background-color ma następującą składnię: background-color: color|transparent|initial|inherit;

gdzie:  color — określenie koloru.  transparent — parametr określa przezroczystość koloru tła.  initial — parametr przywraca wartość początkową (domyślną).  inherit — wartość jest dziedziczona od rodzica (elementu nadrzędnego).

Określanie wielkości czcionki zostało opisane w tabeli 1.1, zaś jej kroju w tabeli 1.2. Zapis color:navy oznacza kolor elementu określony przez użycie nazwy koloru. Na rysunku 1.19 pokazano okno przeglądarki po wczytaniu pliku 014.html. Rysunek 1.19. Dokument z trzema odsyłaczami zorganizowanymi w postaci listy uporządkowanej

Do pliku 015.html dodamy animację. Efekt ten nie będzie miał zasadniczego wpływu na zawartość pliku 015.html:

015



015

Lorem ipsum dolor sit amet 1.

Lorem ipsum dolor sit amet 2.

Lorem ipsum dolor sit amet 3.

Rozdział 1.  Animacje

45

Za wszystkie zmiany wyglądu odpowiedzialny będzie arkusz stylów CSS. Plik HTML powinien być napisany tak, aby każdy element, którym możemy chcieć niezależnie manipulować, miał swój identyfikator. Plik css w przykładzie odpowiedzialny jest za formę. To dzięki niemu elementy statyczne będą się poruszać: body { margin:10px 20px 30px 40px; background-color: #eeeeee } h1{ font-size:3em; font-family:fantasy; color:navy; background-color: #cccccc } li { font-size:2.1em; font-family:fantasy; font-weight: bold; background-color: #dddddd } ol:hover { -ms-transform: rotate(7deg); /* IE 9 */ -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */ transform: rotate(7deg); }

W porównaniu z poprzednią wersją dodany został fragment: ol:hover { -ms-transform: rotate(7deg); /* IE 9 */ -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */ transform: rotate(7deg); }

Pomiędzy nawiasami klamrowymi znajduje się polecenie obrócenia elementu o siedem stopni: rotate(7deg). Ponieważ nie wszystkie przeglądarki je obsługują, konieczne jest użycie trzech zapisów: -ms-transform: rotate(7deg); /* IE 9 */ -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */ transform: rotate(7deg);

Właściwość transform powoduje przekształcenie elementu w przestrzeni 2D lub 3D. Ma ona następującą składnię: transform: none|transform-functions|initial|inherit;

gdzie:  none — elementy, które nie powinny być transformowane.  inherit — wartość jest dziedziczona z elementu nadrzędnego.  initial — parametr przywraca wartość początkową.

46

CSS3. Zaawansowane projekty  transform-functions — funkcja transformacji. Jest ona opisywana za pomocą

parametrów wyjaśnionych w tabeli 1.6. Tabela 1.6. Sposób opisu funkcji transformacji Parametr

Znaczenie

matrix(n,n,n,n,n,n)

Określa transformację 2D za pomocą sześciu parametrów.

matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Określa transformację 3D za pomocą szesnastu parametrów zapisanych w macierzy 4x4.

translate(x,y)

Definiuje przekształcenie 2D.

translate3d(x,y,z)

Definiuje przekształcenie 3D.

translateX(x)

Definiuje przekształcenie jedynie za pomocą współrzędnej X.

translateY(y)

Definiuje przekształcenie jedynie za pomocą współrzędnej Y.

translateZ(z)

Definiuje przekształcenie jedynie za pomocą współrzędnej Z.

scale(x,y)

Definiuje skalowanie 2D.

scale3d(x,y,z)

Definiuje skalowanie 3D.

scaleX(x)

Definiuje skalowanie za pomocą współrzędnej X.

scaleY(y)

Definiuje skalowanie za pomocą współrzędnej Y.

scaleZ(z)

Definiuje skalowanie za pomocą współrzędnej Z.

rotate(angle)

Definiuje obrót 2D. Kąt jest parametrem przekształcenia.

rotate3d(x,y,z,angle)

Definiuje obrót 3D. Kąt jest parametrem przekształcenia.

rotateX(angle)

Definiuje obrót 3D wokół osi X.

rotateY(angle)

Definiuje obrót 3D wokół osi Y.

rotateZ(angle)

Definiuje obrót 3D wokół osi Z.

skew(x-angle,y-angle)

Definiuje skręcenie względem osi X oraz Y.

skewX(angle)

Definiuje skręcenie względem osi X.

skewY(angle)

Definiuje skręcenie względem osi Y.

perspective(n)

Definiuje widok perspektywiczny dla elementów transformowanych w 3D.

Zapis rotate(7deg) oznacza obrót o siedem stopni. Linia ol:hover informuje, że polecenia zapisane w nawiasie klamrowym zostaną wykonane po naprowadzeniu kursora na (hover) dowolne miejsce wewnątrz listy uporządkowanej ol. Na rysunku 1.20 pokazano okno przeglądarki po wczytaniu pliku 015.html, zaś na rysunku 1.21 okno przeglądarki po naprowadzeniu kursora na listę uporządkowaną. Plan został wykonany. Mamy stronę, która obraca element po wskazaniu go kursorem. Warto sprawdzić, jakie efekty można jeszcze uzyskać, wprowadzając niewielkie modyfikacje w pliku CSS (rysunki od 1.22 do 1.30).

Rozdział 1.  Animacje Rysunek 1.20. Lista znajduje się w pozycji domyślnej

Rysunek 1.21. Lista została obrócona. Trwa ona w tym położeniu dopóty, dopóki kursor znajduje się za listą

Rysunek 1.22. W pliku CSS polecenie rotate(7deg) zostało zastąpione przez matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0). Kursor został naprowadzony na listę uporządkowaną

47

48 Rysunek 1.23. W pliku CSS polecenie rotate(7deg) zostało zastąpione przez translate(12px, 50%). Kursor został naprowadzony na listę uporządkowaną

Rysunek 1.24. W pliku CSS polecenie rotate(7deg) zostało zastąpione przez translateX(2em). Kursor został naprowadzony na listę uporządkowaną. Elementy przesunęły się w prawo

Rysunek 1.25. W pliku CSS polecenie rotate(7deg) zostało zastąpione przez translateY(1in). Kursor został naprowadzony na listę uporządkowaną. Elementy przesunęły się o cal w dół

CSS3. Zaawansowane projekty

Rozdział 1.  Animacje Rysunek 1.26. W pliku CSS polecenie rotate(7deg) zostało zastąpione przez scale(2, 0.5). Kursor został naprowadzony na listę uporządkowaną. Elementy zmniejszyły wysokość o połowę, a ich szerokość wzrosła dwa razy

Rysunek 1.27. W pliku CSS polecenie rotate(7deg) zostało zastąpione przez scaleX(2). Kursor został naprowadzony na listę uporządkowaną. Elementy zwiększyły szerokość dwa razy

49

50 Rysunek 1.28. W pliku CSS polecenie rotate(7deg) zostało zastąpione przez scaleY(0.5). Kursor został naprowadzony na listę uporządkowaną. Elementy zmniejszyły wysokość dwa razy

Rysunek 1.29. W pliku CSS polecenie rotate(7deg) zostało zastąpione przez rotate(0.5turn). Kursor został naprowadzony na listę uporządkowaną. Elementy zostały obrócone

Rysunek 1.30. W pliku CSS polecenie rotate(7deg) zostało zastąpione przez skewY(-0.07rad). Kursor został naprowadzony na listę uporządkowaną

CSS3. Zaawansowane projekty

Rozdział 1.  Animacje

51

Przekształcenia można łączyć lub stosować transformacje macierzowe: body { margin:10px 20px 30px 40px; background-color: #eeeeee } h1{ font-size:3em; font-family:fantasy; color:navy; background-color: #cccccc } li { font-size:2.1em; font-family:fantasy; font-weight: bold; background-color: #dddddd } ol:hover { -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0)); -o-transform: matrix(1, -0.2, 0, 1, 0, 0); transform: matrix(1, -0.2, 0, 1, 0, 0); }

Na rysunku 1.31 pokazano okno przeglądarki po przekształceniu zgodnie z macierzą (1, -0.2, 0, 1, 0, 0). Rysunek 1.31. Kursor został naprowadzony na listę uporządkowaną, co zainicjowało przekształcenie macierzowe

1.4. Karta animowana trójwymiarowa W przykładzie wyświetlona zostanie karta. Po naprowadzeniu na nią kursora zostanie odwrócona. Gdy kursor zostanie przesunięty z elementu, powróci on do położenia wyjściowego.

52

CSS3. Zaawansowane projekty

Jak można uzyskać taki rezultat? Czy istnieje funkcja, która spowoduje płynną animację oraz symulację efektu przekręcania elementu? Wyzwanie jest nieco większe. Aby uzyskać oczekiwany efekt, trzeba wykonać trzy czynności:  Przygotować dokument HTML zawierający kontener i kartę.  Stworzyć regułę CSS, która sprawi, że po naprowadzeniu kursora na kontener

karta zostanie obrócona.  Wykonać kartę.

Proste? Logiczne? Zatem do rzeczy. Pierwszym krokiem jest przygotowanie kodu strony HTML:

026



026

karta



Szablon nie jest zbyt rozbudowany. Po analizie poprzednich przykładów powinniśmy być na to przygotowani. Plik HTML zawiera definicje i identyfikatory elementów. Za „tchnięcie życia” w dokument wyświetlany w oknie przeglądarki odpowiedzialny jest kod zapisany w pliku CSS. Skoro o pliku CSS mowa, to ma on następującą postać: body { background-color: #eeeeee } h1{ font-size:3em; font-family:fantasy; color:navy; background-color: #cccccc }

W sekcji body zdefiniowane zostały ogólne właściwości dokumentu. W tym przypadku jest to tylko kolor tła. Właściwość background-color została wyjaśniona na początku podrozdziału 1.3. W przykładzie użyto zapisu szesnastkowego. Każda ze składowych ma taką samą wartość.

Rozdział 1.  Animacje

53

Zapis: h1{ font-size:3em; font-family:fantasy; color:navy; background-color: #cccccc }

określa wygląd tekstu umieszczonego pomiędzy znacznikami i . W linii background-color: #cccccc określony jest kolor tła nagłówka. Pozostałe parametry dotyczą wyglądu tekstu. Na rysunku 1.32 pokazano okno przeglądarki po załadowaniu pliku 026.html. Rysunek 1.32. Szablon strony nie zdradza efektu końcowego

W kolejnym kroku należy zdefiniować rozmiar kontenera i zawartej w nim karty. Oto plik 027.html:

027



027

karta



Od poprzedniego plik ten różni się tylko tym, że liczba 026 została zastąpiona przez 027. W pliku CSS zaszły istotne zmiany: body { background-color: #eee } h1{ font-size:3em; font-family:fantasy; color:navy;

54

CSS3. Zaawansowane projekty background-color: #ccc } #kontener { width:400px; height:200px; margin:0 auto; border:8px dashed #000; background-color:red; } #karta { width:100%; height:100%; background-color:#ddd; text-align:center; font-size:2em; font-family:fantasy; color:gray; }

Zapis: body { background-color: #eeeeee }

został zastąpiony przez: body { background-color: #eee }

W obu przypadkach specyfikacja dotyczy koloru tła dokumentu. Inny jest tylko zapis. Ponieważ w pliku 026.css każda ze składowych miała wartość heksadecymalną ee, w pliku 027.css została ona zastąpiona zapisem skróconym. Analogicznie w przypadku tła nagłówka pełen zapis background-color: #cccccc został zastąpiony przez skrócony background-color: #ccc. Elementem całkowicie nowym jest #kontener. Zawiera on definicje rozmiarów elementu width:400px; (szerokość 400 pikseli), height:200px; (wysokość 200 pikseli). Szerokość marginesu została zredukowana do 0 pikseli i wyliczana jest przez przeglądarkę (margin:0 auto). Kontener ograniczony jest linią. Ma ona szerokość 8 pikseli (border:8px). Nakreślona jest linią przerywaną (dashed) w kolorze czarnym (#000). Tło linii jest czerwone (background-color:red). Nowym elementem jest także #karta. Plik HTML zwykle zaniedbujemy. W tym przypadku istotne jest to, że element karta znajduje się wewnątrz kontenera:

karta

Rozdział 1.  Animacje

55

Deklaracje width:100%; i height:100%; powodują, że obiekt karta wypełnia cały kontener. Kolor tła ustalony jest zapisem background-color:#ddd;. Właściwość text-align precyzuje poziome wyrównanie elementu. W przykładzie został on wyśrodkowany (center). Tekst zapisany jest czcionką o rozmiarze dwa razy większym od standardowego (font-size:2em), o kroju z rodziny fantasy w kolorze szarym (gray). Na rysunku 1.33. pokazano okno przeglądarki po załadowaniu pliku 027.html. Rysunek 1.33. Karta wypełnia cały kontener

Rozplanowanie na płaszczyźnie można uznać za zakończone. Pora na dodanie do projektu wrażenia trójwymiarowości. Wykorzystamy do tego właściwość perspective. Pozwala ona na określanie, ile pikseli elementu 3D zostanie wyświetlonych. Ma ona następującą składnię: perspective: length|none;

gdzie:  length — wartość perspektywy. Przekształcenie obejmuje elementy dzieci,

ale nie ma wpływu na elementy rodziców.  none — wartość domyślna. Brak perspektywy. Rezultat identyczny jak length=0.  initial — przywrócenie wartości domyślnych.  inherit — dziedziczenie wartości od elementu rodzica.

56

CSS3. Zaawansowane projekty

Po uzupełnieniu elementów kontener oraz karta powstał kod: #kontener { width:400px; height:200px; margin:0 auto; border:8px dashed #000; background-color:red; -webkit-perspective: 100px; /* Chrome, Safari, Opera */ perspective: 100px; } #karta { width:100%; height:100%; background-color:#ddd; text-align:center; font-size:2em; font-family:fantasy; color:gray; -webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera transform: rotateX(45deg); }

*/

Jaki wpływ ma ta zmiana na wygląd strony, można zobaczyć na rysunku 1.34. Rysunek 1.34. W elemencie div rodzic (kontener) została utworzona perspektywa o wartości 100 pikseli. W niej znalazł się element div dziecko (karta)

Kolejnym etapem jest utworzenie reguły CSS, która sprawi, że po naprowadzeniu myszy na element kontener element karta zostanie obrócony wokół własnej osi Y o 180 stopni. Plik CSS ma postać: body { background-color: #eee } h1{

Rozdział 1.  Animacje

57

font-size:3em; font-family:fantasy; color:navy; background-color: #ccc } #kontener { width:400px; height:200px; margin:0 auto; border:8px dashed #000; background-color:red; -webkit-perspective: 100px; /* Chrome, Safari, Opera perspective: 100px; } #kontener:hover > #karta { transform:rotateY(180deg); } #karta { width:100%; height:100%; background-color:#ddd; text-align:center; font-size:2em; font-family:fantasy; color:gray; }

*/

Na rysunkach 1.35 i 1.36 pokazano okno przeglądarki z plikiem 029.html przed obrotem karty i po obrocie. Rysunek 1.35. Kursor znajduje się obok karty. Napis wyświetlany jest normalnie

58

CSS3. Zaawansowane projekty

Rysunek 1.36. Kursor znajduje się wewnątrz karty. Napis został odwrócony o 180 stopni

Na rysunkach tego nie widać, ale obrót wykonywany jest błyskawicznie. Mamy do czynienia z dwoma stanami: normalnym i odwróconym. Nie można teraz mówić o jakiejkolwiek animacji. Pojawi się ona po dodaniu do pliku CSS polecenia wydłużającego czas przejścia pomiędzy dwoma stanami transition:1s. Sekcja karta po dodaniu kodu ma postać: #karta { width:100%; height:100%; background-color:#ddd; text-align:center; font-size:2em; font-family:fantasy; color:gray; transition:1s; }

Na rysunku 1.37 pokazano okno przeglądarki, w którym udało się uchwycić moment dokonywania obrotu. Karta kojarzy się z elementem, w którym jest obrazek i rewers. Element #karta ma tylko jedną stronę. Po dodaniu do niego dwóch kolejnych elementów div powstaną dodatkowo przednia oraz tylna strona elementu. Tym razem musimy wprowadzić zmianę w kodzie HTML:

031



031

przód tył



Na rysunku 1.38 można obejrzeć rezultat naszych poczynań. Rysunek 1.38. Pojawiły się dwa nowe elementy div. Są w dziwnym miejscu. Nie obejdzie się bez modyfikacji pliku CSS

59

60

CSS3. Zaawansowane projekty

Nowe elementy div znajdą się w tym samym miejscu, gdy w arkuszu CSS dodana zostanie do nich właściwość position:absolute; zaś do ich rodzica, czyli do elementu #karta, dodana będzie właściwość position:relative. Po dodaniu adresu pliku graficznego oraz kilku poprawkach arkusz CSS będzie miał postać: body { background-color: #eee } h1{ font-size:3em; font-family:fantasy; color:navy; background-color:#ccc; } #kontener { width:400px; height:200px; margin:0 auto; border:8px solid #bbb; background-color:#eee perspective: 700px; -webkit-perspective: 700px; /* Chrome, Safari, Opera } #kontener:hover > #karta { transform:rotateY(180deg); -webkit-transform:rotateY(180deg); } #karta { position:relative; width:100%; height:100%; background-color:#ddd; transition:1s; -webkit-transition:1s; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; } #tyl { position:absolute; width:100%; height:100%; color:#FFF; transform:rotateY(180deg); -webkit-transform:rotateY(180deg); backface-visibility:hidden; -webkit-backface-visibility:hidden; } #przod { position:absolute;

*/

Rozdział 1.  Animacje

61

width:100%; height:100%; background:url('logo_helionpl.png') no-repeat; background-size:100%; box-shadow:0 0 4px 8px #FFF inset; backface-visibility:hidden; -webkit-backface-visibility:hidden; }

W sekcji kontener zmieniono definicję linii otaczającej obiekt. Jest ona ciągła (solid) i w kolorze #bbb. Głębokość perspektywy ustalono na 700 pikseli. Zdarzenie wyzwalane umieszczeniem kursora na obiekcie (hover) występuje w wersji normalnej i -webkit. Zapewnia to zgodność dokumentu z większą liczbą przeglądarek. W sekcji karta dodano właściwość preserve-3d. Określa ona, jak zagnieżdżone elementy są renderowane w przestrzeni 3D. Właściwość ta ma następującą składnię: transform-style: flat|preserve-3d|initial|inherit;

gdzie:  flat — wartość domyślna. Element dziecko nie zachowa swojej pozycji

w przestrzeni 3D.  preserve-3d — element dziecko zachowa swoją pozycję w przestrzeni 3D.  initial — parametr przywraca wartość początkową (domyślną).  inherit — wartość jest dziedziczona od rodzica (elementu nadrzędnego).

Właściwość transform-style:preserve-3d; dodana do elementu sprawia, że jego elementy dzieci znajdują się w tej samej perspektywie, co element #karta. W sekcji #tyl została dodana właściwość backface-visibility. Określa ona, czy element znajdujący się od strony ekranu powinien być widoczny dla osoby siedzącej przed ekranem. Właściwość ta jest przydatna wówczas, gdy element jest obracany, a my nie chcemy, aby widoczny był jego tył. Ma ona następującą składnię: backface-visibility: visible|hidden|initial|inherit;

gdzie:  visible — wartość domyślna. Tylna strona jest widoczna.  hidden — tylna strona nie jest widoczna.  initial — parametr przywraca wartość początkową (domyślną).  inherit — wartość jest dziedziczona od rodzica (elementu nadrzędnego).

Zapis backface-visibility:hidden; powoduje, że odwrotna strona elementu zostanie ukryta.

62

CSS3. Zaawansowane projekty

W sekcji #przod został dodany obrazek. Do tego celu użyte zostało polecenie background:url('logo_helionpl.png') no-repeat;. Właściwość ta określa wszystkie właściwości tła w jednej deklaracji. Ma ona następującą składnię: background: color position/size repeat origin clip attachment image|initial|inherit;

gdzie:  background-color — określa kolor tła (patrz tabela 1.7);  background-position — położenie obrazka tła (patrz tabela 1.8);  background-size — rozmiar obrazka tła (patrz tabela 1.9);  background-repeat — sposób powtórzenia tła (patrz tabela 1.10);  background-origin — obszar rozmieszczenia obrazka tła (patrz tabela 1.11);  background-clip — obszar malowania obrazka tła (patrz tabela 1.12);  background-attachment — określa, czy obrazy tła są stałe, czy przewijają się

z resztą strony (patrz tabela 1.13);  background-image — określa minimum jeden obrazek tła (patrz tabela 1.14);  initial — parametr przywraca wartość początkową (domyślną);  inherit — wartość jest dziedziczona od rodzica (elementu nadrzędnego). Tabela 1.7. Opcje polecenia background-color Parametr

Znaczenie

color

Określa kolor tła. Akceptowane są opisy z użyciem wartości heksadecymalnych, predefiniowanych nazw kolorów, palet: RGB, RGBA, HSL, HSLA.

transparent

Wartość domyślna. Nadaje tłu przezroczystość.

initial

Parametr przywraca wartość początkową (domyślną).

inherit

Wartość jest dziedziczona od rodzica (elementu nadrzędnego).

Tabela 1.8. Opcje polecenia background-position Parametr

Znaczenie

left top

lewy górny róg

left center

dosunięty do lewego marginesu, wyśrodkowany

left bottom

lewy dolny róg

right top

prawy górny róg

right center

dosunięty do prawego marginesu, wyśrodkowany

right bottom

prawy dolny róg

center top

wyśrodkowany w poziomie, dosunięty do góry

Rozdział 1.  Animacje

63

Tabela 1.8. Opcje polecenia background-position — ciąg dalszy Parametr

Znaczenie

center center

wyśrodkowany w poziomie i pionie

center bottom

wyśrodkowany w poziomie, dosunięty do dołu

x% y%

Parametr pierwszy określa położenie w poziomie, a drugi w pionie. Lewy górny róg ma współrzędne 0%, 0%. Prawy dolny róg ma współrzędne 100%, 100%. Jeżeli podasz tylko jedną wartość, drugiej zostanie przypisana wartość 50%. Domyślnie parametry wynoszą: 0%, 0%.

xpos ypos

Pierwsza współrzędna określa położenie elementu w poziomie. Druga współrzędna określa położenie elementu w pionie. Początek układu współrzędnych jest w lewym górnym rogu (0 0). Wartości mogą być wyrażone w jednostkach bezwzględnych (em, ex, %, px, cm, mm, in, pt, pc) lub względnych (%). Jeżeli określona zostanie tylko jedna współrzędna, drugiej nadawana jest wartość 50%.

initial

Parametr przywraca wartość początkową (domyślną).

inherit

Wartość jest dziedziczona od rodzica (elementu nadrzędnego).

Tabela 1.9. Opcje polecenia background-size Parametr

Znaczenie

auto

Wartość domyślna. Zachowane zostają oryginalne wymiary obrazka tła.

length

Określa szerokość i wysokość obrazka. Pierwszy parametr to szerokość, a drugi wysokość. Jeżeli podany jest tylko jeden parametr, drugiemu automatycznie przypisywana jest wartość auto.

percentage

Określa szerokość i wysokość obrazka w stosunku do rozmiarów rodzica. Pierwszy parametr to szerokość, a drugi wysokość. Jeżeli podany jest tylko jeden parametr, drugiemu automatycznie przypisywana jest wartość auto.

cover

Obrazek zostaje przeskalowany tak, aby wypełnić cały dostępny obszar.

contain

Obrazek zostaje przeskalowany do największych rozmiarów, takich, że zarówno jego szerokość, jak i wysokość mogą zmieścić się w obszarze zawartości.

initial

Parametr przywraca wartość początkową (domyślną).

inherit

Wartość jest dziedziczona od rodzica (elementu nadrzędnego).

Tabela 1.10. Opcje polecenia background-repeat Parametr

Znaczenie

repeat

Wartość domyślna. Obrazek tła będzie powtarzany w pionie oraz w poziomie, tak aby wypełnił cały obszar.

repeat-x

Obrazek tła będzie powtarzany tylko w poziomie.

repeat-y

Obrazek tła będzie powtarzany tylko w pionie.

no-repeat

Obrazek tła nie będzie powtarzany.

initial

Parametr przywraca wartość początkową (domyślną).

inherit

Wartość jest dziedziczona od rodzica (elementu nadrzędnego).

64

CSS3. Zaawansowane projekty

Tabela 1.11. Opcje polecenia background-origin Parametr

Znaczenie

padding-box

Wartość domyślna. Obrazek tła będzie umieszczony w stosunku do pola wypełnienia.

border-box

Obrazek tła będzie umieszczony w stosunku do granicy obszaru.

content-box

Obrazek tła będzie umieszczony w stosunku do zawartości obszaru.

initial

Parametr przywraca wartość początkową (domyślną).

inherit

Wartość jest dziedziczona od rodzica (elementu nadrzędnego).

Tabela 1.12. Opcje polecenia background-clip Parametr

Znaczenie

border-box

Wartość domyślna. Tło przyczepione do granic obszaru.

padding-box

Tło przyczepione do wnętrza obszaru.

content-box

Tło przyczepione do obszaru zawierającego treść.

initial

Parametr przywraca wartość początkową (domyślną).

inherit

Wartość jest dziedziczona od rodzica (elementu nadrzędnego).

Tabela 1.13. Opcje polecenia background-attachment Parametr

Znaczenie

scroll

Tło przewija się wraz z elementem.

fixed

Położenie tła jest ustalone.

local

Tło przewija się wraz z zawartością elementu.

initial

Parametr przywraca wartość początkową (domyślną).

inherit

Wartość jest dziedziczona od rodzica (elementu nadrzędnego).

Tabela 1.14. Opcje polecenia background-image Parametr

Znaczenie

url('URL')

URL obrazka. Istnieje możliwość podania więcej niż jednego adresu. Muszą one być rozdzielone przecinkami.

none

Wartość domyślna. Tło w postaci obrazka nie jest wyświetlane.

initial

Parametr przywraca wartość początkową (domyślną).

inherit

Wartość jest dziedziczona od rodzica (elementu nadrzędnego).

Na rysunkach 1.39, 1.40 i 1.41 można obejrzeć rezultat naszych poczynań.

Rozdział 1.  Animacje Rysunek 1.39. Obiekt w położeniu wyjściowym

Rysunek 1.40. Obrazek w trakcie obrotu

Rysunek 1.41. Odwrotna strona karty

65

66

CSS3. Zaawansowane projekty

1.5. Animowany pierścień trójwymiarowy Abraham Lincoln mawiał: „Każda praca jest do wykonania, jeżeli rozłoży się ją na małe części”. W poprzednim rozdziale opisany został sposób wykonania projektu, który powodował obracanie elementu strony WWW po wskazaniu go kursorem. Skoro już opanowaliśmy tę umiejętność, można pójść krok dalej. W tym rozdziale utworzymy animację złożoną z kilku elementów. W przykładzie wyświetlone zostaną elementy. Będą obracały się nieprzerwanie. Jak można uzyskać taki rezultat? Czy istnieje funkcja, która spowoduje płynną animację oraz symulację efektu zmiany położenia wielu elementów? Wyzwanie jest nieco większe. Aby uzyskać oczekiwany efekt, trzeba wykonać dwie czynności:  Przygotować dokument HTML zawierający kontener i karty.  Stworzyć regułę CSS, która sprawi, że (tak jak w filmie rysunkowym)

elementy będą kolejno wyświetlane w różnych położeniach. Proste? Logiczne? Zatem do rzeczy. Pierwszym krokiem jest przygotowanie kodu strony HTML:

033



033













Rozdział 1.  Animacje

67

Szablon nie jest zbyt rozbudowany. Plik HTML zawiera definicje oraz identyfikatory elementów. Ponieważ wirować będzie 12 elementów, w kodzie strony znajduje się również 12 pozycji . Za „tchnięcie życia” w dokument wyświetlany w oknie przeglądarki odpowiedzialny jest kod zapisany w pliku CSS. Na razie służy on jedynie utworzeniu tła i sformatowaniu nagłówka. Skoro o pliku CSS mowa, to ma on następującą postać: body { background-color:Khaki; } h1{ font-size:3em; font-family:sans-serif; color:Green; background-color:DarkKhaki; }

Tym razem dokument będzie utrzymany w odcieniach khaki i zieleni (rysunek 1.42). Rysunek 1.42. Chwilowo nic się nie dzieje. Przygotowane zostało jedynie tło animacji

W kolejnym etapie na arkuszu umieszczony zostanie element, który będzie animowany. Zmiany w pliku HTML są kosmetyczne (liczba 33 została zastąpiona przez 34). Większe zmiany zostały natomiast wprowadzone w pliku CSS: body { background-color:Khaki; } h1{ font-size:3em; font-family:sans-serif; color:Green; background-color:DarkKhaki; } #kontener { width:120px; height:60px; margin:0 auto;

68

CSS3. Zaawansowane projekty perspective:1200px; } #karta { transform-style:preserve-3d; } #karta > div { position:absolute; width:60px; height:60px; border:1px solid #0f0; background-color:rgba(255,255,255,0.5); background-image:radial-gradient(ellipse at bottom left,transparent,#0f0); box-shadow:0 0 2px #0f0; }

Podobno większość mężczyzn rozróżnia szesnaście kolorów, a kobiety o wiele więcej (domyślasz się, jakiej płci był twórca standardu VGA?). Jest to racjonalnie uzasadnione. Przez tysiąclecia mężczyźni zajmowali się polowaniem, a kobiety zbieractwem. Aby uniknąć zatrucia, musiały one zbierać tylko rośliny określonego gatunku i w odpowiednim stadium dojrzałości. Umiejętność ćwiczona przez pokolenia doprowadzona została do perfekcji. Czy dywagacje na temat płci są potrzebne w książce o efektach CSS? Tak! Jeśli jesteś mężczyzną i wykonawcą zlecenia, a zleceniodawcą jest kobieta — nie dziw się, że jeden kolor uważa ona za fantastyczny, a drugi za beznadziejny, podczas gdy Ty nie widzisz żadnej różnicy. Jak uniknąć problemów? Można posłużyć się wzornikiem kolorów (np. takim jak na rysunku 1.43) i poprosić klientkę o podanie ich nazw.

Rysunek 1.43. Dla uniknięcia nieporozumień najlepiej wyeliminować wszystkie możliwości przekłamania informacji. Po wybraniu koloru przez zleceniodawcę poproś go o podanie nazwy angielskiej, a jeszcze lepiej o jej przeliterowanie. Użyj tej nazwy lub jej odpowiednika w arkuszu stylów CSS. Próby tłumaczenia nazw, opisywania kolorów zwiększają prawdopodobieństwo błędu, co zdarza się bardzo często

Rozdział 1.  Animacje

69

Przy określaniu koloru tła body { background-color:SandyBrown; }

użyto nazwy koloru (rysunek 1.44). Rysunek 1.44. Element został wygenerowany przez kod CSS. Wygląda jak obrazek, ale wyświetlanie go wymaga znacznie mniejszego transferu

W nagłówku h1 występuje czcionka bezszeryfowa (sans-serif) w kolorze zielonym (Green), a wyświetlana jest na tle w kolorze ciemnym khaki (DarkKhaki): h1{ font-size:3em; font-family:sans-serif; color:Green; background-color:DarkKhaki; }

Element kontener ma szerokość 120 pikseli (width:120px) i wysokość 60 pikseli (height: 60px). Marginesy mają szerokość 0 (margin:0 auto) — są zatem niewidoczne. Obiekt ma dodaną perspektywę o wielkości 1200 pikseli (perspective:1200px): #kontener { width:120px; height:60px; margin:0 auto; perspective:1200px; }

Specyfikacja obiektu karta rozbita jest na dwie części. W części pierwszej (transformstyle:preserve-3d) określono, że dzieci elementu znajdą się w jego perspektywie 3D: #karta { transform-style:preserve-3d; }

70

CSS3. Zaawansowane projekty

W części drugiej zdefiniowane zostały właściwości elementu div. Jego położenie zdefiniowane zostało w stosunku do elementu rodzica (position:absolute). Animowany będzie prostokąt o szerokości 60 pikseli (width:60px) oraz wysokości 60 pikseli (height:60px). Otoczony jest on ramką (border) o szerokości 1 piksela (1px) utworzoną ciągłą linią (solid) w kolorze zielonym (#0f0). Obiekt ma tło (background-color) w kolorze białym o przezroczystości wynoszącej 0,5 (rgba(255,255,255,0.5)). W kolejnej linii określony został obrazek używany jako tło (background-image). Zapis radial-gradient jeszcze nie był stosowany. CSS3 dopuszcza użycie kilku rodzajów gradientów. Wszystkie one pozwalają na wyświetlanie płynnego przejścia pomiędzy przynajmniej dwoma kolorami. Zanim pojawiła się ta możliwość, to, aby uzyskać przejście gradientowe, trzeba było używać plików graficznych. Gradient uzyskany za pomocą polecenia CSS3 pozwala natomiast skrócić czas pobierania i wykorzystania pasma. CSS3 pozwala na zdefiniowanie dwóch rodzajów gradientów: liniowego oraz promieniowego (zwanego też promienistym). Aby utworzyć gradient liniowy, należy zdefiniować co najmniej dwa kolory. Pomiędzy nimi będą realizowane płynne przejścia. Można również ustawić punkt początkowy i kierunek (lub kąt) wraz z efektem gradientu. Polecenie ma następującą składnię: background: linear-gradient(direction, color-stop1, color-stop2, ...);

gdzie:  direction — kierunek, wzdłuż którego ma miejsce zmiana koloru. Domyślnie zmiana wykonywana jest od góry do dołu. Parametr left powoduje, że przejście

wykonywane jest w poziomie od lewej do prawej. Uzyskanie przejścia wzdłuż przekątnej wymaga podania położenia początku linii zmiany kierunku (np. left top — lewy górny róg). Można również określić kąt, jaki z poziomem tworzy linia, wzdłuż której ma miejsce zmiana koloru (np. 133deg);  color-stop1 — kolor początkowy;  color-stop2 — kolor końcowy.

Można określić więcej niż dwa kolory. Nazwy ich trzeba oddzielić przecinkami (np. red,orange,yellow,green,blue,indigo,violet — tęcza).

Na tym nie koniec możliwości. CSS3 pozwala na uzyskanie efektu przezroczystości, co daje wrażenie blaknięcia. Aby dodać przejrzystości, używamy funkcji rgba (). Jako parametrów używamy koloru: początkowego i końcowego. Ostatni parametr w funkcji rgba () może przyjąć wartość od 0 (pełna przezroczystość, kolor niewidoczny) do 1 (pełny kolor, bez przezroczystości). Deklaracja repeating-linear-gradient() pozwala uzyskać powtarzalny gradient liniowy. W przykładzie zastosowany został gradient promieniowy. Polecenie ma składnię: background: radial-gradient(rozmiar kształt miejsce, kolor pozycja, ...);

Rozdział 1.  Animacje

71

gdzie:  rozmiar — parametry określają rozmiar kształtu gradientu promieniowego.

Do dyspozycji są:  closest-side — rozciągnięcie gradientu promienistego do najbliższych

krawędzi danego elementu HTML,  farthest-side — rozciągnięcie gradientu promienistego do najbardziej

oddalonych krawędzi danego elementu HTML,  closest-corner — rozciągnięcie gradientu promienistego do najbliższego

rogu danego elementu HTML,  farthest-corner — rozciągnięcie gradientu promienistego do najbardziej

oddalonego rogu danego elementu HTML.  kształt — określa kształt gradientu promienistego. Do dyspozycji są dwie wartości: circle (okrąg) oraz ellipse (elipsa). Domyślną wartością parametru jest circle. Jeżeli jako rozmiar podaliśmy dwie wartości, wartością domyślną tego parametru jest wartość ellipse.  miejsce — parametr określa miejsce, od którego jest tworzony gradient

promieniowy. Akceptowane są nazwy kierunków i kombinacji kierunków. Są one podawane po słowie at, np. at right lub at top left. Akceptowane są inne jednostki używane w języku CSS3, np. %. Jeżeli podamy jedną wartość, będzie ona liczona od lewej krawędzi elementu HTML (w takim przypadku domyślnie druga wartość jest rozpoznawana przez przeglądarkę internetową jako wartość center). Jeżeli podamy dwie wartości, to pierwsza z nich będzie liczona od lewej krawędzi danego elementu HTML, a druga będzie liczona od górnej krawędzi danego elementu HTML. Domyślną wartością jest at center.

 kolor — określa kolor początkowy i kolor końcowy.  pozycja — określa, od którego oraz do którego miejsca ma być tworzony

dany kolor gradientu promieniowego. Domyślnie wypełnienie gradientowe promieniowe ma kształt elipsy, której środek znajduje się w centrum figury.

Właściwość box-shadow pozwala na dodanie co najmniej jednego cienia. Ma ona składnię: box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

gdzie:  none — wartość domyślna. Cień nie jest widoczny.  h-shadow — parametr wymagany. Położenie cienia w poziomie. Dozwolone

są wartości ujemne.  v-shadow — parametr wymagany. Położenie cienia w pionie. Dozwolone są

wartości ujemne.

72

CSS3. Zaawansowane projekty  blur — odległość, na jakiej występuje rozmazanie konturów.  spread — rozmiar cienia.  color — kolor cienia. Domyślnie cień jest czarny.  inset — podajemy tylko w przypadku, gdy chcemy ustawić cień wewnątrz

elementu HTML.  initial — przywrócenie wartości domyślnych.  inherit — dziedziczenie wartości od elementu rodzica.

Na rysunku 1.44 pokazano dokument HTML z elementem karta. W kolejnym kroku dokonamy „cudownego” rozmnożenia elementu z rysunku 1.44. Oczywiście stanie się to za sprawą kodu CSS: body { background-color:Khaki; } h1{ font-size:3em; font-family:sans-serif; color:Green; background-color:DarkKhaki; } #kontener { width:120px; height:60px; margin:0 auto; perspective:1200px; } #karta { transform-style:preserve-3d; } #karta > div { position:absolute; width:60px; height:60px; border:1px solid #0f0; background-color:rgba(255,255,255,0.5); background-image:radial-gradient(ellipse at bottom left,transparent,#0f0); box-shadow:0 0 2px #0f0; } #karta > div:nth-child(1) { transform:rotateY(0); } #karta > div:nth-child(2) { transform:rotateY(30deg); }

Rozdział 1.  Animacje

73

#karta > div:nth-child(3) { transform:rotateY(60deg); } #karta > div:nth-child(4) { transform:rotateY(90deg); } #karta > div:nth-child(5) { transform:rotateY(120deg); } #karta > div:nth-child(6) { transform:rotateY(150deg); } #karta > div:nth-child(7) { transform:rotateY(180deg); } #rodzic > div:nth-child(8) { transform:rotateY(210deg); } #rodzic > div:nth-child(9) { transform:rotateY(240deg); } #rodzic > div:nth-child(10) { transform:rotateY(270deg); } #rodzic > div:nth-child(11) { transform:rotateY(300deg); } #rodzic > div:nth-child(12) { transform:rotateY(330deg); }

Jaka zmiana została wprowadzona? Dodano linie: #karta > div:nth-child(1) { transform:rotateY(0); } #karta > div:nth-child(2) { transform:rotateY(30deg); }  #rodzic > div:nth-child(12) { transform:rotateY(330deg); }

Każda z nich powoduje wygenerowanie elementu obróconego o stały kąt. Tych elementów jest dwanaście. Trzeba rozłożyć je równomiernie na okręgu. Stąd kąty poszczególnych elementów różnią się o 30 stopni.

74

CSS3. Zaawansowane projekty

Na rysunku 1.45 pokazano dokument HTML z powieloną kartą. Rysunek 1.45. Dwanaście kart ułożonych jedna na drugiej. Dobrze chociaż, że są rozchylone o 30 stopni

Bez wątpienia rysunek 1.44 różni się od 1.45. Karty będzie można zobaczyć, gdy zostaną odsunięte od środka okręgu, po którym docelowo będą się kręcić. Do odsunięcia każdego elementu div, który jest dzieckiem elementu #kontener, zostanie wykorzystana funkcja translateZ(). Zapis translateZ(200px) spowoduje, że element #karta zostanie przesunięty wzdłuż własnej osi Z o 200 pikseli. Ostateczna postać pliku HTML:

037



037







Rozdział 1.  Animacje

75



Liczba elementów została zmniejszona do dziewięciu. O tym, że elementów jest zbyt wiele, co nie wygląda zbyt ładnie, można się było przekonać dopiero po ujrzeniu animacji w oknie przeglądarki. Finalna postać pliku CSS: body { background-color:black; } h1{ font-size:3em; font-family:sans-serif; color:Lime; background-color:#222; } #kontener { width:120px; height:60px; margin:0 auto; perspective:2400px; -webkit-perspective:2400px; } #karta { transform:rotateX(-10deg); -webkit-transform:rotateX(-10deg); transform-style:preserve-3d; -webkit-transform-style:preserve-3d; animation:obrot 36s linear infinite; -webkit-animation:obrot 36s linear infinite; } #karta > div { position:absolute; width:60px; height:60px; border:1px solid #0f0; background-color:rgba(255,255,255,0.5); background-image:radial-gradient(ellipse at bottom left,transparent,#0f0); box-shadow:0 0 2px #0f0; } #karta > div:nth-child(1) { transform:rotateY(0) translateZ(200px); -webkit-transform:rotateY(0) translateZ(200px); }

76

CSS3. Zaawansowane projekty #karta > div:nth-child(2) { transform:rotateY(40deg) translateZ(200px); -webkit-transform:rotateY(40deg) translateZ(200px); } #karta > div:nth-child(3) { transform:rotateY(80deg) translateZ(200px); -webkit-transform:rotateY(80deg) translateZ(200px); } #karta > div:nth-child(4) { transform:rotateY(120deg) translateZ(200px); -webkit-transform:rotateY(120deg) translateZ(200px); } #karta > div:nth-child(5) { transform:rotateY(160deg) translateZ(200px); -webkit-transform:rotateY(160deg) translateZ(200px); } #karta > div:nth-child(6) { transform:rotateY(200deg) translateZ(200px); -webkit-transform:rotateY(200deg) translateZ(200px); } #karta > div:nth-child(7) { transform:rotateY(240deg) translateZ(200px); -webkit-transform:rotateY(240deg) translateZ(200px); } #karta > div:nth-child(8) { transform:rotateY(280deg) translateZ(200px); -webkit-transform:rotateY(280deg) translateZ(200px); } #karta > div:nth-child(9) { transform:rotateY(320deg) translateZ(200px); -webkit-transform:rotateY(320deg) translateZ(200px); } @keyframes obrot { 0% { transform:rotateX(-0deg) rotateY(0); } 100% { transform:rotateX(-0deg) rotateY(360deg); } } @-webkit-keyframes obrot { 0% { -webkit-transform:rotateX(-0deg) rotateY(0); } 100% { -webkit-transform:rotateX(-0deg) rotateY(360deg); } } @keyframes obrot { 0% { transform:rotateX(-10deg) rotateY(0); } 100% { transform:rotateX(-10deg) rotateY(360deg); }

Rozdział 1.  Animacje

77

} @-webkit-keyframes obrot { 0% { -webkit-transform:rotateX(-10deg) rotateY(0); } 100% { -webkit-transform:rotateX(-10deg) rotateY(360deg); } }

W tym rozdziale odbiegnę od kolejności listing – opis – ilustracja, gdyż porównanie rysunków 1.45 i 1.46 wystarczająco dobrze pokazuje, dlaczego warto było wprowadzić zmiany. Rysunek 1.46. Postać finalna. Elementy wolno wirują po okręgu. Ponieważ spoglądamy na nie z boku, odnosimy wrażenie, że ich trajektoria jest elipsą

Teraz pora wyjaśnić, jaki wpływ na wygląd dokumentu mają poszczególne parametry. Zachęcam Cię do zmiany wartości parametru, zapisania nowej wersji pliku, a następnie sprawdzenia, jaki to miało wpływ na wygląd animacji.

Zapis: body { background-color:black; }

spowodował, że tło strony ma kolor czarny. Zmieniony został również kolor czcionki nagłówka h1(color:Lime). Jest on bliższy kolorowi animacji. Strona nie wygląda dobrze, gdy znajduje się na niej wiele różniących się od siebie kolorów. Jasny kolor lepiej kontrastuje z ciemnym tłem.

78

CSS3. Zaawansowane projekty

Tło nagłówka zostało przyciemnione (background-color:#222). Nic nie stoi na przeszkodzie, aby było ono identyczne jak tło strony. Dopóki pracujemy nad wyglądem strony, możliwość zaznaczenia, gdzie znajduje się obszar nagłówka, może być użyteczna. Zwiększono perspektywę kontenera (perspective:2400px; -webkit-perspective:2400px). Im większa perspektywa, tym dalej od obserwatora znajdują się elementy i obrót nie powoduje dużej zmiany ich gabarytów. Na rysunku 1.47 pokazano wygląd animacji po zmniejszeniu perspektywy do 400 pikseli. Rysunek 1.47. Jeszcze chwila, a elementy wyjdą z ekranu

Zapis: transform:rotateX(-10deg); -webkit-transform:rotateX(-10deg);

powoduje, że element nadrzędny jest pochylony o -10 stopni albo (co może bardziej przemawiać do wyobraźni) że patrzymy na niego z góry pod kątem 10 stopni. Czas i sposób zmiany prędkości określa zapis: animation:obrot 36s linear infinite; -webkit-animation:obrot 36s linear infinite;

Elementy wykonują pełen cykl obrotu w czasie 36 sekund (36s). Prędkość nie ulega zmianie (linear). Animacja trwa w nieskończoność (infinite). Zmieniony został opis poszczególnych kart: #karta > div:nth-child(1) { transform:rotateY(0) translateZ(200px); -webkit-transform:rotateY(0) translateZ(200px); } #karta > div:nth-child(2) { transform:rotateY(40deg) translateZ(200px); -webkit-transform:rotateY(40deg) translateZ(200px); }

Rozdział 1.  Animacje

79

Zamiast dwunastu jest dziewięć kart. Aby elementy były równomiernie rozłożone na okręgu, należało zmienić kąt, o jaki przesunięty jest każdy element. W tym przypadku jest to 360 : 9 = 40 stopni. Parametr translateZ(200px) określa promień, po jakim krążą elementy. Zmniejszenie go o połowę powoduje zacieśnienie okręgu (rysunek 1.48). Rysunek 1.48. Parametr translateZ(200px) został zastąpiony przez translateZ(100px)

Na samym końcu listingu znajdują się polecenia odpowiedzialne za animację: @keyframes obrot { 0% { transform:rotateX(-10deg) rotateY(0); } 100% { transform:rotateX(-10deg) rotateY(360deg); } } @-webkit-keyframes obrot { 0% { -webkit-transform:rotateX(-10deg) rotateY(0); } 100% { -webkit-transform:rotateX(-10deg) rotateY(360deg); } }

Cały proces rozpoczyna się (0%) od kąta zero (rotateY(0)), a kończy (100%) po obiegnięciu pełnego okręgu (rotateY(360deg)). Trajektoria ruchu pochylona jest pod kątem -10 stopni. Na rysunku 1.49 można zobaczyć, jaki wpływ na wygląd animacji ma wartość kąta. Tak jak trudno nam jednocześnie jedną dłonią głaskać się po brzuchu, a drugą dłonią klepać po czubku głowy — tak trudno wyobrazić sobie jednoczesny obrót w kilku płaszczyznach. Komputer jednak się nie zastanawia. Komputer wykonuje, co mu się każe. Dostanie więc polecenia:

80

CSS3. Zaawansowane projekty @keyframes obrot { 0% { transform:rotateX(0deg) rotateY(0); } 100% { transform:rotateX(360deg) rotateY(360deg); } } @-webkit-keyframes obrot { 0% { -webkit-transform:rotateX(0deg) rotateY(0); } 100% { -webkit-transform:rotateX(360deg) rotateY(360deg); } }

Rysunek 1.49. Kąt ma wartość zero. Obrót w poziomie. Efekt przestrzenny jest mało widoczny

i zrealizuje je, a przy tym nawet ekranem nie mrugnie (rysunek 1.50). Rysunek 1.50. Dłuższe wpatrywanie się w ekran może spowodować problemy u osób z chorobą lokomocyjną

Rozdział 1.  Animacje

81

Jakie są jeszcze możliwe modyfikacje? Nic nie stoi na przeszkodzie, aby element był jeden. Wystarczy usunąć deklaracje pozostałych ośmiu (rysunek 1.51). Rysunek 1.51. Animacja na stronę reklamującą usługi glazurnika

Kilka zmian w pliku CSS i płytka zamienia się w radar (rysunek 1.52). Rysunek 1.52. Oczywiście zamiast prostokąta może być napis itd. Życzę Ci wesołej zabawy podczas poznawania tajemnic animacji CSS

1.6. Animowany sześcian Aby uzyskać oczekiwany efekt, należy wykonać pięć czynności:  Utworzyć sześć elementów HTML o jednakowych rozmiarach, które zostaną

umieszczone w innym elemencie HTML — rodzicu.  Określić perspektywę dla rodzica.  Umieścić rodzica i element podrzędny w kolejnym elemencie HTML

— kontenerze.

82

CSS3. Zaawansowane projekty  Na każdej ścianie sześcianu zaznaczyć inną liczbę kropek.  Do całości dodać funkcję powodującą animację.

Proste? Logiczne? Zatem do rzeczy. Pierwszym krokiem jest przygotowanie kodu strony HTML:

040



040

CASINO GRAY AREA







Szablon nie jest zbyt rozbudowany. Plik HTML zawiera definicje oraz identyfikatory elementów. Aby można było zaobserwować ruch, będziemy używać sześciu elementów, muszą więc one różnić się od siebie wyglądem. Dlatego też każdy z nich ma inny identyfikator id. Kolejnym krokiem jest przygotowanie pliku CSS. Mamy zaprojektować sześcian, zatem dla elementu #kontener oraz dla wszystkich jego potomków określamy te same rozmiary. Wszystkie części sześcianu powinny znajdować się w tym samym miejscu, w obszarze elementu #rodzic. Dlatego dla wszystkich dzieci elementu #rodzic należy dodać właściwość position:absolute. Dla elementu #rodzic natomiast należy określić właściwość position:relative. Dzięki temu elementy z właściwością position:absolute; będą pozycjonowane względem elementu #rodzic. Oto kod CSS: body { background-color:silver; } h1{ font-size:3em; font-family:sans-serif;

Rozdział 1.  Animacje

83

color:black; } h2{ font-size:1,5em; font-family:sans-serif; color:gray; } #kontener { width:250px; height:250px; margin:0 auto; perspective:300px; -webkit-perspective:300px; } #rodzic { width:100%; height:100%; position:relative; } #rodzic > div { width:100%; height:100%; position:absolute; background-image:radial-gradient(ellipse at center,rgba (100,100,100,0.8),rgba(0,0,0,0.8)); box-shadow:0 0 2px #000; }

Sześcian kojarzy się z kostką do gry. Wykonamy zatem stronę kasyna pod wieloznaczną nazwą „Szara strefa”. Tło strony będzie „srebrne”: background-color:silver;

(chyba autor nazewnictwa kolorów widział jedynie stare srebra). Zastosowane zostaną dwa style nagłówków: h1 (czcionka w kolorze czarnym) oraz h2 (czcionka w kolorze szarym). Szerokość (width) elementu #kontener została dobrana tak, aby zmieścił się w nim napis. Zatem wysokość elementu również musi wynosić 250 pikseli (height:250px). Element #kontener nie ma marginesu (margin:0 auto), ale ma za to perspektywę o głębokości 300 pikseli (perspective:300px). Aby dokument był zgodny z przeglądarkami innych typów, dodano specyfikację: -webkit-perspective:300px;

Sześcianu wprawdzie jeszcze nie widać, ale pod jego ściany położony został solidny fundament. Jest nim kwadrat utworzony przez kod:

84

CSS3. Zaawansowane projekty background-image:radial-gradient(ellipse at center,rgba(100,100,100,0.8),rgba(0,0,0,0.8)); box-shadow:0 0 2px #000;

Na rysunku 1.53 widoczny jest plik 040.html wyświetlony w oknie przeglądarki. Rysunek 1.53. Podwaliny pod kasyno…

Dopiero po wyświetleniu dokumentu w przeglądarce można się przekonać, jak on wygląda, i wprowadzić niezbędne korekty. Na rysunku 1.54 pokazano stronę, w której zmieniono jeden parametr. W linii box-shadow:0 0 8px #000;

szerokość cienia wzrosła z 2 pikseli do 8 pikseli. Na nasz plac budowy dostarczymy kolejny element. Wystarczy w tym celu do pliku CSS dodać linie: #lewo { transform:rotateY(-90deg) translateZ(250px); -webkit-transform:rotateY(-90deg) translateZ(250px); }

Element ten ma identyfikator lewo. Powinien być lewą ścianą sześcianu. Obrócimy go o 90 stopni i odsuniemy od środka bryły o 250 pikseli. W kodzie CSS zmienione zostało tylko zakończenie: body { background-color:silver; } h1{ font-size:3em;

Rozdział 1.  Animacje Rysunek 1.54. Od razu lepiej. Wyraziste kształty nadają się do elementów, w których istotne są szczegóły. Logo może być nieco wtopione w tło

font-family:sans-serif; color:black; } h2{ font-size:1,5em; font-family:sans-serif; color:gray; } #kontener { width:250px; height:250px; margin:0 auto; perspective:300px; -webkit-perspective:300px; } #rodzic { width:100%; height:100%; position:relative; } #rodzic > div { width:100%; height:100%; position:absolute; background-image:radial-gradient(ellipse at center,rgba

85

86

CSS3. Zaawansowane projekty (100,100,100,0.8),rgba(0,0,0,0.8)); box-shadow:0 0 8px #000; } #lewo { transform:rotateY(-90deg) translateZ(250px); -webkit-transform:rotateY(-90deg) translateZ(250px); }

Na rysunku 1.55 można zobaczyć rezultat naszej pracy. Rysunek 1.55. Druga ściana bryły

Uzupełnimy teraz plik CSS, wpisując kod: #przod { transform:translateZ(50px); -webkit-transform:translateZ(50px); }

W oknie przeglądarki pojawi się kolejna płaszczyzna (rysunek 1.56). Postępując w ten sam sposób, należy dodać kod pozostałych ścian (rysunek 1.57).

Rozdział 1.  Animacje Rysunek 1.56. Trzecia ściana bryły

Rysunek 1.57. Sześć ścian przed montażem

87

88

CSS3. Zaawansowane projekty

A oto kod pliku CSS, który pozwolił na uzyskanie obrazu pokazanego na rysunku 1.57: body { background-color:silver; } h1{ font-size:3em; font-family:sans-serif; color:black; } h2{ font-size:1,5em; font-family:sans-serif; color:gray; } #kontener { width:250px; height:250px; margin:0 auto; perspective:300px; -webkit-perspective:300px; } #rodzic { width:100%; height:100%; position:relative; } #rodzic > div { width:100%; height:100%; position:absolute; background-image:radial-gradient(ellipse at center,rgba (100,100,100,0.8),rgba(0,0,0,0.8)); box-shadow:0 0 8px #000; } #przod { transform:translateZ(150px); -webkit-transform:translateZ(150px); } #tyl { transform:translateZ(-150px); -webkit-transform:translateZ(-150px); } #lewo { transform:rotateY(-90deg) translateZ(250px); -webkit-transform:rotateY(-90deg) translateZ(250px); }

Rozdział 1.  Animacje

89

#prawo { transform:rotateY(90deg) translateZ(250px); -webkit-transform:rotateY(90deg) translateZ(250px); } #gora { transform:rotateX(-90deg) translateZ(250px); -webkit-transform:rotateX(-90deg) translateZ(250px); } #dol { transform:rotateX(90deg) translateZ(250px); -webkit-transform:rotateX(90deg) translateZ(250px); }

Patrząc na rysunek 1.57, możemy odnieść wrażenie, że obserwujemy bryłę ze zbyt małej odległości. Odsuńmy się nieco od niej. Jak to zrobić? Wystarczy w sekcji kontener zmienić wartość parametru perspective z 250px na 750px. Zmieniony fragment kodu będzie miał postać: #kontener { width:250px; height:250px; margin:0 auto; perspective:750px; -webkit-perspective:750px; }

i dzięki temu bryła będzie lepiej widoczna (rysunek 1.58). Rysunek 1.58. Wartość parametru perspective określa, z jakiej odległości widzimy obiekt

90

CSS3. Zaawansowane projekty

Pora na montaż bryły. W sekcji kontener ustalony został jej rozmiar. Szerokość wynosi 250 pikseli (width:250px;). Wysokość również ma wartość 250 pikseli (height:250px;). Jest to odległość mierzona od krawędzi do krawędzi. Położenie ścian określane jest względem początku układu współrzędnych, czyli środka bryły. Zatem wartość bezwzględna parametru translateZ powinna wynosić 125 pikseli. Kod CSS po wprowadzeniu zmiany będzie miał postać: body { background-color:silver; } h1{ font-size:3em; font-family:sans-serif; color:black; } h2{ font-size:1,5em; font-family:sans-serif; color:gray; } #kontener { width:250px; height:250px; margin:0 auto; perspective:750px; -webkit-perspective:750px; } #rodzic { width:100%; height:100%; position:relative; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; } #rodzic > div { width:100%; height:100%; position:absolute; background-image:radial-gradient(ellipse at center,rgba (100,100,100,0.8),rgba(0,0,0,0.8)); box-shadow:0 0 8px #000; } #przod { transform:translateZ(125px); -webkit-transform:translateZ(125px); } #tyl { transform:translateZ(-125px);

Rozdział 1.  Animacje

91

-webkit-transform:translateZ(-125px); } #lewo { transform:rotateY(-90deg) translateZ(125px); -webkit-transform:rotateY(-90deg) translateZ(125px); } #prawo { transform:rotateY(90deg) translateZ(125px); -webkit-transform:rotateY(90deg) translateZ(125px); } #gora { transform:rotateX(-90deg) translateZ(125px); -webkit-transform:rotateX(-90deg) translateZ(125px); } #dol { transform:rotateX(90deg) translateZ(125px); -webkit-transform:rotateX(90deg) translateZ(125px); }

W oknie przeglądarki pojawi się taka figura, jak na rysunku 1.59. Rysunek 1.59. Krawędzie prześwitujące przez ściany pozwalają się domyślać, że mamy do czynienia z sześcianem

Jak się przekonać, że ta figura jest sześcianem? Trzeba obejrzeć ją ze wszystkich stron.

92

CSS3. Zaawansowane projekty

Jak wprawić bryłę w ruch? Oczywiście, dodając do kodu CSS odpowiednie polecenia. Plik CSS będzie miał postać: body { background-color:silver; } h1{ font-size:3em; font-family:sans-serif; color:black; } h2{ font-size:1,5em; font-family:sans-serif; color:gray; } #kontener { width:250px; height:250px; margin:0 auto; perspective:750px; -webkit-perspective:750px; } #rodzic { width:100%; height:100%; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; animation:obrot 4s linear infinite; -webkit-animation:obrot 20s linear infinite; } #rodzic > div { width:100%; height:100%; position:absolute; background-image:radial-gradient(ellipse at center,rgba (100,100,100,0.8),rgba(0,0,0,0.8)); box-shadow:0 0 8px #000; } #przod { transform:translateZ(125px); -webkit-transform:translateZ(125px); } #tyl { transform:translateZ(-125px); -webkit-transform:translateZ(-125px); }

Rozdział 1.  Animacje

93

#lewo { transform:rotateY(-90deg) translateZ(125px); -webkit-transform:rotateY(-90deg) translateZ(125px); } #prawo { transform:rotateY(90deg) translateZ(125px); -webkit-transform:rotateY(90deg) translateZ(125px); } #gora { transform:rotateX(-90deg) translateZ(125px); -webkit-transform:rotateX(-90deg) translateZ(125px); } #dol { transform:rotateX(90deg) translateZ(125px); -webkit-transform:rotateX(90deg) translateZ(125px); } @keyframes obrot { 0% { transform:rotateX(0) rotateY(0); } 100% { transform:rotateX(360deg) rotateY(360deg); } } @-webkit-keyframes obrot { 0% { -webkit-transform:rotateX(0) rotateY(0); } 100% { -webkit-transform:rotateX(360deg) rotateY(360deg); } }

Na rysunku 1.60 pokazano bryłę uchwyconą w trakcie ruchu. Gdzie znajduje się „silnik”, który wprawia tę bryłę w ruch? Ma on dwie części. Jedna została wstawiona do sekcji rodzic i ma postać: animation:obrot 20s linear infinite; -webkit-animation:obrot 20s linear infinite;

Obroty odbywają się bez końca (infinite) ze stałą prędkością (linear), a ich pełen cykl trwa 20 sekund (20s). Druga część kodu została dodana na końcu pliku CSS: @keyframes obrot { 0% { transform:rotateX(0) rotateY(0); } 100% { transform:rotateX(360deg) rotateY(360deg); } } @-webkit-keyframes obrot { 0% { -webkit-transform:rotateX(0) rotateY(0); } 100% { -webkit-transform:rotateX(360deg) rotateY(360deg); } }

94

CSS3. Zaawansowane projekty

Rysunek 1.60. Dopiero teraz widać, że mamy do czynienia z sześcianem

Ta część kodu opisuje ruch. Obroty są w płaszczyźnie X i Y. Rozpoczynają się od kąta 0 stopni i kończą, gdy bryła zostanie obrócona o 360 stopni. Sześcian będzie wyglądał ciekawiej, gdy boki będą się od siebie różniły. Sześcian i kasyno — skojarzenie nasuwa się samo: sześcian to kostka do gry. Musimy na jego bokach dodać kropki. Jak sprostać temu wyzwaniu? Dla poszczególnych elementów, które będą stanowiły półokrągłe kropki na ścianach sześcianu, trzeba utworzyć osobne reguły CSS. Do ich rozróżnienia wystarczy, że skorzystamy z selektora :nth-child() wskazującego ten numer dziecka elementu HTML, który podamy w selektorze :nth-child(). Selektor :nth-child(n) umożliwia identyfikowanie elementów według określonego wzoru, gdzie n może być liczbą. Zaczniemy od umieszczenia jednej kropki na przodzie kostki. W tym celu trzeba wprowadzić zmianę w pliku…HTML:

048

Rozdział 1.  Animacje

95



048

CASINO GRAY AREA









Nie będziemy się bawić w zabawę: „Wytęż wzrok i znajdź n szczegółów”, które różnią listingi. Zmiana polega tu na dodaniu w sekcji . Samo dodanie selektora do pliku HTML to jeszcze nie wszystko. We wskazanym miejscu powinien pojawić się kod. Musimy więc zmodyfikować plik CSS. Zmiana została wprowadzona we fragmencie kodu: #rodzic > div > div { position:absolute; width:20px; height:20px; background-color:#FFF; border-radius:50%; box-shadow:0 0 8px 4px #000, 0 0 6xpx 1px #000 inset; } #przod > div:nth-child(1) { left:125px; left:125px; }

Zdefiniowany został element o szerokości 20 pikseli (width:20px) oraz takiej samej wysokości (height:20px). Został on bardzo silnie zaokrąglony na rogach (borderradius:50%;) i właściwie jest okręgiem. Element ma tło w kolorze białym (backgroundcolor:#FFF). Cień został zdefiniowany za pomocą parametru box-shadow. Pierwsza kropka zostanie umieszczona na ścianie noszącej nazwę przod. Cała ściana ma wymiary 250 na 250 pikseli. Aby element znalazł się w środku, należy odsunąć go od lewej krawędzi o 125 pikseli (left:125px) i od górnej krawędzi o 125 pikseli (height:125px). Na rysunku 1.61 pokazano kostkę do gry z jedną kropką.

96

CSS3. Zaawansowane projekty

Rysunek 1.61. Na ścianie przedniej znajduje się jedna kropka

Jak rozmieścimy elementy na kostce? Trzeba zacząć od planu (rysunek 1.62). Rysunek 1.62. Plan rozmieszczenia kropek na kostce

Skoro na ścianie przedniej jest jedna kropka, to na ścianie przeciwległej powinno być ich sześć. Do pliku HTML w sekcji tyl trzeba było dodać sześć elementów . Kod HTML ma postać:

049

Rozdział 1.  Animacje

97



049

CASINO GRAY AREA













Kod CSS będzie odpowiedzialny za wypełnienie selektorów div treścią. Plik CSS ma postać: body { background-color:silver; } h1{ font-size:3em; font-family:sans-serif; color:black; } h2{ font-size:1,5em; font-family:sans-serif; color:gray; } #kontener { width:250px; height:250px; margin:0 auto; perspective:750px; -webkit-perspective:750px; } #rodzic { width:100%;

98

CSS3. Zaawansowane projekty height:100%; position:relative; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; animation:obrot 20s linear infinite; -webkit-animation:obrot 20s linear infinite; } #rodzic > div { width:100%; height:100%; position:absolute; background-image:radial-gradient(ellipse at center,rgba (100,100,100,0.8),rgba(0,0,0,0.8)); box-shadow:0 0 8px #000; } #przod { transform:translateZ(125px); -webkit-transform:translateZ(125px); } #tyl { transform:translateZ(-125px); -webkit-transform:translateZ(-125px); } #lewo { transform:rotateY(-90deg) translateZ(125px); -webkit-transform:rotateY(-90deg) translateZ(125px); } #prawo { transform:rotateY(90deg) translateZ(125px); -webkit-transform:rotateY(90deg) translateZ(125px); } #gora { transform:rotateX(-90deg) translateZ(125px); -webkit-transform:rotateX(-90deg) translateZ(125px); } #dol { transform:rotateX(90deg) translateZ(125px); -webkit-transform:rotateX(90deg) translateZ(125px); } #rodzic > div > div { position:absolute; width:20px; height:20px; background-color:#FFF; border-radius:50%; box-shadow:0 0 8px 4px #000, 0 0 6xpx 1px #000 inset; }

Rozdział 1.  Animacje

99

#przod > div:nth-child(1) { left:125px; top:125px; } #tyl #tyl #tyl #tyl #tyl #tyl

> > > > > >

div:nth-child(1) div:nth-child(2) div:nth-child(3) div:nth-child(4) div:nth-child(5) div:nth-child(6)

{ { { { { {

left:40px; top:40px; } left:125px; top:40px; } right:40px; top:40px; } left:40px; bottom:40px; } left:125px; bottom:40px; } right:40px; bottom:40px; }

@keyframes obrot { 0% { transform:rotateX(0) rotateY(0); } 100% { transform:rotateX(360deg) rotateY(360deg); } } @-webkit-keyframes obrot { 0% { -webkit-transform:rotateX(0) rotateY(0); } 100% { -webkit-transform:rotateX(360deg) rotateY(360deg); } }

Jaka jest zasada? W kodzie HTML trzeba zdefiniować na ścianie tyle elementów , ile ma być kropek. Następnie w pliku CSS dla ściany trzeba utworzyć definicje kropek: #tyl #tyl #tyl #tyl #tyl #tyl

> > > > > >

div:nth-child(1) div:nth-child(2) div:nth-child(3) div:nth-child(4) div:nth-child(5) div:nth-child(6)

{ { { { { {

left:40px; top:40px; } left:125px; top:40px; } right:40px; top:40px; } left:40px; bottom:40px; } left:125px; bottom:40px; } right:40px; bottom:40px; }

Definicje dotyczą elementu tyl. Każda kropka to oddzielny element div:nth-child(n), gdzie n przyjmuje wartości z przedziału od 1 do 6. Położenie kropek na płaszczyźnie można określać jednoznacznie w stosunku do krawędzi pionowych (left — lewa, right — prawa) oraz poziomych (top — górna, bottom — dolna). Kropki zostaną umieszczone w dwóch rzędach. Jeden rząd będzie w odległości 40 pikseli od krawędzi górnej (top:40px), a drugi w odległości 40 pikseli od krawędzi dolnej (bottom:40px). W każdym rzędzie znajdą się trzy kropki. Będą one rozmieszczone w odległości 40 pikseli od lewej krawędzi (left:40px), na środku elementu o szerokości 250 pikseli (left:125px) oraz w odległości 40 pikseli od prawej krawędzi (right:40px). Na rysunku 1.63 można zobaczyć rezultat naszych działań. Projektowanie najłatwiej rozpocząć od elementu z największą liczbą kropek. Pozwoli to na wyznaczenie optymalnych odległości. Gdy będziemy już mieli przećwiczony sposób „malowania” kropek na sześcianie, możemy upiększyć pozostałe ściany.

100

CSS3. Zaawansowane projekty

Rysunek 1.63. Sześcienna biedronka

Oto kod HTML, który zawiera specyfikacje wszystkich elementów:

050



050

CASINO GRAY AREA







Rozdział 1.  Animacje



















Oto kod CSS: body { background-color:silver; } h1{ font-size:3em; font-family:sans-serif; color:black; } h2{ font-size:1,5em; font-family:sans-serif; color:gray; } #kontener { width:250px; height:250px; margin:0 auto; perspective:750px; -webkit-perspective:750px; } #rodzic { width:100%; height:100%; position:relative;

101

102

CSS3. Zaawansowane projekty transform-style:preserve-3d; -webkit-transform-style:preserve-3d; animation:obrot 20s linear infinite; -webkit-animation:obrot 20s linear infinite; } #rodzic > div { width:100%; height:100%; position:absolute; background-image:radial-gradient(ellipse at center,rgba (100,100,100,0.8),rgba(0,0,0,0.8)); box-shadow:0 0 8px #000; } #przod { transform:translateZ(125px); -webkit-transform:translateZ(125px); } #tyl { transform:translateZ(-125px); -webkit-transform:translateZ(-125px); } #lewo { transform:rotateY(-90deg) translateZ(125px); -webkit-transform:rotateY(-90deg) translateZ(125px); } #prawo { transform:rotateY(90deg) translateZ(125px); -webkit-transform:rotateY(90deg) translateZ(125px); } #gora { transform:rotateX(-90deg) translateZ(125px); -webkit-transform:rotateX(-90deg) translateZ(125px); } #dol { transform:rotateX(90deg) translateZ(125px); -webkit-transform:rotateX(90deg) translateZ(125px); } #rodzic > div > div { position:absolute; width:20px; height:20px; background-color:#FFF; border-radius:50%; box-shadow:0 0 8px 4px #000, 0 0 6xpx 1px #000 inset; } #przod > div:nth-child(1) { left:125px; top:125px; }

Rozdział 1.  Animacje #tyl #tyl #tyl #tyl #tyl #tyl #lewo #lewo #lewo #lewo #lewo

> > > > > >

div:nth-child(1) div:nth-child(2) div:nth-child(3) div:nth-child(4) div:nth-child(5) div:nth-child(6) > > > > >

div:nth-child(1) div:nth-child(2) div:nth-child(3) div:nth-child(4) div:nth-child(5)

103 { { { { { { { { { { {

left:40px; top:40px; } left:125px; top:40px; } right:40px; top:40px; } left:40px; bottom:40px; } left:125px; bottom:40px; } right:40px; bottom:40px; } left:40px; top:40px; } right:40px; top:40px; } left:125px; bottom:125px; } left:40px; bottom:40px; } right:40px; bottom:40px; }

#prawo > div:nth-child(1) { left:40px; top:40px; } #prawo > div:nth-child(2) { right:40px; bottom:40px; } #gora #gora #gora #gora

> > > >

div:nth-child(1) div:nth-child(2) div:nth-child(3) div:nth-child(4)

{ { { {

left:40px; top:40px; } right:40px; top:40px; } left:40px; bottom:40px; } right:40px; bottom:40px; }

#dol > div:nth-child(1) { left:40px; top:40px; } #dol > div:nth-child(2) { left:125px; bottom:125px; } #dol > div:nth-child(3) { right:40px; bottom:40px; } @keyframes obrot { 0% { transform:rotateX(0) rotateZ(0); } 100% { transform:rotateX(360deg) rotateZ(360deg); } } @-webkit-keyframes obrot { 0% { -webkit-transform:rotateX(0) rotateZ(0); } 100% { -webkit-transform:rotateX(360deg) rotateZ(360deg); } }

Na rysunku 1.64 pokazano kompletną kostkę ze wszystkimi kropkami. Najsympatyczniejszy moment w projektowaniu to moim zdaniem ten, gdy zadanie już zostanie zrealizowane i można sprawdzić, jak zmiana parametrów wpłynęła na wygląd dokumentu (rysunek 1.65). Jakie zmiany wprowadzono w pliku 051.css? Zwiększono perspektywę: perspective:7500px; -webkit-perspective:7500px;

Skrócono czas wykonywania cyklu ruchu: animation:obrot 2s linear infinite; -webkit-animation:obrot 2s linear infinite;

104 Rysunek 1.64. Wirująca kostka

Rysunek 1.65. Kostka ma kropki w kolorze czerwonym, zakres ruchu zmniejszony do 30 stopni, czas wykonania cyklu skrócony do 2 sekund oraz perspektywę wynoszącą 7500 pikseli

CSS3. Zaawansowane projekty

Rozdział 1.  Animacje

105

Zmieniono kolor kropki na czerwony: box-shadow:0 0 8px 4px #F00, 0 0 6xpx 1px #F00 inset;

Zmiana zakresu ruchu wymagała zmodyfikowania linii: @keyframes obrot { 0% { transform:rotateX(0) rotateZ(0); } 100% { transform:rotateX(30deg) rotateZ(30deg); } } @-webkit-keyframes obrot { 0% { -webkit-transform:rotateX(0) rotateZ(0); } 100% { -webkit-transform:rotateX(30deg) rotateZ(30deg); } }

Zmieniając kilka parametrów, uzyskano efekt przypominający ruch wycieraczek samochodowych.

106

CSS3. Zaawansowane projekty

Rozdział 2.

Cienie

Wiele książek ma taki układ, że w miarę zagłębiania się w tekst rośnie złożoność omawianych zagadnień. Moim zdaniem w projektach praktycznych takie podejście nie zdaje egzaminu. Denerwuje ono, gdyż nie wiadomo, w jakim celu podawane są te obszerne informacje. Nie wiadomo w dodatku, czy wszystkie są istotne. W pierwszym rozdziale tej książki zostały opisane animacje. Bez potrzeby przebrnięcia przez wiele stron tekstu czytelnik mógł się dowiedzieć, jak je wykonać. Do uzyskania opisanych efektów konieczne było wykorzystanie efektu cienia, identyfikacji elementów itp. Wiadomo również, jakie praktyczne zastosowanie mają poszczególne polecenia. Aby nie utracić ciągłości opisu przykładu, wykorzystywano jedynie opcje bezpośrednio związane z przykładem. W tym rozdziale i w kolejnych analizowane są szerzej rozliczne opcje i możliwości modyfikacji dokumentu. Tytuł książki sugeruje, że znajdują się w niej praktyczne przykłady, które czytelnik może wykorzystać jako punkt wyjścia do tworzenia własnych projektów. Animacja, choć jest bardzo efektowna, może niektóre osoby rozpraszać. Aby zwrócić uwagę internautów na naszą stronę (oczywiście najważniejsza jest oryginalna treść), bezpieczniej byłoby użyć cieni. Za ich sprawą strona będzie sprawiała wrażenie trójwymiarowej.

2.1. Cienie prostokątów Aby uzyskać efekt cienia, należy:  Przygotować szablon strony HTML z elementem, do którego ma zostać

dodany cień.  Przygotować arkusz stylów CSS, w którym określone zostaną parametry cienia.

Proste? Logiczne? Zatem do rzeczy.

108

CSS3. Zaawansowane projekty

Pierwszym krokiem jest przygotowanie kodu strony HTML:

052



052



Jak widać, kod HTML nie zawiera konkretnej informacji, co pojawi się na stronie. Jest tylko zarezerwowane miejsce na obiekt . Co znajdzie się pomiędzy znacznikami , zostało określone w pliku CSS: body { background-color:silver; } h1{ font-size:3em; font-family:sans-serif; color:white; background-color: gray; } div { width: 600px; height: 100px; background-color: black; box-shadow: 10px 10px 5px #888888; }

Tło całego dokumentu ma kolor srebrny (background-color:silver). Element div ma szerokość 600 pikseli (width: 600px) i wysokość 100 pikseli (height: 100px). Obszar jest koloru czarnego (background-color: black). Do dodawania cieni do prostokąta służy polecenie box-shadow. Ma ono składnię: box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

gdzie:  none — wartość domyślna. Cień nie jest widoczny.  h-shadow — parametr wymagany. Położenie cienia w poziomie. Dozwolone

są wartości ujemne.  v-shadow — parametr wymagany. Położenie cienia w pionie. Dozwolone są

wartości ujemne.

Rozdział 2.  Cienie

109

 blur — odległość, na jakiej występuje rozmazanie konturów.  spread — rozmiar cienia.  color — kolor cienia. Domyślnie cień jest czarny.  inset — podajemy tylko w przypadku, gdy chcemy ustawić cień wewnątrz

elementu HTML.  initial — przywrócenie wartości domyślnych.  inherit — dziedziczenie wartości od elementu rodzica. Właściwość box-shadow pozwala na dodanie co najmniej jednego cienia. Przeglądarka Safari wymaga określenia koloru cienia. Brak informacji skutkuje niewyświetleniem cienia.

Przesunięcie Zapis box-shadow: 10px 10px 5px #888888 definiuje cień, którego prawa krawędź przesunięta jest względem prawej krawędzi obiektu o 10 pikseli (pierwsze 10px). Dolna krawędź przesunięta jest względem dolnej krawędzi obiektu o 10 pikseli (drugie 10px). Rozmycie krawędzi cienia wynosi 5 pikseli. Cień ma kolor zapisany w notacji szesnastkowej #888888. Na rysunku 2.1 pokazano, jak wygląda okno przeglądarki po wczytaniu pliku 052.html. Rysunek 2.1. Cień dodany do czarnego prostokąta. Domyślnie źródło światła znajduje się w lewym górnym rogu okna

Mówiąc „cień”, mamy na myśli cień zewnętrzny. Tak też ta cecha jest interpretowana. Można dodawać także cień wewnętrzny. Jeżeli w pliku CSS do właściwości box-shadow dodamy parametr inset: box-shadow: 10px 10px 5px #888888 inset;

wówczas cień pojawi się wewnątrz elementu (rysunek 2.2).

110

CSS3. Zaawansowane projekty

Rysunek 2.2. Obrazek wcale nie przypomina efektu pokazanego na rysunku 2.1. Wystarczyło tylko dodanie parametru inset. Mamy wrażenie, że element jest zagłębiony

Bardzo rozmyty cień wewnętrzny sprawia wrażenie gradientu na krańcach elementu. Jeżeli w pliku CSS we właściwości box-shadow ustawimy szerokość rozmycia cztery razy większą od szerokości cienia: box-shadow: 10px 10px 40px #888888 inset;

wówczas kod będzie miał postać: body { background-color:silver; } h1{ font-size:3em; font-family:sans-serif; color:white; background-color: gray; } div { width: 600px; height: 100px; background-color: black; box-shadow: 10px 10px 40px #888888 inset; }

Dokument wyświetlony w oknie przeglądarki (rysunek 2.3) uzyska wygląd niewiele przypominający pierwowzór z rysunku 2.1. Rysunek 2.3. Cień, który dał efekt gradientu

Rozdział 2.  Cienie

111

Definiując cień, należy określić jego przesunięcie względem elementu, który go rzuca w poziomie i pionie. Jeżeli nie wpiszemy innych wartości, przyjmą one wartość domyślną. Dla rozmycia i przesunięcia będzie to zero. Dla koloru powierzchni będzie to kolor tekstu. Kod CSS: body { background-color:silver; } h1{ font-size:3em; font-family:sans-serif; color:white; background-color: gray; } div { width: 600px; height: 100px; background-color: black; box-shadow: 10px 10px ; }

spowodował wygenerowanie cienia z parametrami domyślnymi (rysunek 2.4). Zmieniony został jedynie kolor nagłówka: color:white;

Kolor czcionki nie został wspomniany. Jest on domyślny, czyli czarny. Taki sam jest też cień. Rysunek 2.4. Cień pozbawiony rozmycia czy rozszerzenia ma dokładnie tę samą wielkość co element, któremu jest przypisany. Przesunięcie jest jedynym niezbędnym elementem cienia. Należy je wpisać nawet wtedy, jeżeli przyjmuje wartość zerową

Przeanalizujmy zmiany, które zostały wprowadzone w pliku CSS: body { background-color:silver; color:gray; font-family:sans-serif; } h1{ font-size:3em;

112

CSS3. Zaawansowane projekty font-family:sans-serif; color:white; background-color: gray; } div { width: 600px; height: 100px; background-color: white; box-shadow: 5px 10px; }

W sekcji body określony został kolor czcionki (color:gray). Atrybut ten będzie automatycznie zastosowany do koloru cienia. W elemencie tło ma kolor biały (background-color: white). Cień w stosunku do obiektu jest przesunięty w poziomie o 5 pikseli, zaś w pionie o 10 pikseli. Brak rozmycia powoduje, że cień ma ostre krawędzie (rysunek 2.5). Rysunek 2.5. Cień ma taki sam kolor jak litery. Brak rozmycia powoduje, że wygląda on mało naturalnie

Cień bez rozmycia można wykorzystać do narysowania pionowej linii: body { background-color:silver; color:gray; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:white; background-color: gray; } div { width: 600px; height: 100px; background-color: white; box-shadow: -2em 0; }

Rozdział 2.  Cienie

113

Został on wysunięty spod figury w poziomie o -2em. W pionie ma identyczne wymiary jak figura, gdyż przesunięcie ma wartość zerową. Pozostałe parametry cienia są domyślne (rysunek 2.6). Rysunek 2.6. Cień o ostrych kształtach i przesunięty tylko w poziomie wygląda jak pasek z lewej strony białego pola

Rozmycie Czy przesunięcie może mieć wartość zerową? Tak! Jeżeli rozmycie będzie odpowiednio duże, wówczas będzie ono widoczne na zewnątrz figury. Oto kod CSS, który zawiera powyższe wartości: body { background-color:silver; color:gray; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:white; background-color: gray; } div { width: 600px; height: 100px; background-color: white; box-shadow: 0px 0px 20px; }

Na rysunku 2.7 można zobaczyć, jak wygląda dokument HTML wyświetlony w oknie przeglądarki.

114

CSS3. Zaawansowane projekty

Rysunek 2.7. Rozmycie wynoszące 20% wysokości obszaru sprawia, że cień wtapia się w tło na dużej przestrzeni. Efekt będzie widoczny nawet przy zerowym przesunięciu

Im większe rozmycie, tym większy obszar będzie pokrywał cień. Plik CSS, w którym rozmycie cienia ma taką samą wartość jak wysokość figury: body { background-color:silver; color:gray; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:white; background-color: gray; } div { width: 600px; height: 100px; background-color: white; box-shadow: 0px 0px 100px; }

Na rysunku 2.8 można obejrzeć, jak wygląda dokument HTML, w którym rozmycie cienia jest identyczne jak wysokość obszaru. Rysunek 2.8. Przy silnym rozmyciu cienia uzyskujemy efekt podobny do wypełnienia gradientowego

Rozdział 2.  Cienie

115

Można zwiększyć rozmycie o 50%, kolor zmienić na ciemniejszy i cień przesunąć w prawo: body { background-color:silver; color:gray; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:white; background-color: gray; } div { width: 600px; height: 100px; background-color: white; box-shadow: 50px 0px 150px #222; }

Uzyskamy wówczas efekt silnego przyciemnienia tła (rysunek 2.9), które wcale nie przypomina cienia z rysunku 2.1. Rysunek 2.9. Trzeba dopiero zajrzeć do kodu CSS, aby się zorientować, że gradientowe tło to silnie rozmyty cień

Wysokość prostokąta możemy zwiększyć do 300 pikseli, a wtedy wraz z nim zostanie rozciągnięty rozmyty cień (rysunek 2.10). Czy efekty takie daje tylko użycie identyfikatora ? Analogiczne rezultaty dają również inne identyfikatory. W kodzie HTML i CSS można zastąpić przez . W ten sposób postanie kod HTML:

062

116

CSS3. Zaawansowane projekty

Rysunek 2.10. Cień jak przyklejony zmienia swe wymiary wraz z obiektem



062

To jest tekst.

Analogicznie kod CSS będzie miał postać: body { background-color:silver; color:gray; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:white; background-color: gray; } table { width: 600px; height: 300px; background-color: white; box-shadow: 50px 0px 150px #222; }

Rozdział 2.  Cienie

117

Jaki wygląd będzie miało okno przeglądarki po wczytaniu tego pliku? Można się o tym przekonać, oglądając rysunek 2.11. Rysunek 2.11. Cień może rzucać również tabela

Cień jest tej samej wielkości co element. Rozmycie powoduje, że cień kończy się w określonym miejscu, ale wtapia się w tło. Rozmycie powiększa cień.

Rozszerzenie Cień można rozszerzyć bez zmiany rozmycia: body { background-color:silver; color:gray; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:white; background-color: gray; } table { width: 600px; height: 100px; background-color: white; box-shadow: 0 0 0 5px; }

118

CSS3. Zaawansowane projekty

Jak można zorientować się z kodu CSS, cień został jedynie rozszerzony. Brak rozmycia powoduje, że przypomina on raczej ramkę niż cień (rysunek 2.12). Rysunek 2.12. Obramowanie obszaru uzyskane za pomocą cienia. Z każdej strony obiektu ma ono tę samą szerokość

Efekt cienia można wzmocnić, gdy do rozszerzenia dodane zostanie rozmycie: body { background-color:silver; color:gray; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:white; background-color: gray; } table { width: 600px; height: 100px; background-color: white; box-shadow: 0 0 5px 5px; }

Na rysunku 2.13 można obejrzeć, jaki wpływ na cień z rysunku 2.12 miało dodanie wtopienia o szerokości 5 pikseli. Rysunek 2.13. Cień o rozszerzeniu 5 pikseli po dodaniu wtopienia na przestrzeni 5 pikseli

Rozdział 2.  Cienie

119

Dalsze zwiększanie wtopienia powoduje, że granica ramki robi się coraz bardziej rozmyta: body { background-color:silver; color:gray; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:white; background-color: gray; } table { width: 600px; height: 100px; background-color: white; box-shadow: 0 0 10px 5px; }

Na rysunku 2.14 można obejrzeć, jaki wpływ na cień z rysunku 2.13 miało zwiększenie wtopienia do 10 pikseli. Rysunek 2.14. Cień z rysunku 2.13 po zwiększeniu rozszerzenia do 10 pikseli

Cień można również zmniejszyć. Wystarczy wpisać wartości ujemne: body { background-color:silver; color:gray; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:white; background-color: gray; } table {

120

CSS3. Zaawansowane projekty width: 600px; height: 100px; background-color: white; box-shadow:-50px 0 50px -25px #444; }

Na rysunku 2.15 można obejrzeć, jaki wpływ na cień z rysunku 2.14 miało zastosowanie cienia o parametrach: box-shadow:-50px 0 50px -25px #444;

Rysunek 2.15. Widoczne są ciemniejsze części cienia. Jego kształt jest okrąglejszy

Kolory Domyślnie kolorem cienia jest kolor tekstu. Można to zmienić, wpisując w pliku CSS numer lub nazwę koloru: body { background-color:lime; color:lime; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:lime; background-color: green; } table { width: 600px; height: 100px; background-color: black; box-shadow:-50px 0 50px -25px black; }

Analizując kod CSS, można zauważyć, że używane są trzy kolory: limonkowy (lime), zielony (green) i czarny (black).

Rozdział 2.  Cienie

121

Na rysunku 2.16 można zobaczyć, jak wygląda dokument HTML. Rysunek 2.16. Ciężko uwierzyć, że plik 067.css różni się od 066.css tylko specyfikacją kolorów

HTML 4.01 definiuje 16 kolorów. Można ich użyć do określenia koloru, podając nazwę angielską (tabela 2.1). Tabela 2.1. Nazwy kolorów zgodnych z HTML 4.01 Kolor

Nazwa angielska

Zapis szesnastkowy

biały

white

#FFFFFF

cyjan

aqua

#00FFFF

czarny

black

#000000

czerwony

red

#FF0000

fioletowy

purple

#800080

fuksja

fuchsia

#FF00FF

granatowy

navy

#000080

limonka

lime

#00FF00

morski

teal

#008080

niebieski

blue

#0000FF

oliwkowy

olive

#808000

srebrny

silver

#C0C0C0

szary

grey

#808080

wiśniowy

maroon

#800000

zielony

green

#008000

żółty

yellow

#FFFF00

Nazwy kolorów zostały użyte w pliku 067.css. Przeglądarki rozpoznają znacznie więcej kolorów. Pełną ich listę można znaleźć w internecie (np. http://pl.wikipedia.org/wiki/Kolory_w_Internecie#Nazwy_kolor.C3.B3w _w_systemie_X11).

122

CSS3. Zaawansowane projekty

Zapis heksadecymalny określa udział kanałów: czerwonego, zielonego i niebieskiego. Cyfr (znaków) w systemie heksadecymalnym jest 16 (stąd nazwa: system szesnastkowy, w skrócie HEX). Jest to dziesięć cyfr i sześć pierwszych liter alfabetu. Malarz posługujący się paletą i pędzlami miesza poszczególne farby, uzyskując kolor wynikowy. Dodanie farby na palecie odpowiada zwiększeniu wartości składowej. Gdy malarz doda koloru zbyt dużo, ma problem, ponieważ trudno usunąć go z mieszaniny. Natomiast w programie komputerowym takiego problemu nie ma. Wystarczy wpisać mniejszą wartość liczbową. Można również nie eksperymentować i podać od razu predefiniowane nazwy kolorów (rysunek 2.17). Rysunek 2.17. Jaśniejsza wersja palety kolorów przedstawionej na rysunku 2.16

Użycie w specyfikacji równej liczby kolorów z każdego z kanałów, np. #ddd, #aaa, pozwala uzyskać odcień koloru szarego. Im liczby mają większą wartość, tym kolor jest jaśniejszy.

Moim zdaniem strona wygląda ładnie, gdy utrzymana jest w jednym odcieniu kolorów (rysunek 2.18). Pomocna przy wyborze palety może być wspomniana wcześniej strona: http://pl.wikipedia.org/wiki/Kolory_w_Internecie#Nazwy_kolor.C3.B3w_w_systemie_X11 Podejrzewam, że sam bym nie wpadł na to, aby użyć takich nazw kolorów: body { background-color:SandyBrown; color:NavajoWhite; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:BlanchedAlmond; background-color: Chocolate; } table { width: 600px; height: 100px; background-color: Sienna; box-shadow:10px 10px 2px SaddleBrown; }

Rozdział 2.  Cienie

123

Rysunek 2.18. Strona utrzymana w odcieniach koloru brązowego. Rozmycie cienia daje wrażenie trójwymiarowości i pozwala na łagodniejsze przejście między różniącymi się odcieniami

Nawet odcienie szarości są interesujące, gdy zostaną zróżnicowane (rysunek 2.19). A oto kod CSS strony pokazanej na rysunku 2.19: body { background-color:Gainsboro; color:LightGrey; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:Silver; background-color: DimGray; } table { width: 600px; height: 100px; background-color: LightSlateGray; box-shadow:10px 10px 2px DarkSlateGray; }

Rysunek 2.19. Odcienie szarości

124

CSS3. Zaawansowane projekty

Zapis heksadecymalny pozwala na uzyskanie wielu zestawów kolorystycznych. Jeśli efekty, które on daje, są zbyt skromne, można skorzystać z wprowadzonych w CSS3 nowych zapisów koloru: rgba i hsla. RGB to, jak łatwo się domyślić, zapis z użyciem trzech składowych kolorów (red — czerwony, green — zielony, blue — niebieski). Natomiast RGBa to paleta barw z dodatkiem a na końcu, które oznacza kanał alfa, czyli transparentność. Umożliwia to stworzenie bardziej subtelnych i elastycznych rozwiązań. Analogicznie HSL to kolor zdefiniowany przez określenie numeru barwy, a następnie procentowego określenia jasności i nasycenia. Rozwiązanie to jest bardzo wygodne dla projektujących. W tym przypadku również a na końcu oznacza kanał alfa, czyli transparentność. W przykładzie użyjemy parametru a do zmiany widoczności cienia: body { background-color:Pink; color:Pink; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:LightPink; background-color: MediumVioletRed; } table { width: 600px; height: 100px; background-color: HotPink; box-shadow:10px 10px 2px hsla(350,80%,60%, 0.1); }

Na rysunku 2.20 pokazano okno przeglądarki, w którym wyświetlono dokument z cieniem zdefiniowanym w standardzie hsla. Rysunek 2.20. Strona w tonacji „Barbie”. Cień przepuszcza 90% widocznego pod nim obrazu

Rozdział 2.  Cienie

125

Na rysunku 2.21 pokazano dokument z rysunku 2.20, w którym zwiększono krycie z 10 do 30%. Rysunek 2.21. Cień przepuszcza 70% widocznego pod nim obrazu

Niewielka zmiana parametru spowodowała, że cień, który był ledwie widoczny, jest już zauważalny.

Cień wewnętrzny Podobnie, zmieniając jeden parametr, można przenieść cień z zewnątrz obszaru do jego wnętrza, co całkowicie zmienia wygląd figury: body { background-color:Pink; color:Pink; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:LightPink; background-color: MediumVioletRed; } table { width: 600px; height: 100px; background-color: HotPink; box-shadow:10px 10px 2px hsla(350,80%,60%, 0.3) inset; }

Na rysunku 2.22 pokazano wygląd okna przeglądarki, w którym załadowano plik z cieniem wewnętrznym. Wtopienie cienia wewnętrznego przy jednoczesnym braku przesunięcia spowoduje, że przy krawędzi figury będzie on miał intensywny kolor. W miarę przesuwania ku wnętrzu będzie następowało coraz silniejsze połączenie kolorów. Oto kod CSS, który umożliwia uzyskanie efektu gradientu wewnętrznego:

126

CSS3. Zaawansowane projekty

Rysunek 2.22. Wystarczy na koniec dodać słowo kluczowe inset, aby cień znajdował się wewnątrz

body { background-color:Pink; color:Pink; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:LightPink; background-color: MediumVioletRed; } table { width: 600px; height: 100px; background-color: HotPink; box-shadow:0 0 32px Maroon inset; }

Na rysunku 2.23 pokazano obiekt z cieniem wewnętrznym. Rysunek 2.23. Ciemniejszy cień po wtopieniu w jaśniejsze tło tabeli

Rozdział 2.  Cienie

127

Zmiana koloru cienia, który jest ciemniejszy od elementu, na kolor jaśniejszy powoduje zupełnie inny wygląd strony (rysunek 2.24). Oto kod CSS: body { background-color:Pink; color:Pink; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:LightPink; background-color: MediumVioletRed; box-shadow:0 0 32px Pink inset; } table { width: 600px; height: 100px; background-color: HotPink; box-shadow:0 0 32px Pink inset; }

Rysunek 2.24. Ten sam cień wewnętrzny dodano do tła tabeli i nagłówka. Dzięki temu oba obszary mają gradient wewnętrzny

Kilka cieni Ten sam element może rzucać wiele cieni. Zjawisko takie wystąpi np. przy oświetleniu elementu kilkoma monochromatycznymi źródłami światła umieszczonymi w różnych miejscach. Zaczniemy od jednego cienia. Oto kod CSS: body { background-color:PaleTurquoise; color:Aqua; font-family:sans-serif; }

128

CSS3. Zaawansowane projekty h1{ font-size:3em; font-family:sans-serif; color:Aqua; background-color: DarkTurquoise; } table { width: 600px; height: 100px; background-color: DeepSkyBlue; box-shadow:10px 20px 10px CadetBlue; }

A oto uzyskany efekt (rysunek 2.25). Rysunek 2.25. Tabela rzuca jeden cień

Jak dodać drugi cień? Trzeba w sekcji box-shadow dopisać jego parametry, oddzielając je przecinkiem od poprzedzającego cienia: body { background-color:PaleTurquoise; color:Aqua; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:Aqua; background-color: DarkTurquoise; } table { width: 600px; height: 100px; background-color: DeepSkyBlue; box-shadow:10px 20px 10px CadetBlue, 10px -20px 10px SteelBlue; }

Rozdział 2.  Cienie

129

Na rysunku 2.26 pokazano tabelę rzucającą dwa cienie. Rysunek 2.26. Wyraźniej widoczne cienie, czyli cienie wpisane w kodzie jako pierwsze, są jakby na wierzchu

Zmiana kolejności deklaracji ma oczywiście wpływ na wygląd strony (rysunek 2.27). Oto kod CSS: body { background-color:PaleTurquoise; color:Aqua; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:Aqua; background-color: DarkTurquoise; } table { width: 600px; height: 100px; background-color: DeepSkyBlue; box-shadow:10px -20px 10px SteelBlue, 10px 20px 10px CadetBlue; }

Rysunek 2.27. Strona z rysunku 2.26 po zmianie kolejności deklaracji cieni

130

CSS3. Zaawansowane projekty

Skoro wiemy, jakie zasady rządzą umieszczaniem cieni, możemy dodać ich kilka do elementu. Oto kod CSS: body { background-color:PaleTurquoise; color:Aqua; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:Aqua; background-color: DarkTurquoise; } table { width: 600px; height: 100px; background-color: DeepSkyBlue; box-shadow:-20px 10px 10px SteelBlue, -10px -20px 10px CadetBlue, 20px -10px 10px MidnightBlue, 10px 20px 10px DarkSlateBlue; }

Na rysunku 2.28 pokazano okno przeglądarki po załadowaniu strony z definicją kilku cieni. Rysunek 2.28. Tabela rzuca cztery cienie

Wystarczy do kodu strony w definicji każdego cienia dodać słowo inset i cienie z zewnętrznych staną się wewnętrznymi. Oto kod CSS: body { background-color:PaleTurquoise; color:Aqua; font-family:sans-serif; } h1{ font-size:3em; font-family:sans-serif; color:Aqua; background-color: DarkTurquoise;

Rozdział 2.  Cienie

131

box-shadow:-10px 5px 5px SteelBlue inset, -5px -10px 5px CadetBlue inset, 10px -5px 5px MidnightBlue inset, 5px 10px 5px DarkSlateBlue inset; } table { width: 600px; height: 100px; background-color: DeepSkyBlue; box-shadow:-20px 10px 10px SteelBlue inset, -10px -20px 10px CadetBlue inset, 20px -10px 10px MidnightBlue inset, 10px 20px 10px DarkSlateBlue inset; }

Na rysunku 2.29 pokazano wygląd okna przeglądarki po załadowaniu strony z czterema cieniami wewnętrznymi. Rysunek 2.29. Taka sama sekwencja kolorów została użyta do wygenerowania wielokrotnego cienia w tabeli i nagłówku strony. Inna jest jedynie szerokość cieni

2.2. Cienie tekstu Cień może być rzucany przez dowolny obiekt. Może nim być litera lub tekst. Cień dokładnie dopasuje się do kształtu obiektu. Cień kojarzy się najczęściej z sytuacją, w której jest on ciemniejszy od tła. W świecie generowanym przez program komputerowy możemy spowodować, że cień zamieni się w poświatę. Z sytuacją taką będziemy mieli do czynienia wówczas, gdy tło i litery będą ciemne, zaś napis będzie widoczny dzięki wyłaniającym się zza niego jasnym promieniom światła. Zachwycające możliwości. Aż się nie chce wierzyć, że są one uzyskiwane przez odpowiedni dobór kolorów pikseli. Zajmijmy się praktycznymi możliwościami. Jak zawsze rozpoczniemy od przygotowania kodu strony HTML:

132

CSS3. Zaawansowane projekty

082



082

To jest tekst.

Kod HTML zawiera dwa zasadnicze elementy. Są nimi nagłówek oraz akapit

. Jeżeli w kodzie CSS określimy wygląd elementu znajdującego się pomiędzy znacznikami, wówczas niezależnie od miejsca i liczby wystąpień w kodzie strony będzie on miał taki sam wygląd. Oto plik CSS niezawierający jeszcze poleceń, które dają efekt cienia tekstu: body { background-color:Gainsboro; color:Silver; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; } h1{ font-size:3em; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; color:LightGrey; background-color: DarkGray; } p { background-color: Gray; }

Na rysunku 2.30 pokazano wygląd okna przeglądarki po wyświetleniu w nim dokumentu 082.html. Rysunek 2.30. Tekst bez dodanego efektu cienia

Rozdział 2.  Cienie

133

Jak dodać do tekstu efekt cienia? W regułach CSS istnieje do tego celu specjalna właściwość — text-shadow. Podobnie jak do obiektu, tak i do tekstu można dodać wiele cieni. Specyfikację każdego z nich należy oddzielić od pozostałych przecinkiem.

Ma ona składnię: text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

gdzie:  h-shadow — parametr wymagany. Położenie cieni w poziomie. Akceptowane

są wartości ujemne.  v-shadow — parametr wymagany. Położenie cieni w pionie. Akceptowane są

wartości ujemne.  blur-radius — parametr opcjonalny. Promień wtopienia. Domyślnie parametr

ma wartość 0.  color — parametr opcjonalny. Kolor cienia.  none — wartość domyślna. Brak cienia.  initial — przywrócenie wartości domyślnych.  inherit — dziedziczenie wartości z obiektu rodzica.

Do specyfikacji nagłówka i akapitu dodamy właściwość: text-shadow: 2px 2px 8px #F00;

Spowoduje ona dodanie cienia przesuniętego w pionie oraz w poziomie o 2 piksele w stosunku do napisu. Cień będzie wtopiony w tło na przestrzeni 8 pikseli. Będzie miał kolor czerwony. Na rysunku 2.31 można zobaczyć uzyskany efekt. Rysunek 2.31. Użycie tego samego rozmycia w stosunku do dużych liter nagłówka i małych liter tekstu spowodowało, że cień tekstu rzucany jest na tło strony

134

CSS3. Zaawansowane projekty

Po ustaleniu promienia wtopienia cienia kod CSS będzie miał postać: body { background-color:Gainsboro; color:Silver; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; } h1{ font-size:3em; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; color:LightGrey; background-color: DarkGray; text-shadow: 2px 2px 8px #F00; } p { background-color: Gray; text-shadow: 2px 2px 2Apx #F00; }

Na rysunku 2.32 pokazano wygląd dokumentu HTML z wielkością wtopienia dostosowaną do rozmiaru czcionki. Rysunek 2.32. Wtopienie cienia jest proporcjonalne do rozmiaru czcionki. Efekt trójwymiarowości pozostał przy poprawianiu czytelności małych liter

Ciekawy rezultat można uzyskać, gdy pozostawione zostanie samo rozmycie tekstu, a cień nie będzie przesunięty. Kod CSS, który daje wspomniany efekt, to: body { background-color:Gainsboro; color:Silver; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; } h1{ font-size:3em; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; color:LightGrey; background-color: DarkGray; text-shadow: 0px 0px 8px #F00; } p { background-color: Gray; text-shadow: 0px 0px 2px #F00; }

Rozdział 2.  Cienie

135

Na rysunku 2.33 pokazano wygląd dokumentu HTML z wielkością wtopienia dostosowaną do rozmiaru czcionki, ale z zerowym przesunięciem cienia. Rysunek 2.33. Litery emitują promieniowanie

Gdy z kolei rozmycie zredukujemy do zera, a cień będzie przesunięty, uzyskamy efekt trójwymiarowości: body { background-color:Gainsboro; color:Silver; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; } h1{ font-size:3em; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; color:LightGrey; background-color: DarkGray; text-shadow: 2px 2px 0px #F00; } p { background-color: Gray; text-shadow: 2px 2px 0px #F00; }

Na rysunku 2.34 pokazano napis z dodanym efektem przestrzennym. Rysunek 2.34. Cień o precyzyjnych krawędziach przesunięty nieco w stosunku do obiektu może pełnić rolę ścianek liter i stwarzać wrażenie, że litery nie leżą w tej samej płaszczyźnie co tło

136

CSS3. Zaawansowane projekty

Napisane biało na białym Białe litery na białym tle nie będą widoczne. Skoro jednak obiekt rzuca cień, można się pokusić o eksperyment. Oto kod CSS: body { color:White; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; } h1{ font-size:3em; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; color:White; text-shadow: 0px 0px 8px #000; } p { color:White; text-shadow: 0px 0px 8px #000; }

Tło (body) jest w kolorze białym (color:White). Nagłówek h1 jest również w kolorze białym (color:White). Wokół liter znajduje się cień. Położony jest on idealnie pod znakami, ale „wylewa” się spod nich na 8 pikseli (text-shadow: 0px 0px 8px #000). Identyczny cień został dodany do akapitu p. Jaki dało to efekt? Wystarczy spojrzeć na rysunek 2.35. Rysunek 2.35. Białe znaki na białym tle są widoczne dzięki cieniowi, który wtapia się w tło na określonej przestrzeni

Skoro mamy gotowy plik CSS, możemy sprawdzić, jak na wygląd napisu wpłynie dodanie do niego przesunięcia cienia. Powstanie ono, gdy w definicji stylu nagłówka h1 i akapitu p użyjemy właściwości text-shadow: 2px 2px 8px #000. Na rysunku 2.36 można zobaczyć, jaki wpływ na wygląd dokumentu będzie miała wprowadzona zmiana. Oczywiście nic nie stoi na przeszkodzie, aby cień był kolorowy (rysunek 2.37) lub miał przewagę ciemnych kolorów (rysunek 2.38).

Rozdział 2.  Cienie

137

Rysunek 2.36. Wtopienie cienia powoduje, że litery są widoczne. Natomiast przesunięcie cienia sprawia, że uzyskujemy wrażenie trójwymiarowości

Rysunek 2.37. Cień w kolorze #00F

Rysunek 2.38. Nagłówek jest dobrze widoczny, ale treść akapitu gorzej

Poświata Co można zrobić, aby poprawić widoczność ciemnego tekstu na ciemnym tle? Można dodać kolejne źródło światła, czyli cień w innym kierunku: body { background-color:black; color:black; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; } h1{ font-size:3em; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; color:black;

138

CSS3. Zaawansowane projekty text-shadow: 2px 2px 16px #0f0, -2px 2px 16px #0f0, 2px -2px 16px #0f0, -2px -2px 16px #0f0; } p { color:black; text-shadow: 2px 2px 16px #0f0, -2px 2px 16px #0f0, 2px -2px 16px #0f0, -2px -2px 16px #0f0; }

Identyczny cień (może w tym przypadku adekwatna będzie nazwa „poświata”) został dodany do nagłówka i tekstu akapitowego. Zapis text-shadow: 2px 2px 16px #0f0, -2px 2px 16px #0f0, 2px -2px 16px #0f0, -2px -2px 16px #0f0; oznacza, że każdy cień został przesunięty w stosunku do pozostałych o 2 piksele w pionie lub poziomie. Na rysunku 2.39 można obejrzeć efekt końcowy. Rysunek 2.39. Widoczność tekstu została poprawiona, gdyż „cienie” zajmują większy obszar

Tekst widoczny na rysunku 2.39 przy dłuższym czytaniu jest męczący dla wzroku. Aby ujednolicić jasne tło, trzeba zwiększyć przesunięcie w taki sposób, aby było równe połowie rozmycia (rysunek 2.40). Skoro mamy już cztery cienie, warto sprawdzić, jak będzie wyglądał dokument, gdy każdy cień będzie miał inny kolor: body { background-color:black; color:black; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; } h1{ font-size:3em; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; color:black;

Rozdział 2.  Cienie

139

Rysunek 2.40. Jaśniejsze i bardziej jednolite tło poprawia czytelność tekstu

text-shadow: 8px 8px 16px #f00, -8px 8px 16px #0f0, 8px -8px 16px #00f, -8px -8px 16px #fff; } p { color:black; text-shadow: 8px 8px 16px #f00, -8px 8px 16px #0f0, 8px -8px 16px #00f, -8px -8px 16px #fff; }

Na rysunku 2.41 można zobaczyć rezultat użycia czterech podświetleń w różnych kolorach. Rysunek 2.41. Rezultat użycia trzech cieni w kolorach: czerwonym, zielonym i niebieskim, zaś czwartego w kolorze białym

140

CSS3. Zaawansowane projekty

Jak poradzić sobie z ciemnością, która zapanowała na rysunku 2.41? Dać więcej światła! Oto kod CSS, w którym dodano poświatę w kolorze białym: body { background-color:black; color:black; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; } h1{ font-size:3em; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; color:black; text-shadow: 8px 8px 16px #ff0, -8px 8px 16px #f0f, 8px -8px 16px #0ff, -8px -8px 16px #fff, 8px 8px 16px #fff, -8px 8px 16px #fff, 8px -8px 16px #fff; } p { color:black; text-shadow: 8px 8px 16px #ff0, -8px 8px 16px #f0f, 8px -8px 16px #0ff, -8px -8px 16px #fff, 8px 8px 16px #fff, -8px 8px 16px #fff, 8px -8px 16px #fff; }

Czy zabieg ten coś dał, można sprawdzić, oglądając rysunek 2.42. Rysunek 2.42. Tło tęczowo-neonowe. Czarny tekst na jasnym tle jest dobrze widoczny

2.3. Cień obiektu Z poprzednich rozdziałów wiemy już, że cień mogą rzucać: element div, tabela, tekst. Czy na tym kończą się możliwości? Zasadniczo cień (poświatę) może rzucać każdy element, który ma znacznik.

Rozdział 2.  Cienie

141

Odsyłacz Skoro odsyłacz ma własny znacznik, można utworzyć regułę w pliku CSS, która spowoduje, że jedynie odsyłacz będzie miał dodany cień. Plik HTML ma postać:

095



095 Helion

Znacznikiem objęty jest adres internetowy. Plik CSS, który odpowiada za wygląd dokumentu, ma postać: body { background-color:Cornsilk; color:SaddleBrown; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; } h1{ font-size:3em; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; color:SaddleBrown; } a { color: Chocolate; text-shadow:6px 6px 6px #A0522D; }

W sekcji rozpoczynającej się od a { zdefiniowany został sposób wyświetlania linku. Czcionka ma kolor czekoladowy (color: Chocolate). Jej krój został zdefiniowany w sekcji body (font-family: "Gill Sans Extrabold", Helvetica, sans-serif;). Cień opisany jest wyrażeniem text-shadow:6px 6px 6px #A0522D. Na rysunku 2.43 pokazano okno przeglądarki po wczytaniu pliku 095.html. Rysunek 2.43. Tylko odsyłacz rzuca cień

142

CSS3. Zaawansowane projekty

Jeżeli cień zmniejsza czytelność dokumentu, ale nie chcemy rezygnować z trójwymiarowości, możemy dla prostokąta okalającego zdefiniować odsyłacz: body { background-color:Cornsilk; color:SaddleBrown; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; } h1{ font-size:3em; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; color:SaddleBrown; } a { color: Chocolate; box-shadow:3px 3px 6px 4px #A0522D; }

Na rysunku 2.44 pokazano efekt, jaki uzyskano po umieszczeniu odsyłacza w polu z cieniem. Rysunek 2.44. Tekst jest lepiej widoczny dzięki temu, że cień został od niego odsunięty

Pogrubienie Skoro znacznik może być wyróżniony za pomocą cienia, to czy znacznik również może być wyróżniony? Sprawdźmy! Oto plik HTML:

097



Rozdział 2.  Cienie

143

097

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Wewnątrz znacznika znajduje się tekst Lorem ipsum. Pozostał jeszcze kod CSS: body { background-color:Cornsilk; color:SaddleBrown; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; } h1{ font-size:3em; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; color:SaddleBrown; } b { color: Chocolate; text-shadow:4px 8px 16px #A0522D; }

Na rysunku 2.45 pokazano okno przeglądarki po wczytaniu do niej pliku 097.html. Rysunek 2.45. Do czcionki pogrubionej zostaje automatycznie dodany cień

Lista W identyczny sposób można dodać cień do listy. Oto plik HTML:

098

144

CSS3. Zaawansowane projekty



098

• Lorem ipsum.
• Dolor sit amet.
• Consectetur adipiscing elit.

Oto plik CSS: body { background-color:Cornsilk; color:SaddleBrown; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; } h1{ font-size:3em; font-family: "Gill Sans Extrabold", Helvetica, sans-serif; color:SaddleBrown; } ul { color: Chocolate; text-shadow:4px 8px 16px #A0522D; }

Oto efekt wyświetlenia pliku 098.html w oknie przeglądarki (rysunek 2.46). Rysunek 2.46. Trójwymiarowa lista nieuporządkowana

Rozdział 3.

Identyfikacja elementu Ten sam element może występować w dokumencie HTML wielokrotnie. Dużym ułatwieniem dla projektanta jest to, że gdy zajdzie potrzeba zmiany wyglądu strony, nie trzeba poprawiać kodu w każdym miejscu wystąpienia obiektu. Wystarczy poprawić definicję. Jeżeli chcemy umieścić element w jeszcze jednym miejscu, nie trzeba definiować od zera jego właściwości, ale wystarczy zastosować gotową definicję. Informacja o tym, gdzie i jaki element ma zostać wyświetlony, znajduje się w pliku HTML. Definicje wyglądu elementów znajdują się w pliku CSS. Jakie możliwości mamy do dyspozycji? Jest ich wiele: class, id, span, div i pseudoklasy.

3.1. Identyfikacja elementu poprzez class i id Selektor .class określa styl wszystkich elementów należących do podanej klasy. Ma on następującą składnię: .class { deklaracja css; }

Jak należy rozumieć zapis? Przed słowem .class należy napisać nazwę klasy elementów, których wygląd domyślny chcemy zmienić. Między nawiasami { i } trzeba wpisać wszystkie życzenia dotyczące wyglądu elementu. Oczywiście do wyrażenia życzeń stosować należy polecenia zgodne ze specyfikacją CSS. Jak to zastosować w praktyce? Już pokazuję.

146

CSS3. Zaawansowane projekty

Oto kod HTML prostej strony:

099



099

Lorem ipsum.

Dolor sit amet.

Consectetur adipiscing elit.

Tekst umieszczony jest pomiędzy znacznikami akapitu. Środkowy akapit zawiera znaną nam już specyfikację class. Nadana została jej nazwa uwaga. Aby się dowiedzieć, czym różni się ta klasa od reszty dokumentu, trzeba zajrzeć do kodu CSS. Oto on: body { background-color:DeepSkyBlue; color:Navy; font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; } h1{ color:DarkBlue; font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26.3999996185303px; } p.uwaga { background: LightCyan; }

Na końcu kodu widoczna jest specyfikacja. Dla klasy uwaga zdefiniowano tło w kolorze LightCyan. Na rysunku 3.1 można zobaczyć, jaki dało to efekt.

Rozdział 3.  Identyfikacja elementu

147

Rysunek 3.1. Akapit, dla którego zdefiniowano klasę, ma inny kolor tła

Załóżmy, że wykonujemy spis księgarni internetowych. Grupujemy je według tematyki książek. Plik HTML, który zawiera odpowiednie linki, ma postać:

100



100 Informatyka

• helion.pl
• informatyczna.pl
• empik.com

Biznes

• onepress.pl
• mtbiznes.pl
• empik.com

Za wygląd strony odpowiedzialny jest plik CSS: body { background-color:DeepSkyBlue; color:Navy; font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px;

148

CSS3. Zaawansowane projekty } h1{ color:DarkBlue; font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26.3999996185303px; } h2 { font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 15.3999996185303px; p.uwaga { background: LightCyan; }

Po wczytaniu pliku 100.html w oknie przeglądarki ujrzymy taki widok, jak pokazano to na rysunku 3.2. Rysunek 3.2. Odsyłacze do księgarni internetowych

Przejrzystość strony poprawi się wtedy, gdy odsyłacze będą wyświetlane na innym tle niż reszta informacji. Kolor tła będzie zależny od kategorii. Zmianę należy wprowadzić w pliku HTML:

101

Rozdział 3.  Identyfikacja elementu

149



101 Informatyka

• helion.pl
• informatyczna.pl
• empik.com

Biznes

• onepress.pl
• mtbiznes.pl
• empik.com

Jaka zmiana została wprowadzona? W odsyłaczach do księgarni informatycznych znajduje się kod class="inf", a w odsyłaczach do księgarni biznesowych kod class="biz". W ten sposób powstały dwa zbiory odsyłaczy. W kodzie CSS należy dodać specyfikację obu klas: a.inf { background: LightCyan; } a.biz { background: Aquamarine; }

Do każdej z klas przypisane zostało inne tło. Jaki da to rezultat po wyświetleniu dokumentu w oknie przeglądarki? Spójrzmy na rysunek 3.3. Rysunek 3.3. Przynależność linku do klasy zaowocowała wyróżnieniem go właściwościami przypisanymi do klasy. W pliku CSS dla każdej z nich określono odmienny kolor tła

150

CSS3. Zaawansowane projekty

Właściwości elementów, które należą do konkretnej klasy, definiuje się poprzez użycie .nazwyklasy w arkuszu stylów.

Definiując klasę, należy wskazać, jakiego obiektu ona dotyczy. Na przykład składnia: a.biz { background: Aquamarine; }

ma zastosowanie tylko do odsyłaczy. W przykładzie zastosowano wyróżnienie statyczne. Co zrobić, gdy chcemy, aby zmieniało się ono np. po naprowadzeniu myszy na element? Czy można spowodować, aby wyglądy linków różniły się od siebie w zależności od tego, czy strona została odwiedzona, czy nie? Tak! Możliwości takie stwarza CSS, gdyż pozwala posługiwać się pseudoklasami. Pseudoklasa ma następującą składnię: selector:pseudo-class { właściwość:wartość; }

Klasa wymaga zdefiniowania jej w pliku CSS i użycia w pliku HTML. Pseudoklasa natomiast odnosi się do znaczników HTML. W pliku CSS należy tylko opisać ich wygląd tudzież reakcję na zdarzenie.

Jak zastosować to w praktyce? Już pokazuję. Oto kod HTML prostej strony:

102



102 Informatyka

• helion.pl
• informatyczna.pl

Biznes

• onepress.pl
• mtbiznes.pl

Rozdział 3.  Identyfikacja elementu

Zawiera on tylko odsyłacze do stron. Oto kod CSS: body { background-color:DeepSkyBlue; color:Navy; font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; } h1{ color:DarkBlue; font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26.3999996185303px; } h2 { font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 15.3999996185303px; } /* link nieodwiedzony */ a:link { color: #FF0000; } /* link odwiedzony */ a:visited { color: #00FF00; } /* link wskazywany kursorem */ a:hover { color: #FF00FF; } /* link wskazywany kursorem i z wciśniętym lewym klawiszem myszy */ a:active { color: #0000FF; }

151

152

CSS3. Zaawansowane projekty

Każdy adres strony, który nie został jeszcze kliknięty (dokładniej: nie jest pamiętany w historii przeglądarki), wyświetlany jest w kolorze czerwonym (#FF0000). Każdy adres strony, który jest pamiętany w historii przeglądarki, wyświetlany jest w kolorze zielonym (#00FF00). Wskazanie linku kursorem powoduje zmianę koloru liter, za pomocą których link jest zapisany na #FF00FF. Gdy wskażemy odsyłacz kursorem, a następnie wciśniemy i przytrzymamy lewy klawisz myszy, wówczas link zostanie wyświetlony w kolorze niebieskim #0000FF. Na rysunku 3.4 pokazano plik 102.html po wyświetleniu go w oknie przeglądarki. Wszystkie adresy są pamiętane w historii przeglądarki. Ostatni adres został wskazany kursorem. Rysunek 3.4. Wystarczy zdefiniować wygląd tych pseudoklas, które już istnieją. Nie trzeba definiować nowych klas

Jak można zorientować się z analizy kodu CSS pliku 102.css, występują w nim znane nazwy elementów HTML. „Nowością” są tylko polecenia dotyczące wyglądu elementu. Czy możliwości, które stwarzają pseudoklasy, polegają jedynie na zmianie koloru linku? Nie! Jest ich więcej. Można np. spowodować, aby pierwsze wystąpienie elementu w akapicie było wyróżnione innym kolorem. Oto plik HTML:

103



103

Rozdział 3.  Identyfikacja elementu

153

Informatyka

helion.pl
informatyczna.pl

Biznes

onepress.pl
mtbiznes.pl

Pomiędzy znacznikami akapitu

i

umieszczone są odsyłacze. Wewnątrz akapitu podział na linie został uzyskany dzięki zastosowaniu znacznika końca linii. Oto plik CSS: body { background-color:DeepSkyBlue; color:Navy; font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; } h1{ color:DarkBlue; font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26.3999996185303px; } h2 { font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 15.3999996185303px; } a:first-child { color: red; }

Na jego końcu znajduje się polecenie wyświetlenia pierwszego wystąpienia odsyłacza w kolorze czerwonym. Na rysunku 3.5 pokazano wygląd okna przeglądarki po wczytaniu pliku 103.html.

154

CSS3. Zaawansowane projekty

Rysunek 3.5. Każdy pierwszy odsyłacz w akapicie jest wyróżniony kolorem czerwonym

Gdy do kodu strony HTML dodamy akapit, w którym będą wprawdzie występowały ciągi znaków, ale nie będą to odsyłacze:

104



104 Informatyka

helion.pl
informatyczna.pl

Biznes

onepress.pl
mtbiznes.pl

Tekst 1.
Tekst 2.

wówczas wyróżnienie kolorystyczne ich nie obejmie (rysunek 3.6). Rysunek 3.6. Miejsce po znaczniku

mówi o tym, który element jest pierwszy. Deklaracja a:first-child nakazuje przeglądarce zmienić kolor tylko pierwszego odsyłacza

Rozdział 3.  Identyfikacja elementu

155

Do czego jeszcze mogą być użyteczne pseudoklasy? Może nam się zamarzyć, że w dokumencie z tekstem będziemy wyróżniać słowa kluczowe czcionką pochyłą, zaś pierwsze wystąpienie w akapicie zostanie dodatkowo wyróżnione kolorem. Oto przydatny kod HTML:

105



105

Grupa Helion SA to wydawnictwo specjalistyczne, założone w 1991 w Gliwicach. Oferta Grupy Helion to publikacje z zakresu literatury informatycznej, biznesowej, beletrystyki, poradników (psychologicznych i ogólnotematycznych), a także przewodników turystycznych.

W akapicie występują dwa wyróżnienia tekstu czcionką pochyłą. Oto kod CSS, który sprawi między innymi, że pierwszy fragment tekstu wyróżniony w akapicie czcionką pochyłą będzie miał również inny kolor: body { background-color:Gold; color: IndianRed; font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; } h1 { font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif; font-size: 21px; font-style: bold; font-variant: normal; font-weight: 600; line-height: 30px; } p i:first-child { color: DarkRed; }

Na rysunku 3.7 pokazano okno przeglądarki po wczytaniu pliku 105.html.

156

CSS3. Zaawansowane projekty

Rysunek 3.7. Polecenie p i:first-child sprawia, że pierwsze wystąpienie w akapicie czcionki pochyłej jest wyróżnione kolorem DarkRed

Identyfikacja elementu poprzez id Kolejną możliwością grupowania elementów jest posłużenie się atrybutem id. Ma on następującą składnię: #id { deklaracja css; }

Jak to zastosować w praktyce? Już pokazuję. Oto kod HTML prostej strony:

106



106

Wiele osób poszukuje odpowiedzi na pytania, jak być pięknym zdrowym i bogatym. Zacznijmy od kwestii ostatniej.

Procent składany to rodzaj oprocentowania. Okresowy dochód z kapitału jest doliczany do kapitału i wraz z nim procentuje w okresie następnym.

Akapit drugi jest wyróżniony atrybutem id="podsumowanie". Został on wykorzystany w pliku CSS: body { background-color: Black; color: IndianRed; font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal;

Rozdział 3.  Identyfikacja elementu

157

font-weight: 400; line-height: 20px; } h1 { font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif; font-size: 21px; font-style: bold; font-variant: normal; font-weight: 600; line-height: 30px; } #podsumowanie { background-color: yellow; }

Identyfikatorowi przypisany został odmienny kolor tła background-color: yellow. Na rysunku 3.8 pokazano okno przeglądarki z wczytanym plikiem 106.html. Rysunek 3.8. Akapit z etykietą #podsumowanie ma tło w kolorze żółtym

3.2. Identyfikacja elementu poprzez span i div Niewielka zmiana w plikach HTML i CSS spowoduje, że wyróżniona będzie linijka, a nie cały akapit (rysunek 3.9). Rysunek 3.9. Wyróżnienie przypomina zaznaczenie tekstu markerem

158

CSS3. Zaawansowane projekty

Jakich zmian wymagało uzyskanie efektu pokazanego na rysunku 3.9? W pliku HTML tekst został umieszczony pomiędzy znacznikami : Wiele osób poszukuje odpowiedzi na pytania, jak być pięknym, zdrowym i bogatym. Zacznijmy od kwestii ostatniej. Procent składany to rodzaj oprocentowania. Okresowy dochód z kapitału jest doliczany do kapitału i wraz z nim procentuje w okresie następnym.

Fragment wyróżniony podkreśleniem dodatkowo ma etykietę id="podsumowanie". Jej wygląd został zdefiniowany w pliku CSS: span#podsumowanie { background-color: yellow; }

Znacznik nie spowoduje przejścia tekstu do nowej linii.

Stosując znacznik , można spowodować, że wyróżnione będą tylko litery i znaki interpunkcyjne, zaś spacje nie (rysunek 3.10). Rysunek 3.10. Zmiana została wprowadzona tym razem tylko w pliku HTML

Oto jak wygląda plik HTML po zmianie:

108



108 Wiele osób poszukuje odpowiedzi na pytania, jak być pięknym, zdrowym i bogatym. Zacznijmy od kwestii ostatniej. Procent składany to rodzaj oprocentowania . Okresowy dochód z kapitału jest doliczany do kapitału i wraz z nim procentuje w okresie następnym .

Znacznik jest neutralny. Dodanie go do dokumentu nie zmienia treści, ale umożliwia zmianę wyglądu. Element przeznaczony jest do stosowania w obrębie elementów blokowych. Element stosowany jest do grupowania co najmniej jednego elementu blokowego. Poznajmy te możliwości na przykładzie praktycznym. Zrobimy spis witamin z podziałem na rozpuszczalne w wodzie i rozpuszczalne w tłuszczach. Witaminy rozpuszczalne w wodzie będą wyświetlane na tle w kolorze niebieskim. Witaminy rozpuszczalne w tłuszczach będą wyświetlane na tle w kolorze czerwonym.

109



109 Witaminy rozpuszczalne w wodzie

• Witamina B1.
• Witamina B2.
• witamina B3.
• Witamina B5.
• Witamina B6.
• Witamina B9.
• Witamina B12.
• Witamina H.

Witaminy rozpuszczalne w tłuszczach

• Witamina A.
• Witamina D.
• Witamina E.
• Witamina K.

160

CSS3. Zaawansowane projekty

W kodzie strony widać dwie sekcje . Jedna z nich ma identyfikator vit_water, a druga vit_fat. Znaczenie zostało nadane identyfikatorom w pliku CSS: body { background-color: Black; color: Yellow; font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; } h1 { font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif; font-size: 21px; font-style: bold; font-variant: normal; font-weight: 600; line-height: 30px; } h2 { font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif; font-size: 18px; font-style: bold; font-variant: normal; font-weight: 600; line-height: 30px; } #vit_water { background:blue; } #vit_fat { background:red; }

W sekcji objętej identyfikatorem vit_water tło jest niebieskie (background:blue). W sekcji objętej identyfikatorem vit_fat tło jest czerwone (background:red). Jak wygląda plik 109.htm w oknie przeglądarki, można zobaczyć na rysunku 3.11.

Rozdział 3.  Identyfikacja elementu Rysunek 3.11. Przykład zastosowania znacznika do grupowania elementów blokowych

161

162

CSS3. Zaawansowane projekty

Rozdział 4.

Kolory

4.1. Odcień, nasycenie i jasność Kolory mogą być definiowane przez nazwę, przez wartość RGB lub mogą być szesnastkowe. CSS pozwala na uzyskiwanie dodatkowych efektów graficznych dzięki stosowaniu do opisu wyglądu obszaru barwy, nasycenia, jasności oraz przezroczystości. W ten sposób powstały standardy zapisu HSL oraz RGBa. Tajemnicza litera a oznacza przezroczystość. Może ona zostać dodana do opisu takich wartości, jak: color, background-color, border-color lub box-shadow.

Przezroczystość alfa Projektantom stron internetowych RGBa stwarza nowe możliwości. Pozwala uzyskiwać przezroczystość obiektu lub tekstu. Im większa przezroczystość obiektu, tym lepiej widoczne będą elementy, które są pod nim. Sprawdźmy, jakie można uzyskać efekty praktyczne. Oto kod HTML:

110



110

To jest tekst akapitowy.

164

CSS3. Zaawansowane projekty

Zawiera on nagłówek i tekst akapitowy. Oto kod CSS: body { background-color: White; color: Black; font-family: Verdana, Geneva, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26px; } h1 { padding: 50px; background-image: url(ranibow.jpg); color: rgba(0,0,0,0.2); }

W sekcji h1 znajduje się zapis background-image: url(ranibow.jpg). Tekst nagłówka jest w kolorze czarnym. Informują o tym cztery zerowe składowe kolorów RGB. Nagłówek ma krycie wynoszące 0,2. Jaki to daje efekt? Opisać jest trudniej, prościej spojrzeć na rysunek 4.1. Rysunek 4.1. Nagłówek w kolorze czarnym, ale z przezroczystością wynoszącą 80%

Sprawdźmy, jak na wygląd strony wpłynie zmniejszenie przezroczystości o połowę, czyli do 40% (rysunek 4.2). Gdy przezroczystość spadnie do 20%, tło będzie ledwie prześwitywało (rysunek 4.3).

Rozdział 4.  Kolory

165

Rysunek 4.2. Napis uzyskano przy zestawie parametrów color: rgba(0,0,0,0.4). Tło mniej prześwituje przez niego niż na rysunku 4.1

Rysunek 4.3. Teraz to tło ledwie prześwituje przez nagłówek. Nic dziwnego. Widać przez niego zaledwie 20% tła

Standardowa wartość rgb (0,0,0) powoduje, że nagłówek będzie w kolorze czystej czerni. Czwarta wartość ustawia poziom przejrzystości. 1 oznacza, że element jest całkowicie nieprzezroczysty, natomiast 0 powoduje, że jest całkowicie przezroczysty. Zapis rgba(0,0,0,0.8) oznacza, że składowe kolorów: czerwonego, zielonego i niebieskiego wynoszą 0. Współczynnik alfa = 0.8. W sumie więc uzyskujemy kolor w 80% czarny.

Efekt uzyskiwany dzięki wykorzystaniu przezroczystości alfa stosuje się nie tylko do tekstu. Można oczywiście przezroczysty kolor tła zastosować do całego obiektu. Innymi słowy, wszędzie tam, gdzie stosowany jest model RGB, można również zastosować RGBa.

Odcień, nasycenie i jaskrawość Kolory widoczne na ekranie komputera są kombinacją kolorów czerwonego, zielonego i niebieskiego. Zawartość składowych może być określona za pomocą liczb szesnastkowych lub bezpośrednio nazw kolorów.

166

CSS3. Zaawansowane projekty

Rzeczywistość jest nieco bardziej skomplikowana, ale i bogatsza. Model HSL (Hue — odcień, Saturation — nasycenie, Lightness — jaskrawość) daje możliwość kontroli nad odcieniami, a nie tylko nad składnikami logicznymi. Jak wygląda zapis koloru w standardzie HSL? Na przykład tak: hsl(36, 100%, 50%)

Co on oznacza? Już tłumaczę. Pierwsza liczba określa odcień, druga nasycenie, a trzecia jaskrawość. Zatem:  36 — oznacza kąt na kole kolorów. Może on przyjmować wartości z przedziału

od 0 do 360. Zeru i 360 stopniom odpowiada kolor czerwony. 120 stopniom odpowiada kolor zielony. 240 stopniom odpowiada kolor niebieski.  100% — oznacza nasycenie. Może ono przyjmować wartości z przedziału od

0% do 100%. Wartości 0% odpowiada brak kolorów, czyli szarość. Wartości 100% odpowiada maksymalna intensywność koloru.  50% — oznacza jaskrawość. Może ona przyjmować wartości z przedziału od

0% do 100%. Wartości 0% odpowiada czerń. Wartości 100% odpowiada biel. 50% to wartość normalna. Jak wygląda kolor hsl(36, 100%, 50%)? Oto kod HTML:

113



113

To jest tekst akapitowy.

Oto kod CSS: body { background-color: White; color: Black; font-family: Verdana, Geneva, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26px; } #kolor1 { color: hsl(36, 100%, 50%) }

Rozdział 4.  Kolory

167

Na rysunku 4.4. pokazano plik 113.htm po wyświetleniu w oknie przeglądarki. Rysunek 4.4. Tekst akapitowy w kolorze pomarańczowym

Gdy w kodzie CSS zastąpimy #kolor1 { color: hsl(36, 100%, 50%) }

przez #kolor1 {background-color: hsl(36, 100%, 50%) }

pomarańczowy będzie nie tekst, a jego tło (rysunek 4.5). Rysunek 4.5. Tło w kolorze pomarańczowym. Można je uzyskać również w innych standardach. Jego odpowiednikami w zapisie szesnastkowym są #ff9900 oraz #f90, zaś w notacji RGB — rgb(255, 153, 0)

Odcień, nasycenie, jaskrawość i przezroczystość Uzupełnienie modelu HSL o parametr odpowiedzialny za przezroczystość powoduje, że możliwości tworzenia kolorów wzrastają. Zapis HSLa (Hue — odcień, Saturation — nasycenie, Lightness — jaskrawość, alpha — współczynnik alfa) daje możliwość kontroli nad przezroczystością obiektu. Parametr alpha może przyjmować wartości od 0.0 (pełna przezroczystość) do 1.0 (pełne krycie). Jak wygląda zapis koloru w standardzie HSLa? Na przykład tak: hsla(0, 75%, 75%, 0.5)

Co on oznacza? Już tłumaczę.  0 — oznacza kąt na kole kolorów. Może on przyjmować wartości z przedziału

od 0 do 360. Zeru i 360 stopniom odpowiada kolor czerwony. 120 stopniom odpowiada kolor zielony. 240 stopniom odpowiada kolor niebieski.

168

CSS3. Zaawansowane projekty  75% — oznacza nasycenie. Może ono przyjmować wartości z przedziału od

0% do 100%. Wartości 0% odpowiada brak kolorów, czyli szarość. Wartości 100% odpowiada maksymalna intensywność.  75% — oznacza jaskrawość. Może ona przyjmować wartości z przedziału od

0% do 100%. Wartości 0% odpowiada czerń. Wartości 100% odpowiada biel. 50% to wartość normalna.  0.5 — oznacza przezroczystość.

Jak wygląda kolor hsla(0, 75%, 75%, 0.5)? Oto kod HTML:

115



115

To jest tekst akapitowy.

Oto kod CSS: body { background-color: White; color: Black; font-family: Verdana, Geneva, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26px; } #kolor1 {background-color: hsla(0, 75%, 75%, 0.5) }

Na rysunku 4.6 można zobaczyć, jak wygląda kolor hsla(0, 75%, 75%, 0.5). Rysunek 4.6. Tekst akapitowy ma tło z kolorem o przejrzystości 0,5

Na rysunku 4.7 można zobaczyć, jaki wpływ na wygląd koloru miało zmniejszenie współczynnika przezroczystości do 0,2.

Rozdział 4.  Kolory

169

Rysunek 4.7. Im współczynnik alfa jest mniejszy, tym kolor słabiej widoczny

4.2. Gradienty Obrazy, w których jeden kolor płynnie przechodzi w inny, są bardzo często spotykane w internecie. W większości są to pliki graficzne. Im lepszą reprezentują jakość, tym większa jest ich objętość. CSS pozwala uzyskać gradient za pomocą samego polecenia. Okazuje się, że nie ma specjalnej właściwości, która służyłaby do generowania gradientów. Wystarczy posłużenie się właściwością background lub background-image.

Gradienty liniowe Aby uzyskać równomierne rozłożenie kolorów od góry do dołu, należy posłużyć się deklaracją linear-gradient. Podsumuj więc uzyskane informacje. Chcemy uzyskać kolor tła, który będzie zmieniał się liniowo w pionie od koloru pomarańczowego do czerwonego. Musimy użyć deklaracji: background: linear-gradient(orange, red);

Oto kod HTML:

117



117

To jest tekst akapitowy.

170

CSS3. Zaawansowane projekty

Oto kod CSS: body { background: linear-gradient(orange, red); color: Black; font-family: Verdana, Geneva, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26px; }

Na rysunku 4.8 można zobaczyć okno przeglądarki po wczytaniu pliku 117.htm. Rysunek 4.8. Gradient linear-gradient(orange, red) zaczyna się od koloru pomarańczowego na górze, a kończy się kolorem czerwonym na dole

Co się stanie, gdy rozciągniemy okno w pionie (rysunek 4.9)? Rysunek 4.9. Gradient zaczyna się i kończy równo z tekstem. Gdy okno będzie rozciągnięte, gradient zostanie powielony, aby wypełnić przestrzeń

Rozdział 4.  Kolory

171

Wykonajmy doświadczenie. Każdy z wyrazów tekstu akapitowego zapisany zostanie w innym akapicie. Na rysunku 4.10 można zobaczyć, jaki to wywarło wpływ na wygląd dokumentu. Rysunek 4.10. Gradient obejmuje cały dokument. Tam, gdzie kończy się treść, kończy się i metamorfoza kolorów. Pozostała część okna zostaje zapełniona gradientem o rozkładzie ustalonym przez obszar z tekstem

Czy kąt, pod jakim przebiega metamorfoza kolorów, można zmieniać? Tak! Do dyspozycji są słowa zmieniające kierunek z domyślnego na narzucony: left (rysunek 4.11) oraz right (rysunek 4.12). Rysunek 4.11. Rezultat użycia polecenia background: linear-gradient(to left, orange, red);

172

CSS3. Zaawansowane projekty

Rysunek 4.12. Rezultat użycia polecenia background: linear-gradient(to right, orange, red);

Możliwe są również połączenia parametrów (rysunek 4.13). Rysunek 4.13. Rezultat użycia polecenia background: linear-gradient(to bottom right, orange, red)

Jeżeli zachodzi potrzeba uzyskania gradientu, który będzie biegł pod określonym kątem, można wpisać jego wartość liczbową (rysunek 4.14).

Rozdział 4.  Kolory

173

Rysunek 4.14. Rezultat użycia polecenia background: background: linear-gradient(280deg, orange, red);

Na rysunkach od 4.8 do 4.14 używane były gradienty dwukolorowe. Czy istnieje ograniczenie co do liczby kolorów? Nie. Prędzej zbuntuje się wzrok obserwatora, niż pojawi się ograniczenie co do liczby kolorów występujących w gradiencie. Oto kod HTML:

123



123

To

jest

tekst

akapitowy.

Oto kod CSS: body { background: linear-gradient (#F80000,#FFFF00,#99FF00,#99FFFF,#3300FF,#FF66FF); color: Black; font-family: Verdana, Geneva, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26px; }

Na rysunku 4.15 można zapoznać się z wyglądem okna przeglądarki po wczytaniu pliku 123.htm.

174

CSS3. Zaawansowane projekty

Rysunek 4.15. Gradient tęczowy

Gradienty promieniowe Gradient promieniowy (zwany także promienistym) rozpoczyna się od jednego koloru w punkcie wyjścia i przechodzi do drugiego. Domyślnie punktem wyjścia jest środek dokumentu. Oto kod HTML:

124



124

To

jest

tekst

akapitowy.

Oto kod CSS: body { background: radial-gradient(red, orange); color: Black; font-family: Verdana, Geneva, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26px; }

Rozdział 4.  Kolory

175

Na rysunku 4.16 pokazano okno przeglądarki po wczytaniu dokumentu zawierającego oba pliki. Rysunek 4.16. Wypełnienie promieniowe zostało uzyskane po zastosowaniu kodu background: radial-gradient(red, orange);

Domyślnie gradient ma kształt elipsy. Gdy okno zmienia kształt — wraz z nim przemieszcza się wypełnienie (rysunek 4.17). Rysunek 4.17. Wypełnienie domyślnie dostosowuje swoje rozmiary i kształt do dokumentu

Jeżeli chcemy nadać wypełnieniu kształt niezależny od rozmiarów okna, należy użyć tajemniczego „zaklęcia”. Zaklęciem, które nadaje wypełnieniu kształt okrągły, jest circle (rysunek 4.18).

176

CSS3. Zaawansowane projekty

Rysunek 4.18. W kodzie CSS dodane zostało słowo circle. Specyfikacja w pokazanym na rysunku pliku ma postać background: radial-gradient(circle, red, orange);

Kształt jest tym, co odróżnia wypełnienie gradientowe od liniowego. Stosując wypełnienie w kształcie elipsy, można podać parametr closest-side. Oznacza on, że gradient będzie się rozchodził do najbliższej krawędzi elementu. Jeżeli więc obszar będzie miał małą wysokość, ale dużą szerokość, wypełnienie po dotarciu do krawędzi poziomej nie będzie się dalej rozlewać na obszar (rysunek 4.19). Rysunek 4.19. Dzięki zapisowi background: radial-gradient(circle closest-side, red, orange); wypełnienie rozchodzi się promieniowo. Po napotkaniu najbliższej krawędzi metamorfoza kolorów zatrzymuje się

Inne działanie ma polecenie farthest-side. Wymusza ono wypełnienie gradientem obszaru do najdalszej granicy (rysunek 4.20).

Rozdział 4.  Kolory

177

Rysunek 4.20. Dzięki zapisowi background: radial-gradient(circle farthest-side, red, orange); wypełnienie rozchodzi się promieniowo i rozciąga się do najdalszej granicy obszaru

Gradienty rozchodzące się od narożnika Podając kombinację góra – dół i lewy – prawy, można zażądać, aby metamorfoza kolorów biegła w kierunku narożnika okna przeglądarki. Rozwiązanie jest wygodne o tyle, że tekst, który zazwyczaj zaczyna się od lewego marginesu, można wyeksponować, a prawa strona okna może służyć upiększeniu dokumentu. Oto kod HTML:

128



128

To

jest

tekst

akapitowy.

Oto kod CSS: body { background: radial-gradient(at top right, red, orange); color: Black; font-family: Verdana, Geneva, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26px; }

178

CSS3. Zaawansowane projekty

Na rysunku 4.21 pokazano, jak wygląda dokument z „przydymionym” prawym górnym narożnikiem okna. Rysunek 4.21. Podając w specyfikacji wypełnienia nazwę krawędzi poziomej i pionowej, możemy spowodować, że metamorfoza kolorów będzie biegła po przekątnej okna. Tutaj widać działanie polecenia background: radial-gradient(at top right, red, orange);

Wystarczy zmiana jednego parametru w pliku CSS i metamorfoza kolorów biegnie wzdłuż innej przekątnej (rysunek 4.22). Rysunek 4.22. Działanie polecenia background: radial-gradient(at bottom right, red, orange);

Czy pierwszy kolor w definicji gradientu ma znaleźć się w lewym dolnym rogu? Nie ma z tym najmniejszego problemu (rysunek 4.23). Co jeszcze pozostało? Oczywiście lewy górny narożnik (rysunek 4.24).

Rozdział 4.  Kolory

179

Rysunek 4.23. Działanie polecenia background: radial-gradient(at bottom left, red, orange);

Rysunek 4.24. Działanie polecenia background: radial-gradient(at top left, red, orange);

Gradienty wielokolorowe Czy gradient liniowy lub promieniowy musi być jedynie dwubarwny? Nie. Można użyć większej liczby kolorów. Oto kod HTML:

132



132

To

jest

tekst

akapitowy.

180

CSS3. Zaawansowane projekty

Oto kod CSS: body { background: radial-gradient(at top left, red, green, blue, black); color: Lime; font-family: Verdana, Geneva, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26px; }

Na rysunku 4.25 pokazano wygląd okna przeglądarki po wczytaniu pliku 132.htm. Rysunek 4.25. Mieniące się kolorami tło nie wymagało użycia obrazka

Pojedynczy gradient wypełnia pole. Ciekawe efekty można uzyskać, powtarzając gradient (rysunek 4.26). Rysunek 4.26. Siding? Nie. To tylko rezultat użycia polecenia background: repeatinglinear-gradient(white, gray 20px, silver 20px);

Rozdział 4.  Kolory

181

Podobnie można wypełnić obszar gradientem promieniowym (rysunek 4.27). Rysunek 4.27. W pliku CSS pojawia się polecenie background: repeating-radialgradient(black, gray, silver, white 20px), a tłem stają się trójwymiarowe elipsy

4.3. Ciągła zmiana jednolitego koloru tła Efekty kolorystyczne, jakie pozwala uzyskać CSS, są zachwycające. Można nie poprzestać na kolorach statycznych. Zmiana może zachodzić w funkcji czasu. Jak to zrobić? Po pierwsze, w kodzie HTML trzeba zdefiniować obiekt, który będzie animowany. Po drugie, w kodzie CSS trzeba określić, co będzie animowane, w jakim czasie, ile razy itp. Do tego celu najlepiej nadaje się właściwość animation. Pełni ona rolę „motoru” napędzającego. Po trzecie, należy określić, od jakiego stanu animacja się zacznie, na jakim stanie się zakończy i jak długo będą trwały poszczególne etapy. Do tego celu idealna jest @keyframes. Cóż jeszcze pozostaje? Tylko wdrożyć pomysł w życie. Oto kod HTML:

135



182

CSS3. Zaawansowane projekty

135 Tło elementu jest animowane.

Pełni on rolę szkieletu, do którego przymocowany zostanie animowany neon. Animowany obszar umieszczony jest między znacznikami . Elementy decydujące o wyglądzie strony zapisane są w pliku CSS: body { background: silver; color: gray; font-family: Verdana, Geneva, sans-serif; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26px; } div { text-align:center; padding:10px 10px; animation:animacja_tla 10s infinite; -webkit-animation:animacja_tla 10s infinite; /* Google Chrome, Safari, Opera 15+ */ } @keyframes animacja_tla { 0% { background-color:Gainsboro; } 25% { background-color:Silver; } 50% { background-color:DarkGray; } 75% { background-color:LightSlateGray; } 100% { background-color:Gainsboro; } } @-webkit-keyframes animacja_tla /* Google Chrome, Safari, Opera 15+ */ { 0% { background-color:Gainsboro; } 25% { background-color:Silver; } 50% { background-color:DarkGray; } 75% { background-color:LightSlateGray; } 100% { background-color:Gainsboro; } }

Wewnątrz obszaru tekst jest wyśrodkowany. Sprawia to polecenie text-align:center. Domyślnie tło będzie tylko w tych miejscach, w których znajduje się tekst. Chcemy je nieco wyeksponować, np. przez zwiększenie rozmiaru tła. Jest to możliwe dzięki poleceniu padding:10px 10px. Określa ono przestrzeń wokół elementów. W tym przypadku jest to element . Podane zostały dwie wartości. Pierwsza określa odległość od góry elementu, zaś druga odległość od krawędzi lewej i prawej.

Rozdział 4.  Kolory

183

Polecenie animation:animacja_tla 10s infinite nadaje nazwę animacji (animacja_tla), określa czas jej wykonania (10s) oraz liczbę powtórzeń (infinite — nieskończona). Definicja animacji animacja_tla następuje po słowie @keyframes. Zdefiniowanych zostało pięć stanów opisujących odpowiednio: 0%, 25%, 50%, 75% i 100% zaawansowania. Jak dobrać kolory, które kolejno ma przyjmować tło? Aż kusi, aby zajrzeć na stronę http://pl.wikipedia.org/wiki/Kolory_w_Internecie, odszukać zestaw kolorów i wpisać je kolejno (rysunek 4.28). Rysunek 4.28. Wpisanie kolorów po kolei spowoduje, że po zakończeniu pętli nastąpi przejście od koloru najciemniejszego do najjaśniejszego, co może spowodować nieprzyjemne wrażenie

Lepiej utworzyć pętlę, w której różnica między kolorami tła nie będzie dokuczliwa dla wzroku obserwatora. Na rysunku 4.29 można zobaczyć okno przeglądarki po wczytaniu pliku 135.htm. Rysunek 4.29. Niestety, statyczny obrazek nie oddaje tego, co w animacji jest najważniejsze…

184

CSS3. Zaawansowane projekty

Rozdział 5.

Nawigacja Przywykliśmy do tego, że łącze jest podkreślone i ma kolor niebieski (rysunek 5.1). Po wskazaniu odsyłacza kursorem zmienia on kształt ze strzałki na dłoń (rysunek 5.2), natomiast odwiedzone łącze zmienia kolor. Rysunek 5.1. Okno z łączami

Rysunek 5.2. Adres pierwszy od prawej pamięta historia przeglądarki. Drugi został wskazany kursorem

Hm… w dobie interaktywnych serwisów WWW to trochę mało. Czy można uatrakcyjnić wygląd i reakcję odsyłaczy na wskazanie kursorem? Tak! Rozwiązania problemu należy szukać w możliwościach, jakie oferuje CSS.

186

CSS3. Zaawansowane projekty

5.1. Nietypowe podkreślenia hiperłączy CSS pozwala na zmianę wielu właściwości odsyłacza (koloru, rodziny czcionki, tła itp.). Dodatkowo wygląd linku może zależeć od stanu, w jakim on się znajduje. W ilu stanach może być odsyłacz? Zasadniczo w czterech:  a:link — link nie został odwiedzony.  a:visited — link został odwiedzony.  a:hover — link jest wskazywany przez kursor.  a:active — link jest wskazywany przez kursor i został wciśnięty lewy

przycisk myszy. Jak można wykorzystać praktycznie te informacje? Już pokazuję. Oto kod HTML:

137



137 helion.pl onepress.pl sensus.pl septem.pl

Niewiele z niego jednak wynika. Jedyne, co mogłoby sugerować, że właściwości dokumentu zostały zmienione, to odsyłacz do pliku CSS. Oto, co on zawiera: body { background: white; color: black; } a:link { color: #F00; } a:visited { color: #FFF;

Rozdział 5.  Nawigacja

187

} a:hover { color: #0F0; } a:active { color: #00F; }

W sekcji body zdefiniowane zostały białe tło strony (background: white) oraz czarny kolor tekstu (color: black). Dla każdego ze stanów odsyłacza zdefiniowany został inny kolor. Link, który nie został odwiedzony (a:link), ma kolor czerwony (color: #F00). Link, który został odwiedzony (a:visited), ma kolor biały (color: #FFF), czyli wtapia się w tło. Link, który jest wskazywany przez kursor (a:hover), ma kolor zielony (color: #0F0). Kolor linku, który został wskazywany przez kursor i przy wciśniętym lewym przycisku myszy (a:active), jest niebieski (color: #00F). W definicji stylów odsyłaczy a:hover musi występować po a:link i a:visited, zaś a:active musi występować po a:hover.

Na rysunku 5.3 można zobaczyć, jak dokument HTML wygląda po wyświetleniu w oknie przeglądarki. Rysunek 5.3. Adresy, których nie ma w historii przeglądania, mają kolor czerwony. Odsyłacz wskazany kursorem jest zielony. Link, w którym odsyłacz wskazany został kursorem, jest zielony. Link, który został kliknięty, „zniknął”

Czy jedynie zmiana koloru odsyłacza jest możliwa? Ależ skąd! Chcąc opisać wygląd odsyłaczy w poszczególnych stanach, można czerpać pełnymi garściami z możliwości, jakie oferuje CSS. Oto plik CSS, który daje nieco większe możliwości: body { background: white; color: black; } h1 { font-family: Verdana, Geneva, sans-serif; font-size: 48px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26px; }

188

CSS3. Zaawansowane projekty a { font-family: Verdana, Geneva, sans-serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 380; line-height: 20px; } a:link { color: #F00; } a:visited { color: #FFF; } a:hover { color: #0F0; font-size: 24px; font-weight: 500; line-height: 40px; } a:active { color: #00F; font-size: 24px; font-weight: 500; line-height: 40px; font-style: italic; }

W sekcji h1 podano parametry, które zastąpiły domyślny wygląd nagłówka. W sekcji a podano parametry, które mają zastosowanie do wszystkich łączy i są niezależne od ich stanu. Link, który został wskazany kursorem, jest wyświetlany w kolorze zielonym czcionką o parametrach font-size: 24px; font-weight: 500; line-height: 40px;. Link, który wskazano i jednocześnie naciśnięto lewy klawisz myszy, jest wyświetlany w kolorze niebieskim i czcionką pochyłą (font-style: italic). Na rysunku 5.4 można zobaczyć rezultat. Rysunek 5.4. Odsyłacz po wskazaniu kursorem oraz wciśnięciu lewego przycisku myszy został wyświetlony czcionką większą, pochyłą i w kolorze niebieskim

Rozdział 5.  Nawigacja

189

Czy odsyłacz zawsze musi być podkreślony? Jeżeli użyjemy „magicznego” zaklęcia CSS, to nie. Zaklęcie to ma składnię: text-decoration: none|underline|overline|line-through|initial|inherit;

gdzie:  none — wygląd domyślny,  underline — podkreślenie,  overline — nadkreślenie,  line-through — przekreślenie,  initial — przywrócenie wartości domyślnych,  inherit — dziedziczenie właściwości z obiektu nadrzędnego.

Oto plik, w którym wyświetlanie odsyłaczy zdefiniowano wprawdzie bez podkreślenia, ale za to za pomocą innych ciekawych opcji położenia linii względem tekstu: body { background: white; color: black; } h1 { font-family: Verdana, Geneva, sans-serif; font-size: 48px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26px; } a { font-family: Verdana, Geneva, sans-serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 380; line-height: 20px; } a:link { color: #F00; text-decoration: none; } a:visited { color: #FFF; text-decoration: none; } a:hover { color: #0F0; font-size: 24px; font-weight: 500; line-height: 40px; text-decoration: overline; } a:active { color: #00F; font-size: 24px; font-weight: 500; line-height: 40px; font-style: italic; text-decoration: line-through; }

190

CSS3. Zaawansowane projekty

Na rysunkach od 5.5 do 5.7 można sprawdzić, jaki efekt dało użycie właściwości text-decoration. Rysunek 5.5. Za sprawą deklaracji text-decoration: none; odsyłacz i odsyłacz odwiedzony wyświetlane są bez podkreślenia

Rysunek 5.6. Za sprawą deklaracji text-decoration: overline; odsyłacz wskazywany kursorem wyświetlany jest z nadkreśleniem

Rysunek 5.7. Za sprawą deklaracji text-decoration: line-through; odsyłacz wskazywany kursorem po wciśnięciu lewego przycisku myszy wyświetlany jest z przekreśleniem

Myślę, że masz już wyobrażenie na temat tego, co można uzyskać, zastępując w pliku CSS właściwość text-decoration przez background-color, font-size, font-family itp.

5.2. Menu pionowe zmieniające kolor po najechaniu kursorem Skoro już wiemy, jak zmienić wygląd odsyłacza i co zrobić, aby naprowadzenie kursora na link spowodowało reakcję, możemy pokusić się o zaprojektowanie menu.

Rozdział 5.  Nawigacja

191

Przykład z menu pionowym rozwijanym również należy zacząć od przygotowania pliku HTML. Musi on zawierać listę wyliczeniową zagnieżdżoną, której elementy będą łączami do podstron:

140



140

• Link pierwszy
  • pierwszy a
  • pierwszy b
  • pierwszy c
• Link drugi
  • drugi a
  • drugi b
  • drugi c
• Link trzeci
  • trzeci a
  • trzeci b
    • trzeci b1
    • trzeci b2
  • trzeci c
  • trzeci d
    • trzeci d1
    • trzeci d2
    • trzeci d3

Myślę, że łatwiej będzie zorientować się w strukturze dokumentu HTML, jeśli zostanie on wyświetlony w oknie przeglądarki bez formatowania narzuconego przez plik CSS (rysunek 5.8).

192

CSS3. Zaawansowane projekty

Rysunek 5.8. Spojrzenie na kod strony HTML i postać dokumentu widoczną w oknie przeglądarki pozwala lepiej zorientować się w jego strukturze. Takie menu jest jednak mało funkcjonalne

Dopełnieniem dokumentu 140.htm jest plik 140.css: body { background: silver; color: black; } h1 { font-family: Verdana, Geneva, sans-serif; font-size: 48px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26px; } a { font-family: Verdana, Geneva, sans-serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 380; line-height: 20px; } ul { float: left; width: 160px; background: #00eeee; margin: -1px 0 0 -1px; } ul { margin: 0; padding: 0; width: 160px; background-color: #eee; border: 1px solid #000; }

Rozdział 5.  Nawigacja li { position: relative; list-style: none; margin: 0; border-bottom: 1px solid #000; } ul ul { position: absolute; top: 0; left: 160px; display: none } li.submenu { background: url(strzalka.gif) 98% 50% no-repeat; } li a:link, li a:visited { display: block; padding: 5px; text-decoration: none; width: 160px; color: #050; } ul a:link, ul a:visited { width: auto; color: #050; } li:hover { background-color: gray; color: #ff00ff; text-decoration: underline; } li.submenu:hover { background-color: gray; color: gray; } ul.poziom_1 li.submenu:hover ul.poziom_2 { display: block; color: gray; } ul.poziom_2 li.submenu:hover ul.poziom_3 { display: block; color: gray; }

193

194

CSS3. Zaawansowane projekty

Dlaczego uważam, że plik 140.css jest dopełnieniem pliku 140.htm? Dlatego, że nadaje mu on zupełnie inny wygląd i zwiększa funkcjonalność (rysunki 5.9 i 5.10). Rysunek 5.9. Plik 140.htm sformatowany przy wykorzystaniu pliku 140.css

Rysunek 5.10. Menu hierarchiczne rozwijane w zależności od potrzeb oszczędza miejsce na stronie i ułatwia dostęp do informacji

Wiemy już, dlaczego został użyty plik CSS. Teraz trzeba jeszcze wyjaśnić, jak uzyskano efekt pokazany na rysunkach 5.9 i 5.10. W sekcji body zdefiniowano kolor tła strony (background: silver) oraz kolor czcionki (color: black). W sekcjach h1 oraz a określono wygląd czcionki, za pomocą której wyświetlany jest nagłówek oraz odsyłacze. Jest to nieco za mało w stosunku do typowej strony WWW, która zawiera jeszcze zazwyczaj tekst akapitowy. Na potrzeby przykładu uproszczenie to jest jednak wystarczające.

Rozdział 5.  Nawigacja

195

W pierwszej sekcji ul zdefiniowano margines pionowy, do którego dosunięte zostało menu. W przykładzie jest to margines lewy (float: left). W sekcji ul zdefiniowany jest wygląd wnętrza ramek, w których wyświetlane jest menu pierwszego stopnia. W sekcji li zdefiniowany jest wygląd ramek, w których wyświetlane jest menu pierwszego stopnia. W sekcji ul określone są parametry menu drugiego poziomu. Jest ono odsunięte od marginesu lewego o szerokość pierwszego menu, czyli o 160 pikseli. Dzięki klasie submenu przy pozycjach, które można rozwinąć, widoczne są strzałki skierowane w prawo. Strzałka jest tłem obszaru. Dosunięta jest do prawego marginesu tak, że pozostaje tylko 2% wolnej przestrzeni. W każdej komórce znajduje się ona w połowie wysokości (50%). Skąd wiadomo, że do menu jest dołączone menu szczegółowe i że powinna być wyświetlona strzałka? Tak mądrze ustalił to programista, który w kodzie HTML umieścił ciąg znaków class="submenu". W sekcjach li a:link, li a:visited oraz ul a:link, ul a:visited zdefiniowany został wygląd linków i linków odwiedzonych. W sekcjach li:hover oraz li.submenu:hover określony został wygląd odsyłaczy, które zostaną wskazane kursorem. W sekcjach ul.poziom_1

li.submenu:hover ul.poziom_2 oraz ul.poziom_2 li.submenu:hover ul.poziom_3 zdefiniowany został wygląd szczegółowego menu

poziomów 2. i 3.

5.3. Menu poziome zmieniające kolor po najechaniu kursorem W poprzednim podrozdziale szlaki zostały przetarte. Zaprojektowane i przetestowane zostało menu pionowe. Modyfikując pliki, stworzymy menu poziome. Oto plik HTML:

141



196

CSS3. Zaawansowane projekty

141

• Link pierwszy
  • pierwszy a
  • pierwszy b
  • pierwszy c
• Link drugi
  • drugi a
  • drugi b
  • drugi c
• Link trzeci
  • trzeci a
  • trzeci b
    • trzeci b1
    • trzeci b2
  • trzeci c
  • trzeci d
    • trzeci d1
    • trzeci d2
    • trzeci d3

Na rysunku 5.11 można zobaczyć okno przeglądarki po wczytaniu pliku 141.htm. Treści (rysunek 5.11) trzeba nadać ciekawą formę (rysunki 5.12 i 5.13).

Rozdział 5.  Nawigacja Rysunek 5.11. Sama struktura dokumentu HTML wyświetlona w oknie przeglądarki

Rysunek 5.12. Plik z rysunku 5.11 po sformatowaniu za pomocą arkusza CSS

Rysunek 5.13. Menu rozwijalne

197

198

CSS3. Zaawansowane projekty

Co spowodowało zmianę wyglądu pliku HTML i uczyniło go czułym na zdarzenia? Wszystko to stało się za sprawą pliku CSS: body { background: silver; color: black; } h1 { font-family: Verdana, Geneva, sans-serif; font-size: 48px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26px; } a { font-family: Verdana, Geneva, sans-serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 380; line-height: 20px; } div { float: left; border: 1px solid #000; background: #eee; margin: 1px 0 0 0; width: 500px; } div ul { margin: 0; padding: 0; border: 1px solid #000; border-width: 0 1px; background-color: #eee; } div li { position: relative; list-style: none; margin: 0; float: left; width: 160px; line-height: 1em; } div ul ul { position: absolute; width: 160px; display: none; } div ul ul li { border-bottom: 1px solid #000; } div li.submenu {

Rozdział 5.  Nawigacja background: url(strzalka_dol.gif) 95% 50% no-repeat; } div li.submenu li.submenu { background: url(strzalka.gif) 95% 50% no-repeat; } div li a:link, div li a:visited { display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 160px; color: #050; } div>ul a:link, div>ul a:visited { width: auto; color: #050; } div li:hover { background-color: #eee; color: #0f0; text-decoration: underline; } div li.submenu:hover { background-color: #eee; color: #0f0; } div ul.poz_1 li.submenu:hover ul.poz_2 { display: block; color: #0f0; } div ul.poz_2 li.submenu:hover ul.poz_3 { display: block; color: #0f0; } div ul.poz_2 { top: 1.5em; left: -1px; } div ul.poz_3 { top: -1px; left: 160px; border-top: 1px solid #000; }

199

200

CSS3. Zaawansowane projekty

W sekcji body zdefiniowano kolor tła strony (background: silver) oraz kolor czcionki (color: black). W sekcjach h1 oraz a określono wygląd czcionki, którą wyświetlany jest nagłówek oraz odsyłacze. Jest to nieco za mało jak dla typowej strony WWW, która zawiera jeszcze zazwyczaj tekst akapitowy. Na potrzeby przykładu to uproszczenie jest jednak wystarczające. W pierwszej sekcji div zdefiniowano margines pionowy, do którego dosunięte zostało menu. W przykładzie jest to margines lewy (float: left). Ramka ma szerokość 1 piksela, jest ciągła i ma kolor czarny (border: 1px solid #000). Tło, na którym widoczne są odsyłacze, ma kolor szary (background: #eee). Jasny pasek, na którym wyświetlane są odsyłacze widoczne na rysunku 5.12, ma szerokość 500 pikseli (width: 500px). W kolejnej sekcji zdefiniowano wygląd pola div ul, które zawiera pierwszy poziom menu. W sekcji div li znajdują się parametry określające sposób wyświetlania listy wypunktowanej. Są dwie strzałki, które informują o tym, że po rozwinięciu menu można uzyskać dostęp do menu szczegółowego. Jedna jest skierowana w dół (background: url(strzalka_ dol.gif) 95% 50% no-repeat), a druga skierowana jest poziomo (background: url(strzalka.gif) 95% 50% no-repeat). W praktyce są to tła umieszczone 5% od końca pola w poziomie, a w środku znajduje się pole w pionie. W sekcji div li a:link, div li a:visited określony jest wygląd odsyłacza oraz odsyłacza odwiedzonego. Pole, w którym wyświetlany jest odsyłacz, ma szerokość 160 pikseli (width: 160px), zaś znaki mają kolor zielony (color: #050). Identyczny kolor mają odsyłacze nowy i odwiedzony w liście rozwijanej (div>ul a:link, div>ul a:visited). Wygląd odsyłacza wskazanego kursorem i znajdującego się na liście nieuporządkowanej określony jest w sekcji div li:hover. Odsyłacz wyświetlany jest na szarym tle (background-color: #eee), ma kolor zielonkawy (color: #0f0) i jest podkreślony (text-decoration: underline). Podobnie zdefiniowany jest wygląd menu, w którym wyświetlane są odsyłacze zapisane w liście nieuporządkowanej (div li.submenu:hover) oraz należące do klas poz_1 i poz_2 (div ul.poz_1 li.submenu:hover ul.poz_2).

5.4. Tooltip Zacznijmy od wyjaśnienia, co będziemy w tym punkcie projektować. Tooltip to dodatkowa informacja dla użytkownika. Jest ona wyświetlana, gdy na przykład użytkownik najedzie kursorem na dany element dokumentu HTML.

Rozdział 5.  Nawigacja

201

Co trzeba zrobić, aby uzyskać oczekiwany efekt? Odpowiedź będzie standardowa — treść należy zapisać w pliku HTML, zaś w pliku CSS określoną reakcję na zdarzenie, czyli wskazanie elementu kursorem. Oto plik HTML:

143



142 helion.pl onepress.pl sensus.pl septem.pl

Na rysunku 5.14 pokazano okno przeglądarki po wyświetleniu w nim pliku 142.htm. Rysunek 5.14. Odsyłacze do księgarni warto uzupełnić informacją na temat książek, które znajdują się w jej ofercie. Aby nie zaciemniać strony, wykorzystamy do tego celu tooltip

W kolejnym kroku dopiszemy treść objaśnień. Plik HTML będzie miał wygląd następujący:

143



143

• helion.pl
  
  202
  
  CSS3. Zaawansowane projekty
  • Księgarnia informatyczna...
• onepress.pl
  • Literatura klasy business...
• sensus.pl
  • Poradniki psychologiczne...
• septem.pl
  • Literatura poradnikowa...

Po wyświetleniu w oknie przeglądarki ma on wygląd mało interesujący (rysunek 5.15). Rysunek 5.15. Hm… chcieliśmy przecież, aby objaśnienia nie zaciemniały strony

Gdy praca nad treścią zostanie zakończona, należy zająć się formą. Oznacza to, że zamiast pracować nadal nad plikiem HTML, należy teraz skupić się na pliku CSS: body { background: silver; color: black; }

Rozdział 5.  Nawigacja

203

h1 { font-family: Verdana, Geneva, sans-serif; font-size: 48px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26px; } a { font-family: Verdana, Geneva, sans-serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 380; line-height: 20px; } li { font-family: Verdana, Geneva, sans-serif; font-size: 18px; font-style: italic; font-variant: normal; font-weight: 380; line-height: 20px; } li > ul{ display: none; } li:hover > ul{ display: block; }

Gdy wyświetlimy w oknie przeglądarki plik 144.htm, okaże się, że objaśnienia są ukryte (rysunek 5.16) i pojawią się dopiero po wskazaniu kursorem (rysunek 5.17). Rysunek 5.16. Podpowiedzi są domyślnie ukryte

204

CSS3. Zaawansowane projekty

Rysunek 5.17. Dodatkowa informacja pojawia się po wskazaniu linku kursorem

Wprowadzając niewielkie zmiany w pliku CSS, można poprawić wygląd rozwiniętego menu (rysunek 5.18). Rysunek 5.18. Tooltip wyświetlany jest na jasnym tle

Oto plik CSS: body { background: silver; color: black; } h1 { font-family: Verdana, Geneva, sans-serif; font-size: 48px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26px; } a { font-family: Verdana, Geneva, sans-serif; font-size: 18px;

Rozdział 5.  Nawigacja

205

font-style: normal; font-variant: normal; font-weight: 380; line-height: 20px; } li { font-family: Verdana, Geneva, sans-serif; font-size: 18px; font-style: italic; font-variant: normal; font-weight: 380; line-height: 20px; } li:hover{ background-color: #ddd; width:200px; } li > ul li{ float: none; margin-right: 0; border: none; } li > ul li:hover{ width:150px; } li > ul{ display: none; margin: 0; } li:hover > ul{ display: block; }

5.5. Tooltip animowany Jak spowodować, aby po wskazaniu obiektu myszą wyświetlany był tooltip animowany? Po pierwsze, w kodzie HTML trzeba zdefiniować obiekt, który będzie animowany. Po drugie, w kodzie CSS trzeba określić, co będzie animowane, w jakim czasie, ile razy itp. Do tego celu najlepiej nadaje się właściwość animation. Pełni ona rolę „motoru” napędzającego. Po trzecie, należy określić, od jakiego stanu animacja się zacznie, na jakim stanie się zakończy i jak długo będą trwały poszczególne etapy. Do tego celu idealna jest @keyframes. Cóż jeszcze pozostaje? Tylko wdrożyć pomysł w życie.

206

CSS3. Zaawansowane projekty

Oto kod HTML:

146



146

• helion.pl
  • Księgarnia informatyczna...
• onepress.pl
  • Literatura klasy business...
• sensus.pl
  • Poradniki psychologiczne...
• septem.pl
  • Literatura poradnikowa...

W stosunku do pliku 145.htm nowy plik nie zmienił się wiele. Jedynie liczba 145 została zastąpiona przez 146. Animacja i element uruchamiający ją zostały skopiowane z pliku 135.css. Do pliku 145.css w sekcji li > ul li:hover{

Rozdział 5.  Nawigacja

207

został dodany kod: animation:animacja_tla 2s infinite; -webkit-animation:animacja_tla 2s infinite; /* Google Chrome, Safari, Opera 15+ */

Jest on aktywowany po naprowadzeniu kursora na element. Analogicznie na końcu pliku CSS dodany został kod: @keyframes animacja_tla { 0% { background-color:Gainsboro; } 25% { background-color:Silver; } 50% { background-color:DarkGray; } 75% { background-color:LightSlateGray; } 100% { background-color:Gainsboro; } } @-webkit-keyframes animacja_tla /* Google Chrome, Safari, Opera 15+ */ { 0% { background-color:Gainsboro; } 25% { background-color:Silver; } 50% { background-color:DarkGray; } 75% { background-color:LightSlateGray; } 100% { background-color:Gainsboro; } }

Powoduje on zmianę koloru tła. Na rysunku 5.19 pokazano, jak wygląda okno przeglądarki po wczytaniu pliku 146.htm i uruchomieniu animacji. Rysunek 5.19. Do pliku 146.css wstawiono animację z pliku 135.css

Teraz można spowodować, aby animacja nie była taka sama jak w pliku, z którego została skopiowana.

208

CSS3. Zaawansowane projekty

Chcemy, aby efekt polegał na zmianie przezroczystości tła? Na końcu pliku CSS trzeba więc umieścić kod: @keyframes animacja_tla { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes animacja_tla /* Google Chrome, Safari, Opera 15+ */ { 0% { opacity:0; } 100% { opacity:1; } }

W ten sposób kod CSS ma postać: body { background: silver; color: black; } h1 { font-family: Verdana, Geneva, sans-serif; font-size: 48px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 26px; } a { font-family: Verdana, Geneva, sans-serif; font-size: 18px; font-style: normal; font-variant: normal; font-weight: 380; line-height: 20px; } li { font-family: Verdana, Geneva, sans-serif; font-size: 18px; font-style: italic; font-variant: normal; font-weight: 380; line-height: 20px; } li:hover{ background-color: #ddd; width:200px; } li > ul li{ float: none; margin-right: 0; border: none; } li > ul li:hover{ width:150px; animation:animacja_tla 2s infinite; -webkit-animation:animacja_tla 2s infinite; /* Google Chrome, Safari, Opera 15+ */ }

Rozdział 5.  Nawigacja

209

li > ul{ display: none; margin: 0; } li:hover > ul{ display: block; } @keyframes animacja_tla { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes animacja_tla /* Google Chrome, Safari, Opera 15+ */ { 0% { opacity:0; } 100% { opacity:1; } }

Na rysunku 5.20 pokazano, jak wygląda okno przeglądarki po wczytaniu pliku 147.htm i uruchomieniu animacji. Rysunek 5.20. Animacja — zmiana przezroczystości

Chcemy, aby efekt polegał dodatkowo na obrocie i skalowaniu objaśnienia? Na końcu pliku CSS trzeba więc umieścić kod: @keyframes animacja_tla { 0% { transform:scale(0) rotate(0); opacity:0; } 100% { transform:scale(1) rotate(360deg); opacity:1; } } @-webkit-keyframes animacja_tla /* Google Chrome, Safari,

210

CSS3. Zaawansowane projekty Opera 15+ */ { 0% { -webkit-transform:scale(0) rotate(0); opacity:0; } 100% { -webkit-transform:scale(1) rotate(360deg); opacity:1; } }

Na rysunku 5.21 pokazano, jak wygląda okno przeglądarki po wczytaniu pliku 148.htm i uruchomieniu animacji. Rysunek 5.21. Korzystając z tego, że programy mają budowę modułową, można wymienić w pliku tylko fragment odpowiedzialny za wygląd efektu. Reszty nie trzeba pisać od początku ani testować…

Rozdział 6.

Wybór szablonu w zależności od wielkości ekranu Ten sam dokument oglądany na komputerze stacjonarnym z dużym ekranem powinien wyglądać inaczej niż na urządzeniu mobilnym. W treści strony może być zapisane, aby rozpoznawała ona rodzaj urządzenia i samodzielnie dokonywała przełączenia. Strona może być zoptymalizowana i wówczas będzie wyglądać zupełnie inaczej w telefonach komórkowych, a inaczej w tabletach i różnej wielkości oknach przeglądarki. Do definiowania odmiennych reguł stylów dla różnych mediów i typów urządzeń stosowana jest reguła @media. W CSS2 nosiła ona nazwę typy mediów, zaś w CSS3 nosi nazwę zapytania mediów. Za pomocą reguły @media można określić style wyglądu elementów HTML. Uaktywnienie stylu nastąpi tylko w określonych okolicznościach, gdy na przykład strona zostanie wyświetlona w urządzeniu przenośnym, a szerokość okna przeglądarki internetowej użytkownika będzie nie mniejsza niż wartość progowa. Reguła ma następującą składnię: @media not|only typ_mediów and (właściwości_mediów) { CSS-Code; }

W tabeli 6.1 podano typy mediów, zaś w tabeli 6.2 właściwości mediów.

212

CSS3. Zaawansowane projekty

Tabela 6.1. Typy mediów Wartość

Opis

all

Stosowana do wszystkich typów urządzeń.

aural

Przestarzała. Stosowana do syntezatorów mowy oraz dźwięków.

braille

Przestarzała. Stosowana do urządzeń Braille’a ze sprzężeniem dotykowym.

embossed

Przestarzała. Używana do stronicowych drukarek Braille’a.

handheld

Przestarzała. Używana w urządzeniach małych lub podręcznych.

print

Używana do drukarek.

projection

Przestarzała. Używana do wyświetlania prezentacji, np. w postaci slajdów.

screen

Używana w ekranach komputerowych, tabletach, inteligentnych telefonach itp.

speech

Używana w czytnikach ekranów, które „czytają” zawartość stron na głos.

tty

Przestarzała. Używana w mediach wykorzystujących siatki znaków o stałym skoku (dalekopisów, terminali).

tv

Przestarzała. Używana w urządzeniach telewizyjnych.

Tabela 6.2. Właściwości mediów Wartość

Opis

aspect-ratio

Określa stosunek szerokości do wysokości wyświetlanego obszaru.

color

Określa liczbę bitów używanych do zapisania koloru w urządzeniu wyjściowym.

color-index

Określa liczbę kolorów, które może wyświetlić urządzenie.

device-aspect-ratio

Określa stosunek szerokości do wysokości urządzenia.

device-height

Określa wysokość urządzenia, np. ekranu komputerowego.

device-width

Określa szerokość urządzenia, np. ekranu komputerowego.

grid

Określa, czy urządzenie jest rastrowe.

height

Określa wysokość wyświetlanego obszaru, np. okna przeglądarki.

max-aspect-ratio

Określa minimalny stosunek pomiędzy szerokością i wysokością obszaru wyświetlanego.

max-color

Określa maksymalną liczbę bitów na składnik koloru dla urządzenia wyjściowego.

max-color-index

Określa maksymalną liczbę kolorów, które może wyświetlić urządzenie wyjściowe.

max-device-aspectratio

Określa minimalny stosunek pomiędzy szerokością i wysokością urządzenia.

max-device-height

Określa maksymalną wysokość urządzenia, np. ekranu komputera.

max-device-width

Określa maksymalną szerokość urządzenia, np. ekranu komputera.

max-height

Określa maksymalną wysokość obszaru wyświetlanego (np. okna przeglądarki).

max-monochrome

Określa maksymalną liczbę bitów użytych do zapisu „koloru” w urządzeniu monochromatycznym.

max-resolution

Określa maksymalną rozdzielczość urządzenia liczoną w dpi lub dcm.

max-width

Określa maksymalną szerokość wyświetlanego obrazu.

Rozdział 6.  Wybór szablonu w zależności od wielkości ekranu

213

Tabela 6.2. Właściwości mediów — ciąg dalszy Wartość

Opis

min-aspect-ratio min-color

Określa minimalny stosunek szerokości i wysokości wyświetlanego obrazu. Określa minimalną liczbę bitów przeznaczoną na opis koloru w urządzeniu wyjściowym. Określa minimalną liczbę kolorów, jakie może wyświetlić urządzenie wyjściowe. Określa minimalny stosunek między szerokością i wysokością urządzenia.

min-color-index min-device-aspectratio min-device-width min-device-height min-height min-monochrome min-resolution min-width monochrome orientation resolution scan width

Określa minimalną szerokość urządzenia (np. ekranu monitora). Określa minimalną wysokość urządzenia (np. ekranu monitora). Określa minimalną wysokość obszaru użytego do wyświetlania, takiego jak okno przeglądarki. Określa minimalną liczbę bitów użytych do opisu koloru w urządzeniu pracującym w trybie monochromatycznym (w skali szarości). Określa minimalną rozdzielczość urządzenia liczoną w dpi lub dcm. Określa minimalną szerokość obszaru użytego do wyświetlania np. okna przeglądarki. Określa liczbę bitów użytych do zapisu koloru w urządzeniach pracujących w trybie monochromatycznym (skali szarości). Określa tryb wyświetlania obrazu (pejzażowy lub portretowy). Określa rozdzielczość urządzenia w dpi lub dcm. Określa, czy skanowanie obrazu telewizyjnego ma być kolejnoliniowe czy międzyliniowe. Określa szerokość obszaru użytego do wyświetlania (np. okno przeglądarki).

Ponieważ reguła @media powoduje zmiany, które trudno pokazać na ilustracji (pokaz slajdów, synteza dźwięków, fizyczne rozmiary ekranu), w rozdziale opisana została zasada stosowania reguły oraz opcje jej użycia.

6.1. Postać strony zależna od urządzenia użytego do jej oglądania Zasada konstrukcji programu polega na określeniu sprawdzanego warunku (np. szerokości okna). Kolejnym etapem jest utworzenie reguł formatowania, które będą stosowane w zależności od wyniku sprawdzenia.

Szerokość okna Aby łatwo można było sprawdzić, czy program działa, utwórzmy stronę, która będzie wyświetlana czarną czcionką na białym tle (gdy szerokość ekranu będzie większa niż 500 pikseli) lub białą czcionką na czarnym tle w pozostałych przypadkach.

214

CSS3. Zaawansowane projekty

Plik HTML ma postać:

149



149

Lorem ipsum dolor sit amet.

Tak jak w poprzednich przypadkach, zawiera on treść i odwołanie do pliku CSS odpowiedzialnego za formę. Plik CSS ma postać: body { background-color: white; color: black; } @media screen and (max-width: 500px) { body { background-color: black; color: white; }

W sekcji body zdefiniowano białe tło (background-color: white) oraz czarne napisy (color: black). Reguła @media screen and zaczyna obowiązywać, gdy szerokość ekranu jest mniejsza niż 500 pikseli (max-width: 500px). Sprawia ona, że tło ma kolor czarny (background-color: black), zaś napisy kolor biały (color: white). Na rysunku 6.1 pokazano dokument wyświetlony w oknie szerokim, zaś na rysunku 6.2 widoczny jest ten sam dokument wyświetlony w oknie wąskim. Rysunek 6.1. Dokument sformatowany jest według reguły obowiązującej dla okna o szerokości większej niż 500 pikseli

Rozdział 6.  Wybór szablonu w zależności od wielkości ekranu

215

Rysunek 6.2. Dokument sformatowany jest według reguły obowiązującej dla okna o szerokości do 500 pikseli

Przy wyborze palety kolorów dla własnego projektu nie sugeruj się tym, że małe okno wyświetlone zostanie w kolorach negatywowych.

Wydruk Innym zastosowaniem reguły @media jest zmiana wyglądu dokumentu w zależności od tego, czy jest on wyświetlany na ekranie, czy drukowany. Dodanie tej funkcjonalności nie wymaga zmiany w pliku HTML:

150



150

Lorem ipsum dolor sit amet.

Cały mechanizm powodujący przełączenie wyglądu dokumentu znajduje się w pliku CSS: body { background-color: white; color: black; } @media screen { h1 { font-family: verdana, sans-serif; font-size: 34px; }

216

CSS3. Zaawansowane projekty p { font-family: verdana, sans-serif; font-size: 18px; } } @media print { h1 { font-family: georgia, serif; font-size: 17px; color: gray; } p { font-family: georgia, serif; font-size: 9px; color: gray; }

W sekcji body określono kolor tła jako biały (background-color: white) oraz kolor czcionki jako czarny (color: black). Właściwość @media screen narzuca wygląd dokumentu, gdy jest on wyświetlany na ekranie. Właściwość @media print określa wygląd dokumentu drukowanego. Czcionka jest mniejsza niż przy wyświetlaniu na ekranie, a jej kolor jest szary, a nie czarny. Na rysunku 6.3 pokazano wygląd okna przeglądarki po załadowaniu pliku 150.htm, zaś na rysunku 6.4 postać dokumentu wydrukowanego. Rysunek 6.3. Dokument wyświetlany w oknie przeglądarki

Rysunek 6.4. Ten sam dokument wyświetlony w trybie podglądu wydruku. Na potrzeby ilustracji tekst został powiększony dziewięć razy

Rozdział 6.  Wybór szablonu w zależności od wielkości ekranu

217

Kilka reguł Czy możliwe jest działanie reguły CSS dla większej liczby stanów? Oczywiście, można wpisać kilka warunków. Oto plik CSS: @media screen and (max-width: 1000px) { body {background-color: black; color: white;} } @media screen and (max-width: 800px) { body {background-color: black; color: red;} } @media screen and (max-width: 600px) { body {background-color: black; color: green;} }

Powoduje on, że tło ma kolor czarny, ale czcionki wraz ze zwiększaniem szerokości okna są kolejno: zielone, czerwone, białe. Zmiana koloru następuje wtedy, gdy okno będzie miało szerokość: 600, 800 i 1000 pikseli (rysunki od 6.5 do 6.7). Rysunek 6.5. Tło czarne, napisy zielone. Okno jest rozciągane wszerz…

Rysunek 6.6. Tło czarne, napisy czerwone. Okno jest nadal rozciągane wszerz…

218 Rysunek 6.7. Tło czarne, napisy białe. Dalsze rozciąganie okna nie ma wpływu na kolor jego zawartości

CSS3. Zaawansowane projekty

Rozdział 7.

Przekształcenia geometryczne Animacja kojarzyła nam się długo z animowanym filmem czy też animowanym gifem. Oba składały się z wielu klatek, a przez to rozmiar pliku, który je zawierał, był duży. Okazało się, że animacje też można definiować w CSS, dzięki czemu problem wielkich plików został rozwiązany. Podobnie do niedawna wyglądała sprawa z przekształceniami geometrycznymi obrazków. Najpierw należało utworzyć obiekt wyjściowy, a następnie w programie graficznym poddać go przekształceniu. Wynik trzeba było zapisać do pliku, zwracając uwagę na odpowiednią rozdzielczość (aby uniknąć utraty szczegółów), ale jednocześnie uzyskiwało się plik o dużych rozmiarach. Aż pewnego dnia pojawił się CSS3… Co to daje programistom? Domyślnie elementy, które są reprezentacją elementów HTML, są prostokątne. Są tak często spotykane, że aż nudne. Posługując się właściwością transform, można rozciągać i kształtować pola na wiele postaci. Na jak wiele? Tego dowiesz się z dalszej części rozdziału. Właściwość transform została opisana w tabeli 1.6.

Właściwościami podstawowymi są transform i transform-origin. W praktyce trzeba powtórzyć polecenia z wykorzystaniem -webkit-transform i -webkit-transformorigin, aby uzyskać identyczne rezultaty w przeglądarkach Safari oraz Chrome. Aby transformacje działały również w Internet Explorer 9 (w najwcześniejszej wersji Internet Explorera wspierającej transformacje), należy użyć -ms-transform i -ms-transformorigin.

220

CSS3. Zaawansowane projekty

7.1. Pochylanie obiektu Jak spowodować, aby napis biegł ukośnie? Trzeba zapisać tekst w pliku HTML:

152



152

Lorem ipsum dolor sit amet.

Kolejnym etapem jest zapisanie transformacji w pliku CSS: ol { -ms-transform: rotate(-10deg); /* IE 9 */ -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */ transform: rotate(-10deg); }

Pozostaje jeszcze wyświetlenie w oknie przeglądarki pliku HTML (rysunek 7.1). Rysunek 7.1. Tekst biegnie

W pliku 152.htm użyta została lista uporządkowana. Stąd przed tekstem pojawiła się jedynka. Czy możliwe jest pochylenie tekstu, który nie znajduje się na liście? Oczywiście! Lista jest tylko zbiornikiem, w którym umieszczamy elementy. Zamiast listy można użyć np. znacznika akapitu. Plik HTML będzie miał postać:

153

Rozdział 7.  Przekształcenia geometryczne

221



153

Lorem ipsum dolor sit amet.

Plik CSS ma postać: p { -ms-transform: rotate(-10deg); /* IE 9 */ -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */ transform: rotate(-10deg); }

Na rysunku 7.2 można zobaczyć, jak w oknie przeglądarki będzie wyglądał dokument HTML. Rysunek 7.2. Zawartość akapitu została pochylona pod kątem -10 stopni

Czy jeśli w dokumencie będzie więcej akapitów, to wszystkie będą pochylone? Sprawdźmy to! Oto plik HTML:

154



154

Lorem ipsum dolor sit amet.

Akapit kolejny

Lorem ipsum dolor sit amet.

W pliku CSS zasadniczo nie ma zmian: p { -ms-transform: rotate(-10deg); /* IE 9 */ -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */ transform: rotate(-10deg); }

222

CSS3. Zaawansowane projekty

Dokument wyświetlony w oknie przeglądarki wygląda tak, jak pokazano to na rysunku 7.3. Rysunek 7.3. Pochylone zostały wszystkie teksty akapitowe

Jak należy zmodyfikować pliki, aby nagłówek h1 był pochylony pod kątem 180 stopni, a h2 pod kątem -10 stopni? W pliku HTML zmian rewolucyjnych nie widać. Zdefiniowane zostały dwie klasy:

155



155

Lorem ipsum dolor sit amet.

Akapit kolejny

Lorem ipsum dolor sit amet.

Nagłówkom h1 i h2 przypisane zostały klasy class=h1 i class=h2. W pliku CSS określono kąt, pod jakim mają być pochylone elementy należące do obu klas: .h1 { -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); } .h2 { -ms-transform: rotate(-10deg); /* IE 9 */ -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */ transform: rotate(-10deg); } p{ -ms-transform: rotate(-10deg); /* IE 9 */ -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */ transform: rotate(-10deg); }

Rozdział 7.  Przekształcenia geometryczne

223

Na rysunku 7.4 można zobaczyć, jak wygląda dokument 155.htm wczytany do okna przeglądarki. Rysunek 7.4. Nagłówki należą do oddzielnych klas. W dokumencie można niezależnie sterować ich położeniem

7.2. Transformacje Wiadomo już, jak element obrócić. Czy możliwe są inne transformacje, np. przekoszenie? Oczywiście! Do uzyskania takiego efektu służy właściwość transform.

Przekoszenie Zasada postępowania jest identyczna jak w przypadku pochylania. W pliku HTML należy umieścić obiekt, który ma podlegać transformacji. W pliku CSS trzeba opisać transformację. Oto, jak w praktyce wygląda plik HTML:

156



156

Lorem ipsum dolor sit amet, consectetur adipiscing.

W sekcji h1 użyta została klasa pochylenie. Definicja klasy zapisana została w pliku CSS: .pochylenie { transform: skew(20deg,-10deg); }

224

CSS3. Zaawansowane projekty

Jeżeli ta sama właściwość ma być zastosowana do różnych elementów strony WWW, warto zdefiniować klasę w pliku CSS i odwoływać się do niej w pliku HTML. Uprości to plik CSS. Jeżeli właściwość będzie przypisana tylko do określonych elementów strony WWW, np. tekstu akapitowego, można zdefiniować ją dla znacznika p w pliku CSS. Spowoduje to rozbudowę pliku arkusza stylów, ale radykalnie uprości plik HTML.

Pierwszy argument określa pochylenie w poziomie, zaś drugi pochylenie w pionie. Na rysunku 7.5 pokazano okno przeglądarki po wczytaniu pliku 156.htm. Rysunek 7.5. Mimo że w kodzie HTML nagłówek znajduje się przed tekstem akapitowym, to tu „spadł” niżej

Na rysunkach 5.7 i 5.8 pokazano, jaki wpływ na wygląd nagłówka ma pochylenie go o różną wartość kąta. Rysunek 7.6. Nagłówek pochylony o kąt skew(20deg,0deg). Jeżeli drugi kąt ma wartość zerową, można posłużyć się uproszczonym zapisem skew(20deg) Rysunek 7.7. Nagłówek pochylony o kąt skew(-20deg,0deg)

Skalowanie Skalowanie polega na zmianie rozmiarów obiektu bez naruszenia proporcji. CSS pozwala na zdefiniowanie obiektu, a następnie zmianę jego szerokości i wysokości. Czynność tę można uprościć. Zamiast pracowicie przeliczać wymiary, można posłużyć się właściwością transformation:scale.

Rozdział 7.  Przekształcenia geometryczne

225

W pliku HTML umieszczone zostaną dwa elementy: bez etykiety oraz . Pierwszy pełni rolę punktu odniesienia, zaś drugi będzie obiektem skalowanym. Oto plik HTML:

159



159 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Oto plik CSS: div { width: 400px; height: 25px; background-color: gold; border: 2px solid black; position: absolute; left: 100px; top: 30px; } div#div2 { -ms-transform: scale(2.0,2.0); /* IE 9 */ -webkit-transform: scale(2.0,2.0); /* Chrome, Safari, Opera */ transform: cale(2.0,2.0); /* Standard syntax */ position: absolute; left: 100px; top: 80px; }

Wyjściowo element ma szerokość 400 pikseli (width: 400px;), zaś wysokość 25 pikseli (height: 25px;). Tło prostokąta ma kolor złoty (background-color: gold). Obramowanie jest ciągłe, ma kolor czarny i szerokość 2 pikseli (border: 2px solid black). Element został wyrównany (position: absolute;) względem marginesu lewego (left: 100px;) oraz górnego (top: 30px;). Wymiary poziome i pionowe elementu div#div2 zostały powiększone dwa razy (2.0,2.0). Położenie elementu nie zostało zmienione. Na rysunku 7.8 pokazano wygląd okna przeglądarki po załadowaniu pliku 159.htm.

226

CSS3. Zaawansowane projekty

Rysunek 7.8. Element górny (odniesienia) mieści się w oknie przeglądarki. Konsekwencją przeskalowania dolnego elementu było dwukrotne powiększenie wszystkich jego wymiarów. W rezultacie lewa krawędź nie mieści się w oknie

Po zwiększeniu odstępu od lewego marginesu (left: 210px) element div#div2 zmieścił się w oknie przeglądarki (rysunek 7.9).

Rysunek 7.9. Skalując obiekt, należy pamiętać o pozostawieniu mu odpowiedniej przestrzeni Jeżeli skalowanie jest identyczne we wszystkich kierunkach, można uprościć opis do postaci transform: scale(n);, gdzie n oznacza współczynnik skali.

Skalowanie z użyciem współczynnika mniejszego od 1 powoduje zmniejszenie elementu (rysunek 7.10). Rysunek 7.10. Element został zmniejszony dwa razy

Czy coś stoi na przeszkodzie temu, aby współczynniki skali do wymiarów poziomych i pionowych były inne? Oczywiście nie (rysunek 7.11)!

Rozdział 7.  Przekształcenia geometryczne

227

Rysunek 7.11. Transformacja z wykorzystaniem współczynnika skali scale(1,2). Szerokość pozostała niezmieniona, natomiast wszystkie wymiary wysokości zostały zwiększone dwa razy

Przesunięcie Rozmieszczenie elementu można określić, zapisując w pliku CSS położenie jego krawędzi, np.: left: 100px; top: 80px. Jeżeli trzeba przesunąć element w stosunku do miejsca odniesienia, można posłużyć się poleceniem transform: translate(Xpx,Ypx). Plik CSS zawierający polecenie przesunięcia elementu o 100 pikseli w pionie i 100 pikseli w poziomie ma postać: div { width: 400px; height: 25px; background-color: gold; border: 2px solid black; position: absolute; left: 100px; top: 30px; } div#div2 { -ms-transform: translate(100px,100px); /* IE 9 */ -webkit-transform: translate(100px,100px); /* Chrome, Safari, Opera */ transform: translate(100px,100px); /* Standard syntax */ position: absolute; left: 100px; top: 80px; }

Jaki to daje rezultat? Wystarczy spojrzeć na rysunek 7.12. Rysunek 7.12. Element w prawym dolnym rogu ma takie samo położenie wyjściowe jak element górny. Posługując się poleceniem translate, każdą z wartości zwiększono o 100 pikseli

228

CSS3. Zaawansowane projekty

7.3. Przekształcenia geometryczne złożone Z przekształceniem złożonym mamy do czynienia wtedy, gdy ten sam obiekt został np. obrócony i przeskalowany. Plik CSS, który zawiera takie polecenia, ma postać: div { width: 400px; height: 25px; background-color: gold; border: 2px solid black; position: absolute; left: 100px; top: 30px; } div#div2 { -ms-transform: rotate(-10deg) scale(2); /* IE 9 */ -webkit-transform: rotate(-10deg) scale(2); /* Chrome, Safari, Opera */ transform: rotate(-10deg) scale(2); /* Standard syntax */ position: absolute; left: 200px; top: 80px; }

Element drugi div#div2 został obrócony o -10 stopni (rotate(-10deg)) oraz zwiększony dwa razy (scale(2)). Na rysunku 7.13 można zobaczyć wynik końcowy przekształcenia złożonego.

Rysunek 7.13. Element drugi został jednocześnie przeskalowany i obrócony

Czy złożenie przekształceń jest przemienne? Ważną rolę odgrywa kolejność poleceń. W przykładzie pokazanym na rysunku 7.13 prostokąt został przeskalowany, a potem obrócony.

Rozdział 7.  Przekształcenia geometryczne

229

Przekształcenia złożone wykonywane są od strony prawej do lewej.

Rozwiązaniem alternatywnym w stosunku do składania przekształceń jest przekształcenie macierzowe (rysunek 7.14).

Rysunek 7.14. Efekt uzyskany przy zastosowaniu przekształcenia matrycowego matrix(2,-0.30,0.30,2,0,0). Dla laika zapis ten jest mniej przejrzysty niż złożenie dwóch intuicyjnych przekształceń. Jeżeli jednak istotne są precyzja i zwięzłość zapisu, to przekształcenie macierzowe nie ma sobie równych

7.4. Efekty kolorystyczne Kolory mogą być zdefiniowane przez nazwę (np. yellow), zawartość składowych RGB w zapisie dziesiętnym lub szesnastkowym. CSS3 pozwala także operować odcieniem, nasyceniem i jasnością. Skrót nazwy standardu HSL pochodzi od pierwszych liter angielskich słów (hue — odcień, saturation — nasycenie, lightness — jasność). Spotykane są również nazwy RGBa oraz HSLa. Litera a pochodzi od nazwy współczynnika alfa opisującego przezroczystość.

Przezroczystość alpha Dodatkowy parametr oznacza dodatkowe możliwości. Modyfikowanie przezroczystości stwarza nowy wymiar projektowania stron internetowych. Polega on na ustawianiu przezroczystości elementu (np. pudełka, tekstu). Oto kod HTML:

167



230

CSS3. Zaawansowane projekty

167 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar eleifend nisi. Morbi vel nisi accumsan, convallis sapien at, pharetra sapien. Curabitur facilisis rhoncus congue. Sed suscipit ac mauris eget sagittis. Mauris et tellus turpis. Suspendisse in mi at ligula venenatis lacinia quis et lorem. Praesent scelerisque varius orci non efficitur. Etiam quis urna eget justo consectetur posuere.

Oto kod CSS: div { width: 500px; height: 80px; background-color: gold; border: 2px solid black; position: absolute; left: 50px; top: 100px; padding: 50px; background-image: url(Snazzy.jpg); color: rgba(0,0,0,0.9); } body { padding: 40px; background-image: url(Snazzy.jpg); color: rgba(0,0,0,0.6); }

To samo tło zostało użyte w sekcji body i div. Różnica polega jedynie na przezroczystości. W sekcji body współczynnik alfa wynosi 0,9 (rgba(0,0,0,0.9);), zaś w sekcji div ma on wartość 0,6 (rgba(0,0,0,0.6);). Na rysunku 7.15 pokazano okno przeglądarki z wczytanym dokumentem 167.htm. Rysunek 7.15. Wzór gwiazdek zarówno wewnątrz ramki, jak i na zewnątrz niej jest niemal identyczny. To „niemal” to 0.3 wartości współczynnika alfa

Rozdział 7.  Przekształcenia geometryczne

231

Co się stanie, jeżeli zarówno wewnątrz ramki, jak i na zewnątrz jej współczynnik alfa będzie wynosił 0.6? Można przekonać się o tym, oglądając rysunek 7.16. Rysunek 7.16. Napis wewnątrz ramki ledwie przebija się przez obrazek. Nic dziwnego, skoro 40% zostało stłumione

Zapis rgb (0,0,0) oznacza brak składowych kolorów, czyli czystą czerń. W standardzie RGBa czwarty parametr określa poziom przejrzystości. Zapis rgba (0,0,0,0.7) oznacza zerową wartość składowych kolorów, zaś 0.7 powoduje, że jest ona 70-procentową czernią. Współczynnik alfa o wartości 1 oznacza maksymalne tłumienie elementu, który znajduje się pod obrazem. Współczynnik alfa o wartości 0 oznacza natomiast brak wpływu na wygląd elementu, który znajduje się pod obrazem.

Odcień, nasycenie i jasność W nazwach kolorów z reguły występują trzy składowe: czerwona, zielona i niebieska. To nie wyczerpuje całego bogactwa barw. Szersze możliwości opisu kolorów stwarza model HSL. Jest on podobny do standardu RGB. Zapis color: hsl(36, 100%, 50%) oznacza, że: Odcień (ang. hue) ma wartość 36. Jest to kąt na kole kolorów. Kątowi 0 i 360 stopni odpowiada kolor czerwony. Kątowi 120 stopni odpowiada kolor zielony, zaś kątowi 240 stopni kolor niebieski (rysunek 7.17). Rysunek 7.17. Koło kolorów

Nasycenie (ang. saturation) ma wartość 100%. Określa ono stopień nasycenia kolorem. Może przyjmować wartości od 0% (brak koloru, poziom szarości uzależniony od jaskrawości) do 100% (nasycenie maksymalne).

232

CSS3. Zaawansowane projekty

Jasność (ang. lightness) może przyjmować wartości od 0% (czerń) do 100% (biel). Wartość 50% jest neutralna. Jak zadeklarować kolor w standardzie HSL? Oto przykład: div { width: 500px; height: 80px; background-color: hsl(36, 100%, 50%); border: 2px solid black; position: absolute; left: 50px; top: 100px; padding: 50px; } body { padding: 40px; background-color: hsl(36, 100%, 75%); }

Obszar ma kolor background-color: hsl(36, 100%, 50%), zaś tło dokumentu — background-color: hsl(36, 100%, 75%). Różnica polega tylko na innej wartości ostatniego parametru. Na rysunku 7.18 można sprawdzić, jaki wpływ ma ona na wygląd dokumentu. Rysunek 7.18. Tło ramki ma kolor background-color: hsl(36, 100%, 75%), zaś tło dokumentu background-color: hsl(36, 100%, 50%)

Odcień, nasycenie, jasność i przezroczystość Farba, do której dodamy więcej rozpuszczalnika, będzie rzadsza. Możemy utworzyć cieńszą warstwę, przez którą prześwitywać będzie podłoże. Nie zawsze całkowite zamalowanie tła jest celowe. Gdy malujemy drewno, wówczas układ słojów stanowi ozdobę, której zakrycie będzie niekorzystne.

Rozdział 7.  Przekształcenia geometryczne

233

W technice komputerowej również możemy regulować przezroczystość przez dodanie „rozpuszczalnika”. Nosi on nazwę alfa lub w skrócie a. Kolory rozcieńczone noszą nazwę HSLa. Zapis informacji o kolorze ma postać np. hsla(0, 75%, 75%, 0.5). Czwarta wartość oznacza krycie, czyli mówiąc obrazowo, zawartość farby w mieszance. Im liczba jest większa, tym kolor intensywniejszy. Jak zadeklarować kolor w standardzie HSLa? Oto przykład: div { width: 500px; height: 80px; background-color: hsla(36, 100%, 50%, 0.5); border: 2px solid black; position: absolute; left: 50px; top: 100px; padding: 50px; } body { padding: 40px; background-color: hsla(36, 100%, 50%, 0.3); }

Obszar ma kolor background-color: hsla(36, 100%, 50%, 0.5), zaś tło dokumentu — background-color: hsla(36, 100%, 50%, 0.3). Różnica polega tylko na wartości ostatniego parametru. Na rysunku 7.19 można sprawdzić, jaki wpływ ma ona na wygląd dokumentu. Rysunek 7.19. Tło ramki ma kolor hsla(36, 100%, 50%, 0.5), zaś tło dokumentu background-color: hsla(36, 100%, 50%, 0.3). Im mniejszą wartość ma współczynnik a, tym krycie przez kolor jest słabsze

234

CSS3. Zaawansowane projekty

Rozdział 8.

Tło

Jeszcze nie tak dawno temu tło najczęściej kojarzyło mi się z jednolitym kolorem, który sprawiał, że biała powierzchnia ekranu nie raziła przeglądającego stronę. Alternatywą było tło obrazkowe. Oprócz stworzenia lepszych warunków do czytania mogło zawierać również elementy ozdobne lub dostarczające dodatkowych informacji (np. logo firmy). Odkąd nastał standard CSS3, a autorzy przeglądarek umożliwiają jego obsługę, wygląd stron internetowych zaczął się radykalnie zmieniać.

8.1. Ruchome tło Do utworzenia ruchomego tła wykorzystamy tym razem obrazki (rysunki 8.1, 8.2 i 8.3). Rysunek 8.1. Pierwszy z elementów tła w oknie przeglądarki

Rysunek 8.2. Drugi z elementów tła w oknie przeglądarki

Rysunek 8.3. Trzeci z elementów tła w oknie przeglądarki

236

CSS3. Zaawansowane projekty

W przykładzie tło będzie składało się z trzech elementów. Nic nie stoi na przeszkodzie, aby ich liczba była inna. Gwiazdki są umieszczone na przezroczystym tle. Dlatego pliki mają format .png. W swoim przykładzie możesz użyć dowolnego tła i dowolnego formatu plików wyświetlanych przez przeglądarkę. Teraz pora na poskładanie z klocków dokumentu. Rozpoczniemy od dokumentu HTML:

171



171

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar eleifend nisi. Morbi vel nisi accumsan, convallis sapien at, pharetra sapien. Curabitur facilisis rhoncus congue. Sed suscipit ac mauris eget sagittis. Mauris et tellus turpis. Suspendisse in mi at ligula venenatis lacinia quis et lorem. Praesent scelerisque varius orci non efficitur. Etiam quis urna eget justo consectetur posuere.

Element został użyty przed , aby również i nagłówek znajdował się na tle gwiazdek. Po nagłówku znajduje się „wypełniacz” strony, czyli tekst akapitowy. Teraz pora na pierwszą wersję pliku CSS: h1{ font-size:48px; color:DeepSkyBlue; } #tlo { background-image:url('tlo_01.png'), url('tlo_02.png'), url('tlo_03.png'); } #akapit { width:600px; margin:40px auto; text-align: justify; font-weight: bold; padding:50px; border:6px solid rgba(200,200,255,0.2); background-color:rgba(255,255,255,0.9); font-size:20px; }

Ponieważ tło jest ciemne, wtapiały się w niego litery nagłówka. Stąd zdefiniowany został dla nich styl h1. Czcionka jest ciut większa od standardowego nagłówka, zaś jej kolor powoduje, że jest dobrze widoczna.

Rozdział 8.  Tło

237

Jako tło strony użyte zostały obrazki tlo_01.png, tlo_01.png, tlo_01.png (rysunki od 8.1 do 8.3). Tekst akapitowy znajduje się w ramce. Wnętrze ramki ma tło jaśniejsze niż tło całej strony. Dzięki temu widoczne są: tło i napis. Kolor tła ramki został zapisany z użyciem standardu RGBa. Możliwe było zdefiniowanie przezroczystości tła ramki. Dzięki temu tło strony jest widoczne. Na rysunku 8.4 pokazano okno przeglądarki po wczytaniu pliku 171.htm. Rysunek 8.4. Ilustracja jest dowodem na to, że obraz zastępuje tysiąc słów. Czy ktoś na podstawie listingu, a nawet jego opisu wyobrażał sobie, jak będzie wyglądało to okno przeglądarki?

Miała być animacja, a tymczasem strona jest statyczna. Trzeba więc „zamontować” źródło napędu. Oto plik CSS: h1{ font-size:48px; color:DeepSkyBlue; } #tlo { background-image:url('tlo_01.png'), url('tlo_02.png'), url('tlo_03.png'); animation:gwiazdy 500s linear infinite; -webkit-animation:gwiazdy 500s linear infinite; /* Google Chrome, Safari, Opera 15+ */ } #akapit { width:600px; margin:40px auto; text-align: justify; font-weight: bold; padding:50px; border:6px solid rgba(200,200,255,0.2); background-color:rgba(255,255,255,0.9); font-size:20px;

238

CSS3. Zaawansowane projekty } @keyframes gwiazdy { 0% {background-position:0 0, 0 0, 0 0;} 100% {background-position:10000px 0, 7500px 0, 5000px 0;} } /* Google Chrome, Safari, Opera 15+ */ @-webkit-keyframes gwiazdy { 0% {background-position:0 0, 0 0, 0 0;} 100% {background-position:10000px 0, 7500px 0, 5000px 0;} }

W sekcji tło dodana została linia animation:gwiazdy 500s linear infinite. Animacja nosi nazwę gwiazdy. Jej pełen cykl trwa 500s. Przez cały ten czas elementy przesuwają się ze stałą prędkością (linear). Aby animacja nie skończyła się po jednym cyklu, a była powtarzana tak długo, jak długo w oknie przeglądarki załadowany będzie dokument HTML, dodany został parametr infinite. Elementy w ruch wprawia kod: @keyframes gwiazdy { 0% {background-position:0 0, 0 0, 0 0;} 100% {background-position:10000px 0, 7500px 0, 5000px 0;} }

Ruch odbywa się między dwoma położeniami skrajnymi 0% oraz 100%. W jaki sposób powstał efekt gwiazd przesuwających się na tle gwiazd? Każdy obrazek w tym samym czasie 500 sekund ma do przebycia inną drogę: 10000px, 7500px i 5000px. Stąd wrażenie ruchu gwiazd (rysunek 8.5). Rysunek 8.5. Porównanie położenia gwiazd na rysunkach 8.4 i 8.5 pozwala się domyślać, że się one przesuwają. Z FTP1 wydawnictwa możesz ściągnąć pliki opisane w przykładzie. Modyfikując je, możesz uzyskać projekt strony, który będzie odpowiadał Twoim potrzebom

Nie wprowadzaj w pliku więcej niż jednej zmiany za jednym razem. Jeżeli okaże się, że dokument HTML nie wygląda tak, jak tego oczekiwałeś — będzie wiadomo, gdzie szukać przyczyny. 1

ftp://ftp.helion.pl/przyklady/css3zp.zip

Rozdział 8.  Tło

239

8.2. Skalowanie tła Właściwość background-size umożliwia rozciąganie i kompresowanie obrazu tła. Ma ona składnię: background-size: auto|length|cover|contain|initial|inherit

gdzie:  auto — to wartość domyślna. Szerokość oraz wysokość obrazu zapisane są

w background-image.  length — określa szerokość i wysokość obrazu tła. Pierwsza wartość dotyczy

szerokości, a druga wysokości. Jeżeli podana zostanie tylko jedna wartość, druga jest ustawiana automatycznie.  percentage — określa szerokość i wysokość obrazu tła jako procent elementu

wymiarów rodzica. Pierwsza wartość dotyczy szerokości, a druga wysokości. Jeżeli podana zostanie tylko jedna wartość, druga jest ustawiana automatycznie.  cover — obrazek tła jest skalowany tak, aby zajął całe miejsce przewidziane

dla tła. Niektóre części obrazka użytego jako tło mogą nie być widoczne w obszarze pozycjonowania tła.  contain — skaluje obraz do największego rozmiaru — takiego, aby zarówno

szerokość, jak i wysokość zmieściły się wewnątrz obszaru.  initial — przywraca właściwości wartość domyślną.  inherit — dziedziczy właściwości z elementu nadrzędnego.

Teoria teorią, a najlepiej sprawdzić działanie tych właściwości w praktyce. Oto plik CSS: h1{ font-size:48px; color:Sienna; } #akapit { font-size:24px; color:SaddleBrown; text-align: justify; background: url("logo_helionpl.png"); background-size: 100% 100%; background-repeat: no-repeat; }

Rolę tła pełni obrazek logo_helionpl.png. Zajmie on cały obszar elementu

. Rozciągnięcie go na cały obszar wymusza linia background-size: 100% 100%. Na rysunku 8.6 pokazano okno przeglądarki po wczytaniu pliku 173.htm. Zmiana rozmiaru okna powoduje dostosowanie do niego rozmiaru akapitu i logo (rysunek 8.7).

240

CSS3. Zaawansowane projekty

Rysunek 8.6. Tło zostało rozciągnięte na obszar całego akapitu

Rysunek 8.7. Logo niczym z gumy dostosowuje się do rozmiarów obszaru. Przy dużej deformacji ma wygląd karykaturalny

Gdy background-size: 100% 100% w pliku CSS zastąpimy przez background-size: auto auto, wówczas niezależnie od rozmiarów obszaru, dla którego obrazek jest tłem, będzie on miał rozmiar oryginalny (rysunek 8.8). Rysunek 8.8. Hm… jeden obrazek zajmujący niewielką część okna to nie tło. To raczej logo

Jak pogodzić zachowanie rozmiarów obrazka i wypełnienia nim całego obszaru? Konieczne jest usunięcie z pliku CSS zakazu powtarzania obrazka, czyli background-repeat: no-repeat. Plik CSS będzie miał więc postać: h1{ font-size:48px; color:lime;

Rozdział 8.  Tło

241

} #akapit { font-size:24px; color:green; text-align: justify; background: url("logo_helionpl.png"); background-size: auto auto; background-repeat: repeat; }

Okno przeglądarki po wczytaniu dokumentu będzie wypełnione obrazkiem tła. Zostanie on „ucięty”, aby zmieścił się w obszarze okna (rysunki 8.9 i 8.10). Rysunek 8.9. Obrazek użyty w charakterze tła ma oryginalne wymiary

Rysunek 8.10. Obrazek idealnie dostosowuje się do rozmiarów obszaru, dla którego jest tłem. Oczywiście na stronie użytkowej należy zastosować tło blade, prześwitujące, aby nie powodowało nieczytelności tekstu

242

CSS3. Zaawansowane projekty

Gdy obrazek o wymiarach oryginalnych jest zbyt duży, można go przeskalować. Wystarczy zredukować jeden wymiar, a drugi zostanie dostosowany automatycznie (rysunek 8.11). Oto plik CSS: h1{ font-size:48px; color:red; } #akapit { font-size:24px; color:black; font-weight:bold; text-align: justify; background: url("logo_helionpl.png"); background-size: 3%; background-repeat: repeat; }

Rysunek 8.11. Mały obrazek w tle nie powoduje pogorszenia czytelności tekstu

8.3. Tło — usuwanie Było już tło ruchome i statyczne, tło małe i duże. Co zrobić, gdy na jednej stronie serwisu nie chcemy tła? Dlaczego nie chcemy? Cały serwis ma tła obrazkowe, a na jednej stronie chcemy mieć tło jednolite. Wtedy można je usunąć. Nie trzeba w tym celu pisać podania do autora strony. Wystarczy, że przewidzi on taką możliwość. Metody postępowania są dwie: 1. Do strony nie dodamy zewnętrznego arkusza stylów. Aby zachować wygląd

zgodny z resztą serwisu, należy w wewnętrznym arkuszu wpisać wszystkie deklaracje z arkusza zewnętrznego, a pominąć tylko te, które dotyczą tła.

Rozdział 8.  Tło

243

Rozwiązanie mało atrakcyjne, bo gdy zajdzie potrzeba zmiany wyglądu serwisu, będziemy musieli pamiętać o edytowaniu wszystkich stron zawierających arkusz wewnętrzny. 2. W specyfikacji miejsca, które ma być pozbawione tła, wpiszemy: selektor { background: none }

gdzie selektorem może być praktycznie dowolny znacznik, np.

— akapit, — tytuł czy — komórka tabeli. W tym przykładzie zmiana zostanie wprowadzona w pliku HTML. Pierwotnie ma on postać:

177



177

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar eleifend nisi. Morbi vel nisi accumsan, convallis sapien at, pharetra sapien. Curabitur facilisis rhoncus congue. Sed suscipit ac mauris eget sagittis. Mauris et tellus turpis. Suspendisse in mi at ligula venenatis lacinia quis et lorem. Praesent scelerisque varius orci non efficitur. Etiam quis urna eget justo consectetur posuere.

Akapit drugi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar eleifend nisi. Morbi vel nisi accumsan, convallis sapien at, pharetra sapien. Curabitur facilisis rhoncus congue. Sed suscipit ac mauris eget sagittis. Mauris et tellus turpis. Suspendisse in mi at ligula venenatis lacinia quis et lorem. Praesent scelerisque varius orci non efficitur. Etiam quis urna eget justo consectetur posuere.

Zostały w nim umieszczone dwa nagłówki o tym samym poziomie, czyli h1. Plik CSS: h1{ font-size:48px; color:red; background-color: #ddd; } #akapit { font-size:24px; color:black; font-weight:bold; text-align: justify; background-color: #eee; }

244

CSS3. Zaawansowane projekty

Nagłówek h1 zapisany został czcionką o rozmiarze 48px w kolorze czerwonym (color:red) umieszczoną na tle w kolorze szarym (background-color: #ddd). Rezultat wyświetlenia dokumentu w przeglądarce można zobaczyć na rysunku 8.12. Rysunek 8.12. Oba nagłówki są sformatowane stylem zapisanym w arkuszu stylów

Chcemy z drugiego nagłówka h1 usunąć tło. Zmiana ma dotyczyć wyłącznie bieżącego dokumentu. Jak to zrobić? Należy lokalnie wstawić styl style="background: none". Plik HTML będzie miał postać:

178



178

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar eleifend nisi. Morbi vel nisi accumsan, convallis sapien at, pharetra sapien. Curabitur facilisis rhoncus congue. Sed suscipit ac mauris eget sagittis. Mauris et tellus turpis. Suspendisse in mi at ligula venenatis lacinia quis et lorem. Praesent scelerisque varius orci non efficitur. Etiam quis urna eget justo consectetur posuere.

Akapit drugi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar eleifend nisi. Morbi vel nisi accumsan, convallis sapien at, pharetra sapien. Curabitur facilisis rhoncus congue. Sed suscipit ac mauris eget sagittis.

Rozdział 8.  Tło

245

Mauris et tellus turpis. Suspendisse in mi at ligula venenatis lacinia quis et lorem. Praesent scelerisque varius orci non efficitur. Etiam quis urna eget justo consectetur posuere.

Na rysunku 8.13 pokazano stronę HTML po wprowadzeniu zmiany. Rysunek 8.13. Tym razem plik CSS nie został zmieniony. Zawiera on ustawienia globalne dla całej witryny. Ich rezultatem są między innymi ustawienia rozmiaru i koloru czcionki nagłówka. Drugi nagłówek ma lokalnie zapisany brak tła. Ustawienie lokalne jest silniejsze od globalnego

8.4. Tło wieloobrazowe CSS pozwala na używanie więcej niż jednego obrazka jako tła. Konieczne jest przygotowanie odpowiedniej liczby obrazków oraz oddzielenie deklaracji przecinkami. Brzmi to może zawile, ale plik CSS ma konstrukcję prostą: h1{ font-size:48px; color:red; background-color: #ddd; } #akapit { font-size:24px; color:white; font-weight:bold; text-align: justify; background: url(zzz.png) 10% 10% no-repeat, url(yyy.png) 20% 20% no-repeat, url(xxx.png) 30% 30% no-repeat; }

246

CSS3. Zaawansowane projekty

Jako tło akapitu użyte zostały trzy obrazki (rysunki: 8.14, 8.15 i 8.16) . Wygląd okna przeglądarki po wczytaniu dokumentu został pokazany na rysunku 8.17. Rysunek 8.14. Plik xxx.png w oknie przeglądarki

Rysunek 8.15. Plik yyy.png w oknie przeglądarki

Rysunek 8.16. Plik zzz.png w oknie przeglądarki

Rysunek 8.17. Tekst w kolorze tła okna. Ciemne tło dodane w postaci pliku graficznego powoduje, że fragment z dodanym tłem graficznym staje się widoczny

8.5. Tło z gradientem liniowym Tło wieloobrazowe wymaga użycia wielu plików graficznych o różnych właściwościach. Złożenie ich daje efekt końcowy. Kolor, który zmienia się łagodnie wzdłuż linii wytyczonej na obrazku, daje wrażenie gradientu liniowego. Można go wykonać w programie graficznym, ale takie rozwiązanie powoduje zwiększenie rozmiarów dokumentu przez dodanie dużego pliku.

Rozdział 8.  Tło

247

Potrzebne jest rozwiązanie oszczędniejsze? Można skorzystać z CSS. Właściwość linear-gradient ma następującą składnię: linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...)

gdzie:  kierunek — to sposób rozłożenia barw. Można go podać na dwa sposoby.

Pierwszy sposób polega na użyciu nazwy kierunku:  to top — przejście kolorów nastąpi pionowo z dołu do góry (odpowiednik 0deg),  to right top — ukośnie z lewego dolnego do prawego górnego narożnika,  to right — poziomo z lewej do prawej strony (odpowiednik 90deg),  to right bottom — ukośnie z lewego górnego do prawego dolnego narożnika,  to bottom — pionowo z góry do dołu (odpowiednik 180deg — domyślnie),  to left bottom — ukośnie z prawego górnego do lewego dolnego narożnika,  to left — poziomo z prawej do lewej strony (odpowiednik 270deg),  to left top — ukośnie z prawego dolnego do lewego górnego narożnika.

Drugi sposób polega na podaniu kąta, pod którym linia będzie przebiegała przez obrazek:  kąt — liczony zgodnie z ruchem wskazówek zegara z wartością 0deg

skierowaną pionowo w górę, a 180deg — pionowo w dół.  Kolor1 odległość1, kolor2 odległość2... — kolejne kolory i ich odległości

na linii przejścia gradientu. Obowiązkowo trzeba podać przynajmniej dwie pary „kolor – odległość”. Każda taka para jest rozdzielona od kolejnej znakiem przecinka. Określenie odległości kolorów jest opcjonalne. Gdy nie będzie ono użyte, podane barwy zostaną rozłożone równomiernie w gradiencie. Jak teorię zamienić w praktykę, czyli spowodować, aby w oknie przeglądarki wyświetlona została strona z tłem gradientowym? Oto plik CSS: h1{ font-size:48px; color:red; background-color: #000; } #akapit { font-size:24px; color:black; font-weight:bold; text-align: justify; background: -webkit-linear-gradient(white, red); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(white, red); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(white, red); /* For Firefox 3.6 to 15 */ background: linear-gradient(white, red); /* Standard syntax */ }

248

CSS3. Zaawansowane projekty

Ponieważ deklaracja background: linear-gradient znajduje się w sekcji #akapit, tło gradientowe będzie znajdowało się tylko w niej (rysunek 8.18). Rysunek 8.18. Akapit ma tło gradientowe liniowe dwukolorowe

Jak zmienić kierunek zmiany kolorów? Można zapisać je w odwrotnej kolejności (rysunek 8.19) lub dodać słowo bottom (rysunek 8.20). Rysunek 8.19. Rezultat użycia deklaracji background: linear-gradient(red, white);

Rozdział 8.  Tło

249

Rysunek 8.20. Rezultat użycia deklaracji background: linear-gradient(to top, red, white);

Czy linia, wzdłuż której zachodzi transformacja kolorów, może biec ukośnie? Tak, a umożliwia to polecenie xdeg, gdzie x oznacza wartość kąta (rysunek 8.21). Rysunek 8.21. Rezultat użycia deklaracji lineargradient(30deg, red, white);

Czy można zaburzyć równomierność transformacji kolorów? Tak, a pozwala na to określenie w procentach obszaru przeznaczonego dla preferowanego koloru (rysunek 8.22). Czy tylko dwa kolory mogą tworzyć gradient? Ależ skąd! Tło liniowe gradientowe może mienić się kolorami jak tęcza (rysunek 8.23). Posługiwanie się miarą kątową powoduje, że linia transformacji będzie biegła pod dokładnie określonym kątem. Jeżeli chcemy, aby biegła ona po przekątnej obszaru, lepiej posłużyć się określeniem to right top (rysunek 8.24).

250 Rysunek 8.22. Rezultat użycia deklaracji background: linear-gradient(225deg, red 80%, white);

Rysunek 8.23. Rezultat użycia dla tła nagłówka deklaracji: background: lineargradient(to left, red, orange, yellow, lime, blue, purple, fuchsia); oraz dla tła akapitu deklaracji: background: linear-gradient(to right, red, orange, yellow, lime, blue, purple, fuchsia);

Rysunek 8.24. Polecenia to left top, to right top umożliwiają dokładne wycelowanie w narożnik pola osią, wzdłuż której następuje metamorfoza kolorów

CSS3. Zaawansowane projekty

Rozdział 8.  Tło

251

Jeżeli gradient liniowy będzie powtarzalny wewnątrz obszaru, wówczas uzyskamy efekt podobny do wypełnienia obszaru panelami. Rezultat taki można uzyskać dzięki poleceniu repeating-linear-gradient (rysunek 8.25). Rysunek 8.25. W tle nagłówka zastosowano specyfikację repeatinglinear-gradient(red, yellow 10%, green 20%);, natomiast w tle akapitu specyfikację repeating-lineargradient(red, yellow 20%, green 10%);

8.6. Tło z gradientem promieniowym Bardzo podobne w działaniu do polecenia generującego tło z gradientem liniowym jest polecenie radial-gradient. Ma ono następującą składnię background: radial-gradient(kształt rozmiar at pozycja, kolor1 odległość1, kolor2 odległość2...)

Jako kształt należy wpisać:  circle — okrąg (domyślnie, gdy jako rozmiar podano pojedynczy promień,

określony w jednostkach długości, a nie w procentach).  ellipse — elipsa.

Jako rozmiar należy wpisać:  closest-side — gradient będzie się rozchodził do najbliższej krawędzi

elementu.  farthest-side — gradient będzie się rozchodził do najdalszej krawędzi.  closest-corner — gradient będzie się rozchodził do najbliższego narożnika.  farthest-corner — gradient będzie się rozchodził do najdalszego narożnika

(domyślnie).  promień — podany za pomocą jednostek długości lub procentowo.

252

CSS3. Zaawansowane projekty  poziom pion — poziomy i pionowy promień elipsy, określony za pomocą

jednostek długości lub procentowo. Pozycję definiuje się identycznie jak w przypadku położenia tła obrazkowego. Kolor1 odległość1, kolor2 odległość2... — oznaczają to samo, co w przypadku

gradientu liniowego. Sprawdzanie w praktyce możliwości, jakie daje gradient promienisty (zwany także promieniowym), zaczniemy od dwóch kolorów: czarnego i białego. Oto plik HTML:

189



189 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar eleifend nisi. Morbi vel nisi accumsan, convallis sapien at, pharetra sapien. Curabitur facilisis rhoncus congue. Sed suscipit ac mauris eget sagittis. Mauris et tellus turpis. Suspendisse in mi at ligula venenatis lacinia quis et lorem. Praesent scelerisque varius orci non efficitur. Etiam quis urna eget justo consectetur posuere.

Zawiera on trzy zasadnicze elementy: nagłówek, element oraz odwołanie do pliku CSS. Dzięki temu ostatniemu wygląd dokumentu wczytanego do przeglądarki zależy od arkusza stylów: h1{ font-size:48px; color:black; background: -webkit-radial-gradient(black, white); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(black, white); /* For Opera 11.6 to 12.0 */ background: -moz-radial-gradient(black, white); /* For Firefox 3.6 to 15 */ background: radial-gradient(black, white); /* Standard syntax */ } #akapit { font-size:24px; color:clack; font-weight:bold; text-align: justify; background: -webkit-radial-gradient(white, black); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(white, black); /* For Opera 11.6 to 12.0 */ background: -moz-radial-gradient(white, black); /* For Firefox 3.6 to 15 */ background: radial-gradient(white, black); /* Standard syntax */ }

W nagłówku zostało utworzone wypełnienie przy wykorzystaniu deklaracji radialgradient(black, white). Wypełnienie tła elementu różni się tylko (a może

Rozdział 8.  Tło

253

aż) kolejnością kolorów radial-gradient(white, black). Na rysunku 8.26 można obejrzeć rezultat naszych poczynań. Rysunek 8.26. Kolor pierwszy od lewej w specyfikacji wypełnienia promienistego znajduje się w środku obszaru

Pytanie standardowe brzmi: czy można użyć większej liczby kolorów, które będą ulegały metamorfozie? Odpowiedź brzmi: naturalnie! Oto plik CSS: h1{ font-size:48px; color:black; background: -webkit-radial-gradient(yellow, gold, orange, red); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(yellow, gold, orange, red); /* For Opera 11.6 to 12.0 */ background: -moz-radial-gradient(yellow, gold, orange, red); /* For Firefox 3.6 to 15 */ background: radial-gradient(yellow, gold, orange, red); /* Standard syntax */ } #akapit { font-size:24px; color:clack; font-weight:bold; text-align: justify; background: -webkit-radial-gradient(red, orange, gold, yellow); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(red, orange, gold, yellow); /* For Opera 11.6 to 12.0 */ background: -moz-radial-gradient(red, orange, gold, yellow); /* For Firefox 3.6 to 15 */ background: radial-gradient(red, orange, gold, yellow); /* Standard syntax */ }

Na rysunku 8.27 pokazano okno przeglądarki po wczytaniu pliku 190.htm. Do tej pory gradient umiejscowiony był na środku obszaru. Od środka następowała zmiana kolorów. Czy możliwe jest inne ułożenie punktu, od którego postępuje metamorfoza? Tak! Spójrz na rysunki 8.28 i 8.29. Domyślnie przejście między kolorami jest równomierne. Czy możliwe jest zaburzenie tej proporcji? Tak! Możesz się o tym przekonać, patrząc na rysunek 8.30.

254 Rysunek 8.27. Gradient promienisty z użyciem czterech kolorów. Nazwy ich podajemy tak, jak mają układać się od środka. Nagłówek ma kolejność yellow, gold, orange, red, zaś akapit -red, orange, gold, yellow

Rysunek 8.28. W definicji tła nagłówka dodano closest-side at 25% 75%, a w definicji tła akapitu closestcorner at 25% 25%

Rysunek 8.29. W definicji tła nagłówka użyto farthest-side at 25% 75%, zaś w definicji tła akapitu farthestcorner at 25% 25%

Rysunek 8.30. W tle nagłówka przewagę ma czerwień. Wymusił to zapis yellow 5%, gold 10%, orange 20%, red 40%. W tle akapitu wyeksponowany został środek w kolorze żółtym. Stało się to dzięki zapisowi yellow 10%, gold 30%, orange 60%, red 90%

CSS3. Zaawansowane projekty

Rozdział 9.

Layout Dokument HTML powinien zawierać nie tylko treść, ale również prezentować ją w odpowiedniej formie. Obrazek na stronie ma swoje ustalone miejsce. Wynika ono z kolejności kodu w pliku HTML. Czy można umieścić element graficzny w innym miejscu? Tak. Czynność ta nazywa się pozycjonowaniem. Tekst czyta się lepiej, gdy śledząc go, nie trzeba przesuwać wzrokiem wzdłuż całego ekranu. Warto w tym celu podzielić tekst na łamy, czyli w realiach HTML umieścić go w tabeli oraz elementach div. Wystarczy te zmiany zastosować w praktyce, a dokument będzie wyglądał zdecydowanie inaczej, niż wynika to z domyślnych parametrów.

9.1. Umieszczanie napisów lub obrazków w wybranym miejscu Umieszczanie elementów w wybranym miejscu strony zwane jest pozycjonowaniem. Na szczęście nie jest to pozycjonowanie takie jak w dowcipie: Ilu specjalistów SEO potrzeba, żeby zmienić żarówkę? oświetlenie światło żarówka zamiana tanio Ma ono na celu określenie pozycji elementu. Do tego celu służy właściwość position. Standardowo możemy umieszczać elementy obok siebie. Pozycjonowanie umożliwia ulokowanie elementów jeden pod drugim na przykład wówczas, gdy rozmiary ich są zbyt duże, aby zmieściły się w oknie przeglądarki obok siebie. Jest wiele wariantów pozycjonowania. Każdy z nich ma bardzo szeroki obszar zastosowań. Jeżeli zależy nam na tym, aby element znalazł się w określonym miejscu strony, stosujemy pozycjonowanie absolutne. Jeżeli podczas przewijania strony element ma się nie przesuwać, stosujemy pozycjonowanie względne itd.

256

CSS3. Zaawansowane projekty

Pozycjonowanie statyczne Domyślnie elementy HTML są pozycjonowane statycznie. Położenie ich zależy od układu strony. Nie mają na nie wpływu właściwości top, bottom, left i right. Pozycjonowanie ma następującą składnię: position: static|absolute|fixed|relative|initial|inherit;

gdzie: static — wartość domyślna. Elementy wyświetlane są w takiej kolejności,

w jakiej zostały umieszczone w dokumencie. absolute — położenie elementu jest określane w stosunku do pierwszego

niestatycznego elementu. fixed — element jest pozycjonowany w stosunku do okna przeglądarki. relative — element jest pozycjonowany względem pozycji normalnej.

Zatem "left:30" dodaje 30 pikseli do lewej współrzędnej elementu. initial — nadaje właściwości wartość początkową. inherit — powoduje dziedziczenie od elementu nadrzędnego.

Dzięki pozycjonowaniu możliwe jest wyłączanie wybranych elementów strony z pozycjonowania względnego (przywracanie im pozycjonowania domyślnego). Plik HTML ma postać:

194



194 194a 194b 194c

Zawiera on cztery nagłówki h1. Drugi z nich (194a) ma lokalnie określone pozycjonowanie: style="position: static". Położenie pozostałych elementów opisane jest w arkuszu stylów: h1{ font-size:48px; color:black; position: relative; left: 50% }

Rozdział 9.  Layout

257

Specyfikacja position: relative; left: 50% powoduje, że nagłówek h1 został umieszczony w połowie szerokości strony, licząc od lewego marginesu. Jak wygląda dokument wyświetlony w oknie przeglądarki? Można się o tym przekonać, oglądając rysunek 9.1. Rysunek 9.1. Dla całego dokumentu obowiązują ustawienia globalne — z wyjątkiem elementów, dla których zdefiniowano oddzielne właściwości. Takim elementem jest tu nagłówek 194a

Pozycjonowanie absolutne Ma ono następującą składnię: position: absolute; parametr

gdzie jako parametr można podać: left: wartość — odległość od lewej krawędzi bloku obejmującego, top: wartość — odległość od górnej krawędzi bloku obejmującego, right: wartość — odległość od prawej krawędzi bloku obejmującego, bottom: wartość — odległość od dolnej krawędzi bloku obejmującego.

Wartość oznacza odległość od podanej krawędzi bloku. Wpisując ją, należy używać jednostek długości. Wartość ujemna oznacza przesunięcie w przeciwną stronę.

Możliwe jest łączenie parametrów. Oto plik HTML:

258

CSS3. Zaawansowane projekty 195



195 195a 195b 195c

Znajduje się w nim jeden nagłówek h1 oraz trzy nagłówki h2. Oto plik CSS: h1{ font-size:48px; color:black; } h2 { font-size:24px; position: absolute; left: 100px; top: 150px; }

Nagłówek h1 ma położenie domyślne. Nagłówek h2 jest oddalony od lewego marginesu o 100 pikseli i od górnego marginesu o 150 pikseli. Efekt złożenia dwóch plików, czyli HTML i CSS, można obejrzeć na rysunku 9.2. Rysunek 9.2. Arkusz stylu zastosowany został do wszystkich elementów. Zażądano, aby wszystkie elementy h2 znajdowały się w tym samym miejscu i dokładnie tak się stało! Stąd wiadomo, dlaczego litera w nagłówku h2 ma dziwny wygląd. Złożyły się na nią, w przenośni i dosłownie, litery a, b, c, d

Rozdział 9.  Layout

259

Pozycjonowanie ustalone Ma ono następującą składnię: position: fixed; parametry

gdzie jako parametry można podać: left: wartość — odległość od lewej krawędzi okna, top: wartość — odległość od górnej krawędzi okna, right: wartość — odległość od prawej krawędzi okna, bottom: wartość — odległość od dolnej krawędzi okna.

Wartość oznacza odległość od podanej krawędzi okna przeglądarki. Należy ją wpisać, używając jednostek długości. Wartość ujemna oznacza przesunięcie w przeciwną stronę.

Możliwe jest łączenie parametrów. Oto plik HTML:

196



196 196a

Oto plik CSS: h1{ font-size:48px; color:black; } h2 { font-size:24px; position: absolute; top: 1px; right: 475px; color: red; }

Nagłówek h2 został odsunięty od góry okna o 1 piksel, zaś od prawej krawędzi o 475 pikseli. Na rysunku 9.3 można zobaczyć, jaki to dało efekt.

260

CSS3. Zaawansowane projekty

Rysunek 9.3. Mimo że w pliku HTML nagłówek h2 znajduje się po nagłówku h1, wyświetlany jest przed nim. Należy pamiętać, że położenie w poziomie nagłówka h2 jest określone w stosunku do prawej krawędzi okna. Zmiana rozmiaru okna (patrz rysunek 9.4) powoduje przesunięcie nagłówków h1 i h2 Rysunek 9.4. Nagłówek h2 ma określone położenie względem prawej krawędzi okna. Gdy okno zostało rozciągnięte w poziomie, nagłówek h2 odsunął się od lewego marginesu

Pozycjonowanie względne Pozycjonowanie względne (relatywne) pozwala przesunąć wybrany element w dowolną stronę względem jego położenia spoczynkowego, czyli takiej pozycji, gdy nie używamy dla niego żadnego pozycjonowania. Ma ono następującą składnię: position: relative; parametry

gdzie jako parametry można podać: left: wartość — odległość od lewej krawędzi położenia spoczynkowego, top: wartość — odległość od górnej krawędzi położenia spoczynkowego, right: wartość — odległość od prawej krawędzi położenia spoczynkowego, bottom: wartość — odległość od dolnej krawędzi położenia spoczynkowego.

Wartość oznacza odległość od podanej krawędzi okna przeglądarki. Należy ją wpisać, używając jednostek długości. Wartość ujemna oznacza przesunięcie w przeciwną stronę.

Możliwe jest łączenie parametrów.

Rozdział 9.  Layout

261

Oto plik HTML:

197



197

Tekst akapitowy 1.

197a

Tekst akapitowy 2.

Oto plik CSS: h1{ font-size:48px; color:black; } h2 { font-size:24px; position: relative; left: -10px; top: -20px; color: red; }

W stosunku do pozostałego tekstu nagłówek h2 został przesunięty w lewo o 10 pikseli, zaś w stosunku do położenia nominalnego do góry o 20 pikseli. Na rysunkach 9.5 i 9.6 można zobaczyć, jaki to dało efekt. Rysunek 9.5. Nagłówek h2 został przesunięty względem pozycji, którą zajmował bez pozycjonowania

262

CSS3. Zaawansowane projekty

Rysunek 9.6. Pozycjonowanie względem lewej i górnej krawędzi okna powoduje, że podczas przesuwania okna element nie zmienia swego położenia

Jeśli pozycjonowanie względne wyznacza położenie elementu w miejscu, w którym domyślnie znajduje się inny element, zostanie on zasłonięty przez element pozycjonowany. Rozplanowując elementy, należy pamiętać, że często ustawienie elementów strony zależy od takich parametrów jak rozdzielczość ekranu czy rozmiary okna przeglądarki.

9.2. Zaokrąglone narożniki Standardowo HTML pozwala na utworzenie ramek prostokątnych. Jak to się więc działo, że w dokumentach były widoczne zaokrąglone narożniki (rysunek 9.7)? Używano plików graficznych (rysunek 9.8). Rysunek 9.7. Nad menu widoczne są elementy zaokrąglone

Rozdział 9.  Layout

263

Rysunek 9.8. Wpisanie w pasku adresu przeglądarki adresu elementu powoduje, że wyświetlony zostaje tylko on

Rozwiązanie z wykorzystaniem obrazków ma jednak wadę. Wymaga użycia programu graficznego oraz zwiększa objętość strony. Niedogodności te zostały dostrzeżone przez twórców standardu CSS, którzy w celu ich wyeliminowania dodali do specyfikacji właściwość border-radius. Ma ona następującą składnię: border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

gdzie: length — definiuje kształt narożników. Domyślną wartością jest 0. % — definiuje kształt narożników wyrażony w %. initial — nadaje właściwości wartość początkową. inherit — powoduje dziedziczenie od elementu nadrzędnego.

Do opisu kształtu narożników mogą zostać użyte cztery wartości. Dotyczą one kolejno lewego górnego, prawego górnego, prawego dolnego i lewego dolnego narożnika. Jeżeli pominięty zostanie opis narożnika lewego dolnego, oznacza to, że będzie on miał kształt identyczny jak prawy dolny. Gdy pominięty zostanie opis narożnika prawego górnego, oznacza to, że będzie on miał kształt identyczny jak lewy górny. Plik HTML:

198



198

Kolumna pierwsza Tekst akapitowy pierwszy.

Kolumna druga Tekst akapitowy drugi.

Kolumna trzecia Tekst akapitowy trzeci.

264

CSS3. Zaawansowane projekty

Zostały w nim zdefiniowane trzy bloki . Oznaczone są one jako id="pierwszy", id="drugi", id="trzeci". Dzięki temu w pliku CSS dla każdego z obszarów div można zdefiniować inne parametry. Plik CSS: h1{ font-size:22px; color:lime; } h2 { font-size:14px; color:lime; } body{ font-size:12px; color:lime; background:black; font-family: Verdana,Geneva,sans-serif; } #pierwszy { border: 2px solid lime; padding: 10px 20px; width: 200px; border-radius: 25px; position: absolute; top: 50px; left: 0px; } #drugi { border: 2px solid lime; padding: 10px 20px; width: 300px; border-radius: 25px; position: absolute; top: 50px; left: 254px; } #trzeci { border: 2px solid lime; padding: 10px 20px; width: 200px; border-radius: 25px; position: absolute; top: 50px; left: 608px; }

Dokument ma czarne tło (background:black) i limonkową czcionkę (color:lime). Obszar #pierwszy otoczony jest ciągłą ramką w kolorze limonkowym o szerokości 2 pikseli (border: 2px solid lime). Przestrzeń wokół tekstu określa parametr padding. Odstęp od lewej krawędzi elementu div wynosi 10 pikseli, zaś od góry elementu div — 20 pikseli (padding: 10px 20px).

Rozdział 9.  Layout

265

Szerokość elementu wynosi 200 pikseli (width: 200px). Wysokość elementu zależna jest od zawartej w nim treści, co oznacza, że element div rozciągnie się w pionie na tyle, aby pomieścić całą treść. Zaokrąglenie krawędzi opisywane jest przez podanie promienia. W przykładzie wynosi on 25 pikseli (border-radius: 25px). Aby trzy elementy strony znalazły się w tej samej linii, można umieścić je w komórkach tabeli i zastosować pozycjonowanie absolutne (position: absolute). Wszystkie trzy elementy div znajdują się w odległości 50 pikseli od marginesu górnego (top: 50px). Odległość od marginesu lewego poszczególnych elementów div została określona na 0, 254 i 608 pikseli. Przy wyliczaniu wartości trzeba wziąć pod uwagę szerokość obiektu div wraz z zaokrąglonymi narożnikami oraz odstęp. Jaki efekt uzyskano? Można go zobaczyć na rysunku 9.9.

Rysunek 9.9. Okno przeglądarki z trzema elementami div

To niesamowite, jak duży wpływ na wygląd strony ma wielkość promienia (rysunek 9.10).

Rysunek 9.10. Pierwsza kolumna znajduje się w ramce o promieniu zaokrąglenia 5 pikseli, druga w ramce o promieniu zaokrąglenia 10 pikseli, natomiast trzecia w ramce o promieniu zaokrąglenia 50 pikseli

Gdy już wiemy, jak zaokrąglić wszystkie krawędzie ramki, możemy pójść krok dalej i każdy z narożników zaokrąglić w inny sposób. Wymaga to zmian nie w pliku HTML, a jedynie w arkuszu stylów: h1{ font-size:22px; color:lime; }

266

CSS3. Zaawansowane projekty h2 { font-size:14px; color:lime; } body{ font-size:12px; color:lime; background:black; font-family: Verdana,Geneva,sans-serif; } #pierwszy { border: 2px solid lime; padding: 10px 20px; width: 200px; border-top-left-radius:4em; border-top-right-radius:4em; border-bottom-right-radius:8em; border-bottom-left-radius:2em; position: absolute; top: 50px; left: 0px;

} #drugi { border: 2px solid lime; padding: 10px 20px; width: 300px; border-top-left-radius:60px; border-top-right-radius:60px; border-bottom-right-radius:20px; border-bottom-left-radius:20px; position: absolute; top: 50px; left: 254px; } #trzeci { border: 2px solid lime; padding: 10px 20px; width: 200px; border-top-left-radius:30px; border-top-right-radius:100px; border-bottom-right-radius:10px; border-bottom-left-radius:80px; position: absolute; top: 50px; left: 608px; }

A oto i rezultat końcowy (rysunek 9.11).

Rozdział 9.  Layout

267

Rysunek 9.11. Zamiast sztywnych ramek mamy elastyczne linie, które otaczają zawartą w nich treść. Zaokrąglenie narożników zostaje zachowane (rysunek 9.12)

Rysunek 9.12. Tekstu przybyło, a kształt ramek nadal nie uległ zmianie

Zapis: border-top-left-radius:30px; border-top-right-radius:100px; border-bottom-right-radius:10px; border-bottom-left-radius:50px;

jest przejrzysty dla użytkownika. Zajmuje jednak wiele miejsca w kodzie strony. Jeżeli mniejsza objętość kodu jest ważniejsza niż czytelność kodu, można zastosować zapis skrócony, tj. zgodny z kierunkiem ruchu wskazówek zegara. Zaczyna się on od lewego górnego rogu, a wartości oddzielane są spacjami (rysunek 9.13): h1{ font-size:22px; color:lime; } h2 { font-size:14px; color:lime;

268

CSS3. Zaawansowane projekty } body{ font-size:12px; color:lime; background:black; font-family: Verdana,Geneva,sans-serif; } #pierwszy { border: 2px solid lime; padding: 10px 20px; width: 200px; border-radius:4em 4em 8em 2em; position: absolute; top: 50px; left: 0px; } #drugi { border: 2px solid lime; padding: 10px 20px; width: 300px; border-radius:60px 60px 20px 20px; position: absolute; top: 50px; left: 254px; } #trzeci { border: 2px solid lime; padding: 10px 20px; width: 200px; border-radius:30px 100px 10px 50px; position: absolute; top: 50px; left: 608px; }

Rysunek 9.13. Mimo skróconego zapisu rogi ramek nadal są zaokrąglone

Rozdział 9.  Layout

269

9.3. Projekt strony z odsyłaczami Aby uzyskać prostą, ale ciekawą optycznie stronę, wystarczy złożyć kilka poznanych do tej pory rozwiązań. Oto kod pliku HTML:









203 Podtytuł

Kategoria pierwsza Link 1
Link 2

Kategoria druga Link 3
Link 4

Kategoria trzecia Link 5
Link 6

W pliku rozszerzono sekcję META. Dzięki uzupełnieniu jej własnymi danymi powstanie plik, który można opublikować w internecie. Pomiędzy znacznikami należy wpisać własny tytuł strony, który nie powinien liczyć więcej niż 80 znaków. W sekcji META NAME="description" w miejscu przeznaczonym na opis strony należy wpisać, co na niej znajdziemy. Opis ten nie powinien liczyć więcej niż 200 znaków.

270

CSS3. Zaawansowane projekty

W sekcji META NAME="keywords" w miejscu przeznaczonym na słowa kluczowe należy wpisać własne słowa kluczowe, które posłużą internaucie do ich wpisania w wyszukiwarce, dzięki czemu będzie on mógł znaleźć odpowiednią stronę. Nie powinny one liczyć więcej niż 100 znaków. Tytuł, opis i słowa kluczowe powinny być ściśle związane z tym, co znajduje się na stronie. Strona to jak artykuł z pisma, natomiast tytuł, opis i słowa kluczowe to jak fiszki w katalogu bibliotecznym. W podobny sposób należy uzupełnić dane autora i właściciela praw autorskich. Strona internetowa jest jak roślinka, która musi być systematycznie podlewana, aby mogła rosnąć. Nawozem, dzięki któremu urośnie popularność Twojej strony, są informacje i częste aktualizacje. W sekcji NAME="REVISIT-AFTER" zadeklaruj, jak często będziesz wprowadzał nowe treści do strony. Jeżeli robot przeglądarki kilka razy zajrzy na stronę, a na niej nie będzie nowych treści — wyrzuci ją na daleki koniec kolejki, gdzie mało kto zagląda. I w ten sposób stracisz szansę na zainteresowanie internautów swoją stroną… W części body znajdują się nagłówki. Zazwyczaj pomiędzy znacznikami i znajduje się tytuł strony, a pomiędzy znacznikami i jej opis. W tytule i opisie powinny znajdować się słowa kluczowe. Elementami strony są bloki div. W kodzie spotykamy kolejno , który na pierwszy rzut oka jest pusty, i , który zawiera nagłówek i odsyłacz Link 1. Chwilę uwagi należy poświęcić także odsyłaczowi. W internecie istnieją przedsięwzięcia, za udział w których autor strony może otrzymać część zysku lub uzyskać możliwość wymiany ruchem w zamian za ruch skierowany do danej strony. Źródło ruchu, a więc i jego właściciel, są identyfikowani na podstawie unikatowego linku. Unikatowość polega na dodaniu do linku ciągu liczb lub znaków. Natura, ale na szczęście tylko niektórych ludzi, jest jednak przekorna. Lubują się oni w wycinaniu z linków ciągów służących do naliczania wynagrodzenia ludziom, który napracowali się, aby dany link utworzyć, wstawić na stronę itp. Na szczęście można temu przeciwdziałać. W treści dokumentu HTML jest wstawiony link: Link 1


Prowadzi on nie bezpośrednio do strony w internecie, a do pliku o nazwie link1.html. Naprowadzenie kursora na link (rysunek 9.14) powoduje wyświetlenie wewnętrznego adresu serwisu. Rysunek 9.14. Nic nie wskazuje na to, że plik link1.html jest katapultą, która wyrzuca w ściśle określone miejsce w internecie

Rozdział 9.  Layout

271

Kliknięcie linku powoduje natychmiastowe przekierowanie na stronę o adresie zapisanym w pliku link1.html:



Jak to działa? Już tłumaczę. Po załadowaniu pliku link1.html następuje wykonanie tego, co w pliku jest zapisane. Znajduje się w nim polecenie ponownego załadowania adresu (refresh) po upływie 0 sekund, czyli natychmiast. Jaka strona zostanie załadowana? Ano ta, która znajduje się pod adresem: https://www.youtube.com/watch?v=w-Ng5muAAcg. Czy użytkownik może podejrzeć zawartość pliku link1.html? Raczej jest to niemożliwe, bo przekierowanie następuje natychmiast. Skoro już wiemy, jak poradzić sobie ze złośliwymi internautami, możemy zająć się dalszą analizą strony. Kolejny link: Link 2

prowadzi bezpośrednio do pliku 203.html. Kliknięcie go powoduje powrót do strony 203.htm. Elementy oraz skonstruowane zostały podobnie jak . Plik HTML to szkielet strony. To, jak będzie ona wyglądała, zależy od pliku CSS: h1{ font-size:22px; color:lime; } h2 { font-size:14px; color:lime; } h3 { font-size:12px; color:lime; } body{ font-size:12px; color:lime; background:black; font-family: Verdana,Geneva,sans-serif; } #zero { padding:1px 0; width: 750px; animation:linijka 10s infinite; -webkit-animation:linijka 10s infinite; /* dla Google Chrome, Safari, Opera 15+ */ } @keyframes linijka { 0% { background-color:black;} 50% { background-color:lime;}

272

CSS3. Zaawansowane projekty 100% { background-color:black;} } @-webkit-keyframes linijka /* dla Google Chrome, Safari, Opera 15+ */ { 0% { background-color:black;} 50% { background-color:lime;} 100% { background-color:black;} } #pierwszy { border: 2px solid lime; padding: 10px 20px; width: 200px; border-radius:50px; position: absolute; top: 100px; left: 0px; } #drugi { border: 2px solid lime; padding: 10px 20px; width: 200px; border-radius:50px; position: absolute; top: 100px; left: 254px; } #trzeci { border: 2px solid lime; padding: 10px 20px; width: 200px; border-radius:50px; position: absolute; top: 100px; left: 508px; } a:link { color:lime; text-decoration: none; } a:visited { color:lime; text-decoration: none; } a:hover { color:lime; text-decoration: underline; } a:active { color: lime; text-decoration: underline; }

Rozdział 9.  Layout

273

Na co warto zwrócić w nim uwagę? Kolorystyka utrzymana jest konsekwentnie w kolorach: czarnym (black) oraz limonowym (lime). Pozioma kreska, która pojawia się i znika, to nie animowany gif, ale element div o identyfikatorze zero. Animacja polega na ciągłej (infinite) zmianie koloru. Wykonanie cyklu trwa 10 sekund. Kolorem bazowym jest czarny (0% { background-color:black;}). Przejście następuje do koloru limonowego (50% { background-color:lime;}). Po nim następuje powrót do koloru czarnego (100% { background-color:black;}). Pozostałe elementy otoczone są linią ciągłą (solid) o szerokości 2 pikseli (2px) w kolorze limonowym (lime). Szerokość każdego elementu wynosi 200 pikseli (width: 200px). Promień zaokrąglenia narożników to 50 pikseli (border-radius:50px). Jak uzyskano to, że wszystkie trzy elementy z zaokrąglonymi narożnikami są w jednej linii? Ich położenie zostało określone jako absolutne (position: absolute) w odległości 100 pikseli od góry dokumentu (top: 100px). Odległość każdego z elementów od lewej krawędzi wynosi 0 (left: 0px), 254 (left: 254px) i 508 pikseli (left: 508px). Przy obliczeniach należy wziąć pod uwagę szerokość elementu, zaokrąglenie krawędzi i szerokość linii. Co jeszcze zrobiono? Internauci przyzwyczajeni są do tego, że odsyłacze nieodwiedzone są podkreślone i w kolorze niebieskim. W pliku 203.htm zaburzono ten standard! Odsyłacze nie są tu podkreślone (text-decoration: none) i zawsze mają kolor limonowy (color:lime). Podkreślenie (text-decoration: underline) pojawia się dopiero po wskazaniu linku kursorem (a:hover) lub przytrzymaniu wciśniętego lewego przycisku myszy po wskazaniu linku kursorem (a:active) . Na rysunku 9.15 pokazano, jak wygląda okno przeglądarki po wczytaniu pliku 203.htm.

Rysunek 9.15. Kilka prostych zmian w wyglądzie strony spowodowało, że zaciekawia ona internautów swoim wyglądem

274

CSS3. Zaawansowane projekty

Zakończenie Uczeń zwrócił się do Mistrza z pytaniem: — Mistrzu, jak długo trzeba czekać na zmiany? — Jeśli będziesz tylko czekał to bardzo długo. Ta prawda uniwersalna ma zastosowanie także do poznawania możliwości stwarzanych przez CSS3. W książce znajdują się ponad dwie setki przykładów. Korzystanie z nich ułatwiają pliki HTML i CSS dostępne na FTP1 wydawnictwa. W opisach przykładów znajdują się informacje, tłumaczące konieczność użycia danego konkretnego rozwiązania. Natomiast wyczucie, intuicję, wiedzę dotyczącą doboru rozwiązań uzyskać można, wykonując samodzielne próby z różną wartością parametrów. Niemcy powiadają: „Übung macht den Meister” (ćwiczenie czyni mistrza). Zgodnie z tą radą zachęcam Cię więc do testowania działania plików i stosowania w nich różnych zestawów parametrów. Aby poznać wpływ zmian na wygląd dokumentu, należy wprowadzać je pojedynczo. Książka zawiera dwie setki przykładów. Gwarantuję Ci, że wśród nich nie ma gotowego rozwiązania wyzwania, przed którym stanąłeś. Dlaczego? Dlatego, że liczba możliwych problemów programistycznych jest porównywalna z liczbą gwiazd we wszechświecie. Książka zawiera informacje, jak szukać rozwiązań. Gdy spojrzysz na nią w ten sposób — wykorzystasz tkwiące w niej możliwości. Autor

1

ftp://ftp.helion.pl/przyklady/css3zp.zip

276

CSS3. Zaawansowane projekty

Skorowidz A animacja, 15, 24, 32, 38, 58, 78, 81, 219, 237, 273 kierunek, 39 płynna, 52 prędkość, 39 reguły, 29 selektor czasu, 29 typ, 27 złożona, 66 arkusz stylów CSS, Patrz: CSS

nieproporcjonalna, 19 rozmiar, 17 szeryfowa, 19

E edytor tekstu, 5 efekt cienia, Patrz: cień ekran, 211 szerokość, 214 element, Patrz: obiekt, znacznik em, 17

B Berners-Lee Tim, 9

F format pliku, Patrz: plik

C Chrome, 6, 26, 219 cień, 107, 109, 141 kolor, 120 listy, 143 przesunięcie, 109, 111, 113, 133, 134, 135 rozmycie, 109, 110, 112, 113, 118, 134, 135 rozszerzenie, 117 tekstu, 131, 132, 133 wewnętrzny, 109, 125 wtopienie, 125 wielokrotny, 127, 128, 133, 137, 139 zewnętrzny, 109 CSS, 8, 9, 10, 17 osadzony, 10 reguły, 29 zewnętrzny, 10, 11 czcionka, 18 bezszeryfowa, 19, 69 dekoracyjna, 19 kolor, 19

G Google Chrome, Patrz: Chrome gradient, 70, 169 animacja, 181, 183 liniowy, 70, 169, 179, 246 kąt, 171, 172, 247, 248, 249 wielokolorowy, 249, 251 promieniowy (promienisty), 70, 174, 179, 181, 251 kształt, 175, 251 promień, 176, 251 środek, 177 wielokolorowy, 173, 179, 180, 253 zmiana w funkcji czasu, 181, 183

H hiperłącze, Patrz: odsyłacz HSL, 124, 163, 166, 229, 231 HSLa, 167, 229, 233

278

CSS3. Zaawansowane projekty

HTML, 8, 9, 10 4.01 kolor, 121 kodu poprawność, 8 plik, Patrz: plik HTML szablon, 8

J jednostka em, 17

K klasa, 146, 224 kolor, 20, 43, 121 cienia, Patrz: cień kolor HSL, Patrz: HSL jasność, 163, 165, 167, 229, 232 koło, 231 nasycenie, 163, 165, 167, 229, 231, 232 odcień, 231, 232 przezroczystość, Patrz: przezroczystość RGB, Patrz: RGB tła, 19, 24, 43, 69 wzornik, 68 zapis heksadecymalny, 122, 124, 229 koło kolorów, Patrz: kolor koło

L layout, 255 link, Patrz: odsyłacz lista cień, 143 uporządkowana, 42 wyliczeniowa, 195 zagnieżdżona, 191

nagłówek, 270 Netscape, 10 Notatnik, 5, 12

O obiekt, 145 cień, Patrz: cień grupowanie, 145, 156 obracanie, 42, 92, 93, 94 pochylanie, 220 przekoszenie, 223 przekształcenie geometryczne, Patrz: obiekt transformacja przesunięcie, 227 skalowanie, 224, 226 transformacja, 219, 223, 224, 227 złożona, 228 właściwość, Patrz: właściwość odsyłacz, 148, 149, 151, 152, 185, 269, 270 cień, 141 kolor, 186, 187 stan, 186, 187, 189, 190, 195, 200 właściwości, 186, 187, 189, 190, 194, 195, 200, 204 okna szerokość, 213, 255 Opera, 26

P

Ł łącze, Patrz: odsyłacz

M Maxthon, 26 media typ, 211, 212 właściwość, 212, 213 zapytanie, 211, 212 menu, 190, 195, 204 pionowe, 190 poziome, 195 szczegółowe, 195

N

plik .png, 236 HTML, 12 polecenie background, 62 attachment, 64 clip, 64 color, 62 image, 64 origin, 64 position, 62 repeat, 63 size, 63 box-shadow, 108 linear-gradient, 70 margin, 43 -ms-transform, 219 -ms-transform-origin, 219 radial-gradient, 70, 251 repeating-linear-gradient, 251 rotate, 45

Skorowidz

279

translateZ, 74 -webkit-transform, 219 -webkit-transform-origin, 219 poświata, 137, 138, 140 pozycjonowanie, 255 absolutne, 255, 257, 265 składnia, 256, 257, 259, 260 statycznie, 256 ustalone, 256, 259 względne, 255, 256, 260 przeglądarka, 6, 10 Google Chrome, Patrz: Chrome Opera, Patrz: Opera Safari, Patrz: Safari wersja, 26 przezroczystość, 70, 163, 167, 208, 229, 232 alfa, 163, 165, 229, 230 pseudoklasa, 150, 155

R ramka prostokątna, 262 zaokrąglanie narożników, 262, 263, 266 reguła @keyframes, 39, 40, 181, 183, 205 @media, 211, 213 print, 215, 216 screen, 214, 216, 217 RGB, 124, 163, 165, 229, 231 RGBa, 163, 165, 229, 231

S Safari, 26, 109, 219 selektor .class, 145 :nth-child, 94 czasu, 29 słowo kluczowe, 270 strona layout, Patrz: layout opis, 270 słowa kluczowe, 270 szablon, 8 tytuł, 269, 270 submenu, 195 sześcian, 81 kropki, 94, 99

T tabela, 255 tablica świetlna, 32 tekst cień, Patrz: cień tekstu

tło, 235 kolor, Patrz: kolor tła obrazkowe, 235 ruchome, 235 skalowanie, 239, 240 usuwanie, 242 wieloobrazowe, 245, 246 z gradientem, 246 tooltip, 200 animowany, 205

W walidator kodu, 5, 6 CSS, 7 HTML, 7, 12 Webkit, 26 właściwość animation, 38, 181, 205 aspect-ratio, 212 backface-visibility, 61 background-color, 36, 44, 52 background-size, 239, 240 border, 36 border-radius, 263 box-shadow, 109, 110 color, 212 color-index, 212 definiowanie, 150 device-aspect-ratio, 212 device-height, 212 device-width, 212 float, 17 font-family, 18 font-size, 17 grid, 212 height, 35, 212 linear-gradient, 247 line-height, 35 margin, 35 max-aspect-ratio, 212 max-color, 212 max-color-index, 212 max-device-aspect-ratio, 212 max-device-height, 212 max-device-width, 212 max-height, 212 max-monochrome, 212 max-resolution, 212 max-width, 212 mediów, Patrz: media właściwość min-aspect-ratio, 213 min-color, 213 min-device-aspect-ratio, 213

280 właściwość min-device-height, 213 min-device-width, 213 min-height, 213 min-monochrome, 213 min-resolution, 213 min-width, 213 monochrome, 213 orientation, 213 overflow, 36 perspective, 55, 78 position, 22, 60, 255 absolute, 82 relative, 82 preserve, 61 resolution, 213 scan, 213 text-align, 55 text-decoration, 190 text-shadow, 133 transform, 45, 61, 219

CSS3. Zaawansowane projekty transform-origin, 219 transition, 58 white-space, 37 width, 213 wydruk, 215, 216 wypełnienie gradientowe, Patrz: gradient

Z zapytanie mediów, Patrz: media zapytanie znacznik, 150 body, 270 cień, 142 div, 16, 70, 159, 255, 270 id, 156, 158 li, 42 META, 269 span, 16, 21, 158, 159 kolor, 24, 26 TITLE, 269