Создание красивого аккордеона с плавной анимацией переключения (HTML CSS JavaScript)
WebDesign Master
0:00 / 0:00
Создание красивого аккордеона с плавной анимацией переключения (HTML CSS JavaScript)
6 447 просмотров · 1 год назад
WebDesign Master
311 тыс. подписчиков
6 447 просмотров · 1 год назад
💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/b...
В этом уроке мы рассмотрим создание красивого интерактивного компонента галереи-аккордеона. Это крутой пример современного UI-компонента, который можно использовать в галереях, портфолио или как элемент навигациии на сайте или в приложении. В процессе изучения урока, мы затронем очень важные моменты разработки, такие, как поддержка светлой и темной темы, работу с Flexbox, переменными CSS, адаптацией Flex-элементов для мобильных устройств, работу с color-mix, flex-grow и многие другие важные аспекты.
Страница урока: https://webdesign-master.ru/blog/html...
Таймкоды:
00:00 Начало урока
01:00 Обзор материалов урока
01:40 Создание структуры проекта
02:30 Подключаем файлы CSS и JavaScript
03:56 Включаем поддержку светлой и темной темы
05:28 HTML верстка сайта (вся разметка)
09:06 Приступаем к CSS стилизации
12:31 CSS стилизация светлой и темной темы
17:57 Выравнивание по центру CSS
18:16 Создание элементов аккордеона
22:56 Углубляемся в JavaScript
27:20 Активация элемента при клике
31:56 Как работает наш JavaScript код
35:26 Работа с цветами в color-mix CSS
37:43 Добавляем CSS анимацию переключения
40:22 Адаптация под мобильные устройства
42:43 Наполняем галерею изображениями
44:00 Что ещё изучить?