Как создать блок с градиентной обводкой? / Хабр
Представим ситуацию: перед вами встало сверх задание — нужно сделать на сайте блок с градиентной обводкой. Нужно сразу понимать, что для этого не существует простого и очевидного CSS API. Это значит, что для получения необходимого визуального эффекта нам нужно писать определенные “костыли”. Предлагаю рассмотреть 2 подхода к решению этой задачи.
Автор статьи Gradient Borders in CSS Крис Койер предлагает пойти простым путем. Можно сделать “элемент-обертку” с линейно-градиентным фоном, а затем внутренним элементом заблокировать большую часть фона, кроме тонкой линии вокруг нее. Выглядеть это будет следующим образом:
Давайте пошагово разберем, что сделано в данном примере. У нас есть 2 блока — “обертка” и текст. “Обертке” задан градиент и без наложения второго блока она выглядит так:
Текстовый блок находиться внутри этой “обертки” и его фон такой же как и фон окружения. Какие проблемы из-за этого могут появиться?
Вот что будет, если внутреннему блоку не задать фон:
А на следующем примере мы увидим, что будет, если внешний фон не совместим с внутренним:
Из этого может следовать вывод, что таким образом сделать прозрачную кнопку с градиентной обводкой попросту не получится.
Усложним себе задачу и попробуем сделать скругленные углы обводки. На примере от Криса Коера с этим нет проблем.
Но рассмотрим этот же пример в более реалистичной среде. На одном из проектов, над которыми работает наша студия, нам нужно было создать кнопки-теги с обводкой всего в 1 px (на приведенном выше примере бордер толщиной в целых 5 px).
Этот пример достаточно показательный, ведь чаще всего обводка должна быть именно в 1 px. Тут врывается проблема с рендерингом браузера. Если настоящую обводку браузер почти всегда интерпретирует правильно (она всегда выглядит как 1 px вокруг блока), то данный подход такого не гарантирует. Если присмотреться — то обводка блоков в разных местах имеет разную ширину, и может меняться в зависимости от разрешения экрана. Когда элемент относительно маленький, то этого никто может и не заметить, но с большой красивой кнопкой с визуально разной шириной бордера сверху и снизу смириться будет сложно.
Еще одним минусом становится анимация градиента.
Для обводки шириной в 1 px анимация будет выглядеть мгновенной. На полноценную анимацию может уйти уйма времени и нервных клеток программиста.
Рассмотрим второй подход к созданию градиентной обводки. В статье Как сделать border градиентом автор предлагает использовать достаточно хитрое свойство border-image-slice в сочетании с border-image:
Эта техника позволяет делать настоящую обводку не только градиентом, но и изображением, которое будет корректно отображаться. При этом сам блок можно сделать даже прозрачным. Но проблема возникает, когда мы хотим применить радиус обводки.
Что же не так с этим моментом? Радиус попросту не применяется. То есть когда мы прописываем свойство CSS, то оно никак не влияет на отображение блока.
И вот что мы получаем в результате:
Дальше в статье приводится пример с закругленными углами. Здесь применяется такой же метод, как и в предыдущем примере — “блок-обертка” и блок с контентом, который его перекрывает.
Давайте подведем итоги этого разбора:
CSS на данный момент не предоставляет возможности сделать блок с градиентной обводкой, добавить ей закругленные углы и одновременно сделать блок прозрачным.
Если сделать блоки с градиентом обводкой в 1–2 px, то нужно быть готовым, что ширина этой обводки будет неравномерной.
Ограничения касаются только блоков с градиентной обводкой и радиусом бордера.
Вместо заключения
Стоит упомянуть, что достаточно проблематично анимировать бордеры с градиентом. Такие моменты нужно обсуждать заранее и при возможности отбросить их необходимость. Вместо этого можно сделать внешнюю анимацию — добавление тени, смещение блока и т.д. Также если кто-то предложит вам вставить кнопку картинкой, смело отметайте этот ужасный вариант. Для каждой кнопки нужна будет отдельная картинка, текст в ней изменить нельзя и их вес на порядок больше, чем у реализации кодом. Это все скажется на скорости работы страницы, работы с ее админкой и на будущей поддержке сайта.
Градиент — таблица работ
Градиент — таблица работ| № | Страница | jpg | psd | html |
| 1 | Главная | jpg jpg jpg jpg | psd | index |
| 2 | Скидки | jpg | psd | sales |
| 3 | Товары | jpg jpg jpg jpg | psd | html |
| 4 | Каталог | jpg jpg jpg jpg | psd | level-0 level-1 level-3 level-3-v2 |
| 5 | Статусы | jpg jpg jpg | psd | checkout checkout-v2 checkout-v3 checkout-v4 catalog-debt |
| 6 | Новинки | jpg | psd | catalog-new-items |
| 7 | Бренды | jpg jpg | psd | brands |
| 8 | Оформление заказа | jpg jpg jpg | psd | checkout checkout-v2 checkout-v3 checkout-v4 checkout 2 2 ( last modified) |
| 9 | Результаты поиска | jpg | psd | search-results |
| 10 | Мои товары | jpg | psd | my-orders |
| 11 | История заказов | jpg jpg jpg | psd | order-history order-history-2 order-history-3 order-history-4 order-history-new |
| 12 | Повтор заказа | psd | order-repeat | |
| 13 | Изменение заказа | jpg jpg jpg | psd | order-change order-change-v2 order-change-2-v1(last version) |
| 14 | Профайл | jpg jpg jpg | psd | profile |
| 15 | Карточка товара | psd | goods goods-serial | |
| 16 | Уведомления | psd | notifications notifications-2 notifications-3 notifications-4 Лимиты и ПДЗ старое ЦО лимиты и ПДЗ новое ЦО | |
| 17 | сообщения в меню | menu-notif-2 | ||
| 18 | новые селекты | checkout-new-select orders-history-new-select | ||
| 19 | новый быстрый поиск | quick-search-v1 quick-search-v2 quick-search-v3 | ||
| 20 | Письма | Регистрация Восстановление Заказ Статус Заказа Статус Заказа 2 Задолженность Акция Рассылка |
Changelog
/////////——————————///////////// //———————————————-//03.
order-change-2-v1.html
Изменено
style.css
//———————————————-//
19.05.2015 17:00
Изменены селекты в корзине оформления заказа и истории заказов.Добавлено
checkout-new-select.html
orders-history-new-select.html
Изменено
style.css
main.js
15.05.2015 12:04
Добавлены ссылка очистить корзину.Добавлено
menu-notif.html
menu-notif-2.html
Изменено
style.css
15.05.2015 10:38
Добавлена js функция изменения высоты меню каталога и прокрутки содержимогоИзменено
main.js
style.css
05.2015 15:13
Изменена таблица истории заказов, добавлен столбец с номером заказа, объединены столбцы поставка и оплата и изменились названия некоторых столбцов.добавлено
orders-history-new.html
изменено
style.css
13.05.2015 11:34
Добавил в checkout всплывающее сообщение об акциях.изменено
style.css
checkout.html
main.js
12.05.2015 17:33
Добавил страницу повтора заказа order-repeat.html и расширилось описание акции пр нажатии на звездочку.добавлено
order-repeat.html
изменено
style.css
catalog-new-items.html
07.05.2015 12:06
Добавил всплывающее окно выбора действий при редактировании заказаизменено
main.
js
style.css
order-change.html
07.05.2015 15:56
Добавил новинкидобавлено
catalog-new-items.html
изменено
style.css
07.05.2015 12:06
Добавил меню каталога как на амазонеизменено
main.js
07.05.2015 10:15
Добавил чекбоксы «новинки» и «акции» в фильтрыизменено
catalog-level-3.html
style.css
изменено
search-result.html
style.css
main.js
todel.js
06.05.2015 10:50
Добавил «Хлебные крошки»изменено
catalog-level-3.
html
style.css
05.05.2015 18:00
Добавил уведомления в шапке, выпадающем меню поиска, кнопку очистить фильтр, дополнительный счетчик фильтра, и глобальные уведомления пользователядобавлено
notifications.html
notifications-2.html
notifications-3.html
notifications-4.html
изменено
main.js
style.css
изменено
main.js
style.css
28.04.2015 18:26
Исправлен баг наползания корзины и фильтров на футер на странице оформления заказаДобавлен развернутый вид серийных товаров в виде список с картинками
изменено
main.js
style.css
28.
04.2015 18:26
изменено
main.js
style.css
Исправлен баг наползания корзины и фильтров на футер
28.04.2015 12:37
изменено
index.html
home.css
Metro UI :: Популярная библиотека HTML, CSS и JS
Содержание
- GradientBox
Создайте градиент для любых элементов.
О
Новое в версии 4.4.1, основное обновление в версии 4.4.2
Если вам нужно создать градиент для фона элемента, вы можете использовать компонент градиент-коробка .
Чтобы использовать этот компонент, вы должны добавить к элементу роль градиент-бокс .
Вы можете определить линейных и радиальных градиентов.
...
Линейный градиент
Чтобы определить тип градиента, вы должны использовать атрибут тип градиента данных .
Чтобы определить linear градиент пользовательское значение linear . Это значение по умолчанию для компонента градиентной рамки и не требуется для определения.
...
Позиция линейного градиента
Чтобы изменить положение градиента, вы должны использовать атрибут data-gradient-position .
Вы можете установить направления градиента как угол или положение .
установите значение как угол с градусом — data-gradient-position="270deg" ,
чтобы установить градиент position , установите значение для data-gradient-position как одно из: сверху (или «до верха»), налево (или «налево»), снизу (или «до дна»), вправо (или «вправо»), вверху слева (или «вверху слева»), вверху справа (или «вверху справа»), внизу слева (или «внизу слева»), внизу справа (или «внизу справа»).
Радиальный градиент
Чтобы определить радиальный градиент , вы должны использовать атрибут data-gradient-type="radial" .
...
Форма радиального градиента
Вы можете установить два типа радиального градиента: круг и эллипсис (по умолчанию).
Чтобы установить тип радиального градиента, вы должны использовать атрибут data-gradient-shape="circle|ellipsis" .
Размер радиального градиента
Вы можете установить размер радиального градиента с помощью атрибута data-gradient-size .
Для этого атрибута вы можете использовать один из: ближайшая сторона , ближайший угол , самый дальний угол .
<дел
данные-роль = "градиент-коробка"
Тип градиента данных = "радиальный"
размер градиента данных = "дальняя сторона"
data-gradient-position="20px 30px">
Каждая фигура имеет один цвет, определяемый цветом пересекаемого ею градиентного луча.
Чтобы определить цвета градиента, вы должны использовать атрибут 
js?mode=slope
