Как сделать рамку градиентом css
Как задать градиент для border в CSS?
Приветствую вас, дорогие друзья!
Рассмотрим как задать в CSS border gradient, это позволит вам создать на своём сайте красивый эффект градиентной рамки. В одной из предыдущих статей я подробно рассматривала как задать градиент в качестве фона.
Так вот, CSS 3 позволяет нам это сделать не только для фона, но и для рамки.
Навигация по статье:
Линейный градиент
Для примера рассмотрим такой блок:
Чтобы задать ему размеры, отступы и так далее я допишу следующие CSS свойства:
Теперь нам нужно задать толщину рамки и её тип:
Для задания градиента допишем свойство border-image в css файле:
Здесь мы в скобках задаём значения цветов, которые будут идти сверху вниз.
Чтобы наше CSS свойство работало во всех браузерах допишем кроссбраузерные префиксы:
И последнее зададим CSS свойство:
Чтобы заданный градиент сместился или растянулся по всей границе.
В итоге весь CSS код задания border gradient будет выглядеть так:
Вот результат работы кода:
Особенности border gradient в CSS
Направление градиента border gradient
Чтобы наш градиент для рамки шел не сверху вниз, а например, слева направо или по диагонали мы можем задать для него направление при помощи дополнительных параметров.
При задании градиента с кроссбраузерными префиксами этот пример пишется немного иначе.
В первом случае мы писали в каком направлении должен распространяться градиент, а во втором – куда он должен идти.
Пример для border gradient слева направо:
Градиенты
Градиенты описываются внутри CSS-свойства background-image или background. Простейший градиент можно описать таким образом:
Линейный градиент
Сам градиент создаётся функцией linear-gradient, в параметрах которой указываются направление градиента и набор цветов. Направление можно не указывать, тогда будет использовано значение по умолчанию — сверху вниз. Цветов может быть любое количество.
Направления градиента задаются с помощью ключевых слов: top, bottom, left, right.
Направление градиента располагается перед списком цветов и включает в себя частицу to. Она была добавлена в синтаксис для улучшения читабельности и наглядности:
И сразу понятно, что это: «Жёлто-зелёный градиент слева направо».
Вот примеры разных направлений градиента c цветами yellow, green:
Градиенты можно направлять по диагонали, из угла в угол. Для этого нужно комбинировать top, bottom и left, right. Например, градиент, идущий из левого нижнего в правый верхний угол:
Вот примеры диагональных градиентов c цветами yellow, green:
Направление линейного градиента можно задавать и в виде произвольного угла, например, 245°. Направление в градусах задаётся с помощью единицы измерения deg. Можно задавать положительные и отрицательные углы. Примеры:
Углы градиента отсчитываются так:
Иногда градиенты с направлениями, заданными с помощью градусов и диагоналей, выглядят одинаково.
Однако их поведение отличается. Градиенты, заданные с помощью градусов, не зависят от формы контейнера, а диагональные градиенты зависят. Диагональные градиенты всегда остаются привязанными к своим углам.
Конечно, если контейнеры квадратные, то отличий не видно.
В линейный градиент можно включать больше двух цветов. Для этого цвета просто перечисляются через запятую. Например, если задать такой CSS:
То получится равномерный градиент c тремя цветами.
По умолчанию цвета в градиентах распределяются равномерно, в одинаковых пропорциях, но этим поведением можно управлять. Делается это с помощью так называемых колорстопов, которые записываются сразу после значений цветов, например, red 0%, yellow 100%.
Колорстоп указывает положение цвета в градиенте, его можно задавать в процентах, пикселях и других единицах. Давайте рассмотрим несколько примеров, чтобы понять поведение колорстопов:
Колорстоп задаёт то место, где будет располагаться центральная (самая насыщенная) часть цвета.
Позиция цвета (или колорстоп) задаёт расположение центральной части цвета, ту точку, от которой начинается переход в другой цвет.
А что будет, если задать для соседних цветов одну и ту же позицию? В этом случае получится резкий переход цветов, так как они оба будут «вытекать» из одной точки в противоположных направлениях.
Легче продемонстрировать это поведение на примере:
Этот приём часто используют для создания интересных эффектов.
Градиентные рамки
Зададим элементу прозрачную рамку. Далее применяется градиент через свойство border-image. В конце border-image-slice задается в 1, чтобы градиент использовал всю обводку рамки.
Этот подход не позволит добавить border-radius. Давайте рассмотрим другой способ.
Сначала div задается position: relative. Далее к блоку добавляется псевдоэлемент с отрицательным абсолютным позиционированием для ширины рамки (5px у нас).
Наконец, применяем background-clip к родителю со значением padding-box. Так div будет залит до края рамки, но не далее.
Радиальный градиент
Сначала задаётся тип окружности (ellipse, ellipse cover), его положение (в нашем случае в центре). После этого следует синтаксис, как в линейных градиентах.
Как сделать рамку градиентом css
Создание сайтов на Django
Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.
В рамках многочисленных упражнений Вы так же создадите свой собственный сайт, что даст Вам ту необходимую практику для закрепления материала, а также полноценную серьёзную работу для своего портфолио.
Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Зачем Вы изучаете программирование/создание сайтов?
Написание лайфхаков на Python для начинающих
Данный курс покажет Вам, как можно автоматизировать рутинные задачи с помощью Python. В курсе Вас ждёт несколько примеров и все исходники.
Чтобы получить Видеокурс,
заполните форму
Как создать профессиональный Интернет-магазин
— Вы будете знать, как создать Интернет-магазин.
— Вы получите бесплатный подарок с подробным описанием каждого шага.
— Вы сможете уже приступить к созданию Интернет-магазина.
Gradient Borders in CSS
Take your JavaScript to the next level at Frontend Masters.
Let’s say you need a gradient border around an element. My mind goes like this:
If you hate the idea of a wrapping element, you could use a pseudo-element, as long as a negative z-index value is OK (it wouldn’t be if there was much nesting going on with parent elements with their own backgrounds).
Here’s a Stephen Shaw example of that, tackling border-radius in the process:
You could even place individual sides as skinny pseudo-element rectangles if you didn’t need all four sides.
Wanna learn CSS from a course?
Frontend Masters has a full CSS learning path with multiple courses depending on how you want to approach it. There is an in-depth course covering all of CSS, a Sass-specific course, a course on modern layouts, and a course on SMACSS, a approach to CSS architecture.
Wanna learn CSS from a course?
Frontend Masters has a full CSS learning path with multiple courses depending on how you want to approach it. There is an in-depth course covering all of CSS, a Sass-specific course, a course on modern layouts, and a course on SMACSS, a approach to CSS architecture.
Comments
These are all great solutions, but I really hope in the near future linear-gradient on borders will be a reality. Would really help when making CSS graphics.
Yes, it was intended that you could use linear-gradient and border-image together. If you need rounded borders too, you should be able to do that with SVG and border image. I’ve successfully done that before without distorting the corners or anything. Let me know if you want me to post an example.
I’m sure everyone would enjoy having a demo like that to reference, including me!
When we were designing how border-image should work (many years ago), the thought was that the image would contain whatever rounded or fancy corners you wanted, and border-radius would only be used as a fallback, not as something that further clipped the corners.
yep i agree I would of done the same thing as well.
Wasn’t working for me on Firefox 64 until I changed the border-image to border-image-source as border-image-slice: 1 was being overridden in the cascade.
Funnily enough, browser support seems to be inconsistent for the last example. When border-image-slice is declared in advance and there’s no value for slice set in the border-image shorthand, as in the example above, Firefox 64 and Safari on iOS 12 uses the default slice value (which is 100%, resulting in border-image: 100%; ) while Chrome 71 and Opera cascades the previously declared value into the shorthand (which gives border-image: 1; ).
Shorthands do normally reset the longhands to their initial values when left out, so I don’t know why Chrome and Opera wouldn’t. The last example seems to be fixed in iOS12 by changing border-image to border-image-source in those two classes.
Looks much like a Chromium bug in the cascade. Interestingly, Chrome DevTools in both “Styles” and “Computed” tabs displays the value 1 of border-image-slice struck-through, and Computed styles tab shows the value 100% coming from the shorthand declaration as overriding it — as it should be — but the value 1 appears to somehow mysteriously “survive” this overriding.
As a side note, I disagree that border-image (as well as its longhand sub-properties) is “obtuse”. It’s arguably the most misunderstood CSS properties of all time, and maybe significantly underrated, especially in combination with SVG images. Some of its abilities like 9-slice scaling and — especially — painting things outside the element’s box (via border-image-outset ) are unique in CSS, and can provide much shorter and cleaner solutions to many cases that otherwise would require hacking around pseudo-elements or even extra markup.
Not sure about the last two. I’m getting different results in iOS Safari. I’d give it a look.
Border with gradient and radius
We all know the property border-image that allow us to add any kind of images (including gradients) as borders.
Exit fullscreen mode
Unfortunately, border-radius isn’t supported with border-image and it’s painful to find tricks to obtain rounded borders having a gradient.
Here is a trick that will produce such result. No complex code, No SVG or multiple elements are required! only two lines of CSS code using the mask property.
Exit fullscreen mode
Explanation
(1)(2): Those lines are trivial.
(3): We apply a gradient as background and we make its origin the border box (by default it’s the padding box).
(4): Using mask we apply two opaque layers. The bottom one will cover all the element and the top one will cover only the padding box (so it will not cover the border area)
(5): We exclude the top layer from the bottom one and only the border area will be shown!
(5′): Some browsers still doesn’t support mask-composite so we use the prefixed version and destination-out is an equivalent of exclude
That’s it!
Now you can adjust the border, gradient and radius like you want. The only drawback is that this will mask the content so we can move the code to a pseudo element instead
Exit fullscreen mode
I replaced border with padding to make the code shorter but the logic remain the same: we exclude the content area from the padding area so only padding will remain visible