diff options
author | MDN <actions@users.noreply.github.com> | 2021-06-19 00:34:51 +0000 |
---|---|---|
committer | MDN <actions@users.noreply.github.com> | 2021-06-19 00:34:51 +0000 |
commit | ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b (patch) | |
tree | 03e6f19fc527ab750be01344add09afba6bcb6dd /files/ru/web/css | |
parent | 3e028982e4bc6762a47268f86fe395670a11c160 (diff) | |
download | translated-content-ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b.tar.gz translated-content-ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b.tar.bz2 translated-content-ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b.zip |
[CRON] sync translated content
Diffstat (limited to 'files/ru/web/css')
-rw-r--r-- | files/ru/web/css/image-set()/index.html | 78 | ||||
-rw-r--r-- | files/ru/web/css/linear-gradient()/index.html | 212 | ||||
-rw-r--r-- | files/ru/web/css/radial-gradient()/index.html | 169 | ||||
-rw-r--r-- | files/ru/web/css/repeating-linear-gradient()/index.html | 134 |
4 files changed, 0 insertions, 593 deletions
diff --git a/files/ru/web/css/image-set()/index.html b/files/ru/web/css/image-set()/index.html deleted file mode 100644 index 9f00bc8ca7..0000000000 --- a/files/ru/web/css/image-set()/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: image-set() -slug: Web/CSS/image-set() -translation_of: Web/CSS/image-set() ---- -<div>{{cssref}}</div> - -<p class="summary">CSS функция <code>image-set()</code> это способ позволить браузеру выбрать наиболее подходящее изображение CSS из заданного набора, в первую очередь для экранов с высокой плотностью пикселей.</p> - -<p>Разрешение экрана и пропускная способность могут отличаться в зависимости от устройства и доступа к сети. Функция <code>image-set()</code> обеспечивает наиболее подходящее разрешение изображения для устройства пользователя, предоставляя набор параметров изображения — каждый с соответствующим объявлением разрешения — из которых браузер выбирает наиболее подходящее для устройства и настроек. Разрешение может использоваться в качестве прокси для размера файла — клиент на медленном мобильном соединении с экраном высокого разрешения может предпочесть получать изображения с более низким разрешением, а не ждать загрузки изображения с более высоким разрешением.</p> - -<p><code>image-set()</code> позволяет автору предоставлять параметры, а не определять, что нужно каждому отдельному пользователю.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox notranslate">image-set() = image-set( <image-set-option># ) -где <image-set-option> = [ <image> | <string> ] <resolution> и - <string> в качестве <url> -</pre> - -<h3 id="Значения">Значения</h3> - -<p>Чаще всего вы можете увидеть значение <code>url()</code> как <code><string></code>, но <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> может быть любым типом изображения, кроме набора изображений. Функция <code>image-set()</code> не может быть вложена в другую функцию <code>image-set()</code>.</p> - -<p>Блоки <code><a href="/en-US/docs/Web/CSS/resolution"><resolution></a></code> включают в себя <code>x</code> или <code>ddpx,</code> для точек на пиксель, <code>dpi</code> для точек на дюйм, и <code>dpcm</code> для точек на сантиметр. Каждое изображение в наборе <code>image-set()</code> должно иметь уникальное разрешение.</p> - -<h2 id="Примеры">Примеры</h2> - -<pre class="brush: css notranslate">background-image: image-set( "cat.png" 1x, - "cat-2x.png" 2x, - "cat-print.png" 600dpi);</pre> - -<p>Этот пример демонстрирует использование <code><a class="css" href="https://drafts.csswg.org/css-images-4/#funcdef-image-set" id="ref-for-funcdef-image-set⑨">image-set()</a></code> для обеспечения двух альтернативных {{cssxref("background-image")}} свойств, из которых будет выбрано более подходящее по разрешению: обычная версия и версия с высоким разрешением.</p> - -<h2 id="Вопросы_доступности">Вопросы доступности</h2> - -<p>Браузеры не предоставляют никакой специальной информации о фоновых изображениях для вспомогательных технологий. Это важно прежде всего для экранных считывающих технологий, так как они не объявят о своём присутствии и поэтому ничего не передадут своим пользователям. Если изображение содержит информацию, критически важную для понимания общего назначения страницы, лучше описать её семантически в документе.</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> - <li><a class="external external-icon" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Спецификации">Спецификации</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>Спецификация</th> - <th>Статус</th> - <th>Комментарий</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2> - - - -<p>{{Compat("css.types.image.image-set")}}</p> - -<h2 id="See_also" name="See_also">Смотрите также</h2> - -<ul> - <li>{{cssxref("image")}}</li> - <li>{{cssxref("_image", "image()")}}</li> - <li>{{cssxref("element")}}</li> - <li>{{cssxref("url")}}</li> - <li>{{cssxref("<gradient>")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ru/web/css/linear-gradient()/index.html b/files/ru/web/css/linear-gradient()/index.html deleted file mode 100644 index 4433b0587d..0000000000 --- a/files/ru/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: linear-gradient() -slug: Web/CSS/linear-gradient() -tags: - - Градиент - - Линейный градиент -translation_of: Web/CSS/linear-gradient() ---- -<div>{{CSSRef}}</div> - -<p><a href="/en-US/docs/Web/CSS">CSS</a>-функция <strong><code>linear-gradient()</code></strong> создаёт изображение, состоящее из постепенного перехода между двумя или более цветами вдоль прямой линии. Её результатом является объект типа данных {{CSSxRef("<gradient>")}}, являющийся особым видом {{CSSxRef("<image>")}}.</p> - -<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div> - -<div class="hidden">Исходник для этого интерактивного примера хранится в GitHub-репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение.</div> - -<p>Как и в случае с любым градиентом, линейный градиент не имеет <a href="/en-US/docs/CSS/image#no_intrinsic">внутренних размеров</a>; т. е., он не имеет ни естественного или предпочтительного размера, ни предпочтительного соотношения сторон. Его фактический размер будет совпадать с размеров элемента, к которому он применён.</p> - -<p>Для создания линейного градиента, повторяющегося таким образом, что он заполняет содержащий его элемент, лучше используйте функцию {{CSSxRef("repeating-linear-gradient")}}.</p> - -<p>Так как <code><gradient></code>ы относятся к типу данных <code><image></code>, они могут использоваться только там, где может использоваться <code><image></code>. По этой причине, <code>linear-gradient()</code> не будет работать в качестве {{CSSxRef("background-color")}} и других свойств, использующих тип данных {{CSSxRef("<color>")}}.</p> - -<h2 id="Создание_линейного_градиента">Создание линейного градиента</h2> - -<p>Линейный градиент определяется осью — <em>линией градиента</em> — и двумя или более <em>точками остановки цвета</em>. Каждая точка на оси – это определённый цвет; для создания плавного градиента функция <code>linear-gradient()</code> рисует серию цветных линий, перпендикулярных линии градиента, каждая из них соответствует цвету точки, в которой она пересекает линию градиента.</p> - -<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p> - -<p>Линия градиента определена центром блока, содержащего изображение градиента, и углом. Цвета градиента задаются двумя или более точками: начальной точкой, конечной точкой, и необязательными точками остановки цвета между ними.</p> - -<p><em>Начальная точка</em> – это место на линии градиента, где начинается первый цвет. <em>Конечная точка</em> – это точка, на которой заканчивается последний цвет. Каждая из этих двух точек определяется пересечением линии градиента с перпендикулярной линией, проходящей от угла, находящегося в том же квадранте блока. Конечную точку можно просто считать как точку, симметричную начальной точке. Эти несколько сложные определения приводят к интересному эффекту, иногда называемому <em>магическими углами</em>: углы, ближайшие к начальной и конечной точке, имеют те же цвета, что и соответствующая им начальная или конечная точка.</p> - -<h3 id="Настройка_градиентов">Настройка градиентов</h3> - -<p>Добавляя больше точек остановки цвета на линию градиента, вы можете точно задавать переходы между разными цветами. Позиции остановок цвета могут быть явно заданы использованием значений типа {{CSSxRef("<length>")}} или {{CSSxRef("<percentage>")}}. Если вы не определите расположение цвета, он будет расположен посередине между предыдущим и следующим цветом. Следующие два градиента эквивалентны.</p> - -<pre class="brush: css">linear-gradient(red, orange, yellow, green, blue); -linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</pre> - -<p>По умолчанию цвета переходят плавно от цвета на одной точке остановки до цвета на следующей точке остановки, по середине которого – точка, являющаяся половиной перехода от одного цвета к другому. Вы можете двигать эту среднюю точку в любую позицию между двумя точками остановки цвета, добавляя цветовую подсказку в виде значения в % между двумя цветами для того, чтобы обозначить, где должна находиться середина цветового перехода. В следующем примере показан чисто красный цвет от начала до отметки 10% и чисто синий от 90% до конца. Между 10% и 90% цвет переходит от красного до синего, однако середина цветового перехода находится на отметке 30%, а не на 50%, как было бы без добавления цветовой подсказки 30%.</p> - -<pre class="brush: css">linear-gradient(red 10%, 30%, blue 90%);</pre> - -<p>Если две или более точки остановки цвета находятся в одной и той же позиции, переход будет в виде чёткой линии между первым и последним цветом, объявленным на этой позиции.</p> - -<p>Точки остановки цвета должны быть перечислены в порядке возрастания. Соседние точки остановки цвета с меньшим значением переопределят значение предыдущей точки остановки цвета, создавая резкий переход. В примере ниже на позиции 30% происходит замена красного на жёлтый, и затем идёт переход от жёлтого до синего на протяжении 35% длины градиента.</p> - -<pre class="brush: css">linear-gradient(red 40%, yellow 30%, blue 65%); -</pre> - -<p>Допустимо использовать многопозиционную остановку цвета. Цвет может быть объявлен как две смежных точки остановки цвета, если включить его в обе позиции в CSS-объявлении. Следующие три градиента эквивалентны:</p> - -<pre class="brush: css">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); -linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); -linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);</pre> - -<p>По умолчанию, если на остановку 0% не задан цвет, то на этой точке будет располагаться первый объявленный цвет. Аналогично, последний цвет будет продолжаться до отметки 100%, или будет на отметке 100%, если на этой последней остановке не было объявлено никакой длины.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="language-css" id="css">/* Градиент наклонён на 45 градусов, - начинается с синего, заканчивается красным */ -linear-gradient(45deg, blue, red); - -/* Градиент идёт от правого нижнего до левого верхнего угла, - от синего до красного */ -linear-gradient(to left top, blue, red); - -/* Остановка цвета: градиент идёт снизу вверх, - начинается синим, становится зелёным на 40% своей длины, - и заканчивается красным */ -linear-gradient(0deg, blue, green 40%, red); - -/* Цветовая подсказка: градиент идёт слева направо, - начинается с красного, достигает среднего цвета - на 10% пути длины градиента, - занимая оставшиеся 90% длины переходом в синий */ -linear-gradient(.25turn, red, 10%, blue); - -/* Многопозиционная остановка цвета: градиент повёрнут на 45 градусов, - с красной нижней левой половиной, синей верхней правой половиной, - с чёткой линией на месте перехода градиента из красного в синий */ -linear-gradient(45deg, red 0 50%, blue 50% 100%);</pre> - -<h3 id="Значения">Значения</h3> - -<dl> - <dt><code><side-or-corner></code></dt> - <dd>Позиция начальной точки линии градиента. Если указана, то должна состоять из слова <code>to</code> и максимум до двух ключевых слов включительно: одно обозначает горизонтальную сторону (<code>left</code> или <code>right</code>), а другое – вертикальную сторону (<code>top</code> или <code>bottom</code>). Порядок ключевых слов не важен. Если не определено, то принимает значение <code>to bottom</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>; увеличение значения увеличивает угол поворота по часовой стрелке от этой позиции.</dd> - <dt><code><linear-color-stop></code></dt> - <dd>Значение точки остановки цвета {{CSSxRef("<color>")}}, с последующими одной или двумя необязательными точками остановки (имеющими значение типа {{CSSxRef("<percentage>")}} или {{CSSxRef("<length>")}} вдоль оси градиента).</dd> - <dt><code><color-hint></code></dt> - <dd>Цветовая подсказка – это подсказка для перехода, определяющая, как градиент продвигается между соседними точками остановки цвета. Длина определяет, на какой точке между двумя точками остановки цвет градиента должен достичь среднего значения цветового перехода. Если не указано, средней точкой цветового перехода будет середина между двумя точками остановки цвета.</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="Формальный_синтаксис">Формальный синтаксис</h3> - -<pre class="syntaxbox">linear-gradient( - [ <a href="/en-US/CSS/angle"><angle></a> | to <side-or-corner> ,]? <color-stop-list> ) - \---------------------------------/ \----------------------------/ - Определение линии градиента Список остановок цвета - -где <side-or-corner> = [ left | right ] || [ top | bottom ] - и <color-stop-list> = [ <linear-color-stop> [, <color-hint> ]? ]#, <linear-color-stop> - и <linear-color-stop> = <color> [ <color-stop-length> ]? - и <color-stop-length> = [ <percentage> | <length> ]{1,2} - и <color-hint> = [ <percentage> | <length> ]</pre> - -<h2 id="Примеры">Примеры</h2> - -<h3 id="Градиент_под_углом_45_градусов">Градиент под углом 45 градусов</h3> - -<div class="hidden"> -<pre class="brush: css">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css">body { - background: linear-gradient(45deg, red, blue); -} -</pre> - -<p>{{EmbedLiveSample("Градиент_под_углом_45_градусов", 120, 120)}}</p> - -<h3 id="Градиент_начинающийся_на_60_линии_градиента">Градиент, начинающийся на 60% линии градиента</h3> - -<div class="hidden"> -<pre class="brush: css">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css">body { - background: linear-gradient(135deg, orange, orange 60%, cyan); -}</pre> - -<p>{{EmbedLiveSample("Градиент_начинающийся_на_60_линии_градиента", 120, 120)}}</p> - -<h3 id="Градиент_с_многопозиционными_остановками_цвета">Градиент с многопозиционными остановками цвета</h3> - -<p>Этот пример использует многопозиционные остановки цвета, и со смежными цветами, имеющими те же точки остановки цвета, создаёт полосатый эффект.</p> - -<div class="hidden"> -<pre class="brush: css">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css">body { - background: linear-gradient(to right, - red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); -}</pre> - -<p>{{EmbedLiveSample("Градиент_с_многопозиционными_остановками_цвета", 120, 120)}}</p> - -<div class="note"> -<p><strong>Примечание:</strong> Больше примеров смотрите на странице <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Использование CSS-градиентов</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('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>Добавлены подсказки по переходам</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Первоначальное определение</td> - </tr> - </tbody> -</table> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - - - -<div>{{Compat("css.types.image.gradient.linear-gradient")}}</div> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Использование CSS-градиентов</a></li> - <li>Другие градиентные функции: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient")}}</li> - <li>{{CSSxRef("<image>")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ru/web/css/radial-gradient()/index.html b/files/ru/web/css/radial-gradient()/index.html deleted file mode 100644 index a037155f09..0000000000 --- a/files/ru/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: radial-gradient() -slug: Web/CSS/radial-gradient() -translation_of: Web/CSS/radial-gradient() ---- -<div>{{CSSRef}}</div> - -<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>radial-gradient()</code></strong> создаёт картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("<gradient>")}}, который является расширением типа {{cssxref("<image>")}}.</p> - -<div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div> - - - -<p>Как и любой градиент, радиальный градиент не имеет <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">внутренних размеров</a>, то есть заданных или предпочитаемых размеров, как и заданного коэффициента соотношения сторон. Его итоговый размер будет соответствовать размеру элемента к которому он применён.</p> - -<p>Чтобы создать повторяющийся радиальный градиент, который будет заполнять контейнер, необходимо использовать функцию {{cssxref("repeating-radial-gradient")}}.</p> - -<p>Поскольку <code><gradient>ы</code> относятся к типу <code><image></code>, они могут быть использованы только там где используется тип <code><image></code>. По этой причине <code>radial-gradient()</code> не будет работать совместно с {{Cssxref("background-color")}} и другими свойствами, которые используют тип {{cssxref("<color>")}}.</p> - -<h2 id="Композиция_свойства">Композиция свойства</h2> - -<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Радиальный градиент задаётся <em>позицией центра</em>, <em>конечной формой</em>, и двумя или более <em>точками изменения цвета</em>.</p> - -<p>Чтобы создать плавный градиент, функция <code>radial-gradient()</code> рисует серию концентрических форм исходящих из центра к краям формы градиента (и потенциально далее за его пределы). Конечная форма может быть как кругом так и эллипсом.</p> - -<p>Точки изменения цвета расположены на <em>виртуальном луче градиента</em>, который расширяется горизонтально направо. Позиция точек заданных в процентах рассчитывается относительно пересечения конечной формы таким лучом, что является <code>100%</code>. Цвет каждой такой формы задаётся цветом на пересечении луча градиента и этой формы.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="brush: css no-line-numbers notranslate">/* Градиент в центре контейнера, - переход от красного к синему и после к зелёному */ -radial-gradient(circle at center, red 0, blue, green 100%)</pre> - -<h3 id="Параметры">Параметры</h3> - -<dl> - <dt>{{cssxref("<position>")}}</dt> - <dd>Позицию начала градиента можно рассматривать как {{cssxref("background-position")}} или {{cssxref("transform-origin")}}. По умолчанию позиция равна <code>center</code>.</dd> - <dt><code><shape></code></dt> - <dd>Форма градиента. Может принимать значение <code>circle</code> (подразумевается что формой является круг с постоянным радиусом) или <code>ellipse</code> (форма является эллипсом, выровненным по оси). По умолчанию имеет значение <code>ellipse</code>.</dd> - <dt><code><extent-keyword></code></dt> - <dd>Параметр определяющий размер конечной формы. Возможные значения:</dd> - <dd> - <table class="standard-table"> - <tbody> - <tr> - <th>Значение</th> - <th>Описание</th> - </tr> - <tr> - <td><code>closest-side</code></td> - <td>Конечная форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для окружностей), или обеим вертикальным и горизонтальным сторонам, ближайшим к центру (для эллипсов).</td> - </tr> - <tr> - <td><code>closest-corner</code></td> - <td>Конечная форма градиента определяется таким образом, чтобы он точно соответствовал ближайшему углу окна от его центра.</td> - </tr> - <tr> - <td><code>farthest-side</code></td> - <td>Схоже с <code>closest-side</code>, кроме того что, размер формы определяется самой дальней стороной от своего центра (или вертикальных и горизонтальных сторон)</td> - </tr> - <tr> - <td><code>farthest-corner</code></td> - <td>Конечная форма градиента определяется таким образом, чтобы он точно соответствовал самому дальнему углу прямоугольника от его центра.</td> - </tr> - </tbody> - </table> - - <div class="note"> - <p><strong>Примечание:</strong> Ранние реализации этой функции включают в себя другие значения свойства (<code>cover</code> and <code>contain</code>) которые являются синонимами <span class="st"><code>farthest-corner</code></span> и <code>closest-side</code>, соответственно. Рекомендуется использовать только стандартные значения, так как некоторые реализации уже перестали использовать старые значения свойств.</p> - </div> - </dd> - <dt><code><color-stop></code></dt> - <dd>{{cssxref("<color>")}} значение цвета в точке изменения цвета за которым следует необязательный параметр позиции ({{cssxref("<percentage>")}} или {{cssxref("<length>")}} вдоль оси градиента). Значения <code>0%</code>, или <code>0</code> представляют центр градиента; значение <code>100%</code> представляет собой виртуальное пересечение конечной формы с виртуальным лучом градиента. Процентные значения будут линейно расположены на луче градиента.</dd> -</dl> - -<h3 id="Синтаксис_2">Синтаксис</h3> - -<pre class="syntaxbox notranslate"><code>radial-gradient( - [ [ circle || <a href="/en-US/docs/CSS/length"><length></a> ] [ at <a href="/en-US/docs/CSS/position_value"><position></a> ]? , | - [ ellipse || [ <a href="/en-US/docs/CSS/length"><length></a> | <a href="/en-US/docs/CSS/percentage"><percentage></a> ]{2} ] [ at <a href="/en-US/docs/CSS/position_value"><position></a> ]? , | - [ [ circle | ellipse ] || <extent-keyword> ] [ at <a href="/en-US/docs/CSS/position_value"><position></a> ]? , | - at <a href="/en-US/docs/CSS/position_value"><position></a> , - ]? - <color-stop> [ , <color-stop> ]+ -) -где <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side - и<code> <color-stop> = <color> [ <percentage> | <length> ]?</code> -</code></pre> - -<h2 id="Примеры">Примеры</h2> - -<h3 id="Простой_градиент">Простой градиент</h3> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-gradient"></div> -</pre> - -<pre class="brush: css notranslate">.radial-gradient { - width: 240px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.radial-gradient { - background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); -} </pre> - -<p>{{EmbedLiveSample('Простой_градиент', 120, 120)}}</p> - -<h3 id="Градиент_со_смещённым_центром">Градиент со смещённым центром</h3> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-gradient"></div> -</pre> - -<pre class="brush: css notranslate">.radial-gradient { - width: 240px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.radial-gradient { - background-image: radial-gradient(farthest-corner at 40px 40px, - #f35 0%, #43e 100%); -}</pre> - -<p>{{EmbedLiveSample('Градиент_со_смещённым_центром', 240, 120)}}</p> - -<div class="note"> -<p><strong>Примечание:</strong> Дополнительные примеры можно найти в <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Использование CSS градиентов</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', '#radial-gradients', 'radial-gradients()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - -<p>{{Compat("css.types.image.gradient.radial-gradient")}}</p> -<h3 id="Сноски_к_Quantum_CSS">Сноски к Quantum CSS</h3> - -<ul> - <li>Gecko имеет долгоиграющий баг благодаря которому значения вроде <code>radial-gradient(circle gold,red)</code> будут работать, даже несмотря на то, что пропущена запятая между <code>circle</code> и <code>gold</code> ({{bug(1383323)}}). Новый parallel CSS движок от Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, планируемый к релизу в Firefox 57) исправляет этот баг.</li> - <li>Также в Gecko выражения с {{cssxref("calc")}} считаются недействительными — значение не валидно при использовании в radial-gradient() ({{bug(1376019)}}). Новый parallel CSS движок от Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, планируемый к релизу Firefox 57) исправляет этот баг.</li> -</ul> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Using_CSS_gradients">Использование CSS градиентов</a></li> - <li>Другие варианты градиентов: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}</li> - <li>{{cssxref("<image>")}}</li> -</ul> 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> |