diff options
Diffstat (limited to 'files/ru/orphaned/web/css/radial-gradient()/index.html')
| -rw-r--r-- | files/ru/orphaned/web/css/radial-gradient()/index.html | 170 |
1 files changed, 170 insertions, 0 deletions
diff --git a/files/ru/orphaned/web/css/radial-gradient()/index.html b/files/ru/orphaned/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..8af2698d29 --- /dev/null +++ b/files/ru/orphaned/web/css/radial-gradient()/index.html @@ -0,0 +1,170 @@ +--- +title: radial-gradient() +slug: orphaned/Web/CSS/radial-gradient() +translation_of: Web/CSS/radial-gradient() +original_slug: 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> |