Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00029 005997 13097491 na godz. na dobę w sumie
Responsive Web Design. Nowoczesne strony WWW na przykładach - ebook/pdf
Responsive Web Design. Nowoczesne strony WWW na przykładach - ebook/pdf
Autor: Liczba stron: 296
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-9193-7 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> inne
Porównaj ceny (książka, ebook (-40%), audiobook).

Nowoczesne witryny WWW są w Twoim zasięgu!

Responsywne strony WWW to dziś standard, do którego dążą wszyscy projektanci stron. W świecie smartfonów, tabletów, laptopów, telewizorów z dostępem do sieci oraz komputerów stacjonarnych stworzenie strony, która będzie dobrze się prezentowała i zachowa swoją funkcjonalność na każdym z urządzeń, to klucz do sukcesu! Ta książka to doskonałe źródło informacji na temat responsywnych stron internetowych — zacznij je projektować już teraz!

W trakcie lektury poznasz zalety i wady trzech najlepszych szkieletów do błyskawicznego tworzenia stron WWW. To Bootstrap, Skeleton oraz Foundation Zurb. Dodatkowo zapoznasz się z preprocesorami CSS oraz zaznajomisz się z nowościami wprowadzonymi w CSS3. Po opanowaniu wiedzy zawartej w kolejnych rozdziałach z łatwością zbudujesz przykładową witrynę produktu na podstawie szkieletu Bootstrap, portfolio na podstawie Skeletona oraz responsywną stronę firmową na podstawie Foundation Zurb. Dzięki praktycznemu podejściu do tematu błyskawicznie przyswoisz cenną wiedzę na temat tworzenia responsywnych stron WWW. Książka ta jest doskonałą lekturą dla wszystkich projektantów oraz pasjonatów tworzenia stron WWW!

Sięgnij po książkę i dowiedz się, jak:

Buduj nowoczesne, responsywne strony WWW!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Responsive Web Design by Example Tłumaczenie: Ł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 zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/reweno Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:258)ci O autorze O recenzentach Przedmowa Zawarto(cid:258)(cid:202) ksi(cid:200)(cid:285)ki Co trzeba umie(cid:202)? Dla kogo jest ta ksi(cid:200)(cid:285)ka? Zastosowane konwencje Czas na dzia(cid:239)anie Quiz Zrób to sam Przyk(cid:239)ady kodu Errata Piractwo Rozdzia(cid:239) 1. Koncepcja RWD Podstawowy projekt elastyczny Metaznacznik viewport i zapytania medialne CSS3 Ograniczenia technik elastycznych Skalowalne obrazy w elemencie picture Dowiedz si(cid:218) wi(cid:218)cej o HTML5 i CSS3 Wprowadzenie do systemów RWD Po co u(cid:285)ywa(cid:202) systemów? Kto u(cid:285)ywa tych systemów? Wady Narz(cid:218)dzia potrzebne do budowy elastycznych stron internetowych Przegl(cid:200)darki internetowe Edytory kodu Elastyczne skryptozak(cid:239)adki 9 11 13 13 14 14 14 14 15 15 16 16 16 17 18 18 20 20 23 24 24 26 30 30 30 31 31 Kup książkęPoleć książkę Spis tre(cid:286)ci Krótkie wprowadzenie do preprocesorów CSS Kompilatory kodu preprocesorów CSS LESS Sass, czyli Syntactically Awesome Stylesheets Wi(cid:218)cej o preprocesorach CSS Materia(cid:239)y do nauki LESS Materia(cid:239)y do nauki Sassa Co utworzymy w tej ksi(cid:200)(cid:285)ce? Podsumowanie Rozdzia(cid:239) 2. Tworzenie elastycznego portfolio przy u(cid:285)yciu systemu Skeleton Podstawy systemu Skeleton Czas na dzia(cid:239)anie — tworzenie katalogu roboczego i pobieranie systemu Skeleton Co zawiera Skeleton? Pocz(cid:200)tkowy dokument HTML Skalowalna siatka Zwijanie kontenera Zapytania medialne Style typograficzne Style przycisków Style formularzy Ikony Apple’a Szablon PSD Jak ma wygl(cid:200)da(cid:202) budowana strona? Nawigacja Efekt hover Tworzenie dokumentu w systemie Skeleton Czas na dzia(cid:239)anie — dodawanie nowego pliku CSS Dodawanie w(cid:239)asnych fontów Czas na dzia(cid:239)anie — osadzanie fontów z serwisu Google Fonts Przygotowywanie obrazów Ikony mediów spo(cid:239)eczno(cid:258)ciowych Czas na dzia(cid:239)anie — sprite’y Ikony kontaktowe Elementy HTML5 Atrybuty danych HTML5 Czas na dzia(cid:239)anie — konstruowanie dokumentu HTML Podsumowanie Rozdzia(cid:239) 3. Ulepszanie strony portfolio przy u(cid:285)yciu CSS3 Model polowy CSS W(cid:239)asno(cid:258)(cid:202) CSS3 box-sizing Czas na dzia(cid:239)anie — definiowanie w(cid:239)asno(cid:258)ci box-sizing Jednostki miary CSS Piksele Jednostka em Procenty 4 32 33 33 39 41 42 42 42 43 45 46 46 46 47 48 49 50 51 51 52 53 54 54 56 56 56 57 58 58 59 60 61 62 63 63 64 69 71 72 73 74 74 74 76 78 Kup książkęPoleć książkę Spis tre(cid:286)ci Ustawianie rodziny fontów Czas na dzia(cid:239)anie — ustawianie rodziny fontów nag(cid:239)ówków Formatowanie nag(cid:239)ówka Czas na dzia(cid:239)anie — definiowanie stylów nag(cid:239)ówka Selektory CSS Selektor dziecka Selektor przylegaj(cid:200)cego elementu siostrzanego Ogólny selektor elementu siostrzanego Pseudoklasy CSS3 Pseudoklasa CSS3 :checked Pseudoklasa CSS3 :nth-child Style miniatur i podpisów Czas na dzia(cid:239)anie — definiowanie stylów miniatur i podpisów Przekszta(cid:239)cenia dwuwymiarowe CSS Funkcja translate() Przej(cid:258)cia CSS3 Warto(cid:258)ci przej(cid:258)(cid:202) CSS3 Czas na dzia(cid:239)anie — zmiana obrazu po najechaniu kursorem Filtruj(cid:200)ca nawigacja po stronie Czas na dzia(cid:239)anie — tworzenie filtra portfolio Stopka Czas na dzia(cid:239)anie — formatowanie stopki Definiowanie stylów dla mniejszych ekranów Czas na dzia(cid:239)anie — rozmiar obszaru widoku poni(cid:285)ej 960 pikseli Czas na dzia(cid:239)anie — rozmiar obszaru widoku od 767 do 480 pikseli Czas na dzia(cid:239)anie — rozmiar obszaru widoku poni(cid:285)ej 480 pikseli Testowanie strony w ró(cid:285)nych rozmiarach obszaru widoku Podsumowanie Rozdzia(cid:239) 4. Tworzenie strony produktu przy u(cid:285)yciu systemu Bootstrap Wprowadzenie do systemu Bootstrap Czas na dzia(cid:239)anie — przygotowywanie systemu Bootstrap Przygotowywanie grafik Aplikacje LESS Czas na dzia(cid:239)anie — instalowanie aplikacji CrunchApp Tworzenie plików LESS Czas na dzia(cid:239)anie — tworzenie nowego pliku LESS w CrunchAppie Kompilowanie kodu LESS na standardowy CSS Czas na dzia(cid:239)anie — dodawanie plików LESS do CrunchAppa i kompilowanie ich na CSS Dodawanie w(cid:239)asnych rodzin fontów przy u(cid:285)yciu regu(cid:239)y @font-face Gdzie w internecie szuka(cid:202) darmowych fontów? Sk(cid:239)adnia regu(cid:239)y @font-face Formaty fontów dla ró(cid:285)nych przegl(cid:200)darek internetowych Czas na dzia(cid:239)anie — definiowanie nowego fontu przy u(cid:285)yciu regu(cid:239)y @font-face 78 79 80 80 81 81 82 83 84 84 84 85 86 90 91 93 93 94 97 98 99 100 105 106 107 109 111 113 115 116 116 117 119 119 121 122 123 124 125 125 125 126 127 5 Kup książkęPoleć książkę Spis tre(cid:286)ci Skalowalno(cid:258)(cid:202) systemu Bootstrap Siatka systemu Bootstrap Zapytania medialne CSS3 w systemie Bootstrap Czas na dzia(cid:239)anie — tworzenie nowego pliku LESS do przechowywania zapyta(cid:241) medialnych CSS3 Tworzenie nawigacji w systemie Bootstrap Tworzenie dokumentów HTML Czas na dzia(cid:239)anie — tworzenie podstawowych dokumentów HTML5 Quiz Tre(cid:258)(cid:202) strony g(cid:239)ównej Czas na dzia(cid:239)anie — budowa struktury HTML tre(cid:258)ci strony g(cid:239)ównej Tre(cid:258)(cid:202) strony galerii Czas na dzia(cid:239)anie — definiowanie struktury tre(cid:258)ci strony galerii Tre(cid:258)(cid:202) strony kontaktowej Czas na dzia(cid:239)anie — definiowanie struktury tre(cid:258)ci strony kontaktowej Strona O nas Czas na dzia(cid:239)anie — definiowanie struktury tre(cid:258)ci strony O nas Strona o zasadach korzystania z serwisu Czas na dzia(cid:239)anie — definiowanie struktury tre(cid:258)ci strony o zasadach korzystania Podsumowanie Rozdzia(cid:239) 5. Ulepszanie strony produktu przy u(cid:285)yciu CSS3 i LESS Zmienne LESS Czas na dzia(cid:239)anie — definiowanie zmiennych Definiowanie domieszek LESS Czas na dzia(cid:239)anie —(cid:31) definiowanie w(cid:239)asnych domieszek LESS Funkcje LESS do modyfikacji kolorów Poj(cid:218)cie zakresu Ogólne regu(cid:239)y stylistyczne Czas na dzia(cid:239)anie — dodawanie ogólnych regu(cid:239) stylistycznych Pozbywanie si(cid:218) przedrostków firmowych Style przycisków Czas na dzia(cid:239)anie — zmienianie stylów przycisków systemu Bootstrap Czemu te przyciski s(cid:200) takie du(cid:285)e? Style nag(cid:239)ówka Czas na dzia(cid:239)anie — dodawanie stylów nag(cid:239)ówka witryny Style stopki Czas na dzia(cid:239)anie — dodawanie stylów stopki Strona g(cid:239)ówna Sekcja powitalna Czas na dzia(cid:239)anie — formatowanie stylu sekcji powitalnej Sekcja wezwania do dzia(cid:239)ania Czas na dzia(cid:239)anie — formatowanie stylu sekcji wezwania do dzia(cid:239)ania Sekcja galerii Czas na dzia(cid:239)anie — definiowanie stylu sekcji galerii 128 128 129 129 130 131 132 136 136 136 140 141 143 143 147 147 149 149 150 151 152 152 154 154 155 156 157 157 160 161 162 163 164 164 167 167 170 170 170 171 172 172 173 6 Kup książkęPoleć książkę Spis tre(cid:286)ci Sekcja referencji Czas na dzia(cid:239)anie — definiowanie stylu sekcji referencji Formularz subskrypcji Czas na dzia(cid:239)anie — formatowanie stylu pola adresu e-mail Strona galerii Czas na dzia(cid:239)anie — dostosowywanie stylów tytu(cid:239)u strony Strona kontaktowa Czas na dzia(cid:239)anie — dostosowywanie stylów strony kontaktowej Strona O nas Strona o zasadach korzystania z serwisu Zapewnianie dobrego wygl(cid:200)du strony w ró(cid:285)nych urz(cid:200)dzeniach Czas na dzia(cid:239)anie — poprawianie wygl(cid:200)du strony w oknach o szeroko(cid:258)ci do 767 pikseli Czas na dzia(cid:239)anie — poprawianie wygl(cid:200)du strony w oknach o szeroko(cid:258)ci do 480 pikseli Usuwanie niepotrzebnych regu(cid:239) stylistycznych Testowanie witryny Podsumowanie Rozdzia(cid:239) 6. Elastyczna strona firmowa na bazie systemu Foundation System szkieletowy oparty na j(cid:218)zyku Ruby Gem Foundation Czas na dzia(cid:239)anie — instalowanie systemu Foundation i konfiguracja nowego projektu Sk(cid:239)adnie Sassa i SCSS Edytory kodu Sassa i SCSS Czas na dzia(cid:239)anie — instalowanie edytora Sublime Text i w(cid:239)(cid:200)czanie kolorowania sk(cid:239)adni SCSS Tworzenie w(cid:239)asnych arkuszy stylów SCSS Czas na dzia(cid:239)anie — tworzenie arkuszy stylów SCSS, aby nie utrudnia(cid:202) obs(cid:239)ugi systemu Wprowadzenie do Compassa Funkcje pomocnicze Compassa Konfiguracja projektu Compassa Czas na dzia(cid:239)anie — konfiguracja (cid:258)cie(cid:285)ki projektu w pliku config.rb Kompilowanie SCSS na CSS Czas na dzia(cid:239)anie — obserwowanie zmian w arkuszach stylów SCSS Przygotowywanie obrazów Sk(cid:239)adniki systemu Foundation Siatka Zapytania medialne CSS3 Style interfejsu u(cid:285)ytkownika Wtyczka do jQuery Orbit Tworzenie dokumentów HTML Podstawowy dokument HTML Czas na dzia(cid:239)anie — modyfikowanie podstawowego dokumentu HTML 174 174 175 175 176 178 179 181 182 184 184 186 190 193 195 195 197 198 198 199 200 201 201 203 203 204 204 204 206 207 207 208 209 209 212 212 213 214 214 214 7 Kup książkęPoleć książkę Spis tre(cid:286)ci Strona g(cid:239)ówna Czas na dzia(cid:239)anie — tworzenie tre(cid:258)ci strony g(cid:239)ównej Strona z opisem us(cid:239)ug Czas na dzia(cid:239)anie — budowa struktury HTML strony Us(cid:239)ugi Strona z cennikiem Czas na dzia(cid:239)anie — budowa struktury HTML strony z cennikiem Strona O nas Czas na dzia(cid:239)anie — budowa struktury HTML strony O nas Strona kontaktowa Czas na dzia(cid:239)anie — budowa struktury HTML strony kontaktowej Podsumowanie Rozdzia(cid:239) 7. Rozszerzanie systemu Foundation Monitorowanie projektu Czas na dzia(cid:239)anie — w(cid:239)(cid:200)czanie monitorowania projektu Wprowadzenie do funkcji kolorów Sassa Zmienne w Sassie Czas na dzia(cid:239)anie — dostosowywanie zmiennych Sassa dotycz(cid:200)cych kolorów systemu Foundation W(cid:239)asne rodziny fontów Domieszka Compassa do deklarowania regu(cid:239) @font-face Czas na dzia(cid:239)anie — dodawanie w(cid:239)asnych rodzin fontów przy u(cid:285)yciu domieszki Compassa Nawigacja Czas na dzia(cid:239)anie — formatowanie sekcji nag(cid:239)ówkowej Wprowadzenie do funkcji pomocniczych Compassa dotycz(cid:200)cych sprite’ów Stopka Czas na dzia(cid:239)anie — formatowanie stylu stopki Wprowadzenie do selektorów strukturalnych CSS3 Strona g(cid:239)ówna Czas na dzia(cid:239)anie — formatowanie strony g(cid:239)ównej Do boju Strona Us(cid:239)ugi Czas na dzia(cid:239)anie — formatowanie strony o us(cid:239)ugach Strona z cennikiem Czas na dzia(cid:239)anie — formatowanie stylu strony z cennikami Strony O nas i Kontakt Czas na dzia(cid:239)anie — formatowanie stylu stron O nas i Kontakt Czas na dzia(cid:239)anie — czynno(cid:258)ci ko(cid:241)cowe Testowanie witryny Podsumowanie (cid:189)ród(cid:239)a dodatkowych informacji Ksi(cid:200)(cid:285)ki Internet Skorowidz 8 218 218 225 225 230 231 236 236 240 240 244 245 246 246 247 248 248 250 251 251 254 254 255 256 257 261 262 263 270 272 273 278 279 282 282 284 286 287 287 287 288 289 Kup książkęPoleć książkę 3 Ulepszanie strony portfolio przy u(cid:285)yciu CSS3 W poprzednim rozdziale napisali(cid:258)my struktur(cid:218) HTML5 naszej strony portfolio. W tym rozdziale dodamy do niej arkusze stylów CSS3. Zaczniemy od zdefiniowania paru prostych efektów wizualnych, które zosta(cid:239)y niedawno wprowadzone w CSS3, takich jak cienie tekstu i bloków oraz zaokr(cid:200)glenie rogów. Nast(cid:218)pnie utworzymy bardziej skomplikowany efekt, polegaj(cid:200)cy na zmianie obrazu po najechaniu na niego kursorem. Przed pojawieniem si(cid:218) technologii CSS3 mo(cid:285)na to by(cid:239)o osi(cid:200)gn(cid:200)(cid:202) wy(cid:239)(cid:200)cznie przy u(cid:285)yciu JavaScriptu. W tym rozdziale: (cid:81) Sformatujesz styl strony — zaczniemy od nag(cid:239)ówka i nawigacji, potem przejdziemy do obszaru tre(cid:258)ci, a sko(cid:241)czymy na stopce, wykorzystuj(cid:200)c podczas pracy ró(cid:285)ne nowe w(cid:239)asno(cid:258)ci CSS3. (cid:81) Utworzysz funkcj(cid:218) filtruj(cid:200)c(cid:200) portfolio przy u(cid:285)yciu CSS3. (cid:81) Stworzysz efekt zmiany obrazu po najechaniu kursorem przy u(cid:285)yciu przekszta(cid:239)ce(cid:241) i przej(cid:258)(cid:202) CSS3. (cid:81) Przystosujesz wygl(cid:200)d strony do ekranów o ró(cid:285)nych szeroko(cid:258)ciach przy u(cid:285)yciu zapyta(cid:241) medialnych CSS3. Kup książkęPoleć książkę Responsive Web Design. Nowoczesne strony WWW na przyk(cid:225)adach Model polowy CSS Element blokowy HTML jest w istocie polem. Na pole to sk(cid:239)ada si(cid:218) tre(cid:258)(cid:202) w(cid:239)a(cid:258)ciwa elementu oraz jego marginesy, dope(cid:239)nienie i obramowanie zdefiniowane przy u(cid:285)yciu CSS, jak wida(cid:202) na poni(cid:285)szym rysunku: Wi(cid:218)cej informacji na temat ró(cid:285)nic mi(cid:218)dzy elementami blokowymi i (cid:258)ródliniowymi oraz list(cid:218) elementów mo(cid:285)na znale(cid:283)(cid:202) na poni(cid:285)szych stronach: (cid:81) Elementy blokowe: https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements. (cid:81) Elementy (cid:258)ródliniowe: https://developer.mozilla.org/en-US/docs/HTML/Inline_elements. Przed pojawieniem si(cid:218) CSS3 okre(cid:258)lanie w(cid:239)a(cid:258)ciwo(cid:258)ci pola elementu by(cid:239)o nieco utrudnione. Za(cid:239)ó(cid:285)my na przyk(cid:239)ad, (cid:285)e tworzymy kwadrat o boku 100 pikseli: div { width: 100px; height: 100px; } Taki kod przegl(cid:200)darka zinterpretuje jako zwyk(cid:239)y kwadrat (pierwszy rysunek na nast(cid:218)pnej stronie). Ale b(cid:218)dzie tak tylko dopóty, dopóki nie zdefiniujemy dope(cid:239)nienia, marginesu albo obramowa- nia. Jako (cid:285)e pole elementu ma cztery boki, zdefiniowanie dope(cid:239)nienia o rozmiarze 10 pikseli (padding: 10px) spowoduje zwi(cid:218)kszenie szeroko(cid:258)ci i wysoko(cid:258)ci elementu o 20 pikseli — po 10 z ka(cid:285)dej strony (drugi rysunek na nast(cid:218)pnej stronie). 72 Kup książkęPoleć książkę Rozdzia(cid:225) 3. • Ulepszanie strony portfolio przy u(cid:298)yciu CSS3 Nie do(cid:258)(cid:202), (cid:285)e zajmowane jest dodatkowe miejsce, to jeszcze obszar marginesu znajduje si(cid:218) po- za elementem, to znaczy nie nale(cid:285)y do jego obszaru. Je(cid:258)li wi(cid:218)c zdefiniujemy elementowi ko- lorowe t(cid:239)o, kolor ten nie b(cid:218)dzie widoczny w obszarze zajmowanym przez margines. W(cid:239)asno(cid:258)(cid:202) CSS3 box-sizing W CSS3 dost(cid:218)pna jest w(cid:239)asno(cid:258)(cid:202) box-sizing, za pomoc(cid:200) której mo(cid:285)na kontrolowa(cid:202) w(cid:239)a(cid:258)ciwo- (cid:258)ci modelu polowego. Warto(cid:258)(cid:202) Opis content-box border-box Jest to standardowe ustawienie modelu polowego. Warto(cid:258)(cid:202) ta sprawia, (cid:285)e dope(cid:239)nienie i obramowanie pola nie s(cid:200) wliczane do jego zdefiniowanych szeroko(cid:258)ci i wysoko(cid:258)ci, jak zosta(cid:239)o pokazane na rysunku w poprzednim podrozdziale. Ta warto(cid:258)(cid:202) jest przeciwie(cid:241)stwem poprzedniej. Sprawia, (cid:285)e dope(cid:239)nienie i obramowanie s(cid:200) wliczane do zdefiniowanych szeroko(cid:258)ci i wysoko(cid:258)ci pola. Wró(cid:202)my do naszego przyk(cid:239)adu. Ustawimy w(cid:239)asno(cid:258)(cid:202) box-sizing na border-box. Dzi(cid:218)ki temu niezale(cid:285)nie od dope(cid:239)nienia i obramowania szeroko(cid:258)(cid:202) i wysoko(cid:258)(cid:202) elementu b(cid:218)d(cid:200) wynosi(cid:202) po 100 pikseli. Na poni(cid:285)szym rysunku przedstawiam ró(cid:285)nic(cid:218) mi(cid:218)dzy dwoma opisywanymi usta- wieniami: 73 Kup książkęPoleć książkę Responsive Web Design. Nowoczesne strony WWW na przyk(cid:225)adach Czas na dzia(cid:239)anie — definiowanie w(cid:239)asno(cid:258)ci box-sizing Otwórz plik styles.css i na samym pocz(cid:200)tku wpisz poni(cid:285)sz(cid:200) regu(cid:239)(cid:218): * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Co uzyskali(cid:258)my? U(cid:285)yli(cid:258)my selektora uniwersalnego CSS (*) w celu zastosowania w(cid:239)asno(cid:258)ci border-box do wszyst- kich elementów blokowych na stronie, aby u(cid:239)atwi(cid:202) sobie ustawianie ich szeroko(cid:258)ci i wysoko(cid:258)ci. Jako pierwszy porad(cid:218) t(cid:218) opublikowa(cid:239) Paul Irish, g(cid:239)ówny programista skryptu Modernizr i HTML5 Boilerplate. Wi(cid:218)cej informacji o tej metodzie mo(cid:285)na znale(cid:283)(cid:202) 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 b(cid:218)dziemy u(cid:285)ywa(cid:202) g(cid:239)ów- nie jednostek px, em oraz procentów. Piksele Piksel (px) to bezwzgl(cid:218)dna jednostka, która jest u(cid:285)ywana chyba najcz(cid:218)(cid:258)ciej ze wszystkich dost(cid:218)p- nych jednostek. Za jej pomoc(cid:200) mo(cid:285)na precyzyjnie okre(cid:258)li(cid:202) rozmiary elementów. W specyfikacji 74 Kup książkęPoleć książkę Rozdzia(cid:225) 3. • Ulepszanie strony portfolio przy u(cid:298)yciu CSS3 CSS znajduj(cid:200)cej si(cid:218) pod adresem http://www.w3.org/TR/css3-values/#reference-pixel piksel jest zdefiniowany jako: Rozmiar k(cid:200)towy jednego piksela na urz(cid:200)dzeniu o g(cid:218)sto(cid:258)ci 96 dpi. Wed(cid:239)ug tej definicji 1 piksel CSS na ekranie o g(cid:218)sto(cid:258)ci 96 dpi jest równy 1 pikselowi urz(cid:200)dzenia. Zatem 10 pikseli w CSS odpowiada 10 pikselom urz(cid:200)dzenia. W tym projekcie rozmiary pól b(cid:218)dziemy okre(cid:258)la(cid:202) w pikselach. Piksele na ekranach o wi(cid:218)kszej g(cid:218)sto(cid:258)ci Ze wzgl(cid:218)du na upowszechnianie si(cid:218) ekranów o coraz wy(cid:285)szych rozdzielczo(cid:258)ciach przyk(cid:239)ad opisa- ny w poprzednim podrozdziale jest ju(cid:285) nieaktualny. Poni(cid:285)szy rysunek przedstawia ekran o wyso- kiej rozdzielczo(cid:258)ci 192 dpi. Element o szeroko(cid:258)ci i wysoko(cid:258)ci 10 pikseli na takim ekranie zajmie 20 pikseli urz(cid:200)dzenia: 75 Kup książkęPoleć książkę Responsive Web Design. Nowoczesne strony WWW na przyk(cid:225)adach Rozmiar elementu na ekranie pozostanie taki sam, ale b(cid:218)dzie si(cid:218) on sk(cid:239)ada(cid:239) z wi(cid:218)kszej liczby pikseli urz(cid:200)dzenia. Na temat piksela i jego relacji z rozdzielczo(cid:258)ci(cid:200) ekranu toczy si(cid:218) wiele dyskusji, np.: (cid:81) Reda Lemeden w swoim wpisie przedstawi(cid:239) trudno(cid:258)ci zwi(cid:200)zane z projektowaniem dla ekranów o ró(cid:285)nych g(cid:218)sto(cid:258)ciach (http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/). (cid:81) Scott Kellum w serwisie A List Apart opisa(cid:239) jednostk(cid:218) piksel i jej zastosowanie do definiowania rozmiaru elementów na stronach przeznaczonych dla ró(cid:285)nych urz(cid:200)dze(cid:241) i ekranów o ró(cid:285)nych rozdzielczo(cid:258)ciach (http://alistapart.com/article/a-pixel-identity-crisis). Jednostka em Jednostka em jest wzgl(cid:218)dna i odnosi si(cid:218) do rozmiaru wielkiej litery M u(cid:285)ywanego fontu. W CSS 1em zasadniczo odnosi si(cid:218) do rozmiaru pisma ustawionego w urz(cid:200)dzeniu lub dokumencie. Je(cid:258)li ele- ment nadrz(cid:218)dny ma okre(cid:258)lony rozmiar pisma w jednostce em, to rozmiar pisma jego elementów potomnych b(cid:218)dzie ustawiany wzgl(cid:218)dem rozmiaru pisma tego elementu nadrz(cid:218)dnego. W naszym projekcie jednostki em b(cid:218)dziemy u(cid:285)ywa(cid:202) do okre(cid:258)lania rozmiaru pisma zgodnie z zale- ceniami W3C (http://www.w3.org/Style/Examples/007/units.en.html). Konwertowanie pikseli na em Domy(cid:258)lny rozmiar pisma w systemie Skeleton jest ustawiony w pliku base.css na 14 pikseli, wi(cid:218)c do tego rozmiaru b(cid:218)d(cid:200) si(cid:218) odnosi(cid:202) ustawienia wyra(cid:285)one w jednostce em. Powiedzmy, (cid:285)e chcemy si(cid:218) dowiedzie(cid:202), ile jednostek em odpowiada rozmiarowi 20 pikseli, gdy podstawowy rozmiar pisma wynosi 14 pikseli. Istnieje narz(cid:218)dzie u(cid:239)atwiaj(cid:200)ce zamienianie jedno- stek px na em (i odwrotnie) o nazwie PXtoEM.com (http://pxtoem.com/). Na zrzucie ekranu (na na- st(cid:218)pnej stronie) pokaza(cid:239)em sposób jego u(cid:285)ycia. Jak wida(cid:202) na zrzucie, przy podstawowym rozmiarze pisma 14 pikseli rozmiarowi 20px odpowiada warto(cid:258)(cid:202) 1.429em. Samodzielne obliczanie warto(cid:258)ci em Jednostki px i em mo(cid:285)na tak(cid:285)e przelicza(cid:202) przy u(cid:285)yciu wzorów przedstawionych w poni(cid:285)szej tabeli: Wzór Przyk(cid:239)ad Rozmiar (px) / podstawowy rozmiar pisma (px) Rozmiar (em) * podstawowy rozmiar pisma (px) 20(px) / 14(px) = 1.429em (po zaokr(cid:200)gleniu) 1,429(em) * 14(px) = 20px Rodzaj konwersji px na em em na px 76 Kup książkęPoleć książkę Rozdzia(cid:225) 3. • Ulepszanie strony portfolio przy u(cid:298)yciu CSS3 Dziwne traktowanie jednostki em przez przegl(cid:200)darki Przegl(cid:200)darki w niektórych przypadkach ró(cid:285)nie traktuj(cid:200) warto(cid:258)ci wyra(cid:285)one w jednostce em. W przyk(cid:239)adzie z poprzedniego podrozdzia(cid:239)u warto(cid:258)(cid:202) 1.429em przy podstawowym rozmiarze pisma 14px zostanie zamieniona na 20px przez wszystkie przegl(cid:200)darki (Chrome, Opera, Safari i Firefox). Ale je(cid:258)li usuniemy dwie ostatnie cyfry w celu zaokr(cid:200)glenia liczby do 1.4em, to sytuacja si(cid:218) nieco zmieni. W Firefoksie i Operze zostanie zastosowana warto(cid:258)(cid:202) 19.6px, a w przegl(cid:200)darkach opartych na mechanizmie Webkit (Chrome i Safari) zostanie zastosowane zaokr(cid:200)glenie do 20px. Mo(cid:285)na sprawdzi(cid:202), jak przegl(cid:200)darki zamieniaj(cid:200) warto(cid:258)ci wyra(cid:285)one w jednostce em na piksele w narz(cid:218)dziach programistycznych w okienku Computed (warto(cid:258)ci obliczone). 77 Kup książkęPoleć książkę Responsive Web Design. Nowoczesne strony WWW na przyk(cid:225)adach Procenty Procent to jednostka wzgl(cid:218)dna o podobnych w(cid:239)a(cid:258)ciwo(cid:258)ciach jak em. Podczas gdy em odnosi si(cid:218) do rozmiaru pisma, procent odnosi si(cid:218) do d(cid:239)ugo(cid:258)ci elementu nadrz(cid:218)dnego, niezale(cid:285)nie od zasto- sowanej do jej okre(cid:258)lenia jednostki. Je(cid:258)li na przyk(cid:239)ad element nadrz(cid:218)dny ma wysoko(cid:258)(cid:202) 100px, to ustawienie szeroko(cid:258)ci na 100 jego elementu potomnego jest równoznaczne z ustawieniem jej na 100px, 50 oznacza 50 pikseli itd. W naszym projekcie procentów b(cid:218)dziemy u(cid:285)ywa(cid:202) do okre(cid:258)lania wymiarów pól elementów, co b(cid:218)dzie przydatne przy wy(cid:258)wietlaniu strony na mniejszych ekranach. Ustawianie rodziny fontów W Skeletonie domy(cid:258)lne kroje pisma dokumentu to Helvetica Neue i Helvetica. Je(cid:258)li fonty te s(cid:200) niedost(cid:218)pne, zostanie zastosowany krój Arial albo domy(cid:258)lny krój bezszeryfowy, jaki b(cid:218)dzie dost(cid:218)pny w komputerze u(cid:285)ytkownika. Definicje rodzin fontów znajduj(cid:200) si(cid:218) 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 nag(cid:239)ówkach (h1, h2, h3 itd.) ustawione s(cid:200) 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(cid:200) si(cid:218) do prezentowania akapitów (pierwszy rysunek na nast(cid:218)pnej stronie). Na naszej stronie jednak si(cid:218) nie sprawdz(cid:200), bo my mamy bardzo ma(cid:239)o tekstu do wy(cid:258)wietlenia (drugi rysunek na nast(cid:218)pnej stronie). 78 Kup książkęPoleć książkę Rozdzia(cid:225) 3. • Ulepszanie strony portfolio przy u(cid:298)yciu CSS3 Dlatego w nag(cid:239)ówkach ustawimy taki sam krój pisma jak w pozosta(cid:239)ej cz(cid:218)(cid:258)ci strony, aby za- pewni(cid:202) jednolito(cid:258)(cid:202) stylu. Czas na dzia(cid:239)anie — ustawianie rodziny fontów nag(cid:239)ówków Otwórz plik styles.css i wpisz poni(cid:285)sz(cid:200) regu(cid:239)(cid:218) pod deklaracj(cid:200) w(cid:239)asno(cid:258)ci box-sizing opisan(cid:200) w cz(cid:218)(cid:258)ci „Czas na dzia(cid:239)anie — definiowanie w(cid:239)asno(cid:258)ci box-sizing”: h1, h2, h3, h4, h5, h6 { font-family: HelveticaNeue , Helvetica Neue , Helvetica, Arial, sans-serif; font-weight: bold; } Co uzyskali(cid:258)my? Ustawili(cid:258)my krój pisma nag(cid:239)ówków na taki sam jak w pozosta(cid:239)ej cz(cid:218)(cid:258)ci dokumentu oraz do- datkowo ustawili(cid:258)my w(cid:239)asno(cid:258)(cid:202) font-weight na bold, aby pogrubi(cid:202) te nag(cid:239)ówki. Nie istnieje (cid:285)adna (cid:285)elazna regu(cid:239)a pozwalaj(cid:200)ca okre(cid:258)li(cid:202), jakie kroje pisma do siebie pasuj(cid:200). Ich dobór jest sztuk(cid:200). Ale mo(cid:285)na post(cid:218)powa(cid:202) wed(cid:239)ug kilku prostych wskazówek, które umo(cid:285)liwi(cid:200) osi(cid:200)gni(cid:218)cie przy- najmniej zno(cid:258)nego efektu. Par(cid:218) takich porad opisa(cid:239) Ian Yates w serwisie Webdesigntuts+ (http://webdesign. tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706). 79 Kup książkęPoleć książkę Responsive Web Design. Nowoczesne strony WWW na przyk(cid:225)adach Formatowanie nag(cid:239)ówka Teraz sformatujemy styl poszczególnych sekcji strony. Jej nag(cid:239)ówek znajduje si(cid:218) w elemencie HTML5 header przypisanym do klasy header. W elemencie tym znajduje si(cid:218) dodatkowo ele- ment div przypisany do klasy logo zawieraj(cid:200)cy logo strony. Czas na dzia(cid:239)anie — definiowanie stylów nag(cid:239)ówka Aby zdefiniowa(cid:202) styl nag(cid:239)ówka, wykonaj nast(cid:218)puj(cid:200)ce czynno(cid:258)ci: 1. W pliku styles.css wpisz poni(cid:285)sz(cid:200) regu(cid:239)(cid:218) CSS. Zawiera ona deklaracje ustawiaj(cid:200)ce kolor t(cid:239)a nag(cid:239)ówka oraz jego dope(cid:239)nienie, obramowanie, cie(cid:241) (definiowany za pomoc(cid:200) w(cid:239)asno(cid:258)ci CSS3 box-shadow) i dolny margines odsuwaj(cid:200)cy nag(cid:239)ówek od znajduj(cid:200)cej si(cid:218) 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. Nast(cid:218)pnie zdefiniujemy styl kontenera logo. W poni(cid:285)szej regule zosta(cid:239)a zastosowana w(cid:239)asno(cid:258)(cid:202) CSS3 border-radius, która s(cid:239)u(cid:285)y do zaokr(cid:200)glania rogów elementów: .logo { text-align: center; border-radius: 3px; background-color: #515558; width: 250px; padding: 5px 0; margin: 0 auto; } (cid:22). Teraz kolej na styl samego logo, które w przypadku naszej strony jest po prostu tekstem. Do jego prezentacji zastosujemy font Alfa Slab One, który dodali(cid:258)my 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; } 80 Kup książkęPoleć książkę Rozdzia(cid:225) 3. • Ulepszanie strony portfolio przy u(cid:298)yciu CSS3 Co uzyskali(cid:258)my? Zdefiniowali(cid:258)my style dotycz(cid:200)ce nag(cid:239)ówka. Ustawili(cid:258)my mu kolor t(cid:239)a, cie(cid:241) oraz style pola (dope(cid:239)- nienie, obramowanie i margines). Ponadto w logo zastosowali(cid:258)my krój pisma Alfa Slab One z ser- wisu Google Fonts. Na poni(cid:285)szym zrzucie ekranu wida(cid:202), jak aktualnie wygl(cid:200)da nasza strona: Selektory CSS W tym projekcie b(cid:218)dziemy u(cid:285)ywa(cid:202) selektorów CSS do wybierania elementów z okre(cid:258)lonej struktury elementów. U(cid:285)yjemy wi(cid:218)c selektorów dziecka, przylegaj(cid:200)cego elementu siostrzane- go oraz ogólnie elementu siostrzanego. Przyjrzyjmy si(cid:218) im wszystkim po kolei. Selektor dziecka W CSS mo(cid:285)na wybiera(cid:202) elementy, które s(cid:200) zagnie(cid:285)d(cid:285)one w okre(cid:258)lonych innych elementach (ro- dzicach). Zapewne wiesz, jak si(cid:218) wybiera element potomny w CSS. Wystarczy okre(cid:258)li(cid:202) element nadrz(cid:218)dny (wpisuj(cid:200)c jego klas(cid:218), identyfikator albo nazw(cid:218)), a nast(cid:218)pnie wyznaczy(cid:202) element potomny: 81 Kup książkęPoleć książkę Responsive Web Design. Nowoczesne strony WWW na przyk(cid:225)adach .parent p { background-color: tomato; } Powy(cid:285)sza regu(cid:239)a CSS dotyczy wszystkich elementów p zagnie(cid:285)d(cid:285)onych w elemencie nale(cid:285)(cid:200)- cym do klasy parent. Ale czasami trzeba odwo(cid:239)a(cid:202) si(cid:218) tylko do potomka pierwszego stopnia, tzn. sprawi(cid:202), aby elementy b(cid:218)d(cid:200)ce wnukami danego elementu nie zosta(cid:239)y ju(cid:285) wybrane. W takim przypadku nale(cid:285)y u(cid:285)y(cid:202) kombi- natora , który ogranicza wybór elementów do bezpo(cid:258)rednich potomków rodzica: .parent p { background-color: tomato; } W poni(cid:285)szej strukturze HTML powy(cid:285)sza regu(cid:239)a zmieni kolor t(cid:239)a tylko pierwszego i drugiego akapitu: div class= parent p To jest pierwszy akapit. /p p To jest drugi akapit. /p section h3 Tytu(cid:239) sekcji /h3 p To jest trzeci akapit. /p p To jest czwarty akapit. /p /section /div Wynik jest nast(cid:218)puj(cid:200)cy: Selektor przylegaj(cid:200)cego elementu siostrzanego Selektor przylegaj(cid:200)cego elementu siostrzanego definiuje si(cid:218) przy u(cid:285)yciu kombinatora +. S(cid:239)u(cid:285)y on do wybierania elementu, który znajduje si(cid:218) bezpo(cid:258)rednio za okre(cid:258)lonym elementem. Dotyczy to na przyk(cid:239)ad sytuacji, gdy w kodzie strony znajduje si(cid:218) element div, a bezpo(cid:258)rednio za nim jest p: 82 Kup książkęPoleć książkę Rozdzia(cid:225) 3. • Ulepszanie strony portfolio przy u(cid:298)yciu CSS3 div To jest element div. /div p To jest pierwszy akapit. /p p To jest drugi akapit. /p Naszym celem jest element p znajduj(cid:200)cy si(cid:218) bezpo(cid:258)rednio za elementem div. Chcemy mu zdefiniowa(cid:202) pomidorowy kolor t(cid:239)a: div + p { background-color: tomato; } Efekt zastosowania tej regu(cid:239)y do powy(cid:285)szego kodu HTML jest nast(cid:218)puj(cid:200)cy: Ogólny selektor elementu siostrzanego Ogólny selektor elementu siostrzanego jest nowym typem selektora wprowadzonym w CSS3. Do jego deklarowania u(cid:285)ywa si(cid:218) tyldy (~): div ~ p { background-color: tomato; } Jego dzia(cid:239)anie jest podobne do dzia(cid:239)ania selektora przylegaj(cid:200)cego elementu siostrzanego. Ró(cid:285)nica polega na tym, (cid:285)e wybierany jest nie tylko pierwszy element, ale wybierane s(cid:200) wszystkie elementy siostrzane znajduj(cid:200)ce si(cid:218) za wyznaczonym. Je(cid:258)li wi(cid:218)c b(cid:218)dziemy mieli kod HTML o strukturze ta- kiej samej jak w przyk(cid:239)adzie z selektorem przylegaj(cid:200)cego elementu siostrzanego, kolor t(cid:239)a zo- stanie zastosowany do wszystkich akapitów, jak wida(cid:202) na poni(cid:285)szym zrzucie ekranu: 83 Kup książkęPoleć książkę Responsive Web Design. Nowoczesne strony WWW na przyk(cid:225)adach Pseudoklasy CSS3 U(cid:285)yjemy te(cid:285) kilku pseudoklas CSS3. Pseudoklasa to klasa s(cid:239)u(cid:285)(cid:200)ca do wybierania elementu znajduj(cid:200)cego si(cid:218) w okre(cid:258)lonym stanie. Na przyk(cid:239)ad pseudoklasa :hover stosuje regu(cid:239)y CSS do elementu, gdy znajdzie si(cid:218) nad nim kursor. W tym projekcie b(cid:218)dziemy u(cid:285)ywa(cid:202) nast(cid:218)puj(cid:200)cych pseudoklas: (cid:81) :checked (cid:81) :nth-child Zobaczmy. Pseudoklasa CSS3 :checked W CSS3 wprowadzono pseudoklas(cid:218) o nazwie :checked. Umo(cid:285)liwia ona wybieranie elementów HTML, pól wyboru lub przycisków radiowych, które s(cid:200) zaznaczone przez u(cid:285)ytkownika. Poni(cid:285)szy selektor wybiera przycisk radiowy o identyfikatorze posters, gdy ten zostanie zaznaczony: #posters:checked { /* deklaracje stylów */ } Pseudoklasy :checked mo(cid:285)na u(cid:285)ywa(cid:202) do wybierania zaznaczonego przycisku radiowego, który jest u(cid:285)ywany jako element nawigacji po stronie. Podobnie jak w tradycyjnej nawigacji zbudowanej przy u(cid:285)yciu elementów a, u(cid:285)ywamy te(cid:285) pseudoklasy :hover w celu zdefiniowania stylów dla elementu, gdy znajduje si(cid:218) nad nim kursor. Pseudoklasa CSS3 :nth-child W CSS wprowadzono tak(cid:285)e now(cid:200) pseudoklas(cid:218) o nazwie :nth-child. Za jej pomoc(cid:200) mo(cid:285)na wybie- ra(cid:202) elementy w takiej kolejno(cid:258)ci, w jakiej znajduj(cid:200) si(cid:218) w kodzie (cid:283)ród(cid:239)owym. Pseudoklasa ta wyma- ga podania argumentu, który mo(cid:285)e by(cid:202) liczb(cid:200) lub s(cid:239)owem kluczowym (odd albo even). Na przyk(cid:239)ad poni(cid:285)sza regu(cid:239)a zmieni kolor t(cid:239)a trzeciego elementu li: li:nth-child(3) { background-color: tomato; } W poni(cid:285)szej strukturze HTML powy(cid:285)sza regu(cid:239)a zmieni kolor t(cid:239)a w (cid:258)rodkowym elemencie li: ul li Element 1 /li li Element 2 /li li Element 3 /li 84 Kup książkęPoleć książkę Rozdzia(cid:225) 3. • Ulepszanie strony portfolio przy u(cid:298)yciu CSS3 li Element 4 /li li Element 5 /li /ul Efekt u(cid:285)ycia tego kodu wida(cid:202) na poni(cid:285)szym zrzucie ekranu: Mo(cid:285)na tak(cid:285)e zamiast liczby wpisa(cid:202) s(cid:239)owo kluczowe even albo odd. Poni(cid:285)sza regu(cid:239)a zmieni kolor t(cid:239)a w elementach li o nieparzystych numerach (pierwszym, trzecim, pi(cid:200)tym itd.): li:nth-child(odd) { background-color: tomato; } Pseudoklasie :nth-child mo(cid:285)na te(cid:285) przekazywa(cid:202) wzory wyboru elementów w bardziej wy- my(cid:258)lnych sekwencjach: li:nth-child(2n+2) { background-color: tomato; } Litera n jest w tym przypadku zmienn(cid:200), która przyjmuje warto(cid:258)ci 0, 1, 2, 3 itd. W zwi(cid:200)zku z tym wzór 2n+2 oznacza wybór drugiego, czwartego, ósmego, dziesi(cid:200)tego itd. elementu li. Wi(cid:218)cej informacji na temat zasady dzia(cid:239)ania pseudoklasy :nth-child mo(cid:285)na znale(cid:283)(cid:202) w artykule Chrisa Coy- iera w serwisie CSS Tricks (http://css-tricks.com/how-nth-child-works/). Coyer utworzy(cid:239) te(cid:285) por(cid:218)czne na- rz(cid:218)dzie do testowania wzoru pseudoklasy :nth-child (http://css-tricks.com/examples/nth-child-tester/). Style miniatur i podpisów Po sformatowaniu stylu nag(cid:239)ówka mo(cid:285)na przej(cid:258)(cid:202) do stylizowania i rozmieszczenia obrazów portfolio. Mamy 12 miniatur, z których ka(cid:285)da znajduje si(cid:218) w elemencie HTML5 figure i ma podpis zawieraj(cid:200)cy opis miniatury umieszczony w elemencie figcaption. 85 Kup książkęPoleć książkę Responsive Web Design. Nowoczesne strony WWW na przyk(cid:225)adach Czas na dzia(cid:239)anie — definiowanie stylów miniatur i podpisów Aby doda(cid:202) style dla miniatur i podpisów, wykonaj nast(cid:218)puj(cid:200)ce czynno(cid:258)ci: 1. Otwórz plik styles.css. Zaczniemy od przesuni(cid:218)cia portfolio nieco w dó(cid:239) za pomoc(cid:200) marginesu: .portfolio { margin-top: 20px; } 2. Obrazy b(cid:218)d(cid:200) wy(cid:258)wietlane w czterech kolumnach. Szeroko(cid:258)(cid:202) ka(cid:285)dej z nich b(cid:218)dzie wynosi(cid:202) 240 pikseli, bo tak(cid:200) warto(cid:258)(cid:202) otrzymali(cid:258)my z dzia(cid:239)ania 960 / 4 = 240. Aby obrazy mie(cid:258)ci(cid:239)y si(cid:218) na stronie, musimy usun(cid:200)(cid:202) lewy i prawy margines, które zosta(cid:239)y odziedziczone z klasy columns systemu Skeleton: .portfolio .four.columns { width: 240px; margin-right: 0; margin-left: 0; } 3. Nast(cid:218)pnie ustawimy pozycjonowanie elementu figure na wzgl(cid:218)dne (relative), aby po(cid:239)o(cid:285)enie znajduj(cid:200)cych si(cid:218) w nim elementów, np. img i figcaption, by(cid:239)o wyznaczane wzgl(cid:218)dem niego. Ponadto ustawimy w(cid:239)asno(cid:258)(cid:202) overflow elementu figure na hidden: .portfolio figure { position: relative; overflow: hidden; } Ustawieniem w(cid:239)asno(cid:258)ci overflow elementu figure na hidden ukrywamy element wychodz(cid:200)cy poza granice elementu figure. W naszym przyk(cid:239)adzie wykorzystamy to do ukrywania elementu figcaption, jak pokaza(cid:239)em na pierwszym zrzucie ekranu przedstawionym na nast(cid:218)pnej stronie. 4. W(cid:239)asno(cid:258)(cid:202) max-width obrazu ustawimy na 100 , dzi(cid:218)ki czemu obraz b(cid:218)dzie rozmiarem pasowa(cid:239) do zawieraj(cid:200)cego go elementu, niezale(cid:285)nie od jego rozmiaru: .portoflio figure img { max-width: 100 ; } 5. Ponadto je(cid:258)li uwa(cid:285)nie przyjrzysz si(cid:218) miniaturze, dostrze(cid:285)esz niewielki odst(cid:218)p znajduj(cid:200)cy si(cid:218) za elementem img, który jest typowy dla elementów (cid:258)ródliniowych i jest zwi(cid:200)zany z domy(cid:258)lnym wyrównaniem elementu w pionie (http://www.impressivewebs.com/difference-block-inline-css/) (patrz drugi rysunek na nast(cid:218)pnej stronie). 86 Kup książkęPoleć książkę Rozdzia(cid:225) 3. • Ulepszanie strony portfolio przy u(cid:298)yciu CSS3 Jednym ze sposobów na usuni(cid:218)cie tego odst(cid:218)pu jest ustawienie w(cid:239)asno(cid:258)ci display na block. Dlatego te(cid:285) dodajemy deklaracj(cid:218) display: block do regu(cid:239)y dla elementów img: .portfolio figure img { max-width: 100 ; display: block; } Mo(cid:285)na te(cid:285) pozby(cid:202) si(cid:218) tej pustej przestrzeni poprzez ustawienie w(cid:239)asno(cid:258)ci vertical-align na top. 6. Nast(cid:218)pnie zdefiniujemy style dla podpisów miniatur, które s(cid:200) reprezentowane przez element HTML5 figcaption. Najpierw ustawimy w(cid:239)asno(cid:258)(cid:202) position na absolute: .portfolio figcaption { position: absolute; } 87 Kup książkęPoleć książkę Responsive Web Design. Nowoczesne strony WWW na przyk(cid:225)adach Spowoduje to zmian(cid:218) wysoko(cid:258)ci elementu nadrz(cid:218)dnego i znikni(cid:218)cie podpisów wywo(cid:239)ane ustawieniem ich pozycji na miejsce poza obszarem elementu figure. Nast(cid:218)pnie ustawiamy wysoko(cid:258)(cid:202) i szeroko(cid:258)(cid:202) podpisu na 100 , aby jego wymiary zawsze pokrywa(cid:239)y si(cid:218) z wymiarami rodzica, którym w tym przypadku jest element figure: .portfolio figcaption { position: absolute; width: 100 ; height: 100 ; } 7. Ustawiaj(cid:200)c w(cid:239)asno(cid:258)(cid:202) position elementu figure na absolute, mo(cid:285)emy go przesun(cid:200)(cid:202) w dowolnym kierunku, nie przejmuj(cid:200)c si(cid:218) s(cid:200)siednimi elementami. W tym przypadku ustawimy w(cid:239)asno(cid:258)ci left i top na 0, jak wida(cid:202) na poni(cid:285)szym listingu: .portfolio figcaption { position: absolute; width: 100 ; height: 100 ; left: 0; top: 0; } Dzi(cid:218)ki temu, (cid:285)e elementowi figure w(cid:239)asno(cid:258)(cid:202) position zosta(cid:239)a ustawiona na relative, po(cid:239)o(cid:285)enie znajduj(cid:200)cego si(cid:218) w nim podpisu jest ustalane wzgl(cid:218)dem w(cid:239)a(cid:258)nie tego elementu figure (b(cid:218)d(cid:200)cego rodzicem podpisu). To sprawia, (cid:285)e podpis nak(cid:239)ada si(cid:218) na miniatur(cid:218), jak na poni(cid:285)szym zrzucie ekranu: 8. Nast(cid:218)pnie ustawimy kolor t(cid:239)a podpisu przy u(cid:285)yciu techniki RGBA (ang. red, green, blue, alpha — czerwony, zielony, niebieski, alfa). Warto(cid:258)(cid:202) kana(cid:239)u ka(cid:285)dego koloru oznacza si(cid:218) liczb(cid:200) z przedzia(cid:239)u od 0 do 255. Je(cid:258)li na przyk(cid:239)ad wpisze si(cid:218) 0 dla ka(cid:285)dego kana(cid:239)u (rgba(0,0,0,1)), to otrzyma si(cid:218) kolor czarny, który w zapisie szesnastkowym ma posta(cid:202) #000000. Analogicznie same warto(cid:258)ci 255 oznaczaj(cid:200) kolor bia(cid:239)y (#ffffff w notacji szesnastkowej). Technika RGBA umo(cid:285)liwia tak(cid:285)e dostosowanie poziomu przezroczysto(cid:258)ci koloru za pomoc(cid:200) kana(cid:239)u alfa. Zakres warto(cid:258)ci tego kana(cid:239)u wynosi od 0 do 1. Warto(cid:258)(cid:202) 0 oznacza 0 , a 1 to 100 . W takim razie 0.5 jest równoznaczne z 50 . 88 Kup książkęPoleć książkę Rozdzia(cid:225) 3. • Ulepszanie strony portfolio przy u(cid:298)yciu CSS3 W poni(cid:285)szej regule ustawiamy czarny kolor t(cid:239)a i przezroczysto(cid:258)(cid:202) 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(cid:285) dope(cid:239)nienie, aby odsun(cid:200)(cid:202) nieco tekst podpisu od kraw(cid:218)dzi elementu kontenera. W poni(cid:285)szej regule dope(cid:239)nienie zosta(cid:239)o ustawione na 10 : .portfolio figcaption { position: absolute; width: 100 ; height: 100 ; left: 0; top: 0; background-color: rgba(58,63,67,.8); padding: 10 ; } Dzi(cid:218)ki temu, (cid:285)e wcze(cid:258)niej ustawili(cid:258)my w(cid:239)asno(cid:258)(cid:202) box-sizing na border-box, rozmiar podpisu (wysoko(cid:258)(cid:202) i szeroko(cid:258)(cid:202)) pozostanie na poziomie 100 , niezale(cid:285)nie od dope(cid:239)nienia. Inaczej mówi(cid:200)c: podpis nadal b(cid:218)dzie mia(cid:239) wymiary swojego rodzica, które wynosz(cid:200) 240 × 240 pikseli. 10. Jako (cid:285)e t(cid:239)o jest ciemne, tekstowi musimy nada(cid:202) jasny kolor. W zwi(cid:200)zku z tym zmienimy kolor tekstu podpisu na bia(cid:239)y (#fff): .portfolio figcaption h4 {n color: #fff; } .portfolio figcaption p { color: #fff; } 11. Mo(cid:285)e jest to kwestia gustu, ale mnie si(cid:218) wydaje, (cid:285)e tekst w podpisie jest za du(cid:285)y. Dlatego zmniejsz(cid:218) go o 1 piksel w stosunku do rozmiaru bazowego. Podstawowy rozmiar pisma wynosi 14 pikseli, wi(cid:218)c zmieni(cid:218) go na 13, czyli 0.929em: 89 Kup książkęPoleć książkę Responsive Web Design. Nowoczesne strony WWW na przyk(cid:225)adach .portfolio figcaption p { color: #fff; font-size: 0.929em; } Co uzyskali(cid:258)my? W(cid:239)a(cid:258)nie dodali(cid:258)my regu(cid:239)y stylistyczne dotycz(cid:200)ce miniatury i jej podpisu. Na tym etapie nasze portfolio wygl(cid:200)da jak na poni(cid:285)szym zrzucie ekranu: Przekszta(cid:239)cenia dwuwymiarowe CSS Ostanie lata przynios(cid:239)y sporo nowo(cid:258)ci w CSS3, w(cid:258)ród których znajduj(cid:200) si(cid:218) m.in. przekszta(cid:239)- cenia CSS3 (http://www.w3.org/TR/css3-transforms/). Przy u(cid:285)yciu przekszta(cid:239)ce(cid:241) mo(cid:285)na prze- suwa(cid:202), obraca(cid:202), zniekszta(cid:239)ca(cid:202) oraz zwi(cid:218)ksza(cid:202) i zmniejsza(cid:202) elementy HTML. 90 Kup książkęPoleć książkę Rozdzia(cid:225) 3. • Ulepszanie strony portfolio przy u(cid:298)yciu CSS3 Funkcja translate() Funkcja translate() w przekszta(cid:239)ceniach CSS3 s(cid:239)u(cid:285)y do przesuwania elementów wzgl(cid:218)dem ich pierwotnego po(cid:239)o(cid:285)enia. Mo(cid:285)na jej u(cid:285)ywa(cid:202) na trzy sposoby: (cid:81) Aby przesun(cid:200)(cid:202) element w poziomie: transform: translateX(value); (cid:81) Aby przesun(cid:200)(cid:202) element w pionie: transform: translateY(value); (cid:81) Mo(cid:285)na te(cid:285) u(cid:285)y(cid:202) skróconej sk(cid:239)adni umo(cid:285)liwiaj(cid:200)cej dokonanie przesuni(cid:218)cia zarówno w poziomie, jak i w pionie: transform: translate(x-value,y-value); Po(cid:239)o(cid:285)enie elementu okre(cid:258)la si(cid:218) za pomoc(cid:200) warto(cid:258)ci x i y, które reprezentuj(cid:200) odpowiednio wspó(cid:239)- rz(cid:218)dn(cid:200) na osi x i wspó(cid:239)rz(cid:218)dn(cid:200) na osi y w uk(cid:239)adzie wspó(cid:239)rz(cid:218)dnych podobnym do kartezja(cid:241)skie- go (http://pl.wikipedia.org/wiki/Uk(cid:239)ad_wspó(cid:239)rz(cid:218)dnych_kartezja(cid:241)skich). Poniewa(cid:285) jednak strony internetowe czyta si(cid:218) od góry, wspó(cid:239)rz(cid:218)dna y ma odwrotne znacze- nie, tzn. ujemna warto(cid:258)(cid:202) oznacza przesuni(cid:218)cie w gór(cid:218), a dodatnia — w dó(cid:239). Powiedzmy, (cid:285)e chcemy przesun(cid:200)(cid:202) element o 100 pikseli w prawo. Takie przesuni(cid:218)cie mo(cid:285)na zapisa(cid:202) w nast(cid:218)puj(cid:200)cy sposób: transform: translateX(100px) Mo(cid:285)na te(cid:285) u(cid:285)y(cid:202) skróconej notacji nast(cid:218)puj(cid:200)co: transform: translate(100px,0) Podobnie, aby przesun(cid:200)(cid:202) element o 100 pikseli w gór(cid:218), mo(cid:285)na to zapisa(cid:202) tak: transform: translateY(-100px) Ale mo(cid:285)na te(cid:285) u(cid:285)y(cid:202) notacji skróconej: transform: translate(0,-100px) Je(cid:258)li natomiast zechcemy przesun(cid:200)(cid:202) element na ukos, zdefiniujemy zarówno przesuni(cid:218)cie po- ziome, jak i pionowe: transform: translate(100px,-100px) Ta deklaracja przesunie element do góry i w prawo, jak na poni(cid:285)szym rysunku: 91 Kup książkęPoleć książkę Responsive Web Design. Nowoczesne strony WWW na przyk(cid:225)adach Przedrostki firmowe Funkcj(cid:218) translate() obs(cid:239)uguj(cid:200) przegl(cid:200)darki Chrome 4, Safari 3.1, Firefox 3.5, Internet Explorer 10 oraz Opera 10.5, chocia(cid:285) (cid:285)eby zadzia(cid:239)a(cid:239)a, trzeba doda(cid:202) odpowiednie przedrostki firmowe. W zwi(cid:200)zku z tym kompletna regu(cid:239)a przekszta(cid:239)cenie wygl(cid:200)da 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 sk(cid:225)adnia zalecana przez W3C */ Przegl(cid:200)darki rozpoznaj(cid:200) deklaracje z w(cid:239)asnymi przedrostkami, a pozosta(cid:239)e ignoruj(cid:200). Na przyk(cid:239)ad przegl(cid:200)darki oparte na mechanizmie Webkit, np. Chrome i Safari, u(cid:285)ywaj(cid:200) przedrostka -webkit-. Gdy specyfikacja przekszta(cid:239)ce(cid:241) zostanie uko(cid:241)czona i w pe(cid:239)ni zaimplementowana w przegl(cid:200)- darkach, u(cid:285)ywana b(cid:218)dzie wymieniona na ko(cid:241)cu standardowa deklaracja zalecana przez W3C (http://w3.org/). Dlatego w(cid:239)a(cid:258)nie powinno si(cid:218) stosowa(cid:202) wersje deklaracji z przedrostkami firmowymi: zwi(cid:218)k- szaj(cid:200) one zakres obs(cid:239)ugiwanych przegl(cid:200)darek. W powy(cid:285)szej regule u(cid:285)yto a(cid:285) pi(cid:218)ciu deklaracji, z których ka(cid:285)da zasadniczo s(cid:239)u(cid:285)y do tego samego celu. Jak wida(cid:202), wpisywanie przedrostków firmowych to bardzo (cid:285)mudne zadanie, które lepiej wykona(cid:202) przy u(cid:285)yciu specjalnego narz(cid:218)dzia. Jednym z takich generatorów przedrostków firmowych jest Prefixr (http://prefixmycss.com/). Je(cid:258)li u(cid:285)ywasz pro- gramu Sublime Text 2, to mo(cid:285)esz pobra(cid:202) specjalny pakiet umo(cid:285)liwiaj(cid:200)cy jego uruchomienie bezpo(cid:258)rednio w edytorze. Istnieje te(cid:285) biblioteka JavaScript o nazwie Prefix Free (http://leaverou.github.com/prefixfree/), która do- daje przedrostki w locie, dzi(cid:218)ki czemu nie trzeba ich w ogóle wpisywa(cid:202). 92 Kup książkęPoleć książkę Rozdzia(cid:225) 3. • Ulepszanie strony portfolio przy u(cid:298)yciu CSS3 Przej(cid:258)cia CSS3 Kolejnym znakomitym nowym dodatkiem w CSS3 s(cid:200) przej(cid:258)cia umo(cid:285)liwiaj(cid:200)ce stopniowe — w odró(cid:285)nieniu od b(cid:239)yskawicznego — zmienianie jednej regu(cid:239)y CSS na inn(cid:200) w okre(cid:258)lonym czasie. Do definiowania przej(cid:258)(cid:202) CSS3 s(cid:239)u(cid:285)y nast(cid:218)puj(cid:200)ca sk(cid:239)adnia (pokazane s(cid:200) te(cid:285) 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 / sk(cid:225)adnia zalecana przez W3C */ Aktualnie przej(cid:258)cia CSS3 s(cid:200) obs(cid:239)ugiwane przez przegl(cid:200)darki Chrome 4, Firefox 4, Safari 3.1, Opera 10.5 oraz Internet Explorer 10.0 (http://caniuse.com/#feat=css-transitions). Przegl(cid:200)darka Internet Explorer nie obs(cid:239)uguje przej(cid:258)(cid:202) CSS3 i dlatego na powy(cid:285)szym listingu nie ma wersji deklaracji z przedrostkiem -ms-, bo Internet Explorer 10 obs(cid:239)uguje je bez przedrostka (http://msdn.microsoft.com/en-us/ library/ie/hh673535(v=vs.85).aspx). Warto(cid:258)ci przej(cid:258)(cid:202) CSS3 W przedstawionych przyk(cid:239)adach u(cid:285)yte zosta(cid:239)y po cztery warto(cid:258)ci: property, transition-duration, timing-function oraz delay. Zobaczmy, do czego s(cid:239)u(cid:285)(cid:200): Warto(cid:258)(cid:202) property Opis Ta warto(cid:258)(cid:202) wskazuje w(cid:239)asno(cid:258)(cid:202) CSS, do której ma zosta(cid:202) zastosowany efekt przej(cid:258)cia. Mo(cid:285)e to by(cid:202) width, height, color, background itd. Je(cid:258)li nie zostanie wprost zdefiniowana, to zostanie zastosowana warto(cid:258)(cid:202) domy(cid:258)lna all, stosuj(cid:200)ca przej(cid:258)cie do wszystkich w(cid:239)asno(cid:258)ci. transition-duration Warto(cid:258)(cid:202) okre(cid:258)laj(cid:200)ca czas trwania przej(cid:258)cia. Mo(cid:285)na j(cid:200) wyra(cid:285)a(cid:202) w milisekundach lub timing-function delay sekundach, np. 200ms albo 0.2s. Warto(cid:258)(cid:202) okre(cid:258)laj(cid:200)ca sposób wykonywania przej(cid:258)cia w czasie. Dost(cid:218)pnych jest pi(cid:218)(cid:202) gotowych ustawie(cid:241): ease, easein, ease-out, ease-in-out oraz linear. Ich dzia(cid:239)anie mo(cid:285)na obejrze(cid:202) na stronie http://www.css3.info/preview/css3-transitions/. Warto(cid:258)(cid:202) okre(cid:258)laj(cid:200)ca, po up(cid:239)ywie jakiego czasu ma si(cid:218) rozpocz(cid:200)(cid:202) wykonywanie przej(cid:258)cia. Poni(cid:285)sza przyk(cid:239)adowa regu(cid:239)a tworzy ko(cid:239)o z elementu div, które potem dzi(cid:218)ki przej(cid:258)ciom zmieni- my stopniowo w prostok(cid:200)t, gdy zostanie nad nim ustawiony kursor: 93 Kup książkęPoleć książkę Responsive Web Design. Nowoczesne strony WWW na przyk(cid:225)adach div { width: 200px; height: 200px; border-radius: 100px; border: 5px solid orange; background-color: tomato; } div:hover { border-radius: 0; } Jak wspomina(cid:239)em wcze(cid:258)niej, teraz przej(cid:258)cie zostanie wykonane natychmiast, bo nie u(cid:285)yli(cid:258)my (cid:285)adnej w(cid:239)asno(cid:258)ci przej(cid:258)(cid:202) CSS3. Zrobimy to teraz. Ustawimy efekt przej(cid:258)cia dla w(cid:239)asno(cid:258)ci border-radius o czasie trwania 200ms: div { /* pozosta(cid:225)e deklaracje s(cid:261) takie same jak powy(cid:298)ej */ -webkit-transition: border-radius 200ms; -moz-transition: border-radius 200ms; -o-transition: border-radius 200ms; transition: border-radius 200ms; } Teraz zmiana b(cid:218)dzie si(cid:218) dokonywa(cid:239)a stopniowo, jak pokazuje poni(cid:285)szy rysunek, i b(cid:218)dzie bardziej atrakcyjna: Czas na dzia(cid:239)anie — zmiana obrazu po najechaniu kursorem Aby zmieni(cid:202) obraz na co(cid:258) innego po najechaniu na niego kursorem, wykonaj nast(cid:218)puj(cid:200)ce czynno(cid:258)ci: 1. Otwórz plik style.css. Przypomn(cid:218), (cid:285)e podpisy obrazów s(cid:200) reprezentowane przez elementy HTML5 figcaption. Wcze(cid:258)niej elementom tym zdefiniowali(cid:258)my ju(cid:285) troch(cid:218) ustawie(cid:241), np. pozycjonowanie, szeroko(cid:258)(cid:202) i wysoko(cid:258)(cid:202), kolor t(cid:239)a, kolor pisma oraz dope(cid:239)nienie. 94 Kup książkęPoleć książkę Rozdzia(cid:225) 3. • Ulepszanie strony portfolio przy u(cid:298)yciu CSS3 Teraz dodamy regu(cid:239)y dotycz(cid:200)ce efektu hover. Ogólnie chodzi o to, (cid:285)e po najechaniu kursorem na miniatur(cid:218) podpis stopniowo wysunie si(cid:218) z wybranej strony i zakryje obraz. W poni(cid:285)szej regule najpierw przesuwamy podpis w prawo za pomoc(cid:200) przekszta(cid:239)cenia 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 przej(cid:258)cia CSS3. W poni(cid:285)szej regule ustawiamy przej(cid:258)cie dla wszystkich w(cid:239)asno(cid:258)ci 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; } 95 Kup książkęPoleć książkę Responsive Web Design. Nowoczesne strony WWW na przyk(cid:225)adach 3. Na koniec dodamy definicj(cid:218) stanu hover. W stanie tym podpis wraca do swojego pierwotnego po(cid:239)o(cid:285)enia dzi(cid:218)ki 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 uzyskali(cid:258)my? Kod ten wykonuje kilka dzia(cid:239)a(cid:241). Po pierwsze przesuwa podpis za pomoc(cid:200) w(cid:239)asno(cid:258)ci transform o 100 szeroko(cid:258)ci 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 ustawili(cid:258)my, (cid:285)e elementy wychodz(cid:200)ce poza granice elementu figure maj(cid:200) by(cid:202) niewidoczne. Ilustruje to poni(cid:285)szy zrzut ekranu: 96 Kup książkęPoleć książkę Rozdzia(cid:225) 3. • Ulepszanie strony portfolio przy u(cid:298)yciu CSS3 Nast(cid:218)pnie stosujemy efekt przej(cid:258)cia do wszystkich w(cid:239)asno(cid:258)ci podpisu: -webkit-transition: all 350ms; -moz-transition: all 350ms; -o-transition: all 350ms; transition: all 350ms; W ko(cid:241)cu zdefiniowali(cid:258)my style elementu w stanie hover. Chodzi nam o to, by podpis obrazu po najechaniu na niego kursorem wysuwa(cid:239) si(cid:218) z prawej strony i wraca(cid:239) do swojego pierwotnego po(cid:239)o(cid:285)enia. Dlatego w(cid:239)a(cid:258)nie ustawili(cid:258)my wspó(cid:239)rz(cid:218)dn(cid:200) przesuni(cid:218)cia na 0 . Po wpisaniu do arkusza stylów wszystkich opisanych w tej cz(cid:218)(cid:258)ci regu(cid:239) efekt hover powinien dzia(cid:239)a(cid:202): Filtruj(cid:200)ca nawigacja po stronie Jak wspomina(cid:239)em, nawigacja na tej stronie b(cid:218)dzie sortowa(cid:202) portfolio wed(cid:239)ug kategorii. W zwi(cid:200)zku z tym do jej utworzenia u(cid:285)y(cid:239)em przycisków 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 97 Kup książkęPoleć książkę Responsive Web Design. Nowoczesne strony WWW na przyk(cid:225)adach Czas na dzia(cid:239)anie — tworzenie filtra portfolio Aby utworzy(cid:202) filtr portfolio, wykonaj nast(cid:218)puj(cid:200)ce czynno(cid:258)ci: 1. Otwórz plik style.css. Nawigacja jest zbudowana na bazie przycisków radiowych przypisanych do klasy nav-menu. Najpierw ukryjemy przyciski radiowe: .nav-menu { display: none; } 2. Nast(cid:218)pnie dodamy style formatuj(cid:200)ce element label. W poni(cid:285)szej regule ustawiamy w(cid:239)asno(cid:258)(cid:202) display na inline-block, aby etykiety by(cid:239)y wy(cid:258)wietlane w jednym rz(cid:218)dzie: label { padding: 5px 10px; color: #3a3f43; cursor: pointer; display: inline-block; } 3. Gdy zostanie wybrany przycisk radiowy, zmieniaj(cid:200) si(cid:218) style elementu label. W tym przypadku ustawimy ciemniejszy kolor t(cid:239)a, aby pokaza(cid:202), (cid:285)e menu zosta(cid:239)o zaznaczone. To poci(cid:200)ga za sob(cid:200) konieczno(cid:258)(cid:202) zmiany koloru tekstu na bia(cid:239)y. Aby odnie(cid:258)(cid:202) si(cid:218) do elementu label znajduj(cid:200)cego si(cid:218) bezpo(cid:258)rednio obok zaznaczonego elementu input, nale(cid:285)y u(cid:285)y(cid:202) selektora przylegaj(cid:200)cego elementu siostrzanego: .nav-menu:checked + label { color: #fff; background-color: #3a3f43; border-radius: 3px; } 4. Nast(cid:218)pnie zdefiniujemy funkcj(cid:218) filtruj(cid:200)c(cid:200). Zaczniemy od ukrycia miniatury portfolio. W tym celu zdefiniujemy nast(cid:218)puj(cid:200)c(cid:200) regu(cid:239)(cid:218) z selektorem .nav-menu: .nav-menu, .portfolio figure.columns { display: none; } 5. Aby uzyska(cid:202) funkcj(cid:218) filtruj(cid:200)c(cid:200), trzeba po(cid:239)(cid:200)czy(cid:202) kilka selektorów CSS. Ale najpierw trzeba zbudowa(cid:202) nawigacj(cid:218) przy u(cid:285)yciu przycisków radiowych i ka(cid:285)demu z nich przypisa(cid:202) inny identyfikator. Z przyciskami tymi zwi(cid:200)zane s(cid:200) etykiety za pomoc(cid:200) atrybutu for= id . Dzi(cid:218)ki temu klikni(cid:218)cie etykiety powoduje zaznaczenie odpowiadaj(cid:200)cego jej przycisku radiowego. Do zaznaczonego przycisku mo(cid:285)na si(cid:218) odnie(cid:258)(cid:202) dzi(cid:218)ki pseudoklasie CSS3 :checked. W poni(cid:285)szym kodzie wybieramy zaznaczony element input, którego identyfikator to all: #all:checked 98 Kup książkęPoleć książkę Rozdzia(cid:225) 3. • Ulepszanie strony portfolio przy u(cid:298)yciu CSS3 Do(cid:239)(cid:200)czaj(cid:200)c selektor przylegaj(cid:200)cego elementu, odnosimy si(cid:218) do sekcji portfolio: #all:checked ~ .portfolio Po wybraniu sekcji portfolio mo(cid:285)emy wybiera(cid:202) znajduj(cid:200)ce si(cid:218) w niej elementy potomne, aby zastosowa(cid:202) do nich regu(cid:239)y stylistyczne. W tym przypadku naszym celem jest zdefiniowanie w(cid:239)asno(cid:258)ci display o warto(cid:258)ci block elementom przypisanym do klasy all: #all:checked ~ .portfolio .all { display: block; } Dzi(cid:218)ki temu klikni(cid:218)cie elementu input o identyfikatorze all b(cid:218)dzie powodowa(cid:239)o wy(cid:258)wietlenie wszystkich miniatur portfolio. 6. Teraz zrobimy to samo dla pozosta(cid:239)ych 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 uzyskali(cid:258)my? Napisali(cid:258)my style dotycz(cid:200)ce nawigacji i zdefiniowali(cid:258)my funkcj(cid:218) filtrowania przy u(cid:285)yciu se- lektorów CSS. Mimo (cid:285)e pseudoklasa :checked oficjalnie zosta(cid:239)a dodana dopiero do specyfikacji CSS3, by(cid:239)a obs(cid:239)ugiwana ju(cid:285) przez przegl(cid:200)dark(cid:218) Firefox 1. Aby zobaczy(cid:202), jak dzia(cid:239)a, mo(cid:285)na obejrze(cid:202) 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(cid:202) mo(cid:285)liwe sortowanie portfolio wed(cid:239)ug kategorii, jak wida(cid:202) na zrzucie ekra- nu pokazanym na nast(cid:218)pnej stronie. Stopka W tej cz(cid:218)(cid:258)ci zdefiniujemy style stopki. W stopce znajduj(cid:200) si(cid:218) odno(cid:258)niki do naszych profili w serwi- sach spo(cid:239)eczno(cid:258)ciowych oraz informacje kontaktowe: numer telefonu, adres e-mail, a tak(cid:285)e imi(cid:218) i nazwisko. 99 Kup książkęPoleć książkę Responsive Web Design. Nowoczesne strony WWW na przyk(cid:225)adach Czas na dzia(cid:239)anie — formatowanie stopki Aby sformatowa(cid:202) stopk(cid:218), wykonaj nast(cid:218)puj(cid:200)ce czynno(cid:258)ci: 1. Ca(cid:239)y czas pracujemy w pliku style.css. Stopka naszej strony jest zdefiniowana w elemencie HTML5 footer i jest przypisana do klasy footer. Zaczniemy od zdefiniowania stylów dekoracyjnych, takich jak marginesu, dope(cid:239)nienia i obramowania: .footer { border-top: 1px solid #ccc; margin-top: 28px; padding: 28px 0; } 2. Nast(cid:218)pnie przeniesiemy odno(cid:258)niki do mediów spo(c
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Responsive Web Design. Nowoczesne strony WWW na przykładach
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: