Как задать градиентную обводку кнопки css
Лицо, которое вы видите чаще, чем своего кота, актер в @go.freelance
Копирайтер, гений творческой мысли и чудный мастер капкейков в @go.freelance
Maria Achne
Креативный дизайнер, motion дизайнер и визуализатор в @go.freelance
Max Andreev
Продуктовый дизайнер, бренд-менеджер и креативный директор @go.freelance
Alina Semenova
Градиентная обводка элементов в Тильда
Градиентная обводка для шейпа и каринки в Zero блоке
1. Добавляем элементу класс .gborder
2. Добавляем HTML-код — T123 и вставляем в него код
3. Подбираем значение bored-radius в зависимости от скругления шейпа
.gborder .tn-atom < position: relative; >.gborder .tn-atom::before
Градиентная обводка для кнопки в Zero блоке
1. Добавляем элементу класс .gbtn
2. Добавляем HTML-код — T123 и вставляем в него код
3. Подбираем значение bored-radius в зависимости от скругления кнопки
.gbtn .tn-atom < position: relative; >.gbtn .tn-atom::before
Как сделать border градиентом
Для этого используется свойство border-image со значением linear-gradient() и border-image-slice: 1. Предварительно нужно обязательно задать обычную границу указав толщину, стиль и преобладающий на градиенте цвет.
See the Pen zLWmqq by Websitio (@Websitio) on CodePen.
Закругленные уголки и border градиентом
К сожалению, в этом случае не получится обойтись простыми свойствами и нужно немножко помудрить. С помощью ::before сделать подложку с фоновым градиентом, а сверху сам div с фоном совпадающим с общим фоном.
See the Pen vaRVyd by Websitio (@Websitio) on CodePen.
Трюк с маской
Для этого решения мы также будем использовать псевдоэлемент и свойство mask для обрезки фона
Установим фон элемента как градиент. А затем, используя свойство mask, укажем еще два градиентных фона (того же цвета, что и body (не обязательно)). Первый будет маскировать (покрывать) область в пределах границ отступа, а второй маскировать (покрывать) область вплоть до границы.
Кроме того, нужно установить mask-composite, чтобы исключить верхний слой из нижнего, чтобы увидеть границу.
See the Pen vaRVyd by Websitio (@Websitio) on CodePen.
- Предыдущий: Что такое анкор?
- Следующий: CSS псевдоклассы :nth-child и :nth-of-type
Как сверстать такие кнопки с градиентом?
Передо мной встала задача сверстать вот такие кнопки: Не могу понять как сделать градиентом задний фон и границу, чтобы границы оставались закругленными. Заднего фона градиентного я добился, но border сделать градиентом не могу. (Мне необходимо, чтобы и border-radius сохранялся) Подскажите пожалуйста, как это сверстать?
- Вопрос задан более трёх лет назад
- 3312 просмотров
Комментировать
Решения вопроса 1
Вадим Кот @vadimkot Куратор тега CSS
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Ответы на вопрос 6
Павел Беляев @PavelBelyaev
Может просто border-radius делать, он же работает и с нулевой границей и с border: none;
Или закруглять у родительского блока а во вложенном текст и градиентный фон?
Или делать градиентную заливку у родитея и padding 1px, а вложенный блок синенький с текстом.
Если хочешь, что-бы тут тебе помогли, то хотя-бы поделись тем, что у тебя есть и что не получается.
А так все мимо пробегут, таких вопросом очень много тут и понять сложно что хочет автор.
Ответ написан более трёх лет назад
Нравится 1 2 комментария
Nevs @Nevs Автор вопроса
Мне нужно больше второй вариант сделать, можете пожалуйста просто дать мне код второй кнопки: Подробнее, с градиентной рамкой?? Очень прошу, а оттуда отталкиваясь я всё сам сделаю
Градиентная обводка блока на CSS
Создание современных сайтов сопровождается использованием анимаций, как для отдельных элементов дизайна, так и целых блоков. Сегодня мы рассмотрим как сделать красивую градиентную обводку блока на одном только CSS?
Рассмотрим пару вариантов градиентных обводок.
1. Прямоугольная обводка с острыми углами
1. Создадим div.linear-gradient с градиентным фоном;
2. Создадим внутренний блок div с небольшим отступом.
Разметка HTML
div class="module-border-wrap">
div class="module">
Современные технологии достигли такого уровня,
что сплоченность команды профессионалов прекрасно подходит для реализации вывода текущих активов.
Кстати, предприниматели в сети интернет объединены в целые кластеры себе подобных.
div>
div>
Стили CSS
.module-border-wrap max-width: 250px;
padding: 1rem;
position: relative;
background: linear-gradient(to right, red, purple);
padding: 3px;
>
.module background: #222;
color: white;
padding: 2rem;
>Результат
Современные технологии достигли такого уровня, что сплоченность команды профессионалов прекрасно подходит для реализации вывода текущих активов. Кстати, предприниматели в сети интернет объединены в целые кластеры себе подобных.
2. Прямоугольная обводка с закругленными углами на псевдоэлементах ::before и ::after
Разметка HTML
div class="gradient-box">
p>
Современные технологии достигли такого уровня, что сплоченность команды профессионалов
прекрасно подходит для реализации вывода текущих активов. Кстати, предприниматели в сети
интернет объединены в целые кластеры себе подобных.
p>
div>Стили CSS
.gradient-box < display: flex; align-items: center; width: 90%; margin: auto; max-width: 22em; position: relative; padding: 3em; box-sizing: border-box; color: #FFF; background: #000; background-clip: padding-box; /* !important */ border: solid 5px transparent; /* !important */ border-radius: 1em; >
.gradient-box:before < content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange); >
.gradient-box:after < content: ''; position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange); background: #000; >
p
Результат
Сложно сказать, почему активно развивающиеся страны третьего мира и по сей день остаются уделом либералов, которые жаждут быть обнародованы. Учитывая ключевые сценарии поведения, реализация намеченных плановых заданий не оставляет шанса для направлений прогрессивного развития. В рамках спецификации современных стандартов, непосредственные участники технического прогресса ограничены исключительно образом мышления.