Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00388 004917 18979049 na godz. na dobę w sumie
CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny. Wydanie IV - książka
CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny. Wydanie IV - książka
Autor: , Liczba stron: 992
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-4083-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook (-35%), audiobook).

CSS służy do opisywania sposobu prezentowania treści internetowych wyświetlanych na ekranach, na potrzeby druku czy syntezatorów mowy. Jest obsługiwany przez wszystkie przeglądarki i urządzenia takie jak smartfony, komputery, gry wideo, telewizory, zegarki, kioski multimedialne czy konsole samochodowe. CSS pozwala zwiększyć wygodę użytkownika, przyspieszyć proces projektowania, uniknąć potencjalnych błędów, a także urozmaicić i ożywić aplikacje. Język ten wciąż się rozwija i od wielu lat stanowi niezbędny element warsztatu każdego profesjonalnego projektanta stron internetowych.

Ta książka to kompleksowy i zaktualizowany przewodnik po implementacji CSS. Zawiera obszerną analizę najnowszych specyfikacji CSS. Przedstawiono tu szereg istotnych zagadnień i wyrafinowanych technik stylizowania stron oraz poprawiania dostępności treści - wykorzystanie tych sposobów pomaga zaoszczędzić czas i wysiłek. Ta publikacja została napisana z myślą o profesjonalnych projektantach stron, niemniej jednak bardzo przyda się osobom, które zaczynają naukę CSS i chcą od razu wykorzystywać jego najlepsze cechy. Znalazł się tu szczegółowy opis wszystkich funkcji CSS powszechnie obsługiwanych przez przeglądarki, włączając w to również te funkcje, które w czasie pisania tej książki były przygotowywane do wprowadzenia.

Wybrane zagadnienia:

CSS. Poznaj i stosuj najnowsze specyfikacje!

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

Darmowy fragment publikacji:

Tytuł oryginału: CSS: The Definitive Guide: Visual Presentation for the Web, 4th Edition Tłumaczenie: Piotr Cieślak ISBN: 978-83-283-4083-1 © 2019 Helion S.A. Authorized Polish translation of the English edition of CSS: The Definitive Guide 4e ISBN 9781449393199 © 2018 Eric Meyer and Estelle Weyl This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. 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 Helion SA 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 Helion SA nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Helion SA 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) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/kasty4.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/kasty4 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ści Przedmowa ................................................................................................................ 19 Krótka historia stylu (w internecie) Elementy Elementy zastępowane oraz niezastępowane Sposoby wyświetlania elementów Łączenie CSS i HTML Znacznik link Element style Dyrektywa @import Odwołania przez HTTP Style wewnętrzne 1. CSS i dokumenty ........................................................................................................27 27 28 29 29 33 33 38 38 39 40 41 41 41 42 42 44 45 45 45 46 46 48 49 52 Zastosowanie Proste zapytania o media Typy mediów Deskryptory mediów Deskryptory cech mediów i typy wartości Zawartość arkusza stylów Znaczniki Struktura reguł Prefiksy przeglądarek Obsługa białych znaków Komentarze CSS Zapytania o media Zapytania o właściwości Podsumowanie 5 Kup książkęPoleć książkę Grupowanie Selektory klas oraz identyfikatorów Selektory klas Wiele klas Selektory identyfikatorów Wybór pomiędzy klasą a identyfikatorem Selektory atrybutów Wykorzystywanie struktury dokumentu Podstawowe reguły tworzenia stylów Selektory elementów Deklaracje oraz słowa kluczowe Grupowanie selektorów Grupowanie deklaracji Grupowanie wszystkiego Nowe elementy w starych przeglądarkach Proste wybieranie atrybutów Wybieranie według dokładnej wartości atrybutu Wybieranie oparte na częściowej wartości atrybutu Identyfikator braku wrażliwości na wielkość znaków 2. Selektory ....................................................................................................................53 53 54 55 57 57 59 60 61 62 62 64 66 66 67 68 69 71 75 76 76 78 81 82 83 84 85 85 97 102 107 108 109 112 115 Selektory pseudoklas Łączenie pseudoklas Pseudoklasy strukturalne Pseudoklasy dynamiczne Pseudoklasy obsługujące stan interfejsu Pseudoklasa :target Pseudoklasa :lang Pseudoklasa negacji Omówienie relacji pomiędzy elementami rodzica i dziecka Selektory kontekstowe Wybieranie elementów dzieci Wybieranie przylegających elementów rodzeństwa Wybieranie następnych elementów rodzeństwa Selektory pseudoelementów Podsumowanie Specyficzność 3. Specyficzność i kaskada ...........................................................................................117 117 119 120 120 121 121 Deklaracje oraz specyficzność Specyficzność selektora uniwersalnego Specyficzność selektorów identyfikatorów oraz atrybutów Specyficzność liniowych stylów wewnętrznych Ważność 6  Spis treści Kup książkęPoleć książkę Dziedziczenie Kaskada Sortowanie według wagi oraz pochodzenia Sortowanie według specyficzności Sortowanie według kolejności Wskazówki prezentacyjne niezwiązane z CSS Podsumowanie 122 125 126 127 127 130 130 Wartości liczbowe i procentowe Wartości całkowite Wartości liczbowe Wartości procentowe Wartości ułamkowe Odległości Wartości obliczeniowe Wartości atrybutów Kolory Słowa kluczowe, łańcuchy znaków i inne wartości tekstowe Słowa kluczowe Łańcuchy znaków Adresy URL Obrazy Identyfikatory 4. Wartości oraz jednostki ...........................................................................................131 131 131 134 135 136 136 137 137 137 138 138 138 138 141 142 147 148 149 149 150 154 157 157 158 159 160 Kolory nazwane Kolory RGB i RGBa Kolory HSL i HSLa Słowa kluczowe dotyczące kolorów Kąty Czas i częstotliwość Położenie Właściwości niestandardowe Bezwzględne jednostki długości Jednostki rozdzielczości Względne jednostki długości Rodziny fontów 5. Fonty ........................................................................................................................ 163 163 164 165 Posługiwanie się rodzinami gatunkowymi Określanie rodziny fontów Spis treści  7 Kup książkęPoleć książkę Zastosowanie deklaracji @font-face Wymagane deskryptory Inne deskryptory fontów Łączenie deskryptorów Grubość znaków Jak działają wagi fontów Pogrubianie Wagi lżejsze Deskryptor font-weight Rozmiar tekstu Rozmiary bezwzględne Rozmiary względne Wartości procentowe a rozmiary Rozmiar tekstu a dziedziczenie Używanie jednostek długości Automatyczne korygowanie wielkości znaków Style znaków Deskryptor font-style Rozciąganie znaków Deskryptor font-stretch Kerning znaków Warianty fontów Wartości ze specyfikacji Level 3 Cechy fontów Deskryptor font-feature-settings Generowanie odmian znaków Właściwość font Uwzględnianie wysokości wiersza Poprawne wykorzystywanie skrótów Wykorzystywanie fontów systemowych Dobieranie fontów Podsumowanie 168 168 173 176 178 179 182 184 184 185 186 188 188 189 192 193 195 197 198 200 201 201 203 204 205 206 207 209 210 210 211 213 Wcięcia oraz wyrównanie w linii Wcięcia tekstu Wyrównywanie tekstu Wyrównywanie ostatniego wiersza 6. Właściwości tekstu .................................................................................................. 215 215 216 218 222 223 223 227 Wyrównywanie elementów liniowych w pionie Wysokość wiersza Wyrównanie tekstu w pionie 8  Spis treści Kup książkęPoleć książkę Odstępy pomiędzy słowami oraz literami Odstępy między słowami Odstępy między literami Odstępy a wyrównanie Transformacja tekstu Dekoracja tekstu Dziwne dekoracje Właściwość text-rendering Cień tekstu Obsługa białych znaków Ustalanie wielkości tabulatorów Zawijanie wierszy i dzielenie słów Zawijanie tekstu Tryby pisania Ustawianie trybów pisania Zmiana orientacji tekstu Określanie kierunku Podsumowanie 232 233 234 235 236 238 239 241 242 244 246 247 252 253 253 256 257 259 Podstawowe pojemniki Krótka powtórka Blok zawierający element Zmiana sposobu wyświetlania elementu 7. Podstawowe formatowanie wizualne ................................................................... 261 261 262 263 264 265 267 268 270 271 272 273 275 276 277 278 279 280 281 283 285 287 287 289 Zamiana ról Elementy blokowe Formatowanie w poziomie Właściwości poziome Wykorzystywanie wartości auto Więcej niż jedna wartość auto Marginesy ujemne Wartości procentowe Elementy zastępowane Formatowanie w pionie Właściwości pionowe Wartości procentowe w pionie Wysokość automatyczna Składanie marginesów w pionie Marginesy ujemne a składanie Pozycje listy Układ wierszy Podstawowe pojęcia i koncepcje Liniowe elementy wewnętrzne Spis treści  9 Kup książkęPoleć książkę Formatowanie wewnętrzne Niezastępowane elementy liniowe Budowanie pojemników Wyrównanie w pionie Zarządzanie wysokością wiersza Skalowanie wysokości wiersza Dodawanie właściwości pojemników Zmiana sposobu łamania wierszy Glify a obszar zawartości elementu Zastępowane elementy liniowe Dodawanie właściwości pojemnika Elementy zastępowane a linia bazowa Elementy liniowo-blokowe Wartości flow Deklaracja display: contents Inne wartości właściwości display Wartości wyliczone Podsumowanie 291 292 292 294 296 298 299 302 303 303 304 306 308 310 311 312 312 313 Podstawowe pojemniki elementów Szerokość oraz wysokość Dopełnienie Replikowanie wartości Dopełnienie jednostronne Dopełnienie a wartości procentowe Dopełnienie a elementy liniowe Dopełnienie elementów zastępowanych 8. Dopełnienie, obramowanie, kontury i marginesy ................................................. 315 315 316 318 320 321 323 325 326 327 328 332 335 337 339 340 341 348 364 364 365 366 367 Obramowanie ze stylem Szerokości obramowania Kolory obramowania Skrótowe właściwości obramowania Obramowanie globalne Obramowanie i elementy liniowe Zaokrąglanie rogów obramowań Obramowania obrazkowe Style konturów Szerokość konturu Kolor konturu Różnice dotyczące konturów Obramowanie Kontury 10  Spis treści Kup książkęPoleć książkę Marginesy Marginesy i wartości długości Marginesy i wartości procentowe Właściwości marginesów jednostronnych Składanie marginesów Marginesy ujemne Marginesy a elementy liniowe Podsumowanie 369 370 371 372 372 374 375 377 Kolory Tło Kolory pierwszego planu Oddziaływanie na obramowanie Oddziaływanie na elementy formularzy Dziedziczenie koloru 9. Kolory, tła i gradienty ..............................................................................................379 379 379 381 382 383 384 384 387 390 394 403 406 415 419 426 429 434 435 448 459 461 465 468 Kolor tła Przycinanie tła Obrazy w tle Położenie tła Zmiana obszaru pozycjonowania tła Powielanie tła (albo brak powielania) Mocowanie Skalowanie obrazów w tle A teraz… wszystko naraz Wiele teł Gradienty Gradienty liniowe Gradienty kołowe Przetwarzanie obrazów gradientów Gradienty cykliczne Cienie pojemników Podsumowanie Pływanie 10. Elementy pływające i kształty ................................................................................469 469 470 472 478 483 484 Elementy pływające Pływanie — szczegóły Rzeczywiste zachowanie Pływanie, zawartość i nakładanie się Właściwość clear Spis treści  11 Kup książkęPoleć książkę Kształty elementów pływających Tworzenie kształtu Kształtowanie na podstawie przezroczystości obrazu Dodawanie marginesu kształtu Podsumowanie 488 488 499 500 502 Wypływanie Właściwości przesunięcia Szerokość oraz wysokość Podstawowe koncepcje Typy pozycjonowania Blok zawierający Ustawianie szerokości oraz wysokości Ograniczanie szerokości oraz wysokości Wypływanie oraz przycinanie zawartości 11. Pozycjonowanie .......................................................................................................503 503 503 504 505 508 508 509 511 511 513 514 514 517 518 520 524 526 530 531 533 537 Bloki zawierające elementy a elementy pozycjonowane bezwzględnie Rozmieszczenie i rozmiar elementów pozycjonowanych bezwzględnie Automatyczne krawędzie Rozmieszczenie oraz rozmiar elementów niezastępowanych Rozmieszczenie oraz rozmiar elementów zastępowanych Rozmieszczenie elementów na osi Z Pozycjonowanie typu fixed Pozycjonowanie względne Pozycjonowanie typu sticky Podsumowanie Widoczność elementu Pozycjonowanie bezwzględne Pojemniki flex Prosty przykład Podstawy modelu flexbox 12. Model Flexible Box ..................................................................................................539 539 541 545 545 549 551 553 559 560 561 561 567 Właściwość flex-direction Inne kierunki pisania Zawijanie linii flex Definiowanie elastycznego układu treści Właściwość flex-wrap — ciąg dalszy Układanie obiektów flex Pojemnik flex Wyrównywanie treści Przykłady działania właściwości justify-content 12  Spis treści Kup książkęPoleć książkę Wyrównywanie obiektów Wyrównanie do początku, do końca i do środka Wyrównanie do linii bazowej Uwagi dodatkowe Właściwość align-self Wyrównywanie treści Wartości space-between, space-around i space-evenly Obiekty flex Czym są obiekty flex? Cechy obiektów flex Szerokości minimalne Właściwości obiektów flex Właściwość flex Właściwość flex-grow Współczynniki wzrostu a właściwość flex Właściwość flex-shrink Proporcjonalne zwężanie obiektów na podstawie ich szerokości oraz współczynnika kurczenia Różne bazy flex Responsywna zmiana wielkości Właściwość flex-basis Słowo kluczowe content Automatyczna baza flex Wartości domyślne Jednostki długości Baza zerowa Skrótowa właściwość flex Typowe wartości właściwości flex Właściwość order Raz jeszcze o nawigacji zakładkowej 568 573 574 575 576 577 581 582 582 584 585 587 587 588 591 594 598 599 601 604 604 606 607 608 612 613 613 618 620 Tworzenie pojemnika siatki Podstawowa terminologia związana z siatkami Rozmieszczanie linii siatki 13. Układ siatkowy ........................................................................................................623 623 626 628 629 633 640 642 646 Tory siatek o stałej szerokości Elastyczne tory siatek Dopasowywanie zawartości torów Powtarzanie linii siatki Obszary siatki Spis treści  13 Kup książkęPoleć książkę Dołączanie obiektów do siatki Zastosowanie linii kolumn i rzędów Skrótowe właściwości rzędów i kolumn Siatka niejawna Obsługa błędów Zastosowanie obszarów Nakładanie się obiektów siatki Przepływ siatki Automatyczne linie siatki Skrótowa właściwość grid Podsiatki Tworzenie odstępów w siatkach Odstępy (przerwy) między torami Obiekty siatki a model pudełkowy Wyrównywanie i siatki Wyrównywanie i justowanie pojedynczych obiektów Wyrównywanie i justowanie wszystkich obiektów Warstwy i kolejność Podsumowanie 652 652 656 659 661 662 665 666 671 673 675 676 676 678 682 683 685 687 690 Formatowanie tabel Tworzenie wyglądu tabeli Wartości wyświetlania tabeli Anonimowe obiekty tabeli Warstwy tabeli Podpisy 14. Układ tabelaryczny .................................................................................................. 691 691 691 693 697 701 702 704 704 707 712 712 718 719 721 Oddzielone obramowanie komórek tabeli Składanie obramowania komórek tabeli Obramowanie komórek tabeli Rozmiar tabeli Szerokość Wysokość Wyrównanie Podsumowanie Listy 15. Listy oraz zawartość generowana ..........................................................................723 723 724 726 729 730 731 Typy list Obrazkowe znaki wypunktowania Pozycja znaku wypunktowania listy Style listy w skrócie Układ listy 14  Spis treści Kup książkęPoleć książkę Zawartość generowana Wstawianie zawartości generowanej Określanie zawartości Liczniki Definiowanie wzorców numerowania Stałe wzorce numerowania Cykliczne wzorce numerowania Symboliczne wzorce numerowania Alfabetyczne wzorce numerowania Liczbowe systemy numerowania Addytywne systemy numerowania Rozszerzanie wzorców numerowania Wymawianie wzorców numeracji Podsumowanie 733 734 736 741 747 749 751 754 757 758 761 763 764 766 Funkcje przekształceń Więcej właściwości przekształceń Układy współrzędnych Przekształcanie 16. Przekształcenia ........................................................................................................ 767 767 771 774 788 788 791 794 797 799 Przesuwanie punktu początkowego Wybieranie stylu 3D Zmiana perspektywy Tylne ścianki Podsumowanie Przejścia CSS Właściwości przejść 17. Przejścia ................................................................................................................... 801 801 802 806 812 814 819 822 824 828 829 832 832 Ograniczanie rodzaju przejść do konkretnych właściwości Ustalanie czasu trwania przejścia Zmiana tempa przejść Opóźnianie przejść Skrótowa właściwość transition Na odwrót: przejście do początku Animowane właściwości i wartości Wyjścia awaryjne: przejścia to tylko ozdobniki Drukowanie przejść Na czym polega interpolacja wartości właściwości? Spis treści  15 Kup książkęPoleć książkę Nadawanie nazwy animacji Selektory klatek kluczowych Animowanie elementów Definiowanie klatek kluczowych Konfigurowanie animacji na klatkach kluczowych Pomijanie wartości from i to Powtarzanie właściwości klatek kluczowych Właściwości dające się animować Nieanimowane właściwości, które nie są ignorowane Zastosowanie skryptów w animacjach @keyframes Nazywanie animacji Definiowanie długości animacji Deklarowanie iteracji animacji Ustalanie kierunku animacji Opóźnianie animacji Zdarzenia związane z animacjami Zmiana wewnętrznego tempa animacji Ustawianie stanu odtwarzania animacji Tryby uzupełniania animacji 18. Animacje ..................................................................................................................835 836 837 837 838 839 840 841 842 842 843 844 846 847 849 850 852 860 871 872 874 877 877 878 878 879 879 880 880 881 881 881 Specyficzność i dyrektywa !important Kolejność animacji Iterowanie animacji i reguła display: none Animacja i wątek UI I wszystko razem… Animacje, specyficzność i kolejność Epilepsja i zaburzenia przedsionkowe Zdarzenia animacji a prefiksy Zdarzenie animationstart Zdarzenie animationend Zdarzenie animationiteration Drukowanie animacji Filtry CSS Filtry podstawowe Filtrowanie kolorów Jasność, kontrast i nasycenie Filtry SVG 19. Filtry, mieszanie, przycinanie i maskowanie ........................................................ 883 883 884 886 887 888 889 890 891 Nakładanie i mieszanie Mieszanie elementów Przyciemnianie, rozjaśnianie, różnica i wykluczanie 16  Spis treści Kup książkęPoleć książkę Mnożenie, ekran i nakładka Ostre i miękkie światło Rozjaśnianie i ściemnianie Barwa, nasycenie, jasność i kolor Mieszanie tła Mieszanie w izolacji Przycinanie i maskowanie Przycinanie Kształty przycinające Pojemniki przycinające Reguły wypełniania kształtów przycinających Maski Definiowanie maski Zmiana trybu działania maski Skalowanie i powtarzanie masek Pozycjonowanie masek Przycinanie i łączenie masek Zbierzmy wszystko w całość… Rodzaje masek Maskowanie w obramowaniach obrazkowych Dopasowywanie i pozycjonowanie obiektu 892 893 894 895 896 899 900 900 902 902 905 906 907 909 911 912 914 917 919 919 920 Definiowanie stylów zależnych od medium Podstawowe zapytania o media Złożone zapytania o media 20. Style zależne od medium.........................................................................................925 925 925 927 934 935 948 Media stronicowe Style wydruków Podsumowanie A Właściwości animowane ........................................................................................949 B Zestawienie właściwości ........................................................................................957 C Tabela odpowiedników kolorów ............................................................................967 Skorowidz ................................................................................................................973 Spis treści  17 Kup książkęPoleć książkę 18  Spis treści Kup książkęPoleć książkę ROZDZIAŁ 17. Przejścia Przejścia CSS umożliwiają animowanie właściwości CSS — czyli płynną zmianę od wartości począt- kowej do nowej wartości docelowej z upływem czasu. Powodują one zmianę jednego stanu elementu na drugi w reakcji na jakąś zmianę — zwykle wynikającą z działania użytkownika, ale także z zapro- gramowanych w skrypcie zmian klas, identyfikatorów albo innego rodzaju stanów. W normalnej sytuacji każda zmiana wartości właściwości CSS — chwila, gdy nastąpi „zdarzenie zmiany stylów” — zachodzi natychmiastowo. Nowa wartość właściwości zastępuje starą w ciągu kilku milise- kund, jakie zajmuje ponowne narysowanie treści, której dotyczy ta zmiana (albo narysowanie i zmiana układu dokumentu, jeśli zajdzie taka konieczność). Większość zmian wartości wydaje się natychmia- stowa, bo ich wyświetlenie trwa poniżej 16 milisekund1. Nawet jeśli zmiana trwa dłużej, wciąż jest to tylko jeden krok — przejście od jednej wartości do drugiej. Na przykład zmiana koloru tła po wska- zaniu danego elementu kursorem myszy jest bezzwłoczna, bez płynnego przejścia między barwami. Przejścia CSS Przejścia (ang. transitions) CSS umożliwiają sterowanie sposobem zmiany jednej wartości właściwości na inną w ciągu określonego czasu. Dzięki temu możemy uzyskać płynną zmianę wartości, dającą przyjemny dla oka i (miejmy nadzieję) nieprzeszkadzający w odbiorze treści efekt. Weźmy nastę- pujący przykład: button { color: magenta; transition: color 200ms ease-in 50ms; } button:hover { color: rebeccapurple; transition: color 200ms ease-out 50ms; } W tym przykładzie, zamiast natychmiastowej zmiany wartości color po wskazaniu przycisku kurso- rem myszy, za pomocą przejść CSS możemy uzyskać płynną zmianę koloru z magenta na rebeccapurple w ciągu 200 milisekund, z trwającym 50 milisekund opóźnieniem przed rozpoczęciem przejścia. 1 Zmiana obrazu w tle, wymagająca zdekodowania tego obrazu i wyświetlenia go, może trwać dłużej niż 16 milisekund. To nie jest jednak kwestia samego przejścia, ale niewielkiej wydajności. 801 Kup książkęPoleć książkę Zmiana koloru, bez względu na to, jak długo albo jak krótko trwa, jest pewną formą przejścia. Jednak dzięki zastosowaniu właściwości CSS o nazwie transition zmiana koloru może nastąpić stopniowo, w ciągu pewnego czasu, a jej płynność będzie łatwo dostrzegalna dla oka. Przejściami CSS możesz się posłużyć już dziś, nawet jeśli wciąż dbasz o użytkowników przeglą- darek IE9 albo starszych. Jeśli jakaś przeglądarka nie obsługuje właściwości przejść CSS, to zmiana po prostu nastąpi w jednej chwili, a nie płynnie, co jest zupełnie akceptowalne. Poza tym do raptownej (a nie płynnej) zmiany dojdzie także wtedy, gdy jakaś właściwość albo pewne jej wartości nie dają się animować. Mamy tu na myśli dowolne właściwości, które dają się animować — czy to za pośred- nictwem przejść, czy też animacji (będących tematem następnego rozdziału, „Animacje”). Podsumowanie informacji na ten temat znajdziesz w dodatku A. Czasami zależy nam na natychmiastowej zmianie jakiejś wartości. Choć w poprzedniej części roz- działu posłużyliśmy się przykładem odwołującym się do kolorów odsyłaczy, to kolory te na ogół zmieniają się w sposób natychmiastowy po wskazaniu odsyłacza kursorem myszy, informując osoby widzące o możliwości interakcji oraz o tym, że wskazany fragment treści jest hiperłączem. Na podob- nej zasadzie opcje na liście umożliwiającej automatyczne uzupełnianie wpisywanej treści nie powinny się pojawiać stopniowo: chodzi raczej o to, by były wyświetlane od razu, zamiast pojawiać się wolniej, niż pisze użytkownik. Z punktu widzenia wygody użytkownika natychmiastowa zmiana wartości często jest najlepsza. Kiedy indziej z kolei może nam zależeć na tym, by zmiana wartości właściwości następowała bar- dziej stopniowo i zwracała uwagę na to, co się dzieje. Możemy na przykład nadać grze w karty pozory większego realizmu, wprowadzając animację odwracania karty trwającą 200 milisekund, bo w przy- padku braku animacji użytkownik może nawet nie zauważyć, co się zmieniło. Zwracaj uwagę na symbol odtwarzania , który informuje o możliwości obejrzenia przykładu online. Wszystkie przykłady opisane w tym rozdziale są dostępne pod adresem https://meyerweb.github.io/csstdg4fi gs/17-transitions/. Weźmy inny przykład: może zależeć Ci na tym, by niektóre rozwijane menu pojawiały się albo rozwi- jały w ciągu 200 milisekund (a nie natychmiast, co może być irytujące). Dzięki przejściom rozwijane pokazane są etapy przejścia polegającego menu mogą się wyświetlać powoli. Na rysunku 17.1 na skalowaniu wysokości jednego z podmenu. Jest to jedno z typowych zastosowań przejść CSS, które omówimy w dalszej części tego rozdziału. Właściwości przejść W CSS przejścia tworzy się za pomocą czterech właściwości przejść: transition-property, transition- -duration, transition-timing-function oraz transition-delay; istnieje też skrótowa właściwość transition obejmująca te cztery właściwości składowe. 802  Rozdział 17. Przejścia Kup książkęPoleć książkę Rysunek 17.1. Przejście — etap początkowy, pośredni i końcowy Do utworzenia rozwijanej nawigacji pokazanej na rysunku 17.1 użyliśmy wszystkich czterech właściwości przejść CSS, a oprócz tego także właściwości niezwiązanych z przejściami, definiujących początkowy i końcowy stan przejścia. Przejście przedstawione na rysunku 17.1 można zdefiniować za pomocą poniższego kodu: nav li ul { transition-property: transform; transition-duration: 200ms; transition-timing-function: ease-in; transition-delay: 50ms; transform: scale(1, 0); transform-origin: top center; } nav li:hover ul { transform: scale(1, 1); } Zauważ, że choć w naszych przykładach przejść używamy stanu :hover jako zdarzenia wyzwalającego zmianę stylów, to przejścia z użyciem właściwości można stosować także w innych sytuacjach. Możesz na przykład dodać albo usunąć klasę bądź w inny sposób zmienić stan elementu — na przykład poprzez zmianę pola formularza z :invalid na :valid albo z :checked na :not(:checked). Możesz też przy użyciu selektorów :nth-last-of-type dodać wiersz do tabeli z naprzemiennie pokolorowa- nymi wierszami („zebra”) albo dołożyć kolejny punkt na końcu jakiejś listy. W scenariuszu pokazanym na rysunku 17.1 początkowy stan zagnieżdżonych list to transform: scale(1, 0) i transform-origin: top center. Stan końcowy to transform: scale(1, 1) — właściwość transform- -origin pozostaje bez zmian. Więcej informacji o właściwościach przekształceń (transform) znajdziesz w rozdziale 16. Właściwości przejść 803  Kup książkęPoleć książkę W tym przykładzie przejście jest zdefiniowane przez właściwość transform: po wskazaniu menu kursorem myszy (:hover) zagnieżdżona, nienumerowana lista skaluje się do pierwotnego, domyślnego rozmiaru — w ciągu 200 milisekund następuje płynne przejście między starą wartością transform: scale(1, 0) a nową wartością transform: scale(1, 1). Przejście rozpoczyna się z 50-mili- sekundowym opóźnieniem i przyspiesza (odpowiada za to funkcja ease-in) — zaczyna się wolno, a potem nabiera tempa. Przejścia są deklarowane oprócz zwykłych stylów dla elementu. Ilekroć zmienia się właściwość, dla której zdefiniowano przejście, przeglądarka zastosuje to przejście, aby zmiana właściwości odbyła się stopniowo. Zauważ, że wszystkie właściwości przejść zostały ustalone dla nieaktywnego stanu elementów ul. Stan aktywny (po wskazaniu kursorem myszy) został użyty tylko w celu zastosowania przekształcenia, a nie samych parametrów przejścia. I nie bez powodu: dzięki temu bowiem menu nie tylko płynnie otworzy się po wskazaniu kursorem, ale też płynnie zamknie, gdy przestaniemy je wskazywać. Wyobraźmy sobie, że właściwości przejścia byłyby zamiast tego stosowane za pośrednictwem stanu :hover, na przykład tak: nav li ul { transform: scale(1, 0); transform-origin: top center; } nav li:hover ul { transition-property: transform; transition-duration: 200ms; transition-timing-function: ease-in; transition-delay: 50ms; transform: scale(1, 1); } Oznaczałoby to, że element, który nie jest wskazany kursorem myszy, będzie miał domyślne właściwo- ści przejść — czyli przejścia będą się odbywały natychmiastowo. Menu z poprzedniego przykładu płynnie otwierałoby się po wskazaniu kursorem myszy, ale po zakończeniu stanu :hover natychmiast by znikało — bo bez stanu :hover właściwości przejść byłyby nieaktywne! Może się okazać, że właśnie na takim efekcie Ci zależy: płynne wysunięcie elementu, a potem raptowne schowanie go. Jeśli tak, to przypisz przejścia do stanu :hover. W przeciwnym razie przypisz je bezpo- średnio do elementu, aby miały one zastosowanie zarówno przy rozpoczęciu, jak i przy kończeniu wskazywania elementu kursorem myszy. Zakończenie danego stanu powoduje odwrócenie kierunku przejścia. To domyślne zachowanie możesz zmienić, deklarując różne rodzaje przejść dla stanu po- czątkowego i stanu zmienionego. Przez „stan początkowy” rozumiemy stan elementu po załadowaniu strony. Może to być stan, który jest dla danego elementu trwały — na przykład określony przez właściwości zdefiniowane za pośred- nictwem zwykłego selektora elementu, a nie za pośrednictwem selektora :hover dla tego elementu. Może to także być element o edytowalnej treści, który zyskuje stan :focus, jak w następującym przykładzie: /* selektor, który zawsze pasuje do danych elementów */ p[contenteditable] { background-color: rgba(0, 0, 0, 0); } 804  Rozdział 17. Przejścia Kup książkęPoleć książkę /* selektor, który pasuje do danych elementów tylko czasami */ p[contenteditable]:focus { /* zastępowanie deklaracji */ background-color: rgba(0, 0, 0, 0.1); } W tym przykładzie stanem początkowym elementu jest całkowicie przezroczyste tło, które zmienia się tylko wtedy, gdy użytkownik uaktywni (stan :focus) ten element. Właśnie to mamy na myśli, mówiąc w tym rozdziale o stanie początkowym albo domyślnym elementu. Właściwości przejścia podane w selektorze, który pasuje do elementu przez cały czas, będą miały wpływ na ten element przy każdej zmianie jego stanu — na przykład zmianie ze stanu początkowego na docelowy (w poprzednim przykładzie docelowym był stan :focus). Stan początkowy może też mieć charakter przejściowy — na przykład :checked dla pola wyboru albo :valid dla kontrolki formularza. Może to być nawet klasa, którą da się włączać i wyłączać. /* selektor, który pasuje do danych elementów tylko czasami */ input:valid { border-color: green; } /* selektor, który pasuje do danych elementów tylko czasami, a konkretnie wtedy, gdy poprzedni selektor NIE pasuje */ input:invalid { border-color: red; } /* selektor, który pasuje do danych elementów tylko czasami, w zależności od prawidłowości danych */ input:focus { /* alternatywna deklaracja */ border-color: yellow; } W podanym przykładzie do dowolnego elementu może pasować albo selektor :valid, albo :invalid, ale nie oba naraz. Selektor :focus, zgodnie z tym, co zostało pokazane na rysunku 17.2, wybiera element wtedy, gdy pole wprowadzania danych jest aktywne, bez względu na to, czy pole to jest też jednocześnie wybrane przez selektory :valid albo :invalid. Rysunek 17.2. Wygląd pola wprowadzania danych w różnych stanach — dane prawidłowe, dane nieprawidłowe, pole aktywne W takim przypadku, jeśli odwołujemy się do stanu początkowego, mamy na myśli wartość początkową, którą może być zarówno :valid, jak i :invalid. Zmieniony stan danego elementu jest przeciwieństwem początkowego stanu :valid lub :invalid. Właściwości przejść 805  Kup książkęPoleć książkę Należy pamiętać, że da się zastosować różne wartości przejść dla stanu początkowego i zmienionego, zawsze jednak należy zadbać o wprowadzenie wartości związanej z wejściem w dany stan. Weźmy na przykład poniższy kod, w którym przejścia zostały skonfigurowane tak, by menu otwierały się przez 2 sekundy, ale zamykały już po 200 milisekundach. nav li ul { transition-property: transform; transition-duration: 200ms; transition-timing-function: ease-in; transition-delay: 50ms; transform: scale(1, 0); transform-origin: top center; } nav li:hover ul { transition-property: transform; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; transform: scale(1, 1); } Z perspektywy funkcjonalności efekt jest straszny, ale dobrze ilustruje omawianą ideę. Po wskaza- niu menu kursorem myszy proces otwierania się tego menu zajmuje bite 2 sekundy. Zamykanie przebiega znacznie szybciej, bo w 0,2 sekundy. Właściwości przejścia w zmienionym stanie (:hover) dochodzą do głosu wtedy, gdy wskazujemy pozycję listy kursorem myszy. Wtedy zaczyna działać reguła transition-duration: 2s, zdefiniowana dla stanu :hover. Po odsunięciu kursora menu wraca do domyślnego, zwiniętego stanu i wykorzystywane są właściwości przejścia zdefiniowane dla stanu początkowego (opisanego regułą nav li ul), które powodują trwające 200 milisekund zamknięcie menu. Przyjrzyjmy się nieco bliżej temu przykładowi, zwłaszcza domyślnym stylom przejść. Kiedy użytkow- nik przestaje wskazywać kursorem myszy nadrzędny element głównej nawigacji albo element potomny w postaci rozwijanego menu, następuje 50-milisekundowa pauza, poprzedzająca trwające 200 milise- kund przejście, które zamyka menu. Akurat ten aspekt funkcjonalności menu jest wygodny, bo daje użytkownikowi szansę (choć krótką) na przesunięcie kursora z powrotem nad menu, zanim za- cznie się ono zamykać. Choć każdą z czterech właściwości przejść można zadeklarować osobno, to zapewne zawsze będziesz się posługiwał skrótem. Najpierw przyjrzymy się czterem właściwościom składowym, abyś mógł lepiej zrozumieć działanie każdej z nich. Ograniczanie rodzaju przejść do konkretnych właściwości Właściwość transition-property pozwala określić nazwy właściwości CSS, które chcesz poddać dzia- łaniu przejść. Umożliwia to ograniczenie rodzaju przejść do konkretnych właściwości, podczas gdy inne będą się zmieniały w sposób natychmiastowy. (I owszem, w dalszej części rozdziału słowo „właściwości” będzie się pojawiało bardzo wiele razy). 806  Rozdział 17. Przejścia Kup książkęPoleć książkę transition-property Wartości: Wartość początkowa: Stosuje się do: Wartość wyliczona: Dziedziczona: Animowana: none | [ all | property-name ]# all Wszystkich elementów oraz pseudoelementów :before i :after Jak określono Nie Nie Właściwość transition-property przyjmuje wartości w postaci listy rozdzielonych przecinkami właściwości, słowa kluczowego none (jeśli nie chcesz dopuścić do przejść jakichkolwiek właściwości) albo domyślnego słowa all (które oznacza: „dopuść przejścia wszystkich animowanych właściwości”). Słowo all może też wystąpić na liście oprócz właściwości rozdzielonych przecinkami. Jeśli podasz all jako jedyne słowo kluczowe — albo pozwolisz, by właściwość transition-property domyślnie przyjęła wartość all — wszystkie animowane właściwości zostaną poddane równocze- snemu przejściu. Powiedzmy, że chcesz zmienić wygląd jakiegoś pojemnika po wskazaniu go kur- sorem myszy: div { color: #ff0000; border: 1px solid #00ff00; border-radius: 0; transform: scale(1) rotate(0deg); opacity: 1; box-shadow: 3px 3px rgba(0, 0, 0, 0.1); width: 50px; padding: 100px; } div:hover { color: #000000; border: 5px dashed #000000; border-radius: 50 ; transform: scale(2) rotate(-10deg); opacity: 0.5; box-shadow: -3px -3px rgba(255, 0, 0, 0.5); width: 100px; padding: 20px; } Po wskazaniu kursorem elementu div wszystkie właściwości, które mają inne wartości w stanie po- czątkowym niż w stanie :hover (zmienionym), ulegną zmianie i przyjmą wartości zgodne ze stanem :hover. Właściwość transition-property służy do określania, które z tych właściwości będą płynnie animowane przez pewien czas (zamiast raptownie się zmienić). Po wskazaniu elementu kurso- rem myszy wszystkie właściwości zmienią się z wartości domyślnych na wartości :hover, ale tylko animowane właściwości zadeklarowane we właściwości transition-property zmienią się w sposób płynny, w ciągu całego czasu trwania przejścia. Niedające się animować właściwości, takie jak border-style, zmienią swoją wartość w sposób natychmiastowy. Właściwości przejść 807  Kup książkęPoleć książkę Jeśli jedyną (albo ostatnią na liście wartości rozdzielonych przecinkami) wartością właściwości transition-property jest all, to wszystkie animowane właściwości dokonają równoczesnego przej- ścia. Aby uzyskać inny efekt, należy podać rozdzieloną przecinkami listę właściwości, które mają podlegać wpływowi przejść. Jeśli więc chcemy dopuścić do efektu przejścia dla wszystkich właściwości, to poniższe deklaracje będą niemal równoważne: div { color: #ff0000; border: 1px solid #00ff00; border-radius: 0; transform: scale(1) rotate(0deg); opacity: 1; box-shadow: 3px 3px rgba(0, 0, 0, 0.1); width: 50px; padding: 100px; transition-property: color, border, border-radius, transform, opacity, box-shadow, width, padding; transition-duration: 1s; } div { color: #ff0000; border: 1px solid #00ff00; border-radius: 0; transform: scale(1) rotate(0deg); opacity: 1; box-shadow: 3px 3px rgba(0, 0, 0, 0.1); width: 50px; padding: 100px; transition-property: all; transition-duration: 1s; } Obie powyższe deklaracje transition-property zezwalają na animowane przejścia we wszystkich wymienionych właściwościach, ale dla pierwszej deklaracji oznacza to tylko osiem właściwości. Należy pamiętać, że reguły dla tych właściwości mogą też występować w innych blokach reguł. Innymi słowy, akurat w tym przypadku wszystkie osiem animowanych właściwości zostało wymienionych w tym samym bloku, w którym znajduje się deklaracja transition-property, ale nie musi tak być. Deklaracja transition-property: all w drugim bloku reguł gwarantuje, że wszystkie animowane właściwości zmienią swoją wartość w przypadku zajścia zdarzenia, które wywoła zmianę stylu — bez względu na to, w którym bloku reguł CSS wystąpi właściwość o zmienionej wartości — i zmiana ta będzie trwała dokładnie sekundę. Przejście będzie miało zastosowanie do wszystkich animowanych właściwości wszystkich elementów pasujących do selektora, a nie tylko tych właściwości, które zostały zadeklarowane w tym samym bloku stylów, w którym użyto słowa kluczowego all. W omawianym przypadku pierwsza wersja deklaracji ogranicza rodzaj przejść do ośmiu wymienio- nych właściwości, ale daje nieco większą kontrolę nad tym, jak te przejścia będą w ich przypadku wyglądały. Zadeklarowanie osobnych właściwości pozwala na określenie różnych prędkości, opóźnień i (lub) czasów trwania przejścia dla każdej z nich, jeśli także właściwości poszczególnych przejść zdefiniujemy osobno: 808  Rozdział 17. Przejścia Kup książkęPoleć książkę div { color: #ff0000; border: 1px solid #0f0; border-radius: 0; transform: scale(1) rotate(0deg); opacity: 1; box-shadow: 3px 3px rgba(0, 0, 0, 0.1); width: 50px; padding: 100px; } .foo { color: #00ff00; transition-property: color, border, border-radius, transform, opacity, box-shadow, width, padding; transition-duration: 1s; } div class= foo Hello /div Jeśli chcesz zdefiniować przejścia dla każdej właściwości osobno, wymień je wszystkie i rozdziel poszczególne właściwości przecinkiem. Jeżeli chcesz zastosować animację niemal wszystkich właści- wości (powiedzmy, z kilkoma wyjątkami), która nastąpi jednocześnie, z takim samym opóźnieniem i w tym samym tempie, to możesz użyć kombinacji słowa kluczowego all oraz nazw tych właściwości, które mają być animowane w innym czasie czy z inną prędkością. Pamiętaj, aby wówczas podać all jako pierwszą wartość: div { color: #f00; border: 1px solid #00ff00; border-radius: 0; transform: scale(1) rotate(0deg); opacity: 1; box-shadow: 3px 3px rgba(0, 0, 0, 0.1); width: 50px; padding: 100px; transition-property: all, border-radius, opacity; transition-duration: 1s, 2s, 3s; } Słowo kluczowe all występujące na liście właściwości rozdzielonych przecinkami obejmuje wszystkie właściwości podane w powyższym przykładzie, w tym także odziedziczone właściwości CSS oraz wszystkie właściwości zdefiniowane w dowolnym innym bloku reguł CSS, który pasuje do danego elementu bądź jest przez ten element dziedziczony. W poprzednim przykładzie wszystkie właściwości, którym nadane zostaną nowe wartości, zostaną poddane przejściu o takim samym czasie trwania, opóźnieniu i tempie — z wyjątkiem właściwości border-radius oraz opacity, które w sposób jawny wymieniliśmy osobno. Ponieważ umieściliśmy je na rozdzielonej przecinkami liście wartości, po wartości all, możemy albo poddać je przejściu jednocześnie, z tym samym opóźnieniem i tempem, albo podać dla nich dwóch inne wartości czasu, opóźnień i tempa. W tym konkretnym przypadku wszystkie właściwości będą trwały 1 sekundę, oprócz właściwości border-radius i opacity, których przejście będzie trwało, odpowiednio, 2 i 3 sekundy. (Właściwość transition-duration została omówiona w dalszej części tego rozdziału). Właściwości przejść 809  Kup książkęPoleć książkę Pamiętaj o wymienieniu słowa kluczowego all na początku listy wartości rozdzielonej przecinkami, bo właściwości zadeklarowane przed słowem all będą podlegały tym samym regułom co all. W rezultacie parametry przejść tych właściwości, które zamierzałeś podać osobno, zostaną nadpisane parametrami dotyczącymi zbioru właściwości opisanego słowem kluczowym all. Wyłączanie przejść poprzez ograniczanie puli właściwości Choć przejścia inne niż natychmiastowe są domyślnie wyłączone, to jeśli zdefiniujesz jakieś przejście CSS i będziesz chciał je wyłączyć w jakiejś konkretnej sytuacji, możesz w tym celu użyć deklaracji transition-property: none. Dzięki temu zyskasz gwarancję wyłączenia przejść dla wszystkich właściwości. Słowo kluczowe none może być użyte tylko jako pojedyncza wartość tej właściwości — nie może być jedną z rozdzielonych przecinkami wartości na liście. Jeśli chcesz wyłączyć przejścia dla pewnego ograniczonego zbioru właściwości, musisz postąpić niejako na odwrót i wymienić wszystkie właści- wości, których przejścia nadal chcesz zostawić włączone. Właściwości transition-property nie da się użyć do wykluczania właściwości; służy ona raczej do uwzględniania ich. Inna metoda polega na ustawieniu dla danej właściwości opóźnienia i czasu trwania przejścia na 0s. Dzięki temu zmiany wartości właściwości będą zachodzić natychmia- stowo, tak jakby nie było dla nich zdefiniowanego przejścia. Zdarzenia związane z przejściami W modelu DOM na końcu każdego przejścia — w obu kierunkach i dla każdej właściwości, która podlega przejściu w ciągu dowolnej ilości czasu albo po dowolnym opóźnieniu — wyzwalane jest zdarzenie transitionend. Dzieje się tak bez względu na to, czy dana właściwość została zadeklarowana osobno, czy stanowi część deklaracji związanej ze słowem kluczowym all. W przypadku niektórych na pozór pojedynczych deklaracji właściwości może zajść kilka zdarzeń transitionend, bo każda animowana składowa w ramach właściwości skrótowej wywoła własne zdarzenie tego typu. Roz- ważmy następujący przykład: div { color: #f00; border: 1px solid #00ff00; border-radius: 0; transform: scale(1) rotate(0deg); opacity: 1; box-shadow: 3px 3px rgba(0, 0, 0, 0.1); width: 50px; padding: 100px; transition-property: all, border-radius, opacity; transition-duration: 1s, 2s, 3s; } Po zakończeniu przejść dojdzie do co najmniej ośmiu zdarzeń transitionend. Na przykład przejście samej tylko właściwości border-radius generuje cztery zdarzenia transitionend, po jednym dla: 810  Rozdział 17. Przejścia Kup książkęPoleć książkę  border-bottom-left-radius,  border-bottom-right-radius,  border-top-right-radius,  border-top-left-radius. Właściwość padding też jest wszak skrótem dla czterech pełnych właściwości:  padding-top,  padding-right,  padding-bottom,  padding-left. Skrótowa właściwość border generuje osiem zdarzeń transitionend: czterokrotnie dla czterech właściwości odpowiadających skrótowi border-width i czterokrotnie dla właściwości reprezentowa- nych przez border-color:  border-left-width,  border-right-width,  border-top-width,  border-bottom-width,  border-top-color,  border-left-color,  border-right-color,  border-bottom-color. Zdarzenia transitionend nie zajdą jednak dla właściwości border-style, bo nie jest ona właściwością animowaną. Skąd wiemy, że właściwość border-style nie jest animowana? Możemy tak założyć, bo nie ma sen- sownego punktu pośredniego między jej dwiema wartościami, takimi jak solid i dashed. Możemy to sprawdzić na liście animowanych właściwości w dodatku A albo w specyfikacji każdej z nich z osobna. W naszym scenariuszu z wymienionymi ośmioma konkretnymi właściwościami zajdzie 21 zdarzeń transitionend, bo wśród tych ośmiu są właściwości skrótowe, które mają różne wartości w stanach przed przejściem i po nim. W przypadku słowa kluczowego all będziemy mieli do czynienia z co najmniej 21 zdarzeniami transitionend: po jednym dla każdej ze składowych 8 właściwości, które mają zdefiniowane stany „przed i po” oraz potencjalnie inne, wynikające z dziedziczenia albo deklaracji właściwości w innych blokach stylów mających wpływ na animowany element. Zdarzeń transitionend można nasłuchiwać w następujący sposób: document.querySelector( div ).addEventListener( transitionend , function (e) { console.log(e.propertyName); }); Właściwości przejść 811  Kup książkęPoleć książkę Zdarzenie transitionend zawiera trzy atrybuty, które to zdarzenie opisują: 1. propertyName — jest to nazwa właściwości CSS, której przejście właśnie się zakończyło. 2. pseudoElement — jest to poprzedzony dwoma dwukropkami pseudoelement, którego dotyczyło przejście. Może to być pusty łańcuch znaków, jeśli przejście dotyczyło zwykłego węzła DOM. 3. elapsedTime — jest to ilość czasu, jaką zajęło przejście (w sekundach). Zwykle jest to czas podany jako wartość właściwości transition-duration. Zdarzenie transitionend zachodzi tylko wtedy, gdy zmiana wartości właściwości w ramach przejścia zakończy się powodzeniem. Zdarzenie transitionend nie zachodzi, jeśli przejście zostało przerwane — na przykład przez kolejną zmianę tej samej właściwości tego samego elementu. Przywrócenie wartości początkowej właściwości powoduje zajście kolejnego zdarzenia transitionend. To drugie zdarzenie zachodzi zawsze, jeśli tylko przejście się rozpocznie — nawet jeśli nie zostanie ono dokończone w pierwotnym kierunku. Ustalanie czasu trwania przejścia Właściwość transition-duration przyjmuje wartość w postaci rozdzielonej przecinkami listy wartości określających interwały czasowe, w sekundach (s) albo w milisekundach (ms). Wartości te opisują czas trwania przejścia z jednego stanu do drugiego. transition-duration Wartości: Wartość początkowa: Stosuje się do: Wartość wyliczona: Dziedziczona: Animowana: time # 0s Wszystkich elementów oraz pseudoelementów :before i :after Jak określono Nie Nie Jeśli mamy do czynienia z przejściem w tę i z powrotem między dwoma stanami, a w deklaracji zo- stał podany czas trwania dotyczący tylko jednego z tych stanów, to ów czas będzie rzutował tylko na przejście do tego stanu. Rozważmy: input:invalid { transition-duration: 1s; background-color: red; } input:valid { transition-duration: 0.2s; background-color: green; } Jeśli dla właściwości transition-duration zadeklarowane zostaną różne wartości, to czas trwania danego przejścia będzie odpowiadał wartości transition-duration zadeklarowanej w bloku reguł opisującym docelowe właściwości tego przejścia. W poprzednim przykładzie zmiana koloru tła pola 812  Rozdział 17. Przejścia Kup książkęPoleć książkę wprowadzania danych na czerwone, jeśli w polu tym zostanie wprowadzona nieprawidłowa wartość, potrwa 1 sekundę. Przejście do zielonego tła po wprowadzeniu prawidłowej wartości będzie zaś trwało tylko 200 milisekund. Właściwość transition-duration przyjmuje wartości dodatnie w sekundach (s) albo w milisekun- dach (ms). Jednostka czasu — ms albo s — jest wymagana w specyfikacji nawet w przypadku czasu ustawionego na 0s. Domyślnie zmiana właściwości z jednej wartości na drugą zachodzi błyskawicznie, bez widocznej animacji — właśnie dlatego domyślna wartość czasu trwania przejścia wynosi 0s. Jeśli pominie się deklarację właściwości transition-duration, to (chyba że właściwość transition- -delay ma wartość dodatnią) efekt jest taki, jakby właściwość transition-property też nie została zadeklarowana — nie zachodzi wtedy także zdarzenie transitionend. Dopóki łączny czas przejścia jest większy niż zero sekund (czas zerowy może wynikać z jawnej deklaracji 0s albo z pominięcia właści- wości transition-duration, co skutkuje nadaniem jej domyślnej wartości 0s), przejście nastąpi, a po jego zakończeniu zajdzie zdarzenie transitionend. Ujemne wartości właściwości transition-duration są nieprawidłowe, a jeśli wartość taka zostanie podana, unieważni całą deklarację właściwości. Korzystając z tej samej co wcześniej, bardzo długiej formy deklaracji transition-property, możemy określić wspólny czas trwania dla wszystkich właściwości bądź osobne czasy trwania dla każdej z nich. Możemy też zadecydować, by na przykład co druga z podanych na liście właściwości była animowana przez taki sam czas. Jeśli chcemy zadeklarować pojedynczy czas trwania dla wszystkich właściwości biorących udział w przejściu, wystarczy, że podamy jedną wartość transition-duration: div { color: #ff0000; ... transition-property: color, border, border-radius, transform, opacity, box-shadow, width, padding; transition-duration: 200ms; } Dla właściwości transition-duration możemy też podać tyle samo rozdzielonych przecinkami wartości czasu, ile właściwości CSS zostało wymienionych w charakterze wartości właściwości transition-property. Jeśli chcemy, aby przejście dla każdej z zadeklarowanych właściwości zajmo- wało różny czas, musimy dla każdej z osobna podać wartość czasu na liście: div { color: #ff0000; ... transition-property: color, border, border-radius, transform, opacity, box-shadow, width, padding; transition-duration: 200ms, 180ms, 160ms, 140ms, 120ms, 100ms, 1s, 2s; } Jeśli liczba zadeklarowanych właściwości jest inna niż liczba zadeklarowanych czasów trwania, przeglądarka radzi sobie z tą różnicą, kierując się ściśle określonymi zasadami. Otóż jeżeli czasów trwania jest więcej niż właściwości, zbędne czasy trwania są ignorowane. Jeśli z kolei właściwości jest więcej niż czasów, wartości czasów są powtarzane od początku. W poniższym przykładzie przejścia właściwości color, border-radius, opacity i width będą trwały po 100 milisekund, zaś przejścia właściwości border, transform, box-shadow i padding będą trwały po 200 milisekund. Właściwości przejść 813  Kup książkęPoleć książkę div { ... transition-property: color, border, border-radius, transform, opacity, box-shadow, width, padding; transition-duration: 100ms, 200ms; } Jeśli zadeklarujemy dwa czasy trwania oddzielone przecinkiem, każda nieparzysta właściwość będzie animowana zgodnie z pierwszą podaną wartością czasu, a każda parzysta zgodnie z drugą. Należy pamiętać o wygodzie obsługi. Jeśli przejście jest zbyt wolne, strona internetowa będzie spra- wiała wrażenie ociężałej albo reagującej z opóźnieniem i skupi uwagę użytkownika na czymś, co powinno być jedynie subtelnym efektem. Jeśli z kolei przejście jest za szybkie, może być trudne do do- strzeżenia. Choć da się podać dowolną dodatnią wartość czasu trwania przejść, to Twoim celem powinno być raczej uatrakcyjnienie odbioru strony, a nie poirytowanie użytkownika. Efekty powinny trwać wystarczająco długo, by dało się je zauważyć, ale nie aż tak długo, by przyciągały uwagę. Na ogół najlepsze rezultaty dają czasy rzędu 100 – 200 milisekund, które przekładają się na przejścia zauważalne, ale nie dekoncentrujące. W przypadku naszego rozwijanego menu też zależy nam na wygodzie użytkownika, czas przejścia obu animowanych właściwości ustaliliśmy więc na 200 milisekund. nav li ul { transition-property: transform, opacity; transition-duration: 200ms; ... } Zmiana tempa przejść Chciałbyś, aby przejście zaczynało się wolno i przyspieszało, zaczynało się szybko i zwalniało, odby- wało się w jednostajnym tempie, polegało na zmianach skokowych, a może nawet ulegało „spręży- stemu” wytłumianiu? Nie ma problemu — do sterowania tempem przejścia służy właściwość transition-timing-function. transition-timing-function Wartości: Wartość początkowa: Stosuje się do: Wartość wyliczona: Dziedziczona: Animowana: timing-function # Ease Wszystkich elementów oraz pseudoelementów :before i :after Jak określono Nie Nie Właściwość transition-timing-function przyjmuje następujące wartości: ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(n, start) — gdzie n jest liczbą kroków — steps(n, end) oraz cubic-bezier(x1, y1, x2, y2). (Wartości te są też przyjmowane przez właści- wość animation-timing-function i zostały bardziej szczegółowo omówione w rozdziale 18.). 814  Rozdział 17. Przejścia Kup książkęPoleć książkę Słowa kluczowe inne niż step- są funkcjami płynnej zmiany prędkości, służącymi jako wygodne zamienniki konkretnych funkcji Béziera drugiego stopnia, których wykresy mają postać łagodnych krzywych. Specyfikacja obejmuje definicje pięciu takich funkcji, zebranych w tabeli 17.1. Tabela 17.1. Słowa kluczowe odpowiadające zmianom prędkości opisanym krzywymi Béziera Funkcja czasu Opis Odpowiednik w postaci cubic-bezier cubic-bezier() ease linear ease-in ease-out ease-in-out Określa krzywą Béziera drugiego stopnia. Przejście zaczyna się wolno, następnie przyspiesza, potem spowalnia i kończy się bardzo wolno. Przejście przez cały czas odbywa się w tym samym tempie. Przejście zaczyna się wolno, potem przyspiesza. Przejście zaczyna się szybko, potem zwalnia. Podobnie jak ease — przejście jest szybsze w połowie, zaczyna się wolno, ale kończy się nie aż tak wolno jak ease. cubic-bezier(x1, y1, x2, y2) cubic-bezier(0.25, 0.1, 0.25, 1) cubic-bezier(0, 0, 1, 1) cubic-bezier(0.42, 0, 1, 1) cubic-bezier(0, 0, 0.58, 1) cubic-bezier(0.42, 0, 0.58, 1) Krzywe Béziera, także te, które odpowiadają za pięć predefiniowanych funkcji regulacji tempa zebra- nych w tabeli 17.1 i przedstawionych na wykresach na rysunku 17.3, przyjmują cztery parametry liczbowe. Na przykład wartość linear odpowiada wyrażeniu cubic-bezier(0, 0, 1, 1). Pierwszy i trzeci parametr funkcji Béziera muszą się zawierać w przedziale od 0 do +1. Rysunek 17.3. Krzywe odpowiadające predefiniowanym funkcjom Béziera Cztery parametry funkcji cubic-bezier() definiują współrzędne x oraz y dwóch uchwytów na diagra- mie funkcji. Uchwyty te są powiązane z końcami wykresu krzywej, który rozciąga się od lewego dol- nego do prawego górnego rogu diagramu. Krzywe są konstruowane na podstawie tych dwóch rogów oraz współrzędnych uchwytów z wykorzystaniem funkcji Béziera. Aby się przekonać, na czym to polega, przyjrzyj się krzywym oraz odpowiadającym im wartościom, pokazanym na rysunku 17.4. Rozważmy pierwszy przykład. Dwie pierwsze wartości, odpowiadające parametrom x1 i y1, to 0.5 oraz 1. Położenie pierwszego uchwytu wyznaczamy, idąc najpierw do połowy diagramu (x1 = 0,5), a potem na samą górę (y1 = 1). Na tej samej zasadzie współrzędne 0.5, 0 dla parametrów x2, y2 wyznaczają położenie drugiego uchwytu — na dole diagramu, pośrodku. Pokazana krzywa wynika z położenia obu uchwytów. Właściwości przejść 815  Kup książkęPoleć książkę Rysunek 17.4. Cztery krzywe Béziera oraz wartości funkcji cubic-bezier() (na podstawie http://cubic-bezier.com) Na drugim przykładzie współrzędne uchwytów zostały zamienione miejscami, co poskutkowało zmianą przebiegu krzywej. Na tej samej zasadzie zmienione zostały przykłady trzeci i czwarty, które są niejako swoimi przeciwieństwami. Zwróć uwagę na zmianę w kształcie otrzymanej krzywej, wyni- kającą z zamiany położenia uchwytów. Predefiniowane słowa kluczowe mają dość ograniczone możliwości. Jeśli chciałbyś uzyskać efekty lepiej odzwierciedlające prawidła animacji, to zamiast predefiniowanych słów być może powinieneś użyć funkcji Béziera drugiego stopnia opisanych czterema parametrami w postaci liczb rzeczywistych. Jeśli masz algebrę w małym palcu albo ogromne doświadczenie w obsłudze programów takich jak FreeHand czy Illustrator, to być może bez trudu umiesz sobie wyobrazić potrzebne krzywe; w prze- ciwnym razie skorzystaj z narzędzi online umożliwiających eksperymentowanie z różnymi wartościa- mi (na przykład http://cubic-bezier.com). Pozwalają one na porównywanie różnych krzywych — zarówno tych odpowiadających predefiniowanym słowom kluczowym, jak i samodzielnie zdefiniowa- nych funkcji Béziera. Na rysunku 17.5 zostały pokazane różne inne przebiegi funkcji Béziera, dostępne na stronie http://easings.net. Umożliwiają one uzyskanie bardziej realistycznych i estetycznych animacji. Rysunek 17.5. Przydatne funkcje Béziera opracowane przez innych autorów (ze strony http://easings.net) 816  Rozdział 17. Przejścia Kup książkęPoleć książkę Choć autorzy wspomnianej strony nazwali opracowane przez siebie rodzaje animacji, ich nazwy nie wchodzą w skład specyfikacji CSS. Należy je zapisać następująco: Nieoficjalna nazwa Parametry funkcji Béziera drugiego stopnia easeInSine easeOutSine easeInOutSine easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInExpo easeOutExpo easeInOutExpo easeInCirc easeOutCirc easeInOutCirc easeInBack easeOutBack easeInOutBack Tempo krokowe cubic-bezier(0.47, 0, 0.745, 0.715) cubic-bezier(0.39, 0.575, 0.565, 1) cubic-bezier(0.445, 0.05, 0.55, 0.95) cubic-bezier(0.55, 0.085, 0.68, 0.53) cubic-bezier(0.25, 0.46, 0.45, 0.94) cubic-bezier(0.455, 0.03, 0.515, 0.955) cubic-bezier(0.55, 0.055, 0.675, 0.19) cubic-bezier(0.215, 0.61, 0.355, 1) cubic-bezier(0.645, 0.045, 0.355, 1) cubic-bezier(0.895, 0.03, 0.685, 0.22) cubic-bezier(0.165, 0.84, 0.44, 1) cubic-bezier(0.77, 0, 0.175, 1) cubic-bezier(0.755, 0.05, 0.855, 0.06) cubic-bezier(0.23, 1, 0.32, 1) cubic-bezier(0.86, 0, 0.07, 1) cubic-bezier(0.95, 0.05, 0.795, 0.035) cubic-bezier(0.19, 1, 0.22, 1) cubic-bezier(1, 0, 0, 1) cubic-bezier(0.6, 0.04, 0.98, 0.335) cubic-bezier(0.075, 0.82, 0.165, 1) cubic-bezier(0.785, 0.135, 0.15, 0.86) cubic-bezier(0.6, -0.28, 0.735, 0.045) cubic-bezier(0.175, 0.885, 0.32, 1.275) cubic-bezier(0.68, -0.55, 0.265, 1.55) Dostępne są też funkcje umożliwiające zdefiniowanie tempa krokowego, a także dwa predefiniowane rodzaje takiego przejścia: Funkcja tempa Definicja step-start step-end steps(n, start) steps(n, end) Przez cały czas przejścia wyświetlany jest ostatni krok animacji. Równoważne steps(1, start). Przez cały czas przejścia wyświetlany jest ostatni krok animacji. Równoważne steps(1, end). Wyświetlanych jest n pojedynczych kroków, przy czym pierwszy krok pojawia się w chwili odpowiadającej n/100 procent całkowitego czasu przejścia. Wyświetlanych jest n pojedynczych kroków, przy czym wartości początkowe tych kroków są widoczne przez n/100 procent całkowitego czasu przejścia. Właściwości przejść 817  Kup książkęPoleć książkę Jak wynika z rysunku 17.6, funkcje krokowe przedstawiają przejście od wartości początkowej do war- tości końcowej w sekwencji kroków, a nie na podstawie płynnej krzywej. Rysunek 17.6. Funkcje opisujące tempo krokowe Funkcje opisujące tempo krokowe umożliwiają podzielenie przejścia na równe kroki. Funkcje te defi- niują liczbę i kierunek kroków. Są dwie opcje kierunku: start i end. W przypadku opcji start pierwszy krok odpowiada samemu początkowi animacji. W przypadku opcji end ostatni krok odpo- wiada samemu końcowi animacji. Na przykład wyrażenie steps(5, end) spowodowałoby wyświetle- nie następujących równych kroków przejścia: 0 , 20 , 40 , 60 i 80 . Z kolei wyrażenie steps (5, start) spowodowałoby wyświetlenie następujących równych kroków: 20 , 40 , 60 , 80 i 100 . Funkcja step-start jest odpowiednikiem wyrażenia steps(1, start). W przypadku jej zastosowania przejście właściwości polega na wyświetleniu końcowej wartości tego przejścia, od początku do samego końca jego trwania. Funkcja step-end jest odpowiednikiem wyrażenia steps(1, end) i powoduje wy- świetlanie początkowej wartości przejścia, od początku do samego końca jego trwania. Tempo krokowe, ze szczególnym uwzględnieniem znaczenia wartości start i end, zostało omówione w rozdziale 18. Wróćmy do wspomnianej wcześniej bardzo długiej deklaracji właściwości transition-property. Za jej pomocą możemy zadeklarować jedną funkcję tempa dla wszystkich właściwości albo zdefinio- wać różne funkcje tempa dla każdej właściwości z osobna i tak dalej. W poniższym przypadku wszystkie właściwości ze zdefiniowanymi przejściami będą trwały tyle samo i przebiegną w tym samym tempie: div { transition-property: color, border-width, border-color, border-radius, transform, opacity, box-shadow, width, padding; transition-duration: 200ms; transition-timing-function: ease-in; } Na własną prośbę możemy też utrudnić użytkownikowi korzystanie ze strony, animując przejścia różnych właściwości w zupełnie innym tempie. (Jak w kolejnym przykładzie). Pamiętaj, że właściwość transition-timing-function nie zmienia czasu trwania przejścia — od tego mamy właściwość transition-duration. Właściwość ta zmienia tylko tempo przejścia w ramach określonego czasu. Rozważmy następujący przykład: 818  Rozdział 17. Przejścia Kup książkęPoleć książkę div { ... transition-property: color, border-width, border-color, border-radius, transform, opacity, box-shadow, width, padding; transition-duration: 200ms; transition-timing-function: ease, ease-in, ease-out, ease-in-out, linear, step-end, step-start, steps(5, start), steps(3, end); }
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny. Wydanie IV
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ą: