Відеокурс CSS3 - ефекти, трансформації - ZIP

Назва -"Курс CSS3 level III - ефекти, трансформації, переходи"

Тривалість - 8 годин 10 хвилин

Рівень: просунутий

Про що ви дізнаєтесь?

Чи траплялося вам, коли-небудь побачивши цікаву анімацію на веб-сайті, подумати: «Цікаво, як самому створити такий ефект»? Як ви думаєте, це складно і вимагає додаткових інструментів? Ніщо не може бути дальшим від істини, тому що ви можете створювати ці типи рухомих елементів, анімації та ефектів, досліджуючи секрети CSS.

У цьому курсі ви зробите ще один великий крок у CSS, вивчаючи можливості анімації та ефектів, які пропонує CSS. Завдяки цьому ви можете створювати дивовижні речі на своєму сайті, і все залежить від вашої фантазії. Ви оживите статичний веб-сайт і покращите взаємодію з користувачем. Отже, якщо ви вже знаєте основи CSS, ви досягнете наступного рівня ініціації з цим курсом. До кінця цього курсу ви зможете зрозуміти, як працює анімація на веб-сайті та як її створити за допомогою чистого CSS.

• Ви навчитеся створювати ефекти за допомогою CSS
• Ви створите анімовані елементи на своєму веб-сайті
• Ви навчитеся використовувати маски
• Ви додасте такі фільтри, як сепія, розмиття або відтінки сірого
• Ви навчитеся поєднувати фільтри один з одним
• Ви навчитеся використовувати режими змішування
• Ви будете виконувати трансформації, масштабування, обертання, нахил
• Ви застосовуватиме трансформації у 2D та 3D середовищах
• Ви навчитеся додавати анімовані ефекти
• Ви навчитеся використовувати переходи та анімацію ключових кадрів

Для кого цей курс?

• Курс для всіх веб-розробників, які хочуть оволодіти анімацією та трансформаціями CSS, щоб самостійно застосовувати

  творчі ефекти.

• Тренінг призначений для людей, які опанували два попередні випуски наших курсів із CSS та основ HTML.

Ефекти

Ви будете розпочніть курс із вивчення простих ефектів, таких як зміна непрозорості елемента, створення градієнта або додавання тіні. Ідучи далі, ви створите більше творчих ефектів, наприклад, застосувавши відтінки сірого, сепію або розмиття до певного елемента. Ви також побачите, як маніпулювати контрастністю, яскравістю та кольором за допомогою CSS. Крім того, я покажу, як поєднати кілька фільтрів на одному елементі.

Перетворення

Одним із розділів курсу є концепція перетворень CSS, які відкривають двері для багатьох творчих варіантів, від переміщення елементів на сторінці до їх масштабування та обертання. Ви дізнаєтеся про всі функції трансформації, які можна використовувати в 2D і 3D середовищах.

Анімації

Потім ви переходите до найважливішої частини, тобто до анімації. Ви будете використовувати всі техніки та властивості, які ви вивчили, з перетвореннями та ефектами. Ви побачите, як застосовувати переходи, використовувати ключові кадри, вказувати відсоток етапу анімації, створювати початкову та зупинкову анімацію. Ви самі визначите кількість повторів і напрямок, в якому буде рухатися елемент. Ви побачите, як відстежувати прогрес анімації за допомогою JavaScript, і дізнаєтесь про бібліотеку Animate_css.

1. Вступ

1.1. Вступ

2. Прості ефекти

2.1. Непрозорість

2.2. Тінь для тексту

2.3. Тінь для елемента

2.4. Лінійний градієнт

3. Маски

3.1. Властивість переповнення з прихованим значенням

3.2. Тло ковзного елемента

4. Фільтри

4.1. Фільтри – вступ

4.2. Сепія

4.3. Відтінки сірого

4.4. Насичений

4.5. Розмиття

4.6. Яскравість

4.7. Контраст

4.8. Обертання відтінку

4.9. Інвертувати

4.10. Непрозорість

4.11. Комбінування фільтрів

4.12. Фоновий фільтр

5. Режими змішування

5.1. Вступ до режимів змішування

5.2. background-blend-mode

5.3. Режим змішування-змішування

6. Перетворення

6.1. Перетворення – вступ

6.2. Перехід у 2D просторі

6.3. Масштабування у двовимірному просторі

6.4. Обертання в 2D просторі

6.5. Нахил у двовимірному просторі

6.6. Визначення нульової точки елемента

6.7. Комбінування перетворень

6.8. Вступ до тривимірної трансформації

6.9. Перспектива

6.10. Використання backface-visibility

7. Анімація

7.1. Перехід – вступ

7.2. Перехід – визначення компонентів окремо

7.3. Графічне представлення основних сигналів

7.4. Перехід – послідовність

7.5. Перехід – послідовності, задані окремо

7.6. Використання кадрів під час переходу

7.7. Часте використання переходу

7.8. Анімація @keyframes – вступ

7.9. Відсоткове визначення етапу анімації

7.10. Вживання слів від і до

7.11. Запуск і зупинка анімації

7.12. Кількість повторів анімації

7.13. Використання animation-timing-function

7.14. Використання animation-duration і animation-delay

7.15. Об’єднання анімацій

7.16. Визначення напрямку анімації

7.17. Використання animation-fill-mode

7.18. Відстеження прогресу анімації за допомогою JavaScript

7.19. Бібліотека Animate_css

8. Прощання

8.1. Кілька останніх слів

Як вибрати версію курсу:

Відеокурс доступний у двох формах:

1. в електронному вигляді - як посилання для завантаження упакованого архіву. Після покупки ви отримаєте посилання на електронну пошту. У цьому випадку шукайте аукціон, позначений як цифрова версія.

2. box on DVD - замість посилання для завантаження ви отримаєте DVD за вказаною адресою. У цьому випадку шукайте аукціон, позначений як DVD.

Чи підійде курс до програми, яку я маю?

Курси створюються на різних версіях програми. Проте в більшості випадків вони підходять до будь-якої версії. Курси створені таким чином, щоб вони були сумісні та нейтральні до старих версій програмного забезпечення. Тож якщо у вас, наприклад, Photoshop 2019 року, а курс створено на версії Photoshop 2020, він підійде на 100%.

Чи отримаю я програму разом із курсом?

Курси - це відеоролики, що демонструють роботу в заданій програмі. Жоден із курсів не супроводжується програмою, яку ви повинні придбати самостійно.