Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения

CSS: Радиальный градиент для фона

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

Функция radial-gradient() принимает следующие, разделяемые запятой, аргументы:

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

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 (для определения радиуса нельзя использовать проценты).

Ключевые слова Описание
closest-side Конечный размер градиента зависит от расстояния между центром градиента и ближайшей к нему стороной элемента (для круга) или от расстояния между центром и двумя ближайшими к нему сторонами элемента (для эллипса). closest-side
closest-corner Конечный размер градиента зависит от расстояния между центром градиента и ближайшим к нему углом элемента. closest-corner
farthest-side Конечный размер градиента зависит от расстояния между центром градиента и самой дальней от него стороны элемента (для круга) или от расстояния между центром градиента и двумя самыми дальними от него сторонами (для эллипса). farthest-side
farthest-corner Конечный размер градиента зависит от расстояния между центром градиента и самым дальним от него углом элемента. Используется по умолчанию для формы круга или эллипса. farthest-corner

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

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)); }
Попробовать »
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь