CSS3. Podręcznik nowoczesnego webdevelopera - ebook

Oto przyszłość rozwiązań projektowych dla stron WWW

CSS to język, dzięki któremu możesz opisać wygląd tworzonej strony WWW. Jego pierwsza wersja ujrzała światło dzienne w 1996 roku i od tej pory język ten jest nieustannie rozwijany. Dziś natomiast obowiązuje wersja CSS3 — podzielona na moduły, do których zostały przypisane dotychczasowe atrybuty oraz dodane nowe możliwości. Próba przebrnięcia przez oficjalną dokumentację będzie Cię kosztowała wiele wysiłku, trudu oraz nieprzespanych nocy. Zapewne chcesz tego uniknąć? Ta książka to rozwiązanie idealne dla Ciebie!

Znajdziesz w niej najważniejsze informacje na temat CSS3, starannie opracowane i podane w przystępnej formie. Kolejne rozdziały pozwolą Ci zdobyć wiadomości o tak zwanych media queries, pozwalających zmieniać wygląd elementów strony w zależności od urządzenia, oraz szczegółową wiedzę dotyczącą selektorów. Ponadto przekonasz się, jak pseudoklasy i pseudoznaczniki mogą ułatwić Ci życie oraz jak pozbyć się nudnych czcionek dzięki możliwościom @font-face. Następnym wyzwaniem stojącym przed Tobą jest zapoznanie się z transformacjami 2D i 3D, efektami specjalnymi oraz elastycznymi układami elementów (Flexbox). Ta książka jest doskonałą lekturą dla projektantów stron, którzy chcą błyskawicznie poznać i wykorzystać nowości CSS3 w swoich projektach.

Dzięki znacznej ilości rzeczywistych przykładów i koncentracji na zasadach przygotowania dobrego układu, książka pomoże Ci w poszerzeniu umiejętności z zakresu CSS. Poruszone zostały między innymi następujące zagadnienia:

• Nadawanie stylu tekstowi za pomocą wybranych czcionek, przez dodanie cieni oraz innych efektów.
• Utworzenie, umieszczenie i zmiana wymiarów obrazów tła.
• Zastosowanie w statycznych stronach internetowych przejść i animacji opartych na zdarzeniach.
• Wykorzystanie transformacji dwui trójwymiarowych w tekście i na obrazach.
• Użycie gradientów liniowych i promieniowych w celu osiągnięcia płynnych przejść między kolorami.
• Kontrolowanie układu strony za pomocą siatek, kolumn i elastycznego wyrównywania.
• Dopasowanie wyglądu witryny internetowej do każdego typu urządzenia, które ma dostęp do sieci.

Poznaj potencjał nowej specyfikacji CSS3!

Przedmowa (15)

Wprowadzenie (17)

• Tematy omawiane w książce (18)
• Rozdział po rozdziale (18)
• Dodatki i inne źródła (19)
• Wprowadzenie do wydania drugiego (19)

1. Poznajcie CSS3 (21)

• Co to jest CSS3 i skąd się wziął? (22)
  • Krótka historia CSS3 (22)
  • CSS3 ma budowę modułową (22)
  • Nie istnieje coś takiego jak CSS3 (23)
• Status modułu i proces rekomendowania (24)
• Poznajmy składnię (25)
• Przedrostki nazw (26)
• Zaczynamy! (27)

2. Media Queries - zapytania o media (29)

• Zalety modułu Media Queries (30)
• Składnia (32)
• Cechy mediów (34)
  • Szerokość i wysokość (35)
  • Rozdzielczość sprzętowa (37)
  • Szerokość i wysokość ekranu urządzenia (39)
  • Orientacja (40)
  • Proporcje (41)
• Łączone cechy mediów (42)
• Najpierw na urządzenia przenośne (43)
• Podsumowanie (44)
• Zapytania o media - wdrożenie w przeglądarkach (44)

3. Selektory (45)

• Selektory atrybutów (46)
• Selektory atrybutów wprowadzone w CSS3 (47)
  • Selektor początku łańcucha wartości atrybutu (47)
  • Selektor końca łańcucha wartości atrybutu (50)
  • Selektor dowolnej wartości atrybutu (51)
  • Selektory wielu atrybutów (52)
• Kombinator dowolnych braci (53)
• Podsumowanie (54)
• Selektory - wdrożenie w przeglądarkach (55)

4. Pseudoklasy i pseudoznaczniki (57)

• Pseudoklasy strukturalne (58)
  • Pseudoklasy z rodziny :nth-* (59)
• Inne pseudoklasy (67)
  • Pseudoklasa :target (67)
  • Pseudoklasa :empty (68)
  • Pseudoklasa :root (69)
  • Pseudoklasa :not() (69)
  • Stany znaczników interfejsu użytkownika (70)
  • Pseudoklasy weryfikacji ograniczeń (72)
• Pseudoznaczniki (73)
  • Pseudoznacznik ::selection (73)
• Podsumowanie (74)
• Selektory DOM i selektory atrybutów - wdrożenie w przeglądarkach (75)

5. Internetowe kroje pisma (77)

• Reguła @font-face (78)
  • Definiowanie różnych odmian kroju pisma (80)
  • Prawdziwe odmiany krojów pisma kontra generowane sztucznie (81)
• Niezawodna składnia @font-face (82)
  • Stosowanie lokalnych krojów pisma (82)
  • Formaty krojów pisma (82)
  • Ostateczna forma niezawodnej składni (83)
• Licencjonowanie krojów pisma na potrzeby używania w internecie (84)
• Przykład z życia wzięty (85)
• Kontrolowane wczytywanie krojów pisma (87)
• Więcej o właściwościach krojów pisma (87)
  • Właściwość font-size-adjust (87)
  • Właściwość font-stretch (90)
• Właściwości fontów w formacie OpenType (91)
  • Stosowanie właściwości krojów pisma (91)
  • Właściwości krojów pisma (94)
• Podsumowanie (95)
• Internetowe kroje pisma - wdrożenie w przeglądarkach (95)

6. Efekty tekstowe i style typograficzne (97)

• Osie i współrzędne (98)
• Efekty przestrzenne - text-shadow (100)
  • Cienie złożone (102)
• Ograniczenie wyświetlania nadmiaru tekstu (103)
• Wyrównywanie tekstu (105)
• Kontrola zawijania wierszy (105)
  • Dzielenie wyrazów (106)
  • Dzielenie wyrazów z użyciem łącznika (107)
• Skalowanie zawartości znaczników (108)
• Podsumowanie (109)
• Efekty tekstowe i style typograficzne - wdrożenie w przeglądarkach (109)

7. W kilku kolumnach (111)

• Metody układania treści w kolumnach (112)
  • Określona liczba kolumn - column-count (112)
  • Dynamicznie definiowana szerokość kolumn - column-width (113)
  • Różne sposoby rozmieszczania zawartości w kolumnach (114)
  • Łączenie właściwości column-count z column-width (116)
• Odstępy i linie (117)
• Umieszczanie innych obiektów w kolumnach (118)
• Znaczniki rozciągające się na kilka kolumn (120)
• Podsumowanie (121)
• Kolumny - wdrożenie w przeglądarkach (121)

8. Obrazy tła (123)

• Uaktualnienie istniejących właściwości tła (124)
  • Właściwość background-position (124)
  • Właściwość background-attachment (125)
  • Właściwość background-repeat (125)
• Wiele obrazów tła (127)
• Dynamicznie skalowane obrazy tła (129)
• Właściwości background-clip i background-origin (131)
• Uaktualniona skrócona składnia ustawień tła (133)
• Podsumowanie (134)
• Obrazy tła - wdrożenie w przeglądarkach (135)

9. Efekty obramowań i kontenerów (137)

• Zaokrąglanie rogów (137)
  • Skrócona wersja zapisu reguły właściwości border-radius (140)
  • Stosowanie wartości procentowych (141)
• Obrazy w charakterze ramek (142)
  • Właściwość border-image-source (142)
  • Właściwość border-image-slice (143)
  • Właściwość border-image-width (145)
  • Właściwość border-image-outset (147)
  • Właściwość border-image-repeat (147)
  • Skrócona postać właściwości border-image (148)
  • Wdrożenie w przeglądarkach (149)
• Cienie zewnętrzne (149)
• Cienie wewnętrzne (151)
• Podsumowanie (152)
• Efekty obramowań i kontenerów - wdrożenie w przeglądarkach (152)

10. Kolory i przezroczystość (153)

• Właściwość opacity (154)
• Nowe i poszerzone wartości kolorów (155)
  • Kanał alfa (155)
  • Barwa, nasycenie, średnie światło białe (158)
  • Model HSLA (160)
  • Zmienna koloru currentColor (161)
• Podsumowanie (162)
• Kolory i przezroczystość - wdrożenie w przeglądarkach (162)

11. Gradienty (163)

• Gradient liniowy (164)
  • Określanie kierunku gradientu (164)
  • Dodatkowe wartości kolorów stopujących (166)
  • Powielanie gradientu liniowego (168)
• Gradient promieniowy (170)
  • Korzystanie z gradientu promieniowego (170)
  • Wiele kolorów stopujących (172)
  • Powielanie gradientu promieniowego (173)
• Gradienty złożone (175)
• Podsumowanie (176)
• Gradienty - wdrożenie w przeglądarkach (176)

12. Transformacje dwuwymiarowe (177)

• Właściwość transform (178)
  • Funkcja rotate (178)
  • Funkcja translate (182)
  • Funkcja scale (184)
  • Funkcja skew (185)
• Ważna uwaga dotycząca funkcji modułu transformacji (187)
• Przekształcanie znaczników za pomocą macierzy (188)
• Podsumowanie (191)
• Transformacje dwuwymiarowe - wdrożenie w przeglądarkach (191)

13. Transformacje trójwymiarowe (193)

• Elementy trójwymiarowe w CSS (194)
• Funkcje transformujące (196)
  • Obrót wokół osi (196)
  • Funkcja perspective (198)
  • Translacja wzdłuż osi (200)
  • Skalowanie (201)
  • Macierz transformacji (202)
• Właściwości perspective i perspective-origin (204)
• Właściwość transform-origin (205)
• Właściwość transform-style (207)
• Wyświetlanie i ukrywanie tylnej ścianki (208)
• Podsumowanie (209)
• Transformacje trójwymiarowe - wdrożenie w przeglądarkach (209)

14. Przejścia i animacje (211)

• Przejścia (212)
  • Właściwość transition-property (213)
  • Właściwość transition-duration (213)
  • Właściwość transition-timing-function (214)
  • Właściwość transition-delay (218)
  • Skrócony zapis właściwości transition (219)
  • Przykład pełnego przejścia (220)
  • Przejścia wielokrotne (221)
• Animacje (222)
  • Klatki kluczowe (222)
  • Właściwość animation-name (225)
  • Właściwość animation-duration (225)
  • Właściwość animation-timing-function (226)
  • Właściwość animation-delay (226)
  • Właściwość animation-iteration-count (226)
  • Właściwość animation-direction (227)
  • Właściwość animation-fill-mode (228)
  • Właściwość animation-play-state (229)
  • Skrócona postać właściwości animation (229)
  • Animacje wielokrotne (231)
• Podsumowanie (232)
• Przejścia i animacje - wdrożenie w przeglądarkach (232)

15. Elastyczny układ elementów (233)

• Deklarowanie modułu elastycznego układu pudełkowego (234)
• Układ elementów w module Flexbox (235)
• Odwracanie kolejności znaczników (236)
• Pełna zmiana rozmieszczenia zawartości (237)
• Zwiększanie elastyczności (238)
  • Właściwość flex-grow (238)
  • Właściwość flex-shrink (239)
  • Właściwość flex-basis (240)
  • Skrócona składnia właściwości flex (241)
• Wyrównanie znaczników wewnątrz kontenera (242)
  • Wyrównanie w poziomie za pomocą właściwości justify-content (242)
  • Wyrównanie w pionie za pomocą właściwości align-items (243)
  • Wyrównanie znaczników wzdłuż osi prostopadłej za pomocą właściwości align-self (244)
  • Właściwości wrap i flow (245)
  • Skrócona składnia właściwości flex-flow (246)
  • Wyrównywanie wielu wierszy za pomocą właściwości align-content (246)
• Obsługa w przeglądarkach i składnia dziedziczona (247)
• Podsumowanie (247)
• Elastyczny układ elementów - wdrożenie w przeglądarkach (248)

16. Wartości i rozmiary (249)

• Względne jednostki długości (249)
  • Jednostki pochodne znacznika głównego (250)
  • Jednostki pochodne widocznego obszaru (251)
• Wartości obliczone (252)
• Skalowanie znaczników (254)
  • Skalowanie pudełka (254)
  • Skalowanie wewnętrzne i zewnętrzne (255)
• Podsumowanie (259)
• Wartości i rozmiary - wdrożenie w przeglądarkach (259)

17. Siatki (261)

• Terminologia (262)
• Deklarowanie i definiowanie siatki (263)
  • Tworzenie siatek jawnych przez określenie wymiarów toru (263)
  • Rozmieszczanie elementów w siatce jawnej (266)
  • Skrócone właściwości rozmieszczania elementów w siatce jawnej (268)
  • Powtarzanie linii siatki (269)
  • Nazwane obszary siatki (270)
  • Skrócona składnia właściwości grid-template (272)
  • Siatki niejawne (273)
  • Elementy siatki bez zadeklarowanego miejsca (274)
• Łączenie siatki jawnej z niejawną (274)
  • Postać skrócona (275)
• Kolejność układania elementów siatki (276)
• Składnia w przeglądarce Internet Explorer (278)
• Podsumowanie (279)
• Siatki - wdrożenie w przeglądarkach (279)

18. Tryby mieszania, filtry i maskowanie (281)

• Tryby mieszania (282)
  • Właściwość background-blend-mode (283)
  • Właściwość isolation (286)
• Filtry (288)
  • blur() (288)
  • brightness() i contrast() (289)
  • grayscale(), sepia() i saturate() (289)
  • hue-rotate() (290)
  • opacity() (290)
  • drop-shadow() (291)
  • Wiele funkcji filtrów (291)
  • Filtry w SVG (292)
• Maskowanie (293)
  • Przycięcie (293)
  • Maskowanie obrazu (299)
  • Maskowanie krawędzi (300)
  • Maskowanie w SVG (301)
• Łączenie efektów działania filtrów z maskowaniem (301)
• Podsumowanie (302)
• Tryby mieszania, filtry i maskowanie - wdrożenie w przeglądarkach (303)

19. Przyszłość CSS (305)

• Kształty (305)
• Wykluczenia (307)
• Obszary (309)
• Zmienne (310)
• Zapytania o funkcje (312)
• Obsługa w urządzeniach (313)
• Stałe położenie (314)
• I znacznie, znacznie więcej (315)
• Podsumowanie (315)
• Przyszłość CSS - wdrożenie w przeglądarkach (316)

A. Obsługa CSS3 w obecnie najważniejszych przeglądarkach internetowych (317)

• Zapytania o media (rozdział 2.) (318)
• Selektory (rozdział 3.) (319)
• Selektory DOM i selektory atrybutów (rozdział 4.) (319)
• Internetowe kroje pisma (rozdział 5.) (319)
• Efekty tekstowe i style typograficzne (rozdział 6.) (320)
• Kolumny (rozdział 7.) (320)
• Obrazy tła (rozdział 8.) (321)
• Efekty obramowań i kontenerów (rozdział 9.) (321)
• Kolory i przezroczystość (rozdział 10.) (321)
• Gradienty (rozdział 11.) (322)
• Transformacje dwuwymiarowe (rozdział 12.) (322)
• Transformacje trójwymiarowe (rozdział 13.) (322)
• Przejścia i animacje (rozdział 14.) (322)
• Elastyczny układ elementów (rozdział 15.) (323)
• Wartości i rozmiary (rozdział 16.) (323)
• Siatki (rozdział 17.) (323)
• Tryby mieszania, filtry i maskowanie (rozdział 18.) (324)
• Przyszłość CSS (rozdział 19.) (324)

B. Zasoby w internecie (325)

• Ogólne zasoby dotyczące CSS (325)
• Rozdział 2. "Media Queries - zapytania o media" (326)
• Rozdział 3. "Selektory" i rozdział 4. "Pseudoklasy i pseudoznaczniki" (326)
• Rozdział 5. "Internetowe kroje pisma" i rozdział 6. "Efekty tekstowe i style typograficzne" (326)
• Rozdział 7. "W kilku kolumnach" (327)
• Rozdział 8. "Obrazy tła" i rozdział 9. "Efekty obramowań i kontenerów" (327)
• Rozdział 10. "Kolory i przezroczystość" (327)
• Rozdział 11. "Gradienty" (327)
• Rozdział 12. "Transformacje dwuwymiarowe" i rozdział 13. "Transformacje trójwymiarowe" (328)
• Rozdział 14. "Przejścia i animacje" (328)
• Rozdział 15. "Elastyczny układ elementów" (328)
• Rozdział 16. "Wartości i rozmiary" (328)
• Rozdział 17. "Siatki" (329)
• Rozdział 18. "Tryby mieszania, filtry i maskowanie" (329)
• Rozdział 19. "Przyszłość CSS" (329)

Skorowidz (331)