radial-gradient() — CSS | MDN

CSS функция radial-gradient() создает картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа <gradient>, который является расширением типа <image>.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Как и любой градиент, радиальный градиент не имеет внутренних размеров, тоесть заданных или предпочитаемых размеров, как и заданного коэффициента соотношения сторон. Его итоговый размер будет соответствовать размеру элемента к которому он применен.

Чтобы создать повторяющийся радиальный градиент, который будет заполнять контейнер, необходимо использовать функцию repeating-radial-gradient

Поскольку <gradient>ы относятся к типу <image>, они могут быть использованы только там где используется тип <image>. По этой причине radial-gradient() не будет работать совместно с background-color и другими свойствами, которые используют тип <color>.

Радиальнй градиент задается позицией центра, конечной формой, и двумя или более точками изменения цвета.

Чтобы создать плавный градиент, функция radial-gradient() рисует серию концентрических форм исходящих из центра к краям формы градиента (и потенциально далее за его пределы). Конечная форма может быть как кругом так и эллипсом.

Точки изменения цвета расположены на виртуальном луче градиента, который расширяется горизонтально направо. Позиция точек заданных в процентах расчитывается относительно пересечения конечной формы таким лучем, что является 100%. Цвет каждой такой формы задается цветом на пересечении луча градиента и этой формы.

radial-gradient(circle at center, red 0, blue, green 100%)

Параметры

<position>

Позицию начала градиента можно рассматривать как background-position или transform-origin. По умолчанию позиция равна center.

<shape>

Форма градиента. Может принимать значение circle (подразумевается что формой является круг с постоянным радиусом) или ellipse (форма является эллипсом, выровненным по оси). По умолчанию имеет значение ellipse.

<extent-keyword>

Параметр определяющий размер конечной формы. Возможные значения:

Значение	Описание
closest-side	Конечная форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для окружностей), или обеим вертикальным и горизонтальным сторонам, ближайшим к центру (для эллипсов).
closest-corner	Конечная форма градиента определяется таким образом, чтобы он точно соответствовал ближайшему углу окна от его центра.
farthest-side	Схоже с closest-side, кроме того что, размер формы определяется самой дальней стороной от своего центра (или вертикальных и горизонтальных сторон)
farthest-corner	Конечная форма градиента определяется таким образом, чтобы он точно соответствовал самому дальнему углу прямоугольника от его центра.

Заметка: Ранние реализации этой функции включают в себя другие значения свойства (

cover and contain) которые являются синонимами farthest-corner и closest-side, соответственно. Рекоментуется использовать только стандартные значения, так как некоторые реализации уже перестали использовать старые значения свойств.

<color-stop>

<color> значение цвета в точке изменения цвета за которым следует необязательный параметр позиции (<percentage> или <length> вдоль оси градиента). Значения 0%, или 0 представляют центр градиента; значение 100% представляет собой виртуальное пересечение конечной формы с виртуальным лучем граддиента. Процентные значения будут линейно расположены на луче градиента.

Синтаксис

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)
где <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
  и <color-stop>     = <color> [ <percentage> | <length> ]?

Простой градиент

.radial-gradient {
  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
} 
 

Градиент со смещенным центром

.radial-gradient {
  background-image: radial-gradient(farthest-corner at 40px 40px,
      #f35 0%, #43e 100%);
}

[1] Firefox 3.6 синтаксис — ранний реализованный вариант с префиксом. До Firefox 36, Gecko не применял градиенты на расширенное цветовое пространство, так как это приводило к неожиданному появлению серого оттенка при использовании прозрачности. Начиная с Firefox 42, версии градиентов с префиксом могую быть отключены установкой 

[2] Ранний синтаксис Webkit с префиксом. WebKit с версии 528 поддерживает устаревшый вариант -webkit-gradient(radial,…). Смотрите также текущую поддержку радиальных градиентов.

[3] Internet Explorer от 5.5 до 9.0 поддерживают собственный фильтр filter: progid:DXImageTransform.Microsoft.Gradient().

[4] В дополнении к поддержке без префикса, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) добавил поддержку версии с префиксом 

Сноски к Quantum CSS

• Gecko имеет долгоиграющий баг благодаря которому значения вроде radial-gradient(circle gold,red) будут работать, даже несмотря на то, что пропущена запятая между circle и gold (баг 1383323). Новый parallel CSS движок от Firefox (также известный как Quantum CSS или Stylo, планируемый к релизу в Firefox 57) исправляет этот баг.
• Также в Gecko выражения с calc считаются недействительными — значени не валидно при использовании в  radial-gradient() (баг 1376019). Новый parallel CSS движок от Firefox (также известный как Quantum CSS или Stylo, планируемый к релизув Firefox 57) исправляет этот баг.

Радиальные градиенты • Про CSS

Радиальные градиенты отрисовываются иначе, чем линейные. Если цвета линейных располагаются перпендикулярно линии, задающей направление, то в радиальных цвета расходятся от заданного центра, а градиент может принимать форму круга или эллипса.

Спецификация: w3.org/TR/css3-images/#radial-gradients.

radial-gradient

Для самого простого градиента достаточно задать только цвета:

background: radial-gradient(gold, orangered);

По умолчанию центр градиента находится по центру, градиент имеет форму эллипса:

Помимо цветов градиенту можно задавать форму, положение и размер. Параметры сочетаются и ведут себя сложнее, чем в линейных градиентах.

Форма градиента

Форма (конечная фигура градиента) может быть кругом и эллипсом. По умолчанию — эллипс, градиент стремится занять всё свободное пространство элемента, вытягиваясь, если это необходимо.

Чтобы градиент имел форму круга — это нужно задать явно с помощью ключевого слова circle.

Если форма не задана, но задан размер — одно значение задает радиус круга, если значений два — градиент получает форму эллипса. При наличии размеров явное задание формы градиента игнорируется.

Центр градиента

Для задания центра градиента используются те же ключевые слова, что и для линейного градиента, но с приставкой at: at top, at right, at bottom, at left и at center — значение по умолчанию.

Их так же можно сочетать между собой, чтобы расположить градиент на заданной стороне, например: at right top — в верхнем правом углу.

Ниже можно увидеть как работают разные положения центра:

Код первого квадрата:

background: radial-gradient(at top left, purple, crimson, orangered, gold);

Также можно задавать точное положение градиента, например at 20% 50% или at 10px 150px.

Размер градиента

Можно задать размеры конечной фигуры градиента. Для эллиптических градиентов значения можно указывать в процентах, для круглых — нет.

Если задано одно значение — оно считается радиусом круглого градиента. Если задано два значения — первое считается горизонтальным радиусом эллипса, второе — вертикальным.

Ниже примеры круглых и эллиптических градиентов. Форма фигуры определяется заданными размерами:

Также можно использовать ключевые слова:

closest-side — градиент заканчивается у границы элемента ближайшей к центру градиента. Если это эллипс, градиент касается всех границ элемента.

farthest-side — градиент заканчивается у дальней границы элемента. Если это эллипс, градиент касается всех границ элемента.

closest-corner — конечная фигура растягивается таким образом, чтобы она проходила через угол элемента, ближайший к центру градиента. Если конечная фигура — эллипс, градиент растягивается на всю фигуру. При этом параметре градиент заполняет собой всю фигуру, частично выходя за её пределы.

farthest-corner — аналогично closest-corner, только конечная фигура проходит через угол, дальний от центра градиента. Значение по умолчанию.

Некоторым градиентам добавлено положение at bottom, чтобы было лучше видно действие кода:

repeating-radial-gradient

Радиальный градиент также может быть повторяющимся. Примерный код:

background: repeating-radial-gradient(circle,
  darkkhaki, darkkhaki .5em,
  transparent .5em, transparent 1.5em);

Как и в случае с линейным градиентом, повторяющийся градиент не очень аккуратно отрисовывается.

Upd. от 3.07.20: в данный момент повторяющиеся градиенты корректно отрисоваются в большинстве браузеров.

Сочетая несколько фонов с разными параметрами можно получить удивительные вещи:

Если при создании узоров использовать относительные единицы (em, %), а не абсоюлютные (px), размер получившихся паттернов потом можно будет легко регулировать изменяя только размер шрифта.

Если вы заинтересовались кодом паттернов, я бы советовала попробовать повторить узор не подглядывая в исходники, это полезно : )

Взгляд на CSS3 градиент (линейный и радиальный градиенты) | XoZblog

Здравствуйте, уважаемые читатели XoZbloga! Градиент является прекрасным инструментом манипуляции с цветом в CSS3. Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.

Линейный градиент

Как говориться в классификации, градиенты в CSS3 являются изображениями. Для них нет специальных свойств. А для объявления используется свойство фонового изображения.

В общем случае синтаксис градиента (линейного) выглядит так:

Итак, давайте обо всем по порядку.

Прежде всего, линейный градиент объявлен функцией linear-gradient(). Функция имеет три основных значения. Первое значение определяет исходное положение. В примере указано top т.е. исходное положение сверху. Можно также использовать bottom, left и right;

Чтобы добиться перехода цвета из одного угла в другой мы можем использовать градус угла, вот пример:

Если угол будет отрицательным то позиция смениться с нижнего левого угла на верхний левый.

Второе значение функции это начальный цвет и его стоп позиция, которая указана в процентах. Объявление данной позиции не обязательно, браузер по умолчанию присвоит первому цвету значение 0%.

Последним значением является второй цвет и его стоп позиция. По умолчанию принимает значение 100%. Эти крайние значения и они подразумевают, что первый цвет сразу начинает переходить во второй. Однако, если мы установим для первого цвета 50%, то он только с середины доступной высоты начнет переходить во второй. Вот так выглядит код:

Теперь давайте изменим значение стоп позиций, и на этот раз мы установим 50% для первого и второго цвета:

Получаем одинаковые по высоте полоски. C четкой границей, перехода цвета не будет. Чтобы лучше понять как это работает поэкспериментируйте со значениями.

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

Радиальный градиент

Радиальный градиент также как и линейный объявляется функцией, только уже radial-gradient(). Также есть и основные значения: это форма радиального градиента (circle — круг или ellipse — эллипс), начальный и конечный цвет. Синтаксис следующий:

Если не указывать форму, то по-умолчанию будет установлен эллипс.

Также по-умолчанию установлена центральная позиция градиента, ее можно изменить. Позицию можно задать командами (top, bottom, left, right и center), а также их комбинациями, либо указать в процентах или пикселях.

Комбинации команд:

• По центру вверху — top — 50% 0%;
• В левом верхнем углу — left top — 0% 0%;
• В правом верхнем углу — right top — 100% 0%;
• По центру — center — 50% 50%;
• Слева по центру — left center — 0% 50%;
• Справа по центру — right center — 100% 50%;
• По центру снизу — bottom — 50% 100%;
• В левом нижнем углу — left bottom — 0% 100%;
• В правом нижнем углу — right bottom — 100% 100%.

Вот пример с процентами:

Первое значение по оси Х второе по У.

Также радиальному градиенту можно задавать размер. Размер указывается через пробел после формы градиента. По-умолчанию применяется farthest-corner (к дальнему углу). Расчет ведется от центральной точки градиента до:

Чтобы, это лучше понять рассмотрим на примере. Градиент эллиптической формы с белым начальным и конечным синим цветом:

Размер рассчитывается из расстояния до ближних сторон, очевидно что верхняя ближе по оси Y и левая по оси X.

А теперь до дальних сторон:

Результат, как говорится на лицо. Размер исчисляется из расстояния до дальних сторон.

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

В радиальном как и в линейном градиенте для цвета могут быть применены стоп позиции. Хочется также заметить, если необходимо достигнуть прозрачности цветов то использовать следует rgba.

Альфа канал, тот что последний и равен 0.2 указывает на то, что от 100% цвета используется только 20%.

В обоих видах CSS3 градиента можно использовать не два, а несколько цветов.

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

Повторяющийся градиент

Для обоих видов можно использовать повторение цветов. То есть, из данных значений образуется цикл. Функции повторяющегося градиента, repeating-linear-gradient() — для линейного и repeating-radial-gradient() — для радиального.

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

Кроссбраузерность

К сожалению, на момент написания этой статьи, современные браузеры еще не поддерживают стандартный синтаксис. Они по прежнему нуждаются в префиксах, каждый в своих (-webkit-, -moz-, -ms- и -o-). Поэтому синтаксически правильным является вот такое описание градиента:

Чтобы упростить задачу с префиксами, можно использовать бесплатную библиотеку Prefix-Free.

Для того чтобы градиент заработал на «9 осле» (Internet Explorer 9), пишем так:

Но даже здесь есть ограничения, нельзя добавить более 3 цветов и для использования прозрачности нужно немного изменить HEX код цвета:

Где 33 сразу после решетки это процент насыщенности цвета.

Надеюсь, что статья оказалась для Вас полезной, а рассмотренная тема полностью раскрытой.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии. Спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

CSS3 повторение градиента

Существует много CSS3 функций, которые значительно изменяют дизайн сайта, и делается это в несколько строк. Одна из таких функций — это CSS3 градиенты. Кто проходил тест на эту тему у меня на сайте, тогда знает что там был такой вопрос. И некоторые ответили на него неверно. До появления CSS3 чтобы сделать фон с помощью градиента, необходимо было использовать изображения, но сегодня мы можем обойтись и без них, а лишь используя некоторые нововведения CSS3.

Тест о котором я упоминал в описании находится здесь: Тест CSS3. Стандарт оформления HTML документов

Реальный пример работы вы можете увидеть и скачать ниже:

Посмотреть примерСкачать

Как использовать?(простое повторение градиента)

Синтаксис очень похож на определение простого линейного или радиального градиента, но при этом еще используется еще одно слово-приставка в начале и указываются цвета и направление повторения. Чтобы повторять линейный градиент нужно использовать свойство repeating-linear-gradient, а чтобы повторять радиальный нужно использовать функцию repeating-radial-gradient:

1
2
3
4
5
6
7
8
9

/*Линейный*/  
.gradient {  
    background: repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);   
}  
 
/*Радиальный*/  
.gradient {  
    background: repeating-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px);    
}

(Создание шаблона для повторений)

Повтор изображения, например, чаще всего используется при создании фона. Это делается для ускорения загрузки страницы. Для примера мы также напишем небольшой код, который будет имитировать тетрадь в линейку.

HTML часть

Для этого нам нужен лишь один <div> и никаких изображений, только CSS3:

1
2

<div>
</div>

CSS3 часть

1
2
3
4
5
6
7
8
9
10

.gradient {  
    width: auto;  
    height: 500px;  
    margin: 0 50px;  
    background: -webkit-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: -moz-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: -o-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background-size: 100% 21px;  
}

Последнее свойство означает что градиент будет растягиваться на всю страницу и повторяться через 21 пиксель. Чтобы свойство работало в разных браузерах мы используем специальные префиксы(«-webkit», «-moz», «-o»).

А для создания двух полосок слева мы используем псевдоэлемент :before :

1
2
3
4
5
6
7
8
9

.gradient:before {  
    content: "";  
    display: inline-block;  
    height: 500px;  
    width: 4px;  
    border-left: 4px double #FCA1A1;  
    position: relative;  
    left: 30px;  
}

Вывод

CSS3 еще больше упрощает жизнь веб-разработчика и дизайнера. Всё меньше и меньше изображений, а значит больше скорость загрузки страницы. Я уверен, осталось недолго ждать когда все браузеры смогут полноценно поддерживать данную технологию.

Успехов!

Источник: http://www.hongkiat.com/blog/css3-repeating-gradients/

Кроссбраузерный CSS-градиент

Возможность применения CSS-градиента была реализована Webkit несколько лет назад, но он редко использовалася из-за несовместимости с большинством браузеров. Но теперь Firefox, начиная с версии 3.6+, начал поддерживать градиент, и мы можем создавать градиент без обязательного использования изображения. Opera добавила поддержку CSS-градиента начиная с версии 11.10.

В этой статье мы покажем Вам, как создать CSS-градиент, который будет поддерживаться всеми основными браузерами: IE, Firefox 3.6+, Safari, Opera 11.10+ и Chrome.

В CSS3 градиенты бывают двух видов — линейные и радиальные. Рассмотрим сначала линейный градиент.

Линейный градиент

Для Webkit—браузеров:

Следующий код предназначен для webkit браузеров, таких как Safari, Chrome, и т.д. Он создаст линейный градиент, от верхней точки (#ccc) к основанию (#000).

background: -webkit-linear-gradient(left top, left bottom, #ccc, #000);   

Примечание: В старых версиях Webkit-браузеров использовался немного другой синтаксис, первым параметром там указывался тип градиента.

Для Firefox 3.6+:

background: -moz-linear-gradient(top,  #ccc,  #000);  

Для Opera

Этот код будет работать в Опере начиная с версии 11.10.

background: -o-linear-gradient(top,  #ccc,  #000); /* Opera 11.10+ */

Для Internet Explorer

Градиент для IE 10+

background: -ms-linear-gradient(top,  #ccc,  #000); /* IE10+ */

Этот фильтр будет работать в старых версиях IE:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#000000′);

Кроссбраузерный CSS-градиент:

Поместите эти строки  кода вместе, и в результате вы получите CSS-градиент, который будет работать во всех современных браузерах. Заметьте: я добавил в начале правило для background, в том случае если пользователь использует браузер, который не поддерживает эти правила.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cccccc’, endColorstr=’#000000′); /* для IE6-9 */
background: -webkit-linear-gradient(top, bottom, #ccc, #000); /* для webkit-браузеров */
background: -moz-linear-gradient(top,  #ccc,  #000); /* для firefox 3.6+ */
background: -o-linear-gradient(top,  #ccc,  #000); /* для Opera 11.10+ */
background: -ms-linear-gradient(top,  #ccc,  #000); /* для IE10+ */

Давайте рассмотрим подробнее синтаксис. Первое значение (point) является необязательным. Если значение не указано, то по умолчанию будет градиент будет идти от верха до низа. Вы можете использовать различные ключевые слова здесь. Это может быть одно ключевое слово или сочетание двух. Вы также можете использовать значения в градусах. Цель этого параметра заключается в определении, в каком направлении градиент будет распространяться. Кроме того, необходимо определить как минимум два цвета. Первый цвет будет в начале градиента, а последний цвет, соответственно, в конце. Здесь перечисленны возможные значения point:

• top
• right
• bottom
• left
• top left
• top right
  
• bottom left
• bottom right
• 0deg
• 11deg
• 67deg
• 182deg
• -45deg
• -90deg

Использование стоп-цвета

Цвета могут иметь необязательные stop значения. Если они не определены, то цвета переходят плавно от первого до последнего. Но вы можете использовать несколько цветов при создании градиента, и при этом вы можете изменять ширину каждого цвета устанавливая stop значения. Устанавливаемое значение может измеряться в любых допустимых CSS единицах (px, pt, em, % и т.д.). Эти значения помещается после цвета. Также вы можете использовать любые допустимые CSS-цвета, такие как ключевые слова (red, yellow, blue), или hex, hsl, rgb или rgba значения.

background-image: linear-gradient(top, yellow 10px, red 80px);
background-image: linear-gradient(top right, orange, green 30%, yellow 70%);
background-image: linear-gradient(60deg, red, white, blue 50%);

Радиальный градиент CSS3

Радиальный градиент распространяется от точки в центре по окружности.

background: radial-gradient(
позиция или угол, форма или размер, от-стоп, стоп-цвет, до-стоп
);  

Синтаксис похож на линейный градиент, то тут еще добавилась форма и размер. Форма бывает двух видов — ellipse и circle, по умолчанию значение: ellipse. Значение размера может принимать одно из шести значений.

• closest-side — Ближайшая сторона. Градиент распространяется от центра по направлению к ближайшей стороне элемента (для circle), или к обоим, горизонтальной и вертикальной сторонам (для ellipse).
• closest-corner — Ближайший угол. Размер градиента таков, что он распространяется от центра к ближайшему углу элемента.
• farthest-side — Самая дальняя сторона. Градиент распространяется от центра по направлению к наиболее удаленной стороне элемента (для circle), или к обоим, горизонтальной и вертикальной, сторонам (для ellipse).
• farthest-corner — Самый дальний угол. Размер градиента таков, что он распространяется от центра к самому дальнему углу элемента.
• contain — тоже что и closest-side.
• cover — тоже что и farthest-corner.

background: radial-gradient(circle farthest-side,#000,#FFF,#000);

Дополнительная информация.

CSS-градиент для выпадающего меню:

Ниже представлено, как пример, выпадающее меню, которое использует только CSS3:  CSS-градиент, text-shadow, radius-border и box-shadow (никакого Javascript или изображений).

Ограничения Internet Explorer:

Фильтр градиента для Internet Explorer не поддерживает сolor-stop, gradient angle и radial gradient. Это означает, что Вы можете только определить горизонтальный или вертикальный линейный градиент с 2 цветами: StartColorStr и EndColorStr.

Полезные ссылки по теме:

Ultimate CSS Gradient Generator

CSS3 Gradient Generator

Заключение.

Пожалуйста отметьте, что не все браузеры поддерживают CSS-градиент. Чтобы не возникло проблем, Вы не должны целиком полагаться на CSS-градиент, верстая шаблон.

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Линейный градиент и радиальный градиент

Градиенты принадлежат изображениям и должны быть установлены через фоновое изображение.

.box1{
	background-image: ;
}

• Цвет меняется по прямой

.box1{
	background-image:linear-gradient(red,yellow);
}

• Направление градиента можно указать в начале

слева пример

.box1{
	background-image:linear-gradient(to left,red,yellow);
}

45deg пример

.box1{
	background-image:linear-gradient(45deg,red,yellow);
}

повернуть пример

.box1{
	background-image:linear-gradient(0turn,red,yellow);
}

• Градиент может указывать несколько цветов, по умолчанию несколько цветов распределяются равномерно

.box1{
	background-image:linear-gradient(red,yellow,#bfa,skyblue);
}

• Распределение градиента можно указать вручную

.box1{
	background-image:linear-gradient(red,yellow 50px);
}

• Repeating-linear-gradient () линейный градиент, который можно выложить плиткой

.box1{
	background-image:repeating-linear-gradient(red,yellow 50px);
}

• Цвет меняется радиоактивно

.box1{
	background-image:radial-gradient(red,yellow);
}

• По умолчанию форма градиента определяется элементом

• Вы можете вручную указать форму градиента

.box1{
	background-image:radial-gradient(ellipse,red,yellow);
}

• Размер и положение градиента можно установить вручную

.box1{
	background-image:radial-gradient(farthest-side at 50px 50px,red,yellow);
}

• Как и линейные градиенты, есть настройки повторяющегося радиального градиента, которые можно размещать мозаикой.

Лучшие генераторы градиентов CSS для дизайнеров

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

Одним из самых модных элементов в дизайне веб-сайтов является использование градиентного фона или наложения цвета. Двухцветный линейный градиент — наиболее популярная вариация этого тренда. И хотя градиенты могут выглядеть причудливо и сложно, на самом деле их довольно легко создавать и развертывать, если вы используете правильный инструмент!

CoolHue 

CoolHue — это впечатляющая коллекция готовых комбинаций градиентов. От розового и апельсинового до синего и зеленого цвета, тут вы найдете любые градиенты, начиная с поразительного контраста вплоть до мягких изменений.

Хотя у вас нет особого контроля над настройкой параметров, с помощью CoolHue вы сразу поймете, работает ли один из цветовых комбо для вас или нет, потому что все параметры находятся прямо на экране. Также одним щелчком мыши вы можете скопировать CSS. Вот и все. Серьезно! Кроме того каждый файл доступен в формате PNG для скачивания.

CSS Gradient 

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

Переключатели просты в использовании, и даже кто-то с очень небольшим опытом работы с цветом может понять, как создать полезный градиент. Кроме того, имеются некоторые начальные градиенты в нескольких разных стилях для вдохновения.

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

UI Gradients 

UI Gradients представляет собой полноэкранный генератор градиентов. Преимущество просмотра цветовых вариаций в полном размере заключается в том, что вы действительно можете визуализировать, как они будут выглядеть с вашими реальными дизайн-проектами.

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

Не нравится то, что вы видите? Тогда вы можете добавлять данные градиента в файл gradients.json в проекте и отправлять запрос на перенос.

CSSmatic 

CSSmatic — это простой генератор градиентов с кликабельными кнопками, которые помогут вам настроить выбор цвета, остановку и вращение. С помощью этого инструмента пользователи могут создавать линейные или радиальные градиенты.

Начните с одного из простых пресетов — тут вы найдете некоторые хорошие монохроматические варианты — и настраивайте его, пока вы не получите необходимый вам градиент. Затем скопируйте код, и вы готовы к работе.

Ultimate CSS Gradient Generator 

Ultimate CSS Gradient Generator очень похож на CSSmatic, и у этих инструментов даже почти одинаковые экранные функции, однако у него есть и другая функциональность.

Инструмент включает в себя диаграмму совместимости браузера, несколько цветовых форматов, возможность импорта градиентного изображения и более 135 пользовательских пресетов. Пользователи также могут импортировать градиенты из существующего CSS и вносить коррективы. Это может быть отличным вариантом для настройки градиента на вашем сайте, который просто выглядит не совсем так, как вы хотите.

ColorSpace 

ColorSpace — это еще один полноэкранный градиентный инструмент с высоко визуальным веб-сайтом. Он довольно простой в использовании. Выберите ориентацию градиента (линейную или радиальную), добавьте два цвета с помощью кнопок и средства выбора цвета, затем нажмите кнопку «Создать».

Хотя этот инструмент все еще находится в стадии бета-версии, он работает хорошо, а код виден прямо на экране для копирования в проекты. Все, что вам нужно от визуализации градиента в CSS, находится прямо на экране. И если вам не нравятся ваши цветовые решения, их легко изменить и просто снова нажать «Создать».

CSS Gradient Generator 

CSS Gradient Generator производит код, используя простой графический интерфейс пользователя, а сам CSS будет работать во всех браузерах, поддерживающих CSS3.

Генератор позволяет создавать линейные и радиальные градиенты, а также имеет возможность импортировать существующий код градиента CSS для редактирования. Он также поставляется с несколькими пресетами для запуска ваших градиентных визуализаций.

CSS3 Factory 

CSS3 Factory — это простой инструмент, который лучше всего работает, если вы знаете, какие цвета вы хотите использовать для градиента CSS.

Данная опция без наворотов позволяет вводить выбор цвета, задавать направление для цветов и копировать код. У инструмента есть небольшое окно предварительного просмотра, чтобы видеть, как будут выглядеть градиенты, однако этот инструмент не имеет никаких пресетов.

CSS-Gradient 

CSS-Gradient является генератором плюс учебником по градиентам. Инструмент включает в себя боксы для выбора двух вариантов цвета в Hex или RGB, направленных, линейных или радиальных. Так что этот инструмент лучше всего подходит, если вы имеете представление о том, какие цвета вы хотите использовать. Просто скопируйте код и примените его к своему дизайну. 

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

GradientGenerator 

GradientGenerator — отличный инструмент для создания небольшого градиентного вдохновения. Начните с одного из пресетов (есть много различных вариантов на выбор), а затем добаьте свои собственные настройки для уникального градиента.

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

Вы можете щелкнуть, чтобы скопировать CSS, загрузить PNG, захватить QR-код для тестирования на мобильном устройстве или создать ссылку на общий ресурс. Этот инструмент также имеет другие расширенные параметры конфигурации, с которыми вы можете играть, включая тип генерируемого кода.

Вывод

Одним из самых больших преимуществ использования генератора градиентов CSS является то, что большинство этих инструментов показывают, как градиент будет выглядеть на экране при генерации соответствующего кода. Вы можете визуально настроить цвета, наложения, направление, непрозрачность и многое другое прямо на экране.

Затем все, что вам нужно сделать, это скопировать код и вставить его в свой файл CSS, чтобы начать работу. Генератор градиентов CSS — это быстрый и простой способ создать градиент веб-сайта, который вам понравится, и который будет прост в использовании. Мы надеемся, что один из вариантов в этом списке отлично будет работать вас.

Всем успешной работы!

Источник

radial-gradient () — CSS: каскадные таблицы стилей

Функция CSS radial-gradient () создает изображение, состоящее из постепенного перехода между двумя или более цветами, исходящими из исходной точки. Его форма может быть кругом или эллипсом. Результатом функции является объект с типом данных <градиент> , который является особым типом .

Исходный код этого интерактивного примера хранится в репозитории GitHub.Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

 
радиальный градиент (круг в центре, красный 0, синий, зеленый 100%)  

Радиальный градиент задается путем указания центра градиента (где будет эллипс 0%), а также размера и формы конечной формы (эллипса 100%).

Значения

<позиция>

Положение градиента интерпретируется так же, как background-position или transform-origin .Если не указано, по умолчанию используется центр .

<конечная-форма>

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

<размер>

Определяет размер конечной формы градиента. Если опущено, по умолчанию используется самый дальний угол.Это может быть указано явно или по ключевому слову. В целях определения ключевых слов считайте, что края градиентной рамки бесконечно продолжаются в обоих направлениях, а не являются конечными отрезками линии.

Круглый и эллиптический градиенты принимают следующие ключевые слова для своего <размер> :

Ключевое слово	Описание
ближайшая сторона	Конечная форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для кругов), или соответствует как вертикальной, так и горизонтальной сторонам, ближайшим к центру (для эллипсов).
ближайший угол	Форма окончания градиента имеет размер так, чтобы он точно совпадал с ближайшим от центра углом прямоугольника.
дальняя сторона	Аналогично ближайшей стороны, за исключением того, что размер конечной формы соответствует стороне коробки, наиболее удаленной от его центра (или вертикальной и горизонтальной сторонам).
дальний угол	Значение по умолчанию, конечная форма градиента имеет размер так, чтобы он точно совпадал с самым дальним углом прямоугольника от его центра.

Если указано как circle или опущено, размер может быть явно задан как , что обеспечивает явный радиус круга. Отрицательные значения недопустимы.

Если указано как ellipse или опущено, размер может быть задан как с двумя значениями, чтобы обеспечить явный размер эллипса. Первое значение представляет горизонтальный радиус, второе — вертикальный радиус.Значения в процентах относятся к соответствующему размеру окна градиента. Отрицательные значения недопустимы.

Значение <цвет> цветовой остановки, за которым следуют одна или две необязательные позиции остановки (либо <процент> , либо <длина> по оси градиента). Процент 0% или длина 0 представляет центр градиента; значение 100% представляет собой пересечение конечной формы с виртуальным лучом градиента.Промежуточные значения в процентах линейно расположены на луче градиента. Включение двух стоп-позиций эквивалентно объявлению двух цветных стопов одного цвета в этих двух позициях.

<цвет-подсказка>

Подсказка цвета — подсказка интерполяции, определяющая, как градиент прогрессирует между соседними точками цвета. Длина определяет, в какой точке между двумя цветовыми точками цвет градиента должен достичь середины цветового перехода. Если опущено, середина цветового перехода — это середина между двумя цветовыми точками.

Как и любой градиент, радиальный градиент не имеет внутренних размеров; т.е. он не имеет ни естественного, ни предпочтительного размера, ни предпочтительного соотношения. Его конкретный размер будет соответствовать размеру элемента, к которому он применяется.

Чтобы создать радиальный градиент, который повторяется и заполняет его контейнер, используйте вместо этого функцию repeat-radial-gradient () .

Поскольку <градиент> с относятся к типу данных <изображение> , их можно использовать только там, где можно использовать <изображение> с.По этой причине radial-gradient () не будет работать с background-color и другими свойствами, которые используют тип данных .

Состав радиального градиента

Радиальный градиент определяется центральной точкой , концевой формой и двумя или более точками остановки цвета .

Чтобы создать плавный градиент, функция radial-gradient () рисует серию концентрических форм, расходящихся от центра к конечной форме (и, возможно, дальше).Конечная форма может быть кругом или эллипсом.

Точки остановки цвета расположены на виртуальном градиентном луче , который проходит горизонтально от центра вправо. Позиции остановки цвета на основе процентов относятся к пересечению между конечной формой и этим лучом градиента, который представляет 100% . Каждая форма имеет один цвет, определяемый цветом градиентного луча, который она пересекает.

Простой градиент

  .radial-gradient {
  background-image: radial-gradient (голубой 0%, прозрачный 20%, лосось 40%);
}  

Нецентрированный градиент

 .radial-gradient {
  background-image: radial-gradient (самый дальний угол 40 пикселей 40 пикселей,
      # f35 0%, # 43e 100%);
}  

Больше примеров радиального градиента

Таблицы BCD загружаются только в браузер

Примечания Quantum CSS

В Gecko была давняя ошибка, из-за которой радиальные градиенты, такие как , радиальный градиент (золотой круг, красный) работали, даже хотя они не должны из-за отсутствия запятой между кругом и золотом . Также были отклонены выражения calc () , что приводило к недопустимому значению, при использовании в качестве компонента радиуса функции radial-gradient () (ошибка 1376019).Новый параллельный CSS-движок Firefox (также известный как Quantum CSS или Stylo, выпущенный в Firefox 57) исправил эти ошибки.

Как использовать градиенты CSS3

Резюме: Руководство по использованию градиентов CSS3 в качестве фона для тега холста.

Градиенты CSS3 можно использовать для создания постепенного фона для вашей диаграммы. Поскольку вещи, нарисованные на , холст не подпадающие под правила CSS, вы должны использовать градиенты, предоставленные вам Canvas API или ярлыки (например, Gradient (красный: белый) ), предоставленные RGraph чтобы придать вашим диаграммам (например, столбцам гистограммы) градиенты.

Но если вы хотите придать диаграмме цвет фона, например диаграмму здесь можно использовать градиенты CSS3.

Линейные градиенты

Градиенты задаются с помощью свойства CSS background-image и свойства linear-gradient () функция имеет следующий вид:

 <холст>
    [Без поддержки холста]
 

Как видите, градиент начинается в верхней части холста и заканчивается навстречу Нижний.Угол градиента можно изменить, указав угол в linear-gradient () функция:

 <холст>
    [Без поддержки холста]
 

Но когда вы указываете угол, направление меняется на противоположное, и градиент начинается с снизу, по крайней мере, на 0 градусов.Если бы вы хотели имитировать предыдущее поведение, вы бы нужно использовать угол 180 градусов.

 <холст>
    [Без поддержки холста]
 

Здесь угол 90 градусов используется для достижения горизонтального градиента — от оставили рука-сторона вправо.

 <холст>
    [Без поддержки холста]
 

А здесь градиент начинается в правом верхнем углу и переходит в внизу слева — под углом 45 градусов.

 <холст>
    [Без поддержки холста]
 

Это показывает вам, что вместо цветов, которые вы даете, распространяются одинаково через для всего холста вы можете указать цветовую границу — например, градиент сосредоточены вокруг точки 75% длины, которая градуирована (например, ширина или высота и т. д.).Используя несколько цветов (например, четыре или более), вы можете получить эффект полосатости в котором нет градуированных областей, а цвета просто меняются сразу из один к другому. Например:

 <холст>
    [Без поддержки холста]
 

Как упоминалось выше, здесь градиент не градуирован, а вместо этого цвет изменения происходят сразу.В градиенте используются несколько цветовых точек. Технические характеристики:

• красный 25% — красный цвет начинается с 0% и заканчивается в точке 25%. В весь градиент начинается с 0%, поэтому его не нужно оговаривать.
• белый 25%, белый 50% — белый цвет начинается с точки 25% и продолжается до 50%.
• желтый 50%, желтый 75% — желтый цвет начинается в точке 50% и продолжается до 75%.
• зеленый 75% — зеленый цвет начинается с 75% и заканчивается в точке 100%. В весь градиент заканчивается на 100%, поэтому его не нужно оговаривать.

Радиальные градиенты

Радиальные градиенты не сложнее, но это еще не все, так что есть немного больше запомните с точки зрения синтаксиса.Они могут быть довольно простыми, как это Первый пример показывает:

 <холст>
    [Без поддержки холста]
 

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

 <холст>
    [Без поддержки холста]
 

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

 <холст>
    [Без поддержки холста]
 

Радиальный градиент не обязательно должен начинаться в центре. Здесь мы указали круг вверху справа Модификатор как часть спецификации градиента, что означает что градиент начнется в правом верхнем углу холста.Вместо из ключевых слов вверху справа вы также можете использовать пиксели следующим образом:

 <холст>
    [Без поддержки холста]
 

Вы можете смешивать и сопоставлять значения пикселей с верхними и правыми ключевыми словами но для ясности я бы не советовал этого делать. Вы также можете использовать процентные значения как пиксели.

 <холст>
    [Без поддержки холста]
 

Радиальный градиент не обязательно должен начинаться в центре.Здесь мы указали круг вверху справа Модификатор как часть спецификации градиента, что означает Неудивительно, что градиент начинается в правом верхнем углу холста. Вместо из ключевых слов вверху справа вы также можете использовать пиксели следующим образом:

Повторяющиеся линейные градиенты

 <холст>
    [Без поддержки холста]
 

Если вы хотите указать градиент, который повторяется до конца кем бы ты ни был используя градиент, вы можете использовать функцию repeat-linear-gradient () или функция repeat-radial-gradient () (ниже) С помощью этой функции вы даете цвета, а также вы указываете ширину / высоту, на которой заканчивается градиент.Так и будет затем повторять до конца емкости.

Повторяющиеся радиальные градиенты

 <холст>
    [Без поддержки холста]
 

Вот хороший эффект, который достигается с помощью функции repeat-radial-gradient () . вместо функции radial-gradient () .После установки точки, в которой градиент заканчивается (в данном случае 50 пикселей), затем градиент повторяется, чтобы покрыть остальную часть необходимого Космос.

Пример эффективного использования

Как видно ниже, заменив фоновое изображение из этого демонстрационного файла: bar-background-image.html градиент можно использовать для хорошего эффекта, заменив фоновое изображение на CSS градиент на теге холста. Отсутствие необходимости рисовать изображение будет очень небольшой прирост производительности — хотя, если вы заметите разницу, я буду удивлен.

 <холст>
    [Без поддержки холста]
 

Радиальные градиенты CSS3 — веб-направления

Знакомство с радиальными градиентами CSS3

Недавно мы подробно рассмотрели линейные градиенты в CSS3. Если вы не читали это, вы можете потратить на это несколько минут, поскольку концепции очень похожи, и я не трачу столько времени в этой статье на основы градиентов, которые я уже рассмотрел. там.

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

Краткая история

Как и линейные градиенты, радиальные градиенты были впервые представлены в Webkit в 2008 году.Как и линейные градиенты, они все еще находятся в черновом варианте спецификации CSS3 и действительно все еще находятся в некотором состоянии изменения, поэтому более чем возможно окончательная указанная версия будет отличаться от описанной здесь. Как и в случае с линейными градиентами, радиальные градиенты, первоначально предложенные командой Apple Webkit, имели другой синтаксис и существенно отличались концептуальной основой от того, как они определены в настоящее время, и от того, как они поддерживаются в текущих браузерах. В Safari 5.1 все современные браузеры согласовали один и тот же синтаксис и концептуальную основу для радиальных градиентов, которые мы здесь и рассматриваем.Safari 4 и Chrome 10 и более поздние версии поддерживают совершенно другой синтаксис и модель радиальных градиентов, которые фактически устарели и которые мы здесь не будем рассматривать.

Что именно

Я думал долго и упорно о том, чтобы попытаться объяснить, что на самом деле происходит с радиальным градиентом (и для большинства людей, просто играя с ними, вероятно, лучший способ действительно схватиться с ними). Но, поскольку я еще не видел очень хорошего описания того, как именно работают радиальные градиенты, вот моя попытка.

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

Некоторые общие линии линейного градиента

Затем мы указываем два (или более) цвета для создания градиента вдоль этой линии.Градиент «плавно переходит» от одного цвета к другому по линии градиента. Итак, что именно означает «плавно затухает»? Чтобы получить все технические подробности, модуль CSS3 «Значения изображений и замененное содержимое» говорит: «Между двумя точками цвета цвет линии линейно интерполируется между цветами двух точек цвета, причем интерполяция происходит в предварительно умноженном пространстве RGBA». . Рад, что ты спросил? И если вы действительно хотите, чтобы запятнал линейную интерполяцию, в спецификации есть целый раздел по этому поводу.

Радиальные градиенты также определяют линию градиента, но на этот раз линия идет от центра эллипса наружу в каждом направлении к краю эллипса. Вдоль этой линии цвет также «плавно исчезает» от одной цветовой точки к другой.

Из линейных градиентов мы также знаем, что градиент может иметь промежуточные точки между начальным и конечным цветом. Неудивительно, что радиальные градиенты могут иметь границы цвета, заданные как определенный процент или значение длины вдоль градиента между начальным и конечным цветами.

Но где радиальные градиенты значительно отличаются от линейных, это форма и размер градиента, а также расположение градиента.

По сути, чтобы задать радиальный градиент, мы задаем градиент

• место
• форма
• размер
• одна или несколько цветовых точек

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

Эллипсы

Эллипс, показывающий большой и малый радиусы.

Эллипс — это то, что мы в просторечии называем овалом. Он отличается от круга тем, что его ширина и высота отличаются друг от друга (строго говоря, круг — это разновидность эллипса, ширина и высота которого равны).

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

Если вы проведете вертикальную линию через эллипс в его самой высокой точке и горизонтальную линию через него в самом широком месте, то место пересечения этих двух точек будет центром эллипса.Более длинная из этих двух линий называется большой полуосью или большим радиусом, а более короткая — малой полуосью или малым радиусом.

Из всего этого следует выделить ключевые концепции

1. Центр эллипса
2. Какие радиусы эллипса

Местоположение радиального градиента

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

Мы можем указать расположение центра эллипса по существу так же, как мы указываем расположение фонового изображения с помощью CSS-свойства background-position . Мы указываем горизонтальное положение фона и, необязательно, вертикальное положение, используя ключевые слова (левый, центральный правый или верхний, центральный, нижний), значения длины, процентные значения или некоторую их комбинацию. Например, у нас может быть

• слева внизу
• осталось 100%
• 0% низ
• 0% 100%

Все они указывают, что центр эллипса градиента должен находиться в левом нижнем углу фона элемента.

Если второе значение опущено, оно рассматривается как center (аналогично, если мы опускаем и первое значение, центр эллипса градиента находится в центре фона элемента).

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

 background-image: радиальный градиент (50% 50%, 

Обратите внимание, как значения центра по горизонтали и вертикали просто разделяются пробелом, а затем за парой следует запятая. Также обратите внимание, что это еще не градиент, а только его начало. Нам все еще нужно указать форму и размер, а также значения цвета.

Формы и размеры радиального градиента

Теперь мы указали расположение центра градиента, нам нужно указать форму и размер эллипса.Их можно указать одним из двух способов: неявно или явно .

Явные формы и размеры

Мы явно указываем форму и размер эллипса для нашего радиального градиента, указывая длины большого и малого радиусов, используя длину или процентное значение. (по состоянию на июль 2011 года этот аспект радиальных градиентов не поддерживался ни одним браузером, поэтому мы рассмотрим это только вкратце).

Например, мы могли бы указать ширину эллипса градиента как 50% ширины фонового элемента и 30% высоты элемента со значениями 25% 15% (обратите внимание, что эти значения определяют радиус , что составляет половину ширины или высоты).Если мы укажем одинаковые значения для ширины и высоты, тогда два радиуса будут одинаковой длины, и поэтому мы получим круговой градиент. Вот как будет выглядеть наш градиент с явно объявленными шириной и высотой

 background-image: радиальный градиент (50% 50%, 25% 15%, 

Обратите внимание, значения ширины и высоты разделены только пробелом, а затем мы ставим за ними запятую.

Неявные формы и размеры

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

Форма

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

 background-image: радиальный градиент (50% 50%, эллипс 

Теперь пора задать размер градиента.

Размер

Если мы неявно объявляем размер градиента, мы указываем размер формы градиента, используя одно из нескольких ключевых слов.Каждое из этих ключевых слов определяет алгоритм определения размера градиента. Эти алгоритмы иногда немного отличаются для эллипсов и кругов. Хотя поначалу они могут показаться довольно сложными, они приобретут смысл, если вы поймете ключевой принцип каждого из них. Вот мой способ понять, что происходит с каждым ключевым словом.

Есть два дополнительных ключевых слова: содержит и охватывает .Ключевое слово содержит — это то же самое, что ближайшая сторона , а ключевое слово cover то же самое, что дальний угол .

Здесь мы зададим нашему градиенту размер , ближайший угол .

 background-image: radial-gradient (50% 50%, ближайший угол эллипса, 

Как и в случае расположения центра градиента, два значения ключевых слов разделяются пробелом, а затем следуют запятые.

Цветные стопы

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

Когда точки цвета указаны только со значениями цвета, они равномерно делят размер градиента. Таким образом, если есть 3 точки цвета, каждый цвет покрывает треть формы градиента и плавно переходит в соседние точки цвета.

Рассмотрим пример. Вот простой круговой градиент.Его размер неявно задан таким образом, чтобы он касался ближайшего к центру размера, и имеет три цветовых ограничителя: красный, зеленый и синий.

 background-image: radial-gradient (центр, центр, ближайшая сторона круга, # ff0000, # 00ff00, # 0000ff) 

Обратите внимание, что каждая остановка разделена запятой.

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

Если мы добавим больше остановок, они будут просто равномерно распределены по размеру, как здесь, где у нас есть 6 цветовых точек, равномерно распределенных по размеру градиента.

 background-image: radial-gradient (центр, центр, ближайшая сторона круга, # ff0000, # ff9f40, # fff81f, # 050a99, # 0b990f, # 911c99, # d24fe0) 

Цветовые остановки, как мы уже упоминали, могут дополнительно указывать длину или процентное значение. Итак, мы можем сделать цветные остановки на определенном расстоянии друг от друга, например:

 background-image: radial-gradient (центр, центр, ближайшая сторона круга, # ff0000 25%, # 19ff30 90%, # 2f3ced 100%) 

Обратите внимание, цвет и положение каждой остановки разделены пробелом, и снова каждая остановка разделена запятой.

Также можно использовать значения длины, такие как пикселей, и пикселей, вместо процентов, а также смешивать все три формы цветовой остановки (только цвет, процентное соотношение и длина). Имейте в виду, что процентные градиенты будут адаптироваться к размеру элемента, поэтому, когда он увеличивается или уменьшается в размере, градиент остается пропорциональным размеру элемента, и поэтому во многих случаях процентный градиент останавливается (или указывается только простой цвет. по цвету), вероятно, будет наиболее гибким выбором.

Раскраска внутри и снаружи градиента

Вы могли заметить, что в наших примерах за пределами формы градиента находится сплошной цвет фона, цвет которого соответствует последней указанной границе цвета. Как только градиент завершится, какой бы ни был цвет отделки, он заполнит оставшуюся часть фона элемента.

В этом последнем примере вы могли также заметить, что то же самое происходит внутри формы градиента. Наша первая остановка цвета — 25%, поэтому от центра градиента до 25% его ширины у нас есть сплошной красный цвет.Красный плавно переходит в следующую цветовую точку, зеленый, только с 25% от центра градиентной формы.

Позиции остановки могут фактически превышать 100% размера градиента, поэтому мы можем заполнить весь элемент градиентом, указав конечную позицию остановки, достаточно большую, чтобы весь элемент был покрыт градиентом.

Повторяющиеся градиенты

Как и линейные градиенты, радиальные градиенты могут повторяться. Это мы указываем с немного другим именем значения — repeat-radial-gradient .Если мы возьмем наш предыдущий градиент и повторим его, мы получим

 background-image: repeat-radial-gradient (центр, центр, ближайшая сторона круга, # ff0000 25%, # 19ff30 90%, # 2f3ced 100%) 

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

 background-image: radial-gradient (центр, центр, ближайшая сторона круга, # ff0000 0%, # 19ff30 29%) 

Теперь, если мы повторим градиент, эффект будет намного заметнее.

 background-image: repeat-radial-gradient (центр, центр, ближайшая сторона круга, # ff0000 0%, # 19ff30 29%) 

Делаем тяжелую работу за вас

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

Как и наш инструмент линейного градиента, он не только помогает создавать радиальный градиент, но и имеет некоторые другие функции.

• Вы можете опубликовать в Твиттере ссылку на созданный вами градиент, просто нажав кнопку
• Вы можете скопировать URL своего градиента и отправить его кому-нибудь по электронной почте, поместить его в ссылку (как я сделал для многих из этих примеров) или иным образом поделиться им
• С помощью магии HTML5 localStorage он запоминает ваш последний градиент и другие настройки при следующем посещении
• Добавляет префиксы поставщиков для всех современных браузеров (как опция)
• Добавляет начальный цвет в качестве цвета фона для старых браузеров
• Есть связанный инструмент для создания градиентов Webkit в старом стиле
• Он предоставляет самую последнюю информацию о совместимости браузера (при условии, что я не забываю обновлять ее по мере изменения браузеров)
• Выглядит очень красиво, конечно, благодаря градиентам CSS

Так что попробуйте и дайте нам знать, что вы думаете.

Совместимость с браузером

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

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

1. включают префиксы поставщика (-o-, -ms-, -moz, -webkit-), а также стандартную форму значений градиента
2. включает цвет фона для браузеров, которые не поддерживают градиенты.Убедитесь, что текст элемента с градиентным фоном имеет достаточный контраст с цветом фона элемента

Поддержка браузера

Краткий обзор текущей поддержки браузерами радиальных градиентов CSS (на основе информации из фантастической статьи «Когда я могу использовать»).

• Safari 4 представил радиальные градиенты, хотя, как уже отмечалось, с другим синтаксисом, нежели описанный здесь. Префикс поставщика -webkit- требуется для градиентов в Safari 4.1 и новее.
• Safari 5.1 представляет подробно описанный здесь синтаксис, а также продолжает поддерживать синтаксис старого стиля. Опять же, требуется префикс поставщика -webkit-.
• Firefox 3.6 был первым браузером, поддерживающим текущий синтаксис градиента. Префикс -moz- является обязательным, и в настоящее время он поддерживается только в фоновом режиме.
• Chrome 10 и выше (и, вероятно, более ранние версии) поддерживает синтаксис градиентов, подробно описанный здесь. Префикс -webkit- обязателен.
• Opera 11.1 введена поддержка линейного градиента, но в настоящее время не поддерживаются радиальные градиенты любого вида
• Internet Explorer 10 также поддерживает радиальные градиенты CSS с префиксом -ms- и также только для фона.

Градиенты могут потребовать значительных вычислительных ресурсов и могут вызвать трудности при работе браузеров на устаревшем оборудовании. В настоящее время они не могут быть анимированы с помощью переходов CSS в любом браузере, поддерживающем переходы.

Ссылки, галереи, статьи и др.

Вот несколько мест, где можно узнать больше.

Обертка

Я надеюсь, что эта статья помогла немного глубже понять, что на самом деле происходит с радиальными градиентами, и надеюсь, что инструмент радиального градиента сделает работу с ними приятной. Дайте мне знать, если вы нашли их полезными в твиттере!

Градиентный фон для электронной почты

Зачем использовать сплошной фон, если можно добавить блики градиентов в свое электронное письмо в формате HTML.

Чрезвычайно легко реализовать, и я объясню, как это сделать, а также покажу, как сделать так, чтобы он плавно переходил в сплошной фон, если почтовый клиент не поддерживает градиент CSS3.

CSS3 Градиент

С градиентом CSS3 требуется всего лишь строка CSS, чтобы добавить фон градиента. Нам больше не нужно создавать градиентные изображения и называть их в CSS как фоновое изображение. На один запрос к серверу меньше. Вы можете создать линейный, а также радиальный градиент с двумя или более цветами. Большинство основных браузеров поддерживают эту спецификацию, и у нас есть префикс производителя для некоторых браузеров.

Как насчет поддержки в почтовых клиентах. Все ли почтовые клиенты поддерживают градиент CSS3? Нет, не все почтовые клиенты поддерживают градиент CSS3, но мы всегда можем вернуть его к сплошному фону.Тот факт, что некоторые почтовые клиенты (в основном более старые версии Outlook) не поддерживают эту спецификацию, не означает, что мы не должны отправлять электронную почту с красивым градиентным фоном пользователям, которые проверяют свою электронную почту в современных клиентах.

Я не собираюсь вдаваться в подробности CSS3 Gradient. В Интернете есть масса ресурсов, на которых вы можете учиться. Если вы используете Google для генератора градиентов CSS, вы найдете несколько веб-сайтов, которые сгенерируют его для вас. Объявление градиента CSS, которое мы будем использовать для нашего шаблона, показано ниже:

Это создаст диагональный (45 градусов) фон с линейным градиентом от цвета # 8e36e0 до цвета цвета # 164b92 .

Использование градиента CSS3 в электронном письме

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

В этом шаблоне мы применяем градиентный фон в ячейке таблицы, которая охватывает весь документ и обертывает основной CTA нашего электронного письма. HTML-код ниже показывает, как именно это сделать.

Давайте посмотрим на ключевые строки кода электронной почты:

• Строка 1
  Эта таблица будет основой нашего электронного шаблона.Полная ширина, белый фон, без интервала и заполнения ячеек.
• Строка 3
  Это ячейка таблицы, в которую мы собираемся добавить наш градиент CSS3 как встроенный стиль. Здесь важно отметить атрибут bgcolor со значением # 164c92 . Также обратите внимание, как это отображается перед встроенным стилем, имеющим стиль градиента. Порядок размещения не имеет значения для почтового клиента, который не поддерживает градиент CSS3, но в других почтовых клиентах, если атрибут bgcolor идет после встроенного стиля, фон градиента будет заменен сплошным цветом, назначенным атрибуту bgcolor .
  Вот как мы устанавливаем возврат к сплошному фону для почтовых клиентов, которые не поддерживают градиент CSS3.
• Строка 6 — Строка 11
  Эта строка предназначена для того, чтобы заставить градиентный фон работать для Outlook с использованием условного CSS, аналогичного тому, который мы используем для таргетинга IE7, IE8 или IE lt 9. Но с помощью электронной почты мы проверяем MSO для таргетинга версии Outlooks. Обратите внимание на mso-width-percent: 1000 , это сделает прямоугольник на 100% с. fillcolor = ”# 8e36e0 ″ — это начальный цвет, а color2 =” # 164c92 ″ — конечный цвет градиента.
• Строка 13 — Строка 19
  Это будет таблица, в которой мы будем кодировать CTA. Все, что мы хотим заключить в градиентную ячейку, должно быть здесь.
• Строка 30 — Строка 34
  Сюда помещаются другие копии электронной почты за пределами градиентной ячейки.

Я не хочу утомлять вас дополнительным чтением. Вы сможете лучше понять, как только загрузите исходный код (просто нажмите кнопку загрузки) и откроете его в текстовом редакторе.

— CSS3.Информация

Это опубликовано в блоге CSSWG.

На прошлой неделе на CSSWG F2F я поднял вопрос о том, что радиальные градиенты, которые мы обсуждали, были нечитаемы для меня и, вероятно, поэтому для большей части предполагаемой аудитории. Глядя на синтаксис градиента, было совсем не очевидно, какими могут быть различные числа и длины.

 радиальный градиент (60% 43%, 25 пикселей 25 пикселей, # b03 99%, прозрачный) 

Итак, Таб Аткинс, Дэвид Барон, Брэд Кемпер, Брайан Мантос и я придумали альтернативный синтаксис.

 радиальный градиент (круг до 25 пикселей при 60% 43%, # b03 99%, прозрачный) 

Нам хотелось бы узнать ваше мнение о том, что является предпочтительным и почему.

Общие формы (очень грубо говоря):

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

Итак, что лучше или проще для чтения, текущий синтаксис WD или текущий синтаксис ED (и почему)?

линейный градиент — CSS 3 файла

Градиенты — это плавные переходы от одного цвета к другому.В настоящее время поддерживаются только градиенты в качестве фоновых изображений (через свойство background).

Совместимость

-webkit-linear-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+
linear-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Не поддерживается Internet Explorer до версии 10 и Opera Mini. Для получения подробной информации о совместимости посетите caniuse.com.

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

Firefox 16 + Safari 5.1 + Chrome 26 + Internet Explorer 10 + Opera 12.1+
iOS 5 + Android 4 + Blackberry 10 + IE Mobile 10+

Общее описание

Несколько градиентов можно назначить через запятую. По умолчанию градиенты заполняют весь фон. Для мозаичных градиентов см. Повторяющийся линейный градиент. Возможны значения rgba и transparent для всей информации о цвете.

фон : линейный градиент (1 слева, 2 красных, 3 синих 4 30%, 5 зеленых)

1. Необязательно.Начальная точка градиента, определяющая прямую линию, по которой градиент проходит до конечной точки. Применяются общие значения из свойства background-position. В этом случае left определяет градиент, идущий слева направо, left top будет диагональным градиентом, идущим от верхнего левого угла к нижнему правому. Также может быть углом, при котором 0 градусов указывает вправо, 90 градусов — вверх, а -45 градусов — от верхнего левого угла до нижнего правого. По умолчанию градиент сверху вниз (вверху).
2. Начальный цвет (первая остановка цвета).Также может быть усилено положением остановки для перемещения его положения на оси градиента (например, на 4).
3. Необязательно. Цветной стоп. В этом случае градиент не просто переходит от красного (2) к зеленому (5), но усиливается синей полосой цвета посередине. Возможны несколько цветовых остановок (возможно, усиленных положением остановки, например, 4), разделенных запятыми.
4. Необязательно. Остановить позицию. Определяет положение границы цвета на оси градиента. В этом случае синий устанавливается на 30% вместо 50% (что было бы естественным поведением).Также может быть значение длины (например, 20 пикселей).
5. Конечный цвет (последняя остановка цвета). Также может быть продлен стоп-позицией (например, в позиции 4).

Примеры

Диагональный градиент с несколькими цветовыми ограничителями

фон: линейный градиент (1225 градусов, 2 красных, 3 зеленых 20%, 4 желтых 70%, 5 черных)

1. Начальная точка. Градиент начинается в верхнем правом углу и продолжается до нижнего левого угла. То же, что и -135град.
2. Начальный цвет красный.
3. Цветной стоп.Цвет зеленый на 20% по оси градиента (вместо 33%, что было бы его естественным положением).
4. Цветной стоп. Цвет желтый на 70% по оси градиента (вместо 66%).
5. Конечный цвет белый.

Угловой градиент с только цветными ограничителями

фон: линейный градиент (1 105 градусов, 2 черных 20%, 3 пурпурных 80%)

1. Начальная точка. Уклон имеет угол 105 градусов.
2. Цветной стоп. Начальный цвет черного перемещается на 20% по оси градиента (вместо 0%).
3. Цветной стоп. Конечный цвет пурпурного перемещается на 80% по оси градиента (вместо 100%).

Дополнительная литература

Для получения дополнительной информации см. Сайт W3C (новый синтаксис), сайт Safari и сайт MDN (включая информацию о совместимости для более старых версий браузеров).

Градиенты — это плавные переходы от одного цвета к другому. В настоящее время поддерживаются только градиенты в качестве фоновых изображений (через свойство background).

Совместимость

-webkit-radial-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+
радиально-градиентный Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Не поддерживается Internet Explorer до версии 10 и Opera Mini. Для получения подробной информации о совместимости посетите caniuse.com.

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

Firefox 16 + Safari 5.1 + Chrome 26 + Internet Explorer 10 + Opera 12.1+
iOS 5 + Android 4 + Blackberry 10 + IE Mobile 10+

Общее описание

Несколько градиентов можно назначить через запятую.По умолчанию градиенты заполняют весь фон. Для мозаичных градиентов см. Repeating-Radial-gradient. Возможны значения rgba и transparent для всей информации о цвете.

фон: радиальный градиент (1 60 пикселей 45 пикселей, 2 круга 3 ближайшей стороны, 4 красных, 5 синих 6 60%, 7 зеленых)

1. Необязательно. Центр градиента. Применяются общие значения из свойства background-position. В этом случае 20px 40px определяет, что центр градиента находится на 20px от левой стороны содержащего поля и 40px от вершины.Также может быть процентное отношение к размерам коробки. По умолчанию центр, который также применяется ко второму значению, если задано только одно.
2. Необязательно. Форма градиента, в данном случае круглая. По умолчанию используется эллипс.
3. Необязательно. Размер градиента. Может быть определено ключевым словом или длиной объяснения. Доступные ключевые слова: ближайшая сторона, самый близкий угол, самая дальняя сторона, самый дальний угол. Смотри описание. Если указана длина, она относится к радиусам и должна состоять из двух значений: горизонтальной и вертикальной длины.По умолчанию самый дальний угол.
4. Начальный цвет (первая остановка цвета). Также может быть усилено положением остановки для перемещения его положения на луче градиента (например, на 6).
5. Необязательно. Цветной стоп. В этом случае градиент не просто переходит от красного (4) к зеленому (7), а усиливается синей полосой цвета посередине. Возможны несколько цветовых остановок (возможно, продленных положением остановки, например, 6), разделенных запятыми.
6. Необязательно. Остановить позицию. Определяет положение точки цвета на луче градиента.В этом случае синий устанавливается на 60% вместо 50% (что было бы естественным поведением). Также может быть значение длины (например, 20 пикселей).
7. Конечный цвет (последняя остановка цвета). Также может быть продлен стоп-позицией (например, 6).

Описание ключевых слов размера

Примечание. Кружки на прилагаемой иллюстрации показывают внешние формы различных градиентов, сформированных с помощью различных ключевых слов.

1. ближайшая сторона: градиент имеет размер так, чтобы его внешняя форма соответствовала стороне прямоугольника градиента, которая находится ближе всего к его центру.Если указан эллипс, стороны в обоих измерениях встречаются.
2. farthest-side: градиент имеет размер так, чтобы его внешняя форма соответствовала стороне рамки градиента, которая наиболее удалена от его центра. Если указан эллипс, стороны в обоих измерениях встречаются.
3. ближайший угол: градиент имеет размер так, чтобы его внешняя форма проходила через угол поля градиента, который находится ближе всего к его центру. Если указан эллипс, ему задается такое же соотношение сторон, как если бы была указана ближайшая сторона (1).
4. farthest-corner: градиент имеет размер так, чтобы его внешняя форма проходила через самый дальний от центра угол поля градиента (значение по умолчанию). Если указан эллипс, ему дается такое же соотношение сторон, как если бы была указана самая дальняя сторона (2).

Примеры

Круговой градиент, заканчивающийся в ближайшем углу

фон: радиальный градиент (1 60% 55%, 2 круга 3 ближайших угла, 4 красных, 5 зеленых 20%, 6 желтых 70%, 7 черных)

1. Центр градиента находится на 60% ширины прямоугольников по горизонтали и 55% от высоты по вертикали.
2. Круговой градиент.
3. Градиент имеет размер так, чтобы его внешняя форма проходила через ближайший угол рамки градиента.
4. Начальный цвет красный.
5. Цветной стоп. На градиентном луче зеленый цвет составляет 20% (вместо 33%, что было бы его естественным положением).
6. Цветной стоп. Цвет на градиентном луче желтый на 70% (вместо 66%).
7. Конечный цвет черный.

Эллиптический градиент, заканчивающийся на дальней стороне

Примечание. Поскольку значение по умолчанию (соответственно форма по умолчанию) для радиального градиента — эллипс, его не нужно указывать.

фон: радиальный градиент (1 20 пикселей 40 пикселей, 2 крайние стороны, 3 белые 20%, 4 пурпурные)

1. Центр градиента находится на расстоянии 20 пикселей слева и 40 пикселей сверху.
2. Градиент имеет размер так, чтобы его внешняя форма соответствовала самым дальним сторонам.
3. Цветной стоп. Начальный белый цвет перемещается на 20% по оси градиента (вместо 0%).
4. Конечный цвет пурпурный.

Дополнительная литература

Для получения дополнительной информации см. Сайт W3C (новый синтаксис), сайт Safari и сайт MDN (включая информацию о совместимости для более старых версий браузеров).

Работает аналогично linear-gradient, но автоматически повторяет остановки цвета бесконечно в обоих направлениях, при этом их позиции смещаются на величину, кратную разнице между последней позицией цветовых точек и положением первых.

Совместимость

-webkit-linear-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+
linear-gradient Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Не поддерживается Interent Explorer до версии 10 и Opera Mini.Для получения подробной информации о совместимости посетите caniuse.com.

Firefox 16 + Safari 5.1 + Chrome 26 + Internet Explorer 10 + Opera 12.1+
iOS 5 + Android 4 + Blackberry 10 + IE Mobile 10+

Общее описание

Для получения информации об общем синтаксисе см. Linear-gradient.

Примеры

Плавный градиент повторяется четыре раза

фон: повторяющийся линейный градиент (1 красный, 2 зеленых 18%, 3 синих 25%)

1. Начальный цвет красный.
2. Цветной стоп. Цвет зеленый на 18% по оси градиента (вместо 12,5%, что было бы его естественным положением).
3. Цветной стоп. Цвет синий на 25% по оси градиента. Положение последней остановки определяет, как часто градиент повторяется. Поскольку 25% составляет четверть 100%, градиент повторяется четыре раза.

Резкий переход градиента повторяется пять раз

фон: повторяющийся линейный градиент (1 красный, 2 красных 11 пикселя, 3 белых 11 пикселя, 4 белых 22 пикселя)

1. Начальный цвет красный.
2. Цветной стоп. Цвет красный на 11 пикселей по оси градиента.
3. Цветной стоп. Цвет белый на 11 пикселей по оси градиента. Поскольку два цвета установлены в одной позиции, они внезапно меняются, а не плавно переходят в розовый.
4. Цветной стоп. Цвет белый, 22 пикселя по оси градиента. Положение последней остановки определяет, как часто градиент повторяется. Предполагая, что высота прямоугольника составляет 110 пикселей, градиент вписывается в него пять раз из-за его длины 22 пикселей.

Дополнительная литература

Для получения дополнительной информации см. Сайт W3C (новый синтаксис), сайт Safari и сайт MDN (включая информацию о совместимости для более старых версий браузеров).

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

Совместимость

-webkit-radial-gradient Safari 5.1+ iOS 5+ Android 4+ Blackberry 10+ IE Mobile 10+
радиально-градиентный Firefox 16+ Chrome 26+ Internet Exlorer 10+ Opera 12.1+

Не поддерживается Internet Explorer до версии 10 и Opera Mini. Для получения подробной информации о совместимости посетите caniuse.com.

Firefox 16 + Safari 5.1 + Chrome 26 + Internet Explorer 10 + Opera 12.1+
iOS 5 + Android 4 + Blackberry 10 + IE Mobile 10+

Общее описание

Для получения информации об общем синтаксисе см. Radial-gradient.

Примеры

Плавный градиент повторяется два раза

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

фон: повторяющийся радиальный градиент (1 ближайшая сторона, 2 красных, 3 зеленых 20%, 4 синих 50%)

1. Градиент подбирается таким образом, чтобы его внешняя форма соответствовала ближайшей стороне.
2. Начальный цвет красный.
3. Цветной стоп. Цвет зеленый на 20% по оси градиента (вместо 25%, что было бы его естественным положением).
4. Цветной стоп. Цвет синий на 50% по оси градиента. Положение последней остановки определяет, как часто градиент повторяется. Поскольку 50% составляет половину от 100%, градиент повторяется два раза (на основе объявления ближайшей стороны в 1).

Резкий переходный градиент повторяется бесконечно

фон: повторяющийся радиальный градиент (1 30% 40%, 2 красных, 3 красных 11 пикселя, 4 черных 11 пикселя, 5 черных 22 пикселя)

1. Центр градиента находится на 30% ширины прямоугольников по горизонтали и 40% от высоты по вертикали, в результате получается эллиптическая форма.
2. Начальный цвет красный.
3. Цветной стоп. Цвет градиента — красный, размер 11 пикселей.
4. Цветной стоп. Цвет градиентного луча — черный с разрешением 11 пикселей. Поскольку два цвета установлены в одном и том же положении, они внезапно меняются, вместо того, чтобы плавно переходить в рубиновый оттенок.

   No related posts.