Градиентные границы в CSS
Доброго времени суток уважаемые хабровчане. Представляю вашему вниманию перевод статьи Криса Коера.
Допустим, вам нужна градиентная граница вокруг определенного элемента. И вы, такой, думаете:
- Для этого не существует простого и очевидного CSS API.
- Я просто сделаю элемент-обертку с линейно-градиентным фоном, а затем внутренний элемент заблокирует большую часть этого фона, за исключением тонкой линии заполнения вокруг него.
Выглядеть это будет как-то так:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. body < height: 100vh; margin: 0; display: grid; place-items: center; background: #222; >.module-border-wrap < max-width: 250px; padding: 1rem; position: relative; background: linear-gradient(to right, red, purple); padding: 3px; >.module
Если вам не нравится идея оберточного элемента, вы можете использовать псевдоэлемент, до тех пор, пока отрицательное значение z-индекса в порядке (этого не произошло бы, если бы было много вложений родительских элементов с их собственными фонами).
Вот пример Стивена Шоу, закрепляющий border-radius :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est.
.gradient-box < display: flex; align-items: center; //width: 50vw; width: 90%; margin: auto; max-width: 22em; position: relative; padding: 30% 2em; box-sizing: border-box; $border: 5px; color: #FFF; background: #000; background-clip: padding-box; /* !importanté */ border: solid $border transparent; /* !importanté */ border-radius: 1em; &:before < content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; margin: -$border; /* !importanté */ border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange); >> html < height: 100%; background: #000; display: flex; >body
Но не забывайте полностью о border-image , возможно, самом бестолковом свойстве CSS всех времен. Вы можете использовать его, чтобы получить градиентные границы даже на отдельных сторонах:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. body < height: 100vh; margin: 0; display: grid; place-items: center; background: #222; >.module
Использование как border-image , так и border-image-slice , вероятно, является самым простым синтаксисом для создания градиентной границы, но, к сожалению, это просто несовместимо с border-radius .
button < background: none; text-decoration: inherit; font-family: system-ui; font-size: 1rem; padding: 1rem 2rem; >.border-gradient < border-image-slice: 1; border-width: 2px; >.border-gradient-purple < border-image: linear-gradient(to left, #743ad5, #d53a9d); >.border-gradient-green < border-image: linear-gradient(to left, #00C853, #B2FF59); >body < height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; >div < width: 100%; text-align: center; >> div > div < width: 100%; padding: 1rem; >> .on-dark < background: #222; button < color: white; >>Как сделать бордер градиентом
Лицо, которое вы видите чаще, чем своего кота, актер в @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 на CSS, Simple Gradient Borders in CSS
Сразу приведу пару примеров, что бы могли сразу использовать… Предположим есть контейнер. Сделаем ему сверху border с градиентом на CSS:
В следующем примере border будет со всех сторон блока. Что бы в таком случае сделать градиент, понадобится немного другая конструкция CSS стилей
Можно ещё играться с направлением градиента. Например направление “to right” изменим на “to top right” и получим диагональное направление
Заметили, возле кодов цветов градиента стоят значения “0%” и “100%”? Этими цифрами можно устанавливать плавность перехода цвета к цвету, а так же смещение цветов в одну или другую сторону. Надеюсь этой информации хватит, что бы сделать любой градиент для border на чистом CSS!
Ещё статьи по теме:
- Делаем автоматическую плавную смену цвета любого блока сайта на CSS и HTML
- Выполнить php код на любой странице WordPress
- Блок прыгает во время скролла с добавлением position: fixed – исправляем проблему
- Внедрить критические CSS в страницы сайта на WordPress [ПРОСТОЙ СПОСОБ]
- Разбираемся в отличиях между em и rem размерами шрифтов в CSS
Оставь свой коммент
Привіт читачу! Якщо одержав тут корисну інформацію і тобі не байдуже, прошу фінансово допомогти (на їжу та обслуговування сайту). Дякую!
Градиент и изображения-границы на чистом CSS
Если вы уже работали с CSS, вы наверняка использовали границы. Для этого в CSS есть свойство border, которое позволяет определить стиль, цвет и ширину границы (border-style, border-color, и border-width соответственно). Современные веб-браузеры поддерживают градиентные границы, а также позволяют использовать в качестве границ другие изображения.
Требования
- Базовое знакомство с CSS. Если вам нужно освежить свои знания, обратитесь к этой серии мануалов.
- Современный веб-браузер, поддерживающий border-image, linear-gradient, radial-gradient, и conic-gradient.
Настройка тестового класса
Прежде всего мы рассмотрим класс box, который определяет размеры поля и центрирует контент:
.box width: 400px;
height: 200px;
max-width: 100%;
margin: 1rem auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
>
Давайте используем этот класс в элементе div:
Теперь можно создать новый класс with-border:
.with-border border-color: black;
border-style: solid;
border-width: 30px;
>
Затем добавьте его в разметку:
Этот код отобразит на экране следующее:
Example box with a border.
Далее на этом примере мы попробуем добавить изображение, которое будет использовано в качестве границы.
Изображение в качестве границы
Сначала создайте новый класс with-border-image:
.with-border-image border-style: solid;
border-width: 20px;
border-image-source: url(/url/to/some/fancy/image.jpg);
border-image-slice: 60 30;
>
Обратите внимание: к элементу по-прежнему должна быть применена обычная граница, потому что изображение встанет на ее место.
Свойство border-image-source указывает исходное изображение, которое нужно применить. Это может быть URL-адрес растрового или векторного изображения (SVG) или URI.
border-image-slice определяет процесс нарезки изображения, который делит изображение на девять областей. Определяя до четырех значений, вы можете указать, какая часть изображения будет повторяться как часть границы.
Затем добавьте класс в разметку:
Этот код отобразится так:
Example box with a border.
Собирательное свойство
Также существует собирательное свойство, которое позволяет одновременно указать значения для border-image-source и border-image-slice: это свойство border-image.
Вспомните, как в предыдущем примере свойства использовались по отдельности:
.with-border-image border-style: solid;
border-width: 20px;
border-image-source: url(/url/to/some/fancy/image.jpg);
border-image-slice: 60 30;
>
Это тот же класс, но тут мы используем собирательное свойство:
.with-border-image border-style: solid;
border-width: 20px;
border-image: url(/url/to/some/fancy/image.jpg) 60 30;
>
Эти определения одинаковы.
Градиентные границы
CSS поддерживает три типа градиентов: линейный, радиальный и конический. Для добавления градиентов нужно указать значение 1 для свойства border-image-slice.
Линейный градиент
Вот как определить линейный градиент:
.with-linear-gradient border-style: solid;
border-width: 10px;
border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;
Добавьте это в свою разметку. Этот код отобразит следующее:
Example box with a border.
Теперь у вас есть элемент, использующий linear-gradient.
Радиальный градиент
Вот так можно добавить радиальный градиент:
.with-radial-gradient border-style: solid;
border-width: 10px;
border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
>
Конический градиент
Вот пример конического градиента:
.with-conic-gradient border-style: solid;
border-width: 10px;
border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;
>
Если вы добавите этот код в свою разметку, вы получите следующее:
Example box with a border.
Теперь вы знаете, как создавать градиентные границы.
Заключение
В этой статье вы изучили свойства border-image-source и border-image-slice.
Еще с 2020 года 99% браузеров по всему миру поддерживают свойство border-image. Однако при внедрении новых функций следует всегда принимать во внимание, каким браузером пользуется ваша целевая аудитория.
К сожалению, border-image еще не работает должным образом с border-radius. Если вы хотите, чтобы ваш элемент имел скругленные градиентные границы, вас могут заинтересовать эти подходы, основанные на вложенных элементах с background-image и background-color.