Радиальный градиент CSS онлайн урок.


Когда мы говорим о градиентах, стоит начать с того, что градиенты - это замена изображения в CSS. Это причудливый способ сказать, что создание градиента в CSS предоставляет браузеру инструкции по рисованию изображения на экране, а не к тому, чтобы предоставить браузеру исходный URL-адрес файла, созданного в приложении для редактирования изображений, например Photoshop или Sketch. Это собственный способ CSS для того, чтобы делать то же самое в коде, и, таким образом, градиенты включаются в CSS Image Values ​​и замененные спецификации содержимого .

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

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

Источник радиального градиента перемещается из центра наружу.

# Синтаксис

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

# Официальный синтаксис

Вот как официальная спецификация описывает синтаксис радиального градиента:

<radial-gradient> = radial-gradient(
[ [ <shape> || <size> ] [ at <position> ]? , |
at <position>,
]?
<color-stop> [ , <color-stop> ]+
)

Возможно, было бы немного полезно перевести это на основной английский:

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

# Значения

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

  • shape: определяет форму градиента при переходе от одного цвета к другому. Поскольку мы говорим о радиальных градиентах, формы ограничены круговым характером. Мы можем опустить это значение, и нотация будет измерять длину стороны элемента, чтобы определить, будет ли одно значение лучше соответствовать ситуации. Например, элемент, который является идеальным квадратом, будет отличным совпадением длякруга, тогда как дляellipseбудет создано что-либо прямоугольное.
    • круг
    • ellipse
  • size: влияет на конечную форму градиента, принимая значениеshapeи указывая, где градиент должен заканчиваться на основе центра фигуры. Это может быть выражено по имени или точной мере длины.
    • ближайшая сторона: Градиент будет заканчиваться со стороны, ближайшей к центру фигуры. Если две стороны соответствуют этим критериям, то они будут равномерно распределены.
    • дальняя сторона(по умолчанию): противоположностьближайшая сторона, где градиент будет заканчиваться сбоку, наиболее удаленным от центра фигуры.
    • ближайший угол: градиент будет заканчиваться в углу, который соответствует ближайшему к центру фигуры.
    • fartest-cornerПротивоположностьближайшему углу, где градиент заканчивается в углу, который расположен дальше всего от центра фигуры.
    • & lt; length & gt;: Мы можем указать числовое значение, которое служит радиусом круга. Это должно быть указано в позитивных пикселях или относительных единицах. К сожалению, никаких отрицательных единиц или процентов не допускается, потому что отрицательный круг будет вакуумом, а проценты могут быть относительно любого количества окружающих значений.
    • & lt; length или percent: второе числовое значение может быть предоставлено для объявления явного размера эллипса, но не для круга. Опять же, отрицательные значения - нет-нет, но проценты - честная игра, поскольку размер относительно поля градиента, а не элемента.
  • position: Это работает очень точно так же, как и в background-position . Это означает, что здесь работаютtop,right,leftиcenter, а также комбинации, в которых предусмотрены два именованных значения (например,верхний центр). Мы также можем указать точное положение, используя числовое значение, включая процент, все из которых относятся к ограничивающей рамке элемента. По умолчаниюцентр центра.
  • color-stop: Это значения цвета, которые определяют градиент. Здесь принимается любое значение цвета, включая hex, named, RGB и HSL.

# Использование

Вот как это выглядит, пожалуй, самым основным. Обратите внимание, что мы не объявляем форму& gt;,size,positionилиcolor-stop, которые по умолчанию присваивают значения, поместив градиент в самый центр элемента и равномерно переходя между объявленными значениями цвета.

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

Вы можете видеть, как этот градиент принимаетформуellipse. Это потому, что сам элемент не является идеальным квадратом. В этом случае вместо этого он принял быкруг. Довольно умный! Вот что произойдет, если бы мы явно объявиликругкак значениеshape:

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

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

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

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

_, и везде еще заполняется, чтобы принять это».

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

Я сделаю это более очевидным здесь, сделав пример квадратом и отрегулировавcolor-stop:

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

Поддержка браузера дляradial-gradient () во многом такая же какlinear-gradient ()

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

Но, похоже наlinear-gradient () , если ваша поддержка браузера должна быть очень глубокой, вы можете использовать Autoprefixer

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

Эти данные поддержки браузера - от Caniuse

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

10 *11.6 *3.6 *10

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
5.0-5.1 *12 *Нет464