Как добавить градиентную границу в CSS [+3 Tools]

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

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

Градиент границы — это свойство CSS, которое позволяет разработчикам применять градиент к границе элемента.

Градиентная граница создает визуальный эффект, при котором цвет границы меняется с одного цвета на другой.

Зачем использовать градиентный край?

Градиентные границы были среди различных функций стиля, представленных в CSS3. Вот несколько причин, почему вы должны иметь его в своем следующем веб-приложении:

• Край градиента является гибким: вы можете создавать сложные и многоуровневые эффекты, используя края градиента. Это не похоже на твердые границы, которые являются жесткими. Таким образом, градиентные границы полезны при работе со сложными макетами или формами, требующими тонкого визуального дизайна.
• Создайте визуальную привлекательность: используя эффект градиентной границы, вы можете добавить привлекательные визуальные эффекты к своим проектам. Например, вы можете использовать смелые цветовые контрасты, чтобы привлечь внимание к определенному элементу на вашей веб-странице.
• Включите плавную интеграцию: Градиентные границы позволяют плавно интегрировать границу в фон вашего элемента. Такой подход придает вашему сайту солидный и сплоченный вид, демонстрируя продуманный дизайн.

Как добавить градиент границы в CSS

Прежде чем мы покажем, как добавить градиент границы, мы можем проиллюстрировать, как добавить границу к элементу HTML.

Мы можем использовать этот код;

HTML

    

    

    

    

    

      


        How to add a Border illustrated!!!

      
    

CSS

.box {

  width: 400px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.contains-border {

  border-color: rebeccapurple;

  border-style: solid;

  border-width: 5px;

}

Отображаемая страница будет выглядеть так:

Хотя приведенный выше код имеет рамку, он не так бросается в глаза, как пустой. У нас есть только 5pk полной пурпурной рамки Rebecca вокруг нашего гиганта.

Мы можем сделать нашу границу привлекательной, используя градиенты границы. Существуют разные подходы к добавлению градиента границы. Ниже приведены некоторые из основных:

Использование краев градиента (линейный градиент, радиальный градиент, конический градиент)

Мы проиллюстрируем, как использовать градиентные границы тремя различными способами:

Линейный градиент

Линейный градиент создает плавный переход между двумя или более цветами по прямой линии. Мы можем использовать следующий код для демонстрации:

HTML

        Linear Gradient Illustration

      

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.linear-gradient {

  border-style: solid;

  border-width: 10px;

  border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;

}

Мы указали стиль границы как сплошной, что означает, что граница вокруг нашего блока представляет собой сплошную линию. Ширина границы в нашем коде составляет 10 пикселей.

Линейный градиент начинается с rgb(143, 55, 0)» и заканчивается «rgb(66, 228, 250)». Мы также указали угол 45 градусов. Ширина фрагмента изображения границы установлена ​​на «1».

Отображаемая страница будет выглядеть так:

Радиальный градиент

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

Мы можем проиллюстрировать, как добавить радиальный градиент, используя этот код:

HTML

        Radial Gradient Illustration

      

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.radial-gradient {

  border-style: solid;

  border-width: 5px;

  border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;

}

Мы устанавливаем стиль границы нашего элемента на сплошной. Мы также задали нашей границе ширину границы 5 пикселей.

Радиальный градиент начинается с темно-зеленого RGB(0,143,104) и заканчивается светло-желтым цветом, отмеченным rgb(250,224,66).

«1» в конце кода представляет свойство повторения изображения границы. Это значение указывает браузеру повторять изображение границы только один раз вокруг края элемента.

Отображаемая страница будет выглядеть так:

Конический градиент

Конический градиент создает круговой переход цвета. В этом эффекте переход начинается из центральной точки, а затем распространяется наружу, образуя круговой эффект.

HTML

        Conic Gradient Illustration

      

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.conic-gradient {

  border-style: solid;

  border-width: 7.5px;

  border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;

}

В этом коде мы установили сплошной стиль границы и задали ей ширину 7,5 пикселей. Свойство border-image устанавливает градиент границы. Всего семь цветов, начиная с красного и заканчивая rgb (255, 0, 38).

Изображение «1» в конце кода дает ширину границы в 1 пиксель.

Отображаемая страница будет выглядеть так:

Использование изображений границ

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

HTML

        Border Images Illustration

      

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.border-images {

  border-style: solid;

  border-width: 15px;

  border-image-source: url(/images/elephant-2910293_1920.jpg);

  border-image-slice: 60 30;

}

Мы задали нашему свойству ширины границы ширину 15 пикселей и установили стиль границы сплошной.

Border-image-image устанавливает ширину и высоту рамки на 60% и 30% соответственно.

Отображаемая страница будет выглядеть так:

Использование сокращенной функции

Сокращенное свойство позволяет разработчикам стилизовать несколько отдельных свойств CSS с помощью одной строки кода. В этом случае мы используем border-image, чтобы указать border-image-source и border-image-slice.

HTML

        Shorthand Property Illustration

      

CSS

.box {

  width: 350px;

  height: 50px;

  max-width: 80%;

  font-size: 1.5rem;

}

.shorthand {

  border-style: solid;

  border-width: 15px;

  border-image: url(/images/elephant-2910293_1920.jpg) 60 30;

}

Отображаемая страница будет выглядеть так:

Генераторы границ градиента CSS

Генераторы границ градиента CSS помогают разработчикам добавлять эффекты градиента к элементам на веб-странице. Эти генераторы позволяют настраивать параметры, то есть вам не нужно создавать все с нуля. Ниже приведены некоторые из инструментов, которые вы можете использовать:

№1. Генератор градиента CSS — преобразование цвета

Преобразование цвета позволяет создавать код CSS с линейным или радиальным градиентом с использованием до пяти цветов. Созданный вами CSS-код градиента можно использовать в качестве границы элемента или фонового изображения.

С помощью этого генератора вы можете сделать следующее;

• Выберите до пяти цветов и используйте их в градиентной рамке.
• Выберите направление градиента. Инструмент имеет как линейные, так и радиальные градиенты.
• Вы можете решить, как происходит переход цвета, с помощью функции остановки цвета.

После того, как вы закончите экспериментировать и сгенерируете код, вы можете скопировать его и использовать на своем веб-сайте.

№ 2. Генератор градиента границы CSS — неиспользуемый CSS

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

Вы можете сделать следующее;

• Выберите один из различных типов градиента. Вы можете легко переключаться между радиальным и линейным градиентом при работе с этим инструментом.
• Карточка обзора. Инструмент позволяет предварительно просмотреть, как градиентная рамка будет отображаться на вашей веб-странице по мере ее настройки.
• Цвет останавливается. Этот инструмент позволяет легко решить, как будут происходить переходы для разных цветов.
• Настройка размера границы. С помощью этого инструмента вы можете легко настроить размер и радиус границы.

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

№3. Генератор градиентных границ — Амит Шин

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

Вы можете добиться следующего;

• Создайте градиентную анимацию. Инструмент позволяет создавать градиентную анимацию с переходом между двумя или более цветами.
• Вы можете включить код JavaScript. Если для вашего настраиваемого элемента требуется код JS, вы всегда можете найти и настроить его в панели управления.
• Живой предварительный просмотр. Вы можете видеть изменения в своем коде по мере его настройки.

Вы можете скопировать и вставить код после настройки эффектов градиента границы по своему вкусу.

Заключение

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

Вы также можете использовать разные подходы для разных элементов на одной и той же веб-странице.

Узнайте, как создать двойную рамку в CSS, чтобы улучшить визуальную привлекательность вашего веб-сайта.