Градиент html: Линейный градиент | htmlbook.ru

Как создать блок с градиентной обводкой? / Хабр

Представим ситуацию: перед вами встало сверх задание — нужно сделать на сайте блок с градиентной обводкой. Нужно сразу понимать, что для этого не существует простого и очевидного CSS API. Это значит, что для получения необходимого визуального эффекта нам нужно писать определенные “костыли”. Предлагаю рассмотреть 2 подхода к решению этой задачи. 

Автор статьи Gradient Borders in CSS Крис Койер предлагает пойти простым путем. Можно сделать “элемент-обертку” с линейно-градиентным фоном, а затем внутренним элементом заблокировать большую часть фона, кроме тонкой линии вокруг нее. Выглядеть это будет следующим образом:

Давайте пошагово разберем, что сделано в данном примере. У нас есть 2 блока — “обертка” и текст. “Обертке” задан градиент и без наложения второго блока она выглядит так:

Текстовый блок находиться внутри этой “обертки” и его фон такой же как и фон окружения. Какие проблемы из-за этого могут появиться?

1. Вот что будет, если внутреннему блоку не задать фон:

2. А на следующем примере мы увидим, что будет, если внешний фон не совместим с внутренним:

Из этого может следовать вывод, что таким образом сделать прозрачную кнопку с градиентной обводкой попросту не получится.  

Усложним себе задачу и попробуем сделать скругленные углы обводки. На примере от Криса Коера с этим нет проблем. 

Но рассмотрим этот же пример в более реалистичной среде. На одном из проектов, над которыми работает наша студия, нам нужно было создать кнопки-теги с обводкой всего в 1 px (на приведенном выше примере бордер толщиной в целых 5 px).

Этот пример достаточно показательный, ведь чаще всего обводка должна быть именно в 1 px. Тут врывается проблема с рендерингом браузера. Если настоящую обводку браузер почти всегда интерпретирует правильно (она всегда выглядит как 1 px вокруг блока), то данный подход такого не гарантирует. Если присмотреться — то обводка блоков в разных местах имеет разную ширину, и может меняться в зависимости от разрешения экрана. Когда элемент относительно маленький, то этого никто может и не заметить, но с большой красивой кнопкой с визуально разной шириной бордера сверху и снизу смириться будет сложно.

Еще одним минусом становится анимация градиента. Для обводки шириной в 1 px анимация будет выглядеть мгновенной. На полноценную анимацию может уйти уйма времени и нервных клеток программиста. 

Рассмотрим второй подход к созданию градиентной обводки. В статье Как сделать border градиентом автор предлагает использовать достаточно хитрое свойство border-image-slice в сочетании с border-image:

Эта техника позволяет делать настоящую обводку не только градиентом, но и изображением, которое будет корректно отображаться. При этом сам блок можно сделать даже прозрачным. Но проблема возникает, когда мы хотим применить радиус обводки.

Что же не так с этим моментом? Радиус попросту не применяется. То есть когда мы прописываем свойство CSS, то оно никак не влияет на отображение блока. 

И вот что мы получаем в результате:

Дальше в статье приводится пример с закругленными углами. Здесь применяется такой же метод, как и в предыдущем примере — “блок-обертка” и блок с контентом, который его перекрывает. 

Давайте подведем итоги этого разбора:

1. CSS на данный момент не предоставляет возможности сделать блок с градиентной обводкой, добавить ей закругленные углы и одновременно сделать блок прозрачным.

2. Если сделать блоки с градиентом обводкой в 1–2 px, то нужно быть готовым, что ширина этой обводки будет неравномерной.

3. Ограничения касаются только блоков с градиентной обводкой и радиусом бордера.

Вместо заключения

Стоит упомянуть, что достаточно проблематично анимировать бордеры с градиентом. Такие моменты нужно обсуждать заранее и при возможности отбросить их необходимость. Вместо этого можно сделать внешнюю анимацию — добавление тени, смещение блока и т.д. Также если кто-то предложит вам вставить кнопку картинкой, смело отметайте этот ужасный вариант. Для каждой кнопки нужна будет отдельная картинка, текст в ней изменить нельзя и их вес на порядок больше, чем у реализации кодом. Это все скажется на скорости работы страницы, работы с ее админкой и на будущей поддержке сайта.

Градиент — таблица работ

Градиент — таблица работ

№	Страница	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.

07.2015 13:05

Добавлено:
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

//———————————————-//

14. 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

//———————————————-//

06.05.2015 13:16

Изменил Результатаы поиска

изменено
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

//———————————————-//

29.04.2015 18:30

Зафиксировал header и кнопку каталога с поиском

изменено
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">

                    <дел
                         данные-роль = "градиент-коробка"
                         Тип градиента данных = "радиальный"
                         размер градиента данных = "самый дальний угол"
                         позиция градиента данных = "40px 40px"
                         data-gradient-colors="#f35 0%, #43e 100%">