Как сделать градиентный бордер
Градиентные границы в CSS
Доброго времени суток уважаемые хабровчане. Представляю вашему вниманию перевод статьи Криса Коера.
Допустим, вам нужна градиентная граница вокруг определенного элемента. И вы, такой, думаете:
Выглядеть это будет как-то так:
Если вам не нравится идея оберточного элемента, вы можете использовать псевдоэлемент, до тех пор, пока отрицательное значение z-индекса в порядке (этого не произошло бы, если бы было много вложений родительских элементов с их собственными фонами).
Вот пример Стивена Шоу, закрепляющий border-radius :
Редакторский дайджест
Присылаем лучшие статьи раз в месяц
Скоро на этот адрес придет письмо. Подтвердите подписку, если всё в силе.
Похожие публикации
Несколько дельных советов по CSS
Полезные техники HTML, CSS и JavaScript
[Перевод] CSS Filters
Вакансии
AdBlock похитил этот баннер, но баннеры не зубы — отрастут
Минуточку внимания
Комментарии 12
Исправили 🙂 Но вот если серьёзно — у меня на телефоне есть 2 приложения «часы», 2 приложения «сообщения», 2 магазина приложений, 2 браузера и ещё много чего по 2. Причём самсунговские ещё и не удаляются на стандартной прошивке.
Я думаю рано или поздно мобильные телефоны придут к чему то наподобие диалога установки браузеров в windows — включаешь новый телефон и оно тебя спрашивает что конкретно ставить
Самсунгобраузер, на самом деле, вполне себе Chrome, просто немного допиленный, и он таки обновляется по мере обновления самого Chrome, не особенно отставая от оригинала. Но в отличие от последнего позволяет использовать блокировщики рекламы, что ценно.
И Chrome, во избежание дублирования приложений, с самсунгофона, насколько это позволяет утверждать мой личный опыт, штатно выпиливается — при этом вместо него автоматически устанавливается Android System WebView, но это нужный компонент, который, как я понял, используется разными приложениями, которым может потребоваться отображать веб-контент.
Gradient Borders in CSS
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.
Линейный градиент
Градиентом называют плавный переход от одного цвета к другому, причём самих цветов и переходов между ними может быть несколько. С помощью градиентов создаются самые причудливые эффекты веб-дизайна, например, псевдотрёхмерность, блики, фон и др. Также с градиентом элементы смотрятся более симпатично, чем однотонные.
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Линейный градиент для абзаца
В самом простом случае с двумя цветами продемонстрированном в примере 1 вначале пишется позиция, от которой будет начинаться градиент, затем начальный и конечный цвет.
| Позиция | Угол | Описание | Вид |
|---|---|---|---|
| to top | 0deg | Снизу вверх. |  |
| to left | 270deg | Справа налево. |  |
| to bottom | 180deg | Сверху вниз. |  |
| to right | 90deg | Слева направо. |  |
| to top left | От правого нижнего угла к левому верхнему. |  | |
| to top right | От левого нижнего угла к правому верхнему. |  | |
| to bottom left | От правого верхнего угла к левому нижнему. |  | |
| to bottom right | От левого верхнего угла к правому нижнему. |  |
Вместо ключевого слова допускается задавать угол наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется deg.
Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.
Для значения top left и ему подобных угол наклона градиентной линии вычисляется, исходя из размеров элемента так, чтобы соединять две диагонально противоположные угловые точки.
Для создания сложных градиентов двух цветов уже будет недостаточно, синтаксис позволяет добавлять их неограниченное количество, перечисляя цвета через запятую. При этом можно использовать прозрачный цвет (ключевое слово transparent ), а также полупрозрачный с помощью формата RGBA, как показано в примере 2.
Пример 2. Полупрозрачные цвета
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Градиент с полупрозрачными цветами
Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%.
Пример 3. Градиентная кнопка
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Результат данного примера показан на рис. 3.
Рис. 3. Градиентная кнопка
За счёт задания положения цвета можно получить резкие переходы между цветами, что в итоге даёт набор однотонных полосок. Так, для двух цветов надо указать четыре цвета, первые два цвета одинаковы и начинаются от 0% до 50%, оставшиеся цвета также одинаковы меж собой и продолжаются от 50% до 100%. В примере 4 полоски добавляются в качестве фона веб-страницы. Из-за того, что крайние значения подставляются автоматически их можно не указывать, так что достаточно написать всего-лишь два цвета.
Пример 4. Однотонные полоски
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Результат данного примера показан на рис. 4. Обратите внимание, что один из цветов градиента задан прозрачным, поэтому он меняется косвенно через цвет фона веб-страницы.
CSS3 градиенты границ
Я пытаюсь применить градиент к границе, я думал, что это так же просто, как сделать это:
Это не работает, кто-нибудь знает, как правильно делать градиенты границ.
13 ответов
WebKit теперь (и Chrome 12 по крайней мере) поддерживает градиенты в качестве изображения границы:
вместо границ я бы использовал фоновые градиенты и отступы. такой же взгляд, но гораздо проще, более поддерживается.
JsFiddle
EDIT: вы также можете использовать :before селектор, как @ WalterSchwarz указал в этом jsFiddle
Mozilla в настоящее время поддерживает только CSS-градиенты в качестве значений свойства background-image, а также в пределах сокращенного фона.
border-image-slice расширит градиент изображения границы CSS
попробуйте это, отлично работает на web-kit
это хак, но вы можете достичь этого эффекта в некоторых случаях, используя фоновое изображение для указания градиента, а затем маскируя фактический фон тенью. Например:
Я согласен с szajmon. Единственная проблема с его ответами и ответами Квентина-кросс-браузерная совместимость.
Webkit поддерживает градиенты в границах, и теперь принимает градиент в формате Mozilla.
Firefox утверждает, что поддерживает градиенты двумя способами:
IE9 не имеет поддержки.
еще один хак для достижения того же эффекта-использовать несколько фоновых изображений, функцию, которая поддерживается в IE9+, newish Firefox и большинстве браузеров на основе WebKit:http://caniuse.com/#feat=multibackgrounds
например, предположим, что вам нужна левая граница шириной 5px, которая линейный градиент от синего до белого. Создайте градиент в виде изображения и экспортируйте его в PNG. Список любых других CSS фонов после один для градиента левой границы:
вы можете адаптировать эту технику к верхнему, правому и нижнему градиентам границы, изменив часть фонового положения background собственность стенографии.
вот jsFiddle для данного примера:http://jsfiddle.net/jLnDt/
для поддержки кросс-браузера вы можете попробовать также имитировать границу градиента с :before или :after псевдо элементы, зависит от того, что вы хотите сделать.
попробуйте этот код
или, может быть, обратитесь к этой скрипке:http://jsfiddle.net/necolas/vqnk9/
вот хороший полу-кросс-браузерный способ иметь градиентные границы, которые исчезают на полпути вниз. Просто установив цвет to rgba(0, 0, 0, 0)
Градиенты
Градиенты описываются внутри 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), его положение (в нашем случае в центре). После этого следует синтаксис, как в линейных градиентах.