Css градиент border: Как задать градиент для border в CSS?

Градиент границы | Webflow University

Домашний урок

Все уроки

Используйте блоки ссылок, текстовые блоки и отступы для создания кнопки с градиентным контуром.

layout-design

В этом видео старый пользовательский интерфейс. Скоро будет обновленная версия!

Кнопки являются важной частью навигации по веб-сайту и служат призывом к действию. Создание пользовательской рамки с градиентом цвета вокруг наиболее важных кнопок на вашем веб-сайте может улучшить их видимость и привлечь внимание посетителей.

В этом уроке вы узнаете:

1. Как создать кнопку
2. Как применить границу линейного градиента
3. Как подобрать цвет кнопки к цвету страницы
4. Как закруглить кнопку

Как создать кнопку

Давайте сначала создадим кнопку и добавим текст призыва к действию.

Чтобы создать структуру кнопки:

1. Перетащите блок ссылок из панели Add на холст Webflow
2. Добавьте текстовый блок внутри блока ссылок
3. Дважды щелкните текст по умолчанию, чтобы изменить его (например, «Свяжитесь с нами»)

Давайте настроим размер кнопки:

блок
1. Открыть Панель стилей > Интервал
2. Добавить верхний и нижний отступы по 15 пикселей, а также левый и правый отступы от 30 пикселей

Узнайте больше об отступах в нашем уроке.

Полезно знать : Чтобы одновременно увеличить или уменьшить поля или отступы на дополнительных сторонах элемента, используйте Option + перетаскивание мышью (на Mac) или Alt + перетаскивание мышью (в Windows).

Как применить рамку с линейным градиентом

Теперь вы можете добавить рамку с цветовым градиентом к пользовательской кнопке.

Чтобы добавить градиент к блоку Link:

1. Выберите блок Link
2. Открыть Панель стилей > Фоны
3. Нажмите значок «плюс» справа от Изображение и градиент и выберите Линейный градиент в качестве Введите .  
4. Изменить Угол градиента на шкале направления (например, 90 градусов)
5. Щелкните в любом месте на полосе градиента, чтобы добавить точку 
6. Щелкните образец цвета под полосой градиента, чтобы выбрать цвет для градиентная остановка

Вы можете добавить столько точек и цветов, сколько хотите — это создаст градиент. Узнайте больше о фоновых градиентах.

Как подобрать цвет кнопки к цвету страницы

Вы можете сопоставить текстовый блок и фон страницы, чтобы кнопка выглядела прозрачной:

1. Выберите текстовый блок
2. Открыть Панель стилей > Фоны
3. Щелкните образец , чтобы открыть палитру цветов, и выберите цвет, соответствующий цвету основного текста страницы (например, «белый») 

Как закруглить кнопку

Теперь вы можете закруглить края кнопки:

1. Выберите Блок ссылок
2. Открыть Панель стилей > Интервалы
3. Добавьте отступ (Link 7g 7e 6 к каждой из четырех сторон блока 9003. 0e 4) , 3 пикселя)
4. Выберите блок текста
5. Откройте Панель стилей > Границы и увеличьте радиус (например, 50 пикселей)
6. Выберите блок Link
7. Откройте панель стилей > Границы и увеличьте радиус (например, 50 пикселей)

Готово! Теперь у вас есть потрясающая пользовательская градиентная рамка!

Содержание

Как создать градиентные границы в Divi с примерами

27 апреля 2020 г. | WordPress

Divi предоставляет несколько модулей в своем конструкторе страниц для создания лучших веб-сайтов. И каждый модуль поставляется с опцией оформления границы. Однако эта опция позволяет пользователям создавать только цветные границы. Если вам нужны градиентные рамки почти для каждого элемента, то этот пост от Elegant Themes вам не поможет. Поэтому я поделюсь фрагментом CSS, который поможет вам создавать градиентные границы не в Divi, а везде.

Давайте создадим несколько градиентных границ, легко!

Создание градиентных границ в теме Divi

Чтобы добавить градиентную границу для определенного модуля, перейдите на его вкладку Дополнительно и в настройках Пользовательский CSS >> Основной элемент добавьте ниже CSS.

 

border-image-slice: 1 !важно;
граница: сплошная 10 пикселей;
border-image-source: linear-gradient(90deg,#F92C7A 0%,#e1db18 100%) !важно;

Вы можете изменить размер границы и градиент соответственно.

Примеры градиентных рамок

Ниже приведены несколько примеров градиентных рамок, созданных вокруг модуля Image, CTA и Blurb с использованием одного и того же фрагмента CSS.



WordPress — самая популярная CMS в Интернете. Это третья наиболее используемая технология для веб-разработки, на которой основана популярность WordPress.



Гуманная техника начинается с честной оценки человеческой природы. Нам нужно сделать неудобную вещь — более внимательно присмотреться к себе.

Вы также можете использовать этот фрагмент CSS, чтобы добавить градиентную границу вне интерфейса темы Divi. Для этого все, что вам нужно сделать, это присвоить элементу класс и написать вышеприведенный код CSS в этот класс.

Резюме

Выше я показал вам, как можно создавать градиентные границы для изображений, CTA и Blurbs с помощью CSS, упомянутого в этом посте. Точно так же вы также можете создавать градиентные границы для других элементов темы Divi.

Если у вас есть какие-либо мнения об этом посте или о том, как градиентить границы другим методом, поделитесь ими в разделе комментариев. И не забудьте подписаться на нашу рассылку, чтобы получать последние обновления о настройке Divi и наших премиальных продуктах.

Разместил:

Каран любит делать веб красивым, а также внимательно относится к дизайну.

← Как создать собственный модуль Divi, часть 3: Понимание команд пряжи

Создание аннотаций Divi с помощью Advanced Flip Box: часть 2 →

9 февраля 2023 г.