CSS :: Функция repeating-radial-gradient()

Функция repeating-radial-gradient() (от англ. repeating radial gradient – повторяющийся радиальный градиент) используется в качестве значения в свойствах background и background-image и добавляет бесконечно повторяющийся радиальный градиент к фону изображения.

Синтаксис

repeating-radial-gradient(
[[circle || <радиус>] [at <позиция центра>]?, |
[ellipse || [<радиус> | <проценты>]{2}] [at <позиция центра>]?, |
[[circle | ellipse] || <ключевые слова>] [at <позиция центра>]?, |
at <позиция центра>,]?
<цвет> <стоп-позиция>?,
[<стоп-позиция>?, <цвет> <стоп-позиция>?]# )

Значения

circle – задает бесконечно повторяющийся радиальный градиент круглой формы.
ellipse – задает бесконечно повторяющийся радиальный градиент эллиптической формы. Значение используется по умолчанию.
<радиус> – радиус первого эллипса (или круга) в бесконечно повторяющемся радиальном градиенте в любых доступных в CSS единицах измерения (смотреть). Отрицательные значения не допускаются. Для эллипса также доступны проценты. При этом одно значение указывает радиус круга, два значения — радиус эллипса по оси X и его же радиус по оси Y. Если радиус не будет указан явно, градиент заполнит весь фон элемента.
<ключевые слова> – в случае использования ключевых слов circle и ellipse их размеры либо не указываются вообще, либо через пробел используются следующие ключевые слова:
- closest-side – для круга радиус будет равен расстоянию от центра круга до ближайшей стороны элемента. Для эллипса радиус a будет равен расстоянию от центра до ближайшей левой или правой стороны, а для радиуса b – до ближайшей верхней или нижней стороны элемента.
- farthest-side – для круга радиус будет равен расстоянию от центра круга до самой удаленной стороны элемента. Для эллипса радиус a будет равен расстоянию от центра до более удаленной левой или правой стороны, а для радиуса b – до более удаленной верхней или нижней стороны элемента.
- closest-corner – для круга радиус будет равен расстоянию от центра круга до вершины ближайшего угла элемента. Для эллипса радиусы вычисляются на основании расстояния от его центра до вершины ближайшего угла элемента.
- farthest-corner – данное значение используется по умолчанию в случае, когда ключевое слово не указано. Для круга радиус будет равен расстоянию от центра круга до вершины самого дальнего угла элемента. Для эллипса радиусы вычисляются на основании расстояния от его центра до самого дальнего угла элемента.
<позиция центра> – координаты x и y центра бесконечно повторяющегося радиального градиента относительно вершины верхнего левого угла элемента. В качестве числовых аргументов могут использоваться любые доступные в CSS единицы измерения, а также проценты (смотреть). Вместо координат допустимо использование следующих ключевых слов:
- at left top || at top left – в левом верхнем углу (0% 0%);
- at center top || at top center || at top – по центру вверху (50% 0%);
- at right top || at top right – в правом верхнем углу (100% 0%);
- at right center || at center right || at right – справа по центру (100% 50%);
- at right bottom || at bottom right – в правом нижнем углу (100% 100%);
- at center bottom || at bottom center || at bottom – по центру внизу (50% 100%);
- at left bottom || at bottom left – в левом нижнем углу (0% 100%);
- at left center || at center left || at left – слева по центру (0% 50%);
- at center center || at center – в центре элемента (50% 50%).
<цвет> – цвет в любой доступной в CSS цветовой модели (смотреть).
<стоп-позиция> – координаты точки на градиентной прямой, по достижении которой браузер начнет создавать переход от текущего цвета к следующему в списке. При этом, если два соседних цвета в списке идентичны, то их стоп-позиции разрешается указывать через пробел после требуемого цвета. Например, вместо repeating-radial-gradient(15px 10px at 50% 50%, red 10%, red 35%, blue 100%) можно сокращенно записать repeating-radial-gradient(15px 10px at 50% 50%, red 10% 35%, blue 100%). Более того, можно вообще не указывать стоп-позиции или указывать только некоторые из них. В таких случаях браузер будет равномерно распределять позиции всех цветов, попадающих в соответствующие промежутки.

Таким образом, функция repeating-radial-gradient() в общем случае в качестве аргументов принимает радиусы a и b эллипса, координаты x и y центра эллипса относительно вершины верхнего левого угла элемента и значения цветов с указанием через пробел их горизонтальной позиции относительно центра эллипса.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-images-3/#repeating-gradients

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/repeating-radial-gradient

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>

	<style>
	
		p{
		width: 400px;
		height: 200px;
		padding: 10px;
		margin: 4em;
		border: solid 3px black;
		}

		.background_1{
		background: repeating-radial-gradient(20px 40px at 50% 50%, 
		#fff 2px, #333 30px, #ddd 70px);
		}
		
		.background_2{
		background: repeating-radial-gradient(60px 30px at 50% 50%, 
		#fff, #333 100px, #ddd 200px);
		}
		
		.background_3{
		background: repeating-radial-gradient(300px 200px at 30% 50px, 
		#fff 20%, #333 70%, #ddd);
		}
		
		.background_4{
		background: repeating-radial-gradient(100px at 40% 100px, 
		#fff, #333, #ddd);
		}
		
	</style>
	
</head>
<body>
	
	<p class="background_1">
		20px 40px at 50% 50%, #fff 2px, #333 30px, #ddd 70px
	</p>
	
	<p class="background_2">
		60px 30px at 50% 50%, #fff, #333 100px, #ddd 200px
	</p>
	
	<p class="background_3">
		300px 200px at 30% 50px, #fff 20%, #333 70%, #ddd
	</p>
	
	<p class="background_4">
		100px at 40% 100px,	#fff, #333, #ddd
	</p>
	
</body>
</html>

Пример №1

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №2</title>

	<style>
	
		p{
		width: 500px;
		height: 150px;
		padding: 10px;
		margin: 1.5em;
		border: solid 3px black;
		}

		.background_1{
		background: repeating-radial-gradient(circle closest-side at 
		30% 40%, #FFF, #AAA 20%);
		}
		
		.background_2{
		background: repeating-radial-gradient(ellipse closest-side at 
		30% 40%, #FFF, #AAA 20%);
		}
		
		.background_3{
		background: repeating-radial-gradient(circle closest-corner at 
		30% 40%, #FFF, #AAA 20%);
		}
		
		.background_4{
		background: repeating-radial-gradient(ellipse closest-corner at 
		30% 40%, #FFF, #AAA 20%);
		}
		
		.background_5{
		background: repeating-radial-gradient(circle farthest-corner at 
		30% 40%, #FFF, #AAA 20%);
		}		
		
		.background_6{
		background: repeating-radial-gradient(ellipse farthest-corner at 
		30% 40%, #FFF, #AAA 20%);
		}		
		
	</style>
	
</head>
<body>
	
	<p class="background_1">
		repeating-radial-gradient(circle closest-side at 
		30% 40%, #FFF, #AAA 20%)	
	</p>
	
	<p class="background_2">
		repeating-radial-gradient(ellipse closest-side at 
		30% 40%, #FFF, #AAA 20%)	
	</p>
	
	<p class="background_3">
		repeating-radial-gradient(circle closest-corner at 
		30% 40%, #FFF, #AAA 20%)	
	</p>
	
	<p class="background_4">
		repeating-radial-gradient(ellipse closest-corner at 
		30% 40%, #FFF, #AAA 20%)	
	</p>
	
	<p class="background_5">
		repeating-radial-gradient(circle farthest-corner at 
		30% 40%, #FFF, #AAA 20%)	
	</p>
	
	<p class="background_6">
		repeating-radial-gradient(ellipse farthest-corner at 
		30% 40%, #FFF, #AAA 20%)	
	</p>
	
</body>
</html>

Пример №2