initial commit

1 files changed, 301 insertions, 0 deletions

diff --git a/files/ru/web/css/radial-gradient()/index.html b/files/ru/web/css/radial-gradient()/index.html
new file mode 100644
index 0000000000..3d9a247da7
--- /dev/null
+++ b/files/ru/web/css/radial-gradient()/index.html
@@ -0,0 +1,301 @@
+---
+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("&lt;gradient&gt;")}}, который является расширением типа {{cssxref("&lt;image&gt;")}}.</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>&lt;gradient&gt;ы</code> относятся к типу <code>&lt;image&gt;</code>, они могут быть использованы только там где используется тип <code>&lt;image&gt;</code>. По этой причине <code>radial-gradient()</code> не будет работать совместно с {{Cssxref("background-color")}} и другими свойствами, которые используют тип {{cssxref("&lt;color&gt;")}}.</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("&lt;position&gt;")}}</dt>
+ <dd>Позицию начала градиента можно рассматривать как {{cssxref("background-position")}} или {{cssxref("transform-origin")}}. По умолчанию позиция равна <code>center</code>.</dd>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>Форма градиента. Может принимать значение <code>circle</code> (подразумевается что формой является круг с постоянным радиусом) или <code>ellipse</code> (форма является эллипсом, выровненным по оси). По умолчанию имеет значение <code>ellipse</code>.</dd>
+ <dt><code>&lt;extent-keyword&gt;</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>&lt;color-stop&gt;</code></dt>
+ <dd>{{cssxref("&lt;color&gt;")}} значение цвета в точке изменения цвета за которым следует необязательный параметр позиции ({{cssxref("&lt;percentage&gt;")}} или {{cssxref("&lt;length&gt;")}} вдоль оси градиента). Значения <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">&lt;length&gt;</a> ]                         [ at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
+    [ ellipse || [ <a href="/en-US/docs/CSS/length">&lt;length&gt;</a> | <a href="/en-US/docs/CSS/percentage">&lt;percentage&gt;</a> ]{2} ]  [ at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
+    [ [ circle | ellipse ] || &lt;extent-keyword&gt; ]   [ at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
+    at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ,
+  ]?
+  &lt;color-stop&gt; [ , &lt;color-stop&gt; ]+
+)
+где &lt;extent-keyword&gt; = closest-corner | closest-side | farthest-corner | farthest-side
+  и<code> &lt;color-stop&gt;     = &lt;color&gt; [ &lt;percentage&gt; | &lt;length&gt; ]?</code>
+</code></pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_градиент">Простой градиент</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</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">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</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>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Стандартное использование (в {{cssxref("background")}} и {{cssxref("background-image")}})</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("16")}}</td>
+   <td>10.0 (534.16){{property_prefix("-webkit")}}<sup>[2]</sup></td>
+   <td>10.0<sup>[3]</sup></td>
+   <td>11.60{{property_prefix("-o")}}</td>
+   <td>5.1{{property_prefix("-webkit")}}<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td>Использование в {{cssxref("border-image")}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Использование на любых других свойствах работающих с типом {{cssxref("&lt;image&gt;")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.webkit.org/blog/175/introducing-css-gradients/">Устаревший webkit синтаксис</a> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>3{{property_prefix("-webkit")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.0{{property_prefix("-webkit")}}<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>at</code> синтаксис (финальный стандартизованный вариант)</td>
+   <td>{{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("16")}}<sup>[4]</sup></td>
+   <td>26</td>
+   <td>10.0</td>
+   <td>11.60{{property_prefix("-o")}}<sup>[2]</sup><br>
+    2.12</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://drafts.csswg.org/css-images-4/#color-interpolation-hint">Interpolation hints/gradient midpoints</a> (точки заданные в процентах без значения цвета)</td>
+   <td>{{CompatGeckoDesktop("36")}}</td>
+   <td>40</td>
+   <td></td>
+   <td>27</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Свойство</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Стандартное спользование (в {{cssxref("background")}} и {{cssxref("background-image")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoMobile("16")}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Использование в {{cssxref("border-image")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("29")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Использование на любых других свойствах работающих с типом {{cssxref("&lt;image&gt;")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.webkit.org/blog/175/introducing-css-gradients/">Устаревший webkit синтаксис</a> {{non-standard_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>at</code> синтаксис (финальный стандартизованный вариант)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("10")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
+    {{CompatGeckoMobile("16")}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox 3.6 синтаксис - ранний реализованный вариант с префиксом. До Firefox 36, Gecko не применял градиенты на расширенное цветовое пространство, так как это приводило к неожиданному появлению серого оттенка при использовании прозрачности. Начиная с Firefox 42, версии градиентов с префиксом могую быть отключены установкой <code>layout.css.prefixes.gradients</code> to <code>false</code>.</p>
+
+<p>[2] Ранний синтаксис Webkit с префиксом. WebKit с версии 528 поддерживает устаревшый вариант <a href="https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW34"><code>-webkit-gradient(radial,…)</code></a>. Смотрите также <a href="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15">текущую поддержку</a> радиальных градиентов.</p>
+
+<p>[3] Internet Explorer от 5.5 до 9.0 поддерживают собственный фильтр <a href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code></a>.</p>
+
+<p>[4] В дополнении к поддержке без префикса, Gecko 44.0 {{geckoRelease("44.0")}} добавил поддержку версии с префиксом <code>-webkit</code> по соображениям обратной совместимости с настройкой <code>layout.css.prefixes.webkit</code>, установленной по умолчанию как <code>false</code>. Начиная с Gecko 49.0 {{geckoRelease("49.0")}} используется установка по умолчанию как <code>true</code>.</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("&lt;image&gt;")}}</li>
+</ul>