diff options
Diffstat (limited to 'files/ru/web/css/radial-gradient()/index.html')
| -rw-r--r-- | files/ru/web/css/radial-gradient()/index.html | 169 |
1 files changed, 0 insertions, 169 deletions
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> |