Создание красивого аккордеона с плавной анимацией переключения. Материалы урока

В этом уроке мы рассмотрим создание красивого интерактивного компонента галереи-аккордеона. Это крутой пример современного UI-компонента, который можно использовать в галереях, портфолио или как элемент навигациии на сайте или в приложении. В процессе изучения урока, мы затронем очень важные моменты разработки, такие, как поддержка светлой и темной темы, работу с Flexbox, переменными CSS, адаптацией Flex-элементов для мобильных устройств, работу с color-mix(), flex-grow и многие другие важные аспекты.

Смотреть урок на YouTube

Материалы урока и готовый результат: Скачать

Стартовая HTML разметка

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Responsive Breakpoints Helper

xs - 575.98px
sm - 767.98px 👈 (используем в уроке)
md - 991.98px
lg - 1199.98px
xl - 1399.98px

Уточнение: данный брейкпоинт (767.98px) для max-width является sm.
max-width брейкпоинты имеют отступ (-0.02px), чтобы избежать перекрытия с min-width.

Cubic-Bezier - Плавная анимация

Ниже представлен скриншот из сервиса Cubic-Bezier с изображением позиционирования точек Animation/Time. Изменяя положение ползунков, вы можете настроить анимацию по своему вкусу.

transition: flex-grow 1.25s cubic-bezier(.17, .84, .44, 1);

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Большой комплексный курс по современному веб-дизайну

Веб-дизайн с нейросетями для начинающих

Я - фрилансер! Базовый курс для начинающих

Создание красивого аккордеона с плавной анимацией переключения. Материалы урока

Рекомендуемые уроки и инструменты

Стартовая HTML разметка

Responsive Breakpoints Helper

Cubic-Bezier - Плавная анимация

Премиум уроки от WebDesign Master

Другие уроки по теме «Веб-разработка»