initial commit

1 files changed, 134 insertions, 0 deletions

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()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>repeating-linear-gradient()</code></strong> создает изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{cssxref("linear-gradient")}} и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа {{cssxref("&lt;gradient&gt;")}}, являющегося разновидностью типа данных {{cssxref("&lt;image&gt;")}}.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Повторяющийся градиент с углом наклона 45 градусов,
+   начинающийся с синего и заканчивающийся красным цветом */
+repeating-linear-gradient(45deg, blue, red);
+
+/* Повторяющийся градиент идущий от нижнего правого угла к верхнему левому,
+   начинающийся с синего и заканчивающийся красным цветом */
+repeating-linear-gradient(to left top, blue, red);
+
+/* Повторяющийся градиент идущий от низа к верху,
+   начинающийся с синего, переходящего в зеленый на 40%,
+   и заканчивающийся красным цветом */
+repeating-linear-gradient(0deg, blue, green 40%, red);
+</pre>
+
+<p>С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведет к резкому визуальному переходу.</p>
+
+<p>Повторяющийся линейный градиент (как и любой прочий градиент) <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">не имеет размерностей по умолчанию</a>; т.е. у него нет предопределенного размера либо пропорции. Его размер будет совпадать с размерами элемента к которому он применен.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Поскольку <code>&lt;gradient&gt;</code> относится к типу данных <code>&lt;image&gt;</code> , он может быть использован только там где применим тип <code>&lt;image&gt;</code>. По этой причине <code>repeating-linear-gradient()</code> не будет работать с {{Cssxref("background-color")}} и прочими свойствами использующими тип данных {{cssxref("&lt;color&gt;")}}.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;сторона-или-угол&gt;</code></dt>
+ <dd>Положение точки начала линии градиента. Начинается со слова <code>to</code> и максимум двух ключевых слов: одно определяет сторону по горизонтали (<code>left</code> или <code>right</code>), и другое сторону по вертикали (<code>top</code> или <code>bottom</code>). Порядок ключевых слов определяющих сторону не важен. Если они не определены, по умолчанию используется <code><span class="css">to</span></code><span class="css"> </span><code><span class="css">bottom</span></code>.</dd>
+ <dd>Значения <code>to top</code>, <code>to bottom</code>, <code>to left</code>, и <code>to right</code> эквивалентны углам <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, и <code>90deg</code> соответственно. Прочие значения транслируются в угол.</dd>
+ <dt>{{cssxref("&lt;angle&gt;", "&lt;угол&gt;")}}</dt>
+ <dd>Угол наклона линии направления градиента. Значение <code>0deg</code> эквивалентно <code>to top</code>; увеличение значения приводит к повороту линии против часовой стрелки начиная от этой величины (<code>0deg</code>).</dd>
+ <dt><code>&lt;цвет-позиция&gt;</code></dt>
+ <dd>Значение {{cssxref("&lt;color&gt;", "&lt;цвета&gt;")}} с последующей (необязательной) его позицией (либо в {{cssxref("&lt;percentage&gt;", "&lt;процентах&gt;")}}, либо в единицах {{cssxref("&lt;length&gt;", "&lt;длины&gt;")}} вдоль оси градиента).</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Примечание:</strong> Рендер <a href="#Gradient_with_multiple_color_stops">перехода цветов в CSS градиентах</a> следует тем же правилам что и в <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG градиентах</a>.</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">repeating-linear-gradient(  [ <a href="/en-US/CSS/angle">&lt;угол&gt;</a> | to &lt;сторона-или-угол&gt; ,]? &lt;цвет-позиция&gt; [, &lt;цвет-позиция&gt;]+ )
+                            \---------------------------------/ \----------------------------/
+                              Определение линии градиента         Список цветов и их позиций
+
+где <code>&lt;</code>сторона-или-угол<code>&gt; = [left | right] || [top | bottom]</code>
+   и <code>&lt;</code>цвет-позиция<code>&gt;    = &lt;цвет&gt; [ &lt;процент&gt; | &lt;длина&gt; ]?</code>
+</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Полоски_зебры">Полоски зебры</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 20px,
+      black 20px,
+      black 40px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Полоски_зебры', 120, 120)}}</p>
+
+<h3 id="Повторяющиеся_горизонтальные_полосы">Повторяющиеся горизонтальные полосы</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background-image: repeating-linear-gradient(to bottom,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Повторяющиеся_горизонтальные_полосы', 120, 120)}}</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Для дополнительных примеров пожалуйста обратитесь к статье <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a>.</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Примечание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<div>{{Compat("css.types.image.gradient.repeating-linear-gradient")}}</div>
+
+<h2 id="Дополнительно">Дополнительно</h2>
+
+<ul>
+ <li><a href="/en/CSS/Using_CSS_gradients">Using CSS gradients</a></li>
+ <li>Другие функции градиентов: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}</li>
+</ul>