Создание крутой 3D сцены (HTML + CSS) с эффектным дизайном

Создание сайта от А до Я (комплексный курс): Создание интернет-магазина от А до Я: Создание крутого слайдера ( посадка на CMS): Все курсы в одном комплекте: Сегодня мы создадим крутую 3D сцену с использованием HTML, CSS и JavaScript. Мы рассмотрим интересные приёмы вёрстки - создадим эффектный анимированный фон, переливающееся освещение сцены, 3D эффект вращения айтемов и разработаем кастомный эффект переключения слайдов с помощью cubic-bezier. Страница урока: Таймкоды: 00:00 Начало урока 01:07 Обзор материалов урока 08:25 Размещаем код в редакторе 09:41 Подключаем библиотеку слайдера 10:39 Настраиваем проект 12:19 Приступаем к HTML верстке 13:56 Верстка видео в качестве фона на сайте 17:17 Создание виньетки на CSS 18:27 Верстка освещения 3D сцены, анимация 21:45 Определяем контейнер для слайдера 23:12 Добавляем эффект Glow в сцену 25:37 HTML верстка заголовка 27:53 Верстка карусели Swiper 29:55 Левая и правая части 3D изображения 33:13 Вычисляем высоту с помощью CSS calc() 34:33 Продолжаем верстать 3D изображения 36:23 CSS стилизация активного айтема карусели 39:26 Наполняем сцену актуальными слайдами 40:34 Кастомная CSS анимация cubic-bezier 42:14 Добавляем тень моделям с помощью CSS 44:47 Верстка надписей айтемов 46:46 Создаем 3D эффект на CSS, анимация 52:32 Ширина слайдера на разных разрешениях 53:57 Full page навигация карусели 1:01:50 Кастомная анимация перелистывания Swiper ВКонтакте: Телеграм: Дзен: