1 Ocena

Kurs CSS3 poziom III – efekty, transformacje, przejścia

79

W tym kursie osiągniesz kolejny poziom i opanujesz zaawansowane przejścia, transformacje oraz animowane efekty w CSS

Poziom: zaawansowany
Data wydania: 2020
Czas trwania: 8 godzin 10 minut

Czego się nauczysz?

Czy kiedykolwiek widziałeś na stronie internetowej ciekawą animację, a potem pomyślałeś: „ciekawe jak stworzyć taki efekt samodzielnie”? Wydaje Ci się, że to skomplikowane i potrzeba dodatkowych narzędzi? Nic bardziej mylnego, ponieważ tego typu ruchome elementy, animacje i efekty możesz wykonać zgłębiając tajniki CSS.

W tym kursie zrobisz kolejny, duży krok w CSS poznając możliwości animacji i efektów jakie oferuje CSS. Dzięki temu na Twojej witrynie możesz tworzyć niesamowite rzeczy, a wszystko zależy od Twojej wyobraźni. Ożywisz statyczną stronę, poprawisz wrażenia użytkownika. Tak więc jeśli znasz już podstawy CSS, to razem z tym kursem osiągniesz kolejny poziom wtajemniczenia. Pod koniec tego kursu będziesz w stanie zrozumieć, jak działa animacja na stronie internetowej i jak utworzyć ją stosując czysty CSS.

  • Nauczysz się tworzyć efekty za pomocą CSS
  • Wykonasz animowane elementy na Twoją stronę
  • Nauczysz się stosować maski
  • Dodasz filtry jak sepia, rozmycie czy skala szarości
  • Nauczysz się łączyć filtry ze sobą
  • Dowiesz się jak stosować tryby mieszania
  • Wykonasz transformacje, skalowanie, obrót, pochylenie
  • Zastosujesz transformacje w środowisku 2d oraz 3d
  • Nauczysz się dodawać animowane efekty
  • Dowiesz się, jak używać przejść i animacji klatek kluczowych

Dla kogo jest ten kurs?

  • Kurs dla wszystkich twórców stron internetowych, którzy chcą opanować animacje i transformacje w CSS, by samodzielnie stosować
    kreatywne efekty.
  • Szkolenie przeznaczone jest dla osób, które opanowały dwa poprzednie wydania naszych kursów o CSS oraz podstawy HTML.

Efekty

Kurs rozpoczniesz od poznania prostych efektów jak zmiana krycia elementu, utworzenie gradientu czy dodanie cienia. Idąc dalej, utworzysz bardziej kreatywne efekty na przykład stosując skalę szarości, sepię czy rozmycie na danym elemencie. Zobaczysz też jak manipulować kontrastem, jasnością i barwą stosując CSS. Dodatkowo pokażę Ci jak połączyć kilka filtrów na jednym elemencie.

Transformacje

Jednym z działów w kursie jest pojęcie transformacji CSS, które otwierają drzwi dla wielu kreatywnych opcji, od przesuwania elementów na stronie, po ich skalowanie i obracanie. Poznasz wszystkie funkcje przekształcenia, które możesz stosować w środowisku 2d oraz 3d.

Animacje

Następnie przejdziesz do najważniejszej części czyli animacji. Wykorzystasz wszystkie techniki i właściwości, których nauczyłeś się przy transformacjach i efektach. Zobaczysz jak stosować przejścia, stosować klatki kluczowe, określać procentowo etap animacji, tworzyć uruchamianie i zatrzymywanie animacji. Określisz liczbę powtórzeń oraz określisz kierunek poruszania się elementu. Zobaczysz jak śledzeić postęp animacji za pomocą JavyScript oraz poznasz bibliotekę Animate_css.

1. Wprowadzenie
1.1. Wstęp

2. Proste efekty
2.1. Krycie
2.2. Cień dla tekstu
2.3. Cień dla elementu
2.4. Gradient liniowy

3. Maski
3.1. Właściwość overflow o wartości hidden
3.2. Przesuwane tło elementu

4. Filtry
4.1. Filtry – wprowadzenie
4.2. Sepia
4.3. Grayscale
4.4. Saturate
4.5. Blur
4.6. Brightness
4.7. Contrast
4.8. Hue-rotate
4.9. Invert
4.10. Opacity
4.11. Łączenie filtrow
4.12. Backdrop-filter

5. Tryby mieszania
5.1. Wprowadzenie do trybów mieszania
5.2. Background-blend-mode
5.3. Mix-blend-mode

6. Transformacje
6.1. Transformacje – wprowadzenie
6.2. Transiotion w przestrzeni 2D
6.3. Skalowanie w przestrzeni 2D
6.4. Obrót w przestrzeni 2D
6.5. Pochylenie w przestrzeni 2D
6.6. Określenie punktu zero elementu
6.7. Łaczenie transformacji
6.8. Wstęp do transformacji 3D
6.9. Perspektywa
6.10. Korzystanie z backface-visibility

7. Animacja
7.1. Transition – wprowadzenie
7.2. Transition – oddzielne określanie składowych
7.3. Graficzna prezentacja podstawowych przebiegów
7.4. Transition – sekwencja
7.5. Transition – sekwencje podawane oddzielnie
7.6. Korzystanie z klatek w transition
7.7. Częste wykorzystywanie transition
7.8. Animation @keyframes – wprowadzenie
7.9. Procentowe określanie etapu animacji
7.10. Korzystanie ze słow from i to
7.11. Uruchamianie i zatrzymywanie animacji
7.12. Liczba powtórzen animacji
7.13. Korzystanie z animation-timing-function
7.14. Korzystanie z animation-duration i animation-delay
7.15. Łaczenie animacji
7.16. Określenie kierunku animacji
7.17. Korzystanie z animation-fill-mode
7.18. Śledzenie postępu animacji za pomoca JavyScript
7.19. Biblioteka Animate_css

8. Pożegnanie
8.1. Kilka słów na koniec

 

 

 

  1. Robert Nosoń

    Merytoryczny kurs, fajna dawka wiedzy, która chyba jeszcze długo się nie zdezaktualizuje. Część pierwszą też posiadam.

Dodaj ocenę