Tytu oryginau: Responsive Web Design by Example

Tumaczenie: ukasz Piwko

ISBN: 978-83-246-9190-6
Copyright 2013 Packt Publishing.
First published in the English language under the title Responsive Web Design by Example.
Polish edition copyright 2014 by Helion S.A.
All rights reserved.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording or by any information storage retrieval system,
without permission from the Publisher.
Wszelkie prawa zastrzeone. Nieautoryzowane rozpowszechnianie caoci lub fragmentu niniejszej
publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metod kserograficzn,
fotograficzn, a take kopiowanie ksiki na noniku filmowym, magnetycznym lub innym powoduje
naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki wystpujce w tekcie s zastrzeonymi znakami firmowymi bd towarowymi ich
wacicieli.
Autor oraz Wydawnictwo HELION dooyli wszelkich stara, by zawarte w tej ksice informacje byy
kompletne i rzetelne. Nie bior jednak adnej odpowiedzialnoci ani za ich wykorzystanie, ani za zwizane
z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie
ponosz rwnie adnej odpowiedzialnoci za ewentualne szkody wynike z wykorzystania informacji
zawartych w ksice.
Wydawnictwo HELION
ul. Kociuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: http://helion.pl (ksigarnia internetowa, katalog ksiek)
Drogi Czytelniku!
Jeeli chcesz oceni t ksik, zajrzyj pod adres
http://helion.pl/user/opinie/reweno
Moesz tam wpisa swoje uwagi, spostrzeenia, recenzj.
Printed in Poland.
Kup ksik
Pole ksik
Oce ksik
Ksigarnia internetowa
Lubi to! Nasza spoeczno
Spis treci
O autorze 9
O recenzentach 11
Przedmowa 13
Zawarto ksiki 13
Co trzeba umie? 14
Dla kogo jest ta ksika? 14
Zastosowane konwencje 14
Czas na dziaanie 14
Quiz 15
Zrb to sam 15
Przykady kodu 16
Errata 16
Piractwo 16
Rozdzia 1. Koncepcja RWD 17
Podstawowy projekt elastyczny 18
Metaznacznik viewport i zapytania medialne CSS3 18
Ograniczenia technik elastycznych 20
Skalowalne obrazy w elemencie picture 20
Dowiedz si wicej o HTML5 i CSS3 23
Wprowadzenie do systemw RWD 24
Po co uywa systemw? 24
Kto uywa tych systemw? 26
Wady 30
Narzdzia potrzebne do budowy elastycznych stron internetowych 30
Przegldarki internetowe 30
Edytory kodu 31
Elastyczne skryptozakadki 31
Kup ksik Pole ksik
Spis treci
4
Krtkie wprowadzenie do preprocesorw CSS 32
Kompilatory kodu preprocesorw CSS 33
LESS 33
Sass, czyli Syntactically Awesome Stylesheets 39
Wicej o preprocesorach CSS 41
Materiay do nauki LESS 42
Materiay do nauki Sassa 42
Co utworzymy w tej ksice? 42
Podsumowanie 43
Rozdzia 2. Tworzenie elastycznego portfolio przy uyciu systemu Skeleton 45
Podstawy systemu Skeleton 46
Czas na dziaanie tworzenie katalogu roboczego i pobieranie systemu Skeleton 46
Co zawiera Skeleton? 46
Pocztkowy dokument HTML 47
Skalowalna siatka 48
Zwijanie kontenera 49
Zapytania medialne 50
Style typograficzne 51
Style przyciskw 51
Style formularzy 52
Ikony Applea 53
Szablon PSD 54
Jak ma wyglda budowana strona? 54
Nawigacja 56
Efekt hover 56
Tworzenie dokumentu w systemie Skeleton 56
Czas na dziaanie dodawanie nowego pliku CSS 57
Dodawanie wasnych fontw 58
Czas na dziaanie osadzanie fontw z serwisu Google Fonts 58
Przygotowywanie obrazw 59
Ikony mediw spoecznociowych 60
Czas na dziaanie spritey 61
Ikony kontaktowe 62
Elementy HTML5 63
Atrybuty danych HTML5 63
Czas na dziaanie konstruowanie dokumentu HTML 64
Podsumowanie 69
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3 71
Model polowy CSS 72
Wasno CSS3 box-sizing 73
Czas na dziaanie definiowanie wasnoci box-sizing 74
Jednostki miary CSS 74
Piksele 74
Jednostka em 76
Procenty 78
Kup ksik Pole ksik
Spis treci
5
Ustawianie rodziny fontw 78
Czas na dziaanie ustawianie rodziny fontw nagwkw 79
Formatowanie nagwka 80
Czas na dziaanie definiowanie stylw nagwka 80
Selektory CSS 81
Selektor dziecka 81
Selektor przylegajcego elementu siostrzanego 82
Oglny selektor elementu siostrzanego 83
Pseudoklasy CSS3 84
Pseudoklasa CSS3 :checked 84
Pseudoklasa CSS3 :nth-child 84
Style miniatur i podpisw 85
Czas na dziaanie definiowanie stylw miniatur i podpisw 86
Przeksztacenia dwuwymiarowe CSS 90
Funkcja translate() 91
Przejcia CSS3 93
Wartoci przej CSS3 93
Czas na dziaanie zmiana obrazu po najechaniu kursorem 94
Filtrujca nawigacja po stronie 97
Czas na dziaanie tworzenie filtra portfolio 98
Stopka 99
Czas na dziaanie formatowanie stopki 100
Definiowanie stylw dla mniejszych ekranw 105
Czas na dziaanie rozmiar obszaru widoku poniej 960 pikseli 106
Czas na dziaanie rozmiar obszaru widoku od 767 do 480 pikseli 107
Czas na dziaanie rozmiar obszaru widoku poniej 480 pikseli 109
Testowanie strony w rnych rozmiarach obszaru widoku 111
Podsumowanie 113
Rozdzia 4. Tworzenie strony produktu przy uyciu systemu Bootstrap 115
Wprowadzenie do systemu Bootstrap 116
Czas na dziaanie przygotowywanie systemu Bootstrap 116
Przygotowywanie grafik 117
Aplikacje LESS 119
Czas na dziaanie instalowanie aplikacji CrunchApp 119
Tworzenie plikw LESS 121
Czas na dziaanie tworzenie nowego pliku LESS w CrunchAppie 122
Kompilowanie kodu LESS na standardowy CSS 123
Czas na dziaanie dodawanie plikw LESS do CrunchAppa
i kompilowanie ich na CSS 124
Dodawanie wasnych rodzin fontw przy uyciu reguy @font-face 125
Gdzie w internecie szuka darmowych fontw? 125
Skadnia reguy @font-face 125
Formaty fontw dla rnych przegldarek internetowych 126
Czas na dziaanie definiowanie nowego fontu przy uyciu reguy @font-face 127
Kup ksik Pole ksik
Spis treci
6
Skalowalno systemu Bootstrap 128
Siatka systemu Bootstrap 128
Zapytania medialne CSS3 w systemie Bootstrap 129
Czas na dziaanie tworzenie nowego pliku LESS do przechowywania
zapyta medialnych CSS3 129
Tworzenie nawigacji w systemie Bootstrap 130
Tworzenie dokumentw HTML 131
Czas na dziaanie tworzenie podstawowych dokumentw HTML5 132
Quiz 136
Tre strony gwnej 136
Czas na dziaanie budowa struktury HTML treci strony gwnej 136
Tre strony galerii 140
Czas na dziaanie definiowanie struktury treci strony galerii 141
Tre strony kontaktowej 143
Czas na dziaanie definiowanie struktury treci strony kontaktowej 143
Strona O nas 147
Czas na dziaanie definiowanie struktury treci strony O nas 147
Strona o zasadach korzystania z serwisu 149
Czas na dziaanie definiowanie struktury treci strony o zasadach korzystania 149
Podsumowanie 150
Rozdzia 5. Ulepszanie strony produktu przy uyciu CSS3 i LESS 151
Zmienne LESS 152
Czas na dziaanie definiowanie zmiennych 152
Definiowanie domieszek LESS 154
Czas na dziaanie definiowanie wasnych domieszek LESS 154
Funkcje LESS do modyfikacji kolorw 155
Pojcie zakresu 156
Oglne reguy stylistyczne 157
Czas na dziaanie dodawanie oglnych regu stylistycznych 157
Pozbywanie si przedrostkw firmowych 160
Style przyciskw 161
Czas na dziaanie zmienianie stylw przyciskw systemu Bootstrap 162
Czemu te przyciski s takie due? 163
Style nagwka 164
Czas na dziaanie dodawanie stylw nagwka witryny 164
Style stopki 167
Czas na dziaanie dodawanie stylw stopki 167
Strona gwna 170
Sekcja powitalna 170
Czas na dziaanie formatowanie stylu sekcji powitalnej 170
Sekcja wezwania do dziaania 171
Czas na dziaanie formatowanie stylu sekcji wezwania do dziaania 172
Sekcja galerii 172
Czas na dziaanie definiowanie stylu sekcji galerii 173
Kup ksik Pole ksik
Spis treci
7
Sekcja referencji 174
Czas na dziaanie definiowanie stylu sekcji referencji 174
Formularz subskrypcji 175
Czas na dziaanie formatowanie stylu pola adresu e-mail 175
Strona galerii 176
Czas na dziaanie dostosowywanie stylw tytuu strony 178
Strona kontaktowa 179
Czas na dziaanie dostosowywanie stylw strony kontaktowej 181
Strona O nas 182
Strona o zasadach korzystania z serwisu 184
Zapewnianie dobrego wygldu strony w rnych urzdzeniach 184
Czas na dziaanie poprawianie wygldu strony
w oknach o szerokoci do 767 pikseli 186
Czas na dziaanie poprawianie wygldu strony
w oknach o szerokoci do 480 pikseli 190
Usuwanie niepotrzebnych regu stylistycznych 193
Testowanie witryny 195
Podsumowanie 195
Rozdzia 6. Elastyczna strona firmowa na bazie systemu Foundation 197
System szkieletowy oparty na jzyku Ruby 198
Gem Foundation 198
Czas na dziaanie instalowanie systemu Foundation
i konfiguracja nowego projektu 199
Skadnie Sassa i SCSS 200
Edytory kodu Sassa i SCSS 201
Czas na dziaanie instalowanie edytora Sublime Text
i wczanie kolorowania skadni SCSS 201
Tworzenie wasnych arkuszy stylw SCSS 203
Czas na dziaanie tworzenie arkuszy stylw SCSS,
aby nie utrudnia obsugi systemu 203
Wprowadzenie do Compassa 204
Funkcje pomocnicze Compassa 204
Konfiguracja projektu Compassa 204
Czas na dziaanie konfiguracja cieki projektu w pliku config.rb 206
Kompilowanie SCSS na CSS 207
Czas na dziaanie obserwowanie zmian w arkuszach stylw SCSS 207
Przygotowywanie obrazw 208
Skadniki systemu Foundation 209
Siatka 209
Zapytania medialne CSS3 212
Style interfejsu uytkownika 212
Wtyczka do jQuery Orbit 213
Tworzenie dokumentw HTML 214
Podstawowy dokument HTML 214
Czas na dziaanie modyfikowanie podstawowego dokumentu HTML 214
Kup ksik Pole ksik
Spis treci
8
Strona gwna 218
Czas na dziaanie tworzenie treci strony gwnej 218
Strona z opisem usug 225
Czas na dziaanie budowa struktury HTML strony Usugi 225
Strona z cennikiem 230
Czas na dziaanie budowa struktury HTML strony z cennikiem 231
Strona O nas 236
Czas na dziaanie budowa struktury HTML strony O nas 236
Strona kontaktowa 240
Czas na dziaanie budowa struktury HTML strony kontaktowej 240
Podsumowanie 244
Rozdzia 7. Rozszerzanie systemu Foundation 245
Monitorowanie projektu 246
Czas na dziaanie wczanie monitorowania projektu 246
Wprowadzenie do funkcji kolorw Sassa 247
Zmienne w Sassie 248
Czas na dziaanie dostosowywanie zmiennych Sassa
dotyczcych kolorw systemu Foundation 248
Wasne rodziny fontw 250
Domieszka Compassa do deklarowania regu @font-face 251
Czas na dziaanie dodawanie wasnych rodzin fontw
przy uyciu domieszki Compassa 251
Nawigacja 254
Czas na dziaanie formatowanie sekcji nagwkowej 254
Wprowadzenie do funkcji pomocniczych Compassa dotyczcych spritew 255
Stopka 256
Czas na dziaanie formatowanie stylu stopki 257
Wprowadzenie do selektorw strukturalnych CSS3 261
Strona gwna 262
Czas na dziaanie formatowanie strony gwnej 263
Do boju 270
Strona Usugi 272
Czas na dziaanie formatowanie strony o usugach 273
Strona z cennikiem 278
Czas na dziaanie formatowanie stylu strony z cennikami 279
Strony O nas i Kontakt 282
Czas na dziaanie formatowanie stylu stron O nas i Kontakt 282
Czas na dziaanie czynnoci kocowe 284
Testowanie witryny 286
Podsumowanie 287
rda dodatkowych informacji 287
Ksiki 287
Internet 288
Skorowidz 289
Kup ksik Pole ksik
3
Ulepszanie
strony portfolio
przy uyciu CSS3
W poprzednim rozdziale napisalimy struktur HTML5 naszej strony portfolio.
W tym rozdziale dodamy do niej arkusze stylw CSS3. Zaczniemy od zdefiniowania paru
prostych efektw wizualnych, ktre zostay niedawno wprowadzone w CSS3,
takich jak cienie tekstu i blokw oraz zaokrglenie rogw.
Nastpnie utworzymy bardziej skomplikowany efekt, polegajcy na zmianie obrazu
po najechaniu na niego kursorem. Przed pojawieniem si technologii CSS3 mona to byo
osign wycznie przy uyciu JavaScriptu.
W tym rozdziale:
Sformatujesz styl strony zaczniemy od nagwka i nawigacji, potem przejdziemy
do obszaru treci, a skoczymy na stopce, wykorzystujc podczas pracy rne nowe
wasnoci CSS3.
Utworzysz funkcj filtrujc portfolio przy uyciu CSS3.
Stworzysz efekt zmiany obrazu po najechaniu kursorem przy uyciu przeksztace
i przej CSS3.
Przystosujesz wygld strony do ekranw o rnych szerokociach przy uyciu
zapyta medialnych CSS3.
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
72
Model polowy CSS
Element blokowy HTML jest w istocie polem. Na pole to skada si tre waciwa elementu
oraz jego marginesy, dopenienie i obramowanie zdefiniowane przy uyciu CSS, jak wida na
poniszym rysunku:
Wicej informacji na temat rnic midzy elementami blokowymi i rdliniowymi oraz list elementw mona
znale na poniszych stronach:
Elementy blokowe: https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements.
Elementy rdliniowe: https://developer.mozilla.org/en-US/docs/HTML/Inline_elements.
Przed pojawieniem si CSS3 okrelanie waciwoci pola elementu byo nieco utrudnione.
Zamy na przykad, e tworzymy kwadrat o boku 100 pikseli:
div {
width: 100px;
height: 100px;
}
Taki kod przegldarka zinterpretuje jako zwyky kwadrat (pierwszy rysunek na nastpnej stronie).
Ale bdzie tak tylko dopty, dopki nie zdefiniujemy dopenienia, marginesu albo obramowa-
nia. Jako e pole elementu ma cztery boki, zdefiniowanie dopenienia o rozmiarze 10 pikseli
(padding: 10px) spowoduje zwikszenie szerokoci i wysokoci elementu o 20 pikseli po 10
z kadej strony (drugi rysunek na nastpnej stronie).
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
73
Nie do, e zajmowane jest dodatkowe miejsce, to jeszcze obszar marginesu znajduje si po-
za elementem, to znaczy nie naley do jego obszaru. Jeli wic zdefiniujemy elementowi ko-
lorowe to, kolor ten nie bdzie widoczny w obszarze zajmowanym przez margines.
Wasno CSS3 box-sizing
W CSS3 dostpna jest wasno box-sizing, za pomoc ktrej mona kontrolowa waciwo-
ci modelu polowego.
Warto Opis
content-box Jest to standardowe ustawienie modelu polowego. Warto ta sprawia, e dopenienie
i obramowanie pola nie s wliczane do jego zdefiniowanych szerokoci i wysokoci,
jak zostao pokazane na rysunku w poprzednim podrozdziale.
border-box Ta warto jest przeciwiestwem poprzedniej. Sprawia, e dopenienie i obramowanie
s wliczane do zdefiniowanych szerokoci i wysokoci pola.
Wrmy do naszego przykadu. Ustawimy wasno box-sizing na border-box. Dziki temu
niezalenie od dopenienia i obramowania szeroko i wysoko elementu bd wynosi po
100 pikseli. Na poniszym rysunku przedstawiam rnic midzy dwoma opisywanymi usta-
wieniami:
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
74
Czas na dziaanie definiowanie wasnoci box-sizing
Otwrz plik styles.css i na samym pocztku wpisz ponisz regu:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Co uzyskalimy?
Uylimy selektora uniwersalnego CSS (*) w celu zastosowania wasnoci border-box do wszyst-
kich elementw blokowych na stronie, aby uatwi sobie ustawianie ich szerokoci i wysokoci.
Jako pierwszy porad t opublikowa Paul Irish, gwny programista skryptu Modernizr i HTML5 Boilerplate.
Wicej informacji o tej metodzie mona znale w jego wpisie na stronie http://www.paulirish.com/2012/
box-sizing-border-box-ftw/.
Jednostki miary CSS
W specyfikacji CSS opisano kilka jednostek miary. Na naszej stronie bdziemy uywa gw-
nie jednostek px, em oraz procentw.
Piksele
Piksel (px) to bezwzgldna jednostka, ktra jest uywana chyba najczciej ze wszystkich dostp-
nych jednostek. Za jej pomoc mona precyzyjnie okreli rozmiary elementw. W specyfikacji
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
75
CSS znajdujcej si pod adresem http://www.w3.org/TR/css3-values/#reference-pixel piksel
jest zdefiniowany jako:
Rozmiar ktowy jednego piksela na urzdzeniu o gstoci 96 dpi.
Wedug tej definicji 1 piksel CSS na ekranie o gstoci 96 dpi jest rwny 1 pikselowi urzdzenia.
Zatem 10 pikseli w CSS odpowiada 10 pikselom urzdzenia.
W tym projekcie rozmiary pl bdziemy okrela w pikselach.
Piksele na ekranach o wikszej gstoci
Ze wzgldu na upowszechnianie si ekranw o coraz wyszych rozdzielczociach przykad opisa-
ny w poprzednim podrozdziale jest ju nieaktualny. Poniszy rysunek przedstawia ekran o wyso-
kiej rozdzielczoci 192 dpi. Element o szerokoci i wysokoci 10 pikseli na takim ekranie zajmie
20 pikseli urzdzenia:
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
76
Rozmiar elementu na ekranie pozostanie taki sam, ale bdzie si on skada z wikszej liczby
pikseli urzdzenia.
Na temat piksela i jego relacji z rozdzielczoci ekranu toczy si wiele dyskusji, np.:
Reda Lemeden w swoim wpisie przedstawi trudnoci zwizane z projektowaniem dla ekranw
o rnych gstociach (http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/).
Scott Kellum w serwisie A List Apart opisa jednostk piksel i jej zastosowanie do definiowania
rozmiaru elementw na stronach przeznaczonych dla rnych urzdze i ekranw o rnych
rozdzielczociach (http://alistapart.com/article/a-pixel-identity-crisis).
Jednostka em
Jednostka em jest wzgldna i odnosi si do rozmiaru wielkiej litery M uywanego fontu. W CSS 1em
zasadniczo odnosi si do rozmiaru pisma ustawionego w urzdzeniu lub dokumencie. Jeli ele-
ment nadrzdny ma okrelony rozmiar pisma w jednostce em, to rozmiar pisma jego elementw
potomnych bdzie ustawiany wzgldem rozmiaru pisma tego elementu nadrzdnego.
W naszym projekcie jednostki em bdziemy uywa do okrelania rozmiaru pisma zgodnie z zale-
ceniami W3C (http://www.w3.org/Style/Examples/007/units.en.html).
Konwertowanie pikseli na em
Domylny rozmiar pisma w systemie Skeleton jest ustawiony w pliku base.css na 14 pikseli, wic
do tego rozmiaru bd si odnosi ustawienia wyraone w jednostce em.
Powiedzmy, e chcemy si dowiedzie, ile jednostek em odpowiada rozmiarowi 20 pikseli, gdy
podstawowy rozmiar pisma wynosi 14 pikseli. Istnieje narzdzie uatwiajce zamienianie jedno-
stek px na em (i odwrotnie) o nazwie PXtoEM.com (http://pxtoem.com/). Na zrzucie ekranu (na na-
stpnej stronie) pokazaem sposb jego uycia.
Jak wida na zrzucie, przy podstawowym rozmiarze pisma 14 pikseli rozmiarowi 20px odpowiada
warto 1.429em.
Samodzielne obliczanie wartoci em
Jednostki px i em mona take przelicza przy uyciu wzorw przedstawionych w poniszej tabeli:
Rodzaj
konwersji
Wzr Przykad
px na em Rozmiar (px) / podstawowy rozmiar pisma (px) 20(px) / 14(px) = 1.429em (po zaokrgleniu)
em na px Rozmiar (em) * podstawowy rozmiar pisma (px) 1,429(em) * 14(px) = 20px
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
77
Dziwne traktowanie jednostki em przez przegldarki
Przegldarki w niektrych przypadkach rnie traktuj wartoci wyraone w jednostce em.
W przykadzie z poprzedniego podrozdziau warto 1.429em przy podstawowym rozmiarze
pisma 14px zostanie zamieniona na 20px przez wszystkie przegldarki (Chrome, Opera, Safari
i Firefox).
Ale jeli usuniemy dwie ostatnie cyfry w celu zaokrglenia liczby do 1.4em, to sytuacja si nieco
zmieni. W Firefoksie i Operze zostanie zastosowana warto 19.6px, a w przegldarkach opartych
na mechanizmie Webkit (Chrome i Safari) zostanie zastosowane zaokrglenie do 20px.
Mona sprawdzi, jak przegldarki zamieniaj wartoci wyraone w jednostce em na piksele
w narzdziach programistycznych w okienku Computed (wartoci obliczone).
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
78
Procenty
Procent to jednostka wzgldna o podobnych waciwociach jak em. Podczas gdy em odnosi si
do rozmiaru pisma, procent odnosi si do dugoci elementu nadrzdnego, niezalenie od zasto-
sowanej do jej okrelenia jednostki. Jeli na przykad element nadrzdny ma wysoko 100px,
to ustawienie szerokoci na 100% jego elementu potomnego jest rwnoznaczne z ustawieniem
jej na 100px, 50% oznacza 50 pikseli itd.
W naszym projekcie procentw bdziemy uywa do okrelania wymiarw pl elementw, co
bdzie przydatne przy wywietlaniu strony na mniejszych ekranach.
Ustawianie rodziny fontw
W Skeletonie domylne kroje pisma dokumentu to Helvetica Neue i Helvetica. Jeli fonty te
s niedostpne, zostanie zastosowany krj Arial albo domylny krj bezszeryfowy, jaki bdzie
dostpny w komputerze uytkownika.
Definicje rodzin fontw znajduj si w pliku base.css:
body {
background: #fff; font: 14px/21px "HelveticaNeue",
"Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
}
W nagwkach (h1, h2, h3 itd.) ustawione s kroje szeryfowe Georgia i Times New Roman:
h1, h2, h3, h4, h5, h6 {
color: #181818; font-family: "Georgia", "Times New Roman", serif;
font-weight: normal;
}
Kroje te bardzo dobrze nadaj si do prezentowania akapitw (pierwszy rysunek na nastpnej
stronie).
Na naszej stronie jednak si nie sprawdz, bo my mamy bardzo mao tekstu do wywietlenia
(drugi rysunek na nastpnej stronie).
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
79
Dlatego w nagwkach ustawimy taki sam krj pisma jak w pozostaej czci strony, aby za-
pewni jednolito stylu.
Czas na dziaanie ustawianie rodziny fontw nagwkw
Otwrz plik styles.css i wpisz ponisz regu pod deklaracj wasnoci box-sizing opisan
w czci Czas na dziaanie definiowanie wasnoci box-sizing:
h1, h2, h3, h4, h5, h6 {
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,
sans-serif;
font-weight: bold;
}
Co uzyskalimy?
Ustawilimy krj pisma nagwkw na taki sam jak w pozostaej czci dokumentu oraz do-
datkowo ustawilimy wasno font-weight na bold, aby pogrubi te nagwki.
Nie istnieje adna elazna regua pozwalajca okreli, jakie kroje pisma do siebie pasuj. Ich dobr jest
sztuk. Ale mona postpowa wedug kilku prostych wskazwek, ktre umoliwi osignicie przy-
najmniej znonego efektu. Par takich porad opisa Ian Yates w serwisie Webdesigntuts+ (http://webdesign.
tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706).
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
80
Formatowanie nagwka
Teraz sformatujemy styl poszczeglnych sekcji strony. Jej nagwek znajduje si w elemencie
HTML5 header przypisanym do klasy header. W elemencie tym znajduje si dodatkowo ele-
ment div przypisany do klasy logo zawierajcy logo strony.
Czas na dziaanie definiowanie stylw nagwka
Aby zdefiniowa styl nagwka, wykonaj nastpujce czynnoci:
1. W pliku styles.css wpisz ponisz regu CSS. Zawiera ona deklaracje ustawiajce
kolor ta nagwka oraz jego dopenienie, obramowanie, cie (definiowany
za pomoc wasnoci CSS3 box-shadow) i dolny margines odsuwajcy nagwek
od znajdujcej si pod nim sekcji:
.header {
padding: 22px 0;
background-color: #3a3f43;
margin-bottom: 14px;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3);
border-bottom: 1px solid #181f25;
}
2. Nastpnie zdefiniujemy styl kontenera logo. W poniszej regule zostaa zastosowana
wasno CSS3 border-radius, ktra suy do zaokrglania rogw elementw:
.logo {
text-align: center;
border-radius: 3px;
background-color: #515558;
width: 250px;
padding: 5px 0;
margin: 0 auto;
}
. Teraz kolej na styl samego logo, ktre w przypadku naszej strony jest po prostu
tekstem. Do jego prezentacji zastosujemy font Alfa Slab One, ktry dodalimy
z serwisu Google Fonts w rozdziale 2.:
.logo h1 {
color: #fff;
font-weight: normal;
font-family: "Alfa Slab One", Arial, sans-serif;
margin-bottom: 0;
}
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
81
Co uzyskalimy?
Zdefiniowalimy style dotyczce nagwka. Ustawilimy mu kolor ta, cie oraz style pola (dope-
nienie, obramowanie i margines). Ponadto w logo zastosowalimy krj pisma Alfa Slab One z ser-
wisu Google Fonts. Na poniszym zrzucie ekranu wida, jak aktualnie wyglda nasza strona:
Selektory CSS
W tym projekcie bdziemy uywa selektorw CSS do wybierania elementw z okrelonej
struktury elementw. Uyjemy wic selektorw dziecka, przylegajcego elementu siostrzane-
go oraz oglnie elementu siostrzanego. Przyjrzyjmy si im wszystkim po kolei.
Selektor dziecka
W CSS mona wybiera elementy, ktre s zagniedone w okrelonych innych elementach (ro-
dzicach). Zapewne wiesz, jak si wybiera element potomny w CSS. Wystarczy okreli element
nadrzdny (wpisujc jego klas, identyfikator albo nazw), a nastpnie wyznaczy element
potomny:
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
82
.parent p {
background-color: tomato;
}
Powysza regua CSS dotyczy wszystkich elementw p zagniedonych w elemencie nale-
cym do klasy parent.
Ale czasami trzeba odwoa si tylko do potomka pierwszego stopnia, tzn. sprawi, aby elementy
bdce wnukami danego elementu nie zostay ju wybrane. W takim przypadku naley uy kombi-
natora >, ktry ogranicza wybr elementw do bezporednich potomkw rodzica:
.parent > p {
background-color: tomato;
}
W poniszej strukturze HTML powysza regua zmieni kolor ta tylko pierwszego i drugiego
akapitu:
<div class="parent">
<p> To jest pierwszy akapit. </p>
<p> To jest drugi akapit. </p>
<section>
<h3>Tytu sekcji</h3>
<p> To jest trzeci akapit. </p>
<p> To jest czwarty akapit. </p>
</section>
</div>
Wynik jest nastpujcy:
Selektor przylegajcego elementu siostrzanego
Selektor przylegajcego elementu siostrzanego definiuje si przy uyciu kombinatora +. Suy on
do wybierania elementu, ktry znajduje si bezporednio za okrelonym elementem. Dotyczy to
na przykad sytuacji, gdy w kodzie strony znajduje si element div, a bezporednio za nim jest p:
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
83
<div>To jest element div.</div>
<p>To jest pierwszy akapit.</p>
<p>To jest drugi akapit.</p>
Naszym celem jest element p znajdujcy si bezporednio za elementem div. Chcemy mu
zdefiniowa pomidorowy kolor ta:
div + p {
background-color: tomato;
}
Efekt zastosowania tej reguy do powyszego kodu HTML jest nastpujcy:
Oglny selektor elementu siostrzanego
Oglny selektor elementu siostrzanego jest nowym typem selektora wprowadzonym w CSS3.
Do jego deklarowania uywa si tyldy (~):
div ~ p {
background-color: tomato;
}
Jego dziaanie jest podobne do dziaania selektora przylegajcego elementu siostrzanego. Rnica
polega na tym, e wybierany jest nie tylko pierwszy element, ale wybierane s wszystkie elementy
siostrzane znajdujce si za wyznaczonym. Jeli wic bdziemy mieli kod HTML o strukturze ta-
kiej samej jak w przykadzie z selektorem przylegajcego elementu siostrzanego, kolor ta zo-
stanie zastosowany do wszystkich akapitw, jak wida na poniszym zrzucie ekranu:
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
84
Pseudoklasy CSS3
Uyjemy te kilku pseudoklas CSS3. Pseudoklasa to klasa suca do wybierania elementu
znajdujcego si w okrelonym stanie. Na przykad pseudoklasa :hover stosuje reguy CSS do
elementu, gdy znajdzie si nad nim kursor.
W tym projekcie bdziemy uywa nastpujcych pseudoklas:
:checked
:nth-child
Zobaczmy.
Pseudoklasa CSS3 :checked
W CSS3 wprowadzono pseudoklas o nazwie :checked. Umoliwia ona wybieranie elementw
HTML, pl wyboru lub przyciskw radiowych, ktre s zaznaczone przez uytkownika. Poniszy
selektor wybiera przycisk radiowy o identyfikatorze posters, gdy ten zostanie zaznaczony:
#posters:checked {
/* deklaracje stylw */
}
Pseudoklasy :checked mona uywa do wybierania zaznaczonego przycisku radiowego, ktry
jest uywany jako element nawigacji po stronie. Podobnie jak w tradycyjnej nawigacji zbudowanej
przy uyciu elementw a, uywamy te pseudoklasy :hover w celu zdefiniowania stylw dla
elementu, gdy znajduje si nad nim kursor.
Pseudoklasa CSS3 :nth-child
W CSS wprowadzono take now pseudoklas o nazwie :nth-child. Za jej pomoc mona wybie-
ra elementy w takiej kolejnoci, w jakiej znajduj si w kodzie rdowym. Pseudoklasa ta wyma-
ga podania argumentu, ktry moe by liczb lub sowem kluczowym (odd albo even).
Na przykad ponisza regua zmieni kolor ta trzeciego elementu li:
li:nth-child(3) {
background-color: tomato;
}
W poniszej strukturze HTML powysza regua zmieni kolor ta w rodkowym elemencie li:
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
85
<li>Element 4</li>
<li>Element 5</li>
</ul>
Efekt uycia tego kodu wida na poniszym zrzucie ekranu:
Mona take zamiast liczby wpisa sowo kluczowe even albo odd. Ponisza regua zmieni kolor ta
w elementach li o nieparzystych numerach (pierwszym, trzecim, pitym itd.):
li:nth-child(odd) {
background-color: tomato;
}
Pseudoklasie :nth-child mona te przekazywa wzory wyboru elementw w bardziej wy-
mylnych sekwencjach:
li:nth-child(2n+2) {
background-color: tomato;
}
Litera n jest w tym przypadku zmienn, ktra przyjmuje wartoci 0, 1, 2, 3 itd. W zwizku z tym
wzr 2n+2 oznacza wybr drugiego, czwartego, smego, dziesitego itd. elementu li.
Wicej informacji na temat zasady dziaania pseudoklasy :nth-child mona znale w artykule Chrisa Coy-
iera w serwisie CSS Tricks (http://css-tricks.com/how-nth-child-works/). Coyer utworzy te porczne na-
rzdzie do testowania wzoru pseudoklasy :nth-child (http://css-tricks.com/examples/nth-child-tester/).
Style miniatur i podpisw
Po sformatowaniu stylu nagwka mona przej do stylizowania i rozmieszczenia obrazw
portfolio. Mamy 12 miniatur, z ktrych kada znajduje si w elemencie HTML5 figure i ma
podpis zawierajcy opis miniatury umieszczony w elemencie figcaption.
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
86
Czas na dziaanie definiowanie stylw miniatur
i podpisw
Aby doda style dla miniatur i podpisw, wykonaj nastpujce czynnoci:
1. Otwrz plik styles.css. Zaczniemy od przesunicia portfolio nieco w d
za pomoc marginesu:
.portfolio {
margin-top: 20px;
}
2. Obrazy bd wywietlane w czterech kolumnach. Szeroko kadej z nich bdzie
wynosi 240 pikseli, bo tak warto otrzymalimy z dziaania 960 / 4 = 240.
Aby obrazy mieciy si na stronie, musimy usun lewy i prawy margines,
ktre zostay odziedziczone z klasy columns systemu Skeleton:
.portfolio .four.columns {
width: 240px;
margin-right: 0;
margin-left: 0;
}
3. Nastpnie ustawimy pozycjonowanie elementu figure na wzgldne (relative),
aby pooenie znajdujcych si w nim elementw, np. img i figcaption, byo
wyznaczane wzgldem niego. Ponadto ustawimy wasno overflow elementu
figure na hidden:
.portfolio > figure {
position: relative;
overflow: hidden;
}
Ustawieniem wasnoci overflow elementu figure na hidden ukrywamy element
wychodzcy poza granice elementu figure. W naszym przykadzie wykorzystamy
to do ukrywania elementu figcaption, jak pokazaem na pierwszym zrzucie ekranu
przedstawionym na nastpnej stronie.
4. Wasno max-width obrazu ustawimy na 100%, dziki czemu obraz bdzie
rozmiarem pasowa do zawierajcego go elementu, niezalenie od jego rozmiaru:
.portoflio > figure img {
max-width: 100%;
}
5. Ponadto jeli uwanie przyjrzysz si miniaturze, dostrzeesz niewielki odstp
znajdujcy si za elementem img, ktry jest typowy dla elementw rdliniowych
i jest zwizany z domylnym wyrwnaniem elementu w pionie
(http://www.impressivewebs.com/difference-block-inline-css/)
(patrz drugi rysunek na nastpnej stronie).
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
87
Jednym ze sposobw na usunicie tego odstpu jest ustawienie wasnoci display na
block. Dlatego te dodajemy deklaracj display: block do reguy dla elementw img:
.portfolio > figure img {
max-width: 100%;
display: block;
}
Mona te pozby si tej pustej przestrzeni poprzez ustawienie wasnoci
vertical-align na top.
6. Nastpnie zdefiniujemy style dla podpisw miniatur, ktre s reprezentowane
przez element HTML5 figcaption. Najpierw ustawimy wasno position
na absolute:
.portfolio figcaption {
position: absolute;
}
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
88
Spowoduje to zmian wysokoci elementu nadrzdnego i zniknicie podpisw
wywoane ustawieniem ich pozycji na miejsce poza obszarem elementu figure.
Nastpnie ustawiamy wysoko i szeroko podpisu na 100%, aby jego wymiary zawsze
pokryway si z wymiarami rodzica, ktrym w tym przypadku jest element figure:
.portfolio figcaption {
position: absolute;
width: 100%;
height: 100%;
}
7. Ustawiajc wasno position elementu figure na absolute, moemy go przesun
w dowolnym kierunku, nie przejmujc si ssiednimi elementami. W tym
przypadku ustawimy wasnoci left i top na 0, jak wida na poniszym listingu:
.portfolio figcaption {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
Dziki temu, e elementowi figure wasno position zostaa ustawiona na relative,
pooenie znajdujcego si w nim podpisu jest ustalane wzgldem wanie tego
elementu figure (bdcego rodzicem podpisu). To sprawia, e podpis nakada si
na miniatur, jak na poniszym zrzucie ekranu:
8. Nastpnie ustawimy kolor ta podpisu przy uyciu techniki RGBA (ang. red, green,
blue, alpha czerwony, zielony, niebieski, alfa). Warto kanau kadego koloru
oznacza si liczb z przedziau od 0 do 255.
Jeli na przykad wpisze si 0 dla kadego kanau (rgba(0,0,0,1)), to otrzyma si
kolor czarny, ktry w zapisie szesnastkowym ma posta #000000. Analogicznie same
wartoci 255 oznaczaj kolor biay (#ffffff w notacji szesnastkowej).
Technika RGBA umoliwia take dostosowanie poziomu przezroczystoci koloru
za pomoc kanau alfa. Zakres wartoci tego kanau wynosi od 0 do 1. Warto 0
oznacza 0%, a 1 to 100%. W takim razie 0.5 jest rwnoznaczne z 50%.
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
89
W poniszej regule ustawiamy czarny kolor ta i przezroczysto na poziomie 80%:
.portfolio figcaption {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(58,63,67,.8);
}
9. Dodamy te dopenienie, aby odsun nieco tekst podpisu od krawdzi elementu
kontenera. W poniszej regule dopenienie zostao ustawione na 10%:
.portfolio figcaption {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(58,63,67,.8);
padding: 10%;
}
Dziki temu, e wczeniej ustawilimy wasno box-sizing na border-box,
rozmiar podpisu (wysoko i szeroko) pozostanie na poziomie 100%, niezalenie
od dopenienia. Inaczej mwic: podpis nadal bdzie mia wymiary swojego
rodzica, ktre wynosz 240 240 pikseli.
10. Jako e to jest ciemne, tekstowi musimy nada jasny kolor. W zwizku z tym
zmienimy kolor tekstu podpisu na biay (#fff):
.portfolio figcaption h4 {n
color: #fff;
}
.portfolio figcaption p {
color: #fff;
}
11. Moe jest to kwestia gustu, ale mnie si wydaje, e tekst w podpisie jest za duy.
Dlatego zmniejsz go o 1 piksel w stosunku do rozmiaru bazowego. Podstawowy
rozmiar pisma wynosi 14 pikseli, wic zmieni go na 13, czyli 0.929em:
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
90
.portfolio figcaption p {
color: #fff;
font-size: 0.929em;
}
Co uzyskalimy?
Wanie dodalimy reguy stylistyczne dotyczce miniatury i jej podpisu. Na tym etapie nasze
portfolio wyglda jak na poniszym zrzucie ekranu:
Przeksztacenia dwuwymiarowe CSS
Ostanie lata przyniosy sporo nowoci w CSS3, wrd ktrych znajduj si m.in. przekszta-
cenia CSS3 (http://www.w3.org/TR/css3-transforms/). Przy uyciu przeksztace mona prze-
suwa, obraca, znieksztaca oraz zwiksza i zmniejsza elementy HTML.
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
91
Funkcja translate()
Funkcja translate() w przeksztaceniach CSS3 suy do przesuwania elementw wzgldem
ich pierwotnego pooenia. Mona jej uywa na trzy sposoby:
Aby przesun element w poziomie:
transform: translateX(value);
Aby przesun element w pionie:
transform: translateY(value);
Mona te uy skrconej skadni umoliwiajcej dokonanie przesunicia zarwno
w poziomie, jak i w pionie:
transform: translate(x-value,y-value);
Pooenie elementu okrela si za pomoc wartoci x i y, ktre reprezentuj odpowiednio wsp-
rzdn na osi x i wsprzdn na osi y w ukadzie wsprzdnych podobnym do kartezjaskie-
go (http://pl.wikipedia.org/wiki/Ukad_wsprzdnych_kartezjaskich).
Poniewa jednak strony internetowe czyta si od gry, wsprzdna y ma odwrotne znacze-
nie, tzn. ujemna warto oznacza przesunicie w gr, a dodatnia w d.
Powiedzmy, e chcemy przesun element o 100 pikseli w prawo. Takie przesunicie mona
zapisa w nastpujcy sposb:
transform: translateX(100px)
Mona te uy skrconej notacji nastpujco:
transform: translate(100px,0)
Podobnie, aby przesun element o 100 pikseli w gr, mona to zapisa tak:
transform: translateY(-100px)
Ale mona te uy notacji skrconej:
transform: translate(0,-100px)
Jeli natomiast zechcemy przesun element na ukos, zdefiniujemy zarwno przesunicie po-
ziome, jak i pionowe:
transform: translate(100px,-100px)
Ta deklaracja przesunie element do gry i w prawo, jak na poniszym rysunku:
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
92
Przedrostki firmowe
Funkcj translate() obsuguj przegldarki Chrome 4, Safari 3.1, Firefox 3.5, Internet Explorer
10 oraz Opera 10.5, chocia eby zadziaaa, trzeba doda odpowiednie przedrostki firmowe.
W zwizku z tym kompletna regua przeksztacenie wyglda tak:
-webkit-transform: translate(x,y); /* Webkit (np. Chrome i Safari) */
-moz-transform: translate(x,y); /* Mozilla Firefox */
-ms-transform: translate(x,y); /* Internet Explorer */
-o-transform: translate(x,y); /* Opera */
transform: translate(x,y); /* standardowa skadnia zalecana przez W3C */
Przegldarki rozpoznaj deklaracje z wasnymi przedrostkami, a pozostae ignoruj. Na przykad
przegldarki oparte na mechanizmie Webkit, np. Chrome i Safari, uywaj przedrostka -webkit-.
Gdy specyfikacja przeksztace zostanie ukoczona i w peni zaimplementowana w przegl-
darkach, uywana bdzie wymieniona na kocu standardowa deklaracja zalecana przez W3C
(http://w3.org/).
Dlatego wanie powinno si stosowa wersje deklaracji z przedrostkami firmowymi: zwik-
szaj one zakres obsugiwanych przegldarek.
W powyszej regule uyto a piciu deklaracji, z ktrych kada zasadniczo suy do tego samego celu.
Jak wida, wpisywanie przedrostkw firmowych to bardzo mudne zadanie, ktre lepiej wykona przy
uyciu specjalnego narzdzia.
Jednym z takich generatorw przedrostkw firmowych jest Prefixr (http://prefixmycss.com/). Jeli uywasz pro-
gramu Sublime Text 2, to moesz pobra specjalny pakiet umoliwiajcy jego uruchomienie bezporednio
w edytorze.
Istnieje te biblioteka JavaScript o nazwie Prefix Free (http://leaverou.github.com/prefixfree/), ktra do-
daje przedrostki w locie, dziki czemu nie trzeba ich w ogle wpisywa.
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
93
Przejcia CSS3
Kolejnym znakomitym nowym dodatkiem w CSS3 s przejcia umoliwiajce stopniowe
w odrnieniu od byskawicznego zmienianie jednej reguy CSS na inn w okrelonym czasie.
Do definiowania przej CSS3 suy nastpujca skadnia (pokazane s te wersje z przed-
rostkami):
-webkit-transition: property duration timing-function delay; /* Webkit (np. Chrome
/ & Safari) */
-moz-transition: property duration timing-function delay; /* Mozilla Firefox */
-o-transition: property duration timing-function delay; /* Opera */
transition: property duration timing-function delay; /* standardowa
/ skadnia zalecana przez W3C */
Aktualnie przejcia CSS3 s obsugiwane przez przegldarki Chrome 4, Firefox 4, Safari 3.1,
Opera 10.5 oraz Internet Explorer 10.0 (http://caniuse.com/#feat=css-transitions).
Przegldarka Internet Explorer nie obsuguje przej CSS3 i dlatego na powyszym listingu nie ma wersji deklaracji
z przedrostkiem -ms-, bo Internet Explorer 10 obsuguje je bez przedrostka (http://msdn.microsoft.com/en-us/
library/ie/hh673535(v=vs.85).aspx).
Wartoci przej CSS3
W przedstawionych przykadach uyte zostay po cztery wartoci: property, transition-duration,
timing-function oraz delay. Zobaczmy, do czego su:
Warto Opis
property Ta warto wskazuje wasno CSS, do ktrej ma zosta zastosowany efekt przejcia.
Moe to by width, height, color, background itd.
Jeli nie zostanie wprost zdefiniowana, to zostanie zastosowana warto domylna
all, stosujca przejcie do wszystkich wasnoci.
transition-duration Warto okrelajca czas trwania przejcia. Mona j wyraa w milisekundach lub
sekundach, np. 200ms albo 0.2s.
timing-function Warto okrelajca sposb wykonywania przejcia w czasie. Dostpnych jest pi
gotowych ustawie: ease, easein, ease-out, ease-in-out oraz linear. Ich
dziaanie mona obejrze na stronie http://www.css3.info/preview/css3-transitions/.
delay Warto okrelajca, po upywie jakiego czasu ma si rozpocz wykonywanie
przejcia.
Ponisza przykadowa regua tworzy koo z elementu div, ktre potem dziki przejciom zmieni-
my stopniowo w prostokt, gdy zostanie nad nim ustawiony kursor:
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
94
div {
width: 200px;
height: 200px;
border-radius: 100px;
border: 5px solid orange;
background-color: tomato;
}
div:hover {
border-radius: 0;
}
Jak wspominaem wczeniej, teraz przejcie zostanie wykonane natychmiast, bo nie uylimy
adnej wasnoci przej CSS3. Zrobimy to teraz. Ustawimy efekt przejcia dla wasnoci
border-radius o czasie trwania 200ms:
div {
/* pozostae deklaracje s takie same jak powyej */
-webkit-transition: border-radius 200ms;
-moz-transition: border-radius 200ms;
-o-transition: border-radius 200ms;
transition: border-radius 200ms;
}
Teraz zmiana bdzie si dokonywaa stopniowo, jak pokazuje poniszy rysunek, i bdzie bardziej
atrakcyjna:
Czas na dziaanie zmiana obrazu po najechaniu
kursorem
Aby zmieni obraz na co innego po najechaniu na niego kursorem, wykonaj nastpujce
czynnoci:
1. Otwrz plik style.css. Przypomn, e podpisy obrazw s reprezentowane przez
elementy HTML5 figcaption. Wczeniej elementom tym zdefiniowalimy ju
troch ustawie, np. pozycjonowanie, szeroko i wysoko, kolor ta, kolor pisma
oraz dopenienie.
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
95
Teraz dodamy reguy dotyczce efektu hover. Oglnie chodzi o to, e po najechaniu
kursorem na miniatur podpis stopniowo wysunie si z wybranej strony i zakryje
obraz.
W poniszej regule najpierw przesuwamy podpis w prawo za pomoc
przeksztacenia CSS3:
.portoflio figcaption {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 10%;
background-color: rgba(58,63,67,.8);
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
2. Teraz dodamy efekt przejcia CSS3. W poniszej regule ustawiamy przejcie
dla wszystkich wasnoci na czas 350ms:
.portoflio figcaption {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 10%;
background-color: rgba(58,63,67,.8);
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 350ms;
-moz-transition: all 350ms;
-o-transition: all 350ms;
transition: all 350ms;
}
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
96
3. Na koniec dodamy definicj stanu hover. W stanie tym podpis wraca do swojego
pierwotnego pooenia dziki ustawieniu funkcji translateX na 0:
.container figure:hover figcaption {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
Co uzyskalimy?
Kod ten wykonuje kilka dziaa. Po pierwsze przesuwa podpis za pomoc wasnoci transform
o 100% szerokoci rodzica w prawo:
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
Teraz podpis jest niewidoczny, bo ustawilimy, e elementy wychodzce poza granice elementu
figure maj by niewidoczne. Ilustruje to poniszy zrzut ekranu:
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
97
Nastpnie stosujemy efekt przejcia do wszystkich wasnoci podpisu:
-webkit-transition: all 350ms;
-moz-transition: all 350ms;
-o-transition: all 350ms;
transition: all 350ms;
W kocu zdefiniowalimy style elementu w stanie hover. Chodzi nam o to, by podpis obrazu po
najechaniu na niego kursorem wysuwa si z prawej strony i wraca do swojego pierwotnego
pooenia. Dlatego wanie ustawilimy wsprzdn przesunicia na 0%.
Po wpisaniu do arkusza stylw wszystkich opisanych w tej czci regu efekt hover powinien
dziaa:
Filtrujca nawigacja po stronie
Jak wspominaem, nawigacja na tej stronie bdzie sortowa portfolio wedug kategorii. W zwizku
z tym do jej utworzenia uyem przyciskw radiowych z etykietami:
<input class="nav-menu" id="all" type="radio" name="filter" checked="checked"/>
<label for="all">Wszystkie</label>
<input class="nav-menu" id="illustrations" type="radio" name="filter"/>
<label for="illustrations">Ilustracje</label>
<input class="nav-menu" id="posters" type="radio" name="filter"/>
<label for="posters">Plakaty</label>
<input class="nav-menu" id="typography" type="radio" name="filter"/>
<label for="typography">Typografia</label>
<input class="nav-menu" id="packaging" type="radio" name="filter"/>
<label for="packaging">Opakowania</label>
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
98
Czas na dziaanie tworzenie filtra portfolio
Aby utworzy filtr portfolio, wykonaj nastpujce czynnoci:
1. Otwrz plik style.css. Nawigacja jest zbudowana na bazie przyciskw radiowych
przypisanych do klasy nav-menu. Najpierw ukryjemy przyciski radiowe:
.nav-menu {
display: none;
}
2. Nastpnie dodamy style formatujce element label. W poniszej regule ustawiamy
wasno display na inline-block, aby etykiety byy wywietlane w jednym rzdzie:
label {
padding: 5px 10px;
color: #3a3f43;
cursor: pointer;
display: inline-block;
}
3. Gdy zostanie wybrany przycisk radiowy, zmieniaj si style elementu label. W tym
przypadku ustawimy ciemniejszy kolor ta, aby pokaza, e menu zostao zaznaczone.
To pociga za sob konieczno zmiany koloru tekstu na biay.
Aby odnie si do elementu label znajdujcego si bezporednio obok zaznaczonego
elementu input, naley uy selektora przylegajcego elementu siostrzanego:
.nav-menu:checked + label {
color: #fff;
background-color: #3a3f43;
border-radius: 3px;
}
4. Nastpnie zdefiniujemy funkcj filtrujc. Zaczniemy od ukrycia miniatury
portfolio. W tym celu zdefiniujemy nastpujc regu z selektorem .nav-menu:
.nav-menu,
.portfolio > figure.columns {
display: none;
}
5. Aby uzyska funkcj filtrujc, trzeba poczy kilka selektorw CSS. Ale najpierw
trzeba zbudowa nawigacj przy uyciu przyciskw radiowych i kademu z nich
przypisa inny identyfikator. Z przyciskami tymi zwizane s etykiety za pomoc
atrybutu for="id". Dziki temu kliknicie etykiety powoduje zaznaczenie
odpowiadajcego jej przycisku radiowego. Do zaznaczonego przycisku mona si
odnie dziki pseudoklasie CSS3 :checked. W poniszym kodzie wybieramy
zaznaczony element input, ktrego identyfikator to all:
#all:checked
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
99
Doczajc selektor przylegajcego elementu, odnosimy si do sekcji portfolio:
#all:checked ~ .portfolio
Po wybraniu sekcji portfolio moemy wybiera znajdujce si w niej elementy
potomne, aby zastosowa do nich reguy stylistyczne. W tym przypadku naszym
celem jest zdefiniowanie wasnoci display o wartoci block elementom
przypisanym do klasy all:
#all:checked ~ .portfolio .all {
display: block;
}
Dziki temu kliknicie elementu input o identyfikatorze all bdzie powodowao
wywietlenie wszystkich miniatur portfolio.
6. Teraz zrobimy to samo dla pozostaych kategorii poster, illustration,
typography oraz package:
#all:checked ~ .portfolio .all,
#posters:checked ~ .portfolio .poster,
#illustrations:checked ~ .portfolio .illustration,
#typography:checked ~ .portfolio .typography,
#packaging:checked ~ .portfolio .package {
display: block;
}
Co uzyskalimy?
Napisalimy style dotyczce nawigacji i zdefiniowalimy funkcj filtrowania przy uyciu se-
lektorw CSS.
Mimo e pseudoklasa :checked oficjalnie zostaa dodana dopiero do specyfikacji CSS3, bya obsugiwana ju
przez przegldark Firefox 1. Aby zobaczy, jak dziaa, mona obejrze demo na stronie W3C pod adresem
http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/full/flat/css3-modsel-25.html.
Teraz powinno by moliwe sortowanie portfolio wedug kategorii, jak wida na zrzucie ekra-
nu pokazanym na nastpnej stronie.
Stopka
W tej czci zdefiniujemy style stopki. W stopce znajduj si odnoniki do naszych profili w serwi-
sach spoecznociowych oraz informacje kontaktowe: numer telefonu, adres e-mail, a take
imi i nazwisko.
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
100
Czas na dziaanie formatowanie stopki
Aby sformatowa stopk, wykonaj nastpujce czynnoci:
1. Cay czas pracujemy w pliku style.css. Stopka naszej strony jest zdefiniowana
w elemencie HTML5 footer i jest przypisana do klasy footer. Zaczniemy
od zdefiniowania stylw dekoracyjnych, takich jak marginesu, dopenienia
i obramowania:
.footer {
border-top: 1px solid #ccc;
margin-top: 28px;
padding: 28px 0;
}
2. Nastpnie przeniesiemy odnoniki do mediw spoecznociowych na lew stron:
.social {
float: left;
}
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
101
3. W sekcji odnonikw spoecznociowych wygospodarowalimy troch miejsca
na formuk o prawach autorskich. Zmienimy kolor tekstu na szary i odsuniemy
j nieco od dolnej krawdzi strony za pomoc wasnoci margin-bottom:
.social .copyright {
color: #ccc;
margin-bottom: 10px;
font-size: 1em;
}
4. Odnoniki do mediw spoecznociowych znajduj si w elementach li.
Sprawimy, e bd wywietlane w jednym rzdzie:
.social ul li {
display: inline;
}
5. Teraz zdefiniujemy style samych odnonikw. Najpierw, aby mc ustawia ich
szeroko i wysoko, naley ustawi wasno display elementu kotwicy na
inline-block, a nastpnie ustawimy szeroko na 42 piksele i wysoko na 36 pikseli:
.social ul li a {n
display: inline-block;
width: 36px;
height: 42px;
}
6. Zastosujemy te technik podmiany tekstu odnonika na obraz, ktry pniej
dodamy za pomoc wasnoci background-image:
.social ul li a {
display: inline-block;
width: 48px;
height: 48px;
/* poniej znajduj si style dotyczce zastpowania tekstu odnonika obrazem */
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
7. W nastpnej kolejnoci dodamy do elementu a za pomoc wasnoci background-image
ikony mediw spoecznociowych, ktre poczylimy w jeden plik spritew
w rozdziale 2.:
.social-dribbble a,
.social-facebook a,
.social-twitter a {
background-image: url('../images/social.png');
background-repeat: no-repeat;
}
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
102
8. Kolejn czynnoci bdzie zmodyfikowanie regu CSS wygenerowanych podczas
czenia ikon w jeden plik. Reguy te okrelaj pooenie obrazu z ikonami:
.social-dribbble-hover{
background-position: 0 0;
width: 48px;
height: 48px;
}
.social-dribbble{
background-position: 0 -58px;
width: 48px;
height: 48px;
}
.social-facebook-hover{
background-position: 0 -116px;
width: 48px;
height: 48px;
}
.social-facebook{
background-position: 0 -174px;
width: 48px;
height: 48px;
}
.social-twitter-hover{
background-position: 0 -232px;
width: 48px;
height: 48px;
}
.social-twitter{
background-position: 0 -290px;
width: 48px;
height: 48px;
}
Najpierw zmienimy klas definiujc stan hover (.social-dribbble-hover)
i przypiszemy j do czy w postaci ikon:
.social-dribbble a:hover {
background-position: 0 0;
width: 48px;
height: 48px;
}
.social-dribbble{
background-position: 0 -58px;
width: 48px;
height: 48px;
}
.social-facebook a:hover{
background-position: 0 -116px;
width: 48px;
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
103
height: 48px;
}
.social-facebook{
background-position: 0 -174px;
width: 48px;
height: 48px;
}
.social-twitter a:hover{
background-position: 0 -232px;
width: 48px;
height: 48px;
}
.social-twitter{
background-position: 0 -290px;
width: 48px;
height: 48px;
}
9. Jako e szeroko i wysoko ustawilimy wczeniej, teraz moemy usun
te definicje:
.social-dribbble a:hover {
background-position: 0 0;
}
.social-dribbble{
background-position: 0 -58px;
}
.social-facebook a:hover{
background-position: 0 -116px;
}
.social-facebook{
background-position: 0 -174px;
}
.social-twitter a:hover{
background-position: 0 -232px;
}
.social-twitter{
background-position: 0 -290px;
}
10. Sekcj kontaktow przesuniemy na praw stron:
.contact {
float: right;
}
11. Zmienimy kolor tekstu i czy tekstowych na szary:
.contact, .contact a {
color: #ccc;
}
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
104
12. Nastpnie za pomoc wasnoci background-image dodamy ikony danych
kontaktowych, ktre poczylimy w jeden plik w rozdziale 2. Ale te ikony
wstawimy do pseudoelementu :before.
Pseudoelement :before dodaje element przed treci elementu, do ktrego
zosta zastosowany. Istnieje te pseudoelement :after, ktry dodaje element
za wyznaczonym elementem.
W kodzie HTML mona to przedstawi nastpujco:
<div>
<span> </span> <!-- :before -->
Tre
<span> </span> <!-- :after -->
</div>
Pseudoelementy nie dodaj prawdziwych elementw HTML i dlatego wanie
nazywa si je pseudoelementami. S one traktowane tak jak elementy,
ale w rzeczywistoci nimi nie s.
W CSS3 zmieniono troch skadni pseudoelementw w porwnaniu z wczeniejszymi
wersjami tej technologii. Obecnie elementy te definiuje si przy uyciu dwch
dwukropkw (::before i ::after), aby odrni je od pseudoklas, ktre definiuje
si za pomoc jednego dwukropka (:hover i :checked).
W poniszej regule dodajemy pseudoelement :before do elementu li, zmieniamy
te wasno display na inline-block, aby mc ustawia szeroko i wysoko:
.contact ul li:before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
background-image: url('../images/contact.png');
margin-right: 0.1em;
}
13. Na koniec dostosowujemy pooenie ta zawierajcego ikony danych kontaktowych:
.contact-name:before {
background-position: 0 -29px;
}
.contact-phone:before {
background-position: 0 -63px;
}
.contact-email:before{
background-position: 0 5px;
}
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
105
Co uzyskalimy?
Zdefiniowalimy style stopki i dodalimy sekcje z odnonikami do profilw spoecznociowych
i danymi kontaktowymi. Teraz stopka powinna wyglda tak jak na poniszym zrzucie ekranu:
Definiowanie stylw dla mniejszych ekranw
Teraz zdefiniujemy style umoliwiajce wygodne przegldanie strony w urzdzeniach o mniej-
szych ekranach. W tym celu uyjemy zapyta medialnych CSS3.
Zanim zaczniemy definiowa wasne style, skopiujemy wszystkie zapytania medialne z pliku
layout.css systemu Skeleton do naszego pliku style.css. Reguy do skopiowania s pokazane
poniej:
/* Urzdzenia i przegldarki o rozmiarze okna mniejszym ni */
@media only screen and (max-width: 959px) {
}
/* Tablet w poziomie do 960 */
@media only screen and (min-width: 768px) and (max-width: 959px) {
}
/* Wszystkie urzdzenia przenone */
@media only screen and (max-width: 767px) {
}
/* Urzdzenia przenone w poziomie do tabletu w pionie */
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* Urzdzenia przenone w pionie do urzdzenia przenone w poziomie */
@media only screen and (max-width: 479px) {
}
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
106
Czas na dziaanie rozmiar obszaru widoku
poniej 960 pikseli
Zdefiniujemy style przeznaczone dla przegldarek o szerokoci okna mniejszej ni 960 pikseli:
1. Definiowane style zostan umieszczone w poniszym zapytaniu medialnym, ktre
serwuje style przegldarkom o szerokoci mniejszej ni 960 pikseli:
@media only screen and (max-width: 959px) {
}
2. Jako e definiujemy style dla mniejszego urzdzenia, musimy zmieni szeroko
kolumn i kontenera na wzgldne jednostki. W tym przypadku szeroko kontenera
bdzie wynosi 100%, a szeroko kolumn wyniesie po 25%, bo kontener jest
podzielony na cztery kolumny:
.container {
width: 100%;
}
.portfolio .four.columns {
width: 25%;
}
3. Nastpnie ukryjemy menu nawigacyjne, aby uytkownicy mogli porusza si
po stronie za pomoc palcw:
label {
display: none;
}
4. Pod kadym wierszem ustawimy niewielki odstp za pomoc wasnoci margin-bottom
dodanej do elementu figure:
.portfolio .all {
margin-bottom: 15px;
}
5. Jako e ukrylimy nawigacj, musimy gdzie indziej przesun informacj o kategorii.
Przeniesiemy j na gr obrazu. Moemy do tego celu wykorzysta pseudoelement
:before oraz pobiera informacje z atrybutu HTML5 data-*:
.portofolio > figure:before {
content: attr(data-category);
font-size: 1em;
padding: 8px;
width: 100%;
color: #fff;
display: block;
font-weight: bold;
text-transform: capitalize;
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
107
background-color: rgba(42,47,51,0.8);
position: absolute;
}
6. W tym pomniejszonym obszarze widoku nie bdziemy ukrywa podpisw obrazw,
tylko je wywietlimy. W zwizku z tym ustawiamy wasno position na relative,
a translateX na 0%, ponadto ustawimy domylny kolor ta podpisom:
.portfolio figcaption {
position: relative;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
background-color: #3a3f43;
}
7. Za pomoc selektora nth-child wybierzemy elementy figure o nieparzystym
numerze oraz ustawimy im to na ciemniejsze ni domylne ustawione w punkcie 6,
dziki czemu podpisy bd si od siebie rni:
.portoflio figure:nth-child(odd) figcaption {
background-color: #2a2f33;
}
8. Na koniec dostosujemy margines w stopce:
.footer {
border-top: 1px solid #ccc;
margin-top: 42px;
padding: 28px;
}
Co uzyskalimy?
Dodalimy style dla okien o szerokoci mniejszej ni 960 pikseli. Efekt przedstawiono na na-
stpnej stronie.
Czas na dziaanie rozmiar obszaru widoku
od 767 do 480 pikseli
Teraz zdefiniujemy style dla okien o szerokoci od 767 do 480 pikseli. Rozmiary takie najcz-
ciej maj urzdzenia przenone i tablety.
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
108
1. Reguy stylistyczne bdziemy wpisywa w poniszym zapytaniu medialnym:
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
2. Jako e obszar widoku zosta jeszcze bardziej zwony, musimy nada kolumnom
nieco wiksze wymiary procentowe. Podzielimy szeroko kontenera na p,
aby otrzyma dwie kolumny o szerokoci 50% szerokoci obszaru widoku:
.portfolio .four.columns {
width: 50%;
}
Co uzyskalimy?
Zdefiniowalimy styl dla obszarw widoku o szerokoci od 767 do 480 pikseli. Efekt tego zabiegu
przedstawia poniszy zrzut ekranu:
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
109
Czas na dziaanie rozmiar obszaru widoku
poniej 480 pikseli
Na koniec dodamy style dla obszarw widoku o szerokoci mniejszej ni 480 pikseli:
1. Style przeznaczone dla okien przegldarek o szerokoci poniej 480 pikseli
umiecimy w nastpujcym zapytaniu medialnym:
@media only screen and (max-width: 479px) {
}
2. Poniewa tym razem miejsca jest bardzo mao, zostawimy tylko jedn kolumn
o szerokoci 100% szerokoci obszaru widoku, aby zapewni dobr widoczno obrazu:
.portfolio .four.columns {
width: 100%;
}
3. W stopce usuniemy deklaracj wasnoci float i ustawimy wasno text-align
na center:
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
110
.footer {
text-align: center;
}
.contact, .social {
float: none;
display: block;
}
Co uzyskalimy?
Zdefiniowalimy style przeznaczone dla okien przegldarek o szerokoci mniejszej ni 480
pikseli. Na poniszym zrzucie ekranu wida efekt tych dziaa:
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
111
Testowanie strony w rnych rozmiarach
obszaru widoku
Strona jest gotowa i mona zacz jej testowanie. Sprawdzimy, jak wyglda w przegldarce kom-
putera stacjonarnego i w mniejszych przegldarkach poprzez zmniejszenie okna tej samej prze-
gldarki. Mona te uy jednego z poniszych specjalnych narzdzi:
Narzdzie Widok responsywny Firefoksa: https://developer.mozilla.org/en-
US/docs/Tools/Responsive_Design_View.
Responsinator: http://www.responsinator.com/.
Screenqueries: http://screenqueri.es/.
Najlepiej oczywicie testowa stron w prawdziwych urzdzeniach telefonach, tabletach,
czytnikach bo mona sprawdzi, jak dziaa w realnych warunkach. Ponisze zrzuty ekranu
przedstawiaj wygld naszej strony w urzdzeniach iPhone i iPad.
Poniszy zrzut ekranu przedstawia stron w telefonie iPhone w orientacji pionowej. W tak maym
obszarze widoku (320 480 pikseli) nawigacja jest ukryta i zastpiona nazw kategorii wy-
wietlon nad kad z miniatur. Take podpis kadego obrazu mona zobaczy pod obrazem.
Poniszy zrzut ekranu przedstawia nasz stron w telefonie iPhone w orientacji poziomej. Podob-
nie jak w orientacji pionowej, nawigacja jest ukryta. Ale jako e szeroko obszaru widoku jest
wiksza 480 320 pikseli wywietlone zostay dwie miniatury w jednym rzdzie.
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
112
Poniszy zrzut ekranu przedstawia nasz stron w iPadzie w orientacji pionowej. W tak szerokim
obszarze widoku (768 1024 pikseli) zmieszcz si cztery miniatury w rzdzie, a opisy s cay
czas widoczne i umieszczone pod miniaturami.
Na koniec zobaczymy jeszcze stron w iPadzie w orientacji poziomej. Wymiary obszaru widoku
wynosz 1024 768 pikseli, wic jest wystarczajco miejsca, aby wywietli po cztery miniatury
Kup ksik Pole ksik
Rozdzia 3. Ulepszanie strony portfolio przy uyciu CSS3
113
w rzdzie. W tym rozmiarze ekranu widoczna jest te nawigacja. Mona jej uywa do sortowania
obrazw.
Podsumowanie
Wanie ukoczylimy prace nad nasz pierwsz elastyczn stron zbudowan przy uyciu tech-
nologii CSS3. W rozdziale tym wykonalimy nastpujce czynnoci:
Dopracowalimy detale za pomoc nowych wasnoci wprowadzonych w CSS3,
takich jak box-sizing, border-radius oraz box-shadow.
Utworzylimy atrakcyjny efekt zamiany obrazu i tekstu za pomoc przeksztace
i przej CSS3.
Utworzylimy funkcj filtrowania portfolio za pomoc kombinacji selektorw CSS.
Dostosowalimy styl stron do rnych rozmiarw obszaru widoku za pomoc
zapyta medialnych CSS3.
W tym rozdziale poznalimy system szkieletowy Skeleton, w nastpnym za poznamy inny system
sucy do tworzenia elastycznych stron internetowych.
Kup ksik Pole ksik
Responsive Web Design. Nowoczesne strony WWW na przykadach
114
Kup ksik Pole ksik
Skorowidz
A
aplikacje LESS, 119
arkusze stylw SCSS, 203, 207
atrybut placeholder, 138
atrybuty danych HTML5, 63
B
Bootstrap, Patrz system Bootstrap
C
Compass, 198, 204
CSS3, 23, 71, 151
box-sizing, 73
przejcia, 93
pseudoklasy, 84
selektory strukturalne, 261
zapytania medialne, 18, 50, 105, 129, 212
D
definiowanie
domieszek LESS, 154
fontu, 127
stylw, 105
nagwka, 80
sekcji galerii, 173
sekcji referencji, 174
stopki, 167
dodawanie
plikw CSS, 57
plikw LESS, 124
regu stylistycznych, 157
rodzin fontw, 251
stylw nagwka, 164
stylw stopki, 167
wasnych fontw, 58
domieszki, 35, 39
Compassa, 251
LESS, 154
parametryczne, 36
dostosowywanie
grafik, 59, 117, 208
kolorw, 247
stylw, Patrz formatowanie
zmiennych, 248
dziaania arytmetyczne, 38
dziedziczenie selektorw, 40
E
edytor Sublime Text, 201
edytory kodu, 31
efekt hover, 56
elastyczne
portfolio, 43
skryptozakadki, 31
element
<img>, 21
<picture>, 20
elementy
blokowe, 72
HTML5, 63
rdliniowe, 72
em, 76
Kup ksik Pole ksik
Skorowidz
290
F
filtr portfolio, 98
FIR, Fahrner Image Replacement, 155
Firdaus Thoriq, 9
firma
Hivemind, 26
Swizzle, 28
fonty, 78, 250
fonty darmowe, 125
formatowanie
nagwka, 80, 254
stopki, 100
strony gwnej, 263
strony o usugach, 273
stylw
pola adresu, 175
sekcji powitalnej, 170
sekcji wezwania do dziaania, 172
stopki, 257
strony Kontakt, 181, 282
strony O nas, 282
strony z cennikami, 279
tytuu strony, 178
formaty fontw, 126
formularz, 140
formularz subskrypcji, 175
Foundation, Patrz system Foundation
funkcja translate(), 91
funkcje
kolorw Sassa, 247
LESS, 155
pomocnicze Compassa, 204, 255
G
galeria, 140
gem Foundation, 198
H
HTML5, 23, 63
HTML5 Shim, 47
I
ikony
kontaktowe, 62
mediw spoecznociowych, 60
systemu iOS, 53
interfejs uytkownika, 212
J
jednostka
em, 76
px, 74
jednostki miary CSS, 74
jzyk Ruby, 198
jQuery, 213
K
katalog roboczy, 46
Kelly Kevin, 11
kolorowanie skadni SCSS, 201
kompilatory kodu, 33
kompilowanie
kodu LESS, 123, 124
SCSS na CSS, 207
konfigurowanie
projektu Compassa, 204
cieki projektu, 206
konwertowanie jednostek, 76
L
LESS, 151
M
McBurnie Shawn, 11
metaznacznik viewport, 18, 47
model polowy CSS, 72
modyfikowanie
dokumentu HTML, 214
kolorw, 155
monitorowanie projektu, 246
Kup ksik Pole ksik
Skorowidz
291
N
nagwek, 79, 164
narzdzia Compassa, 204
narzdzie
CSS Sprite Generator, 61
Widok responsywny, 195
nawigacja, 56, 97, 130, 254
O
obliczanie wartoci em, 76
obrazy, 59
obsuga LESS, 42
obszar widoku
360 pikseli, 230, 236, 244
480 pikseli, 109, 190
767 pikseli, 107, 186
960 pikseli, 106
ograniczenia RWD, 20
Orbit, 213
osadzanie fontw, 58
zelik Volkan, 11
P
parametr initial-scale, 18
piksel, 74, 75
plik
_bootstrap.less, 123, 194
config.rb, 204, 206
index.html, 69
layout.css, 105
styles.css, 74
pliki
CSS, 57
LESS, 121
pobieranie systemu Skeleton, 46
polecenie gem, 199
preprocesory CSS, 32
LESS, 33
Sass, 39, 198
Stylus, 32
procent, 78
program
Adaptive Image, 23
CrunchApp, 201
przedrostki firmowe, 160
przegldarki internetowe, 30
przejcia CSS3, 93
przeksztacenia dwuwymiarowe CSS, 90
przyciski, 162
przygotowywanie grafik, 59, 117, 208
pseudoelement :before, 104
pseudoklasa CSS3
:checked, 84
:nth-child, 84
px, 74
R
regua @font-face, 125, 127
reguy stylistyczne, 90, 157
RGBA, 88
rozdzielczo ekranu, 76
rozmiar obszaru widoku, 106111
RWD, Responsive Web Design, 13, 17
narzdzia, 30
ograniczenia, 20
systemy, 2430
S
Sass, 198, 200
SCSS, 200
sekcja
galerii, 172
powitalna, 170
referencji, 174
wezwania do dziaania, 171
selektor
dziecka, 81
elementu siostrzanego, 82, 83
uniwersalny, 74
selektory strukturalne, 261
serwis Living.is, 27
skalowalna siatka, 48
skalowalne obrazy, 20
skalowalno systemu Bootstrap, 128
Skeleton, Patrz system Skeleton
skadnia
Sass, 200
SCSS, 200
sprite, 61, 255
stopka, 99, 167, 256
Kup ksik Pole ksik
Skorowidz
292
strona
galerii, 176
gwna, 170, 218, 262
kontaktowa, 179, 240, 282
O nas, 182, 236, 282
Usugi, 225, 272
z cennikiem, 230, 231, 278
z opisem usug, 225
strony
elastyczne, 17
responsywne, 17
skalowalne, 17
struktura
HTML, 64, 69, 136
strony kontaktowej, 240
strony O nas, 236
strony Usugi, 225
strony z cennikiem, 231
treci strony
galerii, 141
kontaktowej, 143
O nas, 147
o zasadach korzystania, 149
style
formularzy, 52
importowane, 194, 195
interfejsu uytkownika, 212
miniatur i podpisw, 85
nagwka, 80, 164
przyciskw, 51, 161
stopki, 167
typograficzne, 51
system Bootstrap, 25
aplikacje LESS, 119
dodawanie fontu, 125
przygotowywanie, 116
siatka, 128
skalowalno, 128
strona produktu, 115
style przyciskw, 162
tworzenie nawigacji, 130
zapytania medialne, 129
system Foundation, 26
dokumenty HTML, 214
funkcje kolorw, 247
instalacja, 199
nawigacja, 254
rozszerzanie systemu, 245
siatka, 209
strona firmowa, 197
style interfejsu uytkownika, 212
wtyczka do jQuery, 213
zapytania medialne, 212
system Skeleton, 25
elastyczne portfolio, 45
ikony iOS, 53
katalog roboczy, 46
skalowalna siatka, 48
style formularzy, 52
style przyciskw, 51
style typograficzne, 51
tworzenie dokumentu, 56
wstpny szablon, 47
zapytania medialne, 50
zwijanie kontenera, 49
systemy
RWD, 2430
siatkowe, 25
szkieletowe, 2430
szablon PSD, 54
szeroko okna, Patrz obszar widoku
szkielet, Patrz system
T
testowanie
strony, 111
witryny, 195, 286
tre strony, 143
tworzenie
arkuszy stylw SCSS, 203
dokumentw HTML, 56, 64, 131, 214
elastycznego portfolio, 45
filtra portfolio, 98
nawigacji, 130
plikw LESS, 121, 129
spritew, 255
strony produktu, 115
treci, 218
typy pl formularza, 140
U
ulepszanie strony
portfolio, 71
produktu, 151
ustawianie rodziny fontw, 78, 79
usuwanie regu stylistycznych, 193
Kup ksik Pole ksik
Skorowidz
293
W
W3C, World Wide Web Consortium, 20
wady
RWD, 20
systemw szkieletowych, 30
wartoci przej CSS3, 93
witryna Smashing Magazine, 19
wasne
arkusze stylw, 203
domieszki LESS, 154
rodziny fontw, 58, 125, 250
wasno box-sizing, 73
waciwoci modelu polowego, 73
wtyczka Orbit, 213
Z
zagniedanie regu, 34, 40
zakres, 156
zapytania medialne, 18, 50, 105, 129, 212
zmienianie obrazu, 94
zmienne, 35, 39, 152, 248
zwijanie kontenera, 49
Kup ksik Pole ksik
Skorowidz
294
Kup ksik Pole ksik