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/es/web/css/attr()/index.html | 182 ------------ files/es/web/css/attr/index.html | 183 ++++++++++++ files/es/web/css/calc()/index.html | 133 --------- files/es/web/css/calc/index.html | 134 +++++++++ files/es/web/css/env()/index.html | 27 -- files/es/web/css/env/index.html | 28 ++ files/es/web/css/filter-function/blur()/index.html | 40 --- files/es/web/css/filter-function/blur/index.html | 41 +++ .../css/filter-function/brightness()/index.html | 45 --- .../web/css/filter-function/brightness/index.html | 46 +++ files/es/web/css/min()/index.html | 120 -------- files/es/web/css/min/index.html | 121 ++++++++ files/es/web/css/minmax()/index.html | 214 -------------- files/es/web/css/minmax/index.html | 215 ++++++++++++++ files/es/web/css/repeat()/index.html | 147 ---------- files/es/web/css/repeat/index.html | 148 ++++++++++ .../web/css/transform-function/rotate()/index.html | 79 ----- .../web/css/transform-function/rotate/index.html | 80 +++++ .../web/css/transform-function/rotate3d()/index.md | 320 -------------------- .../web/css/transform-function/rotate3d/index.md | 321 +++++++++++++++++++++ .../web/css/transform-function/scale()/index.html | 122 -------- .../es/web/css/transform-function/scale/index.html | 123 ++++++++ .../css/transform-function/translate()/index.html | 146 ---------- .../css/transform-function/translate/index.html | 147 ++++++++++ .../css/transform-function/translatey()/index.html | 117 -------- .../css/transform-function/translatey/index.html | 118 ++++++++ .../css/transform-function/translatez()/index.html | 126 -------- .../css/transform-function/translatez/index.html | 127 ++++++++ files/es/web/css/url()/index.html | 34 --- files/es/web/css/url/index.html | 34 +++ files/es/web/css/var()/index.html | 79 ----- files/es/web/css/var/index.html | 80 +++++ 32 files changed, 1946 insertions(+), 1931 deletions(-) delete mode 100644 files/es/web/css/attr()/index.html create mode 100644 files/es/web/css/attr/index.html delete mode 100644 files/es/web/css/calc()/index.html create mode 100644 files/es/web/css/calc/index.html delete mode 100644 files/es/web/css/env()/index.html create mode 100644 files/es/web/css/env/index.html delete mode 100644 files/es/web/css/filter-function/blur()/index.html create mode 100644 files/es/web/css/filter-function/blur/index.html delete mode 100644 files/es/web/css/filter-function/brightness()/index.html create mode 100644 files/es/web/css/filter-function/brightness/index.html delete mode 100644 files/es/web/css/min()/index.html create mode 100644 files/es/web/css/min/index.html delete mode 100644 files/es/web/css/minmax()/index.html create mode 100644 files/es/web/css/minmax/index.html delete mode 100644 files/es/web/css/repeat()/index.html create mode 100644 files/es/web/css/repeat/index.html delete mode 100644 files/es/web/css/transform-function/rotate()/index.html create mode 100644 files/es/web/css/transform-function/rotate/index.html delete mode 100644 files/es/web/css/transform-function/rotate3d()/index.md create mode 100644 files/es/web/css/transform-function/rotate3d/index.md delete mode 100644 files/es/web/css/transform-function/scale()/index.html create mode 100644 files/es/web/css/transform-function/scale/index.html delete mode 100644 files/es/web/css/transform-function/translate()/index.html create mode 100644 files/es/web/css/transform-function/translate/index.html delete mode 100644 files/es/web/css/transform-function/translatey()/index.html create mode 100644 files/es/web/css/transform-function/translatey/index.html delete mode 100644 files/es/web/css/transform-function/translatez()/index.html create mode 100644 files/es/web/css/transform-function/translatez/index.html delete mode 100644 files/es/web/css/url()/index.html create mode 100644 files/es/web/css/url/index.html delete mode 100644 files/es/web/css/var()/index.html create mode 100644 files/es/web/css/var/index.html (limited to 'files/es/web') diff --git a/files/es/web/css/attr()/index.html b/files/es/web/css/attr()/index.html deleted file mode 100644 index d47f8e6b88..0000000000 --- a/files/es/web/css/attr()/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: attr -slug: Web/CSS/attr() -translation_of: Web/CSS/attr() ---- -

{{ CSSRef() }}

- -

Resumen

- -

La función attr() de CSS se usa para recuperar el valor de un atributo del elemento seleccionado y usarlo en la hoja de estilos. Se puede usar también en un pseudo-elemento y, en este caso, el valor del atributo en el elemento originado del pseudo-elemento es devuelto.

- -

La función attr() de CSS se puede usar con cualquier propiedad de CSS. {{ experimental_inline() }}

- -

Sintaxis

- -
Sintaxis formal: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
-
- -

Valores

- -
-
attribute-name
-
Es el nombre de un atributo en el elemento HTML al que se hace referencia en el CSS. Soporte para otros atributos a parte de {{ cssxref("content") }} es {{ experimental_inline() }}.
-
<type-or-unit>
-
Es una palabra clave que representa o el tipo del valor del atributo, o su unidad, pues en HTML algunos atributos tienen unidades implícitas. Si el uso de <type-or-unit> como valor del atributo especificado no es válido, la expresión attr() también será no válida. Si se omite, el valor por defecto es string. La lista de valores válidos son: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeywordAssociated typeCommentDefault value
string{{cssxref("<string>")}}El valor del atributo es tratado como una {{cssxref("<string>")}} de CSS. No se reparsea, y en este caso particular los caracteres son usados tal y como son en vez de convertirlos en diferentes caracteres de CSS.Cadena vacía
color {{ experimental_inline() }}{{cssxref("<color>")}}El valor del atributo es tratado como hash (3- or 6-value hash) o a una palabra clave. Debe ser un valor válido de una {{cssxref("<string>")}} de CSS.
- Los espacios iniciales y finales son eliminados.		currentColor
url {{ experimental_inline() }}{{ cssxref("<uri>") }}El valor del atributo es tratado como una cadena que se usa en una función url() de CSS.
- URLs relativas se resuelven con respecto al documento original, no respecto a la hoja de estilos. Los espacios iniciales y finales son eliminados.		La url about:invalid que apunta a un documento inexistente con una condición de error genérico.
integer {{ experimental_inline() }}{{cssxref("<integer>")}}El valor del atributo es tratado como un {{cssxref("<integer>")}} CSS. Si no es válido, si no es un entero o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.
- Los espacios iniciales y finales son eliminados.		0, or, if 0 is not a valid value for the property, the property's minimum value.
number {{ experimental_inline() }}{{cssxref("<number>")}}El valor del atributo es tratado como {{cssxref("<number>")}}. Si no es válido, si no es un número o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.
- Los espacios iniciales y finales son eliminados.		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>
-
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>.
-
- -

Examples

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

Result

- -

{{ EmbedLiveSample("Examples", '100%', '80') }}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#attr', '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_inline() }} 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>")}}
- -

Browser compatibility

- -{{Compat("css.types.attr")}} diff --git a/files/es/web/css/attr/index.html b/files/es/web/css/attr/index.html new file mode 100644 index 0000000000..5efb73b796 --- /dev/null +++ b/files/es/web/css/attr/index.html @@ -0,0 +1,183 @@ +--- +title: attr +slug: Web/CSS/attr +translation_of: Web/CSS/attr() +original_slug: Web/CSS/attr() +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La función attr() de CSS se usa para recuperar el valor de un atributo del elemento seleccionado y usarlo en la hoja de estilos. Se puede usar también en un pseudo-elemento y, en este caso, el valor del atributo en el elemento originado del pseudo-elemento es devuelto.

+ +

La función attr() de CSS se puede usar con cualquier propiedad de CSS. {{ experimental_inline() }}

+ +

Sintaxis

+ +
Sintaxis formal: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
+
+ +

Valores

+ +
+
attribute-name
+
Es el nombre de un atributo en el elemento HTML al que se hace referencia en el CSS. Soporte para otros atributos a parte de {{ cssxref("content") }} es {{ experimental_inline() }}.
+
<type-or-unit>
+
Es una palabra clave que representa o el tipo del valor del atributo, o su unidad, pues en HTML algunos atributos tienen unidades implícitas. Si el uso de <type-or-unit> como valor del atributo especificado no es válido, la expresión attr() también será no válida. Si se omite, el valor por defecto es string. La lista de valores válidos son: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeywordAssociated typeCommentDefault value
string{{cssxref("<string>")}}El valor del atributo es tratado como una {{cssxref("<string>")}} de CSS. No se reparsea, y en este caso particular los caracteres son usados tal y como son en vez de convertirlos en diferentes caracteres de CSS.Cadena vacía
color {{ experimental_inline() }}{{cssxref("<color>")}}El valor del atributo es tratado como hash (3- or 6-value hash) o a una palabra clave. Debe ser un valor válido de una {{cssxref("<string>")}} de CSS.
+ Los espacios iniciales y finales son eliminados.		currentColor
url {{ experimental_inline() }}{{ cssxref("<uri>") }}El valor del atributo es tratado como una cadena que se usa en una función url() de CSS.
+ URLs relativas se resuelven con respecto al documento original, no respecto a la hoja de estilos. Los espacios iniciales y finales son eliminados.		La url about:invalid que apunta a un documento inexistente con una condición de error genérico.
integer {{ experimental_inline() }}{{cssxref("<integer>")}}El valor del atributo es tratado como un {{cssxref("<integer>")}} CSS. Si no es válido, si no es un entero o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.
+ Los espacios iniciales y finales son eliminados.		0, or, if 0 is not a valid value for the property, the property's minimum value.
number {{ experimental_inline() }}{{cssxref("<number>")}}El valor del atributo es tratado como {{cssxref("<number>")}}. Si no es válido, si no es un número o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.
+ Los espacios iniciales y finales son eliminados.		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>
+
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>.
+
+ +

Examples

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

Result

+ +

{{ EmbedLiveSample("Examples", '100%', '80') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#attr', '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_inline() }} 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>")}}
+ +

Browser compatibility

+ +{{Compat("css.types.attr")}} diff --git a/files/es/web/css/calc()/index.html b/files/es/web/css/calc()/index.html deleted file mode 100644 index c1f2f6c1d4..0000000000 --- a/files/es/web/css/calc()/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: calc -slug: Web/CSS/calc() -translation_of: Web/CSS/calc() ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Sumario

- -

La función CSS calc() puede ser usada en cualquier sitio donde {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, o {{cssxref("<integer>")}} sea requerido. Con calc() puedes realizar cálculos para determinar valores de propiedades CSS.

- -

Es posible anidar llamadas a calc() dentro de otras llamadas calc().

- -

Sintaxis

- -
calc(expresión)
- -

Values

- -
-
expresión
-
Una expresión matemática cuyo resultado es usado como valor para la propiedad sobre la cual se aplica.
-
- -

Expresiones

- -

{{todo("mod,min,max : http://hacks.mozilla.org/2010/06/css3-calc/")}}La expresión puede ser una combinación de los siguientes operadores:

- -
-
+
-
Suma
-
-
-
Resta
-
*
-
Multiplicación. Al menos uno de los argumentos debe ser un {{cssxref("<number>")}}.
-
/
-
División. El divisor debe ser un {{cssxref("<number>")}}.
-
- -

Los operandos en la expresión pueden ser valores tanto positivos como negativos. Puedes usar diferentes unidades para cada valor si lo deseas. Es recomendable el uso de paréntesis para añadir legibilidad a la expresión o para forzar precedencia en las operaciones en caso necesario.

- -
Nota: La división por cero dará lugar a un error generado por el analizador de HTML del navegador.
- -
Nota: las operaciones + y - siempre deben estar separadas de sus operandos mediante espacios en blanco. La expresión calc(50% -8px) será tomada como un operando de porcentaje seguido de otro operando de signo negativo (una expresión inválida, dado que no hay operador en medio), mientras que la expresión calc(50% - 8px) es un porcentaje seguido de una operación de resta.
-Los operadores * y / no requieren espacio en blanco, pero es recomendable añadirlo por consistencia.
- -
-
- -

Ejemplos

- -

Añadir un margen a un objeto en pantalla

- -

calc() hace más fácil añadir márgenes a un objeto en determinadas circunstancias. En este ejemplo, CSS crea un espacio horizontal de color amarillo que llena el ancho de la ventana con un hueco de 40 pixels en ambos lados:

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

{{ EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', '100%', '60') }}

- -

Entradas de formulario que se ajustan automáticamente al ancho de su contenedor

- -

Otro caso de uso para calc() es asegurar que los campos de un formulario llenan el espacio disponible sin pasarse de los límites de su contenedor mientras mantienen el margen apropiado.

- -

Echémosle un vistazo al CSS:

- -
input {
-  padding: 2px;
-  display: block;
-  width: 98%;               /* salvaguarda para navegadores que no reconocen calc() */
-  width: calc(100% - 1em);
-}
-
-#formbox {
-  width: 130px;             /* salvaguarda para navegadores que no reconocen calc() */
-  width: calc(100% / 6);
-  border: 1px solid black;
-  padding: 4px;
-}
-
- -

El formulario usa 1/6 del ancho disponible. Para asegurar que los campos de entrada tienen el tamaño adecuado, usamos  calc() de nuevo para establecer el ancho que deberían tener (el de su contenedor) menos 1em. Para probar esto, usaremos el siguiente HTML:

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

{{ EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '100%', '80') }}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}} 
- -

Compatibilidad en navegadores

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

Ver también

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

Sumario

+ +

La función CSS calc() puede ser usada en cualquier sitio donde {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, o {{cssxref("<integer>")}} sea requerido. Con calc() puedes realizar cálculos para determinar valores de propiedades CSS.

+ +

Es posible anidar llamadas a calc() dentro de otras llamadas calc().

+ +

Sintaxis

+ +
calc(expresión)
+ +

Values

+ +
+
expresión
+
Una expresión matemática cuyo resultado es usado como valor para la propiedad sobre la cual se aplica.
+
+ +

Expresiones

+ +

{{todo("mod,min,max : http://hacks.mozilla.org/2010/06/css3-calc/")}}La expresión puede ser una combinación de los siguientes operadores:

+ +
+
+
+
Suma
+
-
+
Resta
+
*
+
Multiplicación. Al menos uno de los argumentos debe ser un {{cssxref("<number>")}}.
+
/
+
División. El divisor debe ser un {{cssxref("<number>")}}.
+
+ +

Los operandos en la expresión pueden ser valores tanto positivos como negativos. Puedes usar diferentes unidades para cada valor si lo deseas. Es recomendable el uso de paréntesis para añadir legibilidad a la expresión o para forzar precedencia en las operaciones en caso necesario.

+ +
Nota: La división por cero dará lugar a un error generado por el analizador de HTML del navegador.
+ +
Nota: las operaciones + y - siempre deben estar separadas de sus operandos mediante espacios en blanco. La expresión calc(50% -8px) será tomada como un operando de porcentaje seguido de otro operando de signo negativo (una expresión inválida, dado que no hay operador en medio), mientras que la expresión calc(50% - 8px) es un porcentaje seguido de una operación de resta.
+Los operadores * y / no requieren espacio en blanco, pero es recomendable añadirlo por consistencia.
+ +
+
+ +

Ejemplos

+ +

Añadir un margen a un objeto en pantalla

+ +

calc() hace más fácil añadir márgenes a un objeto en determinadas circunstancias. En este ejemplo, CSS crea un espacio horizontal de color amarillo que llena el ancho de la ventana con un hueco de 40 pixels en ambos lados:

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

{{ EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', '100%', '60') }}

+ +

Entradas de formulario que se ajustan automáticamente al ancho de su contenedor

+ +

Otro caso de uso para calc() es asegurar que los campos de un formulario llenan el espacio disponible sin pasarse de los límites de su contenedor mientras mantienen el margen apropiado.

+ +

Echémosle un vistazo al CSS:

+ +
input {
+  padding: 2px;
+  display: block;
+  width: 98%;               /* salvaguarda para navegadores que no reconocen calc() */
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: 130px;             /* salvaguarda para navegadores que no reconocen calc() */
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

El formulario usa 1/6 del ancho disponible. Para asegurar que los campos de entrada tienen el tamaño adecuado, usamos  calc() de nuevo para establecer el ancho que deberían tener (el de su contenedor) menos 1em. Para probar esto, usaremos el siguiente HTML:

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

{{ EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '100%', '80') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}} 
+ +

Compatibilidad en navegadores

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

Ver también

+ + diff --git a/files/es/web/css/env()/index.html b/files/es/web/css/env()/index.html deleted file mode 100644 index 674fa460b3..0000000000 --- a/files/es/web/css/env()/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: env() -slug: Web/CSS/env() -tags: - - CSS - - Experimental - - Función CSS - - Variables CSS - - env - - env() -translation_of: Web/CSS/env() ---- -

La función CSS env() puede ser utilizada para insertar el valor de una variable de entorno, que sea global para un documento en particular, al contrario de una propiedad personalizada. Entonces, la funcion env() puede ser utilizada para remplazar el valor en ubicaciones arbitrarias, de la misma manera que la función var().

- -

La función env() puede ser utilizada en el lugar de cualquier parte de un valor en cualquier propiedad de cualquier elemento, o de cualquier parte de un valor en cualquier descriptor de cualquier regla @, y en varios otros lugares donde los valores CSS están permitidos.

- -

Las Variables de Entorno CSS están actualmente en curso de definición en un borrador de Recomendación: CSS Environment Variables Module Level 1.

- -

Compatibilidad con navegadores

- -
- - -

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

-
- -

 

diff --git a/files/es/web/css/env/index.html b/files/es/web/css/env/index.html new file mode 100644 index 0000000000..a5a4b5518e --- /dev/null +++ b/files/es/web/css/env/index.html @@ -0,0 +1,28 @@ +--- +title: env() +slug: Web/CSS/env +tags: + - CSS + - Experimental + - Función CSS + - Variables CSS + - env + - env() +translation_of: Web/CSS/env() +original_slug: Web/CSS/env() +--- +

La función CSS env() puede ser utilizada para insertar el valor de una variable de entorno, que sea global para un documento en particular, al contrario de una propiedad personalizada. Entonces, la funcion env() puede ser utilizada para remplazar el valor en ubicaciones arbitrarias, de la misma manera que la función var().

+ +

La función env() puede ser utilizada en el lugar de cualquier parte de un valor en cualquier propiedad de cualquier elemento, o de cualquier parte de un valor en cualquier descriptor de cualquier regla @, y en varios otros lugares donde los valores CSS están permitidos.

+ +

Las Variables de Entorno CSS están actualmente en curso de definición en un borrador de Recomendación: CSS Environment Variables Module Level 1.

+ +

Compatibilidad con navegadores

+ +
+ + +

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

+
+ +

 

diff --git a/files/es/web/css/filter-function/blur()/index.html b/files/es/web/css/filter-function/blur()/index.html deleted file mode 100644 index a60e4408eb..0000000000 --- a/files/es/web/css/filter-function/blur()/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: blur() -slug: Web/CSS/filter-function/blur() -tags: - - CSS - - Efectos de Filtro - - Función CSS - - Referencia -translation_of: Web/CSS/filter-function/blur() ---- -
{{cssref}}
- -

La función CSS blur() aplica un desenfoque Gaussiano a la imagen de entrada. El resultado es un {{cssxref("<filter-function>")}}.

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

Sintaxis

- -
blur(radio)
- -

Parámetros

- -
-
radio
-
El radio del desenfoque, especificado como {{cssxref("<length>")}}. Define el valor de la desviación estándar a la función gaussiana, es decir, cuántos píxeles en la pantalla se combinan entre sí; por lo tanto, un valor mayor creará más desenfoque. Un valor de 0 deja la entrada sin cambios. El valor de laguna para la interpolación es 0.
-
- -

Ejemplos

- -
blur(0)        /* Sin efecto */
-blur(8px)      /* Desenfoque con 8px de radio */
-blur(1.17rem)  /* Desenfoque con 1.17rem de radio */
- -

Ver también

- - diff --git a/files/es/web/css/filter-function/blur/index.html b/files/es/web/css/filter-function/blur/index.html new file mode 100644 index 0000000000..c1d0a80431 --- /dev/null +++ b/files/es/web/css/filter-function/blur/index.html @@ -0,0 +1,41 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur +tags: + - CSS + - Efectos de Filtro + - Función CSS + - Referencia +translation_of: Web/CSS/filter-function/blur() +original_slug: Web/CSS/filter-function/blur() +--- +
{{cssref}}
+ +

La función CSS blur() aplica un desenfoque Gaussiano a la imagen de entrada. El resultado es un {{cssxref("<filter-function>")}}.

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

Sintaxis

+ +
blur(radio)
+ +

Parámetros

+ +
+
radio
+
El radio del desenfoque, especificado como {{cssxref("<length>")}}. Define el valor de la desviación estándar a la función gaussiana, es decir, cuántos píxeles en la pantalla se combinan entre sí; por lo tanto, un valor mayor creará más desenfoque. Un valor de 0 deja la entrada sin cambios. El valor de laguna para la interpolación es 0.
+
+ +

Ejemplos

+ +
blur(0)        /* Sin efecto */
+blur(8px)      /* Desenfoque con 8px de radio */
+blur(1.17rem)  /* Desenfoque con 1.17rem de radio */
+ +

Ver también

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

La función brightness() CSS aplica un multiplicador linear a la imagen, haciendo que su apariencia sea más brallante u oscura. Su resultado es un {{cssxref("<filter-function>")}}.

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

Sintaxis

- -
brightness(valor)
- -

Parametros

- -
-
valor
-
El brillo resultante, es definido como un {{cssxref("<number>")}} o un {{cssxref("<percentage>")}}. Un valor debajo del 100% oscurecerá la imagen, como así un valor superior al 100% le dará más brillo. Un valor de 0% dará como resultado una imagen completamente negra, siendo el valor de 100% una imagen sin cambios. El valor de la Interpolación es 1.
-
- -

Ejemplos

- -
brightness(0%)   /* Completamente negro */
-brightness(0.4)  /* 40% de brillo */
-brightness(1)    /* Sin Efecto */
-brightness(200%) /* Doble de Brillo */
- -

Ver también

- - diff --git a/files/es/web/css/filter-function/brightness/index.html b/files/es/web/css/filter-function/brightness/index.html new file mode 100644 index 0000000000..33aa10f07d --- /dev/null +++ b/files/es/web/css/filter-function/brightness/index.html @@ -0,0 +1,46 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness +translation_of: Web/CSS/filter-function/brightness() +original_slug: Web/CSS/filter-function/brightness() +--- +
{{cssref}}
+ +

La función brightness() CSS aplica un multiplicador linear a la imagen, haciendo que su apariencia sea más brallante u oscura. Su resultado es un {{cssxref("<filter-function>")}}.

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

Sintaxis

+ +
brightness(valor)
+ +

Parametros

+ +
+
valor
+
El brillo resultante, es definido como un {{cssxref("<number>")}} o un {{cssxref("<percentage>")}}. Un valor debajo del 100% oscurecerá la imagen, como así un valor superior al 100% le dará más brillo. Un valor de 0% dará como resultado una imagen completamente negra, siendo el valor de 100% una imagen sin cambios. El valor de la Interpolación es 1.
+
+ +

Ejemplos

+ +
brightness(0%)   /* Completamente negro */
+brightness(0.4)  /* 40% de brillo */
+brightness(1)    /* Sin Efecto */
+brightness(200%) /* Doble de Brillo */
+ +

Ver también

+ + diff --git a/files/es/web/css/min()/index.html b/files/es/web/css/min()/index.html deleted file mode 100644 index b81e63bb6f..0000000000 --- a/files/es/web/css/min()/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: min() -slug: Web/CSS/min() -tags: - - CSS - - CSS Function - - CSS Grid - - Calculate - - Compute - - Function - - Layout - - Reference - - min -translation_of: Web/CSS/min() ---- -
{{CSSRef}}
- -

La función CSS min() permite establecer el valor mas pequeño (mas negativo) de una lista de expresiones separadas por coma como el valor de una propiedad CSS. La función min() puede ser usada donde quiera que  {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, o {{CSSxRef("<integer>")}} esté permitido.

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

En el primer ejemplo anterior, el ancho será al menos 200px, pero será menor si el viewport es menor de 400px de ancho (en tal caso 1vw sería 4px, así 50vw sería 200px). En otras palabras, el ancho máximo es 200px. Piensa en el valor de  min() como el máximo valor que una propiedad puede tener.

- -

Sintaxis

- -

La funcion min() toma uno o mas expresiones separadas por coma como sus parametros, y usa el valor mas pequeño de esas expresiones como su valor.

- -

Las expresiones pueden ser expresiones matemáticas (usando operadores aritmeticos), valores literales, u otras expresiones, tales como {{CSSxRef("attr", "attr()")}}, que se evaluan a un tipo de argumento válido (like {{CSSxRef("<length>")}}).

- -

Se pueden usar distintas unidades de medida para cada valor en la expresion, si se desea. Tambien puede usar parentesis para establecer orden de percedencia si lo requiere.

- - - -

Sintaxis formal

- -{{CSSSyntax}} - -

Probemas de accesibilidad

- -

Cuando use min() para establecer el maximo valor de fonr size, asegurese de que la fuente todavia podra ser escalada por lo menos al 200% para mas legibilidad (sin tecnologia asistente como la funcion de zoom).

- - - -

Ejemplos

- -

Setting a maximum size for a label and input

- -

Otro caso de uso para las funciones CSS es establecer la maxima longitud en controles enformularios responsive: habilitando el ancho de los labels y los inputs para encogerse como lo hace el ancho del formulario

- -

Veamos algo de CSS:

- -
input, label {
-  padding: 2px;
-  box-sizing: border-box;
-  display: inline-block;
-  width: min(40%, 400px);
-  background-color: pink;
-}
-
-form {
-  margin: 4px;
-  border: 1px solid black;
-  padding: 4px;
-}
-
- -

Aquí, el formulario en si mismo, junto con el margen, borde y padding, será de 100% del ancho de su padre. Declaramos el input y el label para que sean menores ente el 40% del ancho del formulario hasta el padding o de 400px, el que sea menor. En otras palabras, lo mas ancho que el label y el input pueden ser es de 400px. Lo mas estrecho que serán es 40% del ancho del formulario, el cual en pantallas de relojes inteligentes es muy pequeño.

- -
<form>
-  <label>Escribe algo:</label>
-  <input type="text">
-</form>
-
- -

{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS4 Values", "#calc-notation", "min()")}}{{Spec2("CSS4 Values")}}Definición inicial.
- -

Compatibilidad con navegadores

- - - -

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

- -

Ver también

- - diff --git a/files/es/web/css/min/index.html b/files/es/web/css/min/index.html new file mode 100644 index 0000000000..0791bd2590 --- /dev/null +++ b/files/es/web/css/min/index.html @@ -0,0 +1,121 @@ +--- +title: min() +slug: Web/CSS/min +tags: + - CSS + - CSS Function + - CSS Grid + - Calculate + - Compute + - Function + - Layout + - Reference + - min +translation_of: Web/CSS/min() +original_slug: Web/CSS/min() +--- +
{{CSSRef}}
+ +

La función CSS min() permite establecer el valor mas pequeño (mas negativo) de una lista de expresiones separadas por coma como el valor de una propiedad CSS. La función min() puede ser usada donde quiera que  {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, o {{CSSxRef("<integer>")}} esté permitido.

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

En el primer ejemplo anterior, el ancho será al menos 200px, pero será menor si el viewport es menor de 400px de ancho (en tal caso 1vw sería 4px, así 50vw sería 200px). En otras palabras, el ancho máximo es 200px. Piensa en el valor de  min() como el máximo valor que una propiedad puede tener.

+ +

Sintaxis

+ +

La funcion min() toma uno o mas expresiones separadas por coma como sus parametros, y usa el valor mas pequeño de esas expresiones como su valor.

+ +

Las expresiones pueden ser expresiones matemáticas (usando operadores aritmeticos), valores literales, u otras expresiones, tales como {{CSSxRef("attr", "attr()")}}, que se evaluan a un tipo de argumento válido (like {{CSSxRef("<length>")}}).

+ +

Se pueden usar distintas unidades de medida para cada valor en la expresion, si se desea. Tambien puede usar parentesis para establecer orden de percedencia si lo requiere.

+ + + +

Sintaxis formal

+ +{{CSSSyntax}} + +

Probemas de accesibilidad

+ +

Cuando use min() para establecer el maximo valor de fonr size, asegurese de que la fuente todavia podra ser escalada por lo menos al 200% para mas legibilidad (sin tecnologia asistente como la funcion de zoom).

+ + + +

Ejemplos

+ +

Setting a maximum size for a label and input

+ +

Otro caso de uso para las funciones CSS es establecer la maxima longitud en controles enformularios responsive: habilitando el ancho de los labels y los inputs para encogerse como lo hace el ancho del formulario

+ +

Veamos algo de CSS:

+ +
input, label {
+  padding: 2px;
+  box-sizing: border-box;
+  display: inline-block;
+  width: min(40%, 400px);
+  background-color: pink;
+}
+
+form {
+  margin: 4px;
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

Aquí, el formulario en si mismo, junto con el margen, borde y padding, será de 100% del ancho de su padre. Declaramos el input y el label para que sean menores ente el 40% del ancho del formulario hasta el padding o de 400px, el que sea menor. En otras palabras, lo mas ancho que el label y el input pueden ser es de 400px. Lo mas estrecho que serán es 40% del ancho del formulario, el cual en pantallas de relojes inteligentes es muy pequeño.

+ +
<form>
+  <label>Escribe algo:</label>
+  <input type="text">
+</form>
+
+ +

{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS4 Values", "#calc-notation", "min()")}}{{Spec2("CSS4 Values")}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/css/minmax()/index.html b/files/es/web/css/minmax()/index.html deleted file mode 100644 index 4b91d4aee7..0000000000 --- a/files/es/web/css/minmax()/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: minmax() -slug: Web/CSS/minmax() -tags: - - CSS - - CSS Grid - - Diseño - - Función CSS - - Referencia - - Rejilla CSS - - Web -translation_of: Web/CSS/minmax() ---- -

La función minmax() en CSS define un rango de tamaño mayor o igual que min y menor o igual que max. Se emplea con rejillas CSS.

- -
/* valores <ancho no-flexible>, <ancho de la banda> */
-minmax(200px, 1fr)
-minmax(400px, 50%)
-minmax(30%, 300px)
-minmax(100px, max-content)
-minmax(min-content, 400px)
-minmax(max-content, auto)
-minmax(auto, 300px)
-minmax(min-content, auto)
-
-/* valores <ancho fijo>, <ancho de la banda> */
-minmax(200px, 1fr)
-minmax(30%, 300px)
-minmax(400px, 50%)
-minmax(50%, min-content)
-minmax(300px, max-content)
-minmax(200px, auto)
-
-/* valores <ancho no-flexible>, <ancho fijo> */
-minmax(400px, 50%)
-minmax(30%, 300px)
-minmax(min-content, 200px)
-minmax(max-content, 200px)
-minmax(auto, 300px)
-
- -

Sintáxis

- -

Una función que toma dos parámetros, min y max.

- -

Cada parámetro puede ser un valor <length>, <percentage>, <flex> o uno de los valores de las palabras clave max-content, min-content o auto.

- -

Si max < min, entonces max es ignorado y se trata a minmax(min,max) como min. Como un máximo, un valor {{cssxref("flex_value","<flex>")}} establece el factor flex de una banda; no es válido como un mínimo.

- -

Valores

- -
-
{{cssxref("<length>")}}
-
Una medida no negativa.
-
{{cssxref("<percentage>")}}
-
Un porcentaje no negativo, relativo al tamaño en línea del contenedor de la rejilla en bandas de columna y el tamaño de bloque del contenedor de rejilla en bandas de fila. Si el tamaño del contenedor de la rejilla depende del tamaño de sus bandas, entonces <percentage> debe ser tratado como auto. El {{glossary("user agent")}} puede ajustar las contribuciones del tamaño implícito de la banda al tamaño del contenedor de rejilla y así incrementar el tamaño final de la banda y así incrementar el tamaño final en la cantidad mínima que resultase al respetar el porcentaje.
-
{{cssxref("<flex>")}}
-
Una dimension no-negativa con la unidad fr especificando el factor flex de la banda. Cada banda de tamaño <flex> toma una parte del espacio disponible en proporción a su factor flex.
-
max-content
-
Representa la mayor contribución max-content de los elementos de rejilla que ocupan la banda.
-
min-content
-
Representa la mayor contribución min-content de los elementos de rejilla que ocupan la banda.
-
auto
-
Como un máximo, idéntico a max-content. Como un mínimo representa el mayor tamaño mínimo (como se especifica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de rejilla que ocupan la banda.
-
- -

Sintáxis formal

- -{{csssyntax}} - -

Propiedades CSS

- -

La función minmax() puede ser usada dentro de: 

- - - -

Ejemplo

- -

CSS

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

HTML

- -
<div id="container">
-  <div>
-    Elemento tan ancho como el contenido,<br/>
-    pero de máximo 300 píxeles.
-  </div>
-  <div>
-    Elemento con un ancho flexible, pero con un mínimo de 200 píxeles.
-  </div>
-  <div>
-    Elemento inflexible de 150 píxeles de ancho.
-  </div>
-</div>
- -

Resultado

- -

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

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}Definición inicial
- -

Compatibilidad de navegadores

- - - -

{{Compat("css.properties.grid-template-columns.minmax")}}

- -

Mira también

- - - - diff --git a/files/es/web/css/minmax/index.html b/files/es/web/css/minmax/index.html new file mode 100644 index 0000000000..58a3701655 --- /dev/null +++ b/files/es/web/css/minmax/index.html @@ -0,0 +1,215 @@ +--- +title: minmax() +slug: Web/CSS/minmax +tags: + - CSS + - CSS Grid + - Diseño + - Función CSS + - Referencia + - Rejilla CSS + - Web +translation_of: Web/CSS/minmax() +original_slug: Web/CSS/minmax() +--- +

La función minmax() en CSS define un rango de tamaño mayor o igual que min y menor o igual que max. Se emplea con rejillas CSS.

+ +
/* valores <ancho no-flexible>, <ancho de la banda> */
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+
+/* valores <ancho fijo>, <ancho de la banda> */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* valores <ancho no-flexible>, <ancho fijo> */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+
+ +

Sintáxis

+ +

Una función que toma dos parámetros, min y max.

+ +

Cada parámetro puede ser un valor <length>, <percentage>, <flex> o uno de los valores de las palabras clave max-content, min-content o auto.

+ +

Si max < min, entonces max es ignorado y se trata a minmax(min,max) como min. Como un máximo, un valor {{cssxref("flex_value","<flex>")}} establece el factor flex de una banda; no es válido como un mínimo.

+ +

Valores

+ +
+
{{cssxref("<length>")}}
+
Una medida no negativa.
+
{{cssxref("<percentage>")}}
+
Un porcentaje no negativo, relativo al tamaño en línea del contenedor de la rejilla en bandas de columna y el tamaño de bloque del contenedor de rejilla en bandas de fila. Si el tamaño del contenedor de la rejilla depende del tamaño de sus bandas, entonces <percentage> debe ser tratado como auto. El {{glossary("user agent")}} puede ajustar las contribuciones del tamaño implícito de la banda al tamaño del contenedor de rejilla y así incrementar el tamaño final de la banda y así incrementar el tamaño final en la cantidad mínima que resultase al respetar el porcentaje.
+
{{cssxref("<flex>")}}
+
Una dimension no-negativa con la unidad fr especificando el factor flex de la banda. Cada banda de tamaño <flex> toma una parte del espacio disponible en proporción a su factor flex.
+
max-content
+
Representa la mayor contribución max-content de los elementos de rejilla que ocupan la banda.
+
min-content
+
Representa la mayor contribución min-content de los elementos de rejilla que ocupan la banda.
+
auto
+
Como un máximo, idéntico a max-content. Como un mínimo representa el mayor tamaño mínimo (como se especifica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de rejilla que ocupan la banda.
+
+ +

Sintáxis formal

+ +{{csssyntax}} + +

Propiedades CSS

+ +

La función minmax() puede ser usada dentro de: 

+ + + +

Ejemplo

+ +

CSS

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

HTML

+ +
<div id="container">
+  <div>
+    Elemento tan ancho como el contenido,<br/>
+    pero de máximo 300 píxeles.
+  </div>
+  <div>
+    Elemento con un ancho flexible, pero con un mínimo de 200 píxeles.
+  </div>
+  <div>
+    Elemento inflexible de 150 píxeles de ancho.
+  </div>
+</div>
+ +

Resultado

+ +

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

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}Definición inicial
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("css.properties.grid-template-columns.minmax")}}

+ +

Mira también

+ + + + diff --git a/files/es/web/css/repeat()/index.html b/files/es/web/css/repeat()/index.html deleted file mode 100644 index 04b53caa45..0000000000 --- a/files/es/web/css/repeat()/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: repeat() -slug: Web/CSS/repeat() -tags: - - CSS - - CSS Grid - - Función CSS - - Layout - - Maquetado - - Referencia - - Web -translation_of: Web/CSS/repeat() ---- -
{{cssref}}
- -

La función CSS repeat() representa un fragmento repetido de la lista de la pista, permitiendo un gran número de columnas o renglones que exhiben un patrón recurrente para ser escrito de una forma más compacta.

- -

Esta función puede ser usada en las propiedades CSS Grid {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.

- -
/* <track-repeat> values */
-repeat(4, 1fr)
-repeat(4, [col-start] 250px [col-end])
-repeat(4, [col-start] 60% [col-end])
-repeat(4, [col-start] 1fr [col-end])
-repeat(4, [col-start] min-content [col-end])
-repeat(4, [col-start] max-content [col-end])
-repeat(4, [col-start] auto [col-end])
-repeat(4, [col-start] minmax(100px, 1fr) [col-end])
-repeat(4, [col-start] fit-content(200px) [col-end])
-repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
-repeat(4, [col-start] min-content [col-middle] max-content [col-end])
-
-/* <auto-repeat> values */
-repeat(auto-fill, 250px)
-repeat(auto-fit, 250px)
-repeat(auto-fill, [col-start] 250px [col-end])
-repeat(auto-fit, [col-start] 250px [col-end])
-repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
-repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
-
-/* <fixed-repeat> values */
-repeat(4, 250px)
-repeat(4, [col-start] 250px [col-end])
-repeat(4, [col-start] 60% [col-end])
-repeat(4, [col-start] minmax(100px, 1fr) [col-end])
-repeat(4, [col-start] fit-content(200px) [col-end])
-repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
-
- -

Síntaxis

- -

Valores

- -
-
{{cssxref("<length>")}}
-
Una longitud no negativa.
-
{{cssxref("<percentage>")}}
-
Un porcentaje no negativo relativo con el tamaño en línea del contenedor de la cuadrícula en las pistas de la cuadrícula de columna, y el tamaño del bloque del contenedor de la cuadrícula en las pistas de la cuadrúcula de la fila. Si el tamaño de la rejilla depende del tamaño de sus pistas, entonces el <percentage> debe ser tratado como auto. El agente de usuario puede ajustar las contribuciones de tamaño intrínseco de la pista al tamaño del contenedor de la rejilla y aumentar el tamaño final de la pista en la cantidad que resultaría en respetar el porcentaje.
-
{{cssxref("<flex>")}}
-
Una dimensión no negativa con la unidad fr especificando el factor flexible de la pista. Cada pista de tamaño <flex> comparte el espacio restante en proporción a su factor flex
-
max-content
-
Representa la contribución mas grande de max-content de los elementos de la cuadrícula ocupando la pista.
-
min-content
-
Representa la contribución más pequeña min-content de los elementos de la cuadrícula ocupando la pista.
-
auto
-
Como un máximo, idéntico a max-content. Como un mínimo representa el mayor tamaño mínimo (como se específica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la pista.
-
auto-fill
-
Si el contenedor de cuadrícula tiene un tamaño definido o máximo en el eje relevante, entonces el número de repeticiones es el mayor entero positivo posible que no hace que la cuadrícula desborde su contenedor de cuadrícula. Tratando cada pista con su función de dimensiones máximo de pista (cada valor se utiliza individualmente para definir grid-template-rows o grid-template-columns), si está definido. De lo contrario, como su función de tamaño mínimo de pista, y teniendo en cuenta la brecha de cuadrícula. Si se desbordara cualquier número de repeticiones, entonces la repetición es 1. De lo contrario, si el contenedor de la cuadrícula tiene un tamaño mínimo definido en el eje relevante, el número de repeticiones es el número entero positivo más pequeño posible que cumple ese requisito mínimo. De lo contrario, la lista de pistas especificada se repite solo una vez.
-
auto-fit
-
-

Se comporta igual que el autocompletado auto-fill, excepto que después de colocar los elementos de la cuadrícula se colapsan las pistas vacías repetidas. Una pista vacía es aquella sin elementos de cuadrícula colocados o que se extienden a través de ella. (Esto puede provocar el colapso de todas las pistas, si están todas vacías).

- -

Una pista colapsada se trata como si tuviera una única función de tamaño de pista fija de 0px, y los canales (gutters) a cada lado de ella colapsan.

- -

Con el fin de encontrar el número de pistas repetidas automáticamente, el agente de usuario distribuye el tamaño de la pista a un valor especificado por el agente de usuario (por ejemplo, 1px), para evitar la división por cero.

-
-
- -

Ejemplo

- -

CSS

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

HTML

- -
<div id="container">
-  <div>
-    Este elemento tiene un ancho de 50 pixels.
-  </div>
-  <div>
-    Elemento con un ancho flexible.
-  </div>
-  <div>
-    Este elemento tiene un ancho de 50 pixels.
-  </div>
-  <div>
-    Elemento con un ancho flexible.
-  </div>
-  <div>
-    Este elemento tiene un ancho de 100 pixels.
-  </div>
-</div>
- -

Resultados

- -

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

- -

Especificaciones

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}{{Spec2("CSS Grid")}}Initial definition
- -

Compatibilidad del navegador

- - - -

{{Compat("css.properties.grid-template-columns.repeat")}}

diff --git a/files/es/web/css/repeat/index.html b/files/es/web/css/repeat/index.html new file mode 100644 index 0000000000..4c63a10c8d --- /dev/null +++ b/files/es/web/css/repeat/index.html @@ -0,0 +1,148 @@ +--- +title: repeat() +slug: Web/CSS/repeat +tags: + - CSS + - CSS Grid + - Función CSS + - Layout + - Maquetado + - Referencia + - Web +translation_of: Web/CSS/repeat() +original_slug: Web/CSS/repeat() +--- +
{{cssref}}
+ +

La función CSS repeat() representa un fragmento repetido de la lista de la pista, permitiendo un gran número de columnas o renglones que exhiben un patrón recurrente para ser escrito de una forma más compacta.

+ +

Esta función puede ser usada en las propiedades CSS Grid {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.

+ +
/* <track-repeat> values */
+repeat(4, 1fr)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] 1fr [col-end])
+repeat(4, [col-start] min-content [col-end])
+repeat(4, [col-start] max-content [col-end])
+repeat(4, [col-start] auto [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
+repeat(4, [col-start] min-content [col-middle] max-content [col-end])
+
+/* <auto-repeat> values */
+repeat(auto-fill, 250px)
+repeat(auto-fit, 250px)
+repeat(auto-fill, [col-start] 250px [col-end])
+repeat(auto-fit, [col-start] 250px [col-end])
+repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
+repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+/* <fixed-repeat> values */
+repeat(4, 250px)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+ +

Síntaxis

+ +

Valores

+ +
+
{{cssxref("<length>")}}
+
Una longitud no negativa.
+
{{cssxref("<percentage>")}}
+
Un porcentaje no negativo relativo con el tamaño en línea del contenedor de la cuadrícula en las pistas de la cuadrícula de columna, y el tamaño del bloque del contenedor de la cuadrícula en las pistas de la cuadrúcula de la fila. Si el tamaño de la rejilla depende del tamaño de sus pistas, entonces el <percentage> debe ser tratado como auto. El agente de usuario puede ajustar las contribuciones de tamaño intrínseco de la pista al tamaño del contenedor de la rejilla y aumentar el tamaño final de la pista en la cantidad que resultaría en respetar el porcentaje.
+
{{cssxref("<flex>")}}
+
Una dimensión no negativa con la unidad fr especificando el factor flexible de la pista. Cada pista de tamaño <flex> comparte el espacio restante en proporción a su factor flex
+
max-content
+
Representa la contribución mas grande de max-content de los elementos de la cuadrícula ocupando la pista.
+
min-content
+
Representa la contribución más pequeña min-content de los elementos de la cuadrícula ocupando la pista.
+
auto
+
Como un máximo, idéntico a max-content. Como un mínimo representa el mayor tamaño mínimo (como se específica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la pista.
+
auto-fill
+
Si el contenedor de cuadrícula tiene un tamaño definido o máximo en el eje relevante, entonces el número de repeticiones es el mayor entero positivo posible que no hace que la cuadrícula desborde su contenedor de cuadrícula. Tratando cada pista con su función de dimensiones máximo de pista (cada valor se utiliza individualmente para definir grid-template-rows o grid-template-columns), si está definido. De lo contrario, como su función de tamaño mínimo de pista, y teniendo en cuenta la brecha de cuadrícula. Si se desbordara cualquier número de repeticiones, entonces la repetición es 1. De lo contrario, si el contenedor de la cuadrícula tiene un tamaño mínimo definido en el eje relevante, el número de repeticiones es el número entero positivo más pequeño posible que cumple ese requisito mínimo. De lo contrario, la lista de pistas especificada se repite solo una vez.
+
auto-fit
+
+

Se comporta igual que el autocompletado auto-fill, excepto que después de colocar los elementos de la cuadrícula se colapsan las pistas vacías repetidas. Una pista vacía es aquella sin elementos de cuadrícula colocados o que se extienden a través de ella. (Esto puede provocar el colapso de todas las pistas, si están todas vacías).

+ +

Una pista colapsada se trata como si tuviera una única función de tamaño de pista fija de 0px, y los canales (gutters) a cada lado de ella colapsan.

+ +

Con el fin de encontrar el número de pistas repetidas automáticamente, el agente de usuario distribuye el tamaño de la pista a un valor especificado por el agente de usuario (por ejemplo, 1px), para evitar la división por cero.

+
+
+ +

Ejemplo

+ +

CSS

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

HTML

+ +
<div id="container">
+  <div>
+    Este elemento tiene un ancho de 50 pixels.
+  </div>
+  <div>
+    Elemento con un ancho flexible.
+  </div>
+  <div>
+    Este elemento tiene un ancho de 50 pixels.
+  </div>
+  <div>
+    Elemento con un ancho flexible.
+  </div>
+  <div>
+    Este elemento tiene un ancho de 100 pixels.
+  </div>
+</div>
+ +

Resultados

+ +

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

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}{{Spec2("CSS Grid")}}Initial definition
+ +

Compatibilidad del navegador

+ + + +

{{Compat("css.properties.grid-template-columns.repeat")}}

diff --git a/files/es/web/css/transform-function/rotate()/index.html b/files/es/web/css/transform-function/rotate()/index.html deleted file mode 100644 index 65c97a27fc..0000000000 --- a/files/es/web/css/transform-function/rotate()/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -tags: - - CSS - - NeedsCompatTable - - Referencia - - Transformaciones CSS -translation_of: Web/CSS/transform-function/rotate() ---- -
{{CSSRef}}
- -

La función CSS rotate()  define una transformación que gira un elemento alrededor de un punto fijo en un plano 2D sin deformarlo.

- -

El punto fijo alrededor del cual gira el elemento, mencionado anteriormente, también se conoce como el origen de transformación. Se establece de manera predeterminada en el centro del elemento, pero se puede personalizar utilizando la propiedad {{ cssxref("transform-origin") }}.

- -

La cantidad de rotación generada por la propiedad rotate() se define mediante un {{cssxref("<angle>")}}. Si es positivo, el movimiento serán en el sentido de las agujas del reloj; si es negativo, en sentido contrario a las agujas. Una rotación de 180° se llama centro de simetría.

- -

- -

Síntaxis

- -
rotate(a)
-
- -

Valores

- -
-
a
-
es un {{ cssxref("<angle>") }}  que representa en ángulo de rotación. Un ángulo positivo representa un rotación en el sentido del reloj y un ángulo negativo representa una rotación en sentido contrario a las agujas del reloj.
-
- - - - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas en ℝ2Coordenadas homgéneas en  ℝℙ2Coordinadas cartesianas en ℝ3Coordenadas homgéneas en ℝℙ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]
- -

Ejemplos

- -

HTML

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

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed{
-  /* idéntico a rotateZ(45deg); */
-  transform: rotate(45deg);
-  background-color: blue;
-}
-
- -

Resultado

- -

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

diff --git a/files/es/web/css/transform-function/rotate/index.html b/files/es/web/css/transform-function/rotate/index.html new file mode 100644 index 0000000000..27d2ba3a43 --- /dev/null +++ b/files/es/web/css/transform-function/rotate/index.html @@ -0,0 +1,80 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate +tags: + - CSS + - NeedsCompatTable + - Referencia + - Transformaciones CSS +translation_of: Web/CSS/transform-function/rotate() +original_slug: Web/CSS/transform-function/rotate() +--- +
{{CSSRef}}
+ +

La función CSS rotate()  define una transformación que gira un elemento alrededor de un punto fijo en un plano 2D sin deformarlo.

+ +

El punto fijo alrededor del cual gira el elemento, mencionado anteriormente, también se conoce como el origen de transformación. Se establece de manera predeterminada en el centro del elemento, pero se puede personalizar utilizando la propiedad {{ cssxref("transform-origin") }}.

+ +

La cantidad de rotación generada por la propiedad rotate() se define mediante un {{cssxref("<angle>")}}. Si es positivo, el movimiento serán en el sentido de las agujas del reloj; si es negativo, en sentido contrario a las agujas. Una rotación de 180° se llama centro de simetría.

+ +

+ +

Síntaxis

+ +
rotate(a)
+
+ +

Valores

+ +
+
a
+
es un {{ cssxref("<angle>") }}  que representa en ángulo de rotación. Un ángulo positivo representa un rotación en el sentido del reloj y un ángulo negativo representa una rotación en sentido contrario a las agujas del reloj.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas en ℝ2Coordenadas homgéneas en  ℝℙ2Coordinadas cartesianas en ℝ3Coordenadas homgéneas en ℝℙ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]
+ +

Ejemplos

+ +

HTML

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

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed{
+  /* idéntico a rotateZ(45deg); */
+  transform: rotate(45deg);
+  background-color: blue;
+}
+
+ +

Resultado

+ +

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

diff --git a/files/es/web/css/transform-function/rotate3d()/index.md b/files/es/web/css/transform-function/rotate3d()/index.md deleted file mode 100644 index c1c0ee7975..0000000000 --- a/files/es/web/css/transform-function/rotate3d()/index.md +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: rotate3d() -slug: Web/CSS/transform-function/rotate3d() -translation_of: Web/CSS/transform-function/rotate3d() -browser-compat: css.types.transform-function.rotate3d ---- -{{CSSRef}} - -La [función](/es/docs/Web/CSS/CSS_Functions) **`rotate3d()`** de [CSS](/es/docs/Web/CSS) define una transformación que mueve el elemento alrededor de un eje fijo sin deformarlo. Su resultado es un tipo de dato {{cssxref("<transform-function>")}}. - -{{EmbedInteractiveExample("pages/css/rotate3d.html")}} - -En el espacio tridimencional, las rotaciones tienen tres grados de libertad, juntos describen un ángulo de rotación. El ángulo de rotación está definido por un vector \[x, y, z] y pasa por el origen (como lo define la propiedad {{cssxref("transform-origin")}}. Si el vector no está _normalizado_ (ej. si la suma del cuadrado de sus tres coordenadas no es igual a 1), el {{glossary("user agent")}} lo normalizará internamente. Un vector no-normalizable, como es el caso del vector nulo, \[0, 0, 0], causará que la rotación no sea aplicada, pero sin que esto invalide la propiedad CSS en su totalidad. - -> **Nota:** Contrario a las rotaciones en el plano 2D, la composición de las rotaciones 3D normalmente no es conmutativa; lo que significa que el orden en el que dichas rotaciones son aplicadas impacta al resultado. - -## Sintaxis - -La cantidad de rotación creada por `rotate3d()` está especificada por tres {{cssxref("<number>")}}s y un {{cssxref("<angle>")}}. El `` representa las coordenadas _x_, _y_ y _z_ del vector, denotando los ejes de la rotación. El `` representa el angulo de rotación; si es positivo el movimiento será en el sentido de las agujas del reloj; si es negativo será en el sentido opuesto. - -```css -rotate3d(x, y, z, a) -``` - -## Valores - -- `x` - - : Es un {{cssxref("<number>")}} que describe la coordenada-x del vector y denota el eje de rotación. -- `y` - - : Es un {{cssxref("<number>")}} que describe la coordenada-y del vector y denota el eje de rotación. -- `z` - - : Es un {{cssxref("<number>")}} que describe la coordenada-z del vector y denota el eje de rotación. -- `a` - - : Es un {{ cssxref("<angle>") }} que representa el ángulo de rotación. Un valor positivo indica una rotación en el sentido de las agujas del reloj, un valor negativo indica una rotación en sentido contrario a las agujas del reloj. - - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas en ℝ^2 - Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano. -
Coordenadas homogéneas en ℝℙ^2
Coordenadas cartesianas en ℝ^3 - - (1 - + - ( - 1 - - - cos - ( - a - ) - ) - ( - x - 2 - - 1 - ) z - · - sin - ( - a - ) - + - x - y - ( - 1 - - - cos - ( - a - ) - ) - - y - · - sin - ( - a - ) - + - x - z - · - ( - 1 - - - cos - ( - a - ) - ) - - - z - · - sin - ( - a - ) - + - x - y - · - ( - 1 - - - cos - ( - a - ) - ) 1 - + - ( - 1 - - - cos - ( - a - ) - ) - ( - y2 - - - 1 - ) x - · - sin - ( - a - ) - + - y - z - · - ( - 1 - - - cos - ( - a - ) - ) - y - sin - ( - a - ) - + - xz - ( - 1 - - - cos - ( - a - ) - ) - - x - sin - ( - a - ) - + - yz - ( - 1 - - - cos - ( - a - ) - ) 1 - + - ( - 1 - - - cos - ( - a - ) - ) - ( - z2 - - - 1 - ) t 0 0 0 1) -
Coordenadas homogéneas en ℝℙ^3 - -
- -## Ejemplos - -### Rotar sobre el eje-Y - -#### HTML - -```html -
Normal
-
Rotado
-``` - -#### CSS - -```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)}} - -### Rotar sobre un eje personalizado - -#### HTML - -```html -
Normal
-
Rotado
-``` - -#### CSS - -```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)}} - -## Especificaciones - -{{Specifications}} - -## Compatibilidad con navegadores - -{{Compat}} - -## Véase también - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/es/web/css/transform-function/rotate3d/index.md b/files/es/web/css/transform-function/rotate3d/index.md new file mode 100644 index 0000000000..92edec1d62 --- /dev/null +++ b/files/es/web/css/transform-function/rotate3d/index.md @@ -0,0 +1,321 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d +translation_of: Web/CSS/transform-function/rotate3d() +original_slug: Web/CSS/transform-function/rotate3d() +browser-compat: css.types.transform-function.rotate3d +--- +{{CSSRef}} + +La [función](/es/docs/Web/CSS/CSS_Functions) **`rotate3d()`** de [CSS](/es/docs/Web/CSS) define una transformación que mueve el elemento alrededor de un eje fijo sin deformarlo. Su resultado es un tipo de dato {{cssxref("<transform-function>")}}. + +{{EmbedInteractiveExample("pages/css/rotate3d.html")}} + +En el espacio tridimencional, las rotaciones tienen tres grados de libertad, juntos describen un ángulo de rotación. El ángulo de rotación está definido por un vector \[x, y, z] y pasa por el origen (como lo define la propiedad {{cssxref("transform-origin")}}. Si el vector no está _normalizado_ (ej. si la suma del cuadrado de sus tres coordenadas no es igual a 1), el {{glossary("user agent")}} lo normalizará internamente. Un vector no-normalizable, como es el caso del vector nulo, \[0, 0, 0], causará que la rotación no sea aplicada, pero sin que esto invalide la propiedad CSS en su totalidad. + +> **Nota:** Contrario a las rotaciones en el plano 2D, la composición de las rotaciones 3D normalmente no es conmutativa; lo que significa que el orden en el que dichas rotaciones son aplicadas impacta al resultado. + +## Sintaxis + +La cantidad de rotación creada por `rotate3d()` está especificada por tres {{cssxref("<number>")}}s y un {{cssxref("<angle>")}}. El `` representa las coordenadas _x_, _y_ y _z_ del vector, denotando los ejes de la rotación. El `` representa el angulo de rotación; si es positivo el movimiento será en el sentido de las agujas del reloj; si es negativo será en el sentido opuesto. + +```css +rotate3d(x, y, z, a) +``` + +## Valores + +- `x` + - : Es un {{cssxref("<number>")}} que describe la coordenada-x del vector y denota el eje de rotación. +- `y` + - : Es un {{cssxref("<number>")}} que describe la coordenada-y del vector y denota el eje de rotación. +- `z` + - : Es un {{cssxref("<number>")}} que describe la coordenada-z del vector y denota el eje de rotación. +- `a` + - : Es un {{ cssxref("<angle>") }} que representa el ángulo de rotación. Un valor positivo indica una rotación en el sentido de las agujas del reloj, un valor negativo indica una rotación en sentido contrario a las agujas del reloj. + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas en ℝ^2 + Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano. +
Coordenadas homogéneas en ℝℙ^2
Coordenadas cartesianas en ℝ^3 + + (1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + x + 2 - + 1 + ) z + · + sin + ( + a + ) + + + x + y + ( + 1 + - + cos + ( + a + ) + ) - + y + · + sin + ( + a + ) + + + x + z + · + ( + 1 + - + cos + ( + a + ) + ) + - + z + · + sin + ( + a + ) + + + x + y + · + ( + 1 + - + cos + ( + a + ) + ) 1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + y2 + - + 1 + ) x + · + sin + ( + a + ) + + + y + z + · + ( + 1 + - + cos + ( + a + ) + ) + y + sin + ( + a + ) + + + xz + ( + 1 + - + cos + ( + a + ) + ) - + x + sin + ( + a + ) + + + yz + ( + 1 + - + cos + ( + a + ) + ) 1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + z2 + - + 1 + ) t 0 0 0 1) +
Coordenadas homogéneas en ℝℙ^3 + +
+ +## Ejemplos + +### Rotar sobre el eje-Y + +#### HTML + +```html +
Normal
+
Rotado
+``` + +#### CSS + +```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)}} + +### Rotar sobre un eje personalizado + +#### HTML + +```html +
Normal
+
Rotado
+``` + +#### CSS + +```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)}} + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con navegadores + +{{Compat}} + +## Véase también + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/es/web/css/transform-function/scale()/index.html b/files/es/web/css/transform-function/scale()/index.html deleted file mode 100644 index 81a0e24714..0000000000 --- a/files/es/web/css/transform-function/scale()/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: scale() -slug: Web/CSS/transform-function/scale() -tags: - - CSS Scale - - scale() - - scaleX() - - scaleY() -translation_of: Web/CSS/transform-function/scale() ---- -
{{CSSRef}}
- -

La función CSS scale() define una transformación que modifica el tamaño de un elemento en el plano 2D. Debido a que la cantidad de escalado está definida por un vector, puede cambiar el tamaño de la dimensiones horizontal y vertical a diferentes escalas. Su resultado es un dato tipo {cssxref("<transform-function>")}} .

- -

- -

Esta transformación de escalado se caracteriza por un vector bidimensional. Sus coordenadas definen cuanto escalamiento se realiza en cada dirección. Sí ambas coordenadas son iguales, la escala es uniforme (isotrópica) y la relación de aspecto del elemento se conserva (esta es una transformación homotética).

- -

Cuando un valor de coordenadas está fuera del rango [-1, 1], el elemento crece a lo largo de esa dimensión; cuando está dentro, se encoge. Si es negativo, el resultado es un reflejo de punto en esa dimensión. Un valor de 1 no tiene ningún efecto.

- -
La función scale() solo se escala en 2d. Para escalar en 3D se utiliza la función scale3d() en su lugar.
- -

Sintaxis

- -

La función scale () se especifica con uno o dos valores, que representan la cantidad de escala que se aplicará en cada dirección.

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

Valores

- -
-
sx
-
Es un {{cssxref("<número>")}} representando la abscisa del vector de escala.
-
sy
-
Es un {{cssxref("<número>")}} representado la ordenada de la escala del vector.  Si no está presente, su valor por defecto es sx, llevando a una escala uniforme preservando la curva del elemento.
-
- - - - - - - - - - - - - - - - - - - - - -
Coordenadas Cartesianas en ℝ2Coordenadas Homogéneas en ℝℙ2Coordenadas Cartesianas en ℝ3Coordenadas Homogéneas en ℝℙ3
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]
- -

Ejemplos

- -

Escalar las dimensiones X e Y al mismo tiempo

- -

HTML

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

CSS

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

Resultado

- -

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

- -

Escalando dimensiones X e Y por separado y trasladando el origen

- -

HTML

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

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.scaled {
-  transform: scale(2, 0.5); /* Igual que: 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")}}

- -

Compatibilidad con navegadores

- -

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

- -

También puede ver

- -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
  • scale3d()
    • -
diff --git a/files/es/web/css/transform-function/scale/index.html b/files/es/web/css/transform-function/scale/index.html new file mode 100644 index 0000000000..bd6304eb52 --- /dev/null +++ b/files/es/web/css/transform-function/scale/index.html @@ -0,0 +1,123 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale +tags: + - CSS Scale + - scale() + - scaleX() + - scaleY() +translation_of: Web/CSS/transform-function/scale() +original_slug: Web/CSS/transform-function/scale() +--- +
{{CSSRef}}
+ +

La función CSS scale() define una transformación que modifica el tamaño de un elemento en el plano 2D. Debido a que la cantidad de escalado está definida por un vector, puede cambiar el tamaño de la dimensiones horizontal y vertical a diferentes escalas. Su resultado es un dato tipo {cssxref("<transform-function>")}} .

+ +

+ +

Esta transformación de escalado se caracteriza por un vector bidimensional. Sus coordenadas definen cuanto escalamiento se realiza en cada dirección. Sí ambas coordenadas son iguales, la escala es uniforme (isotrópica) y la relación de aspecto del elemento se conserva (esta es una transformación homotética).

+ +

Cuando un valor de coordenadas está fuera del rango [-1, 1], el elemento crece a lo largo de esa dimensión; cuando está dentro, se encoge. Si es negativo, el resultado es un reflejo de punto en esa dimensión. Un valor de 1 no tiene ningún efecto.

+ +
La función scale() solo se escala en 2d. Para escalar en 3D se utiliza la función scale3d() en su lugar.
+ +

Sintaxis

+ +

La función scale () se especifica con uno o dos valores, que representan la cantidad de escala que se aplicará en cada dirección.

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

Valores

+ +
+
sx
+
Es un {{cssxref("<número>")}} representando la abscisa del vector de escala.
+
sy
+
Es un {{cssxref("<número>")}} representado la ordenada de la escala del vector.  Si no está presente, su valor por defecto es sx, llevando a una escala uniforme preservando la curva del elemento.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas Cartesianas en ℝ2Coordenadas Homogéneas en ℝℙ2Coordenadas Cartesianas en ℝ3Coordenadas Homogéneas en ℝℙ3
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]
+ +

Ejemplos

+ +

Escalar las dimensiones X e Y al mismo tiempo

+ +

HTML

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

CSS

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

Resultado

+ +

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

+ +

Escalando dimensiones X e Y por separado y trasladando el origen

+ +

HTML

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

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(2, 0.5); /* Igual que: 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")}}

+ +

Compatibilidad con navegadores

+ +

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

+ +

También puede ver

+ +
    +
  • {{cssxref("transform")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
  • scale3d()
    • +
diff --git a/files/es/web/css/transform-function/translate()/index.html b/files/es/web/css/transform-function/translate()/index.html deleted file mode 100644 index 26562a503c..0000000000 --- a/files/es/web/css/transform-function/translate()/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: translate() -slug: Web/CSS/transform-function/translate() -tags: - - CSS - - CSS Function - - CSS Transforms - - Función CSS - - Referencia -translation_of: Web/CSS/transform-function/translate() ---- -
{{CSSRef}}
- -

La function de CSS translate() recoloca un elemento en el eje horizontal y/o vertical. Su resultado es de tipo {{cssxref("<transform-function>")}}.

- -

- -

Esta transformacion esta compuesta por un vector bidimensional cuyas coordenadas definen cuanto se movera el elemente en cada dirección.

- -

Sintaxis

- -

La function translate() esta especificada con uno o dos valores.

- -
translate(tx)
-
-translate(tx, ty)
-
- -

Valores

- -
-
tx
-
Es un {{cssxref("<length>")}} que representa la absisa (coordenada x) del vector de translación.
-
ty
-
Es un {{cssxref("<length>")}} que representa las ordenadas (coordenada y) del vector de translación. Si no se especifica, su valor es 0. Por ejemplo, translate(2) es equivalente a translate(2, 0).
-
- - - - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas en ℝ2Coordenadas homogeneas en ℝℙ2 -

Coordenadas cartesianas en ℝ3

- 		Coordenadas homogeneas en ℝℙ3
-

Una translación no es una transformación lineal en ℝ2 y no puede ser representada usando una matriz de coordenadas cartesianas.

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

Ejemplos

- -

Translación en un solo eje

- -

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); /* Equivalente a translateX(10px) */
-  background-color: pink;
-}
-
- -

Resultado

- -

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

- -

Translación combinada en los ejes X e Y

- -

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

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Definición inicial
- -

Compatibilidad con navegadores

- -

Ver el tipo de datos <transform-function> para la información de compatibilidad.

- -

Véase también

- -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
diff --git a/files/es/web/css/transform-function/translate/index.html b/files/es/web/css/transform-function/translate/index.html new file mode 100644 index 0000000000..1f345f1d84 --- /dev/null +++ b/files/es/web/css/transform-function/translate/index.html @@ -0,0 +1,147 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate +tags: + - CSS + - CSS Function + - CSS Transforms + - Función CSS + - Referencia +translation_of: Web/CSS/transform-function/translate() +original_slug: Web/CSS/transform-function/translate() +--- +
{{CSSRef}}
+ +

La function de CSS translate() recoloca un elemento en el eje horizontal y/o vertical. Su resultado es de tipo {{cssxref("<transform-function>")}}.

+ +

+ +

Esta transformacion esta compuesta por un vector bidimensional cuyas coordenadas definen cuanto se movera el elemente en cada dirección.

+ +

Sintaxis

+ +

La function translate() esta especificada con uno o dos valores.

+ +
translate(tx)
+
+translate(tx, ty)
+
+ +

Valores

+ +
+
tx
+
Es un {{cssxref("<length>")}} que representa la absisa (coordenada x) del vector de translación.
+
ty
+
Es un {{cssxref("<length>")}} que representa las ordenadas (coordenada y) del vector de translación. Si no se especifica, su valor es 0. Por ejemplo, translate(2) es equivalente a translate(2, 0).
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas en ℝ2Coordenadas homogeneas en ℝℙ2 +

Coordenadas cartesianas en ℝ3

+ 		Coordenadas homogeneas en ℝℙ3
+

Una translación no es una transformación lineal en ℝ2 y no puede ser representada usando una matriz de coordenadas cartesianas.

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

Ejemplos

+ +

Translación en un solo eje

+ +

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); /* Equivalente a translateX(10px) */
+  background-color: pink;
+}
+
+ +

Resultado

+ +

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

+ +

Translación combinada en los ejes X e Y

+ +

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

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

Ver el tipo de datos <transform-function> para la información de compatibilidad.

+ +

Véase también

+ +
    +
  • {{cssxref("transform")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
diff --git a/files/es/web/css/transform-function/translatey()/index.html b/files/es/web/css/transform-function/translatey()/index.html deleted file mode 100644 index 5d01de73be..0000000000 --- a/files/es/web/css/transform-function/translatey()/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: translateY() -slug: Web/CSS/transform-function/translateY() -tags: - - Funciones CSS - - Referencia - - Transformaciones CSS -translation_of: Web/CSS/transform-function/translateY() ---- -
{{CSSRef}}
- -

La función translateY() de CSS reposiciona un elemento verticalmente dentro del plano bidimensional. Su resultado es de tipo {{cssxref("<transform-function>")}}.

- -

- -
-

Nota: translateY(ty) es equivalente a translate(0, ty) o translate3d(0, ty, 0).

-
- -

Sintaxis

- -
/* <length-percentage> values */
-transform: translateY(200px);
-transform: translateY(50%);
-
- -

Valores

- -
-
<length-percentage>
-
El valor es de tipo {{cssxref("<length>")}} o {{cssxref("<percentage>")}}, representando el ordinal del vector de traslación. Un valor en porcentaje es relativo a la altura de la caja de referencia definida por la propiedad {{cssxref("transform-box")}}.
-
- - - - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas en ℝ2Coordenadas homogéneas en ℝℙ2Coordenadas cartesianas en ℝ3Coordenadas homogéneas en ℝℙ3
-

Una traslación no es una transformación linear en ℝ2  y no puede ser representada usando una matriz de coordenada cartesiana.

- 		10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]
- -

Sintaxis formal

- -
translateY({{cssxref("<length-percentage>")}})
-
- -

Ejemplos

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

CSS

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

Resultado

- -

{{EmbedLiveSample("Ejemplos", 250, 250)}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentarios
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}{{Spec2("CSS3 Transforms")}}Definición inicial
- -

Compatibilidad de navegadores

- -

Por favor, véase el tipo <transform-function> para información de compatibilidad.

- -

Véase también

- -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
diff --git a/files/es/web/css/transform-function/translatey/index.html b/files/es/web/css/transform-function/translatey/index.html new file mode 100644 index 0000000000..b3e2185290 --- /dev/null +++ b/files/es/web/css/transform-function/translatey/index.html @@ -0,0 +1,118 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY +tags: + - Funciones CSS + - Referencia + - Transformaciones CSS +translation_of: Web/CSS/transform-function/translateY() +original_slug: Web/CSS/transform-function/translateY() +--- +
{{CSSRef}}
+ +

La función translateY() de CSS reposiciona un elemento verticalmente dentro del plano bidimensional. Su resultado es de tipo {{cssxref("<transform-function>")}}.

+ +

+ +
+

Nota: translateY(ty) es equivalente a translate(0, ty) o translate3d(0, ty, 0).

+
+ +

Sintaxis

+ +
/* <length-percentage> values */
+transform: translateY(200px);
+transform: translateY(50%);
+
+ +

Valores

+ +
+
<length-percentage>
+
El valor es de tipo {{cssxref("<length>")}} o {{cssxref("<percentage>")}}, representando el ordinal del vector de traslación. Un valor en porcentaje es relativo a la altura de la caja de referencia definida por la propiedad {{cssxref("transform-box")}}.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas en ℝ2Coordenadas homogéneas en ℝℙ2Coordenadas cartesianas en ℝ3Coordenadas homogéneas en ℝℙ3
+

Una traslación no es una transformación linear en ℝ2  y no puede ser representada usando una matriz de coordenada cartesiana.

+ 		10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]
+ +

Sintaxis formal

+ +
translateY({{cssxref("<length-percentage>")}})
+
+ +

Ejemplos

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

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

Resultado

+ +

{{EmbedLiveSample("Ejemplos", 250, 250)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}{{Spec2("CSS3 Transforms")}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

Por favor, véase el tipo <transform-function> para información de compatibilidad.

+ +

Véase también

+ +
    +
  • {{cssxref("transform")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
diff --git a/files/es/web/css/transform-function/translatez()/index.html b/files/es/web/css/transform-function/translatez()/index.html deleted file mode 100644 index 75ee9ac918..0000000000 --- a/files/es/web/css/transform-function/translatez()/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: translateZ() -slug: Web/CSS/transform-function/translateZ() -tags: - - 3D - - CSS -translation_of: Web/CSS/transform-function/translateZ() ---- -
{{CSSRef}}
- -

La función translateZ() CSS reposiciona un elemento a lo largo del eje-z (z-axis) en el espacio 3D, es decir, más cerca o mas lejos del espectador. Su resultado es un {{cssxref("<transform-function>")}} tipo de dato.

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

Esta transformación es definida por una {{cssxref("<length>")}} la cual especifica que tan lejos hacia denttro o hacia afuera el elemento o los elementos se mueven.

- -

En los ejemplos interacticos anteriores, perspective: 550px; (para crear un espacio 3D) y transform-style: preserve-3d; (los elementos hijos, los 6 lados del cubo, estan también posicionados en el espacio 3D), es decir, han sido establecidos en el cubo.

- -
-

Nota: translateZ(tz) es equivalente a translate3d(0, 0, tz).

-
- -

Syntax

- -
translateZ(tz)
-
- -

Values

- -
-
tz
-
Una {{cssxref("<length>")}} que representa el componente-z del vector. Un valor positivo mueve el elemento hacia el espectador, y un elemento negativo mueve el elemento más lejos.
-
- - - - - - - - - - - - - - - - - -
Coordenadas Cartesianas en  ℝ2Coordenadas Homógeneas en ℝℙ2Coordenadas Cartesianas en ℝ3Coordenadas Homógeneas enℝℙ3
Esta transformación se aplica al espacio 4D y no puede ser representada en el plano.Una traducción no es una transformación lineal en ℝ3 y no puede ser representada usando una matriz de coordenadas-Cartesianas. -

1 0 0 0 

- -

0 1 0 0

- -

0 0 1 t

- -

 0 0 0 1

-
- -

Ejemplos

- -

En este ejemplo, se crean dos cuadros. Uno se coloca normalmente en la página, sin ser traducida en absoluto. El segundo se modifica aplicando perspectiva para crear un espacio 3D, luego se mueve hacia el usuario.

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
- -

CSS

- -
div {
-  position: relative;
-  width: 60px;
-  height: 60px;
-  left: 100px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: perspective(500px) translateZ(200px);
-  background-color: pink;
-}
-
- -

Lo que realmente importa es la clase "movida"; veamos que hace. Primero, la función perspective() posiciona al espectador en relación con el plano  que se encuentra donde z=0 (en esencia, la superficie de la pantalla). Un valor de 500px significa que el usario es 500 pixels "delante de" las imagenes ubicadas en z=0.

- -

Luego, la función translateZ() mueve el elemento 200 pixeles "hacia afuera" desde la pantalla, hacia el usuario. Esto tiene el efecto de hacer que el elemento parezca más grande cuando se ve en una pantalla 2D, o más cerca cuando se ve usando un auricular VR u otro dispositivo de pantalla 3D.

- -

Resultado

- -

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

- -

Si el valor perspective() es menor que el valor translateZ(), como transform: perspective(200px) translateZ(300px); el elemento transformado no será visible ya que está más allá de la vista del usuario. Cuanto menor sea la diferencia entre la pespectiva y los valores de transformación, más cerca estará el usuario del elemento y más grande parecerá el elemento traducido. 

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Agrega funciones de transformación 3D al CSS Transform estándar.
- -

Compatibilidad con navegador

- -

Por favor observe la propiedad <transform-function> para información de compatibilidad.

- -

Véase también

- -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
diff --git a/files/es/web/css/transform-function/translatez/index.html b/files/es/web/css/transform-function/translatez/index.html new file mode 100644 index 0000000000..1030c389d5 --- /dev/null +++ b/files/es/web/css/transform-function/translatez/index.html @@ -0,0 +1,127 @@ +--- +title: translateZ() +slug: Web/CSS/transform-function/translateZ +tags: + - 3D + - CSS +translation_of: Web/CSS/transform-function/translateZ() +original_slug: Web/CSS/transform-function/translateZ() +--- +
{{CSSRef}}
+ +

La función translateZ() CSS reposiciona un elemento a lo largo del eje-z (z-axis) en el espacio 3D, es decir, más cerca o mas lejos del espectador. Su resultado es un {{cssxref("<transform-function>")}} tipo de dato.

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

Esta transformación es definida por una {{cssxref("<length>")}} la cual especifica que tan lejos hacia denttro o hacia afuera el elemento o los elementos se mueven.

+ +

En los ejemplos interacticos anteriores, perspective: 550px; (para crear un espacio 3D) y transform-style: preserve-3d; (los elementos hijos, los 6 lados del cubo, estan también posicionados en el espacio 3D), es decir, han sido establecidos en el cubo.

+ +
+

Nota: translateZ(tz) es equivalente a translate3d(0, 0, tz).

+
+ +

Syntax

+ +
translateZ(tz)
+
+ +

Values

+ +
+
tz
+
Una {{cssxref("<length>")}} que representa el componente-z del vector. Un valor positivo mueve el elemento hacia el espectador, y un elemento negativo mueve el elemento más lejos.
+
+ + + + + + + + + + + + + + + + + +
Coordenadas Cartesianas en  ℝ2Coordenadas Homógeneas en ℝℙ2Coordenadas Cartesianas en ℝ3Coordenadas Homógeneas enℝℙ3
Esta transformación se aplica al espacio 4D y no puede ser representada en el plano.Una traducción no es una transformación lineal en ℝ3 y no puede ser representada usando una matriz de coordenadas-Cartesianas. +

1 0 0 0 

+ +

0 1 0 0

+ +

0 0 1 t

+ +

 0 0 0 1

+
+ +

Ejemplos

+ +

En este ejemplo, se crean dos cuadros. Uno se coloca normalmente en la página, sin ser traducida en absoluto. El segundo se modifica aplicando perspectiva para crear un espacio 3D, luego se mueve hacia el usuario.

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+ +

CSS

+ +
div {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  left: 100px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translateZ(200px);
+  background-color: pink;
+}
+
+ +

Lo que realmente importa es la clase "movida"; veamos que hace. Primero, la función perspective() posiciona al espectador en relación con el plano  que se encuentra donde z=0 (en esencia, la superficie de la pantalla). Un valor de 500px significa que el usario es 500 pixels "delante de" las imagenes ubicadas en z=0.

+ +

Luego, la función translateZ() mueve el elemento 200 pixeles "hacia afuera" desde la pantalla, hacia el usuario. Esto tiene el efecto de hacer que el elemento parezca más grande cuando se ve en una pantalla 2D, o más cerca cuando se ve usando un auricular VR u otro dispositivo de pantalla 3D.

+ +

Resultado

+ +

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

+ +

Si el valor perspective() es menor que el valor translateZ(), como transform: perspective(200px) translateZ(300px); el elemento transformado no será visible ya que está más allá de la vista del usuario. Cuanto menor sea la diferencia entre la pespectiva y los valores de transformación, más cerca estará el usuario del elemento y más grande parecerá el elemento traducido. 

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Agrega funciones de transformación 3D al CSS Transform estándar.
+ +

Compatibilidad con navegador

+ +

Por favor observe la propiedad <transform-function> para información de compatibilidad.

+ +

Véase también

+ +
    +
  • {{cssxref("transform")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
diff --git a/files/es/web/css/url()/index.html b/files/es/web/css/url()/index.html deleted file mode 100644 index c57e34235d..0000000000 --- a/files/es/web/css/url()/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: url() -slug: Web/CSS/url() -tags: - - CSS - - Referencia -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/filter-function/url -original_slug: Web/CSS/filter-function/url ---- -
{{cssref}}
- -

La función de CSS url() usa un filtro SVG para cambiar la apariencia en la imagen de entrada.

- -

Sintaxis

- -
url(location)
- -

Parámetros

- -
-
location
-
La {{cssxref("<url>")}} de un archivo {{glossary("XML")}} que especifique un filtro SVG, y puede incluir un ancla a un elemento filtro específico.
-
- -

Ejemplo

- -
url(resources.svg#c1)
- -

Ver también

- -
    -
  • {{cssxref("<filter-function>")}}
    • -
diff --git a/files/es/web/css/url/index.html b/files/es/web/css/url/index.html new file mode 100644 index 0000000000..f0a590a6f3 --- /dev/null +++ b/files/es/web/css/url/index.html @@ -0,0 +1,34 @@ +--- +title: url() +slug: Web/CSS/url +tags: + - CSS + - Referencia +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/filter-function/url +original_slug: Web/CSS/url() +--- +
{{cssref}}
+ +

La función de CSS url() usa un filtro SVG para cambiar la apariencia en la imagen de entrada.

+ +

Sintaxis

+ +
url(location)
+ +

Parámetros

+ +
+
location
+
La {{cssxref("<url>")}} de un archivo {{glossary("XML")}} que especifique un filtro SVG, y puede incluir un ancla a un elemento filtro específico.
+
+ +

Ejemplo

+ +
url(resources.svg#c1)
+ +

Ver también

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/es/web/css/var()/index.html b/files/es/web/css/var()/index.html deleted file mode 100644 index 0f8dc84a0a..0000000000 --- a/files/es/web/css/var()/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: var() -slug: Web/CSS/var() -translation_of: Web/CSS/var() ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La función var() puede ser utilizada como valor en cualquier propiedad de un elemento. La función var() no puede ser usada como nombre de una propiedad, selector o cualquier cosa que no sea un valor de propiedad. (Hacerlo provoca normalmente una sintaxis erronea o bien un valor que no tiene conexión con la variable).

- -

Sintaxis

- -

El primer parámetro que recibe la función es el nombre de la custom property que será reemplazada. Se puede utilizar un segundo parámetro opcional como fallback de el primero. Si la custom property referenciada por el primer parámetro no es válida, entonces la función utiliza el valor del segúndo parámetro.

- -{{csssyntax}} - -

Valores

- -
-
<custom-property-name>
-
El nombre de la custom property a la que se hace referencia, representada por un identificador válido, es decir, cualquier nombre que comience por dos guiones. Las "custom properties" son para uso exclusivo de autores y usuarios. CSS no dará nunca un significado más alla del que se detalla aquí.
-
<declaration-value>
-
El valor por defecto de la custom property en caso de que la custom property referenciada sea inválida. Este valor puede contener cualquier caracter salvo algunos con significado especial como saltos de linea, llaves sin cerrar, exclamaciones o puntos y comas .
-
- -

Ejemplos

- -
:root {
-  --main-bg-color: pink;
-}
-
-body {
-  background-color: var(--main-bg-color);
-}
-
- -
/* Fallback */
-/* En el estilo del componente: */
-.component .header {
-  color: var(--header-color, blue);
-}
-
-.component .text {
-  color: var(--text-color, black);
-}
-
-/* En el estilo de la aplicación: */
-.component {
-  --text-color: #080; /* header-color no está definido y por lo tanto permanece con el valor "blue" definido como fallback */
-}
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Definición inicial
- -

Compatibilidad con navegadores

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

Ver también

- - diff --git a/files/es/web/css/var/index.html b/files/es/web/css/var/index.html new file mode 100644 index 0000000000..04eb1d9809 --- /dev/null +++ b/files/es/web/css/var/index.html @@ -0,0 +1,80 @@ +--- +title: var() +slug: Web/CSS/var +translation_of: Web/CSS/var() +original_slug: Web/CSS/var() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La función var() puede ser utilizada como valor en cualquier propiedad de un elemento. La función var() no puede ser usada como nombre de una propiedad, selector o cualquier cosa que no sea un valor de propiedad. (Hacerlo provoca normalmente una sintaxis erronea o bien un valor que no tiene conexión con la variable).

+ +

Sintaxis

+ +

El primer parámetro que recibe la función es el nombre de la custom property que será reemplazada. Se puede utilizar un segundo parámetro opcional como fallback de el primero. Si la custom property referenciada por el primer parámetro no es válida, entonces la función utiliza el valor del segúndo parámetro.

+ +{{csssyntax}} + +

Valores

+ +
+
<custom-property-name>
+
El nombre de la custom property a la que se hace referencia, representada por un identificador válido, es decir, cualquier nombre que comience por dos guiones. Las "custom properties" son para uso exclusivo de autores y usuarios. CSS no dará nunca un significado más alla del que se detalla aquí.
+
<declaration-value>
+
El valor por defecto de la custom property en caso de que la custom property referenciada sea inválida. Este valor puede contener cualquier caracter salvo algunos con significado especial como saltos de linea, llaves sin cerrar, exclamaciones o puntos y comas .
+
+ +

Ejemplos

+ +
:root {
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+
+ +
/* Fallback */
+/* En el estilo del componente: */
+.component .header {
+  color: var(--header-color, blue);
+}
+
+.component .text {
+  color: var(--text-color, black);
+}
+
+/* En el estilo de la aplicación: */
+.component {
+  --text-color: #080; /* header-color no está definido y por lo tanto permanece con el valor "blue" definido como fallback */
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Definición inicial
+ +

Compatibilidad con navegadores

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

Ver también

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