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/pt-br/_redirects.txt | 28 +-- files/pt-br/_wikihistory.json | 28 +-- files/pt-br/web/css/attr()/index.html | 213 -------------------- files/pt-br/web/css/attr/index.html | 214 +++++++++++++++++++++ files/pt-br/web/css/calc()/index.html | 162 ---------------- files/pt-br/web/css/calc/index.html | 163 ++++++++++++++++ files/pt-br/web/css/element()/index.html | 101 ---------- files/pt-br/web/css/element/index.html | 102 ++++++++++ files/pt-br/web/css/env()/index.html | 132 ------------- files/pt-br/web/css/env/index.html | 133 +++++++++++++ .../web/css/filter-function/grayscale()/index.html | 39 ---- .../web/css/filter-function/grayscale/index.html | 40 ++++ .../web/css/filter-function/opacity()/index.html | 40 ---- .../web/css/filter-function/opacity/index.html | 41 ++++ .../web/css/filter-function/sepia()/index.html | 35 ---- .../pt-br/web/css/filter-function/sepia/index.html | 36 ++++ .../web/css/transform-function/matrix()/index.html | 111 ----------- .../web/css/transform-function/matrix/index.html | 112 +++++++++++ .../transform-function/perspective()/index.html | 123 ------------ .../css/transform-function/perspective/index.html | 124 ++++++++++++ .../web/css/transform-function/rotate()/index.html | 85 -------- .../web/css/transform-function/rotate/index.html | 86 +++++++++ .../css/transform-function/rotate3d()/index.html | 127 ------------ .../web/css/transform-function/rotate3d/index.html | 128 ++++++++++++ .../web/css/transform-function/scale()/index.html | 125 ------------ .../web/css/transform-function/scale/index.html | 126 ++++++++++++ .../css/transform-function/translate()/index.html | 152 --------------- .../css/transform-function/translate/index.html | 153 +++++++++++++++ files/pt-br/web/css/var()/index.html | 145 -------------- files/pt-br/web/css/var/index.html | 146 ++++++++++++++ 30 files changed, 1632 insertions(+), 1618 deletions(-) delete mode 100644 files/pt-br/web/css/attr()/index.html create mode 100644 files/pt-br/web/css/attr/index.html delete mode 100644 files/pt-br/web/css/calc()/index.html create mode 100644 files/pt-br/web/css/calc/index.html delete mode 100644 files/pt-br/web/css/element()/index.html create mode 100644 files/pt-br/web/css/element/index.html delete mode 100644 files/pt-br/web/css/env()/index.html create mode 100644 files/pt-br/web/css/env/index.html delete mode 100644 files/pt-br/web/css/filter-function/grayscale()/index.html create mode 100644 files/pt-br/web/css/filter-function/grayscale/index.html delete mode 100644 files/pt-br/web/css/filter-function/opacity()/index.html create mode 100644 files/pt-br/web/css/filter-function/opacity/index.html delete mode 100644 files/pt-br/web/css/filter-function/sepia()/index.html create mode 100644 files/pt-br/web/css/filter-function/sepia/index.html delete mode 100644 files/pt-br/web/css/transform-function/matrix()/index.html create mode 100644 files/pt-br/web/css/transform-function/matrix/index.html delete mode 100644 files/pt-br/web/css/transform-function/perspective()/index.html create mode 100644 files/pt-br/web/css/transform-function/perspective/index.html delete mode 100644 files/pt-br/web/css/transform-function/rotate()/index.html create mode 100644 files/pt-br/web/css/transform-function/rotate/index.html delete mode 100644 files/pt-br/web/css/transform-function/rotate3d()/index.html create mode 100644 files/pt-br/web/css/transform-function/rotate3d/index.html delete mode 100644 files/pt-br/web/css/transform-function/scale()/index.html create mode 100644 files/pt-br/web/css/transform-function/scale/index.html delete mode 100644 files/pt-br/web/css/transform-function/translate()/index.html create mode 100644 files/pt-br/web/css/transform-function/translate/index.html delete mode 100644 files/pt-br/web/css/var()/index.html create mode 100644 files/pt-br/web/css/var/index.html (limited to 'files/pt-br') diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 19211a793a..c0c179cf43 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -620,28 +620,28 @@ /pt-BR/docs/Web/CSS/Valor_atual /pt-BR/docs/Web/CSS/actual_value /pt-BR/docs/Web/CSS/Valor_resolvido /pt-BR/docs/Web/CSS/resolved_value /pt-BR/docs/Web/CSS/Valor_usado /pt-BR/docs/Web/CSS/used_value -/pt-BR/docs/Web/CSS/attr /pt-BR/docs/Web/CSS/attr() +/pt-BR/docs/Web/CSS/attr() /pt-BR/docs/Web/CSS/attr /pt-BR/docs/Web/CSS/box_model /pt-BR/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -/pt-BR/docs/Web/CSS/calc /pt-BR/docs/Web/CSS/calc() -/pt-BR/docs/Web/CSS/element /pt-BR/docs/Web/CSS/element() -/pt-BR/docs/Web/CSS/env /pt-BR/docs/Web/CSS/env() -/pt-BR/docs/Web/CSS/filter-function/grayscale /pt-BR/docs/Web/CSS/filter-function/grayscale() -/pt-BR/docs/Web/CSS/filter-function/opacity /pt-BR/docs/Web/CSS/filter-function/opacity() -/pt-BR/docs/Web/CSS/filter-function/sepia /pt-BR/docs/Web/CSS/filter-function/sepia() +/pt-BR/docs/Web/CSS/calc() /pt-BR/docs/Web/CSS/calc +/pt-BR/docs/Web/CSS/element() /pt-BR/docs/Web/CSS/element +/pt-BR/docs/Web/CSS/env() /pt-BR/docs/Web/CSS/env +/pt-BR/docs/Web/CSS/filter-function/grayscale() /pt-BR/docs/Web/CSS/filter-function/grayscale +/pt-BR/docs/Web/CSS/filter-function/opacity() /pt-BR/docs/Web/CSS/filter-function/opacity +/pt-BR/docs/Web/CSS/filter-function/sepia() /pt-BR/docs/Web/CSS/filter-function/sepia /pt-BR/docs/Web/CSS/hifens /pt-BR/docs/Web/CSS/hyphens /pt-BR/docs/Web/CSS/imagem /pt-BR/docs/Web/CSS/image /pt-BR/docs/Web/CSS/máscara /pt-BR/docs/Web/CSS/mask /pt-BR/docs/Web/CSS/sintaxe /pt-BR/docs/Web/CSS/Syntax -/pt-BR/docs/Web/CSS/transform-function/matrix /pt-BR/docs/Web/CSS/transform-function/matrix() -/pt-BR/docs/Web/CSS/transform-function/perspective /pt-BR/docs/Web/CSS/transform-function/perspective() -/pt-BR/docs/Web/CSS/transform-function/rotate /pt-BR/docs/Web/CSS/transform-function/rotate() -/pt-BR/docs/Web/CSS/transform-function/rotate3d /pt-BR/docs/Web/CSS/transform-function/rotate3d() -/pt-BR/docs/Web/CSS/transform-function/scale /pt-BR/docs/Web/CSS/transform-function/scale() -/pt-BR/docs/Web/CSS/transform-function/translate /pt-BR/docs/Web/CSS/transform-function/translate() +/pt-BR/docs/Web/CSS/transform-function/matrix() /pt-BR/docs/Web/CSS/transform-function/matrix +/pt-BR/docs/Web/CSS/transform-function/perspective() /pt-BR/docs/Web/CSS/transform-function/perspective +/pt-BR/docs/Web/CSS/transform-function/rotate() /pt-BR/docs/Web/CSS/transform-function/rotate +/pt-BR/docs/Web/CSS/transform-function/rotate3d() /pt-BR/docs/Web/CSS/transform-function/rotate3d +/pt-BR/docs/Web/CSS/transform-function/scale() /pt-BR/docs/Web/CSS/transform-function/scale +/pt-BR/docs/Web/CSS/transform-function/translate() /pt-BR/docs/Web/CSS/transform-function/translate /pt-BR/docs/Web/CSS/valor_computado /pt-BR/docs/Web/CSS/computed_value /pt-BR/docs/Web/CSS/valor_espeficifco /pt-BR/docs/Web/CSS/specified_value /pt-BR/docs/Web/CSS/valor_inicial /pt-BR/docs/Web/CSS/initial_value -/pt-BR/docs/Web/CSS/var /pt-BR/docs/Web/CSS/var() +/pt-BR/docs/Web/CSS/var() /pt-BR/docs/Web/CSS/var /pt-BR/docs/Web/CSS/word-wrap /pt-BR/docs/Web/CSS/overflow-wrap /pt-BR/docs/Web/Demos_of_open_web_technologies /pt-BR/docs/Web/Demos /pt-BR/docs/Web/Events/DOMContentLoaded /pt-BR/docs/Web/API/Window/DOMContentLoaded_event diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index 034ab18fb7..76360d901c 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -8027,7 +8027,7 @@ "daliannyvieira" ] }, - "Web/CSS/attr()": { + "Web/CSS/attr": { "modified": "2020-11-04T08:51:55.092Z", "contributors": [ "chrisdavidmills", @@ -8173,7 +8173,7 @@ "renatobalbino" ] }, - "Web/CSS/calc()": { + "Web/CSS/calc": { "modified": "2020-11-04T09:08:50.767Z", "contributors": [ "chrisdavidmills", @@ -8283,14 +8283,14 @@ "brasmon8351" ] }, - "Web/CSS/element()": { + "Web/CSS/element": { "modified": "2020-11-10T11:06:23.872Z", "contributors": [ "chrisdavidmills", "JonatasAmaral" ] }, - "Web/CSS/env()": { + "Web/CSS/env": { "modified": "2020-11-10T11:11:50.127Z", "contributors": [ "chrisdavidmills", @@ -8303,21 +8303,21 @@ "mfluehr" ] }, - "Web/CSS/filter-function/grayscale()": { + "Web/CSS/filter-function/grayscale": { "modified": "2020-11-10T11:19:23.773Z", "contributors": [ "chrisdavidmills", "BrunaGil" ] }, - "Web/CSS/filter-function/opacity()": { + "Web/CSS/filter-function/opacity": { "modified": "2020-11-16T09:08:08.691Z", "contributors": [ "chrisdavidmills", "larimaza" ] }, - "Web/CSS/filter-function/sepia()": { + "Web/CSS/filter-function/sepia": { "modified": "2020-11-30T10:24:47.934Z", "contributors": [ "chrisdavidmills", @@ -8754,42 +8754,42 @@ "mfluehr" ] }, - "Web/CSS/transform-function/matrix()": { + "Web/CSS/transform-function/matrix": { "modified": "2020-11-16T09:00:13.847Z", "contributors": [ "chrisdavidmills", "MarcosNakamine" ] }, - "Web/CSS/transform-function/perspective()": { + "Web/CSS/transform-function/perspective": { "modified": "2020-11-16T09:10:49.924Z", "contributors": [ "chrisdavidmills", "larimaza" ] }, - "Web/CSS/transform-function/rotate()": { + "Web/CSS/transform-function/rotate": { "modified": "2020-11-19T16:06:09.849Z", "contributors": [ "chrisdavidmills", "YurePereira" ] }, - "Web/CSS/transform-function/rotate3d()": { + "Web/CSS/transform-function/rotate3d": { "modified": "2020-11-19T16:07:35.157Z", "contributors": [ "chrisdavidmills", "larimaza" ] }, - "Web/CSS/transform-function/scale()": { + "Web/CSS/transform-function/scale": { "modified": "2020-11-30T10:15:54.148Z", "contributors": [ "chrisdavidmills", "larimaza" ] }, - "Web/CSS/transform-function/translate()": { + "Web/CSS/transform-function/translate": { "modified": "2020-11-30T10:30:42.247Z", "contributors": [ "chrisdavidmills", @@ -8830,7 +8830,7 @@ "Fernandolrs" ] }, - "Web/CSS/var()": { + "Web/CSS/var": { "modified": "2020-11-04T09:10:42.127Z", "contributors": [ "chrisdavidmills", diff --git a/files/pt-br/web/css/attr()/index.html b/files/pt-br/web/css/attr()/index.html deleted file mode 100644 index c5a2139b50..0000000000 --- a/files/pt-br/web/css/attr()/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: attr -slug: Web/CSS/attr() -tags: - - CSS - - Esquema - - Função CSS - - Internet - - Laioute - - Rede - - Referencia - - Web -translation_of: Web/CSS/attr() ---- -
{{CSSRef}}
- -

A função attr() do CSS  é utilizada para se obter o valor de um determinado atributo do elemento selecionado e usá-lo na folha de estilo. Também pode ser utilizado em pseudo-elementos, nesse caso o valor do atributo no pseudo-elemento do elemento original é retornado.

- -
/* Uso Simples */
-attr(data-count);
-attr(title);
-
-/* Com o tipo */
-attr(src url);
-attr(data-count number);
-attr(data-width px);
-
-/* Com fallback */
-attr(data-count number, 0);
-attr(src url, '');
-attr(data-width px, inherit);
-attr(data-something, 'default');
-
- -
-

Nota: A função attr() pode ser utilizada com qualquer propriedade CSS, mas o suporte para propriedades que não sejam {{cssxref("content")}} é experimental.

-
- -

Sintaxe

- -

Valores

- -
-
nome-do-atributo
-
É o nome do atributo HTML do elemento referenciado no CSS.
-
<tipo-ou-unidade> {{experimental_inline}}
-
É uma palavra-chave representando tanto o tipo quanto o valor do atributo, ou sua unidade, assim como no HTML alguns atributos tem unidades implícitas. Se o uso de <tipo-ou-unidade> como um valor para determinado atributo for inválido, a expressão attr() será inválida também. Se omitida, o padrão será string. A lista de valores válidos é: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Palavra-chaveTipo AssociadoComentárioValor Padrão
string{{cssxref("<string>")}}O valor do atributo é tratado como um CSS {{cssxref("<string>")}}. NÃO será reparado, e em particular os caracteres usados .An empty string.
cor {{experimental_inline}}{{cssxref("<color>")}}O valor do atributo é analisado como hash (3- ou 6-valores hash) ou a palavra-chave. Precisa ser um valor {{cssxref("<string>")}} CSS válido.
- Os espaços do lead e trail são retirados.		corAtual
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>.
-
- -

Sintaxe formal

- -{{csssyntax}} - -

Exemplos

- -

HTML

- -
<p data-foo="hello">world</p>
-
- -

CSS

- -
p::before {
-  content: attr(data-foo) " ";
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Examples")}}

- -

Especificações

- - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}{{Spec2('CSS3 Values')}}Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small.
{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}{{Spec2('CSS2.1')}}Limited to the {{cssxref("content")}} property; always return a {{cssxref("<string>")}}.
- -

Compatibilidade com navegadores

- -

{{Compat("css.types.attr")}}

diff --git a/files/pt-br/web/css/attr/index.html b/files/pt-br/web/css/attr/index.html new file mode 100644 index 0000000000..43ac460a6f --- /dev/null +++ b/files/pt-br/web/css/attr/index.html @@ -0,0 +1,214 @@ +--- +title: attr +slug: Web/CSS/attr +tags: + - CSS + - Esquema + - Função CSS + - Internet + - Laioute + - Rede + - Referencia + - Web +translation_of: Web/CSS/attr() +original_slug: Web/CSS/attr() +--- +
{{CSSRef}}
+ +

A função attr() do CSS  é utilizada para se obter o valor de um determinado atributo do elemento selecionado e usá-lo na folha de estilo. Também pode ser utilizado em pseudo-elementos, nesse caso o valor do atributo no pseudo-elemento do elemento original é retornado.

+ +
/* Uso Simples */
+attr(data-count);
+attr(title);
+
+/* Com o tipo */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* Com fallback */
+attr(data-count number, 0);
+attr(src url, '');
+attr(data-width px, inherit);
+attr(data-something, 'default');
+
+ +
+

Nota: A função attr() pode ser utilizada com qualquer propriedade CSS, mas o suporte para propriedades que não sejam {{cssxref("content")}} é experimental.

+
+ +

Sintaxe

+ +

Valores

+ +
+
nome-do-atributo
+
É o nome do atributo HTML do elemento referenciado no CSS.
+
<tipo-ou-unidade> {{experimental_inline}}
+
É uma palavra-chave representando tanto o tipo quanto o valor do atributo, ou sua unidade, assim como no HTML alguns atributos tem unidades implícitas. Se o uso de <tipo-ou-unidade> como um valor para determinado atributo for inválido, a expressão attr() será inválida também. Se omitida, o padrão será string. A lista de valores válidos é: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Palavra-chaveTipo AssociadoComentárioValor Padrão
string{{cssxref("<string>")}}O valor do atributo é tratado como um CSS {{cssxref("<string>")}}. NÃO será reparado, e em particular os caracteres usados .An empty string.
cor {{experimental_inline}}{{cssxref("<color>")}}O valor do atributo é analisado como hash (3- ou 6-valores hash) ou a palavra-chave. Precisa ser um valor {{cssxref("<string>")}} CSS válido.
+ Os espaços do lead e trail são retirados.		corAtual
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>.
+
+ +

Sintaxe formal

+ +{{csssyntax}} + +

Exemplos

+ +

HTML

+ +
<p data-foo="hello">world</p>
+
+ +

CSS

+ +
p::before {
+  content: attr(data-foo) " ";
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Examples")}}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}{{Spec2('CSS3 Values')}}Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small.
{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}{{Spec2('CSS2.1')}}Limited to the {{cssxref("content")}} property; always return a {{cssxref("<string>")}}.
+ +

Compatibilidade com navegadores

+ +

{{Compat("css.types.attr")}}

diff --git a/files/pt-br/web/css/calc()/index.html b/files/pt-br/web/css/calc()/index.html deleted file mode 100644 index 7687481952..0000000000 --- a/files/pt-br/web/css/calc()/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: calc() -slug: Web/CSS/calc() -tags: - - CSS - - Calculate - - Função - - Função CSS - - Layout - - Web - - calc -translation_of: Web/CSS/calc() ---- -
{{CSSRef}}
- -

A função  calc() CSS permite você executar cálculos quando especificar os valores de propriedades no CSS. Pode ser utilizada em qualquer lugar , como  {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, e {{cssxref("<integer>")}} é permitido.

- -
/* propriedade: calc(expressão) */
-width: calc(100% - 80px);
-
- -

Syntax

- -

A função  calc() recebe uma simples expressão como parâmetro e o resultado desta expressão é utilizado como valor. Pode ser uma simples expressão, combinando os seguintes operadores, utilizando padrão operator precedence rules:

- -
-
+
-
Adição.
-
-
-
Subtração.
-
*
-
Multiplicação. Pelo menos um dos argumentos deve ser um {{cssxref("<number>")}}.
-
/
-
Divisão. O operador da direita deve ser um {{cssxref("<number>")}}.
-
- -

Os operandos na expressão podem ser qualquer valor de sintaxe {{cssxref ("<length>")}}. Você pode usar unidades diferentes para cada valor em sua expressão, se desejar. Você também pode usar parênteses para estabelecer a ordem de computação quando necessário.

- -

Notas

- - - -

Formal syntax

- -{{csssyntax}} - -

Exemplos

- -

Posicionando um objeto na tela usando margin

- -

calc() torna mais fácil posicionar um objeto com uma margem definida. Nesse exemplo, o CSS cria um banner que se estende pela janela, com um espaço de 40px entre os dois lados do banner e das bordas da janela:

- -
.banner {
-  position: absolute;
-  left: 40px;
-  width: calc(100% - 80px);
-  border: solid black 1px;
-  box-shadow: 1px 2px;
-  background-color: yellow;
-  padding: 6px;
-  text-align: center;
-  box-sizing: border-box;
-}
-
- -
<div class="banner">This is a banner!</div>
- -

{{EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', 'auto', '60')}}

- -

Dimensionar campos de formulário automaticamente para caber em seu contêiner

- -

Outro caso para calc() é ajudar a garantir que os campos do formulário caibam no espaço disponível, sem expandir para além da borda do seu contêiner, enquanto mantém uma margem apropriada.

- -

Veja-mos no CSS:

- -
input {
-  padding: 2px;
-  display: block;
-  width: calc(100% - 1em);
-}
-
-#formbox {
-  width: calc(100% / 6);
-  border: 1px solid black;
-  padding: 4px;
-}
-
- -

Aqui, o próprio formulário é estabelecido para utilizar 1/6 da largura da janela disponível. Então, para garantir que os campos de entrada mantenham um tamanho apropriado, utilizamos calc() novamente para estabelecer que eles devem ter a largura de seu contêiner menos 1em. Então, o seguinte HTML utiliza este CSS:

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

{{EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '700', '80')}}

- -

calc( ) inserido em variáveis de CSS

- -

Você também pode utilizar calc() com variáveis de CSS. Considere o seguinte código:

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

Depois que todas as variáveis forem expandidas, o valor de widthC será calc( calc( 100px / 2) / 2), então quando for atribuído à propriedade de largura .foo, todos os calc() internos (não importa o quão profundamente atribuídos) serão nivelados para apenas parênteses, de modo que o valor da propriedade width será eventualmente calc( ( 100px / 2) / 2), i.e. 25px. Resumindo: um calc() dentro de um calc() é idêntico à parênteses.

- -

Questões de acessibilidade

- -

Quando calc() é usado para controlar o tamanho do texto, certifique-se de que um dos valores inclui uma unidade de comprimento relativo, por exemplo:

- -
h1 {
-  font-size: calc(1.5rem + 3vw);
-}
- -

Isso garante que o tamanho do texto será redimensionado se a página for ampliada.

- - - -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}Definição inicial
- -

Compatibilidade com navegadores

- -

{{Compat("css.types.calc")}}

- -

Veja também

- - diff --git a/files/pt-br/web/css/calc/index.html b/files/pt-br/web/css/calc/index.html new file mode 100644 index 0000000000..5cd94f3dec --- /dev/null +++ b/files/pt-br/web/css/calc/index.html @@ -0,0 +1,163 @@ +--- +title: calc() +slug: Web/CSS/calc +tags: + - CSS + - Calculate + - Função + - Função CSS + - Layout + - Web + - calc +translation_of: Web/CSS/calc() +original_slug: Web/CSS/calc() +--- +
{{CSSRef}}
+ +

A função  calc() CSS permite você executar cálculos quando especificar os valores de propriedades no CSS. Pode ser utilizada em qualquer lugar , como  {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, e {{cssxref("<integer>")}} é permitido.

+ +
/* propriedade: calc(expressão) */
+width: calc(100% - 80px);
+
+ +

Syntax

+ +

A função  calc() recebe uma simples expressão como parâmetro e o resultado desta expressão é utilizado como valor. Pode ser uma simples expressão, combinando os seguintes operadores, utilizando padrão operator precedence rules:

+ +
+
+
+
Adição.
+
-
+
Subtração.
+
*
+
Multiplicação. Pelo menos um dos argumentos deve ser um {{cssxref("<number>")}}.
+
/
+
Divisão. O operador da direita deve ser um {{cssxref("<number>")}}.
+
+ +

Os operandos na expressão podem ser qualquer valor de sintaxe {{cssxref ("<length>")}}. Você pode usar unidades diferentes para cada valor em sua expressão, se desejar. Você também pode usar parênteses para estabelecer a ordem de computação quando necessário.

+ +

Notas

+ + + +

Formal syntax

+ +{{csssyntax}} + +

Exemplos

+ +

Posicionando um objeto na tela usando margin

+ +

calc() torna mais fácil posicionar um objeto com uma margem definida. Nesse exemplo, o CSS cria um banner que se estende pela janela, com um espaço de 40px entre os dois lados do banner e das bordas da janela:

+ +
.banner {
+  position: absolute;
+  left: 40px;
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+ +
<div class="banner">This is a banner!</div>
+ +

{{EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', 'auto', '60')}}

+ +

Dimensionar campos de formulário automaticamente para caber em seu contêiner

+ +

Outro caso para calc() é ajudar a garantir que os campos do formulário caibam no espaço disponível, sem expandir para além da borda do seu contêiner, enquanto mantém uma margem apropriada.

+ +

Veja-mos no CSS:

+ +
input {
+  padding: 2px;
+  display: block;
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

Aqui, o próprio formulário é estabelecido para utilizar 1/6 da largura da janela disponível. Então, para garantir que os campos de entrada mantenham um tamanho apropriado, utilizamos calc() novamente para estabelecer que eles devem ter a largura de seu contêiner menos 1em. Então, o seguinte HTML utiliza este CSS:

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

{{EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '700', '80')}}

+ +

calc( ) inserido em variáveis de CSS

+ +

Você também pode utilizar calc() com variáveis de CSS. Considere o seguinte código:

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

Depois que todas as variáveis forem expandidas, o valor de widthC será calc( calc( 100px / 2) / 2), então quando for atribuído à propriedade de largura .foo, todos os calc() internos (não importa o quão profundamente atribuídos) serão nivelados para apenas parênteses, de modo que o valor da propriedade width será eventualmente calc( ( 100px / 2) / 2), i.e. 25px. Resumindo: um calc() dentro de um calc() é idêntico à parênteses.

+ +

Questões de acessibilidade

+ +

Quando calc() é usado para controlar o tamanho do texto, certifique-se de que um dos valores inclui uma unidade de comprimento relativo, por exemplo:

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

Isso garante que o tamanho do texto será redimensionado se a página for ampliada.

+ + + +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}Definição inicial
+ +

Compatibilidade com navegadores

+ +

{{Compat("css.types.calc")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/element()/index.html b/files/pt-br/web/css/element()/index.html deleted file mode 100644 index f52f5eb6e7..0000000000 --- a/files/pt-br/web/css/element()/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: element -slug: Web/CSS/element() -tags: - - Background - - CSS - - CSS4-images - - Função CSS - - Layout - - Web -translation_of: Web/CSS/element() ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

A função CSS element() define uma {{cssxref("<image>")}} gerada de um elemento HTML qualquer. Essa imagem é dinamica, significando que se o elemento HTML for mudado, a propriedade CSS usando este valor será atualizada automaticamente.

- -

Um cenario particularmente util para usar esta função seria colocar uma imagem em um elemento {{HTMLElement("canvas")}}, e então usar-lo como um background.

- -

Em navegadores Gecko, você pode usar o metodo não padronizado {{domxref("document.mozSetImageElement()")}} para mudar o elemento sendo usado como background por um elemento de background selecionado por CSS.

- -

Sintaxe

- -
element( id )
- -

Onde:

- -
-
id
-
É o ID de um elemento para usar como background, especificado usando o atributo HTML #id no elemento.
-
- -

Exemplos

- -

Esses exemplos podem ser vistos em tempo real em versões do Firefox que suportam -moz-element().

- -

Um exemplo de alguma maneira real

- -

Esse exemplo usa uma {{HTMLElement("div")}} escondida como background. O elemento de background tem um gradiente, mas tambem um texto que é usado como parte do background.

- -
<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
-  <p>This box uses the element with the #myBackground1 ID as its background!</p>
-</div>
-
-<div style="overflow:hidden; height:0;">
-  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
-  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
-  </div>
-</div>
- -

A {{HTMLElement("div")}} com ID "myBackground1" é usada como background, mantendo o paragrafo "This box uses the element with the #myBackground1 ID as its background!".

- -

example1.png

- -

Um exemplo ainda mais bizarro

- -

Esse exemplo usa um elemento {{HTMLElement("button")}} se repetindo como background. Isso mostra que você pode usar qualquer elemento como background, mas não mostra necessariamente boas praticas de design.

- -
<div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
-</div>
-
-<div style="overflow:hidden; height:0;">
-  <button id="myBackground2" type="button">Evil button!</button>
-</div>
-
- -

example2.png

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoEstatusComentário
{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}Actualmente adiado para o CSS4.
- -

Compatibilidade dos navegadores

- -

 

- - - -

{{Compat("css.types.image.element")}}

- -

 

- -

Veja tambem

- - diff --git a/files/pt-br/web/css/element/index.html b/files/pt-br/web/css/element/index.html new file mode 100644 index 0000000000..92ba0fc502 --- /dev/null +++ b/files/pt-br/web/css/element/index.html @@ -0,0 +1,102 @@ +--- +title: element +slug: Web/CSS/element +tags: + - Background + - CSS + - CSS4-images + - Função CSS + - Layout + - Web +translation_of: Web/CSS/element() +original_slug: Web/CSS/element() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

A função CSS element() define uma {{cssxref("<image>")}} gerada de um elemento HTML qualquer. Essa imagem é dinamica, significando que se o elemento HTML for mudado, a propriedade CSS usando este valor será atualizada automaticamente.

+ +

Um cenario particularmente util para usar esta função seria colocar uma imagem em um elemento {{HTMLElement("canvas")}}, e então usar-lo como um background.

+ +

Em navegadores Gecko, você pode usar o metodo não padronizado {{domxref("document.mozSetImageElement()")}} para mudar o elemento sendo usado como background por um elemento de background selecionado por CSS.

+ +

Sintaxe

+ +
element( id )
+ +

Onde:

+ +
+
id
+
É o ID de um elemento para usar como background, especificado usando o atributo HTML #id no elemento.
+
+ +

Exemplos

+ +

Esses exemplos podem ser vistos em tempo real em versões do Firefox que suportam -moz-element().

+ +

Um exemplo de alguma maneira real

+ +

Esse exemplo usa uma {{HTMLElement("div")}} escondida como background. O elemento de background tem um gradiente, mas tambem um texto que é usado como parte do background.

+ +
<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
+  <p>This box uses the element with the #myBackground1 ID as its background!</p>
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
+  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
+  </div>
+</div>
+ +

A {{HTMLElement("div")}} com ID "myBackground1" é usada como background, mantendo o paragrafo "This box uses the element with the #myBackground1 ID as its background!".

+ +

example1.png

+ +

Um exemplo ainda mais bizarro

+ +

Esse exemplo usa um elemento {{HTMLElement("button")}} se repetindo como background. Isso mostra que você pode usar qualquer elemento como background, mas não mostra necessariamente boas praticas de design.

+ +
<div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <button id="myBackground2" type="button">Evil button!</button>
+</div>
+
+ +

example2.png

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoEstatusComentário
{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}Actualmente adiado para o CSS4.
+ +

Compatibilidade dos navegadores

+ +

 

+ + + +

{{Compat("css.types.image.element")}}

+ +

 

+ +

Veja tambem

+ + diff --git a/files/pt-br/web/css/env()/index.html b/files/pt-br/web/css/env()/index.html deleted file mode 100644 index bcd3a0a009..0000000000 --- a/files/pt-br/web/css/env()/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: env() -slug: Web/CSS/env() -tags: - - CSS - - CSS Function - - CSS Variables - - Draft - - Reference - - Variables - - env - - env() -translation_of: Web/CSS/env() ---- -
{{CSSRef}}
- -

A função CSS env() pode ser usada para inserir o valor de uma variável de ambiente definida pelo agente do usuário em seu CSS, de uma maneira semelhante à função {{cssxref("var")}} e propriedades personalizadas. A diferença é que, além de serem definidas pelo agente do usuário em vez de serem definidas pelo usuário, as variáveis de ambiente têm escopo global para um documento, enquanto as propriedades personalizadas têm um escopo para o(s) elemento(s) no(s) qual(is) é/são declarado(s).

- -
body {
-  padding:
-    env(safe-area-inset-top, 20px)
-    env(safe-area-inset-right, 20px)
-    env(safe-area-inset-bottom, 20px)
-    env(safe-area-inset-left, 20px);
-}
- -

Além disso, ao contrário das propriedades personalizadas, que não podem ser usadas fora do escopo das declarações, a função env() pode ser usada em qualquer parte do valor de uma propriedade ou em qualquer parte de um descriptor (por exemplo, regras Media). À medida que a especificação evolui, essa também pode ser usada em outros lugares, como em seletores.

- -

Originalmente fornecido pelo navegador iOS para permitir que os desenvolvedores coloquem seu conteúdo em uma safe area (área segura) na janela de visualização, os valores de safe-area-inset-* definidos na especificação podem ser usados para ajudar a garantir que o conteúdo seja visível até mesmo para usuários que usam uma tela não retangular.

- -

Sintaxe

- -
/* Usando os quatro valores de inserção safe area sem valores de fallback */
-env(safe-area-inset-top);
-env(safe-area-inset-right);
-env(safe-area-inset-bottom);
-env(safe-area-inset-left);
-
-/* Usando-os com valores de fallback */
-env(safe-area-inset-top, 20px);
-env(safe-area-inset-right, 1em);
-env(safe-area-inset-bottom, 0.5vh);
-env(safe-area-inset-left, 1.4rem);
-
- -

Valores

- -
-
safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
-
As variáveis safe-area-inset-* são quatro variáveis de ambiente que definem um retângulo por seus valores de inserção: top, right, bottom e left a partir da borda da janela de visualização, no qual é seguro colocar o conteúdo sem o risco de ser cortado pela forma de um visor não retangular. Para janelas de visualização retangulares, como o monitor de um laptop comum, seu valor é igual a zero. Para telas não retangulares - como um visor de um relógio redondo - os quatro valores definidos pelo agente do usuário formam um retângulo de modo que todo o conteúdo dentro do retângulo seja visível.
-
- -
-

Nota: Ao contrário de outras propriedades CSS, os nomes de propriedades definidos pelo agente do usuário fazem distinção entre maiúsculas e minúsculas.

-
- -

Sintaxe formal

- -{{cssSyntax}} - -

Exemplos

- -

O exemplo abaixo faz uso do segundo parâmetro opcional de env(), que permite fornecer um valor de fallback caso a variável de ambiente não esteja disponível.

- -
<p>
- Se a função <code>env()</code> é suportada em seu navegador,
- o texto deste parágrafo deverá estar na borda <i>top</i>, <i>right</i> e <i>bottom</i>,
- ter 50px de preenchimento entre a borda e o texto. O CSS é equivalente
- ao preenchimento: <code>padding: 0 0 0 50px</code>,
- porque, ao contrário de outras propriedades CSS, os nomes de
- propriedades do agente do usuário diferenciam letras maiúsculas de
- minúsculas.
-</p>
- -
p {
-  width: 300px;
-  border: 2px solid red;
-  padding:
-    env(safe-area-inset-top, 50px)
-    env(safe-area-inset-right, 50px)
-    env(safe-area-inset-bottom, 50px)
-    env(SAFE-AREA-INSET-LEFT, 50px);
-}
- -

{{EmbedLiveSample("Exemplos")}}

- -

Exemplo com valores

- -
padding: env(safe-area-inset-bottom, 50px); /* zero para todos agentes do usuário que são retangulares*/
-padding: env(Safe-area-inset-bottom, 50px); /* 50px porque as propriedades do agente do usuário diferenciam maiúsculas de minúsculas */
-padding: env(x, 50px 20px); /* como se estivesse preenchendo: '50px 20px' que foram definidos, porque x não é uma variável de ambiente válida */
-padding: env(x, 50px, 20px); /* ignorado '50px, 20px' porque não é um valor de preenchimento válido e x não é uma variável de ambiente válida */
-
- -

A sintaxe fallback, como de propriedades customizadas, permite vírgulas. Mas se o valor da propriedade não suportar vírgulas, o valor não é válido.

- -
-

Nota: As propriedades do agente do usuário não são redefinidas pela propriedade all.

-
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}{{Spec2("CSS3 Environment Variables")}}Definição inicial.
- -

Compatibilidade com navegadores

- -

{{Compat("css.properties.custom-property.env")}}

- -

Veja também

- - diff --git a/files/pt-br/web/css/env/index.html b/files/pt-br/web/css/env/index.html new file mode 100644 index 0000000000..f7cd36b8e9 --- /dev/null +++ b/files/pt-br/web/css/env/index.html @@ -0,0 +1,133 @@ +--- +title: env() +slug: Web/CSS/env +tags: + - CSS + - CSS Function + - CSS Variables + - Draft + - Reference + - Variables + - env + - env() +translation_of: Web/CSS/env() +original_slug: Web/CSS/env() +--- +
{{CSSRef}}
+ +

A função CSS env() pode ser usada para inserir o valor de uma variável de ambiente definida pelo agente do usuário em seu CSS, de uma maneira semelhante à função {{cssxref("var")}} e propriedades personalizadas. A diferença é que, além de serem definidas pelo agente do usuário em vez de serem definidas pelo usuário, as variáveis de ambiente têm escopo global para um documento, enquanto as propriedades personalizadas têm um escopo para o(s) elemento(s) no(s) qual(is) é/são declarado(s).

+ +
body {
+  padding:
+    env(safe-area-inset-top, 20px)
+    env(safe-area-inset-right, 20px)
+    env(safe-area-inset-bottom, 20px)
+    env(safe-area-inset-left, 20px);
+}
+ +

Além disso, ao contrário das propriedades personalizadas, que não podem ser usadas fora do escopo das declarações, a função env() pode ser usada em qualquer parte do valor de uma propriedade ou em qualquer parte de um descriptor (por exemplo, regras Media). À medida que a especificação evolui, essa também pode ser usada em outros lugares, como em seletores.

+ +

Originalmente fornecido pelo navegador iOS para permitir que os desenvolvedores coloquem seu conteúdo em uma safe area (área segura) na janela de visualização, os valores de safe-area-inset-* definidos na especificação podem ser usados para ajudar a garantir que o conteúdo seja visível até mesmo para usuários que usam uma tela não retangular.

+ +

Sintaxe

+ +
/* Usando os quatro valores de inserção safe area sem valores de fallback */
+env(safe-area-inset-top);
+env(safe-area-inset-right);
+env(safe-area-inset-bottom);
+env(safe-area-inset-left);
+
+/* Usando-os com valores de fallback */
+env(safe-area-inset-top, 20px);
+env(safe-area-inset-right, 1em);
+env(safe-area-inset-bottom, 0.5vh);
+env(safe-area-inset-left, 1.4rem);
+
+ +

Valores

+ +
+
safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
+
As variáveis safe-area-inset-* são quatro variáveis de ambiente que definem um retângulo por seus valores de inserção: top, right, bottom e left a partir da borda da janela de visualização, no qual é seguro colocar o conteúdo sem o risco de ser cortado pela forma de um visor não retangular. Para janelas de visualização retangulares, como o monitor de um laptop comum, seu valor é igual a zero. Para telas não retangulares - como um visor de um relógio redondo - os quatro valores definidos pelo agente do usuário formam um retângulo de modo que todo o conteúdo dentro do retângulo seja visível.
+
+ +
+

Nota: Ao contrário de outras propriedades CSS, os nomes de propriedades definidos pelo agente do usuário fazem distinção entre maiúsculas e minúsculas.

+
+ +

Sintaxe formal

+ +{{cssSyntax}} + +

Exemplos

+ +

O exemplo abaixo faz uso do segundo parâmetro opcional de env(), que permite fornecer um valor de fallback caso a variável de ambiente não esteja disponível.

+ +
<p>
+ Se a função <code>env()</code> é suportada em seu navegador,
+ o texto deste parágrafo deverá estar na borda <i>top</i>, <i>right</i> e <i>bottom</i>,
+ ter 50px de preenchimento entre a borda e o texto. O CSS é equivalente
+ ao preenchimento: <code>padding: 0 0 0 50px</code>,
+ porque, ao contrário de outras propriedades CSS, os nomes de
+ propriedades do agente do usuário diferenciam letras maiúsculas de
+ minúsculas.
+</p>
+ +
p {
+  width: 300px;
+  border: 2px solid red;
+  padding:
+    env(safe-area-inset-top, 50px)
+    env(safe-area-inset-right, 50px)
+    env(safe-area-inset-bottom, 50px)
+    env(SAFE-AREA-INSET-LEFT, 50px);
+}
+ +

{{EmbedLiveSample("Exemplos")}}

+ +

Exemplo com valores

+ +
padding: env(safe-area-inset-bottom, 50px); /* zero para todos agentes do usuário que são retangulares*/
+padding: env(Safe-area-inset-bottom, 50px); /* 50px porque as propriedades do agente do usuário diferenciam maiúsculas de minúsculas */
+padding: env(x, 50px 20px); /* como se estivesse preenchendo: '50px 20px' que foram definidos, porque x não é uma variável de ambiente válida */
+padding: env(x, 50px, 20px); /* ignorado '50px, 20px' porque não é um valor de preenchimento válido e x não é uma variável de ambiente válida */
+
+ +

A sintaxe fallback, como de propriedades customizadas, permite vírgulas. Mas se o valor da propriedade não suportar vírgulas, o valor não é válido.

+ +
+

Nota: As propriedades do agente do usuário não são redefinidas pela propriedade all.

+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}{{Spec2("CSS3 Environment Variables")}}Definição inicial.
+ +

Compatibilidade com navegadores

+ +

{{Compat("css.properties.custom-property.env")}}

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/filter-function/grayscale()/index.html b/files/pt-br/web/css/filter-function/grayscale()/index.html deleted file mode 100644 index b495a0dbbf..0000000000 --- a/files/pt-br/web/css/filter-function/grayscale()/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: grayscale() -slug: Web/CSS/filter-function/grayscale() -tags: - - CSS - - Efeito filtro - - Filtros - - Função CSS - - Referencia -translation_of: Web/CSS/filter-function/grayscale() ---- -
{{cssref}}
- -

O grayscale() é uma função do CSS que modifica a imagem adicionada para as cores branco e preto . Esse resultado é um efeito "filtro". {{cssxref("<filter-function>")}}.

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

Sintaxe

- -
grayscale(quantidade)
- -

Parâmetros

- -
-
quantidade
-
A quantia da conversão é especificada em {{cssxref ("<number>")}} (número) ou {{cssxref ("<percentage>")}} (porcentagem). Um valor de 100% indica que a cor está compeltamente dentro da escala de cinza. Um valor de 0% não altera as cores da imagem, que permanecerá igual a original. Valores entre 0% e 100% são multiplicadores lineares no efeito cinza, modificando a escala de cores conforme a quantidade determinada. A quantia em número é equivalente a em porcentagem.
-
- -
grayscale(0)     /* Não afeta a imagem */
-grayscale(.7)    /* .7 => 70% de branco&preto */
-grayscale(100%)  /* Completamente em branco&preto */
- -

Veja também 

- - diff --git a/files/pt-br/web/css/filter-function/grayscale/index.html b/files/pt-br/web/css/filter-function/grayscale/index.html new file mode 100644 index 0000000000..9886e5fe7d --- /dev/null +++ b/files/pt-br/web/css/filter-function/grayscale/index.html @@ -0,0 +1,40 @@ +--- +title: grayscale() +slug: Web/CSS/filter-function/grayscale +tags: + - CSS + - Efeito filtro + - Filtros + - Função CSS + - Referencia +translation_of: Web/CSS/filter-function/grayscale() +original_slug: Web/CSS/filter-function/grayscale() +--- +
{{cssref}}
+ +

O grayscale() é uma função do CSS que modifica a imagem adicionada para as cores branco e preto . Esse resultado é um efeito "filtro". {{cssxref("<filter-function>")}}.

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

Sintaxe

+ +
grayscale(quantidade)
+ +

Parâmetros

+ +
+
quantidade
+
A quantia da conversão é especificada em {{cssxref ("<number>")}} (número) ou {{cssxref ("<percentage>")}} (porcentagem). Um valor de 100% indica que a cor está compeltamente dentro da escala de cinza. Um valor de 0% não altera as cores da imagem, que permanecerá igual a original. Valores entre 0% e 100% são multiplicadores lineares no efeito cinza, modificando a escala de cores conforme a quantidade determinada. A quantia em número é equivalente a em porcentagem.
+
+ +
grayscale(0)     /* Não afeta a imagem */
+grayscale(.7)    /* .7 => 70% de branco&preto */
+grayscale(100%)  /* Completamente em branco&preto */
+ +

Veja também 

+ + diff --git a/files/pt-br/web/css/filter-function/opacity()/index.html b/files/pt-br/web/css/filter-function/opacity()/index.html deleted file mode 100644 index 8e41945429..0000000000 --- a/files/pt-br/web/css/filter-function/opacity()/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: opacity() -slug: Web/CSS/filter-function/opacity() -tags: - - Efeitos de Filtro - - Função CSS - - Referencia -translation_of: Web/CSS/filter-function/opacity() ---- -
{{cssref}}
- -

A função CSS opacity() aplica transparência às amostras na imagem inputada. Seu resultado é uma {{cssxref("<filter-function>")}}.

- -
-

Nota: Essa função é similar à propriedade {{Cssxref("opacity")}} mais estabelecida. A diferença é que com filtros, alguns browsers fornecem aceleração de hardware para uma melhor performance.

-
- -

Sintaxe

- -
opacity(amount)
- -

Parâmetros

- -
-
amount
-
A quantidade de conversão, especificada com um {{cssxref("<number>")}} ou uma {{cssxref("<percentage>")}}. Um valor de 0% é completamente transparente, enquanto que um valor de 100% mantém o input inalterado. Valores entre 0% e 100% são multiplicadores lineares do efeito. O valor de lacuna para interpolação é 1.
-
- -

Exemplos

- -
opacity(0%)   /* Completamente transparente */
-opacity(50%)  /* 50% transparente */
-opacity(1)    /* Nenhum efeito */
- -

Ver também

- - diff --git a/files/pt-br/web/css/filter-function/opacity/index.html b/files/pt-br/web/css/filter-function/opacity/index.html new file mode 100644 index 0000000000..b2e0103647 --- /dev/null +++ b/files/pt-br/web/css/filter-function/opacity/index.html @@ -0,0 +1,41 @@ +--- +title: opacity() +slug: Web/CSS/filter-function/opacity +tags: + - Efeitos de Filtro + - Função CSS + - Referencia +translation_of: Web/CSS/filter-function/opacity() +original_slug: Web/CSS/filter-function/opacity() +--- +
{{cssref}}
+ +

A função CSS opacity() aplica transparência às amostras na imagem inputada. Seu resultado é uma {{cssxref("<filter-function>")}}.

+ +
+

Nota: Essa função é similar à propriedade {{Cssxref("opacity")}} mais estabelecida. A diferença é que com filtros, alguns browsers fornecem aceleração de hardware para uma melhor performance.

+
+ +

Sintaxe

+ +
opacity(amount)
+ +

Parâmetros

+ +
+
amount
+
A quantidade de conversão, especificada com um {{cssxref("<number>")}} ou uma {{cssxref("<percentage>")}}. Um valor de 0% é completamente transparente, enquanto que um valor de 100% mantém o input inalterado. Valores entre 0% e 100% são multiplicadores lineares do efeito. O valor de lacuna para interpolação é 1.
+
+ +

Exemplos

+ +
opacity(0%)   /* Completamente transparente */
+opacity(50%)  /* 50% transparente */
+opacity(1)    /* Nenhum efeito */
+ +

Ver também

+ + diff --git a/files/pt-br/web/css/filter-function/sepia()/index.html b/files/pt-br/web/css/filter-function/sepia()/index.html deleted file mode 100644 index 0ad03c1c1f..0000000000 --- a/files/pt-br/web/css/filter-function/sepia()/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: sepia() -slug: Web/CSS/filter-function/sepia() -tags: - - Efeitos de Filtro - - Função CSS - - Referencia -translation_of: Web/CSS/filter-function/sepia() ---- -
{{cssref}}
- -

A função CSS sepia() converte a imagem inputada em sépia, dando uma aparência mais amarelada/marrom e quente. Seu resultado é uma {{cssxref("<filter-function>")}}.

- -

Sintaxe

- -
sepia(amount)
- -

Parâmetros

- -
-
amount
-
A quantidade de conversão, especificada por um {{cssxref("<number>")}} ou uma {{cssxref("<percentage>")}}. Um valor de 100% é completamente sépia, enquanto que um valor de 0% mantém o input inalterado. Valores entre 0% e 100% são multiplicadores lineares do efeito. O valor de lacuna para interpolação é 0.
-
- -

Exemplos

- -
sepia(0)     /* Sem efeito */
-sepia(.65)   /* 65% sépia */
-sepia(100%)  /* Completamente sépia */
- -

Ver também

- - diff --git a/files/pt-br/web/css/filter-function/sepia/index.html b/files/pt-br/web/css/filter-function/sepia/index.html new file mode 100644 index 0000000000..dd7b7cd2f7 --- /dev/null +++ b/files/pt-br/web/css/filter-function/sepia/index.html @@ -0,0 +1,36 @@ +--- +title: sepia() +slug: Web/CSS/filter-function/sepia +tags: + - Efeitos de Filtro + - Função CSS + - Referencia +translation_of: Web/CSS/filter-function/sepia() +original_slug: Web/CSS/filter-function/sepia() +--- +
{{cssref}}
+ +

A função CSS sepia() converte a imagem inputada em sépia, dando uma aparência mais amarelada/marrom e quente. Seu resultado é uma {{cssxref("<filter-function>")}}.

+ +

Sintaxe

+ +
sepia(amount)
+ +

Parâmetros

+ +
+
amount
+
A quantidade de conversão, especificada por um {{cssxref("<number>")}} ou uma {{cssxref("<percentage>")}}. Um valor de 100% é completamente sépia, enquanto que um valor de 0% mantém o input inalterado. Valores entre 0% e 100% são multiplicadores lineares do efeito. O valor de lacuna para interpolação é 0.
+
+ +

Exemplos

+ +
sepia(0)     /* Sem efeito */
+sepia(.65)   /* 65% sépia */
+sepia(100%)  /* Completamente sépia */
+ +

Ver também

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

A função CSS matrix() define uma matriz de transformação 2D homogênea. Isso resulta em um dado do tipo {{cssxref("<transform-function>")}} .

- -
-

Note: matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

-
- -

Syntax

- -

The matrix() function is specified with six values. The constant values are implied and not passed as parameters; the other parameters are described in the column-major order.

- -
Note: Until Firefox 16, Gecko accepted a {{cssxref("<length>")}} value for tx and ty.
- -
matrix(a, b, c, d, tx, ty)
-
- -

Values

- -
-
a b c d
-
Are {{cssxref("<number>")}}s describing the linear transformation.
-
tx ty
-
Are {{cssxref("<number>")}}s describing the translation to apply.
-
- - - - - - - - - - - - - - - - - - - - - -
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
[a b c d tx ty]
- -

The values represent the following functions:
- matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

- -

Examples

- -

HTML

- -
<div>Normal</div>
-<div class="changed">Changed</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.changed {
-  transform: matrix(1, 2, -1, 1, 80, 80);
-  background-color: pink;
-}
- -

Result

- -

{{EmbedLiveSample("Examples", 350, 350)}}

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Transforms", "#funcdef-transform-matrix", "matrix()")}}{{Spec2("CSS3 Transforms")}}Initial definition
- -

Compatibilidade com navegadores

- -

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

- -

See also

- - diff --git a/files/pt-br/web/css/transform-function/matrix/index.html b/files/pt-br/web/css/transform-function/matrix/index.html new file mode 100644 index 0000000000..8b21cf7b37 --- /dev/null +++ b/files/pt-br/web/css/transform-function/matrix/index.html @@ -0,0 +1,112 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix +translation_of: Web/CSS/transform-function/matrix() +original_slug: Web/CSS/transform-function/matrix() +--- +
{{CSSRef}}
+ +

A função CSS matrix() define uma matriz de transformação 2D homogênea. Isso resulta em um dado do tipo {{cssxref("<transform-function>")}} .

+ +
+

Note: matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

+
+ +

Syntax

+ +

The matrix() function is specified with six values. The constant values are implied and not passed as parameters; the other parameters are described in the column-major order.

+ +
Note: Until Firefox 16, Gecko accepted a {{cssxref("<length>")}} value for tx and ty.
+ +
matrix(a, b, c, d, tx, ty)
+
+ +

Values

+ +
+
a b c d
+
Are {{cssxref("<number>")}}s describing the linear transformation.
+
tx ty
+
Are {{cssxref("<number>")}}s describing the translation to apply.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
[a b c d tx ty]
+ +

The values represent the following functions:
+ matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

+ +

Examples

+ +

HTML

+ +
<div>Normal</div>
+<div class="changed">Changed</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.changed {
+  transform: matrix(1, 2, -1, 1, 80, 80);
+  background-color: pink;
+}
+ +

Result

+ +

{{EmbedLiveSample("Examples", 350, 350)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Transforms", "#funcdef-transform-matrix", "matrix()")}}{{Spec2("CSS3 Transforms")}}Initial definition
+ +

Compatibilidade com navegadores

+ +

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

+ +

See also

+ + diff --git a/files/pt-br/web/css/transform-function/perspective()/index.html b/files/pt-br/web/css/transform-function/perspective()/index.html deleted file mode 100644 index 314e1bc86c..0000000000 --- a/files/pt-br/web/css/transform-function/perspective()/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: perspective() -slug: Web/CSS/transform-function/perspective() -tags: - - Função CSS - - Referencia - - Transformações CSS -translation_of: Web/CSS/transform-function/perspective() ---- -
{{CSSRef}}
- -

A função CSS perspective() define uma transformação que configura a distância entre o usuário e o plano z=0. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.

- -

Sintaxe

- -

A distância de perspectiva usada porperspective() é especificada por um valor {{cssxref("<length>")}}, que representa a distância entre o usuário e o plano z=0. Um valor positivo faz o elemento parecer mais perto do usuário, e um valor negativo o faz parecer mais longe.

- -
perspective(d)
-
- -

Valores

- -
-
d
-
É um {{cssxref("<length>")}} representando a distância do usuário até o plano z=0. Se for 0 ou um valor negativo, nenhuma transformação de perspectiva é aplicada.
-
- - - - - - - - - - - - - - - - - -
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
-

Essa transformação se aplica ao espaço 3D e não pode ser representada no plano.

- 		Essa não é uma transformação linear em ℝ3, e não pode ser representada usando uma matriz de coordenadas cartesianas. 10000100001000−1/d1
- -

Exemplos

- -

HTML

- -
<p>Sem perspectiva:</p>
-<div class="no-perspective-box">
-  <div class="face front">A</div>
-  <div class="face top">B</div>
-  <div class="face left">C</div>
-</div>
-
-<p>Com perspectiva (7.5cm):</p>
-<div class="perspective-box">
-  <div class="face front">A</div>
-  <div class="face top">B</div>
-  <div class="face left">C</div>
-</div>
-
- -

CSS

- -
.face {
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  line-height: 100px;
-  font-size: 100px;
-  text-align: center;
-}
-
-.no-perspective-box {
-  width: 100px;
-  height: 100px;
-  transform-style: preserve-3d;
-  transform: rotateX(-15deg) rotateY(15deg);
-  margin-left: 100px;
-}
-
-.perspective-box {
-  width: 100px;
-  height: 100px;
-  transform-style: preserve-3d;
-  transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg);
-  margin-left: 100px;
-}
-
-.top {
-  background-color: skyblue;
-  transform: rotateX(90deg) translate3d(0, 0, 50px);
-}
-
-.left {
-  background-color: pink;
-  transform: rotateY(-90deg) translate3d(0, 0, 50px);
-}
-
-.front {
-  background-color: limegreen;
-  transform: translate3d(0, 0, 50px);
-}
-
- -

Resultado

- -

{{ EmbedLiveSample('Examples', '250', '350') }}

- -

Compatibilidade com navegadores

- -

Veja o tipo de dado <transform-function> para informações de compatibilidade.

- -

Ver também

- - diff --git a/files/pt-br/web/css/transform-function/perspective/index.html b/files/pt-br/web/css/transform-function/perspective/index.html new file mode 100644 index 0000000000..05b62476e6 --- /dev/null +++ b/files/pt-br/web/css/transform-function/perspective/index.html @@ -0,0 +1,124 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective +tags: + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/perspective() +original_slug: Web/CSS/transform-function/perspective() +--- +
{{CSSRef}}
+ +

A função CSS perspective() define uma transformação que configura a distância entre o usuário e o plano z=0. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.

+ +

Sintaxe

+ +

A distância de perspectiva usada porperspective() é especificada por um valor {{cssxref("<length>")}}, que representa a distância entre o usuário e o plano z=0. Um valor positivo faz o elemento parecer mais perto do usuário, e um valor negativo o faz parecer mais longe.

+ +
perspective(d)
+
+ +

Valores

+ +
+
d
+
É um {{cssxref("<length>")}} representando a distância do usuário até o plano z=0. Se for 0 ou um valor negativo, nenhuma transformação de perspectiva é aplicada.
+
+ + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
+

Essa transformação se aplica ao espaço 3D e não pode ser representada no plano.

+ 		Essa não é uma transformação linear em ℝ3, e não pode ser representada usando uma matriz de coordenadas cartesianas. 10000100001000−1/d1
+ +

Exemplos

+ +

HTML

+ +
<p>Sem perspectiva:</p>
+<div class="no-perspective-box">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+<p>Com perspectiva (7.5cm):</p>
+<div class="perspective-box">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+ +

CSS

+ +
.face {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  font-size: 100px;
+  text-align: center;
+}
+
+.no-perspective-box {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transform: rotateX(-15deg) rotateY(15deg);
+  margin-left: 100px;
+}
+
+.perspective-box {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg);
+  margin-left: 100px;
+}
+
+.top {
+  background-color: skyblue;
+  transform: rotateX(90deg) translate3d(0, 0, 50px);
+}
+
+.left {
+  background-color: pink;
+  transform: rotateY(-90deg) translate3d(0, 0, 50px);
+}
+
+.front {
+  background-color: limegreen;
+  transform: translate3d(0, 0, 50px);
+}
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Examples', '250', '350') }}

+ +

Compatibilidade com navegadores

+ +

Veja o tipo de dado <transform-function> para informações de compatibilidade.

+ +

Ver também

+ + diff --git a/files/pt-br/web/css/transform-function/rotate()/index.html b/files/pt-br/web/css/transform-function/rotate()/index.html deleted file mode 100644 index 5f7b4270d0..0000000000 --- a/files/pt-br/web/css/transform-function/rotate()/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -translation_of: Web/CSS/transform-function/rotate() ---- -

{{CSSRef}}

- -

A função CSS rotate() define uma transformação que gira um elemento em torno de um ponto fixo no plano 2D, sem deformá-lo. O resultado é um tipo de dados {{cssxref("<transform-function>")}}.

- -

- -

O eixo de rotação passa por uma origem, definido pela propriedade CSS {{ cssxref("transform-origin") }}.

- -

Sintaxe

- -

A quantidade de rotação criada por rotate() é especificado por um {{cssxref("<angle>")}}. Se positivo, o movimento será no sentido horário; Se negativo, ela será no sentido anti-horário. Uma rotação de 180° é chamada de point reflection (reflexão do ponto).

- -
rotate(a)
-
- -

Valores

- -
-
a
-
É um {{ cssxref("<angle>") }} representando o ângulo da rotação. Um ângulo positivo indica uma rotação no sentido horário, um ângulo negativo no sentido anti-horário.
-
- - - - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ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]
- -

Exemplos

- -

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;
-}
-
- -

Resultado

- -

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

- -

Compatibilidade do navegador

- -

Por favor, veja o tipo de dados <transform-function> para informações de compatibilidade.

- -

Veja também

- - diff --git a/files/pt-br/web/css/transform-function/rotate/index.html b/files/pt-br/web/css/transform-function/rotate/index.html new file mode 100644 index 0000000000..f4cebf0340 --- /dev/null +++ b/files/pt-br/web/css/transform-function/rotate/index.html @@ -0,0 +1,86 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate +translation_of: Web/CSS/transform-function/rotate() +original_slug: Web/CSS/transform-function/rotate() +--- +

{{CSSRef}}

+ +

A função CSS rotate() define uma transformação que gira um elemento em torno de um ponto fixo no plano 2D, sem deformá-lo. O resultado é um tipo de dados {{cssxref("<transform-function>")}}.

+ +

+ +

O eixo de rotação passa por uma origem, definido pela propriedade CSS {{ cssxref("transform-origin") }}.

+ +

Sintaxe

+ +

A quantidade de rotação criada por rotate() é especificado por um {{cssxref("<angle>")}}. Se positivo, o movimento será no sentido horário; Se negativo, ela será no sentido anti-horário. Uma rotação de 180° é chamada de point reflection (reflexão do ponto).

+ +
rotate(a)
+
+ +

Valores

+ +
+
a
+
É um {{ cssxref("<angle>") }} representando o ângulo da rotação. Um ângulo positivo indica uma rotação no sentido horário, um ângulo negativo no sentido anti-horário.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ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]
+ +

Exemplos

+ +

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;
+}
+
+ +

Resultado

+ +

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

+ +

Compatibilidade do navegador

+ +

Por favor, veja o tipo de dados <transform-function> para informações de compatibilidade.

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/transform-function/rotate3d()/index.html b/files/pt-br/web/css/transform-function/rotate3d()/index.html deleted file mode 100644 index 28b53b4ecc..0000000000 --- a/files/pt-br/web/css/transform-function/rotate3d()/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: rotate3d() -slug: Web/CSS/transform-function/rotate3d() -tags: - - Função CSS - - Referencia - - Transformações CSS -translation_of: Web/CSS/transform-function/rotate3d() ---- -
{{CSSRef}}
- -

A função CSS rotate3d() define uma transformação que gira um elemento em torno de um eixo fixo no espaço 3D, sem deformá-lo. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.

- -

No espaço 3D, rotações têm três graus de liberdade que, juntos, descrevem um único eixo de rotação. O eixo de rotação é definido por um vetor [x, y, z] e passado pela origem (como definido pela propriedade {{ cssxref("transform-origin") }}). Se, como especificado, o vetor não for normalizado (isto é, se a soma dos quadrados das suas três coordenadas não for 1), o {{glossary("user agent")}} irá normalizá-lo internamente. Um vetor não-normalizável, como o vetor nulo [0, 0, 0], fará com que a rotação seja ignorada, mas sem invalidar toda a propriedade CSS.

- -
Nota: Diferente de rotações no plano 2D, a composição de rotações 3D normalmente não é comutativa. Em outras palavras, a ordem na qual as rotações são aplicadas impacta o resultado.
- -

Sintaxe

- -

A quantidade de rotação criada por rotate3d() é especificada por três {{cssxref("<number>")}} e um {{cssxref("<angle>")}}. Os <number> representam as coordenadas x, y e z do vetor, denotando o eixo de rotação. O <angle> representa o ângulo de rotação; se positivo, o movimento será no sentido horário; se negativo, será no sentido anti-horário.

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

Valores

- -
-
x
-
É um {{cssxref("<number>")}} descrevendo a coordenada x do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
-
y
-
É um {{cssxref("<number>")}} descrevendo a coordenada y do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
-
z
-
É um {{cssxref("<number>")}} descrevendo a coordenada z do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
-
a
-
É um {{ cssxref("<angle>") }} representando o ângulo de rotação. Um ângulo positivo denota uma rotação no sentido horário, e um negativo no sentido anti-horário.
-
- - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas em ℝ2Essa transformação se aplica ao plano 3D e não pode ser representada em um plano.
Coordenadas homogêneas em ℝℙ2
Coordenadas cartesianas em ℝ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
Coordenadas homogêneas em ℝℙ3
- -

Exemplos

- -

Rotacionando no eixo y

- -

HTML

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

CSS

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

Resultado

- -

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

- -

Rotacionando em um eixo customizado

- -

HTML

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

CSS

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

Resultado

- -

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

- -

Compatibilidade com navegadores

- -

Veja o tipo de dado <transform-function> para informações de compatibilidade.

- -

Ver também

- - diff --git a/files/pt-br/web/css/transform-function/rotate3d/index.html b/files/pt-br/web/css/transform-function/rotate3d/index.html new file mode 100644 index 0000000000..7f5dd81c3a --- /dev/null +++ b/files/pt-br/web/css/transform-function/rotate3d/index.html @@ -0,0 +1,128 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d +tags: + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/rotate3d() +original_slug: Web/CSS/transform-function/rotate3d() +--- +
{{CSSRef}}
+ +

A função CSS rotate3d() define uma transformação que gira um elemento em torno de um eixo fixo no espaço 3D, sem deformá-lo. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.

+ +

No espaço 3D, rotações têm três graus de liberdade que, juntos, descrevem um único eixo de rotação. O eixo de rotação é definido por um vetor [x, y, z] e passado pela origem (como definido pela propriedade {{ cssxref("transform-origin") }}). Se, como especificado, o vetor não for normalizado (isto é, se a soma dos quadrados das suas três coordenadas não for 1), o {{glossary("user agent")}} irá normalizá-lo internamente. Um vetor não-normalizável, como o vetor nulo [0, 0, 0], fará com que a rotação seja ignorada, mas sem invalidar toda a propriedade CSS.

+ +
Nota: Diferente de rotações no plano 2D, a composição de rotações 3D normalmente não é comutativa. Em outras palavras, a ordem na qual as rotações são aplicadas impacta o resultado.
+ +

Sintaxe

+ +

A quantidade de rotação criada por rotate3d() é especificada por três {{cssxref("<number>")}} e um {{cssxref("<angle>")}}. Os <number> representam as coordenadas x, y e z do vetor, denotando o eixo de rotação. O <angle> representa o ângulo de rotação; se positivo, o movimento será no sentido horário; se negativo, será no sentido anti-horário.

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

Valores

+ +
+
x
+
É um {{cssxref("<number>")}} descrevendo a coordenada x do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
+
y
+
É um {{cssxref("<number>")}} descrevendo a coordenada y do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
+
z
+
É um {{cssxref("<number>")}} descrevendo a coordenada z do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
+
a
+
É um {{ cssxref("<angle>") }} representando o ângulo de rotação. Um ângulo positivo denota uma rotação no sentido horário, e um negativo no sentido anti-horário.
+
+ + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Essa transformação se aplica ao plano 3D e não pode ser representada em um plano.
Coordenadas homogêneas em ℝℙ2
Coordenadas cartesianas em ℝ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
Coordenadas homogêneas em ℝℙ3
+ +

Exemplos

+ +

Rotacionando no eixo y

+ +

HTML

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

CSS

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

Resultado

+ +

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

+ +

Rotacionando em um eixo customizado

+ +

HTML

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

CSS

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

Resultado

+ +

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

+ +

Compatibilidade com navegadores

+ +

Veja o tipo de dado <transform-function> para informações de compatibilidade.

+ +

Ver também

+ + diff --git a/files/pt-br/web/css/transform-function/scale()/index.html b/files/pt-br/web/css/transform-function/scale()/index.html deleted file mode 100644 index c249bd6931..0000000000 --- a/files/pt-br/web/css/transform-function/scale()/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: scale() -slug: Web/CSS/transform-function/scale() -tags: - - Função CSS - - Referencia - - Transformações CSS -translation_of: Web/CSS/transform-function/scale() ---- -
{{CSSRef}}
- -

A função CSS scale() define uma transformação que redimensiona um elemento no plano 2D. Como o redimensionamento é definido por um vetor, ele pode transformar as dimensões verticais e horizontais em escalas diferentes. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.

- -

- -

Essa transformação de redimensionamento é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto cada direção deve ser redimensionada. Se as duas coordenadas forem iguais, o redimensionamento é uniforme (isotrópico) e a proporção do elemento é preservada (isto é uma transformação homotética).

- -

Quando o valor de uma coordenada está fora do alcance [-1, 1], o elemento cresce ao longo daquela dimensão; quando está dentro, ele encolhe. Se for negativo, o resultado é um ponto de reflexão naquela dimensão. O valor 1 não tem efeito.

- -
Nota: A função scale() apenas redimensiona em 2D Para redimensionar em 3D, use scale3d() ao invés.
- -

Sintaxe

- -

A função scale() é especificada com um ou dois valores, que representam a quantidade de redimensionamento a ser aplicada em cada direção.

- -
scale(sx)
-
-scale(sx, sy)
-
- -

Valores

- -
-
sx
-
Um {{cssxref("<number>")}} representando a abscissa do vetor de redimensionamento.
-
sy
-
Um {{cssxref("<number>")}} representando a ordenada do vetor de redimensionamento. Se não for definida, seu valor padrão ésx, resultando em um redimensionamento uniforme que preserva a proporção do elemento.
-
- - - - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]
- -

Exemplos

- -

Redimensionando as dimensões X e Y juntas

- -

HTML

- -
<div>Normal</div>
-<div class="scaled">Redimensionado</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.scaled {
-  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
-  background-color: pink;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}

- -

Redimensionando dimensões X e Y separadamente e transladando a origem

- -

HTML

- -
<div>Normal</div>
-<div class="scaled">Redimensionado</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.scaled {
-  transform: scale(2, 0.5); /* Igual a scaleX(2) scaleY(0.5) */
-  transform-origin: left;
-  background-color: pink;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}

- -

Compatibilidade com navegadores

- -

Veja o dado do tipo <transform-function> para informações de compatibilidade.

- -

Ver também

- - diff --git a/files/pt-br/web/css/transform-function/scale/index.html b/files/pt-br/web/css/transform-function/scale/index.html new file mode 100644 index 0000000000..3e18a2e3c6 --- /dev/null +++ b/files/pt-br/web/css/transform-function/scale/index.html @@ -0,0 +1,126 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale +tags: + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/scale() +original_slug: Web/CSS/transform-function/scale() +--- +
{{CSSRef}}
+ +

A função CSS scale() define uma transformação que redimensiona um elemento no plano 2D. Como o redimensionamento é definido por um vetor, ele pode transformar as dimensões verticais e horizontais em escalas diferentes. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.

+ +

+ +

Essa transformação de redimensionamento é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto cada direção deve ser redimensionada. Se as duas coordenadas forem iguais, o redimensionamento é uniforme (isotrópico) e a proporção do elemento é preservada (isto é uma transformação homotética).

+ +

Quando o valor de uma coordenada está fora do alcance [-1, 1], o elemento cresce ao longo daquela dimensão; quando está dentro, ele encolhe. Se for negativo, o resultado é um ponto de reflexão naquela dimensão. O valor 1 não tem efeito.

+ +
Nota: A função scale() apenas redimensiona em 2D Para redimensionar em 3D, use scale3d() ao invés.
+ +

Sintaxe

+ +

A função scale() é especificada com um ou dois valores, que representam a quantidade de redimensionamento a ser aplicada em cada direção.

+ +
scale(sx)
+
+scale(sx, sy)
+
+ +

Valores

+ +
+
sx
+
Um {{cssxref("<number>")}} representando a abscissa do vetor de redimensionamento.
+
sy
+
Um {{cssxref("<number>")}} representando a ordenada do vetor de redimensionamento. Se não for definida, seu valor padrão ésx, resultando em um redimensionamento uniforme que preserva a proporção do elemento.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]
+ +

Exemplos

+ +

Redimensionando as dimensões X e Y juntas

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Redimensionado</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}

+ +

Redimensionando dimensões X e Y separadamente e transladando a origem

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Redimensionado</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(2, 0.5); /* Igual a scaleX(2) scaleY(0.5) */
+  transform-origin: left;
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}

+ +

Compatibilidade com navegadores

+ +

Veja o dado do tipo <transform-function> para informações de compatibilidade.

+ +

Ver também

+ + diff --git a/files/pt-br/web/css/transform-function/translate()/index.html b/files/pt-br/web/css/transform-function/translate()/index.html deleted file mode 100644 index 3a0374d2fe..0000000000 --- a/files/pt-br/web/css/transform-function/translate()/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: translate() -slug: Web/CSS/transform-function/translate() -tags: - - CSS - - Função CSS - - Referencia - - Transformações CSS -translation_of: Web/CSS/transform-function/translate() ---- -
{{CSSRef}}
- -

A função CSS translate() reposiciona um elemento na direção horizontal e/ou vertical. O seu resultado é um tipo de dado {{cssxref("<transform-function>")}}.

- -

- -

Esta transformação é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto o elemento se move em cada direção.

- -

Sintaxe

- -
/* Valores <length-percentage> únicos */
-transform: translate(200px);
-transform: translate(50%);
-
-/* Valores <length-percentage> duplos */
-transform: translate(100px, 200px);
-transform: translate(100px, 50%);
-transform: translate(30%, 200px);
-transform: translate(30%, 50%);
-
- -

Valores

- -
-
Valores <length-percentage> únicos
-
Este valor é um {{cssxref("length")}} ou {{cssxref("percentage")}} representando a abcissa (horizontal, coordenada x) do vetor de translação. A ordenada (vertical, coordenada y) do vetor de translação será definida como 0. Por exemplo, translate(2) é equivalente a translate(2, 0). Um valor percentual refere-se à largura da caixa de referência definida pela propriedade {{cssxref("transform-box")}}.
-
Valores <length-percentage> duplos
-
Este valor descreve dois {{cssxref("length")}} ou valores {{cssxref("percentage")}} representando tanto a abcissa (coordenada x) quanto a ordenada (coordenada y) do vetor de translação. Uma porcentagem como primeiro valor refere-se à largura, como segunda parte da altura da caixa de referência definida pela propedade {{cssxref("transform-box")}}.
-
- - - - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas em ℝ2Coordenadas homogêneas emℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
-

Uma translação não é uma transformação linear em ℝ2 e não pode ser representada usando uma matriz de coordenadas cartesianas.

- 		10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]
- -

Sintaxe formal

- -
translate({{cssxref("length-percentage")}} , {{cssxref("length-percentage")}}?)
-
- -

Exemplos

- -

Usando uma conversão de eixo único

- -

HTML

- -
<div>Estático</div>
-<div class="moved">Movido</div>
-<div>Estático</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translate(10px); /* Igual a: translateX(10px) ou translate(10px, 0) */
-  background-color: pink;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}

- -

Combinando a translação do eixo y e do eixo x

- -

HTML

- -
<div>Estático</div>
-<div class="moved">Movido</div>
-<div>Estático</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translate(10px, 10px);
-  background-color: pink;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçõesEstadoComentário
{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Definição inicial
- -

Compatibilidade com navegadores

- -

Verifique o tipo de dado <transform-function> para informações de compatibilidade.

- -

Veja também

- - diff --git a/files/pt-br/web/css/transform-function/translate/index.html b/files/pt-br/web/css/transform-function/translate/index.html new file mode 100644 index 0000000000..8dd01bc26a --- /dev/null +++ b/files/pt-br/web/css/transform-function/translate/index.html @@ -0,0 +1,153 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate +tags: + - CSS + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/translate() +original_slug: Web/CSS/transform-function/translate() +--- +
{{CSSRef}}
+ +

A função CSS translate() reposiciona um elemento na direção horizontal e/ou vertical. O seu resultado é um tipo de dado {{cssxref("<transform-function>")}}.

+ +

+ +

Esta transformação é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto o elemento se move em cada direção.

+ +

Sintaxe

+ +
/* Valores <length-percentage> únicos */
+transform: translate(200px);
+transform: translate(50%);
+
+/* Valores <length-percentage> duplos */
+transform: translate(100px, 200px);
+transform: translate(100px, 50%);
+transform: translate(30%, 200px);
+transform: translate(30%, 50%);
+
+ +

Valores

+ +
+
Valores <length-percentage> únicos
+
Este valor é um {{cssxref("length")}} ou {{cssxref("percentage")}} representando a abcissa (horizontal, coordenada x) do vetor de translação. A ordenada (vertical, coordenada y) do vetor de translação será definida como 0. Por exemplo, translate(2) é equivalente a translate(2, 0). Um valor percentual refere-se à largura da caixa de referência definida pela propriedade {{cssxref("transform-box")}}.
+
Valores <length-percentage> duplos
+
Este valor descreve dois {{cssxref("length")}} ou valores {{cssxref("percentage")}} representando tanto a abcissa (coordenada x) quanto a ordenada (coordenada y) do vetor de translação. Uma porcentagem como primeiro valor refere-se à largura, como segunda parte da altura da caixa de referência definida pela propedade {{cssxref("transform-box")}}.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Coordenadas homogêneas emℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
+

Uma translação não é uma transformação linear em ℝ2 e não pode ser representada usando uma matriz de coordenadas cartesianas.

+ 		10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]
+ +

Sintaxe formal

+ +
translate({{cssxref("length-percentage")}} , {{cssxref("length-percentage")}}?)
+
+ +

Exemplos

+ +

Usando uma conversão de eixo único

+ +

HTML

+ +
<div>Estático</div>
+<div class="moved">Movido</div>
+<div>Estático</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px); /* Igual a: translateX(10px) ou translate(10px, 0) */
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}

+ +

Combinando a translação do eixo y e do eixo x

+ +

HTML

+ +
<div>Estático</div>
+<div class="moved">Movido</div>
+<div>Estático</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px, 10px);
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesEstadoComentário
{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Definição inicial
+ +

Compatibilidade com navegadores

+ +

Verifique o tipo de dado <transform-function> para informações de compatibilidade.

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/var()/index.html b/files/pt-br/web/css/var()/index.html deleted file mode 100644 index 1d7ba91663..0000000000 --- a/files/pt-br/web/css/var()/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: var() -slug: Web/CSS/var() -translation_of: Web/CSS/var() ---- -
{{CSSRef}}
- -

A função CSS  var() pode ser usada para inserir o valor de uma custom property (propriedade personalizada) substituindo qualquer parte do valor de outra propriedade.

- -
var(--header-color, blue);
- -

A função var() não pode ser usada em nomes de propriedades, seletores ou qualquer outra coisa além de valores de propriedades. (Isso geralmente produz sintaxe inválida, ou então um valor cujo significado não tem conexão com a variável.)

- -

Sintaxe

- -

O primeiro argumento da função é o nome da propriedade personalizada a ser substituída. O segundo argumento opcional da função serve como valor alternativo. Se a propriedade personalizada referenciada pelo primeiro argumento for inválida, a função usará o segundo valor.

- -{{csssyntax}} - -
-

Nota: A sintaxe do argumento alternativo, assim como as propriedades personalizadas, permite o uso de vírgulas. Por exemplo, var(--foo, red, blue) define como argumento alternativo red, blue; isto é, qualquer coisa entre a primeira vírgula e o fim da função é considerado como valor do como argumento alternativo.

-
- -

Valores

- -
-
<custom-property-name>
-
O nome da propriedade personalizada referenciada é representada por um identificador que começa com dois traços. As propriedades personalizadas são exclusivamente para uso por autores e usuários; O CSS nunca lhes dará um significado além do que é apresentado aqui.
-
<declaration-value>
-
O valor do argumento alternativo é usado caso a propriedade personalizada seja inválida no contexto utilizado. Este valor pode conter qualquer caractere, exceto alguns caracteres com significado especial como novas linhas, colchetes de fechamento perdidos, ex.), ], ou }, ponto e vírgula de primeiro nível, ou sinais de exclamação.
-
- -

Exemplos

- -
:root {
-  --main-bg-color: pink;
-}
-
-body {
-  background-color: var(--main-bg-color);
-}
-
- -
/* Argumento alternativo */
-/* No estilo de componente: */
-.component .header {
-  color: var(--header-color, blue);
-}
-
-.component .text {
-  color: var(--text-color, black);
-}
-
-/* No estilo de grandes aplicações: */
-.component {
-  --text-color: #080; /* header-color não está definido e, desse modo, permanece azul, o valor do argumento alternativo */
-}
-
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Definição inicial
- -

Compatibilidade com navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
RecursoChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico48[1]
- 49		15063[2]{{CompatGeckoDesktop("29")}}[3]
- {{CompatGeckoDesktop("31")}}		{{CompatNo}}369.3[4]
-
- -
- - - - - - - - - - - - - - - - - - - -
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico50{{CompatGeckoDesktop("29")}}{{CompatNo}}379.3[3]
-
- -

[1] No Chrome 48 este recurso é habilitado na configuração "Experimental Web Platform features" em chrome://flags.

- -

[2] Veja Edge Platform Status e 15063 Build Release Notes (2017-03-20).

- -

[3] Esse recurso é implementado com base na preferência layout.css.variables.enabled, cujo padrão é false e usando a antiga sintaxe var-variablename no Gecko 29. A partir do Gecko 31 esta preferência é habiliitada por padrão e a nova --variablename sintaxe é utilizada. A partir do Gecko 55, a preferência layout.css.variables.enabled foi removida completamente, assim o recurso está habilitado permanentemente e não pode ser desabilitado.

- -

[4] Veja {{webkitbug(19660)}}.

- -

Veja também

- - diff --git a/files/pt-br/web/css/var/index.html b/files/pt-br/web/css/var/index.html new file mode 100644 index 0000000000..5334f20671 --- /dev/null +++ b/files/pt-br/web/css/var/index.html @@ -0,0 +1,146 @@ +--- +title: var() +slug: Web/CSS/var +translation_of: Web/CSS/var() +original_slug: Web/CSS/var() +--- +
{{CSSRef}}
+ +

A função CSS  var() pode ser usada para inserir o valor de uma custom property (propriedade personalizada) substituindo qualquer parte do valor de outra propriedade.

+ +
var(--header-color, blue);
+ +

A função var() não pode ser usada em nomes de propriedades, seletores ou qualquer outra coisa além de valores de propriedades. (Isso geralmente produz sintaxe inválida, ou então um valor cujo significado não tem conexão com a variável.)

+ +

Sintaxe

+ +

O primeiro argumento da função é o nome da propriedade personalizada a ser substituída. O segundo argumento opcional da função serve como valor alternativo. Se a propriedade personalizada referenciada pelo primeiro argumento for inválida, a função usará o segundo valor.

+ +{{csssyntax}} + +
+

Nota: A sintaxe do argumento alternativo, assim como as propriedades personalizadas, permite o uso de vírgulas. Por exemplo, var(--foo, red, blue) define como argumento alternativo red, blue; isto é, qualquer coisa entre a primeira vírgula e o fim da função é considerado como valor do como argumento alternativo.

+
+ +

Valores

+ +
+
<custom-property-name>
+
O nome da propriedade personalizada referenciada é representada por um identificador que começa com dois traços. As propriedades personalizadas são exclusivamente para uso por autores e usuários; O CSS nunca lhes dará um significado além do que é apresentado aqui.
+
<declaration-value>
+
O valor do argumento alternativo é usado caso a propriedade personalizada seja inválida no contexto utilizado. Este valor pode conter qualquer caractere, exceto alguns caracteres com significado especial como novas linhas, colchetes de fechamento perdidos, ex.), ], ou }, ponto e vírgula de primeiro nível, ou sinais de exclamação.
+
+ +

Exemplos

+ +
:root {
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+
+ +
/* Argumento alternativo */
+/* No estilo de componente: */
+.component .header {
+  color: var(--header-color, blue);
+}
+
+.component .text {
+  color: var(--text-color, black);
+}
+
+/* No estilo de grandes aplicações: */
+.component {
+  --text-color: #080; /* header-color não está definido e, desse modo, permanece azul, o valor do argumento alternativo */
+}
+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Definição inicial
+ +

Compatibilidade com navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
RecursoChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico48[1]
+ 49		15063[2]{{CompatGeckoDesktop("29")}}[3]
+ {{CompatGeckoDesktop("31")}}		{{CompatNo}}369.3[4]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico50{{CompatGeckoDesktop("29")}}{{CompatNo}}379.3[3]
+
+ +

[1] No Chrome 48 este recurso é habilitado na configuração "Experimental Web Platform features" em chrome://flags.

+ +

[2] Veja Edge Platform Status e 15063 Build Release Notes (2017-03-20).

+ +

[3] Esse recurso é implementado com base na preferência layout.css.variables.enabled, cujo padrão é false e usando a antiga sintaxe var-variablename no Gecko 29. A partir do Gecko 31 esta preferência é habiliitada por padrão e a nova --variablename sintaxe é utilizada. A partir do Gecko 55, a preferência layout.css.variables.enabled foi removida completamente, assim o recurso está habilitado permanentemente e não pode ser desabilitado.

+ +

[4] Veja {{webkitbug(19660)}}.

+ +

Veja também

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