„Animacja obiektów poprzez stosowanie przejść CSS; stosowanie przekształceń 3-D i 2-D; dostosowywanie interfejsu użytkownika na podstawie kwerend dotyczących nośników (dostosowywanie urządzeń do formatów wyjściowych, rozwiązań do wyświetlania i prezentowania informacji), ukrywanie lub wyłączanie elementów sterujących.”
Tytuł oraz opis materiału dzisiejszego wpisu zaczerpnięte z oficjalnego przewodnika do egzaminu 70-480 nie są być może zbyt czytelne i zrozumiałe. Jest to część poświęcona transformacjom CSS (2D oraz 3D) oraz @media queries.
CSS3 transitions
Dzięki CSS3 jesteśmy w stanie zdefiniować przejścia / animacje bez użycia Flash, czy JavaScript. Dzieje się tak za sprawą właściwości transition, która pozwala pokazać przejście z jednego stylu w inny. Tworzone animacje można łączyć z właściwościami translate oraz transform, o czym pisałem już wcześniej.
Dzięki właściwości transition jesteśmy w stanie wskazać jaką inną właściwość chcemy animować oraz przez jak długi czas. Tym samym musimy podać dwa argumenty:
- właściwość, którą chcemy animować
- czas animacji – bez podania czasu nie zobaczymy animacji, bo wartość domyślnie ustawiona będzie na 0
Spójrzmy na przykład animacji zmiany wysokości elementu blokowego, która trwać będzie jedną sekundę: transition: height 1s. Wystarczy, że najedziemy na poniższy czerwony prostokąt by zobaczyć efekt.
Należy pamiętać, że np. przeglądarka Internet Explorer 9 nie wspiera własności: transiton. Pełny wykaz wsparcia: http://caniuse.com/#feat=css-transitions
Efekty możemy również łączyć, podając kolejne wartości po przecinku. Spójrzmy zatem na przykład animacji zarówno wysokości jak i szerokości: transition: height 1s, width 2s z tą różnicą, że efekt animacji dla zmiany wysokości elementu potrwa jedną sekundę, a zmiana szerokości elementu dwie sekundy.
Własność transition rozbita została na kilka różnych własności, które podawać możemy niezależnie:
- transition-property – jaką własność chcemy animować
- transition-duration – przez jaki czas
- transition-timing-function – jaką funkcję czasu chcemy użyć w stosunku do prędkości oraz czasu animacji (ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, cubic-bezier)
- transition-delay – opóźnienie w wywołaniu animacji
Wszystkie cztery wartości możemy oczywiście połączyć w jedno: transition. Spójrzmy na przykład dwóch takich samych animacji utworzonych na dwa róże sposoby.
Jeśli chodzi o funkcje czasu, to świetnie opisano i pokazano to na stronie: http://www.the-art-of-web.com/css/timing-function/
Różnymi opcjami możemy eksperymentować ponownie na tech demo przygotowanym przez Microsoft: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_transitions.htm
Transformacje CSS3 2D
O transformacja 2D pisałem już w jednym z pierwszych wpisów: 70-480 – Programowe stosowanie stylów do elementów HTML
Transformacje CSS3 3D
Spójrzmy najpierw na przykład:
Widzimy tutaj wykorzystanie animacji za pomocą własności transition, która określona została dla własności transform. To własnie ta własność powoduje, że możemy manipulować elementami blokowymi, wykorzystując w tym celu następujące funkcje:
- rotateX (angle) – obrót wokół osi X
- rotateY (angle) – obrót wokół osi Y
- rotateZ (angle) – obrót wokół osi Z
- rotate3d (x, y, z, angle) – obrót wokół wektora definiowanego przez parametry x, y, z
- scaleX (x) – skalowanie wzdłuż osi X
- scaleY (y) – skalowanie wzdłuż osi Y
- scaleZ (z) – skalowanie wzdłuż osi Z
- scale3d (x, y, z) – skalowanie wzdłuż wektora definiowanego przez parametry x, y, z
- translateX (x) – przesunięcie wzdłuż osi X
- translateY (y) – przesunięcie wzdłuż osi Y
- translateZ (z) – przesunięcie wzdłuż osi Z
- translate3d (x, y, z) – przesunięcie wzdłuż wektora definiowanego przez parametry x, y, z
- perspective (n) – definicja perspektywy
- matrix3d (n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) – mix wszystkiego powyżej, poszczególne wartości odpowiadają odpowiednim przekształceniom
Oprócz własności transform, wyróżniamy także:
- transform-origin – definicja przesunięcie względem osi X, Y, Z
- transform-style – określa w jaki sposób będą renderowane elementy w przestrzeni 3D
- perspective – określa perspektywę w jakiej wyświetlane będą elementy
- perspective-origin – przesunięcie perspektywy względem osi
- backface-visibility – określa, czy tył elementu jest widoczny podczas przekształceń
Tutaj również przychodzi nam z pomocą demo od Microsoft: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_3d-transforms.htm
CSS3 @media queries
W kontekście własności / atrybutu @media można napisać bardzo wiele. Atrybut (html) / własność (CSS) ten / ta służy do definiowania (w uproszczeniu) różnych rodzajów styli w zależności od urządzenia, które wyświetla stronę oraz od rozdzielczości dostępnej na ów urządzeniu.
Świetny, a zarazem krótki artykuł, który to opisuje znalazłem na css-tricks.com i pozwolę sobie odesłać Was do niego: Logic in Media Queries
Pokazywanie i ukrywanie elementów za pomocą CSS
O tym również pisałem już wcześniej: 70-480 – Programowe stosowanie stylów do elementów HTML
