Градиенты на CSS3: круговые и эллиптические. Радиальный градиент

Градиент (от лат. Gradiens - шагающий) - характеристика, показывающая направление наискорейшего возрастания некоторой величины, значение которой меняется от одной точки пространства к другой. Градиент создаёт заливку с плавным переходом между двумя или несколькими цветами. Применяется очень часто, поэтому отличное владение этим инструментом является обязательным условием эффективной работы в Фотошоп.
Градиент можно применить непосредственно к содержимому слоя или использовать новый слой заливки градиентом (градиент будет находиться на собственном слое и обладать маской слоя, с помощью которой можно маскировать пиксели слоя).
Значок Градиент (1 ) вы найдёте в одной группе с инструментом Заливка (Paint Bucker), клавиша G (или Shift + G для переключения между ними).

Вид градиента задаётся кнопками на панели параметров (2 )
Линейный градиент (Linear Gradient) – переход осуществляется по прямой линии вдоль определённого направления.

Радиальный градиент (Radial Gradient) – изменение цвета равномерно во все стороны от центральной точки.

Конусовидный градиент (Angle Gradient) – переход цвета по кругу с центром в заданной точке по часовой стрелке.

Зеркальный градиент (Reflected Gradient) – два линейных градиента, которые распространяются от начальной точки в противоположных направлениях.

Ромбовидный градиент (Diamond Gradient) – образующие линии выстраиваются в виде ромба.

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

Окно редактирования градиента открывается при щелчке на образце градиентной заливки (3 ).
Раздел Наборы (Presets) содержит готовые градиенты.
Имя (Name) – имя градиента. Заказной (Custom) – это градиент с пользовательскими настройками.
Градиент (Gradient Type). Есть два варианта: Непрерывный (Solid) и Шумовой (Noise)
Сглаживание (Smoothness) – мягкость перехода цветов в градиенте.

Если вы хотите редактировать уже существующий градиент, щёлкните на его образце.
Обратите внимание на цветовую полосу в центре окна – это образец редактируемого градиента с переходами цвета и прозрачности. Под полосой и над ней расположились маркеры (4 ) (квадратики с треугольниками над или под ними). Те, что под полосой отвечают за переходы цвета. Если вы щёлкнете кнопкой мыши на каком-нибудь маркере, треугольник над ним станет цветным, значит, маркер стал активным и готов к редактированию. Что можно сделать? Можно переместить его в любую сторону вдоль цветовой полосы, можно поменять его цвет. Для этого щёлкните на окошке Цвет (Color) (5 ) и в окне Цветовая палитра (Color Picker) выберите нужный оттенок (6 ).

Если вы щёлкнете на любом свободном месте между маркерами, появится новый маркер, который вы тоже можете двигать и настраивать. Перемещать маркер можно мышью, или меняя числовое значение в поле Позиция (Location). 0% - левый край цветовой полосы, 100% - правый.

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

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

Если же необходимо удалить ненужный цветовой ограничитель, просто передвиньте его за пределы полосы с цветовыми переходами или выделите и нажмите одну из кнопок Удалить (Delete): нижнюю кнопку – для цветовых маркеров, верхнюю – для маркеров прозрачности.

Создадим новый градиент. Откроем диалоговое окно (щёлкнув по окошку 3 ). Выберите цвет заливки для левого цветового маркера, кликните по правому маркеру (8 ), установите для него свой цвет, в поле Имя (Name) (10 ) введите его название и нажмите кнопку Новый (New) (11 ), ваш градиент появится в окошке Наборы (Presets), нажмите ok.

Перевод : Оксана Гудкова.

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

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

Градиенты в CSS3 объявляются при помощи параметра background-image. Это связано с намерением обеспечить лучшую совместимость, когда нам также, в одном правиле, нужно будет использовать background-color. Затем, для того чтобы создать радиальный градиент, мы просто вызываем его при помощи функции radial-gradient(). Есть 4 значения, которые нужно включить в функцию, чтобы градиент был создан правильно.

Первое значение определяет позицию градиента. Мы можем использовать описательные ключевые слова вроде top, bottom, center и left, либо мы можем указывать более конкретные значения вроде 50% 50% для того, чтобы градиент был по центру или 0% 0% для того, чтобы градиент начинался в верхнем левом углу.

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

Что касается параметра размера градиента, то здесь мы можем использовать следующие 6 аргументов:

* closest-side – Форма градиента рассчитана по направлению к стороне блока, которая находится ближе всего к центру градиента (для круговых градиентов), либо по направлению к вертикальным и горизонтальным сторонам (для эллипсов).
* closest-corner - Форма градиента рассчитана по направлению к ближайшему углу блока от его центра.
* farthest-side – аргумент немного похож на closest-side, за исключением того, что форма градиента направлена к дальней стороне блока от центра градиента (либо вертикальные, либо горизонтальные).
* farthest-corner - Форма градиента направлена к дальнему углу блока от центра градиента.
* contain – то же самое, что и closest-side.
* cover – то же самое, что и farthest-corner.

Наконец, третий и четвертый параметры определяют комбинацию цветов. Итак, давайте посмотрим, каким образом мы пишем код для создания эллиптических градиентов, и на этот раз мы будем использовать значение cover в параметре gradient size, чтобы градиент распространялся очень широко, покрывая контейнер.

Body {
background-image: radial-gradient(center center, ellipse cover, #ffeda3, #ffc800);
}

Для создания круговых градиентов мы можем сделать следующее:

Body {
background-image: radial-gradient(center center, circle cover, #ffeda3, #ffc800);
}
Как видно из названия, форма градиента будет образовывать круг.

Браузерная поддержка

Только учтите, что на данный момент практически все браузеры вряд ли смогут полностью поддерживать данный параметр, поэтому для многих браузеров понадобится прописывать префиксы. Итак, полный код, который будет работать во всех перечисленных браузерах будет выглядеть так (IE10+, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ и Opera 11+).

Body {
background-image: radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
background-image: -o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
background-image: -ms-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
background-image: -moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
background-image: -webkit-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
}
Не забудьте посмотреть демо, и скачать исходный код.

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

«Градиент - вид заливки в компьютерной графике, в которой необходимо задать цвет и прозрачность определённых (ключевых) точек, а цвет и прозрачность остальных точек рассчитываются относительно них по определённым математическим алгоритмам. Таким образом можно получать плавные переходы из одного цвета в другой, задав координаты и цвет начальной и конечной точек.» Википедия

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

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

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

Div {/*-префикс-linear-gradient(стартовый цвет,финишный цвет);*/ background: -moz-linear-gradient(#FFF, #000); background: -ms-linear-gradient(#FFF, #000); background: -o-linear-gradient(#FFF, #000); background: -webkit-linear-gradient(#FFF, #000); }

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

Пойдем дальше и рассмотрим более сложный пример — изменим направление градиента. Направление в синтаксисе носит название point и требует двух значений — откуда и куда. Всего есть пять значений: top , bottom , left , right и center. Соответственно, в написании направления нужно использовать два значения. Первым идет «откуда», вторым — «куда». Но есть небольшая тонкость — если указано только одно расположение — второе по умолчанию будет center . Учитывайте это в своих проектах.

В примере выше не указано направление градиента, поэтому по умолчанию выбирается направление top center.

Div { background: linear-gradient(center top, #FFF, #000); } div { background: linear-gradient(top, #FFF, #000); }

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

Как альтернатива направлению, а скорее, как дополнение — в записи можно использовать углы, значение которых может задаваться в нескольких величинах, среди которых градусы, радианы и прочие геометрические штуки. Но для простоты — лучше использовать градусы, так будет понятно для всех. Градуировка расположена по часовой стрелке — 0 или 360 это верх, 90 — право, 180 — низ и 270 — лево. Допустима запись со знаком минус — в таком случае градуировка идет против часовой стрелки.

Рассмотрим несколько примеров, для понимания процесса:

Ex1 { background: linear-gradient(left, #FFF, #000); } ex2 { background: linear-gradient(right, #FFF, #000); } ex3 { background: linear-gradient(225deg, #FFF, #000); }

Первый вариант — слева направо, второй — справа налево, третий — 225градусов. Градусы позволяют более точно направить градиент, чего нельзя добиться с помощью слов.

Следующий интересный момент при работе с градиентами —

Добавление стоп-цвета

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

Div {background: linear-gradient(left,#000,#FFF,#000);}

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

Ex1 {background: linear-gradient(left,#000,#FFF,#000);} ex2 {background: linear-gradient(left,#000,#FFF 75%,#000);} ex3 {background: linear-gradient(bottom,#000,#FFF 20px,#000);} ex4 {background: linear-gradient(45deg,#000,#FFF,#000,#FFF,#000);}

Результат на картинке:

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

Второй пример — тоже самое, только указывается, в каком месте будет находится стоп-цвет. В данном случае — 75% от начала. Синтаксис прост — на примере видно. После значения цвета указываем позицию в процентах. Никаких запятых ставить не нужно.

Третий пример — показывает, что значение позиции стоп-цвета можно указывать не только в процентах, но и в пикселах (а также во всех других единицах, которые CSS понимает, но в основном используются проценты и пикселы)

Четвертый — пять стопов цвета, измененное направление. Все достаточно просто.

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

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

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

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

Простейший синтаксис выглядит так:

Div {background: radial-gradient(#FFF,#000);}

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

Div { background: -moz-radial-gradient(#FFF, #000); background: -ms-radial-gradient(#FFF, #000); background: -webkit-radial-gradient(#FFF, #000); }

Результат выполнения кода — на картинке:

Рассмотрим код посложнее:

Div { background: radial-gradient(contain circle, #FFF, #000); }

Обратите внимание, в примере два селектора, о которых говорилось выше — форма и размер(положение). Размером значение селектора назвать сложно, скорее это расположение. Но в официальной документации этот селектор обозначен как size, поэтому будем называть его размером. Circle — как раз означает, что градиент будет круглым, а не эллиптическим. Contain — одно из ключевых слов, которое может принять селектор размера. Я опишу каждое, чтобы было понятнее:

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

Несколько примеров для наглядности:

Ex1 { background: radial-gradient(circle farthest-side, #000, #FFF); } ex2 { background: radial-gradient(left,circle farthest-side,#000,#FFF); } ex3 { background: radial-gradient(right top,circle cover,#FFF,#000); } ex4 { background: radial-gradient(80% 50%,circle closest-side,#FFF,#000); }

Результат выполнения каждого кода:

Первый пример — круглый градиент, который распространяется к дальней стороне (используется farthest-side )

Второй — центр находится слева, градиент распространен к дальней стороне.

Третий — центр справа сверху, градиент к дальнему углу.

Четвертый — центр расположен в точке, 50% по ширине, 80% по высоте и круглый градиент к ближайшей стороне.

Добавление стоп-цвета

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

Ex1 { background: radial-gradient(circle farthest-side,#000,#FFF,#000); } ex2 { background: radial-gradient(circle farthest-side,#000,#FFF 25%,#000); } ex3 { background: radial-gradient(left,circle farthest-side,#FFF,#000 25%,#FFF 75%,#000); } ex4 { background: radial-gradient(40% 50%,circle closest-side,#FFF,#FFF 25%,#000 50%,#FFF 75%,#000); }

Из кода все видно, вы уже опытные градиентщики

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

CSS3 видели и пробовали все, кого он мог заинтересовать. И закругленные уголки и падающие тени мы уже можем генерировать без лишнего труда.

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

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

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

Linear-gradient

На самом деле существует сразу несколько видов CSS3 градиентов. Это самый простой градиент.
div {
background-color: #444444;
background-image: -webkit-gradient (linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4-5, Chrome 1-10, iOS 3.2-4.3, Android 2.1-3.0 */
background-image: -webkit-linear-gradient (top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
background-image: -moz-linear-gradient (top, #444444, #999999); /* Firefox 3.6+ */
background-image: -ms-linear-gradient (top, #444444, #999999); /* IE 10+ */
background-image: -o-linear-gradient (top, #444444, #999999); /* Opera 11.10+ */
background-image: linear-gradient (to bottom, #444444, #999999);
}

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

У Safari до версии 5 и у Chrome до версии 10 был свой собственный синтаксис, да и IE 10 с Opera добавляют свои префиксы, увеличивая количество кода.

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

Repeating-linear-gradient

Позволяет повторять градиент, дает возможность создавать фоновые паттерны.

Div {
background-color: #444444;
background-image: -webkit-repeating-linear-gradient (top, #444444 18%, #999999 25%); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
background-image: -moz-repeating-linear-gradient (top, #444444 18%, #999999 25%); /* Firefox 3.6+ */
background-image: -ms-repeating-linear-gradient (top, #444444 18%, #999999 25%); /* IE 10+ */
background-image: -o-repeating-linear-gradient (top, #444444 18%, #999999 25%); /* Opera 11.10+ */
background-image: repeating-linear-gradient (top, #444444 18%, #999999 25%);
}

Radial-gradient

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

Div {
background: #444444;
background: -webkit-gradient (radial, center center, 0px, center center, 100%, color-stop(0%,#444444), color-stop(100%,#999999)); /* Chrome 1-10, Safari 4+, iOS 3.2-4.3, Android 2.1-3.0 */
background: -webkit-radial-gradient (center, ellipse cover, #444444 0%,#999999 100%); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
background: -moz-radial-gradient (center, ellipse cover, #444444 0%, #999999 100%); /* Firefox 3.6+ */
background: -o-radial-gradient (center, ellipse cover, #444444 0%,#999999 100%); /* Opera 11.6+ */
background: -ms-radial-gradient (center, ellipse cover, #444444 0%,#999999 100%); /* IE 10+ */
background: radial-gradient (center, ellipse cover, #444444 0%,#999999 100%);
}

Opera не поддерживала круговой градиент до версии 11.6. В остальном ситуация такая же, как с линейным градиентом.

Инструменты:

1. gradients.glrzad.com выдает кроссбраузерный код, можно создавать множество цветовых переходов
2. www.colorzilla.com/gradient-editor самый навороченный генератор. Можно создавать линейные и круговые градиенты, есть возможность выбора формата записи цветов, множество готовых градиентов.
3. lea.verou.me/css3patterns галерея CSS3 паттернов. Можно посмотреть код каждого паттерна.

Множественные фоны

Это возможность назначать сразу несколько фоновых изображений одному элементу.
div {
background: url(fallback.png) no-repeat 0 0;
background: url(foreground.png) no-repeat 0 0, url(middle-ground.png) no-repeat 0 0, url(background.png) no-repeat 0 0 ; /* Firefox 3.6+, Safari 1.3+, Chrome 2+, IE 9+, Opera 10.5+, iOS 3.2+, Android 2.1+ */
}

Не стоит забывать о браузерах, не поддерживающих множественные фоны.

Порядок фонов такой: от верхнего к нижнему, то есть самый нижний фон нужно прописывать в конце. Вместо фоновых картинок можно прописывать и CSS3 градиенты.

Border-radius

Закругленные уголки у блока. Все просто, если нужен одинаковый радиус закругления.

Div {
-webkit-border-radius : 12px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius : 12px; /* Firefox 1-3.6 */
border-radius : 12px; /* Opera 10.5+, IE 9+, Safari 5, Chrome , Firefox 4+, iOS 4+, Android 2.1+ */
}

Все производители уже отказались от вендорных префиксов в последних версиях браузеров.

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

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

div {
-moz-border-radius : 15px 30px 45px 60px;
-webkit-border-radius : 15px 30px 45px 60px;
border-radius : 15px 30px 45px 60px;
}

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

Div {
border-top-left-radius : 5px 30px;
border-top-right-radius : 30px 60px;
border-bottom-left-radius : 80px 40px;
border-bottom-right-radius : 40px 100px;
}

Если все одинковы:

Div {
border-radius : 8px / 13px;
}

Инструменты:

Upd Для желающих автоматизировать процесс создания префиксов написана .

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

Радиальный градиент создаётся с помощью свойства background или background-image с параметром radial-gradient . В простейшем случае для задания радиального градиента понадобится всего два параметра: начальный и конечный цвет. По умолчанию, начальная точка располагается при этом в центре. В примере 1 показано создание некоторого подобия шарика, для этого используется радиальный градиент и скругление углов.

Пример 1. Градиент

Результат данного примера показан на рис. 1. Обратите внимание, что пример корректно работает в IE10 и Opera 12, ранние версии этих браузеров не поддерживают радиальные градиенты, и не работает в Safari 5.1, который требует наличие префикса -webkit.

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

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

Позиция точки пишется аналогично значениям свойства background-position с помощью ключевых слов или доступных единиц измерения вроде пикселов или процентов; ниже приведены возможные сочетания.

• at top left = at left top = at 0% 0% (в левом верхнем углу);
• at top = at top center = at center top = at 50% 0% (по центру вверху);
• at right top = at top right = at 100% 0% (в правом верхнем углу);
• at left = at left center = at center left = at 0% 50% (по левому краю и по центру);
• at center = at center center = at 50% 50% (по центру) — это значение по умолчанию;
• at right = at right center = at center right = at 100% 50% (по правому краю и по центру);
• at bottom left = at left bottom = at 0% 100% (в левом нижнем углу);
• at bottom = at bottom center = at center bottom = at 50% 100% (по центру внизу);
• at bottom right = at right bottom = at 100% 100% (в правом нижнем углу).

Если задать позицию начальной точки для примера 1 как at 40px 45px, а второй цвет сделать несколько темнее (#0076a5), то получится чуть более реалистичный шарик (рис. 3).

Рис. 3. Изменение начальной точки градиента

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

Разница между круговым и эллиптическим градиентом для цветов #f9e497 и #ffb60f продемонстрирована на рис. 4.

Рис. 4. Разные виды градиента

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

В примере 2 показано создание кругового градиента с заданной начальной точкой. Для усиления контрастности между цветами используется три значения цвета, а не два.

Пример 2. Круговой градиент

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

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

Рис. 5. Круговой градиент

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

В табл. 1 перечислены возможные значения размера с их описанием и результатом для белого и чёрного цвета. Код и вид дан для кругового и эллиптического градиента.

Табл. 1. Ключевые слова для изменения размера градиента

Значение	Код	Описание	Вид
	background: radial-gradient(circle closest-side at 30px 20px, #fff, #000); background: radial-gradient(ellipse closest-side at 30px 20px, #fff, #000);	Форма градиента совпадает с ближайшей к нему стороной блока.
	background: radial-gradient(circle closest-corner at 30px 20px, #fff, #000); background: radial-gradient(ellipse closest-corner at 30px 20px, #fff, #000);	Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока.
	background: radial-gradient(circle farthest-side at 30px 20px, #fff, #000); background: radial-gradient(ellipse farthest-side at 30px 20px, #fff, #000);	Градиент распространяется до дальней стороны блока.
farthest-corner	background: radial-gradient(circle farthest-corner at 30px 20px, #fff, #000); background: radial-gradient(ellipse farthest-corner at 30px 20px, #fff, #000);	Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока,

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

Пример 3. Размер градиента

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 6.

Рис. 6. Использование значения closest-corner

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

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

Пример 4. Резкие переходы

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 7.

Рис. 7. Резкие переходы между разными цветами

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