Задача:
Сверстать страницу блога. Реализовать сложные SVG-анимации и кастомные эффекты кнопок.
Моя роль:
Frontend-разработчик. Отвечал за вёрстку, анимации и интерактивность.
Что делал:
— Сверстал резиновую вёрстку с использованием clamp() для ширины блоков и отступов
— Реализовал сложный фоновый градиент (3 слоя: повторяющиеся полосы по горизонтали и вертикали + градиент прозрачности)
— Написал SVG-анимации:
— Сердце: плавное появление сердцевины и основного тела при :hover, масштабирование при клике, искры через @keyframes
— Иконка дискеты в модальном окне
— Реализовал кастомные эффекты кнопок:
— Псевдоэлемент, заливающий кнопку слева направо при :hover с mix-blend-mode: difference
— Box-shadow при :focus-visible
— Сверстал модальное окно (тег ) с бэкдропом и закрытием по клику вне
— Добавил фильтры для изображений (минимум 7 разных, включая множественные)
— Настроил адаптивность (медиазапрос для 375px)
— Реализовал лейблы поверх карточек с mix-blend-mode: hard-light
Стек:
HTML5, CSS3, SVG-анимации, CSS-переменные, , @keyframes, mix-blend-mode, фильтры, clamp(), Figma.
Результат:
Блог с уникальными анимациями, кастомизацией и высоким уровнем интерактивности. Готовое решение для промо-страниц и блогов.
https://github.com/Kaylapoza/zakrivayuschiy-teg-f