arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобраны два способа градиентной обводки: способ 1 — внешний div с градиентным фоном и внутренний div с фоном страницы (padding создаёт рамку), способ 2 — кастомный CSS с border-image через поле «Пользовательские свойства». Для каждого — плюсы и ограничения. Способ 1 (два div): проще, работает без CSS-знаний, но требует точного контроля отступов. Способ 2 (border-image): чище в коде, но не поддерживает border-radius — градиентная рамка не будет скруглённой. Выбор зависит от дизайна. Урок для тех, кто хочет реализовать трендовые неоновые или радужные рамки на карточках и кнопках. Для способа 1 — достаточно базовых знаний Taptop. Для способа 2 — нужно понимание CSS-свойства border-image.

Как сделать градиентную обводку в Taptop

В макете обводка с градиентом — два цвета, переходящие друг в друга. Стандартная граница в Taptop поддерживает только один цвет. Как сделать градиентную?
Два способа. Первый: внешний div с градиентным фоном и padding — рамка, внутренний с фоном страницы — контент. Второй: один div с обводкой и кастомное свойство border-image linear-gradient. Оба поддерживают скругление. Для всех. После просмотра делаешь градиентную обводку двумя способами и выбираешь подходящий.
Тайминги видео
00:00 — покажу, как сделать обводку дива градиентом 00:38 — Затем ставим внутренний див с контентом 01:19 — скобочках указываем направление to wr. Единица

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

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