31 Июл
Часто приходиться применять градиент для обводки кнопок или блоков, но к сожалению в CSS до сих пор нет метода по умолчанию, такого чтобы одним свойством задать градиент, как например задаем его для background. В этой статье покажу как на CSS сделать обводку градиентом.
Для создания градиентной обводки в CSS можно использовать несколько методов. Мы рассмотрим три основных способа: использование border-image, псевдоэлементов и комбинации border-image и border-image-slice.
Использование Свойства border-image
Свойство border-image позволяет создать градиентные обводки, используя градиенты как источник изображения для обводки.
<div class="gradient-border">
Ваш текст или контент здесь.
</div>body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #222;
}
.gradient-border {
max-width: 250px;
padding: 1rem;
color: white;
border-width: 5px;
border-style: solid;
border-image: linear-gradient(to bottom, #ff7e5f, #feb47b) 1;
}Объяснение:
border-widthустанавливает ширину обводки.border-imageприменяет линейный градиент к обводке. Значение1означает, что градиент будет растянут на всю ширину обводки.
Использование Псевдоэлементов
Метод с псевдоэлементами позволяет создавать градиентные обводки без необходимости добавления дополнительных элементов в HTML.
<div class="gradient-container">
<p>Ваш текст или контент здесь.</p>
</div>body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #222;
}
.gradient-container {
position: relative;
display: inline-block;
padding: 20px;
background: #222;
color: white;
}
.gradient-container::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: linear-gradient(to right, #ff7e5f, #feb47b);
z-index: -1;
border-radius: 8px;
}
Объяснение:
position: relative;позволяет псевдоэлементу быть позиционированным относительно контейнера.::beforeсоздаёт градиентную обводку, которая находится позади основного содержимого.
Погрузитесь в увлекательный мир веб разработки и дизайна с моими эксклюзивными курсами на Udemy! Я их разработал с душой и учел все нюансы. Сейчас активированы скидки до 90%! Получите доступ к знаниям высокого качества от $9!
Комбинация border-image и border-image-slice
Для создания градиентных обводок с помощью свойства border-image, необходимо учитывать, что оно требует использования border-image-slice, чтобы определить, как градиент должен быть применен к обводке. border-image-slice позволяет настроить, как обрезается и растягивается изображение границы.
<div class="bordered-box">
Ваш текст или контент здесь.
</div>body {
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: #222;
}
.bordered-box {
max-width: 250px;
padding: 1rem;
color: white;
border: 10px solid transparent;
border-image: linear-gradient(to right, #743ad5, #d53a9d) 1;
border-image-slice: 1;
}Объяснение:
border-image: Создает градиентную обводку.linear-gradient(to right, #743ad5, #d53a9d)задает направление и цвета градиента.1указывает, что градиент должен растягиваться на всю ширину обводки.border-image-slice: Определяет, как изображение границы (в данном случае градиент) обрезается и применяется. Значение1означает, что изображение границы не будет изменяться и растягиваться на всю ширину обводки.
Примечание:
border-image-slice определяет, как граница будет разделяться на части. В этом примере значение 1 означает, что изображение обрезается до размеров границы и используется как есть, что подходит для градиентов.
Другое использование border-image-slice
Вы можете использовать border-image-slice для того, чтобы частично применить градиентную обводку, создавая градиенты только на некоторых сторонах.
<div class="partial-border">
Ваш текст или контент здесь.
</div>body {
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: #222;
}
.partial-border {
max-width: 250px;
padding: 1rem;
color: white;
border: 10px solid transparent;
border-image: linear-gradient(to right, #ff7e5f, #feb47b) 1;
border-image-slice: 1;
border-top: 0;
border-left: 0;
border-right: 0;
}Объяснение:
В этом примере border-image-slice все еще применяется для обработки градиента, но border-top, border-left, и border-right установлены в 0, что позволяет применить градиент только к нижней границе.
>
Анимация для обводки с градиентом
Этот пример показывает, как создать эффект смены цвета градиента по обводке элемента.
<div class="gradient-border">
Ваш текст или контент здесь.
</div>body {
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: #222;
}
@keyframes move-gradient {
0% {
border-image-source: linear-gradient(45deg, green, red);
}
50% {
border-image-source: linear-gradient(45deg, blue, yellow);
}
100% {
border-image-source: linear-gradient(45deg, orange, purple);
}
}
.gradient-border {
max-width: 250px;
padding: 1rem;
color: white;
border: 10px solid transparent;
border-image: linear-gradient(45deg, #ff7e5f, #feb47b) 1;
border-image-slice: 1;
animation: move-gradient 2.4s linear infinite;
}Как сделать обводку градиентом. Заключение.
Универсального способа, такого, чтобы одним свойством задать градиент на обводку до сих пор в CSS нет, хотя разработчики ждут этого очень давно. Однако показанные выше примеры решают данную задачу. Выбирайте тот, который подходит для вашей задачи и пользуйтесь. Теперь вы знаете как сделать обводку градиентом.
