Radial-gradient(): радиальный градиент. Gradients CSS уроки для начинающих академия Комбинация градиента и фонового изображения

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

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

Background-image: radial-gradient(#5b4ffc, #df02cd);

Позиционирование

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

Background-image: radial-gradient(at top left, #5b4ffc, #df0253);

Форма и радиус

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

• ellipse - градиент эллиптической формы (значение по умолчанию);
• circle - градиент круглой формы.

background-image: radial-gradient(circle, #5b4ffc, #df0253);

Значение радиуса может быть указано в любых доступных единицах CSS. Если указать одно значение, то оно будет принято за радиус круга. Два значения интерпретируются как радиус эллипса по оси X и радиус по оси Y . По умолчанию радиальным градиентом полностью заполняется фон элемента.

Background-image: radial-gradient(ellipse 180px 90px, #a09af1, #000038);

Размер

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

Опорные точки

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

Background-image: radial-gradient(#144bf1 30%, #3ee9ca 60%, #0a38e5);

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

По аналогии с linear-gradient() , если вы собираетесь внедрять функцию radial-gradient() в свой проект, стоит дополнить код CSS объявлениями с упоминанием вендорных префиксов, а также указать резервный цветовой фон для старых браузеров IE.

Далее в учебнике: repeating-radial-gradient() - повторяющийся радиальный градиент.

When we talk about gradients, it"s worth beginning with the fact that gradients are an image replacement in CSS. That"s a fancy way of saying that creating a gradient in CSS provides the browser with instructions for painting an image on the screen rather than you providing the browser with the source URL of a file you created in an image editing application, like Photoshop or Sketch. It"s a native CSS way for doing the same thing in code and, as such, gradients are included in the CSS Image Values and Replaced Content specification .

You can see how that gradient assumes the shape is ellipse . That"s because the element itself is not a perfect square. In that case, it would have assumed a circle instead. Pretty smart! Here"s what would happen if we had explicitly declared circle as the shape value:

Gradient { background-image: radial-gradient(circle, yellow, #f06d06); }

Notice the gradient is circular, but only fades all the way to the ending color along the farthest edge. Now we can explicitly declare the position value to ensure that the fade ends by the "closest-side" of the shape instead, like this:

Gradient { background-image: radial-gradient(circle closest-side, yellow, #f06d06); }

The possible values there are: closest-corner , closest-side , farthest-corner , farthest-side . You can think of it like: "I want this radial gradient to fade from the center point to the __________ , and everywhere else fills in to accommodate that."

A radial gradient doesn"t have to start at the default center either, you can specify a certain point by using "at ______ " as part of the first parameter, like:

Gradient { background-image: radial-gradient(circle at top right, yellow, #f06d06); }

I"ll make it more obvious here by making the example a square and adjusting a color-stop:

Browser Support

Browser support for radial-gradient() is largely the same as . The exception is a very old version of Opera. Right when they started supporting gradients they only accounted for linear and not radial.

But similar to linear-gradient() , if your browser support needs to go super deep, then you might consider using or a similar tool that handles vendor prefixing for you rather than having to manage those yourself.

This browser support data is from

Рис. 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 , тогда мы получим самые разнообразные повторяющиеся фоновые картинки, которые сделаны без использования изображений.

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

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

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);

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

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

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

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

Радиальный градиент создаётся с помощью свойства background или background-image .

Синтаксис

background-image: radial-gradient([ circle || <радиус> ] [ at <позиция> ]? , | [ ellipse || [<радиус> | <проценты> ]{2}] [ at <позиция> ]? , | [ [ circle | ellipse ] || <размер> ] [ at <позиция> ]? , | at <позиция> , <цвет> [ , <цвет> ]*)

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

circle Радиальный градиент круглой формы. ellipse Создаёт градиент эллиптической формы. Эта форма установлена по умолчанию. <радиус> Радиус градиента в доступных для CSS единицах. Одно значение указывает радиус круга, два значения - радиус эллипса по оси x и его же радиус по оси y. Если радиус явно не указан, градиент будет заполнять собой весь фон элемента. <позиция>

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

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

<цвет> Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах. <размер> Устанавливает размер градиента. В табл. 1 перечислены возможные значения размера с их описанием и результатом для белого и чёрного цвета. Код и вид дан для кругового и эллиптического градиента. Табл. 1. Ключевые слова для изменения размера градиента

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

Пример

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

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

Примечание

Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают -webkit-radial-gradient() .

Opera до версии 12.10 поддерживает -o-radial-gradient() .

Firefox до версии 16 поддерживает -moz-radial-gradient() .

Все свойства с префиксами не используют ключевое слово at при задании положения отправной точки градиента.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.