From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/radial-gradient()/index.html | 301 ++++++++++++++++++++++++++ 1 file changed, 301 insertions(+) create mode 100644 files/ru/web/css/radial-gradient()/index.html (limited to 'files/ru/web/css/radial-gradient()/index.html') 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() +--- +
{{CSSRef}}
+ +

CSS функция radial-gradient() создает картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("<gradient>")}}, который является расширением типа {{cssxref("<image>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}
+ + + +

Как и любой градиент, радиальный градиент не имеет внутренних размеров, тоесть заданных или предпочитаемых размеров, как и заданного коэффициента соотношения сторон. Его итоговый размер будет соответствовать размеру элемента к которому он применен.

+ +

Чтобы создать повторяющийся радиальный градиент, который будет заполнять контейнер, необходимо использовать функцию {{cssxref("repeating-radial-gradient")}}.

+ +

Поскольку <gradient>ы относятся к типу <image>, они могут быть использованы только там где используется тип <image>. По этой причине radial-gradient() не будет работать совместно с {{Cssxref("background-color")}} и другими свойствами, которые используют тип {{cssxref("<color>")}}.

+ +

Композиция свойства

+ +

Радиальнй градиент задается позицией центра, конечной формой, и двумя или более точками изменения цвета.

+ +

Чтобы создать плавный градиент, функция radial-gradient() рисует серию концентрических форм исходящих из центра к краям формы градиента (и потенциально далее за его пределы). Конечная форма может быть как кругом так и эллипсом.

+ +

Точки изменения цвета расположены на виртуальном луче градиента, который расширяется горизонтально направо. Позиция точек заданных в процентах расчитывается относительно пересечения конечной формы таким лучем, что является 100%. Цвет каждой такой формы задается цветом на пересечении луча градиента и этой формы.

+ +

Синтаксис

+ +
/* Градиент в центре контейнера,
+   переход от красного к синему и после к зеленому */
+radial-gradient(circle at center, red 0, blue, green 100%)
+ +

Параметры

+ +
+
{{cssxref("<position>")}}
+
Позицию начала градиента можно рассматривать как {{cssxref("background-position")}} или {{cssxref("transform-origin")}}. По умолчанию позиция равна center.
+
<shape>
+
Форма градиента. Может принимать значение circle (подразумевается что формой является круг с постоянным радиусом) или ellipse (форма является эллипсом, выровненным по оси). По умолчанию имеет значение ellipse.
+
<extent-keyword>
+
Параметр определяющий размер конечной формы. Возможные значения:
+
+ + + + + + + + + + + + + + + + + + + + + + + +
ЗначениеОписание
closest-sideКонечная форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для окружностей), или обеим вертикальным и горизонтальным сторонам, ближайшим к центру (для эллипсов).
closest-cornerКонечная форма градиента определяется таким образом, чтобы он точно соответствовал ближайшему углу окна от его центра.
farthest-sideСхоже с closest-side, кроме того что, размер формы определяется самой дальней стороной от своего центра (или вертикальных и горизонтальных сторон)
farthest-cornerКонечная форма градиента определяется таким образом, чтобы он точно соответствовал самому дальнему углу прямоугольника от его центра.
+ +
+

Заметка: Ранние реализации этой функции включают в себя другие значения свойства (cover and contain) которые являются синонимами farthest-corner и closest-side, соответственно. Рекоментуется использовать только стандартные значения, так как некоторые реализации уже перестали использовать старые значения свойств.

+
+
+
<color-stop>
+
{{cssxref("<color>")}} значение цвета в точке изменения цвета за которым следует необязательный параметр позиции ({{cssxref("<percentage>")}} или {{cssxref("<length>")}} вдоль оси градиента). Значения 0%, или 0 представляют центр градиента; значение 100% представляет собой виртуальное пересечение конечной формы с виртуальным лучем граддиента. Процентные значения будут линейно расположены на луче градиента.
+
+ +

Синтаксис

+ +
radial-gradient(
+  [ [ circle || <length> ]                         [ at <position> ]? , |
+    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
+    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
+    at <position> ,
+  ]?
+  <color-stop> [ , <color-stop> ]+
+)
+где <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+  и <color-stop>     = <color> [ <percentage> | <length> ]?
+
+ +

Примеры

+ +

Простой градиент

+ + + +
.radial-gradient {
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+}
+ +

{{EmbedLiveSample('Простой_градиент', 120, 120)}}

+ +

Градиент со смещенным центром

+ + + +
.radial-gradient {
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}
+ +

{{EmbedLiveSample('Градиент_со_смещенным_центром', 240, 120)}}

+ +
+

Заметка: Дополнительные примеры можно найти в Использование CSS градиентов.

+
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

Совместимость с браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Стандартное использование (в {{cssxref("background")}} и {{cssxref("background-image")}}){{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16")}}		10.0 (534.16){{property_prefix("-webkit")}}[2]10.0[3]11.60{{property_prefix("-o")}}5.1{{property_prefix("-webkit")}}[2]
Использование в {{cssxref("border-image")}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Использование на любых других свойствах работающих с типом {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Устаревший webkit синтаксис {{non-standard_inline}}{{CompatNo}}3{{property_prefix("-webkit")}}[2]{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}[2]
at синтаксис (финальный стандартизованный вариант){{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16")}}[4]		2610.011.60{{property_prefix("-o")}}[2]
+ 2.12		{{CompatNo}}
Interpolation hints/gradient midpoints (точки заданные в процентах без значения цвета){{CompatGeckoDesktop("36")}}4027
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Стандартное спользование (в {{cssxref("background")}} и {{cssxref("background-image")}}){{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("16")}}		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Использование в {{cssxref("border-image")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Использование на любых других свойствах работающих с типом {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Устаревший webkit синтаксис {{non-standard_inline}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
at синтаксис (финальный стандартизованный вариант){{CompatUnknown}}{{CompatGeckoMobile("10")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("16")}}		10{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Firefox 3.6 синтаксис - ранний реализованный вариант с префиксом. До Firefox 36, Gecko не применял градиенты на расширенное цветовое пространство, так как это приводило к неожиданному появлению серого оттенка при использовании прозрачности. Начиная с Firefox 42, версии градиентов с префиксом могую быть отключены установкой layout.css.prefixes.gradients to false.

+ +

[2] Ранний синтаксис Webkit с префиксом. WebKit с версии 528 поддерживает устаревшый вариант -webkit-gradient(radial,…). Смотрите также текущую поддержку радиальных градиентов.

+ +

[3] Internet Explorer от 5.5 до 9.0 поддерживают собственный фильтр filter: progid:DXImageTransform.Microsoft.Gradient().

+ +

[4] В дополнении к поддержке без префикса, Gecko 44.0 {{geckoRelease("44.0")}} добавил поддержку версии с префиксом -webkit по соображениям обратной совместимости с настройкой layout.css.prefixes.webkit, установленной по умолчанию как false. Начиная с Gecko 49.0 {{geckoRelease("49.0")}} используется установка по умолчанию как true.

+ +

Сноски к Quantum CSS

+ + + +

Смотрите так же

+ + -- cgit v1.2.3-54-g00ecf