diff options
Diffstat (limited to 'files/ru/web/css/repeating-linear-gradient()/index.html')
| -rw-r--r-- | files/ru/web/css/repeating-linear-gradient()/index.html | 134 |
1 files changed, 0 insertions, 134 deletions
diff --git a/files/ru/web/css/repeating-linear-gradient()/index.html b/files/ru/web/css/repeating-linear-gradient()/index.html deleted file mode 100644 index 22766068a9..0000000000 --- a/files/ru/web/css/repeating-linear-gradient()/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -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("<gradient>")}}, являющегося разновидностью типа данных {{cssxref("<image>")}}.</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><gradient></code> относится к типу данных <code><image></code> , он может быть использован только там где применим тип <code><image></code>. По этой причине <code>repeating-linear-gradient()</code> не будет работать с {{Cssxref("background-color")}} и прочими свойствами использующими тип данных {{cssxref("<color>")}}.</p> -</div> - -<h2 id="Синтаксис">Синтаксис</h2> - -<h3 id="Значения">Значения</h3> - -<dl> - <dt><code><сторона-или-угол></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("<angle>", "<угол>")}}</dt> - <dd>Угол наклона линии направления градиента. Значение <code>0deg</code> эквивалентно <code>to top</code>; увеличение значения приводит к повороту линии против часовой стрелки начиная от этой величины (<code>0deg</code>).</dd> - <dt><code><цвет-позиция></code></dt> - <dd>Значение {{cssxref("<color>", "<цвета>")}} с последующей (необязательной) его позицией (либо в {{cssxref("<percentage>", "<процентах>")}}, либо в единицах {{cssxref("<length>", "<длины>")}} вдоль оси градиента).</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"><угол></a> | to <сторона-или-угол> ,]? <цвет-позиция> [, <цвет-позиция>]+ ) - \---------------------------------/ \----------------------------/ - Определение линии градиента Список цветов и их позиций - -где <code><</code>сторона-или-угол<code>> = [left | right] || [top | bottom]</code> - и <code><</code>цвет-позиция<code>> = <цвет> [ <процент> | <длина> ]?</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> |