Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00368 006205 14677145 na godz. na dobę w sumie
CSS3. Tworzenie nowoczesnych stron WWW - książka
CSS3. Tworzenie nowoczesnych stron WWW - książka
Autor: Liczba stron: 392
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-3722-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook, audiobook).

Bądź nowoczesny. Poznaj wszystkie funkcje, jakie oferuje CSS3!

Rozwój kaskadowych arkuszy stylów nabiera coraz większego rozpędu. Bez nich nie byłoby internetu, jaki dziś znamy, a zamiast atrakcyjnych, kolorowych stron WWW z dużą ilością grafiki oglądalibyśmy wciąż proste i nieciekawe dokumenty hipertekstowe. Specyfikacja CSS3 nie jest jeszcze w pełni ukończona, ale wprowadzone w niej nowości już teraz prezentują się wprost rewelacyjnie, zaś zapewniane przez ten standard możliwości znacznie ułatwiają tworzenie stron internetowych. To, co jeszcze do niedawna było tylko śmiałym marzeniem, dziś staje się rzeczywistością!

Dogłębne poznanie technologii CSS znacznie przyspieszy lektura książki 'CSS3. Tworzenie nowoczesnych stron WWW'. Podręcznik ten prezentuje podstawy obowiązującego standardu CSS 2.1 oraz nowości wprowadzone w CSS3. Znajdziesz tu informacje o nowych selektorach, właściwościach fontów i tekstu, profilach kolorów, właściwościach obramowań i tła, możliwościach związanych z tekstem wielokolumnowym oraz gradientami linearnymi czy radialnymi, transformacjach, przejściach i animacjach. Książka nie ogranicza się jednak do przedstawienia suchej teorii - zainteresowani mogą dzięki niej od strony praktycznej poznać proces tworzenia profesjonalnego serwisu internetowego, od kontaktów ze zleceniodawcą aż po powstanie gotowego produktu.

Chcesz tworzyć olśniewające strony WWW? Zmierz się z CSS3!


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

Darmowy fragment publikacji:

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. Redaktorzy prowadzący: Michał Mrowiec, Tomasz Waryszak Projekt okładki: Jan Paluch 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?css3tw Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Kody źródłowe wybranych przykładów dostępne są pod adresem: ftp://ftp.helion.pl/przyklady/css3tw.zip ISBN: 978-83-246-3722-5 Copyright © Helion 2012 Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treĈci Przedmowa .................................................................................... 15 CzöĈè I Wprowadzenie .............................................................. 25 Rozdziaä 1. Warsztat ........................................................................................ 27 Popularne technologie webowe ...................................................................................... 27 Client-side ................................................................................................................ 28 Platformy RIA (Rich Internet Applications) ............................................................ 28 Server-side ............................................................................................................... 29 Bazy danych ............................................................................................................. 29 Przeglądarki .................................................................................................................... 30 Google Chrome ........................................................................................................ 30 Mozilla Firefox ......................................................................................................... 31 Internet Explorer ...................................................................................................... 31 Opera ........................................................................................................................ 33 Safari ........................................................................................................................ 33 Popularne pluginy ........................................................................................................... 34 Który edytor wybraü? ..................................................................................................... 34 Dodatkowe programy ..................................................................................................... 35 Adobe Photoshop ..................................................................................................... 35 Adobe Fireworks ...................................................................................................... 36 Adobe Flash ............................................................................................................. 36 Adobe Illustrator ...................................................................................................... 36 Inne „wspomagacze” ................................................................................................ 37 Testowanie ...................................................................................................................... 37 Walidacja ........................................................................................................................ 38 Statystyki sieciowe ......................................................................................................... 39 NarzĊdzia developerskie ................................................................................................. 40 Firebug ..................................................................................................................... 41 Web Developer Toolbar ........................................................................................... 41 Podsumowanie ................................................................................................................ 42 Quiz ................................................................................................................................ 42 Rozdziaä 2. Wstöp do CSS ................................................................................ 43 Co to jest CSS? ............................................................................................................... 43 Pierwszy dokument ........................................................................................................ 44 Skáadnia CSS .................................................................................................................. 45 6 CSS3. Tworzenie nowoczesnych stron WWW Czytelny zapis ................................................................................................................ 45 Kiedy biaáe znaki mają znaczenie? ........................................................................... 46 Metody osadzania stylów ............................................................................................... 46 Styl lokalny (inline) .................................................................................................. 47 WewnĊtrzny arkusz stylów ....................................................................................... 47 ZewnĊtrzny arkusz stylów ........................................................................................ 48 Importowanie arkuszy .............................................................................................. 48 Historia CSS ................................................................................................................... 49 CSS3 ......................................................................................................................... 49 Kto pociąga za sznurki? .................................................................................................. 49 Stopnie rozwoju specyfikacji .......................................................................................... 50 Unofficial Note — nieoficjalna notka ...................................................................... 50 Working Draft — szkic roboczy .............................................................................. 50 Last Call ................................................................................................................... 51 Candidate Recommendation — kandydat do rekomendacji ..................................... 51 Proposed Recommendation — proponowana rekomendacja ................................... 51 Published Recommendation — opublikowana rekomendacja .................................. 51 Czy mogĊ korzystaü z CSS3 juĪ teraz? ........................................................................... 51 Prefiksy przeglądarek (Vendor Prefixes) .................................................................. 52 Jednostki ......................................................................................................................... 53 Jednostki dáugoĞci przeznaczone dla ekranu ............................................................ 53 Jednostki dáugoĞci przeznaczone dla druku .............................................................. 54 Jednostki miar kątowej i áukowej ............................................................................. 54 Jednostki czasu i czĊstotliwoĞci ............................................................................... 54 Arkusz resetujący ........................................................................................................... 55 Kilka sáów o „Lorem ipsum” .................................................................................... 56 Jak sobie radziü z Internet Explorerem? ......................................................................... 56 Komentarze warunkowe i oddzielne style dla IE ..................................................... 56 Zwykáe komentarze CSS ................................................................................................ 57 Podsumowanie ................................................................................................................ 57 Quiz ................................................................................................................................ 58 CzöĈè II Aktualny standard CSS 2.1 ........................................... 59 Rozdziaä 3. Selektory ....................................................................................... 61 Drzewo dokumentu ........................................................................................................ 61 Dziedziczenie stylów ...................................................................................................... 62 Selektory specjalne ......................................................................................................... 63 Identyfikatory ........................................................................................................... 63 Klasy ........................................................................................................................ 63 Selektory elementów ...................................................................................................... 64 Selektor typu ............................................................................................................ 64 Selektor uniwersalny ................................................................................................ 64 Grupowanie selektorów ............................................................................................ 65 Selektor potomka ...................................................................................................... 65 Selektor dziecka ....................................................................................................... 66 Selektor rodzeĔstwa ................................................................................................. 67 Selektory atrybutów ........................................................................................................ 68 Selektor atrybutu ...................................................................................................... 68 Selektor atrybutu o okreĞlonej wartoĞci ................................................................... 68 Selektor atrybutu zawierającego okreĞlony wyraz ................................................... 69 Selektor atrybutu zawierającego myĞlniki ................................................................ 69 Spis treĈci 7 Pseudoklasy .................................................................................................................... 70 Pseudoklasa :link ...................................................................................................... 70 Pseudoklasa :visited ................................................................................................. 70 Pseudoklasa :hover ................................................................................................... 71 Pseudoklasa :active .................................................................................................. 71 Pseudoklasa :focus ................................................................................................... 71 Pseudoklasa :lang ..................................................................................................... 72 Pseudoelementy .............................................................................................................. 72 Pierwsza litera .......................................................................................................... 73 Pierwsza linia ........................................................................................................... 73 Przed ........................................................................................................................ 73 Po ............................................................................................................................. 74 Zasada kaskadowoĞci ..................................................................................................... 74 àamanie kaskadowoĞci — !important ...................................................................... 76 Podsumowanie ................................................................................................................ 76 Quiz ................................................................................................................................ 77 Rozdziaä 4. Czcionki, tekst i listy ..................................................................... 79 Stylistyka czcionek ......................................................................................................... 79 Pogrubienie (wytáuszczenie) .................................................................................... 79 Pochylenie (kursywa) ............................................................................................... 80 Wariant fontu ........................................................................................................... 81 Rozmiar czcionki ...................................................................................................... 81 Krój czcionki ............................................................................................................ 82 Style systemu i przeglądarki ..................................................................................... 83 àączenie wáaĞciwoĞci ............................................................................................... 83 Czcionkowy liberalizm ............................................................................................. 84 Stylistyka tekstu ............................................................................................................. 88 Dekoracja ................................................................................................................. 88 OdstĊp pomiĊdzy wierszami (interlinia) ................................................................... 89 Przeksztaácenie tekstu ............................................................................................... 90 OdstĊp pomiĊdzy literami (kerning) ......................................................................... 90 OdstĊp pomiĊdzy wyrazami ..................................................................................... 91 WciĊcie akapitu ........................................................................................................ 91 Kolor tekstu .............................................................................................................. 92 Kierunek tekstu ........................................................................................................ 93 àamanie wiersza i biaáe znaki .................................................................................. 93 Wyrównanie tekstu w poziomie ............................................................................... 95 Wyrównanie tekstu w pionie .................................................................................... 95 Generowanie treĞci ................................................................................................... 97 Stylistyka list .................................................................................................................. 97 Styl wypunktowania ................................................................................................. 97 Zawijanie tekstu w elementach listy ......................................................................... 99 Wáasny wyróĪnik ...................................................................................................... 99 Grupowanie wáasnoĞci ........................................................................................... 100 Podsumowanie .............................................................................................................. 100 Quiz .............................................................................................................................. 101 Rozdziaä 5. Kolor, täo, obramowanie, obrys i tabele ......................................... 103 Definicja koloru ............................................................................................................ 103 Sáowny opis ............................................................................................................ 104 Profil RGB ............................................................................................................. 104 Stylistyka táa ................................................................................................................. 107 Kolor táa ................................................................................................................. 107 8 CSS3. Tworzenie nowoczesnych stron WWW Táo obrazkowe ........................................................................................................ 107 Powielanie táa ......................................................................................................... 108 Zaczepienie táa ....................................................................................................... 109 Pozycja táa .............................................................................................................. 110 àączenie wáaĞciwoĞci ............................................................................................. 111 Stylistyka obramowania ............................................................................................... 111 Styl obramowania ................................................................................................... 111 SzerokoĞü obramowania ......................................................................................... 113 Kolor obramowania ................................................................................................ 113 àączenie wáaĞciwoĞci ............................................................................................. 114 WáaĞciwoĞci kierunkowe ........................................................................................ 114 Stylistyka obrysu .......................................................................................................... 115 Kolor obrysu ........................................................................................................... 116 Styl obrysu ............................................................................................................. 116 GruboĞü obrysu ...................................................................................................... 116 WáaĞciwoĞü zbiorowa ............................................................................................. 116 Obramowanie i obrys jednoczeĞnie ........................................................................ 117 Stylistyka tabel ............................................................................................................. 117 Pozycja podpisu ..................................................................................................... 117 Obramowanie tabeli ............................................................................................... 118 OdstĊp pomiĊdzy komórkami ................................................................................. 119 Puste komórki ......................................................................................................... 119 Dopasowanie komórek ........................................................................................... 120 Podsumowanie .............................................................................................................. 120 Quiz .............................................................................................................................. 120 Rozdziaä 6. Model pudeäkowy ......................................................................... 123 Model pudeákowy ......................................................................................................... 123 Kiedy element zostanie wyĞwietlony? ................................................................... 124 Wymiary ....................................................................................................................... 124 SzerokoĞü ............................................................................................................... 124 WysokoĞü ............................................................................................................... 125 Minimalna i maksymalna szerokoĞü ....................................................................... 125 Minimalna i maksymalna wysokoĞü ....................................................................... 125 Marginesy zewnĊtrzne .................................................................................................. 126 Zapis zbiorowy ....................................................................................................... 129 Marginesy wewnĊtrzne (dopeánienia) ........................................................................... 130 OdlegáoĞü od krawĊdzi ................................................................................................. 132 Podsumowanie .............................................................................................................. 133 Quiz .............................................................................................................................. 133 Rozdziaä 7. Pozycjonowanie ............................................................................ 135 Sposób wyĞwietlania .................................................................................................... 135 UsuniĊcie elementów ............................................................................................. 136 WiĊcej trybów wyĞwietlania .................................................................................. 136 Jeszcze wiĊcej trybów wyĞwietlania ...................................................................... 138 Páywanie elementu ........................................................................................................ 139 Przyleganie ................................................................................................................... 141 Opáywanie .................................................................................................................... 144 WidocznoĞü .................................................................................................................. 145 Pozycjonowanie ............................................................................................................ 146 Pozycjonowanie statyczne ...................................................................................... 146 Pozycjonowanie zaczepione ................................................................................... 146 Pozycjonowanie absolutne ..................................................................................... 147 Spis treĈci 9 Pozycjonowanie relatywne ..................................................................................... 147 Metoda Gilder-Levin .............................................................................................. 149 Warstwy ....................................................................................................................... 149 Przycinanie ................................................................................................................... 150 Kursory ......................................................................................................................... 152 Systemowe propozycje ........................................................................................... 152 Wáasne kursory ....................................................................................................... 153 Podsumowanie .............................................................................................................. 153 Quiz .............................................................................................................................. 153 CzöĈè III CSS3 ......................................................................... 155 Rozdziaä 8. Selektory ..................................................................................... 157 Selektory elementów .................................................................................................... 157 Selektor ogólnego nastĊpującego rodzeĔstwa ........................................................ 157 Selektory atrybutów ...................................................................................................... 158 Selektor atrybutu o wartoĞci rozpoczynającej siĊ od… ............................................... 158 Selektor atrybutu o wartoĞci koĔczącej siĊ na… .................................................... 159 Selektor atrybutu zawierający okreĞlony tekst ....................................................... 159 Pseudoelementy ............................................................................................................ 159 Zaznaczenie ............................................................................................................ 159 Pseudoklasy interfejsu uĪytkownika ............................................................................. 160 DostĊpne pola formularza ...................................................................................... 161 NiedostĊpne pola formularza .................................................................................. 161 Pola wyboru ........................................................................................................... 162 Pseudoklasy strukturalne .............................................................................................. 162 KorzeĔ dokumentu ................................................................................................. 162 Puste elementy ....................................................................................................... 163 Pierwsze dziecko .................................................................................................... 163 Ostatnie dziecko ..................................................................................................... 164 Jedyne dziecko ....................................................................................................... 164 Pierwszy element danego typu ............................................................................... 165 Ostatni element danego typu .................................................................................. 165 Jedyny element danego typu .................................................................................. 165 Pseudoklasa :nth-child(n) ....................................................................................... 166 Pseudoklasa :nth-last-child(n) ................................................................................ 167 Pseudoklasa :nth-of-type(n) .................................................................................... 168 Pseudoklasa :nth-last-of-type(n) ............................................................................. 168 Inne pseudoklasy .......................................................................................................... 169 Negacja ................................................................................................................... 169 Formatowanie kotwic ............................................................................................. 170 Selektory CSS4 ............................................................................................................. 171 Podsumowanie .............................................................................................................. 171 Quiz .............................................................................................................................. 171 Rozdziaä 9. Czcionki i tekst ............................................................................ 173 Stylistyka czcionek ....................................................................................................... 173 Proporcja ................................................................................................................ 173 Stylistyka tekstu ........................................................................................................... 175 Wyrównanie w poziomie ........................................................................................ 175 Pionowe wyrównanie ............................................................................................. 175 àamanie dáugich wyrazów ..................................................................................... 176 Gdy tekst siĊ nie mieĞci .......................................................................................... 176 CieĔ ........................................................................................................................ 177 10 CSS3. Tworzenie nowoczesnych stron WWW Przeáamanie wiersza ............................................................................................... 179 Obrys tekstu ........................................................................................................... 180 Podsumowanie .............................................................................................................. 181 Quiz .............................................................................................................................. 181 Rozdziaä 10. Kolumny tekstu ........................................................................... 183 Ogólnie o kolumnach .................................................................................................... 183 Liczba kolumn .............................................................................................................. 184 SzerokoĞü kolumn ........................................................................................................ 185 Liczba i szerokoĞü kolumn ........................................................................................... 185 OdstĊp miĊdzy kolumnami ........................................................................................... 186 Style linii oddzielającej kolumny ................................................................................. 187 Przeáamanie ciągáoĞci kolumn ...................................................................................... 187 Wypeánienie kolumn ..................................................................................................... 189 Podsumowanie .............................................................................................................. 190 Quiz .............................................................................................................................. 191 Rozdziaä 11. Kolor, täo, obrys i obramowanie .................................................... 193 Kolory poziomu trzeciego ............................................................................................ 193 Sáowa kluczowe ..................................................................................................... 193 Profil RGBA ........................................................................................................... 194 Profile HSL i HSLA ............................................................................................... 194 PrzezroczystoĞü ...................................................................................................... 195 Profil CMYK .......................................................................................................... 197 Stylistyka táa ................................................................................................................. 198 Rozmiar táa ............................................................................................................. 198 Powtarzanie táa ....................................................................................................... 201 Styk táa z obramowaniem ....................................................................................... 203 Pozycja początkowa táa obrazkowego .................................................................... 204 Wielokrotna definicja táa ........................................................................................ 205 Stylistyka obrysu .......................................................................................................... 206 Obramowanie ............................................................................................................... 207 Zaokrąglone naroĪniki ............................................................................................ 207 CieĔ dla kontenera .................................................................................................. 209 Wáasne obramowanie ............................................................................................. 210 Podsumowanie .............................................................................................................. 214 Quiz .............................................................................................................................. 214 Rozdziaä 12. Gradienty ..................................................................................... 215 Kilka sáów o gradientach w CSS .................................................................................. 215 Gradienty linearne ........................................................................................................ 216 Gradienty liniowe powtarzane ...................................................................................... 219 Gradienty radialne ........................................................................................................ 220 Maski ............................................................................................................................ 224 Lustrzane odbicie .......................................................................................................... 225 Podsumowanie .............................................................................................................. 227 Quiz .............................................................................................................................. 227 Rozdziaä 13. Media .......................................................................................... 229 Typy mediów ................................................................................................................ 229 Wybór medium ....................................................................................................... 230 Zapytania o media ........................................................................................................ 231 Typy mediów i ich wáasnoĞci ................................................................................. 231 WyraĪenia .............................................................................................................. 232 Obsáuga Media Queries w przeglądarkach ............................................................. 235 Spis treĈci 11 Media Queries w praktyce ............................................................................................ 235 O czym naleĪy pamiĊtaü podczas tworzenia strony mobilnej? ............................... 238 Podsumowanie .............................................................................................................. 238 Quiz .............................................................................................................................. 238 Rozdziaä 14. Transformacje .............................................................................. 239 Krótko o transformacjach ............................................................................................. 239 Funkcje transformacji ................................................................................................... 240 PrzesuniĊcie (translacja) ......................................................................................... 240 Skalowanie ............................................................................................................. 241 Pochylenie .............................................................................................................. 243 Obracanie ............................................................................................................... 243 Matrix ..................................................................................................................... 244 àączenie wszystkich wáasnoĞci .............................................................................. 244 Punkt ciĊĪkoĞci ....................................................................................................... 246 Problem z elementami liniowymi w WebKit ......................................................... 246 Transformacje 3D ......................................................................................................... 247 Podsumowanie .............................................................................................................. 248 Quiz .............................................................................................................................. 248 Rozdziaä 15. PrzejĈcia ...................................................................................... 249 WstĊpu ciąg dalszy ....................................................................................................... 249 Wybór wáaĞciwoĞci ................................................................................................ 250 Czas trwania ........................................................................................................... 250 Funkcje ruchu ......................................................................................................... 251 OpóĨnienie ............................................................................................................. 252 WáaĞciwoĞü skrótowa ............................................................................................. 253 Wielokrotne przejĞcia ............................................................................................. 253 Praktyczne zastosowania .............................................................................................. 254 Galeria zdjĊü ........................................................................................................... 254 Menu rozwijane ...................................................................................................... 255 Podsumowanie .............................................................................................................. 257 Quiz .............................................................................................................................. 257 Rozdziaä 16. Animacje ..................................................................................... 259 Definiowanie animacji .................................................................................................. 259 Klatki ...................................................................................................................... 260 Korzystanie z animacji ................................................................................................. 261 Nazwa animacji ...................................................................................................... 261 Czas trwania ........................................................................................................... 261 Przebieg animacji ................................................................................................... 262 OpóĨnienie animacji ............................................................................................... 262 Liczba powtórzeĔ ................................................................................................... 262 Stan animacji .......................................................................................................... 263 Odwracanie przebiegu animacji ............................................................................. 263 WáaĞciwoĞü skrótowa ............................................................................................. 264 Wielokrotne animacje ............................................................................................. 264 Dla fanów siatkówki i nie tylko .................................................................................... 265 Podsumowanie .............................................................................................................. 268 Quiz .............................................................................................................................. 268 12 CSS3. Tworzenie nowoczesnych stron WWW CzöĈè IV Tworzenie stron WWW w praktyce .............................. 269 Rozdziaä 17. Jurek Meble ................................................................................. 271 PrzyjĊcie zlecenia ......................................................................................................... 271 ĩyczenia klienta ..................................................................................................... 272 Szczegóáy umowy .................................................................................................. 272 Przygotowanie Ğrodowiska pracy ................................................................................. 274 Kompletny zestaw przeglądarek ............................................................................. 274 Zestaw narzĊdzi do tworzenia stron WWW ........................................................... 274 Konfiguracja witryny .................................................................................................... 275 Domena i pakiet hostingowy .................................................................................. 275 Tworzenie nowego serwisu .................................................................................... 276 Aliasy ..................................................................................................................... 278 NarzĊdzia dla webmasterów Google ...................................................................... 278 Plik robots.txt ......................................................................................................... 279 Mapa witryny ......................................................................................................... 280 Plik .htaccess .......................................................................................................... 282 Praca nad szablonem .................................................................................................... 283 Struktura katalogów ............................................................................................... 283 Statystyki Google Analytics ................................................................................... 283 Strony z informacjami o báĊdach ............................................................................ 284 Opracowywanie struktury HTML .......................................................................... 286 Praca nad podstronami .................................................................................................. 298 Strona gáówna ......................................................................................................... 298 O nas ...................................................................................................................... 301 Podstrony mebli ..................................................................................................... 302 Klienci .................................................................................................................... 307 Kontakt ................................................................................................................... 309 Styl witryny .................................................................................................................. 313 Kolorystyka ............................................................................................................ 313 Typografia .............................................................................................................. 314 Inne ........................................................................................................................ 315 Pomocnicze arkusze CSS ............................................................................................. 315 Resetujący arkusz stylów ....................................................................................... 315 Arkusz CSS dla stron z informacjami o báĊdach .................................................... 317 Tricki dla starszych wersji IE ................................................................................. 318 Arkusz CSS dla Lightbox ....................................................................................... 318 Gáówny arkusz CSS ...................................................................................................... 320 Import fontów i definicja animacji ......................................................................... 320 Reguáy dla caáego szablonu .................................................................................... 324 Dodatkowe style dla poszczególnych podstron ...................................................... 329 Ostatnie poprawki ......................................................................................................... 338 Kompresja plików .................................................................................................. 338 Testowanie ............................................................................................................. 339 Podsumowanie .............................................................................................................. 341 Dodatki ...................................................................... 343 Dodatek A Wykaz wäaĈciwoĈci ...................................................................... 345 Odczyt danych tabelarycznych ..................................................................................... 345 Przeglądarki i podziaá danych ................................................................................ 345 Oznaczenia ............................................................................................................. 345 Spis treĈci 13 Ogólny wykaz wáasnoĞci CSS ...................................................................................... 348 WáaĞciwoĞci i selektory CSS 2.1 ............................................................................ 348 WáaĞciwoĞci i selektory CSS3 ................................................................................ 351 Szczegóáowy wykaz wáaĞciwoĞci ................................................................................. 354 WiĊcej .................................................................................................................... 354 Statystyki sieciowe ....................................................................................................... 355 Udziaá przeglądarek ................................................................................................ 355 Dodatek B Klucz odpowiedzi .......................................................................... 357 Dodatek C Fonty ........................................................................................... 361 Gáówne rodziny fontów ................................................................................................ 361 Formaty czcionek ......................................................................................................... 362 Zakres wsparcia formatów w przeglądarkach ........................................................ 363 Zestaw fontów systemowych ........................................................................................ 363 Windows ................................................................................................................ 363 Mac OS .................................................................................................................. 364 Proporcje czcionek ....................................................................................................... 364 NajwaĪniejsze encje ..................................................................................................... 365 Dodatek D Kolory .......................................................................................... 367 Bezpieczna paleta kolorów ........................................................................................... 367 Tabela HEX .................................................................................................................. 368 Koáo kolorów ................................................................................................................ 368 Dodatek E Licencje ....................................................................................... 371 Dodatek F Zasoby ........................................................................................ 373 Gdzie rozpoczynaü poszukiwania? ............................................................................... 373 ZdjĊcia .................................................................................................................... 373 Fonty ...................................................................................................................... 374 Logotypy ................................................................................................................ 374 Kolorystyka ............................................................................................................ 375 Dodatek G HTML5 ......................................................................................... 377 Podziaá elementów ........................................................................................................ 377 Elementy liniowe .................................................................................................... 377 Elementy blokowe .................................................................................................. 377 Elementy zastĊpowalne .......................................................................................... 377 Elementy tabeli ....................................................................................................... 378 Ogólne elementy strukturalne ................................................................................. 378 Pozostaáe elementy ................................................................................................. 378 Elementy wycofane ...................................................................................................... 378 Tagi prezentacyjne ................................................................................................. 378 Tagi wycofane ze wzglĊdu na ograniczoną dostĊpnoĞü .......................................... 378 Tagi wycofane ze wzglĊdu na przestarzaáoĞü ......................................................... 378 Nowe elementy HTML5 ............................................................................................... 378 Blokowe ................................................................................................................. 379 Liniowe .................................................................................................................. 379 ZastĊpowalne .......................................................................................................... 379 Specyfika elementów HTML ....................................................................................... 379 Skorowidz .................................................................................... 381 14 CSS3. Tworzenie nowoczesnych stron WWW Rozdziaä 11. Kolor, täo, obrys i obramowanie Nowe wáaĞciwoĞci omówione w tym rozdziale pochodzą z aĪ czterech róĪnych modu- áów. Rozpoczniemy od nowinek w definiowaniu kolorów, w tym ponad setki nowych sáów kluczowych oraz czterech profili barw. Poznasz dwa sposoby definiowania prze- zroczystoĞci i póáprzezroczystoĞci, dowiesz siĊ, jakie są ich zalety i wady, a co za tym idzie, kiedy je stosowaü. WyjaĞniĊ, jak nadaü co najmniej dwa táa dla elementu i jak korzystaü przy tym z trzech nowych wáaĞciwoĞci. RozwaĪania nad obrysem skupią siĊ na jego odstĊpie od elementu, któremu jest przypisany. NajwiĊkszą gratkĊ zostawiáem na koniec — są nią wáasnoĞci obramowania, a wĞród nich zaokrąglanie naroĪników oraz cieĔ dla kontenera. Gdyby znudziáy Ci siĊ standardowe style obramowania, zaw- sze moĪesz skorzystaü ze swoich wáasnych. OmówiĊ krok po kroku, jak to zrobiü. No to zaczynamy. Kolory poziomu trzeciego Moduá kolorów poziomu trzeciego zyskaá status rekomendacji jako jeden z pierw- szych. Zalecenie ujrzaáo Ğwiatáo dzienne 7 czerwca 2011 r., znajdziesz je pod adresem www.w3.org/TR/css3-color. Säowa kluczowe W CSS Color Module Level 3 pojawiáo siĊ ok. 140 nowych nazw kolorów. Peáną ich listĊ znajdziesz pod adresem www.w3.org/TR/css3-color/#svg-color. Istnieje wiele powodów, dla których stosowanie sáów kluczowych jest niepraktyczne. Po pierwsze, faceci gorzej rozpoznają barwy, a jeszcze gorzej je nazywają, nie wszyscy jednoznacznie wyobraĪają sobie karmazyn czy indygo. Po drugie, trudno je zapamiĊtaü. Zdecydo- wanie áatwiej byáoby siĊ posáugiwaü polskimi okreĞleniami, takimi jak czerwony albo morsko-zielony. Niestety, nie jest tak dobrze, ta przyjemnoĞü zarezerwowana jest tylko 194 CzöĈè III i CSS3 dla Amerykanów, Anglików i caáej reszty anglojĊzycznych webdesignerów. Po trzecie, paleta barw moĪliwych do uzyskania sáowami kluczowymi jest bardzo ograniczona. Czasy, w których korzystano z bezpiecznych zestawów kolorów internetowych, daw- no minĊáy (przykáad takiej palety znajdziesz w dodatku D). Posáugując siĊ profilami kolorów, moĪna uzyskaü ponad 16,5 mln barw! Profil RGBA RGBA (ang. Red Green Blue Alpha) to model przestrzeni barw. Jest w istocie rozszerze- niem RGB, posiada dodatkowo kanaá alfa (ang. alpha) — przezroczystoĞci. Jego wartoĞü wyraĪamy jako procent, a zapisujemy w postaci dziesiĊtnej z wykorzystaniem kropki zamiast przecinka, identycznie jak w przypadku innych uáamków w CSS. 0 to peána przezroczystoĞü, 1 — brak przezroczystoĞci, natomiast wartoĞci poĞrednie, jak áatwo siĊ domyĞliü, pozwalają uzyskaü póáprzezroczystoĞü. Skok zauwaĪalny dla przeglą- darki to 0.01. Zero w zapisie parametru przezroczystoĞci moĪna pominąü, dlatego przy- káadowa deklaracja moĪe mieü nastĊpującą postaü: color: rgba(120, 33, 100, .85); Profile HSL i HSLA HSL jest zgoáa odmiennym profilem od RGB. W jego przypadku zamiast nasycenia barw podstawowych podajemy odcieĔ reprezentowany przez odpowiednią miarĊ stopniową kąta na kole kolorów (zamieszczono je w dodatku D), jego nasycenie oraz jasnoĞü, stąd wáaĞnie nazwa HSL (ang. Hue Saturation Lightness). Parametr H to wybrany kolor, który okreĞlamy jako wartoĞü liczbową z przedziaáu 0 – 360 bez nastĊpującego znaku stopnia. S to nasycenie, 0 stanowi odcieĔ najbledszy, natomiast 100 najjaskrawszy. L to natu- ralnie jasnoĞü, 0 to odcieĔ najciemniejszy, a 100 najjaĞniejszy. ZachĊcam CiĊ do sto- sowania HSL, poniewaĪ obok opartego na nim HSLA jest on najbardziej intuicyjny i áa- two modyfikowalny. ZaáóĪmy, Īe chcesz rozjaĞniü kolor — zmieniasz L; chcesz mieü kolor bardziej stonowany — zmniejszasz S. To bajecznie proste! Istotną przeszkodą ku temu, byĞ juĪ dziĞ mógá w peáni wykorzystywaü moĪliwoĞci nowych profili, jest brak ich wsparcia w IE do wersji 9. Zajrzyj koniecznie do tabeli w dodatku D, gdzie znaj- dziesz wiĊcej informacji na ten temat. Oto przykáadowa deklaracja koloru w HSL: color: hsl(200, 50 , 75 ); HSLA, jak pewnie siĊ domyĞlasz, to podrasowany o kanaá przezroczystoĞci profil HSL. Sposób definiowania przezroczystoĞci nie róĪni siĊ niczym od tego znanego z RGBA. Przykáadowa deklaracja HSLA moĪe mieü postaü: color: hsla(200, 50 , 75 , .4); Na rysunku 11.1 widnieją dwa boksy z póáprzezroczystym táem. Rozdziaä 11. i Kolor, täo, obrys i obramowanie 195 Rysunek 11.1. Przykáadowa definicja póáprzezroczystych kolorów PrzezroczystoĈè RGBA i HSLA nie są jedynymi sposobami na okreĞlenie przezroczystoĞci. W tym celu powstaáa specjalna wáaĞciwoĞü, opacity, której wartoĞciami mogą byü liczby z prze- dziaáu 0 – 1, z dokáadnoĞcią do 0.01. DomyĞlnie jest to 1, czyli brak przezroczystoĞci, natomiast 0 to przezroczystoĞü zupeána. Jaka jest zatem róĪnica pomiĊdzy transparencją wprowadzoną przez opacity, RGBA i HSLA? Zobacz, co moĪemy osiągnąü poleceniem opacity (rysunek 11.2). body { background: url(truskawki.jpg); font: 12px/17px Verdana, Geneva, sans-serif; } div { border: 5px solid rgb(0, 178, 51); position: absolute; background: white; } div#jeden { width: 500px; padding: 30px; margin: 30px 0 0 200px; opacity: 0.7; } div#dwa { width: 200px; padding: 15px; margin: 140px 0 0 260px; opacity: 0.6; } div#trzy { width: 175px; padding: 25px; margin-top: 120px; margin-left: 480px; opacity: 0.3; } div id= jeden Lorem ipsum […] /div div id= dwa Lorem ipsum […] /div div id= trzy Lorem ipsum […] /div 196 CzöĈè III i CSS3 Rysunek 11.2. Przezroczyste staáy siĊ takĪe tekst i obramowanie Tekst nie jest czytelny, nie wygląda to dobrze. Páynie z tego jeden waĪny wniosek — opacity odnosi siĊ do caáoĞci elementu: treĞci, táa i obramowania, sama nie jest dzie- dziczona, ale nanosi efekt równieĪ na jego potomków, dlatego objĊcie tekstu np. aka- pitem nic nie pomoĪe. Raz nadanej przezroczystoĞci nie da siĊ ot tak odwróciü dekla- racją opacity: 1;, trzeba ją po prostu usunąü. Polecenie to nadaje siĊ doskonale do struktur, którym nie moĪna przypisaü koloru, takich jak grafiki. WszĊdzie tam, gdzie definiujemy kolor, lepiej stosowaü profile barw z kanaáem alfa, które pozwolą nam kontrolowaü krycie kaĪdej skáadowej elementu z osobna. Sprawmy, by tylko táo byáo póáprzezroczyste. W tym celu zmieĔmy wszystkie deklaracje opacity na profil RGBA z tą samą wartoĞcią przezroczystoĞci (rysunek 11.3): div#jeden { background: rgba(255, 255, 255, .7); } div#dwa { background: rgba(255, 255, 255, .6); } div#trzy { background: rgba(255, 255, 255, .3); } Rysunek 11.3. Tym razem tylko táo staáo siĊ przezroczyste Rozdziaä 11. i Kolor, täo, obrys i obramowanie 197 Udaáo nam siĊ dopiąü swego. Teraz znasz juĪ róĪnicĊ pomiĊdzy dwoma sposobami nada- wania transparencji. Wszystko byáoby zbyt piĊkne, gdyby IE nie miaá nic do powie- dzenia. W wersjach starszych od 9. nie da siĊ osiągnąü przezroczystoĞci za pomocą CSS w tak prosty sposób, ale tym razem mam dla Ciebie bardzo miáą niespodziankĊ. Mając na uwadze przestarzaáe wersje IE, moĪna zastosowaü tzw. filtry: { background: transparent; -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#661A1154, endColorstr=#661A1154) ; /* wersja dla IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#661A1154, endColorstr=#661A1154); /* wersja dla IE6 i 7 */ zoom: 1; } Nie obawiaj siĊ, nie musisz tego kodu pisaü rĊcznie. JeĪeli juĪ koniecznie chcesz zapew- niü wsparcie uĪytkownikom starszych wersji IE, skorzystaj z generatora dostĊpnego pod adresem www.kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer. Na stronie wpisujesz definicjĊ przezroczystoĞci i nie musisz nawet odĞwieĪaü — kod automatycznie siĊ wygeneruje. Bardzo waĪne jest, ĪebyĞ wkleiá kod dla IE przed wáa- Ğciwymi deklaracjami dla pozostaáych przeglądarek, w przeciwnym razie background: transparent je przysáoni i zgodnie z zasadą kaskadowoĞci zamiast póáprzezroczysto- Ğci otrzymasz zupeáną przezroczystoĞü w innych przeglądarkach. Profil CMYK CMYK (ang. Cyan Magenta Yellow Key) to jedna z przestrzeni barw spotykana w grafice komputerowej, reprezentująca zestaw czterech podstawowych kolorów wystĊpujących w tonerach drukarskich. Warto zwróciü uwagĊ na to, Īe barwy w profilu CMYK róĪnią siĊ od tych, które przedstawia RGB. Na CMYK skáadają siĊ nieco inne kolory, bo cyjan to jasno- niebieski, magenta to bardziej róĪowy niĪ czerwony, a zamiast zielonego mamy Īóáty, no i Īeby byáo ekonomicznie takĪe czarny, zwany barwą kluczową (ang. key). CMYK to przestrzeĔ barw subtraktywna, co oznacza, Īe maksymalne nasycenie wszystkich barw skáadowych da nam kolor czarny, a nie tak jak w profilach addytywnych — biaáy. Porównanie znajduje siĊ na rysunku 11.4. Rysunek 11.4. Po lewej obrazek na ekranie komputera (RGB), po prawej ten sam obrazek po wydrukowaniu (CMYK) 198 CzöĈè III i CSS3 RóĪnica pomiĊdzy tym, co jest na ekranie, a tym, co widnieje na papierze, jest naprawdĊ spora, dlatego teĪ warto przygotowywaü osobne arkusze stylów dla druku. W przypadku stron firmowych nie jest to aĪ tak istotne, bo raczej rzadko drukujemy ofertĊ. Z nowych rozwiązaĔ skorzystają raczej duĪe portale, zawierające caáe mnóstwo ciekawych arty- kuáów. Niektóre wáaĞciwoĞci CSS są przy drukowaniu wyáączane, na papierze nie poja- wią siĊ wiĊc táa albo duĪe obrazki w tle, za to moĪemy do woli zmieniaü wáasnoĞci tekstu, jak np. kolor czy krój czcionki. Trzeba jednak zachowaü przy tym zdrowy roz- sądek, bo np. wydruk kilkunastu stron kolorowego tekstu, zupeánie niepotrzebnego, moĪe uszczupliü zasoby tuszu w drukarce internauty, a przez to zdenerwowaü go. JeĪeli zdecydujemy siĊ na zamieszczenie kolorowych elementów, to warto profile addytywne przekonwertowaü na CMYK, np. Adobe Kulerem, o którym jest mowa w dodatku F. Nie moĪemy jednak korzystaü z tego profilu juĪ teraz, bo nie jest on jeszcze wspierany przez Īadną z przeglądarek. CMYK nie jest czĊĞcią moduáu kolorów CSS3, lecz jedynie szkicu roboczego: Generated Content for Paged Media Module, czyli w wolnym táu- maczeniu — „zawartoĞci przeznaczonej dla druku”. PostĊp prac nad nim moĪesz na bieĪąco Ğledziü pod adresem www.dev.w3.org/csswg/css3-gcpm. Mak
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

CSS3. Tworzenie nowoczesnych stron WWW
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ą: