From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- files/ru/web/css/_colon_host()/index.html | 72 -------- files/ru/web/css/_colon_host_function/index.html | 73 ++++++++ files/ru/web/css/attr()/index.html | 182 -------------------- files/ru/web/css/attr/index.html | 183 +++++++++++++++++++++ files/ru/web/css/calc()/index.html | 125 -------------- files/ru/web/css/calc/index.html | 126 ++++++++++++++ files/ru/web/css/clamp()/index.html | 108 ------------ files/ru/web/css/clamp/index.html | 109 ++++++++++++ files/ru/web/css/filter-function/blur()/index.html | 44 ----- files/ru/web/css/filter-function/blur/index.html | 45 +++++ files/ru/web/css/minmax()/index.html | 176 -------------------- files/ru/web/css/minmax/index.html | 177 ++++++++++++++++++++ .../web/css/transform-function/rotate()/index.html | 137 --------------- .../web/css/transform-function/rotate/index.html | 138 ++++++++++++++++ .../css/transform-function/rotate3d()/index.html | 131 --------------- .../web/css/transform-function/rotate3d/index.html | 132 +++++++++++++++ .../css/transform-function/scale3d()/index.html | 99 ----------- .../web/css/transform-function/scale3d/index.html | 100 +++++++++++ .../web/css/transform-function/skew()/index.html | 117 ------------- .../ru/web/css/transform-function/skew/index.html | 118 +++++++++++++ files/ru/web/css/url()/index.html | 171 ------------------- files/ru/web/css/url/index.html | 172 +++++++++++++++++++ files/ru/web/css/var()/index.md | 84 ---------- files/ru/web/css/var/index.md | 85 ++++++++++ 24 files changed, 1458 insertions(+), 1446 deletions(-) delete mode 100644 files/ru/web/css/_colon_host()/index.html create mode 100644 files/ru/web/css/_colon_host_function/index.html delete mode 100644 files/ru/web/css/attr()/index.html create mode 100644 files/ru/web/css/attr/index.html delete mode 100644 files/ru/web/css/calc()/index.html create mode 100644 files/ru/web/css/calc/index.html delete mode 100644 files/ru/web/css/clamp()/index.html create mode 100644 files/ru/web/css/clamp/index.html delete mode 100644 files/ru/web/css/filter-function/blur()/index.html create mode 100644 files/ru/web/css/filter-function/blur/index.html delete mode 100644 files/ru/web/css/minmax()/index.html create mode 100644 files/ru/web/css/minmax/index.html delete mode 100644 files/ru/web/css/transform-function/rotate()/index.html create mode 100644 files/ru/web/css/transform-function/rotate/index.html delete mode 100644 files/ru/web/css/transform-function/rotate3d()/index.html create mode 100644 files/ru/web/css/transform-function/rotate3d/index.html delete mode 100644 files/ru/web/css/transform-function/scale3d()/index.html create mode 100644 files/ru/web/css/transform-function/scale3d/index.html delete mode 100644 files/ru/web/css/transform-function/skew()/index.html create mode 100644 files/ru/web/css/transform-function/skew/index.html delete mode 100644 files/ru/web/css/url()/index.html create mode 100644 files/ru/web/css/url/index.html delete mode 100644 files/ru/web/css/var()/index.md create mode 100644 files/ru/web/css/var/index.md (limited to 'files/ru/web') diff --git a/files/ru/web/css/_colon_host()/index.html b/files/ru/web/css/_colon_host()/index.html deleted file mode 100644 index 11f23a222e..0000000000 --- a/files/ru/web/css/_colon_host()/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: ':host()' -slug: 'Web/CSS/:host()' -translation_of: 'Web/CSS/:host()' ---- -
{{CSSRef}}
- - - -

CSS функция-псевдокласс  :host() выбирает shadow хоста (носителя) shadow DOM-a, который содержит CSS, используемый внутри (так что вы можете выбрать пользовательский элемент изнутри его shadow DOM) — но только если селектор, переданный как параметр функции, соответствует shadow хосту.

- -

Самый очевидный способ использовать его — поставить некоторый класс только на определённые экземпляры пользовательских элементов, а затем передать соответствующий классовый селектор как аргумент функции. Вы не можете использовать псевдокласс c селектором наследника, чтобы выбрать только экземпляры пользовательского элемента, которые находятся внутри определённого предка. Это работа {{CSSxRef(":host-context()")}}.

- -
-

Примечание: Псевдокласс не имеет эффекта вне shadow DOM.

-
- -
/* Выбирает хоста shadow root, только
-  если он соответствует аргументу селектора */
-:host(.special-custom-element) {
-  font-weight: bold;
-}
-
- -

Синтаксис

- -{{CSSSyntax}} - -

Примеры

- -

Селективная стилизация shadow хостов

- -

Следующие ниже фрагменты взяты из нашего примера host-selectors (также смотрите вживую).

- -

В этом примере у нас есть простой пользовательский элемент — <context-span> — который мы оборачиваем вокруг текста:

- -
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
- -

Внутри конструктора элемента мы создаём элементы style и span, заполняем span контентом пользовательского элемента и заполняем элемент style CSS-правилами:

- -
let style = document.createElement('style');
-let span = document.createElement('span');
-span.textContent = this.textContent;
-
-const shadowRoot = this.attachShadow({mode: 'open'});
-shadowRoot.appendChild(style);
-shadowRoot.appendChild(span);
-
-style.textContent = 'span:hover { text-decoration: underline; }' +
-                    ':host-context(h1) { font-style: italic; }' +
-                    ':host-context(h1):after { content: " - no links in headers!" }' +
-                    ':host-context(article, aside) { color: gray; }' +
-                    ':host(.footer) { color : red; }' +
-                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
- -

Правило :host(.footer) { color : red; } стилизует все экземпляры элемента <context-span> (shadow хост в данном случае) в документе, которые имеют класс footer — мы использовали его, чтобы дать экземплярам элемента внутри {{htmlelement("footer")}} особый цвет.

- -

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

- -{{Specifications}} - -

Поддержка браузерами

- -

{{Compat}}

- -

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

- - diff --git a/files/ru/web/css/_colon_host_function/index.html b/files/ru/web/css/_colon_host_function/index.html new file mode 100644 index 0000000000..b23c69d180 --- /dev/null +++ b/files/ru/web/css/_colon_host_function/index.html @@ -0,0 +1,73 @@ +--- +title: ':host()' +slug: Web/CSS/:host_function +translation_of: Web/CSS/:host() +original_slug: Web/CSS/:host() +--- +
{{CSSRef}}
+ + + +

CSS функция-псевдокласс  :host() выбирает shadow хоста (носителя) shadow DOM-a, который содержит CSS, используемый внутри (так что вы можете выбрать пользовательский элемент изнутри его shadow DOM) — но только если селектор, переданный как параметр функции, соответствует shadow хосту.

+ +

Самый очевидный способ использовать его — поставить некоторый класс только на определённые экземпляры пользовательских элементов, а затем передать соответствующий классовый селектор как аргумент функции. Вы не можете использовать псевдокласс c селектором наследника, чтобы выбрать только экземпляры пользовательского элемента, которые находятся внутри определённого предка. Это работа {{CSSxRef(":host-context()")}}.

+ +
+

Примечание: Псевдокласс не имеет эффекта вне shadow DOM.

+
+ +
/* Выбирает хоста shadow root, только
+  если он соответствует аргументу селектора */
+:host(.special-custom-element) {
+  font-weight: bold;
+}
+
+ +

Синтаксис

+ +{{CSSSyntax}} + +

Примеры

+ +

Селективная стилизация shadow хостов

+ +

Следующие ниже фрагменты взяты из нашего примера host-selectors (также смотрите вживую).

+ +

В этом примере у нас есть простой пользовательский элемент — <context-span> — который мы оборачиваем вокруг текста:

+ +
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+ +

Внутри конструктора элемента мы создаём элементы style и span, заполняем span контентом пользовательского элемента и заполняем элемент style CSS-правилами:

+ +
let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+ +

Правило :host(.footer) { color : red; } стилизует все экземпляры элемента <context-span> (shadow хост в данном случае) в документе, которые имеют класс footer — мы использовали его, чтобы дать экземплярам элемента внутри {{htmlelement("footer")}} особый цвет.

+ +

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

+ +{{Specifications}} + +

Поддержка браузерами

+ +

{{Compat}}

+ +

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

+ + diff --git a/files/ru/web/css/attr()/index.html b/files/ru/web/css/attr()/index.html deleted file mode 100644 index 6b4f90bec1..0000000000 --- a/files/ru/web/css/attr()/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: attr -slug: Web/CSS/attr() -translation_of: Web/CSS/attr() ---- -
{{CSSRef}}
- -

Описание

- -

С помощью функции CSS attr() можно извлекать значение атрибута выбранного элемента и использовать это значение в таблице стилей. Функция работает и с псевдо-элементами. В этом случае возвращается значение атрибута элемента, для которого формируется псевдо-элемент.

- -

Функцию attr() можно использовать с любым свойством CSS, но поддержка иных свойств, кроме {{cssxref("content")}}, является экспериментальной.

- -

Синтаксис

- -
/* Пример простого использования */
-attr(data-count);
-attr(title);
-
-/* С типом */
-attr(src url);
-attr(data-count number);
-attr(data-width px);
-
-/* с фоллбэком */
-attr(data-count number, 0);
-attr(src url, '');
-attr(data-width px, inherit);
-attr(data-something, 'default');
-
- -

Значения

- -
-
attribute-name
-
Название атрибута элемента HTML, на который ссылаемся в CSS.
-
<type-or-unit> {{Experimental_Inline}}
-
-
Является ключевым словом, представляющим либо тип значения атрибута, либо его единицу, так как в HTML некоторые атрибуты имеют неявные единицы. Если использование <type-or-unit> в качестве значения для данного атрибута недопустимо, выражение attr() также будет недопустимым. Если этот параметр опущен, по умолчанию используется string . Список допустимых значений:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ключевое словоТипКомментарийЗначение по умолчанию
string{{cssxref("<string>")}}The attribute value is treated as a CSS {{cssxref("<string>")}}.  It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.An empty string
color {{experimental_inline}}{{cssxref("<color>")}}The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("<string>")}} value.
- Leading and trailing spaces are stripped.		currentColor
url {{experimental_inline}}{{cssxref("<url>")}}The attribute value is parsed as a string that is used inside a CSS url()function.
- Relative URL are resolved relatively to the original document, not relatively to the style sheet.
- Leading and trailing spaces are stripped.		The url about:invalid that points to a non-existent document with a generic error condition.
integer {{experimental_inline}}{{cssxref("<integer>")}}The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.
- Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
number {{experimental_inline}}{{cssxref("<number>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
- Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
length {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.
- If the given unit is a relative length, attr()computes it to an absolute length.
- Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
- If the given unit is a relative length, attr()computes it to an absolute length.
- Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
angle {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
- Leading and trailing spaces are stripped.		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
deg, grad, rad {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
- Leading and trailing spaces are stripped.		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
time {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
- Leading and trailing spaces are stripped.		0s, or, if 0s is not a valid value for the property, the property's minimum value.
s, ms {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
- Leading and trailing spaces are stripped.		0s, or, if 0s is not a valid value for the property, the property's minimum value.
frequency {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
Hz, kHz {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
- Leading and trailing spaces are stripped.		0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
% {{experimental_inline}}{{cssxref("<percentage>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
- If the given value is used as a length, attr()computes it to an absolute length.
- Leading and trailing spaces are stripped.		0%, or, if 0% is not a valid value for the property, the property's minimum value.
-
-
<fallback> {{experimental_inline}}
-
The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where attr() is used, even if it is not used, and must not contain another attr() expression. If attr() is not the sole component value of a property, its <fallback> value must be of the type defined by <type-or-unit>. If not set, CSS will use the default value defined for each <type-or-unit>.
-
- -

Формальный синтаксис

- -{{csssyntax}} - -

Пример

- -
p::before {
-  content: attr(data-foo) " ";
-}
-
- -
<p data-foo="hello">world</p>
-
- -

Результат

- -

{{EmbedLiveSample("Пример", '100%', '80')}}

- -

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

- -{{Specifications}} - -

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

- -

{{Compat}}

diff --git a/files/ru/web/css/attr/index.html b/files/ru/web/css/attr/index.html new file mode 100644 index 0000000000..485551b114 --- /dev/null +++ b/files/ru/web/css/attr/index.html @@ -0,0 +1,183 @@ +--- +title: attr +slug: Web/CSS/attr +translation_of: Web/CSS/attr() +original_slug: Web/CSS/attr() +--- +
{{CSSRef}}
+ +

Описание

+ +

С помощью функции CSS attr() можно извлекать значение атрибута выбранного элемента и использовать это значение в таблице стилей. Функция работает и с псевдо-элементами. В этом случае возвращается значение атрибута элемента, для которого формируется псевдо-элемент.

+ +

Функцию attr() можно использовать с любым свойством CSS, но поддержка иных свойств, кроме {{cssxref("content")}}, является экспериментальной.

+ +

Синтаксис

+ +
/* Пример простого использования */
+attr(data-count);
+attr(title);
+
+/* С типом */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* с фоллбэком */
+attr(data-count number, 0);
+attr(src url, '');
+attr(data-width px, inherit);
+attr(data-something, 'default');
+
+ +

Значения

+ +
+
attribute-name
+
Название атрибута элемента HTML, на который ссылаемся в CSS.
+
<type-or-unit> {{Experimental_Inline}}
+
+
Является ключевым словом, представляющим либо тип значения атрибута, либо его единицу, так как в HTML некоторые атрибуты имеют неявные единицы. Если использование <type-or-unit> в качестве значения для данного атрибута недопустимо, выражение attr() также будет недопустимым. Если этот параметр опущен, по умолчанию используется string . Список допустимых значений:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ключевое словоТипКомментарийЗначение по умолчанию
string{{cssxref("<string>")}}The attribute value is treated as a CSS {{cssxref("<string>")}}.  It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.An empty string
color {{experimental_inline}}{{cssxref("<color>")}}The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("<string>")}} value.
+ Leading and trailing spaces are stripped.		currentColor
url {{experimental_inline}}{{cssxref("<url>")}}The attribute value is parsed as a string that is used inside a CSS url()function.
+ Relative URL are resolved relatively to the original document, not relatively to the style sheet.
+ Leading and trailing spaces are stripped.		The url about:invalid that points to a non-existent document with a generic error condition.
integer {{experimental_inline}}{{cssxref("<integer>")}}The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
number {{experimental_inline}}{{cssxref("<number>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
length {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.
+ If the given unit is a relative length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ If the given unit is a relative length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
angle {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
deg, grad, rad {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
time {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0s, or, if 0s is not a valid value for the property, the property's minimum value.
s, ms {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0s, or, if 0s is not a valid value for the property, the property's minimum value.
frequency {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
Hz, kHz {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
% {{experimental_inline}}{{cssxref("<percentage>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ If the given value is used as a length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0%, or, if 0% is not a valid value for the property, the property's minimum value.
+
+
<fallback> {{experimental_inline}}
+
The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where attr() is used, even if it is not used, and must not contain another attr() expression. If attr() is not the sole component value of a property, its <fallback> value must be of the type defined by <type-or-unit>. If not set, CSS will use the default value defined for each <type-or-unit>.
+
+ +

Формальный синтаксис

+ +{{csssyntax}} + +

Пример

+ +
p::before {
+  content: attr(data-foo) " ";
+}
+
+ +
<p data-foo="hello">world</p>
+
+ +

Результат

+ +

{{EmbedLiveSample("Пример", '100%', '80')}}

+ +

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

+ +{{Specifications}} + +

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

+ +

{{Compat}}

diff --git a/files/ru/web/css/calc()/index.html b/files/ru/web/css/calc()/index.html deleted file mode 100644 index 66fce5a331..0000000000 --- a/files/ru/web/css/calc()/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Функция calc() -slug: Web/CSS/calc() -tags: - - css calc -translation_of: Web/CSS/calc() ---- -
{{CSSRef}}
- -

calc() - это функция CSS, которая даёт возможность рассчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, или {{cssxref("<integer>")}}.

- -

{{EmbedInteractiveExample("pages/css/function-calc.html")}}

- -

Синтаксис

- -

Функция calc() принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS-свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов:

- -
-
+
-
Сложение
-
-
-
Вычитание.
-
*
-
Умножение. По крайней мере хоть один из сомножителей должен быть {{cssxref("<number>")}}.
-
/
-
Деление. Делитель должен быть  {{cssxref("<number>")}}.
-
- -

Операнды в expression могут быть различными выражениями {{cssxref("<length>")}}. Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.

- -
Внимание: Деление на ноль выдаст ошибку при парсинге HTML.
- -
Note: Операторы + и - всегда должны быть по обеим сторонам отделены пробелом. Выражение calc(50% -8px) будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как calc(50% - 8px) - правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях.
-Операторы * и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.
- -
-
- -

Формальный синтаксис

- -
calc(expression)
- -

Примеры

- -

Позиционирование объекта в окне с помощью отступа

- -

calc() делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px. 

- -
.banner {
-  position: absolute;
-  left: 5%;                 /* для браузеров не поддерживающих calc() */
-  left: calc(40px);
-  width: 90%;               /* для браузеров не поддерживающих calc() */
-  width: calc(100% - 80px);
-  border: solid black 1px;
-  box-shadow: 1px 2px;
-  background-color: yellow;
-  padding: 6px;
-  text-align: center;
-}
-
- -
<div class="banner">Это баннер!</div>
- -

{{ EmbedLiveSample('Позиционирование_объекта_в_окне_с_помощью_отступа', '100%', '60') }}

- -

Автоматическое изменение размера формы ввода для соответствия размеру контейнера

- -

В следующем случае calc() помогает обеспечить не выпадание полей формы за края блока, задав отступ.

- -

Давайте посмотрим некоторый код CSS:

- -
input {
-  padding: 2px;
-  display: block;
-  width: 98%;               /* для браузеров, не поддерживающих calc() */
-  width: calc(100% - 1em);
-}
-
-#formbox {
-  width: 130px;             /* для браузеров, не поддерживающих calc() */
-  width: calc(100% / 6);
-  border: 1px solid black;
-  padding: 4px;
-}
-
- -

Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать  размер полей, мы вновь используем функцию calc(), которая вычитает 1em из ширины блока. Теперь применим этот CSS к следующему HTML-коду:

- -
<form>
-  <div id="formbox">
-  <label>Type something:</label>
-  <input type="text">
-  </div>
-</form>
-
- -

{{ EmbedLiveSample('Автоматическое_изменение_размера_формы_ввода_для_соответствия_размеру_контейнера', '100%', '80') }}

- -

Вложенный calc() с CSS переменными

- -

Вы также можете использовать calc() с CSS переменными. Рассмотрим пример кода:

- -
.foo {
-  --widthA: 100px;
-  --widthB: calc(var(--widthA) / 2);
-  --widthC: calc(var(--widthB) / 2);
-  width: var(--widthC);
-}
- - - -

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

- -{{Specifications}} - -

Поддержка браузерами

- -

{{Compat}}

- -

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

- - diff --git a/files/ru/web/css/calc/index.html b/files/ru/web/css/calc/index.html new file mode 100644 index 0000000000..36e0040f27 --- /dev/null +++ b/files/ru/web/css/calc/index.html @@ -0,0 +1,126 @@ +--- +title: Функция calc() +slug: Web/CSS/calc +tags: + - css calc +translation_of: Web/CSS/calc() +original_slug: Web/CSS/calc() +--- +
{{CSSRef}}
+ +

calc() - это функция CSS, которая даёт возможность рассчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, или {{cssxref("<integer>")}}.

+ +

{{EmbedInteractiveExample("pages/css/function-calc.html")}}

+ +

Синтаксис

+ +

Функция calc() принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS-свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов:

+ +
+
+
+
Сложение
+
-
+
Вычитание.
+
*
+
Умножение. По крайней мере хоть один из сомножителей должен быть {{cssxref("<number>")}}.
+
/
+
Деление. Делитель должен быть  {{cssxref("<number>")}}.
+
+ +

Операнды в expression могут быть различными выражениями {{cssxref("<length>")}}. Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.

+ +
Внимание: Деление на ноль выдаст ошибку при парсинге HTML.
+ +
Note: Операторы + и - всегда должны быть по обеим сторонам отделены пробелом. Выражение calc(50% -8px) будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как calc(50% - 8px) - правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях.
+Операторы * и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.
+ +
+
+ +

Формальный синтаксис

+ +
calc(expression)
+ +

Примеры

+ +

Позиционирование объекта в окне с помощью отступа

+ +

calc() делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px. 

+ +
.banner {
+  position: absolute;
+  left: 5%;                 /* для браузеров не поддерживающих calc() */
+  left: calc(40px);
+  width: 90%;               /* для браузеров не поддерживающих calc() */
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+}
+
+ +
<div class="banner">Это баннер!</div>
+ +

{{ EmbedLiveSample('Позиционирование_объекта_в_окне_с_помощью_отступа', '100%', '60') }}

+ +

Автоматическое изменение размера формы ввода для соответствия размеру контейнера

+ +

В следующем случае calc() помогает обеспечить не выпадание полей формы за края блока, задав отступ.

+ +

Давайте посмотрим некоторый код CSS:

+ +
input {
+  padding: 2px;
+  display: block;
+  width: 98%;               /* для браузеров, не поддерживающих calc() */
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: 130px;             /* для браузеров, не поддерживающих calc() */
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать  размер полей, мы вновь используем функцию calc(), которая вычитает 1em из ширины блока. Теперь применим этот CSS к следующему HTML-коду:

+ +
<form>
+  <div id="formbox">
+  <label>Type something:</label>
+  <input type="text">
+  </div>
+</form>
+
+ +

{{ EmbedLiveSample('Автоматическое_изменение_размера_формы_ввода_для_соответствия_размеру_контейнера', '100%', '80') }}

+ +

Вложенный calc() с CSS переменными

+ +

Вы также можете использовать calc() с CSS переменными. Рассмотрим пример кода:

+ +
.foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}
+ + + +

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

+ +{{Specifications}} + +

Поддержка браузерами

+ +

{{Compat}}

+ +

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

+ + diff --git a/files/ru/web/css/clamp()/index.html b/files/ru/web/css/clamp()/index.html deleted file mode 100644 index ffbaec8175..0000000000 --- a/files/ru/web/css/clamp()/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: clamp() -slug: Web/CSS/clamp() -translation_of: Web/CSS/clamp() ---- -
{{CSSRef}}
- -

CSS-функция clamp() задаёт значение в диапазоне между указанными нижней и верхней границами. Функция принимает три аргумента: минимальное значение, предпочитаемое значение и максимально допустимое. Может использоваться везде, где допускается применение {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, или {{CSSxRef("<integer>")}}.

- -

clamp(MIN, VAL, MAX) вычисляется как {{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))

- -
/* свойство: clamp(expression{3}) */
-width: clamp(10px, 4em, 80px);
- -

В примере выше ширина будет не меньше 10px и не больше 80px. Но если размер одного "em" будет находиться в диапазоне от 2.5px до 20px (в сумме от 10px до 80px), то ширина будет равняться этим 4em.

- -

Давайте предположим, что в примере выше 1em равен 16px:

- -
width: clamp(10px, 4em, 80px);
-/* если 1em = 16px, 4em = (16px * 4) = 64px */
-width: clamp(10px, 64px, 80px);
-/* clamp(MIN, VAL, MAX) вычисляется как max(MIN, min(VAL, MAX))) */
-width: max(10px, min(64px, 80px))
-width: max(10px, 64px);
-width: 64px;
- -

Синтаксис

- -

Функция clamp() принимает в качестве аргументов три разделённых запятой выражения, указываемых в порядке: минимальное значение, предпочитаемое значение, максимальное значение.

- -

Минимальное значение – наименьшее значение, являющееся нижней границей диапазона допустимых значений. Если "предпочитаемое" значение меньше "минимального", будет использоваться именно "минимальное".

- -

Предпочитаемое значение – это выражение, чей результат будет использовать до тех пор, пока будет оставаться в пределах допустимого диапазона значений.

- -

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

- -

Передаваемые значения могут быть математическими функциями (более подробно смотрите на {{CSSxRef("calc")}}), точными значениями, или другими выражениями, такими как {{CSSxRef("attr", "attr()")}}, результатом которых является допустимый тип аргумента (как например {{CSSxRef("<length>")}}), или вложенные {{CSSxRef("min")}} и {{CSSxRef("max")}} функции. Для математических выражений можно использовать сложение, вычитание, умножение и деление без использования функции calc(). Также, можно использовать круглые скобки, чтобы задать порядок вычисление.

- -

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

- -

Примечания

- - - -

Formal syntax

- -{{CSSSyntax}} - -

Примеры

- -

Установка минимального и максимального размера шрифта

- -

clamp() позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в Fluid Typography, но в одну строку и без использования медиавыражений.

- -
p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
-
- -
<p>
-If 2.5vw is less than 1rem, the font-size will be 1rem.
-If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
-Otherwise, it will be 2.5vw.
-</p>
-
- -

{{EmbedLiveSample("Установка_минимального_и_максимального_размера_шрифта", "100%", "300")}}

- -

Accessibility concerns

- -

TBD

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS4 Values", "#calc-notation", "clamp()")}}{{Spec2('CSS4 Values')}}Initial definition.
- -

Browser compatibility

- - - -

{{Compat}}

- -

See also

- - diff --git a/files/ru/web/css/clamp/index.html b/files/ru/web/css/clamp/index.html new file mode 100644 index 0000000000..93a1805c60 --- /dev/null +++ b/files/ru/web/css/clamp/index.html @@ -0,0 +1,109 @@ +--- +title: clamp() +slug: Web/CSS/clamp +translation_of: Web/CSS/clamp() +original_slug: Web/CSS/clamp() +--- +
{{CSSRef}}
+ +

CSS-функция clamp() задаёт значение в диапазоне между указанными нижней и верхней границами. Функция принимает три аргумента: минимальное значение, предпочитаемое значение и максимально допустимое. Может использоваться везде, где допускается применение {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, или {{CSSxRef("<integer>")}}.

+ +

clamp(MIN, VAL, MAX) вычисляется как {{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))

+ +
/* свойство: clamp(expression{3}) */
+width: clamp(10px, 4em, 80px);
+ +

В примере выше ширина будет не меньше 10px и не больше 80px. Но если размер одного "em" будет находиться в диапазоне от 2.5px до 20px (в сумме от 10px до 80px), то ширина будет равняться этим 4em.

+ +

Давайте предположим, что в примере выше 1em равен 16px:

+ +
width: clamp(10px, 4em, 80px);
+/* если 1em = 16px, 4em = (16px * 4) = 64px */
+width: clamp(10px, 64px, 80px);
+/* clamp(MIN, VAL, MAX) вычисляется как max(MIN, min(VAL, MAX))) */
+width: max(10px, min(64px, 80px))
+width: max(10px, 64px);
+width: 64px;
+ +

Синтаксис

+ +

Функция clamp() принимает в качестве аргументов три разделённых запятой выражения, указываемых в порядке: минимальное значение, предпочитаемое значение, максимальное значение.

+ +

Минимальное значение – наименьшее значение, являющееся нижней границей диапазона допустимых значений. Если "предпочитаемое" значение меньше "минимального", будет использоваться именно "минимальное".

+ +

Предпочитаемое значение – это выражение, чей результат будет использовать до тех пор, пока будет оставаться в пределах допустимого диапазона значений.

+ +

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

+ +

Передаваемые значения могут быть математическими функциями (более подробно смотрите на {{CSSxRef("calc")}}), точными значениями, или другими выражениями, такими как {{CSSxRef("attr", "attr()")}}, результатом которых является допустимый тип аргумента (как например {{CSSxRef("<length>")}}), или вложенные {{CSSxRef("min")}} и {{CSSxRef("max")}} функции. Для математических выражений можно использовать сложение, вычитание, умножение и деление без использования функции calc(). Также, можно использовать круглые скобки, чтобы задать порядок вычисление.

+ +

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

+ +

Примечания

+ + + +

Formal syntax

+ +{{CSSSyntax}} + +

Примеры

+ +

Установка минимального и максимального размера шрифта

+ +

clamp() позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в Fluid Typography, но в одну строку и без использования медиавыражений.

+ +
p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
+
+ +
<p>
+If 2.5vw is less than 1rem, the font-size will be 1rem.
+If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
+Otherwise, it will be 2.5vw.
+</p>
+
+ +

{{EmbedLiveSample("Установка_минимального_и_максимального_размера_шрифта", "100%", "300")}}

+ +

Accessibility concerns

+ +

TBD

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Values", "#calc-notation", "clamp()")}}{{Spec2('CSS4 Values')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat}}

+ +

See also

+ + diff --git a/files/ru/web/css/filter-function/blur()/index.html b/files/ru/web/css/filter-function/blur()/index.html deleted file mode 100644 index c2df200b45..0000000000 --- a/files/ru/web/css/filter-function/blur()/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: blur() -slug: Web/CSS/filter-function/blur() -translation_of: Web/CSS/filter-function/blur() ---- -
{{cssref}}
- -

Функция CSS blur() применяет размытие по Гауссу к входному изображению. Его результатом является {{cssxref("<filter-function>")}}.

- -
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
- - - -

Синтаксис

- -
blur(radius)
- -

Параметры

- -
-
radius
-
Радиус размытия, выраженный в {{cssxref("<length>")}}. Он определяет отклонение от стандартной функции Гаусса, то есть как много пикселей на экране смешиваются друг с другом. Таким образом, большее значение даст большее размытие. Значение 0 оставит изображение без изменений.
-
- -

Пример

- -
blur(0)        /* Без эффекта */
-blur(8px)      /* Размытие с радиусом 8px */
-blur(1.17rem)  /* Размытие с радиусом 1.17rem */
- -

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

- - diff --git a/files/ru/web/css/filter-function/blur/index.html b/files/ru/web/css/filter-function/blur/index.html new file mode 100644 index 0000000000..14977d610d --- /dev/null +++ b/files/ru/web/css/filter-function/blur/index.html @@ -0,0 +1,45 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur +translation_of: Web/CSS/filter-function/blur() +original_slug: Web/CSS/filter-function/blur() +--- +
{{cssref}}
+ +

Функция CSS blur() применяет размытие по Гауссу к входному изображению. Его результатом является {{cssxref("<filter-function>")}}.

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

Синтаксис

+ +
blur(radius)
+ +

Параметры

+ +
+
radius
+
Радиус размытия, выраженный в {{cssxref("<length>")}}. Он определяет отклонение от стандартной функции Гаусса, то есть как много пикселей на экране смешиваются друг с другом. Таким образом, большее значение даст большее размытие. Значение 0 оставит изображение без изменений.
+
+ +

Пример

+ +
blur(0)        /* Без эффекта */
+blur(8px)      /* Размытие с радиусом 8px */
+blur(1.17rem)  /* Размытие с радиусом 1.17rem */
+ +

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

+ + diff --git a/files/ru/web/css/minmax()/index.html b/files/ru/web/css/minmax()/index.html deleted file mode 100644 index 94b983fd69..0000000000 --- a/files/ru/web/css/minmax()/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: minmax() -slug: Web/CSS/minmax() -translation_of: Web/CSS/minmax() ---- -

minmax() это CSS функция, определяющая диапазон размеров, который больше или равен min и меньше или равен max. Используется в CSS Grids.

- -
/* <inflexible-breadth>, <track-breadth> values */
-minmax(200px, 1fr)
-minmax(400px, 50%)
-minmax(30%, 300px)
-minmax(100px, max-content)
-minmax(min-content, 400px)
-minmax(max-content, auto)
-minmax(auto, 300px)
-minmax(min-content, auto)
-
-/* <fixed-breadth>, <track-breadth> values */
-minmax(200px, 1fr)
-minmax(30%, 300px)
-minmax(400px, 50%)
-minmax(50%, min-content)
-minmax(300px, max-content)
-minmax(200px, auto)
-
-/* <inflexible-breadth>, <fixed-breadth> values */
-minmax(400px, 50%)
-minmax(30%, 300px)
-minmax(min-content, 200px)
-minmax(max-content, 200px)
-minmax(auto, 300px)
-
- -

Синтаксис

- -

Функция принимает два параметра, min и max.

- -

Каждый параметр может быть значением <length>, либо <percentage>, либо <flex>, или одним из ключевых слов max-content, min-content, или auto.

- -

Если max < min, то max игнорируется и minmax(min,max) обрабатывается как min. As a maximum, a {{cssxref("flex_value","<flex>")}} value sets the flex factor of a grid track; it is invalid as a minimum.

- -

Значения

- -
-
{{cssxref("<length>")}}
-
A non-negative length.
-
{{cssxref("<percentage>")}}
-
A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the <percentage> must be treated as auto. The {{glossary("user agent")}} may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.
-
{{cssxref("<flex>")}}
-
A non-negative dimension with the unit fr specifying the track’s flex factor. Each <flex>-sized track takes a share of the remaining space in proportion to its flex factor.
-
max-content
-
Represents the largest max-content contribution of the grid items occupying the grid track.
-
min-content
-
Represents the largest min-content contribution of the grid items occupying the grid track.
-
auto
-
As a maximum, identical to max-content. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.
-
- -

Формальный синтаксис

- -{{csssyntax}} - -

Пример

- -

CSS

- -
#container {
-  display: grid;
-  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
-  grid-gap: 5px;
-  box-sizing: border-box;
-  height: 200px;
-  width: 100%;
-  background-color: #8cffa0;
-  padding: 10px;
-}
-
-#container > div {
-  background-color: #8ca0ff;
-  padding: 5px;
-}
-
- -

HTML

- -
<div id="container">
-  <div>
-    Item as wide as the content,<br/>
-    but at most 300 pixels.
-  </div>
-  <div>
-    Item with flexible width but a minimum of 200 pixels.
-  </div>
-  <div>
-    Inflexible item of 150 pixels width.
-  </div>
-</div>
- -

Результат

- -

{{EmbedLiveSample("Пример", "100%", 200)}}

- -

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

- -{{Specifications}} - -

Browser compatibility

- - - -

{{Compat}}

- -

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

- - - - diff --git a/files/ru/web/css/minmax/index.html b/files/ru/web/css/minmax/index.html new file mode 100644 index 0000000000..db3e5bf264 --- /dev/null +++ b/files/ru/web/css/minmax/index.html @@ -0,0 +1,177 @@ +--- +title: minmax() +slug: Web/CSS/minmax +translation_of: Web/CSS/minmax() +original_slug: Web/CSS/minmax() +--- +

minmax() это CSS функция, определяющая диапазон размеров, который больше или равен min и меньше или равен max. Используется в CSS Grids.

+ +
/* <inflexible-breadth>, <track-breadth> values */
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+
+/* <fixed-breadth>, <track-breadth> values */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* <inflexible-breadth>, <fixed-breadth> values */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+
+ +

Синтаксис

+ +

Функция принимает два параметра, min и max.

+ +

Каждый параметр может быть значением <length>, либо <percentage>, либо <flex>, или одним из ключевых слов max-content, min-content, или auto.

+ +

Если max < min, то max игнорируется и minmax(min,max) обрабатывается как min. As a maximum, a {{cssxref("flex_value","<flex>")}} value sets the flex factor of a grid track; it is invalid as a minimum.

+ +

Значения

+ +
+
{{cssxref("<length>")}}
+
A non-negative length.
+
{{cssxref("<percentage>")}}
+
A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the <percentage> must be treated as auto. The {{glossary("user agent")}} may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.
+
{{cssxref("<flex>")}}
+
A non-negative dimension with the unit fr specifying the track’s flex factor. Each <flex>-sized track takes a share of the remaining space in proportion to its flex factor.
+
max-content
+
Represents the largest max-content contribution of the grid items occupying the grid track.
+
min-content
+
Represents the largest min-content contribution of the grid items occupying the grid track.
+
auto
+
As a maximum, identical to max-content. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.
+
+ +

Формальный синтаксис

+ +{{csssyntax}} + +

Пример

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>
+    Item as wide as the content,<br/>
+    but at most 300 pixels.
+  </div>
+  <div>
+    Item with flexible width but a minimum of 200 pixels.
+  </div>
+  <div>
+    Inflexible item of 150 pixels width.
+  </div>
+</div>
+ +

Результат

+ +

{{EmbedLiveSample("Пример", "100%", 200)}}

+ +

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

+ +{{Specifications}} + +

Browser compatibility

+ + + +

{{Compat}}

+ +

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

+ + + + diff --git a/files/ru/web/css/transform-function/rotate()/index.html b/files/ru/web/css/transform-function/rotate()/index.html deleted file mode 100644 index eddac712aa..0000000000 --- a/files/ru/web/css/transform-function/rotate()/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -tags: - - CSS - - CSS трансформация - - CSS функция - - Reference - - Rotate - - transform -translation_of: Web/CSS/transform-function/rotate() ---- -
{{CSSRef}}
- -

Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством {{Cssxref ("transform-origin")}}, не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется точечным отражением.

- -

- -

Синтаксис

- -
rotate(a)
-
- -

Значения

- -
-
a
-
Является {{ cssxref("<angle>") }}, представляющим угол поворота. Положительный угол обозначает вращение по часовой стрелке, а отрицательный - против часовой стрелки.
-
- - - - - - - - - - - - - - - - - - - - - -
Декартовы координаты на ℝ2Однородные координаты на ℝℙ2Декартовы координаты на ℝ3Однородные координаты на ℝℙ3
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]
- -

Примеры

- -

Базовый пример

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
-  background-color: pink;
-}
- -

Result

- -

{{EmbedLiveSample("Базовый_пример", "auto", 180)}}

- -

Объединение вращения с другим преобразованием

- -

Если вы хотите применить к элементу несколько преобразований, будьте осторожны с порядком, в котором вы указываете свои преобразования. Например, если вы вращаете перед сдвигом, сдвиг произойдёт относительно новой оси вращения!

- -

HTML

- -
<div>Normal</div>
-<div class="rotate">Rotated</div>
-<div class="rotate-translate">Rotated + Translated</div>
-<div class="translate-rotate">Translated + Rotated</div>
-
- -

CSS

- -
div {
-  position: absolute;
-  left: 40px;
-  top: 40px;
-  width: 100px;
-  height: 100px;
-  background-color: lightgray;
-}
-
-.rotate {
-  background-color: transparent;
-  outline: 2px dashed;
-  transform: rotate(45deg);
-}
-
-.rotate-translate {
-  background-color: pink;
-  transform: rotate(45deg) translateX(180px);
-}
-
-.translate-rotate {
-  background-color: gold;
-  transform: translateX(180px) rotate(45deg);
-}
-
- -

Result

- -

{{EmbedLiveSample("Объединение_вращения_с_другим_преобразованием", "auto", 320)}}

- -

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

- -{{Specifications}} - -

Поддержка браузерами

- -

{{Compat}}

- -

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

- - diff --git a/files/ru/web/css/transform-function/rotate/index.html b/files/ru/web/css/transform-function/rotate/index.html new file mode 100644 index 0000000000..57f781c4ff --- /dev/null +++ b/files/ru/web/css/transform-function/rotate/index.html @@ -0,0 +1,138 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate +tags: + - CSS + - CSS трансформация + - CSS функция + - Reference + - Rotate + - transform +translation_of: Web/CSS/transform-function/rotate() +original_slug: Web/CSS/transform-function/rotate() +--- +
{{CSSRef}}
+ +

Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством {{Cssxref ("transform-origin")}}, не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется точечным отражением.

+ +

+ +

Синтаксис

+ +
rotate(a)
+
+ +

Значения

+ +
+
a
+
Является {{ cssxref("<angle>") }}, представляющим угол поворота. Положительный угол обозначает вращение по часовой стрелке, а отрицательный - против часовой стрелки.
+
+ + + + + + + + + + + + + + + + + + + + + +
Декартовы координаты на ℝ2Однородные координаты на ℝℙ2Декартовы координаты на ℝ3Однородные координаты на ℝℙ3
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]
+ +

Примеры

+ +

Базовый пример

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
+  background-color: pink;
+}
+ +

Result

+ +

{{EmbedLiveSample("Базовый_пример", "auto", 180)}}

+ +

Объединение вращения с другим преобразованием

+ +

Если вы хотите применить к элементу несколько преобразований, будьте осторожны с порядком, в котором вы указываете свои преобразования. Например, если вы вращаете перед сдвигом, сдвиг произойдёт относительно новой оси вращения!

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotate">Rotated</div>
+<div class="rotate-translate">Rotated + Translated</div>
+<div class="translate-rotate">Translated + Rotated</div>
+
+ +

CSS

+ +
div {
+  position: absolute;
+  left: 40px;
+  top: 40px;
+  width: 100px;
+  height: 100px;
+  background-color: lightgray;
+}
+
+.rotate {
+  background-color: transparent;
+  outline: 2px dashed;
+  transform: rotate(45deg);
+}
+
+.rotate-translate {
+  background-color: pink;
+  transform: rotate(45deg) translateX(180px);
+}
+
+.translate-rotate {
+  background-color: gold;
+  transform: translateX(180px) rotate(45deg);
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Объединение_вращения_с_другим_преобразованием", "auto", 320)}}

+ +

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

+ +{{Specifications}} + +

Поддержка браузерами

+ +

{{Compat}}

+ +

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

+ + diff --git a/files/ru/web/css/transform-function/rotate3d()/index.html b/files/ru/web/css/transform-function/rotate3d()/index.html deleted file mode 100644 index cb26bcd71f..0000000000 --- a/files/ru/web/css/transform-function/rotate3d()/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: rotate3d() -slug: Web/CSS/transform-function/rotate3d() -tags: - - CSS -translation_of: Web/CSS/transform-function/rotate3d() ---- -
{{CSSRef}}
- -
Функция CSS rotate3d() трансформирует элемент без деформации, вращая его в трёхмерном пространстве вокруг зафиксированной оси. Её результатом является тип {{cssxref ("<transform-function>")}}.
- -
 
- -
{{EmbedInteractiveExample("pages/css/rotate3d.html")}}
- - - -

In 3D space, rotations have three degrees of liberty, which together describe a single axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the {{ cssxref("transform-origin") }} property). If, as specified, the vector is not normalized (i.e., if the sum of the square of its three coordinates is not 1), the {{glossary("user agent")}} will normalize it internally. A non-normalizable vector, such as the null vector, [0, 0, 0], will cause the rotation to be ignored, but without invaliding the whole CSS property.

- -
Note: Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.
- -

Syntax

- -

The amount of rotation created by rotate3d() is specified by three {{cssxref("<number>")}}s and one {{cssxref("<angle>")}}. The <number>s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. The <angle> represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise.

- -
rotate3d(x, y, z, a)
-
- -

Values

- -
-
x
-
Is a {{cssxref("<number>")}} describing the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
-
y
-
Is a {{cssxref("<number>")}} describing the y-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
-
z
-
Is a {{cssxref("<number>")}} describing the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
-
a
-
Is an {{ cssxref("<angle>") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
-
- - - - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2This transformation applies to the 3D space and can't be represented on the plane.
Homogeneous coordinates on ℝℙ2
Cartesian coordinates on ℝ3 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001
Homogeneous coordinates on ℝℙ3
- -

Examples

- -

Rotating on the y-axis

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

CSS

- -
body {
-  perspective: 800px;
-}
-
-div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate3d(0, 1, 0, 60deg);
-  background-color: pink;
-}
-
- -

Result

- -

{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}

- -

Rotating on a custom axis

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

CSS

- -
body {
-  perspective: 800px;
-}
-
-div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate3d(1, 2, -1, 192deg);
-  background-color: pink;
-}
-
- -

Result

- -

{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}

- -

Browser compatibility

- -

Please see the <transform-function> data type for compatibility info.

- -

See also

- - diff --git a/files/ru/web/css/transform-function/rotate3d/index.html b/files/ru/web/css/transform-function/rotate3d/index.html new file mode 100644 index 0000000000..2e4a5ed91e --- /dev/null +++ b/files/ru/web/css/transform-function/rotate3d/index.html @@ -0,0 +1,132 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d +tags: + - CSS +translation_of: Web/CSS/transform-function/rotate3d() +original_slug: Web/CSS/transform-function/rotate3d() +--- +
{{CSSRef}}
+ +
Функция CSS rotate3d() трансформирует элемент без деформации, вращая его в трёхмерном пространстве вокруг зафиксированной оси. Её результатом является тип {{cssxref ("<transform-function>")}}.
+ +
 
+ +
{{EmbedInteractiveExample("pages/css/rotate3d.html")}}
+ + + +

In 3D space, rotations have three degrees of liberty, which together describe a single axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the {{ cssxref("transform-origin") }} property). If, as specified, the vector is not normalized (i.e., if the sum of the square of its three coordinates is not 1), the {{glossary("user agent")}} will normalize it internally. A non-normalizable vector, such as the null vector, [0, 0, 0], will cause the rotation to be ignored, but without invaliding the whole CSS property.

+ +
Note: Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.
+ +

Syntax

+ +

The amount of rotation created by rotate3d() is specified by three {{cssxref("<number>")}}s and one {{cssxref("<angle>")}}. The <number>s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. The <angle> represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise.

+ +
rotate3d(x, y, z, a)
+
+ +

Values

+ +
+
x
+
Is a {{cssxref("<number>")}} describing the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
+
y
+
Is a {{cssxref("<number>")}} describing the y-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
+
z
+
Is a {{cssxref("<number>")}} describing the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
+
a
+
Is an {{ cssxref("<angle>") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
+
+ + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2This transformation applies to the 3D space and can't be represented on the plane.
Homogeneous coordinates on ℝℙ2
Cartesian coordinates on ℝ3 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001
Homogeneous coordinates on ℝℙ3
+ +

Examples

+ +

Rotating on the y-axis

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(0, 1, 0, 60deg);
+  background-color: pink;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}

+ +

Rotating on a custom axis

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: pink;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}

+ +

Browser compatibility

+ +

Please see the <transform-function> data type for compatibility info.

+ +

See also

+ + diff --git a/files/ru/web/css/transform-function/scale3d()/index.html b/files/ru/web/css/transform-function/scale3d()/index.html deleted file mode 100644 index e66adb526b..0000000000 --- a/files/ru/web/css/transform-function/scale3d()/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: scale3d() -slug: Web/CSS/transform-function/scale3d() -translation_of: Web/CSS/transform-function/scale3d() ---- -
{{CSSRef}}
- -

scale3d() CSS функция изменяет размер элемента. Благодаря величине масштабирования определённой вектором, может изменять различные размеры в разных масштабах.

- -

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

- -

Когда вне диапазона [-1, 1], масштабирование увеличивает элемент в направлении координаты; Когда внутри диапазона он сжимает элемент в этом направлении. При равном 1 он ничего не делает, а когда отрицательный, он выполняет точечное отражение и модификацию размера.

- -

Синтаксис

- -
scale3d(sx, sy, sz)
-
- -

Значения

- -
-
sx
-
Является  {{cssxref("<number>")}} , представляющим абсцисс вектора масштабирования.
-
sy
-
Является  {{cssxref("<number>")}} , представляющим ординату вектора масштабирования.
-
sz
-
Является  {{cssxref("<number>")}}, представляющим z-компонент масштабирующего вектора.
-
- - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
Это преобразование применяется к пространству 3D и не может быть представлено на плоскости. sx000sy000sz sx0000sy0000sz00001
- -

Примеры

- -

Without changing the origin

- -

HTML

- -
<p>foo</p>
-<p class="transformed">bar</p>
- -

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
-  background-color: blue;
-}
-
- -

Result

- -

{{EmbedLiveSample("Without_changing_the_origin","100%","200")}}

- -

Translating the origin of the transformation

- -

HTML

- -
<p>foo</p>
-<p class="transformed">bar</p>
- -

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  transform: scale3d(2, 3, 0);
-  transform-origin: center;
-  background-color: blue;
-}
-
- -

Result

- -

{{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}

diff --git a/files/ru/web/css/transform-function/scale3d/index.html b/files/ru/web/css/transform-function/scale3d/index.html new file mode 100644 index 0000000000..81db8c79b9 --- /dev/null +++ b/files/ru/web/css/transform-function/scale3d/index.html @@ -0,0 +1,100 @@ +--- +title: scale3d() +slug: Web/CSS/transform-function/scale3d +translation_of: Web/CSS/transform-function/scale3d() +original_slug: Web/CSS/transform-function/scale3d() +--- +
{{CSSRef}}
+ +

scale3d() CSS функция изменяет размер элемента. Благодаря величине масштабирования определённой вектором, может изменять различные размеры в разных масштабах.

+ +

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

+ +

Когда вне диапазона [-1, 1], масштабирование увеличивает элемент в направлении координаты; Когда внутри диапазона он сжимает элемент в этом направлении. При равном 1 он ничего не делает, а когда отрицательный, он выполняет точечное отражение и модификацию размера.

+ +

Синтаксис

+ +
scale3d(sx, sy, sz)
+
+ +

Значения

+ +
+
sx
+
Является  {{cssxref("<number>")}} , представляющим абсцисс вектора масштабирования.
+
sy
+
Является  {{cssxref("<number>")}} , представляющим ординату вектора масштабирования.
+
sz
+
Является  {{cssxref("<number>")}}, представляющим z-компонент масштабирующего вектора.
+
+ + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
Это преобразование применяется к пространству 3D и не может быть представлено на плоскости. sx000sy000sz sx0000sy0000sz00001
+ +

Примеры

+ +

Without changing the origin

+ +

HTML

+ +
<p>foo</p>
+<p class="transformed">bar</p>
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
+  background-color: blue;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Without_changing_the_origin","100%","200")}}

+ +

Translating the origin of the transformation

+ +

HTML

+ +
<p>foo</p>
+<p class="transformed">bar</p>
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: scale3d(2, 3, 0);
+  transform-origin: center;
+  background-color: blue;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}

diff --git a/files/ru/web/css/transform-function/skew()/index.html b/files/ru/web/css/transform-function/skew()/index.html deleted file mode 100644 index a9f6da3ac3..0000000000 --- a/files/ru/web/css/transform-function/skew()/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: skew() -slug: Web/CSS/transform-function/skew() -translation_of: Web/CSS/transform-function/skew() ---- -
{{CSSRef}}
- -

CSS функция skew() трансформирует элемент, наклоняя его в 2D-пространстве.

- -
{{EmbedInteractiveExample("pages/css/function-skew.html")}}
- - - -

Данная трансформация является линейным преобразованием векторного пространства (трансвекция или shear mapping), которое деформирует каждую точку элемента на определённый угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.

- -

Синтаксис

- -

Функция skew() задаётся одним или двумя значениями которые отображают наклон в каждом из направлений.

- -
skew(ax)
-
-skew(ax, ay)
-
- -

Значения

- -
-
ax
-
Указывается значение {{cssxref("<angle>")}}, которое является углом наклона вдоль оси X.
-
ay
-
Указывается значение {{cssxref("<angle>")}}, которое является углом наклона вдоль оси Y. Если данное значение не задано, то по умолчанию оно равно 0. В этом случае вертикального наклона не будет, а будет только горизонтальный.
-
- - - - - - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001
[1 tan(ay) tan(ax) 1 0 0]
- -

Примеры

- -

Используя только наклон по оси x

- -

HTML

- -
<div>Обычный</div>
-<div class="skewed">Наклонённый</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.skewed {
-  transform: skew(10deg); /* Equal to skewX(10deg) */
-  background-color: pink;
-}
-
- -

Result

- -

{{EmbedLiveSample("Используя_только_наклон_по_оси_x", 200, 200)}}

- -

Используя два угла

- -

HTML

- -
<div>Обычный</div>
-<div class="skewed">Наклонённый</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.skewed {
-  transform: skew(10deg, 10deg);
-  background-color: pink;
-}
-
- -

Результат

- -

{{EmbedLiveSample("Используя_два_угла", 200, 200)}}

- -

Поддержка браузеров

- -

Please see the <transform-function> data type for compatibility info.

- -

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

- - diff --git a/files/ru/web/css/transform-function/skew/index.html b/files/ru/web/css/transform-function/skew/index.html new file mode 100644 index 0000000000..613fd6e8a8 --- /dev/null +++ b/files/ru/web/css/transform-function/skew/index.html @@ -0,0 +1,118 @@ +--- +title: skew() +slug: Web/CSS/transform-function/skew +translation_of: Web/CSS/transform-function/skew() +original_slug: Web/CSS/transform-function/skew() +--- +
{{CSSRef}}
+ +

CSS функция skew() трансформирует элемент, наклоняя его в 2D-пространстве.

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

Данная трансформация является линейным преобразованием векторного пространства (трансвекция или shear mapping), которое деформирует каждую точку элемента на определённый угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.

+ +

Синтаксис

+ +

Функция skew() задаётся одним или двумя значениями которые отображают наклон в каждом из направлений.

+ +
skew(ax)
+
+skew(ax, ay)
+
+ +

Значения

+ +
+
ax
+
Указывается значение {{cssxref("<angle>")}}, которое является углом наклона вдоль оси X.
+
ay
+
Указывается значение {{cssxref("<angle>")}}, которое является углом наклона вдоль оси Y. Если данное значение не задано, то по умолчанию оно равно 0. В этом случае вертикального наклона не будет, а будет только горизонтальный.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001
[1 tan(ay) tan(ax) 1 0 0]
+ +

Примеры

+ +

Используя только наклон по оси x

+ +

HTML

+ +
<div>Обычный</div>
+<div class="skewed">Наклонённый</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg); /* Equal to skewX(10deg) */
+  background-color: pink;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Используя_только_наклон_по_оси_x", 200, 200)}}

+ +

Используя два угла

+ +

HTML

+ +
<div>Обычный</div>
+<div class="skewed">Наклонённый</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg, 10deg);
+  background-color: pink;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample("Используя_два_угла", 200, 200)}}

+ +

Поддержка браузеров

+ +

Please see the <transform-function> data type for compatibility info.

+ +

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

+ + diff --git a/files/ru/web/css/url()/index.html b/files/ru/web/css/url()/index.html deleted file mode 100644 index 568e69a873..0000000000 --- a/files/ru/web/css/url()/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: url() -slug: Web/CSS/url() -translation_of: Web/CSS/url() ---- -
{{CSSRef}}
- -

The url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, or a data URI. The url() function can be passed as a parameter of another CSS functions, like the {{cssxref('attr()')}} function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional notation is the value for the <url> data type.

- -
/* Simple usage */
-url(https://example.com/images/myImg.jpg);
-url(data:image/png;base64,iRxVB0…);
-url(myFont.woff);
-url(#IDofSVGpath);
-
-/* associated properties */
-background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
-list-style-image: url('../images/bullet.jpg');
-content: url("pdficon.jpg");
-cursor: url(mycursor.cur);
-border-image-source: url(/media/diamonds.png);
-src: url('fantasticfont.woff');
-offset-path: url(#path);
-mask-image: url("masks.svg#mask1");
-
-/* Properties with fallbacks */
-cursor: url(pointer.cur), pointer;
-
-/* Associated short-hand properties */
-background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue;
-border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;
-
-/* As a parameter in another CSS function */
-background-image: cross-fade(20% url(first.png), url(second.png));
-mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);
-
-/* as part of a non-shorthand multiple value */
-content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
-
-/* at-rules */
-@document url("https://www.example.com/") { ... } {{Experimental_Inline}}
-@import url("https://www.example.com/style.css");
-@namespace url(http://www.w3.org/1999/xhtml);
-
- -

Relative URLs, if used, are relative to the URL of the stylesheet (not to the URL of the web page).

- -

The url() function can be included as a value for {{cssxref('background')}}, {{cssxref('background-image')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, src as part of a @font-face block, and @counter-style/symbol

- -

In CSS Level 1, the url() functional notation described only true URLs. In CSS Level 2, the definition of url() was extended to describe any URI, including URNs. CSS Values and Units Level 3 returned to the narrower, initial definition. Now, url() denotes only true <url>s.

- -

Syntax

- -

Values

- -
-
<string>
-
-
-
<url>
-
A url, which is a relative or absolute address, or pointer, to the web resource to be included, or a data uri, optionally in single or double quotes. Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. Double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped. The following are all valid and equivalent: - 
<css_property>: url("https://example.com/image.png")
-<css_property>: url('https://example.com/image.png')
-<css_property>: url(https://example.com/image.png)
-
-
path
-
References the ID of an SVG shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape's geometry as the path.
-
-
-
<url-modifier> {{Experimental_Inline}}
-
In the future, the url() function may support specifying a modifier, an identifier or a functional notation, which alters the meaning of the URL string.This is not supported and not fully defined in the specification.
-
- -

Formal syntax

- -
url( <string> <url-modifier>* )
- -

Examples

- -

content property

- -

HTML

- -
<ul>
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3</li>
-</ul>
- -

CSS

- -
li::after {
-  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
-}
- -

Result

- -

{{EmbedLiveSample("content_property", "100%", 50)}}

- -

data-uri

- -
-

HTML

- -
<div class="background"></div>
- -

CSS

- - - -
.background {
-  background: yellow;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
-}
-
- -

{{EmbedLiveSample("data-uri", "100%", 50)}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Values', '#urls', 'url()')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#urls', 'url()')}}{{Spec2('CSS3 Values')}}No significant change from CSS Level 2 (Revision 1).
{{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}}{{Spec2('CSS2.1')}}No significant change from CSS Level 1.
{{SpecName('CSS1', '#url', 'url()')}}{{Spec2('CSS1')}}Initial definition.
- -

Browser compatibility

- - - -
{{Compat}}
- -

See also

- - diff --git a/files/ru/web/css/url/index.html b/files/ru/web/css/url/index.html new file mode 100644 index 0000000000..f28bab3c9c --- /dev/null +++ b/files/ru/web/css/url/index.html @@ -0,0 +1,172 @@ +--- +title: url() +slug: Web/CSS/url +translation_of: Web/CSS/url() +original_slug: Web/CSS/url() +--- +
{{CSSRef}}
+ +

The url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, or a data URI. The url() function can be passed as a parameter of another CSS functions, like the {{cssxref('attr()')}} function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional notation is the value for the <url> data type.

+ +
/* Simple usage */
+url(https://example.com/images/myImg.jpg);
+url(data:image/png;base64,iRxVB0…);
+url(myFont.woff);
+url(#IDofSVGpath);
+
+/* associated properties */
+background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
+list-style-image: url('../images/bullet.jpg');
+content: url("pdficon.jpg");
+cursor: url(mycursor.cur);
+border-image-source: url(/media/diamonds.png);
+src: url('fantasticfont.woff');
+offset-path: url(#path);
+mask-image: url("masks.svg#mask1");
+
+/* Properties with fallbacks */
+cursor: url(pointer.cur), pointer;
+
+/* Associated short-hand properties */
+background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue;
+border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;
+
+/* As a parameter in another CSS function */
+background-image: cross-fade(20% url(first.png), url(second.png));
+mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+
+/* as part of a non-shorthand multiple value */
+content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
+
+/* at-rules */
+@document url("https://www.example.com/") { ... } {{Experimental_Inline}}
+@import url("https://www.example.com/style.css");
+@namespace url(http://www.w3.org/1999/xhtml);
+
+ +

Relative URLs, if used, are relative to the URL of the stylesheet (not to the URL of the web page).

+ +

The url() function can be included as a value for {{cssxref('background')}}, {{cssxref('background-image')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, src as part of a @font-face block, and @counter-style/symbol

+ +

In CSS Level 1, the url() functional notation described only true URLs. In CSS Level 2, the definition of url() was extended to describe any URI, including URNs. CSS Values and Units Level 3 returned to the narrower, initial definition. Now, url() denotes only true <url>s.

+ +

Syntax

+ +

Values

+ +
+
<string>
+
+
+
<url>
+
A url, which is a relative or absolute address, or pointer, to the web resource to be included, or a data uri, optionally in single or double quotes. Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. Double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped. The following are all valid and equivalent: + 
<css_property>: url("https://example.com/image.png")
+<css_property>: url('https://example.com/image.png')
+<css_property>: url(https://example.com/image.png)
+
+
path
+
References the ID of an SVG shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape's geometry as the path.
+
+
+
<url-modifier> {{Experimental_Inline}}
+
In the future, the url() function may support specifying a modifier, an identifier or a functional notation, which alters the meaning of the URL string.This is not supported and not fully defined in the specification.
+
+ +

Formal syntax

+ +
url( <string> <url-modifier>* )
+ +

Examples

+ +

content property

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</ul>
+ +

CSS

+ +
li::after {
+  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
+}
+ +

Result

+ +

{{EmbedLiveSample("content_property", "100%", 50)}}

+ +

data-uri

+ +
+

HTML

+ +
<div class="background"></div>
+ +

CSS

+ + + +
.background {
+  background: yellow;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
+}
+
+ +

{{EmbedLiveSample("data-uri", "100%", 50)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Values', '#urls', 'url()')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#urls', 'url()')}}{{Spec2('CSS3 Values')}}No significant change from CSS Level 2 (Revision 1).
{{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}}{{Spec2('CSS2.1')}}No significant change from CSS Level 1.
{{SpecName('CSS1', '#url', 'url()')}}{{Spec2('CSS1')}}Initial definition.
+ +

Browser compatibility

+ + + +
{{Compat}}
+ +

See also

+ + diff --git a/files/ru/web/css/var()/index.md b/files/ru/web/css/var()/index.md deleted file mode 100644 index a5ee137b10..0000000000 --- a/files/ru/web/css/var()/index.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: var() -slug: Web/CSS/var() -tags: - - CSS - - CSS Custom Properties - - CSS Function - - CSS Variables - - Experimental - - Function - - Reference - - Variables - - var - - var() -browser-compat: css.properties.custom-property.var ---- -{{CSSRef}} - -[Функция](/ru/docs/Web/CSS/CSS_Functions) [CSS](/ru/docs/Web/CSS) **`var()`** используется для вставки значения [кастомного свойства](/ru/docs/Web/CSS/--*) (также известного как "CSS-переменная") в другое свойство. - -{{EmbedInteractiveExample("pages/css/var.html")}} - -Функцию `var()` нельзя использовать в именах свойств, селекторах или где-либо ещё, кроме как в качестве значений для свойств. - -## Синтаксис - -Функции в качестве первого аргумента обязательно нужно передать имя кастомного свойства, значение которого нужно получить. Необязательный второй аргумент функции используется в качестве резервного значения. Если кастомное свойство, указанное в первом аргументе, оказалось недоступным, функция вернёт второе значение. - -{{csssyntax}} - -> **Примечание:** синтаксис резервного значения, как и синтаксис кастомного свойств, допускает использование запятых. Например, `var(--foo, red, blue)` задаёт резервное значение `red, blue`; таким образом всё, что находится между первой запятой и закрывающей скобкой, считается резервным значением. - -### Значения - -- `` - - : Имя кастомного свойства, начинающиеся с двух дефисов. Кастомные свойства предназначены исключительно для разработчиков и пользователей; CSS никак не влияет на них. -- `` - - : Резервное значение кастомного свойства. Используется в случае, если кастомное свойство не определено или не может быть использовано в текущем контексте. Резервное значение может содержать любой символ, кроме некоторых спецсимволов, вроде символа новой строки, непарных закрывающих скобок (т.е. `)`, `]`, или `}`), точку с запятой или восклицательный знак. - -## Примеры - -### Использование кастомного свойства, определенного внутри :root - -```css -:root { - --main-bg-color: pink; -} - -body { - background-color: var(--main-bg-color); -} -``` - -### Кастомные свойства с резервным значением, когда свойство не было установлено - -```css -/* Резервное значение */ -/* Стили для элементов компонента: */ -.component .header { - color: var(--header-color, blue); /* header-color не существует, поэтому используется blue */ -} - -.component .text { - color: var(--text-color, black); -} - -/* Стили для самого компонента: */ -.component { - --text-color: #080; -} -``` - -## Спецификации - -{{Specifications}} - -## Поддержка браузерами - -{{Compat}} - -## Смотрите также - -- {{cssxref("env()","env(…)")}} – доступные только для чтения переменные среды, контролируемые браузером -- [Использование CSS-переменных](/ru/docs/Web/CSS/Using_CSS_custom_properties) diff --git a/files/ru/web/css/var/index.md b/files/ru/web/css/var/index.md new file mode 100644 index 0000000000..a1d35cd619 --- /dev/null +++ b/files/ru/web/css/var/index.md @@ -0,0 +1,85 @@ +--- +title: var() +slug: Web/CSS/var +tags: + - CSS + - CSS Custom Properties + - CSS Function + - CSS Variables + - Experimental + - Function + - Reference + - Variables + - var + - var() +original_slug: Web/CSS/var() +browser-compat: css.properties.custom-property.var +--- +{{CSSRef}} + +[Функция](/ru/docs/Web/CSS/CSS_Functions) [CSS](/ru/docs/Web/CSS) **`var()`** используется для вставки значения [кастомного свойства](/ru/docs/Web/CSS/--*) (также известного как "CSS-переменная") в другое свойство. + +{{EmbedInteractiveExample("pages/css/var.html")}} + +Функцию `var()` нельзя использовать в именах свойств, селекторах или где-либо ещё, кроме как в качестве значений для свойств. + +## Синтаксис + +Функции в качестве первого аргумента обязательно нужно передать имя кастомного свойства, значение которого нужно получить. Необязательный второй аргумент функции используется в качестве резервного значения. Если кастомное свойство, указанное в первом аргументе, оказалось недоступным, функция вернёт второе значение. + +{{csssyntax}} + +> **Примечание:** синтаксис резервного значения, как и синтаксис кастомного свойств, допускает использование запятых. Например, `var(--foo, red, blue)` задаёт резервное значение `red, blue`; таким образом всё, что находится между первой запятой и закрывающей скобкой, считается резервным значением. + +### Значения + +- `` + - : Имя кастомного свойства, начинающиеся с двух дефисов. Кастомные свойства предназначены исключительно для разработчиков и пользователей; CSS никак не влияет на них. +- `` + - : Резервное значение кастомного свойства. Используется в случае, если кастомное свойство не определено или не может быть использовано в текущем контексте. Резервное значение может содержать любой символ, кроме некоторых спецсимволов, вроде символа новой строки, непарных закрывающих скобок (т.е. `)`, `]`, или `}`), точку с запятой или восклицательный знак. + +## Примеры + +### Использование кастомного свойства, определенного внутри :root + +```css +:root { + --main-bg-color: pink; +} + +body { + background-color: var(--main-bg-color); +} +``` + +### Кастомные свойства с резервным значением, когда свойство не было установлено + +```css +/* Резервное значение */ +/* Стили для элементов компонента: */ +.component .header { + color: var(--header-color, blue); /* header-color не существует, поэтому используется blue */ +} + +.component .text { + color: var(--text-color, black); +} + +/* Стили для самого компонента: */ +.component { + --text-color: #080; +} +``` + +## Спецификации + +{{Specifications}} + +## Поддержка браузерами + +{{Compat}} + +## Смотрите также + +- {{cssxref("env()","env(…)")}} – доступные только для чтения переменные среды, контролируемые браузером +- [Использование CSS-переменных](/ru/docs/Web/CSS/Using_CSS_custom_properties) -- cgit v1.2.3-54-g00ecf