Image Image Image Image Image Image Image Image Image Image

Блог Indigo | 13.11.2018

Наверх

Наверх

Radial-gradient(): радиальный градиент

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

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

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

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

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

background-image: radial-gradient(at top left, #5b4ffc, #df0253);
Позиционирование radial-gradient

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

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

  • ellipse — градиент эллиптической формы (значение по умолчанию);
  • circle — градиент круглой формы.
background-image: radial-gradient(circle, #5b4ffc, #df0253);

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

background-image: radial-gradient(ellipse 180px 90px, #a09af1, #000038);
Радиальный градиент эллиптической формы в CSS

Размер

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

  • closest-side — создается градиент, который расходится только до ближайшей стороны элемента:

      background-image: radial-gradient(circle closest-side at 75% 40%, #ffee0e, #2e0a9f);
      
    Радиальный градиент closest-side в CSS
  • closest-corner — градиент расходится только до ближайшего угла элемента:

      background-image: radial-gradient(circle closest-corner at 75% 40%, #ffee0e, #2e0a9f);
      
    Радиальный градиент closest-corner в CSS
  • farthest-side — противоположно closest-side, градиент расходится до самой дальней стороны элемента:

      background-image: radial-gradient(circle farthest-side at 75% 40%, #ffee0e, #2e0a9f);
      
    Радиальный градиент farthest-side в CSS
  • farthest-corner — противоположно closest-corner, градиент расходится до самого дальнего угла элемента:

      background-image: radial-gradient(circle farthest-corner at 75% 40%, #ffee0e, #2e0a9f);
      
    Радиальный градиент farthest-corner в CSS

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

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

background-image: radial-gradient(#144bf1 30%, #3ee9ca 60%, #0a38e5);
Опорные точки радиального градиента CSS

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

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


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