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
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 - градиент круглой формы.
Значение радиуса может быть указано в любых доступных единицах 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() - повторяющийся радиальный градиент.
Радиальный градиент распространяется из центральной точки градиента во все стороны в форме круга или эллипса (форма по умолчанию), демонстрируя плавный переход от одного оттенка цвета к другому. Радиальный градиент создаётся с помощью функции radial-gradient(). Функция создаёт изображение, которое представляет собой радиальный градиент между указанными оттенками цветов. По умолчанию размер градиента соответствует размеру элемента, к которому он применён.
Функция radial-gradient() принимает следующие, разделяемые запятой, аргументы:
- В качестве первого аргумента указываются ключевые слова и/или единицы измерения CSS, определяющие конечную форму, размер и начальное расположение градиента. Необязательный аргумент.
- Разделяемый запятыми список, состоящий из двух или более цветов, за каждым из которых может следовать стоп позиция.
Простейший радиальный градиент требует только два аргумента, определяющие начальный и конечный цвет:
Div { background-image: radial-gradient(cyan, indigo); width: 400px; height: 100px; } Попробовать »
Как и в случае использования линейных градиентов, радиальный градиент может включать список более чем из двух цветов, и к любому цвету можно указать стоп позицию.
Div { width: 400px; height: 100px; margin: 10px; } #one { background-image: radial-gradient(cyan, yellow, indigo, white); } #two { background-image: radial-gradient(cyan, yellow 10%, indigo 30%, white 50%); } Попробовать »
Форму радиального градиента можно определить с помощью ключевых слов circle (круг) и ellipse (эллипс), указав одно из них в качестве первого аргумента:
Div { width: 400px; height: 100px; margin: 10px; } #one { background-image: radial-gradient(ellipse, cyan, indigo); } #two { background-image: radial-gradient(circle, cyan, indigo); } Попробовать »
По умолчанию браузер располагает центральную точку радиального градиента в центре элемента. Центр градиента можно позиционировать с помощью ключевого слова at, за которым располагаются ключевые слова (top, left, right, bottom, center) или значения в указанных единицах измерения CSS:
| Значение | Описание |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | Если вы указываете только одно ключевое слово, второе будет "center". |
| x% y% | Первое значение это горизонтальная позиция, второе значение вертикальная. Верхний левый угол это позиция 0% 0%. Правый нижний угол это позиция 100% 100%. Если вы указываете только одно значение, другое значение будет 50%. |
| x-pos y-pos | Первое значение это горизонтальная позиция, второе - вертикальная. Верхний левый угол это позиция 0 0. Единицы измерения могут быть пикселями (0px 0px) или любой другой CSS единицей измерения. Если вы указываете только одно значение, другое значение будет 50%. Вы можете сочетать % и единицы измерения. |
Позиционирование градиента указывается до значений цветовых оттенков, но после ключевого слова, определяющего форму градиента (если оно указано):
Div { width: 400px; height: 100px; margin: 10px; } #one { background-image: radial-gradient(at right, cyan, indigo); } #two { background-image: radial-gradient(circle at 300px 50px, cyan, indigo, yellow); } #three { background-image: radial-gradient(circle at top left, cyan, indigo, yellow); } Попробовать »
Размер градиента (на сколько большой должна быть конечная форма градиента), можно определить с помощью одного из четырёх ключевых словосочетаний или указания радиуса с помощью единиц измерения CSS (для определения радиуса нельзя использовать проценты).
| Ключевые слова | Описание | |
|---|---|---|
| Конечный размер градиента зависит от расстояния между центром градиента и ближайшей к нему стороной элемента (для круга) или от расстояния между центром и двумя ближайшими к нему сторонами элемента (для эллипса). | ||
| Конечный размер градиента зависит от расстояния между центром градиента и ближайшим к нему углом элемента. |
 |
|
| Конечный размер градиента зависит от расстояния между центром градиента и самой дальней от него стороны элемента (для круга) или от расстояния между центром градиента и двумя самыми дальними от него сторонами (для эллипса). |
 |
|
| Конечный размер градиента зависит от расстояния между центром градиента и самым дальним от него углом элемента. Используется по умолчанию для формы круга или эллипса. |
 |
Ключевые слова, определяющие размер градиента или радиус, указываются до или после ключевого слова, определяющего форму, и обязательно до определения позиции.
Div { width: 400px; height: 100px; margin: 10px; } #one { background-image: radial-gradient(circle closest-corner at 100px, cyan 50%, indigo); } #two { background-image: radial-gradient(circle closest-side, cyan, red, indigo); } #three { background-image: radial-gradient(100px circle at 200px, cyan 50%, indigo); } #four { background-image: radial-gradient(170px 50px ellipse at 175px, cyan, #90EE90, rgba(172,160,160,0)); }
CSS функцииОпределение и применение
CSS функция radial-gradient() (радиальный градиент) располагается вдоль своего радиуса, выходя наружу из центра элемента по круговой или эллиптической форме, при этом цвета градиента равномерно распределяются по всему пространству элемента.
Принцип создания радиальных градиентов похож на создание линейных градиентов (linear-gradient()), для этого достаточно указать начальный цвет – он будет располагаться в середине градиента и конечный цвет, который будет расположен в конце градиента.
Более подробно о работе с градиентами вы можете ознакомиться в статьях « » и « ». Обращаю Ваше внимание, что в статьях освещены нюансы работы со старыми браузерами и приведены многочисленные примеры.
Поддержка браузерами
| Функция | Opera | IExplorer | Edge |
|||
|---|---|---|---|---|---|---|
| radial-gradient() | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 12.1 11.1 -o- | 6.1 5.1 -webkit- | 10.0 | 12.0 |
CSS синтаксис:
background-image / background : radial-gradient ([форма keyword (или размер )] ат позиция x-axis y-axis , цвет 1 – остановка 1 , . . . , цвет n – остановка n );Форма
Эллиптическая форма определяется значением ellipse , которое является значением по умолчанию (отсутствует необходимость его указывать), а круглая форма определяется значением circle .
Keyword
Градиент рассчитывается исходя из расстояния до ближайшей / дальней стороны , либо ближайшего / дальнего угла элемента.
| Значение | Описание |
|---|---|
| closest-side | Градиент рассчитывается исходя из расстояния до ближайшей стороны элемента от её центра для круглых градиентов (ось x или ось y ) и до ближайших сторон (ось x и ось y ) если градиент в форме эллипса. background-image : radial-gradient(circle closest-side at 60% 60%, plum, black, orange) ; background-image : radial-gradient(ellipse closest-side at 60% 60%, plum, black, orange) ; |
| closest-corner | Градиент растягивается таким образом, чтобы он проходил через ближайший к центру угол элемента (размер рассчитывается в зависимости от расстояния до ближайшего угла элемента). background-image: radial-gradient(circle closest-corner at 60% 50%, plum, black, orange) ; background-image: radial-gradient(ellipse closest-corner at 60% 50%, plum, black, orange) ; |
| farthest-side | Градиент рассчитывается исходя из расстояния до дальней стороны элемента от её центра для круглых градиентов (ось x или ось y ) и до ближайших сторон (ось x и ось y ) если градиент в форме эллипса. background-image: radial-gradient(circle farthest-side at 100% 50%, plum, black, orange) ; background-image: radial-gradient(ellipse farthest-side at 100% 50%, plum, black, orange) ; |
| farthest-corner | Градиент растягивается таким образом, чтобы он проходил через дальние от центра углы элемента (размер рассчитывается в зависимости от расстояния до дальнего угла элемента). Это значение по умолчанию. background-image: radial-gradient(circle farthest-corner at 60% 60%, plum, black, orange) ; background-image: radial-gradient(ellipse farthest-corner at 60% 60%, plum, black, orange) ; |
Размер
Задает размер формы градиента. Значения circle или ellipse при этом указывать не надо, запрещено использовать ключевые слова если указан размер . Если указать одно значение , то оно будет расценено браузером как . Если указать два значения , то первое значение будет расценено браузером как горизонтальный радиус , а второе значение как вертикальный радиус для эллиптического элемента .
Обращаю Ваше внимание, что запрещается использование процентных значений, если вы указываете только одно значение (радиус для круглого элемента), при использовании двух значений (для эллиптического градиента) допускается указывать эти значения в процентах.
Позиция
Начальная позиция радиального градиента определяется ключевым словом – center , но может быть изменена с использованием единиц измерения длины (например: px или em ), процентными значениями и ключевыми словами , которые используются в CSS свойстве background-position , оно отвечает за положение (позицию) фонового изображения.
| Значение | Описание |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет "center" |
| x% y% | 0% 0%
(это значение по умолчанию
). В правом нижнем углу 100% 100%.
Если указано только одно значение, то другое значение будет 50%.
 |
| x y | Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения. |
Цвет
Допускается использовать не только «Предопределенные цвета », но и любые « » - шестнадцатеричные (HEX), значения цвета RGB / -A и HSL /-A .
Остановка
Значения точек остановки (color stops ) задаются в единицах измерения длины (например – px или em ) и в процентных значениях . Точка остановки сообщает браузеру, что градиент по радиусу должен достичь заданного цвета к заданному значению и плавно перейти к следующему цвету, если он есть.
Пример использования
Давайте с Вами рассмотрим радиальные градиенты круговой и эллиптической формы, увидим, в чем заключается их отличие на следующем практическом примере:
В данном примере мы создали четыре блока и задали для них радиальные градиенты. Верхние блоки имеют эллиптическую форму , а нижние блоки круглую форму .
Рассмотрим пример позиционирования радиального градиента.
В данном примере мы создали шесть блоков с различными формами градиентов (круговые и в форме эллипса) и позиционировали градиент для каждого блока по своему, указывая значения в пикселях , процентах и с использованием ключевых слов .
Обращаю Ваше внимание, что если радиальный градиент по умолчанию позиционирован по центру, а элемент имеет квадратную форму, то вы не увидите разницы между круговым градиентом и градиентов в форме эллипса.
Рассмотрим пример использования точек остановки радиального градиента:
В данном примере мы создали шесть блоков : три верхние блока отличаются от трех нижних только по форме градиента , ключевые точки указаны те же :
- Первый и четвертый блок – двухцветный градиент красный цвет , который плавно переходит в зеленый , занимающий оставшую часть элемента.
- Второй и пятый блок – трехцветный градиент , в котором 10% от центра занимает красный цвет , который плавно переходит в зеленый , с точкой остановки 50% , он в свою очередь плавно переходит в синий , который занимает всю оставшуюся часть элемента.
- Третий и шестой блок – трехцветный градиент , в котором 50% от центра занимает красный цвет , который плавно переходит в зеленый , с точкой остановки 85% , он в свою очередь плавно переходит в синий , который занимает всю оставшуюся небольшую часть элемента.
Давайте рассмотрим, как управлять размером радиального градиента в CSS.
В этом примере мы создали три блока:
Первый блок – мы указали одно значение 50px , которое было расценено браузером как радиус для круглого градиента . Указали для градиента 7 цветов . Обратите внимание, что крайний цвет заполняет оставшуюся область.
Второй блок – мы указали два значения в процентах : первое значение - горизонтальный радиус , а второе значение - вертикальный радиус для эллиптического градиента. Указали для градиента 8 цветов . Обратите внимание, что крайний цвет мы указали белый, который и заполнил оставшуюся область (один из вариантов, чтобы оставить только форму градиента).
Третий блок – мы указали два значения в единицах измерения длины (px и em ): первое значение - горизонтальный радиус , а второе значение - вертикальный радиус для эллиптического элемента. Указали для градиента 7 цветов .
Рис. 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% (в правом нижнем углу).
| Значение | Код | Описание | Вид |
|---|---|---|---|
| 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 (Черновик спецификации ) - первая черновая версия стандарта.
