arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобрана техника оверлея как в Figma: div с абсолютным позиционированием, 100% ширина и высота от родителя, режим смешивания через раздел «Режим смешивания» в правой панели. Показаны варианты: затемнение, осветление, multiply. Родительскому блоку обязательно нужно выставить position: relative — иначе абсолютный div позиционируется относительно ближайшего позиционированного предка, а не нужного блока. Это самая частая ошибка при работе с абсолютным позиционированием. Урок для тех, кто переносит макеты из Figma в Taptop и хочет точно воспроизвести эффекты смешивания. Базовое понимание абсолютного позиционирования нужно — урок фокусируется на режимах смешивания, а не объясняет позиционирование с нуля.

Как добавить оверлей для изображения, как в Figma

В Figma сделал затемнение поверх картинки через режим смешивания. Как воспроизвести это в Taptop? Есть ли аналог Figma Overlay и где его найти?
Оверлей в Taptop — div-блок с абсолютным позиционированием поверх родительского блока. Родителю задаётся relative. Режим смешивания — в разделе «Режим смешивания» в правой панели: аналог Figma Overlay. Для всех, кто переносит макеты из Figma. После просмотра воспроизводишь эффект наложения из Figma в Taptop за несколько шагов.
Тайминги видео
00:00 — Вступление про режимы наложения 00:12 — Как работают режимы наложения в Figma 00:24 — Настройка режима смешивания в Taptop 01:11 — Как сделать простое затемнение фото 01:37 — Заключение и ссылка на курс

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

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