arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобраны продвинутые техники: карточки с вложенными Grid-сетками, видео с прозрачным фоном (альфа-каналом) — загрузка как WebM, вставка в блок, работа с пропорциями изображений через aspect-ratio. По ходу — ответы на вопросы чата по классам и позиционированию. Видео с альфа-каналом — одна из самых эффектных техник для портфолио и лендингов. Рендерится в After Effects с прозрачным фоном, загружается как WebM. В браузерах, не поддерживающих WebM — нужен fallback на MP4 без альфы. Часть 2 практической вёрстки сайта по Figma-макету. Смотри после части 1, где разобраны Style Guide, хедер и hero-секция. Продвинутый уровень: нужен опыт работы с Grid, позиционированием и видеоконтентом в Taptop.

Верстаем крутой сайт по макету Figma в Taptop: часть 2

Продолжаем сложный макет. В этой части — карточки с вложенными блоками и видео с прозрачным фоном. Как сделать «плавающую» анимацию, которая висит поверх любого фона?
Видео с альфа-каналом: рендерится в After Effects с прозрачным фоном, загружается в Taptop как обычное видео — «висит» поверх чего угодно. Сложные карточки с вложенными блоками разбираются по реальному макету. Для всех. После просмотра добавляешь видео с прозрачным фоном и верстаешь сложные составные карточки.
Тайминги видео
00:00 — Recap: что сделали в прошлый раз 15:00 — Блок с карточками: структура и Grid-раскладка 50:00 — Видео с альфа-каналом: как подготовить и встроить 1:20:00 — Финальные правки и проверка на устройствах 1:40:00 — Ответы на вопросы: Swiper, коллекции, совместная работа

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока