From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../web/css/repeating-linear-gradient()/index.html | 134 +++++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 files/ru/web/css/repeating-linear-gradient()/index.html (limited to 'files/ru/web/css/repeating-linear-gradient()') diff --git a/files/ru/web/css/repeating-linear-gradient()/index.html b/files/ru/web/css/repeating-linear-gradient()/index.html new file mode 100644 index 0000000000..e7dc20f24e --- /dev/null +++ b/files/ru/web/css/repeating-linear-gradient()/index.html @@ -0,0 +1,134 @@ +--- +title: repeating-linear-gradient() +slug: Web/CSS/repeating-linear-gradient() +translation_of: Web/CSS/repeating-linear-gradient() +--- +
{{CSSRef}}
+ +

CSS функция repeating-linear-gradient() создает изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{cssxref("linear-gradient")}} и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа {{cssxref("<gradient>")}}, являющегося разновидностью типа данных {{cssxref("<image>")}}.

+ +
/* Повторяющийся градиент с углом наклона 45 градусов,
+   начинающийся с синего и заканчивающийся красным цветом */
+repeating-linear-gradient(45deg, blue, red);
+
+/* Повторяющийся градиент идущий от нижнего правого угла к верхнему левому,
+   начинающийся с синего и заканчивающийся красным цветом */
+repeating-linear-gradient(to left top, blue, red);
+
+/* Повторяющийся градиент идущий от низа к верху,
+   начинающийся с синего, переходящего в зеленый на 40%,
+   и заканчивающийся красным цветом */
+repeating-linear-gradient(0deg, blue, green 40%, red);
+
+ +

С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведет к резкому визуальному переходу.

+ +

Повторяющийся линейный градиент (как и любой прочий градиент) не имеет размерностей по умолчанию; т.е. у него нет предопределенного размера либо пропорции. Его размер будет совпадать с размерами элемента к которому он применен.

+ +
+

Примечание: Поскольку <gradient> относится к типу данных <image> , он может быть использован только там где применим тип <image>. По этой причине repeating-linear-gradient() не будет работать с {{Cssxref("background-color")}} и прочими свойствами использующими тип данных {{cssxref("<color>")}}.

+
+ +

Синтаксис

+ +

Значения

+ +
+
<сторона-или-угол>
+
Положение точки начала линии градиента. Начинается со слова to и максимум двух ключевых слов: одно определяет сторону по горизонтали (left или right), и другое сторону по вертикали (top или bottom). Порядок ключевых слов определяющих сторону не важен. Если они не определены, по умолчанию используется to bottom.
+
Значения to top, to bottom, to left, и to right эквивалентны углам 0deg, 180deg, 270deg, и 90deg соответственно. Прочие значения транслируются в угол.
+
{{cssxref("<angle>", "<угол>")}}
+
Угол наклона линии направления градиента. Значение 0deg эквивалентно to top; увеличение значения приводит к повороту линии против часовой стрелки начиная от этой величины (0deg).
+
<цвет-позиция>
+
Значение {{cssxref("<color>", "<цвета>")}} с последующей (необязательной) его позицией (либо в {{cssxref("<percentage>", "<процентах>")}}, либо в единицах {{cssxref("<length>", "<длины>")}} вдоль оси градиента).
+
+
+

Примечание: Рендер перехода цветов в CSS градиентах следует тем же правилам что и в SVG градиентах.

+
+
+
+ +

Formal syntax

+ +
repeating-linear-gradient(  [ <угол> | to <сторона-или-угол> ,]? <цвет-позиция> [, <цвет-позиция>]+ )
+                            \---------------------------------/ \----------------------------/
+                              Определение линии градиента         Список цветов и их позиций
+
+где <сторона-или-угол> = [left | right] || [top | bottom]
+   и <цвет-позиция>    = <цвет> [ <процент> | <длина> ]?
+
+ +

Примеры

+ +

Полоски зебры

+ + + +
body {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 20px,
+      black 20px,
+      black 40px);
+}
+
+ +

{{EmbedLiveSample('Полоски_зебры', 120, 120)}}

+ +

Повторяющиеся горизонтальные полосы

+ + + +
body {
+  background-image: repeating-linear-gradient(to bottom,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+
+ +

{{EmbedLiveSample('Повторяющиеся_горизонтальные_полосы', 120, 120)}}

+ +
+

Примечание: Для дополнительных примеров пожалуйста обратитесь к статье Using CSS gradients.

+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусПримечание
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{Compat("css.types.image.gradient.repeating-linear-gradient")}}
+ +

Дополнительно

+ + -- cgit v1.2.3-54-g00ecf