diff --git a/files/es/web/css/-moz-force-broken-image-icon/index.html b/files/es/web/css/-moz-force-broken-image-icon/index.html deleted file mode 100644 index 29f85230f9c145..00000000000000 --- a/files/es/web/css/-moz-force-broken-image-icon/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: '-moz-force-broken-image-icon' -slug: Web/CSS/-moz-force-broken-image-icon -tags: - - CSS - - CSS Reference - - Non-standard -translation_of: Web/CSS/-moz-force-broken-image-icon ---- -
{{Non-standard_header}}{{ CSSRef() }}
- -

Resumen

- -

-moz-force-broken-image-icon es una propiedad CSS extendida. El valor 1 fuerza un icono de imagen no encontrada aunque la imagen tenga el atributo alt. Cuando el valor es 0 la imagen actuará normalmente y solo mostrará el atributo alt.

- -
Nota: Aunque el valor sea 1 el atributo alt se seguirá mostrando. Más información debajo.
- -

{{cssinfo}}

- -

Sintaxis

- -
-moz-force-broken-image-icon: <integer>;
- -

Valores

- -
-
{{cssxref("<integer>")}}
-
-
- -

Ejemplos

- -
img {
-  -moz-force-broken-image-icon: 1;
-  height:100px;
-  width:100px;
-}
- -
<img src='/enlace/roto/imagen.png' alt='Imagen con enlace roto'>
- -

{{ EmbedLiveSample('Examples','125','125','/files/4619/broken%20image%20link.png') }}

- -
Nota: A no ser que la imagen tenga una altura y ancho especificados, el icono de imagen rota no se mostrará, pero el atributo alt no se mostrará si el valor de -moz-force-broken-image-icon es 1.
- -

Notas

- - - -

Ver también

- - diff --git a/files/es/web/css/-moz-force-broken-image-icon/index.md b/files/es/web/css/-moz-force-broken-image-icon/index.md new file mode 100644 index 00000000000000..63ec35b494e67c --- /dev/null +++ b/files/es/web/css/-moz-force-broken-image-icon/index.md @@ -0,0 +1,55 @@ +--- +title: '-moz-force-broken-image-icon' +slug: Web/CSS/-moz-force-broken-image-icon +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: Web/CSS/-moz-force-broken-image-icon +--- +{{Non-standard_header}}{{ CSSRef() }} + +## Resumen + +`-moz-force-broken-image-icon` es una propiedad CSS extendida. El valor `1` fuerza un icono de imagen no encontrada aunque la imagen tenga el atributo `alt`. Cuando el valor es `0` la imagen actuará normalmente y solo mostrará el atributo `alt`. + +> **Nota:** Aunque el valor sea `1` el atributo `alt` se seguirá mostrando. Más información debajo. + +{{cssinfo}} + +## Sintaxis + +``` +-moz-force-broken-image-icon: ; +``` + +### Valores + +{{cssxref("<integer>")}} + +## Ejemplos + +```css +img { + -moz-force-broken-image-icon: 1; + height:100px; + width:100px; +} +``` + +```html +Imagen con enlace roto +``` + +{{ EmbedLiveSample('Examples','125','125','/files/4619/broken%20image%20link.png') }} + +> **Nota:** A no ser que la imagen tenga una altura y ancho especificados, el icono de imagen rota no se mostrará, pero el atributo alt no se mostrará si el valor de `-moz-force-broken-image-icon` es `1`. + +## Notas + +- Esta propiedad solo funcionará en los navegadores basados en Gecko +- No se recomienda el uso de esta propiedad. Se debería usar un atributo alt adecuado. + +## Ver también + +- {{ Bug(58646) }} diff --git a/files/es/web/css/-webkit-mask-repeat-y/index.html b/files/es/web/css/-webkit-mask-repeat-y/index.html deleted file mode 100644 index a6315a4a6b090c..00000000000000 --- a/files/es/web/css/-webkit-mask-repeat-y/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: '-webkit-mask-repeat-y' -slug: Web/CSS/-webkit-mask-repeat-y -tags: - - CSS - - Máscara CSS - - NeedsBrowserCompatibility - - NeedsMobileBrowserCompatibility - - No estandar - - Propiedad CSS - - Referencia -translation_of: Web/CSS/-webkit-mask-repeat-y ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Resumen

- -

La propiedad CSS -webkit-mask-repeat-y especifica si una imagen de máscara se repite(en mosaico) y cómo se lleva acabo esa repetición de manera vertical.

- -

{{cssinfo}}

- -

Síntaxis

- -
/* Palabras Clave Valor */
--webkit-mask-repeat-y: repeat;
--webkit-mask-repeat-y: no-repeat;
--webkit-mask-repeat-y: space;
--webkit-mask-repeat-y: round;
-
-/* Múltiples valores */
--webkit-mask-repeat-y: repeat, no-repeat, space;
-
-/* Valores globales */
--webkit-mask-repeat-y: inherit;
--webkit-mask-repeat-y: initial;
--webkit-mask-repeat-y: unset;
-
- -

Valores

- -
-
repeat
-
La imagen se repite verticalmente
-
no-repeat
-
La imagen de máscara no se repite verticalmente; sólo se dibuja una copia de la misma. El resto del contenido del elemento al cual se le ha aplicado la máscara, no es mostrado.
-
space
-
La imagen se repite tanta veces como sea posible pero sin aplicarle ningún recorte. La primera y la última imagen estarán pegadas al borde superior e inferior del elemento y el espacio restante se distribuye de igual manera entre las imágenes. Se ignora la propiedad {{cssxref("mask-position")}} a menos que únicamente se pueda mostrar una sóla imagen sin aplicar recortes. El único caso en el que se aplican recortes usando este valor es cuando no hay suficiente espacio para mostrar una sóla imagen.
-
round
-
Al aumentar el espacio vertical la imágenes repetidas pueden estiarse (sin dejar huecos) hasta que sólo haya hueco para añadir una más. Al añadir la siguiente se encogen para permitir el hueco.Ejemplo: Una imagen con una altura original de 260px, repetida 3 veces, puede estirarse hasta que cada repetición tenga una altura de 300px y, entonces, se añadirá otra que se encogerá hasta una altura 225px.
-
As the allowed vertical space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original height of 260px, repeated three times, might stretch until each repetition is 300px high, and then another image will be added. They will then compress to a height of 225px.
-
- -

Síntaxis Formal

- -{{csssyntax}} - -

Ejemplos

- -
.exampleone {
-  -webkit-mask-image: url('mask.png');
-  -webkit-mask-repeat-y: repeat;
-}
-
-.exampletwo {
-  -webkit-mask-image: url('mask.png');
-  -webkit-mask-repeat-y: no-repeat;
-}
-
- -

Soporte para múltiples imágenes de máscara

- -

Es posible especificar un <repeat-style> diferente para cada una de las imágenes de máscara. Los distintos valores deben separarme mediante el uso de comas:

- -
.examplethree {
-  -webkit-mask-image: url('mask1.png'), url('mask2.png');
-  -webkit-mask-repeat-y: repeat, space;
-}
-
- -

Cada imagen se asocia con el correspondiente estilo de repetición, desde la primera hasta la última y siguiendo el orden que se ha establecido.

- -

Compatibilidad con los distintos navegadores

- -{{Compat("css.properties.-webkit-mask-repeat-y")}} - -

Ver además

- -

{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-x")}}

diff --git a/files/es/web/css/-webkit-mask-repeat-y/index.md b/files/es/web/css/-webkit-mask-repeat-y/index.md new file mode 100644 index 00000000000000..30d4502468c45e --- /dev/null +++ b/files/es/web/css/-webkit-mask-repeat-y/index.md @@ -0,0 +1,91 @@ +--- +title: '-webkit-mask-repeat-y' +slug: Web/CSS/-webkit-mask-repeat-y +tags: + - CSS + - Máscara CSS + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-mask-repeat-y +--- +{{CSSRef}}{{Non-standard_header}} + +## Resumen + +La propiedad CSS `-webkit-mask-repeat-y` especifica si una imagen de máscara se repite(en mosaico) y cómo se lleva acabo esa repetición de manera vertical. + +{{cssinfo}} + +## Síntaxis + +```css +/* Palabras Clave Valor */ +-webkit-mask-repeat-y: repeat; +-webkit-mask-repeat-y: no-repeat; +-webkit-mask-repeat-y: space; +-webkit-mask-repeat-y: round; + +/* Múltiples valores */ +-webkit-mask-repeat-y: repeat, no-repeat, space; + +/* Valores globales */ +-webkit-mask-repeat-y: inherit; +-webkit-mask-repeat-y: initial; +-webkit-mask-repeat-y: unset; +``` + +## Valores + +- repeat + - : La imagen se repite verticalmente +- no-repeat + - : La imagen de máscara no se repite verticalmente; sólo se dibuja una copia de la misma. El resto del contenido del elemento al cual se le ha aplicado la máscara, no es mostrado. +- space + - : La imagen se repite tanta veces como sea posible pero sin aplicarle ningún recorte. La primera y la última imagen estarán pegadas al borde superior e inferior del elemento y el espacio restante se distribuye de igual manera entre las imágenes. Se ignora la propiedad {{cssxref("mask-position")}} a menos que únicamente se pueda mostrar una sóla imagen sin aplicar recortes. El único caso en el que se aplican recortes usando este valor es cuando no hay suficiente espacio para mostrar una sóla imagen. +- round + + - : Al aumentar el espacio vertical la imágenes repetidas pueden estiarse (sin dejar huecos) hasta que sólo haya hueco para añadir una más. Al añadir la siguiente se encogen para permitir el hueco.Ejemplo: Una imagen con una altura original de 260px, repetida 3 veces, puede estirarse hasta que cada repetición tenga una altura de 300px y, entonces, se añadirá otra que se encogerá hasta una altura 225px. + + As the allowed vertical space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original height of 260px, repeated three times, might stretch until each repetition is 300px high, and then another image will be added. They will then compress to a height of 225px. + +### Síntaxis Formal + +{{csssyntax}} + +## Ejemplos + +```css +.exampleone { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat-y: repeat; +} + +.exampletwo { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat-y: no-repeat; +} +``` + +### Soporte para múltiples imágenes de máscara + +Es posible especificar un `` diferente para cada una de las imágenes de máscara. Los distintos valores deben separarme mediante el uso de comas: + +```css +.examplethree { + -webkit-mask-image: url('mask1.png'), url('mask2.png'); + -webkit-mask-repeat-y: repeat, space; +} +``` + +Cada imagen se asocia con el correspondiente estilo de repetición, desde la primera hasta la última y siguiendo el orden que se ha establecido. + +## Compatibilidad con los distintos navegadores + +{{Compat("css.properties.-webkit-mask-repeat-y")}} + +## Ver además + +{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-x")}} diff --git a/files/es/web/css/@font-face/font-style/index.html b/files/es/web/css/@font-face/font-style/index.html deleted file mode 100644 index ba46bb06e8e69a..00000000000000 --- a/files/es/web/css/@font-face/font-style/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: font-style -slug: Web/CSS/@font-face/font-style -tags: - - '@font-face' - - CSS - - Fuentes - - Referências -translation_of: Web/CSS/@font-face/font-style ---- -

{{CSSRef}}

- -

Summary

- -

La propiedad CSS "font-style" permite a los autores esepcificar estilos de fuente para las fuentes especificadas en la regla "@font-face".

- -

Para un tipo de fuente particular, los autores pueden descargar varios tipos de fuentes que correspondan a diferentes estilos de la misma familia de fuentes, y luego usar la propiedad "font-style" para especificar explicitamente el tipo de fuente descargada. Los valores para esta propiedad CSS son los mismos que los correspondientes a font property.

- -

{{cssinfo}}

- -

Syntax

- -
-
font-style: normal;
-font-style: italic;
-font-style: oblique;
- -

Values

- -

normal
- Selecciona la version normal del estilo de fuente.

- -

italic
- Especifica que el estilo de fuente es la versión en cursiva de la fuente normal.

- -

oblique
- Especifica que el estilo de fuente es la versión en cursiva, también, pero de forma diferente, de la fuente normal.

- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

A modo de ejemplo, consideremos Garamond como un tipo de fuente que, en su forma normal, obtenemos el siguiente resultado:

- -
@font-face {
-  font-family: garamond;
-  src: url('garamond.ttf');
-}
- -

unstyled Garamond

- -

La versión en cursiva de este texto utiliza los mismos trazos presentes en la versión sin estilo, pero artificialmente inclinadas unos pocos grados.

- -

artificially sloped garamond

- -

Por otra parte, si existe un verdadera versión en cursiva del estilo de fuente, podemos incluirla en la propiedad "src" y especificar el estilo de fuente como "italic", con que claramente la fuente quedará en cursiva. Las verdaderas cursivas utilizan unos trazos específicos que son un poco diferentes de su versión normal, teniendo algunas características únicas y generalmente con cualidades redondeadas y caligráficas. Estas fuentes son específicamente creadas por diseñadores de fuentes y no son artificialmente inclinadas.

- -

@font-face { font-family: garamond; src: url('garamond-italic.ttf'); font-style: italic; }

- -

italic garamond

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}{{Spec2('CSS3 Fonts')}}Initial definition
- -

Browser compatibility

- -{{Compat("css.at-rules.font-face.font-style")}} diff --git a/files/es/web/css/@font-face/font-style/index.md b/files/es/web/css/@font-face/font-style/index.md new file mode 100644 index 00000000000000..eeff6514449bb8 --- /dev/null +++ b/files/es/web/css/@font-face/font-style/index.md @@ -0,0 +1,75 @@ +--- +title: font-style +slug: Web/CSS/@font-face/font-style +tags: + - '@font-face' + - CSS + - Fuentes + - Referências +translation_of: Web/CSS/@font-face/font-style +--- +{{CSSRef}} + +## Summary + +La propiedad CSS "font-style" permite a los autores esepcificar estilos de fuente para las fuentes especificadas en la regla "`@font-face`". + +Para un tipo de fuente particular, los autores pueden descargar varios tipos de fuentes que correspondan a diferentes estilos de la misma familia de fuentes, y luego usar la propiedad "font-style" para especificar explicitamente el tipo de fuente descargada. Los valores para esta propiedad CSS son los mismos que los correspondientes a font property. + +{{cssinfo}} + +## Syntax + +```css +font-style: normal; +font-style: italic; +font-style: oblique; +``` + +### Values + +- **`normal`** + - : Selecciona la version normal del estilo de fuente. + +- **`italic`** + - : Especifica que el estilo de fuente es la versión en _cursiva_ de la fuente normal. + +- **`oblique`** + - : Especifica que el estilo de fuente es la versión en _cursiva_, también, pero de forma diferente, de la fuente normal. + +### Formal syntax + +{{csssyntax}} + +## Examples + +A modo de ejemplo, consideremos Garamond como un tipo de fuente que, en su forma normal, obtenemos el siguiente resultado: + +```css +@font-face { + font-family: garamond; + src: url('garamond.ttf'); +} +``` + +![unstyled Garamond](https://mdn.mozillademos.org/files/12265/garamondunstyled.JPG) + +La versión en _cursiva_ de este texto utiliza los mismos trazos presentes en la versión sin estilo, pero artificialmente inclinadas unos pocos grados. + +![artificially sloped garamond](https://mdn.mozillademos.org/files/12267/garamondartificialstyle.JPG) + +Por otra parte, si existe un verdadera versión en _cursiva_ del estilo de fuente, podemos incluirla en la propiedad "src" y especificar el estilo de fuente como "italic", con que claramente la fuente quedará en _cursiva_. Las verdaderas _cursivas_ utilizan unos trazos específicos que son un poco diferentes de su versión normal, teniendo algunas características únicas y generalmente con cualidades redondeadas y caligráficas. Estas fuentes son específicamente creadas por diseñadores de fuentes y no son artificialmente inclinadas. + +@font-face { font-family: garamond; src: url('garamond-italic.ttf'); font-style: italic; } + +![italic garamond](https://mdn.mozillademos.org/files/12269/garamonditalic.JPG) + +## Specifications + +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ | +| {{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}} | {{Spec2('CSS3 Fonts')}} | Initial definition | + +## Browser compatibility + +{{Compat("css.at-rules.font-face.font-style")}} diff --git a/files/es/web/css/@font-face/index.html b/files/es/web/css/@font-face/index.html deleted file mode 100644 index 83dcf289a18cfd..00000000000000 --- a/files/es/web/css/@font-face/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: '@font-face' -slug: Web/CSS/@font-face -translation_of: Web/CSS/@font-face ---- -

{{ CSSRef() }}

- -

Resumen

- -

@font-face permite al autor especificar fuentes online para visualizar en sus páginas web. Al permitir a los autores proporcionar sus propias fuentes, @font-face elimina la necesidad de depender del numero limitado de fuentes de usuarios instaladas en sus computadoras.

- -

Sintaxis

- -
@font-face {
-  font-family: <un-nombre-de-fuente-remota>;
-  src: <origen> [,<origen>]*;
-  [font-weight: <peso>];
-  [font-style: <estilo>];
-}
-
- -

Valores

- -
-
<un-nombre-de-fuente-remota>
-
Especifica el nombre de una fuente que será utilizada como valor de font face por las propiedades de fuente.
-
<origen>
-
Dirección URL para la ubicación remota del archivo de fuente, o el nombre de una fuente en la computadora del usuario en la forma local("Nombre de Fuente").
-
<peso>
-
Un valor de peso/grosor de fuente.
-
<estilo>
-
Un valor de estilo de fuente.
-
- -

Puede especificar una fuente por nombre en la computadora local del usuario utilizando la sintaxis local(). Si esa fuente no es encontrada, se intentarán otros orígenes hasta encontrar una fuente.

- -

Formatos de fuentes soportados

- -
    -
  • Gecko 1.9.1 (Firefox 3.5) soporta fuentes TrueType y OpenType.
  • -
  • Gecko 1.9.2 (Firefox 3.6) agrega soporte para WOFF.
  • -
- -

Ejemplos

- -

Este ejemplo simplemente especifica una fuente que puede ser descargada para utilizar, aplicando la fuente a todo el cuerpo del documento.

- -

Muestra en vivo

- -
<html>
-<head>
-  <title>Web Font Sample</title>
-  <style type="text/css" media="screen, print">
-    @font-face {
-      font-family: "Bitstream Vera Serif Bold";
-      src: url("https://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
-    }
-
-    body { font-family: "Bitstream Vera Serif Bold", serif }
-  </style>
-</head>
-<body>
-  This is Bitstream Vera Serif Bold.
-</body>
-</html>
-
- -

En este ejemplo, es utilizada la copia local de "Helvetica Neue Bold" del usuario; si el usuario no tiene esa fuente instalada (se prueban dos nombre distintos), luego la fuente descargable de nombre "MgOpenModernaBold.ttf" es utilizada en cambio:

- -
@font-face {
-  font-family: MyHelvetica;
-  src: local("Helvetica Neue Bold"),
-  local("HelveticaNeue-Bold"),
-  url(MgOpenModernaBold.ttf);
-  font-weight: bold;
-}
-
- -

Notas

- -
    -
  • En Gecko, las fuentes web están sujetas a la restricción del mismo dominio (los archivos de fuentes deben estar en el mismo dominio que la página que los utiliza), a menos que los controles de acceso HTTP sean utilizados para relajar esta restricción.
  • -
  • -
    Nota: Porque no hay tipos MIME definidos para fuentes TrueType, OpenType, y WOFF, el tipo MIME del archivo especificado no es considerado.
    -
  • -
  • Cuando Gecko muestra una página que usa fuentes web, inicialmente muestra el texto que usa la mejor fuente de reserva CSS disponible en la computadora del usuario mientras espera que la fuente web termine de descargarse. Mientras cada fuente web se termina de descargar, Gecko actualiza el texto que utiliza esa fuente. Esto permite al usuario leer más rápidamente el texto en la página.
  • -
- -

Compatibilidad del navegador

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Chrome (WebKit)4 (532.5)Solo fuentes TrueType y OpenType
6 (534.3)Web Open Font Format (WOFF) soporte agregado
Opera10.0Solo fuentes TrueType y OpenType
Safari (WebKit)3.1 (525.6)Solo fuentes TrueType y OpenType
NavegadorVersión desdeSoporte de
Internet Explorer4.0Solo fuentes OpenType embebidas
Internet Explorer9.0 Preview 3Web Open Font Format (WOFF) soporte agregado
Firefox (Gecko)3.5 (1.9.1)Solo fuentes TrueType y OpenType
3.6 (1.9.2)Web Open Font Format (WOFF) soporte agregado
- -

Vea también MSDN Microsoft library @font-face.

- -

Especificaciones

- - - -

Vea también

- - diff --git a/files/es/web/css/@font-face/index.md b/files/es/web/css/@font-face/index.md new file mode 100644 index 00000000000000..720cdf9ef1006c --- /dev/null +++ b/files/es/web/css/@font-face/index.md @@ -0,0 +1,153 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +translation_of: Web/CSS/@font-face +--- +{{ CSSRef() }} + +## Resumen + +`@font-face` permite al autor especificar fuentes online para visualizar en sus páginas web. Al permitir a los autores proporcionar sus propias fuentes,` @font-face `elimina la necesidad de depender del numero limitado de fuentes de usuarios instaladas en sus computadoras. + +## Sintaxis + +``` +@font-face { + font-family: ; + src: [,]*; + [font-weight: ]; + [font-style: ]; +} +``` + +### Valores + +- \ + - : Especifica el nombre de una fuente que será utilizada como valor de font face por las propiedades de fuente. +- \ + - : Dirección URL para la ubicación remota del archivo de fuente, o el nombre de una fuente en la computadora del usuario en la forma `local("Nombre de Fuente")`. +- \ + - : Un valor de [peso/grosor de fuente](/en/CSS/font-weight). +- \ + - : Un valor de [estilo de fuente](/en/CSS/font-style). + +Puede especificar una fuente por nombre en la computadora local del usuario utilizando la sintaxis `local()`. Si esa fuente no es encontrada, se intentarán otros orígenes hasta encontrar una fuente. + +## Formatos de fuentes soportados + +- Gecko 1.9.1 (Firefox 3.5) soporta fuentes TrueType y OpenType. +- Gecko 1.9.2 (Firefox 3.6) agrega soporte para [WOFF](/en/WOFF). + +## Ejemplos + +Este ejemplo simplemente especifica una fuente que puede ser descargada para utilizar, aplicando la fuente a todo el cuerpo del documento. + +[Muestra en vivo](/@api/deki/files/2935/=webfont-sample.html) + +``` + + + Web Font Sample + + + + This is Bitstream Vera Serif Bold. + + +``` + +En este ejemplo, es utilizada la copia local de "Helvetica Neue Bold" del usuario; si el usuario no tiene esa fuente instalada (se prueban dos nombre distintos), luego la fuente descargable de nombre "MgOpenModernaBold.ttf" es utilizada en cambio: + +``` +@font-face { + font-family: MyHelvetica; + src: local("Helvetica Neue Bold"), + local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); + font-weight: bold; +} +``` + +## Notas + +- En Gecko, las fuentes web están sujetas a la restricción del mismo dominio (los archivos de fuentes deben estar en el mismo dominio que la página que los utiliza), a menos que los [controles de acceso HTTP](/En/HTTP_access_control) sean utilizados para relajar esta restricción. +- > **Nota:** Porque no hay tipos MIME definidos para fuentes TrueType, OpenType, y WOFF, el tipo MIME del archivo especificado no es considerado. +- Cuando Gecko muestra una página que usa fuentes web, inicialmente muestra el texto que usa la mejor fuente de reserva CSS disponible en la computadora del usuario mientras espera que la fuente web termine de descargarse. Mientras cada fuente web se termina de descargar, Gecko actualiza el texto que utiliza esa fuente. Esto permite al usuario leer más rápidamente el texto en la página. + +## Compatibilidad del navegador + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Chrome (WebKit)4 (532.5)Solo fuentes TrueType y OpenType
6 (534.3)Web Open Font Format (WOFF) soporte agregado
Opera10.0Solo fuentes TrueType y OpenType
Safari (WebKit)3.1 (525.6)Solo fuentes TrueType y OpenType
NavegadorVersión desdeSoporte de
Internet Explorer4.0Solo fuentes OpenType embebidas
Internet Explorer9.0 Preview 3Web Open Font Format (WOFF) soporte agregado
Firefox (Gecko)3.5 (1.9.1)Solo fuentes TrueType y OpenType
3.6 (1.9.2)Web Open Font Format (WOFF) soporte agregado
+ +Vea también [MSDN Microsoft library @font-face](). + +## Especificaciones + +- [CSS 2 Fonts](http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions) 1998-05-12 Obsoletas +- [CSS 3 Fonts](http://www.w3.org/TR/css3-fonts/#font-resources) 2009 Borrador de trabajo +- [WOFF file format specification](http://people.mozilla.com/~jkew/woff/woff-2009-09-16.html) Borrador + +## Vea también + +- [FontSquirrel @font-face generator](http://www.fontsquirrel.com/fontface/generator) +- [About WOFF](/en/WOFF) +- [Beautiful fonts with @font-face](http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/) +- [Open Font Library](http://openfontlibrary.org/) +- [10 Great Free Fonts for @font-face embedding](http://opentype.info/demo/webfontdemo.html) diff --git a/files/es/web/css/@font-face/unicode-range/index.html b/files/es/web/css/@font-face/unicode-range/index.html deleted file mode 100644 index 17f458f70d5590..00000000000000 --- a/files/es/web/css/@font-face/unicode-range/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: unicode-range -slug: Web/CSS/@font-face/unicode-range -tags: - - CSS - - Experimental - - Layout - - Reference -translation_of: Web/CSS/@font-face/unicode-range ---- -
{{cssref}}
- -

La regla CSS unicode-range especifica un rango específico de caracteres a ser usados por una fuente definida {{cssxref("@font-face")}} y hacerla disponible para su uso en la página actual. Si la página no usa algún caracter en ese rango, la fuente no es descargada; si usa al menos uno de ellos, la fuente es descargada.

- -

El propósito de esta regla es permitir a las fuente ser segmentados, así el navegador solo necesita descargar la fuente necesitada para el contexto de texto en una página en particular. Por ejemplo, un sitio con muchas localizaciones podría proveer fuentes separadas para el inglés, griego y japonés. Para los usuarios que ven la versión en inglés de la página, las fuentes para el griego y el japonés no son necesarias, y por lo tanto no se descargan, ahorrando ancho de banda.

- -

Sintaxis

- -
/* valores <unicode-range> */
-unicode-range: U+26;               /* un único código */
-unicode-range: U+0-7F;
-unicode-range: U+0025-00FF;        /* rango de códigos */
-unicode-range: U+4??;              /* rango por expresión */
-unicode-range: U+0025-00FF, U+4??; /* multiples valores */
-
- -

Valores

- -
-
un único código
-
Un único código de caracter Unicode, por ejemplo U+26.
-
un rango de código
-
Un rango de códigos de caracter Unicode. Asi que, por ejemplo, U+0025-00FF significa incluir todos caracteres en el rango U+0025 a U+00FF.
-
rango por expresión
-
Un rango de códigos Unicode que contienen caracteres comodín, usando el caracter '?', asi que, por ejemplo U+4?? significa incluir todos los caracteres en el rango U+400 a U+4FF.
-
- -

Ejemplos

- -

Hemos creado una etiqueta HTML que contiene un elemento {{HTMLElement("div")}}, que incluye un simbolo &, el cual queremos que se muestre con una fuente diferente. Para hacerlo obvio, usaremos una fuente sans-serif, Helvetica para el texto, y una fuente serif, Times New Roman, para el caracter &.

- -
-
<div>Me & You = Us</div>
-
- -

En el CSS, puedes ver que en efecto estamos definiendo una separación completa {{cssxref("@font-face")}} el cual solo incluye un caracter, significando que solo ese caracter será estilizado con esa fuente. Podríamos haber hecho esto tambien encapsulando el caracter & en un elemento {{HTMLElement("span")}} y aplicando una fuente solo a ese elemento, pero esto es un elemento y una regla extra.

- -
-
@font-face {
-  font-family: 'Ampersand';
-  src: local('Times New Roman');
-  unicode-range: U+26;
-}
-
-div {
-  font-size: 4em;
-  font-family: Ampersand, Helvetica, sans-serif;
-}
- -

Reultado

- -

What the example should looks like if your browser supports it.

-
- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}{{Spec2('CSS3 Fonts')}}Initial definition
- -

Compatibilidad con navegadores

- -

{{Compat("css.at-rules.font-face.unicode-range")}}

diff --git a/files/es/web/css/@font-face/unicode-range/index.md b/files/es/web/css/@font-face/unicode-range/index.md new file mode 100644 index 00000000000000..cde5f5cc469e51 --- /dev/null +++ b/files/es/web/css/@font-face/unicode-range/index.md @@ -0,0 +1,72 @@ +--- +title: unicode-range +slug: Web/CSS/@font-face/unicode-range +tags: + - CSS + - Experimental + - Layout + - Reference +translation_of: Web/CSS/@font-face/unicode-range +--- +{{cssref}} + +La regla CSS **`unicode-range`** especifica un rango específico de caracteres a ser usados por una fuente definida {{cssxref("@font-face")}} y hacerla disponible para su uso en la página actual. Si la página no usa algún caracter en ese rango, la fuente no es descargada; si usa al menos uno de ellos, la fuente es descargada. + +El propósito de esta regla es permitir a las fuente ser segmentados, así el navegador solo necesita descargar la fuente necesitada para el contexto de texto en una página en particular. Por ejemplo, un sitio con muchas localizaciones podría proveer fuentes separadas para el inglés, griego y japonés. Para los usuarios que ven la versión en inglés de la página, las fuentes para el griego y el japonés no son necesarias, y por lo tanto no se descargan, ahorrando ancho de banda. + +## Sintaxis + +```css +/* valores */ +unicode-range: U+26; /* un único código */ +unicode-range: U+0-7F; +unicode-range: U+0025-00FF; /* rango de códigos */ +unicode-range: U+4??; /* rango por expresión */ +unicode-range: U+0025-00FF, U+4??; /* multiples valores */ +``` + +### Valores + +- _**un único código**_ + - : Un único código de caracter Unicode, por ejemplo `U+26`. +- _**un rango de código**_ + - : Un rango de códigos de caracter Unicode. Asi que, por ejemplo, `U+0025-00FF` significa _incluir todos caracteres en el rango `U+0025` a `U+00FF`_. +- _**rango por expresión**_ + - : Un rango de códigos Unicode que contienen caracteres comodín, usando el caracter `'?'`, asi que, por ejemplo `U+4??` significa _incluir todos los caracteres en el rango `U+400` a `U+4FF`_. + +## Ejemplos + +Hemos creado una etiqueta HTML que contiene un elemento {{HTMLElement("div")}}, que incluye un simbolo &, el cual queremos que se muestre con una fuente diferente. Para hacerlo obvio, usaremos una fuente sans-serif, _Helvetica_ para el texto, y una fuente serif, _Times New Roman_, para el caracter &. + +```html +
Me & You = Us
+``` + +En el CSS, puedes ver que en efecto estamos definiendo una separación completa {{cssxref("@font-face")}} el cual solo incluye un caracter, significando que solo ese caracter será estilizado con esa fuente. Podríamos haber hecho esto tambien encapsulando el caracter & en un elemento {{HTMLElement("span")}} y aplicando una fuente solo a ese elemento, pero esto es un elemento y una regla extra. + +```css +@font-face { + font-family: 'Ampersand'; + src: local('Times New Roman'); + unicode-range: U+26; +} + +div { + font-size: 4em; + font-family: Ampersand, Helvetica, sans-serif; +} +``` + +### Reultado + +![What the example should looks like if your browser supports it.](https://mdn.mozillademos.org/files/6043/Refresult.png) + +## Especificación + +| Especificación | Estado | Comentario | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ | +| {{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}} | {{Spec2('CSS3 Fonts')}} | Initial definition | + +## Compatibilidad con navegadores + +{{Compat("css.at-rules.font-face.unicode-range")}} diff --git a/files/es/web/css/@import/index.html b/files/es/web/css/@import/index.html deleted file mode 100644 index 6769eba3cf0036..00000000000000 --- a/files/es/web/css/@import/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: '@import' -slug: Web/CSS/@import -translation_of: Web/CSS/@import ---- -

{{CSSRef}}

- -

Resumen

- -

La regla-at CSS @import permite importar reglas desde otras hojas de estilo. Estas reglas deben preceder a todos los otros tipos de reglas, excepto a las reglas {{ cssxref("@charset") }}; como esto no es una declaración anidada, no puede ser usado dentro de grupos condicionales de reglas-at.

- -

Para que los agentes de usuario puedan evitar recuperar recursos para tipos de medios no soportados, los autores pueden especificar reglas dependientes del tipo de medio @import. Estas condiciones @import se especifican separando por una coma las consultas de medios (media query) despues de la url. En la ausencia de cualquier consulta de medios (media query), la importación es incondicional. Especificando all para el medio tiene el mismo efecto.

- -

Sintaxis

- -
@import url;                      or
-@import url list-of-media-queries;
-
- -

Dónde :

- -
-
url
-
es una {{cssxref("<string>")}} o un {{cssxref("<uri>")}}
-
Representa la ubicación del recurso a importar. La url puede ser absoluta o relativa.
-
list-of-media-queries
-
Es una lista separada por comas de consultas de medios (media query) que condicionan la aplicación de las reglas CSS definidas en el enlace url. Si el navegador no soporta cualquiera de estos consultas de medios (media query), ni siquiera cargará el recurso vinculado.
-
- -

Ejemplos

- -
@import url("fineprint.css") print;
-@import url("bluish.css") projection, tv;
-@import 'custom.css';
-@import "common.css" screen, projection;
-@import url('landscape.css') screen and (orientation:landscape);
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Media Queries', '#media0', '@import') }}{{ Spec2('CSS3 Media Queries') }}Extiende la sintaxis para soportar cualquier consultas de medios (media query) y no sólo los tipos de medios simples.
{{ SpecName('CSS2.1', 'cascade.html#at-import', '@import') }}{{ Spec2('CSS2.1') }}Añade soporte para {{cssxref("<string>")}}
- para denotar la url de una hoja de estilo,
- y es requerida para insertar la regla @import en el principio del documento CSS.
{{ SpecName('CSS1', '#the-cascade', '@import') }}{{ Spec2('CSS1') }}
- -

Compatibilidad de navegadores

- -{{Compat("css.at-rules.import")}} diff --git a/files/es/web/css/@import/index.md b/files/es/web/css/@import/index.md new file mode 100644 index 00000000000000..772e39725c6534 --- /dev/null +++ b/files/es/web/css/@import/index.md @@ -0,0 +1,52 @@ +--- +title: '@import' +slug: Web/CSS/@import +translation_of: Web/CSS/@import +--- +{{CSSRef}} + +## Resumen + +La regla-at [CSS](/en/CSS) `@import` permite importar reglas desde otras hojas de estilo. Estas reglas deben preceder a todos los otros tipos de reglas, excepto a las reglas {{ cssxref("@charset") }}; como esto no es una [declaración anidada](/en/CSS/Syntax#nested_statements), no puede ser usado dentro de [grupos condicionales de reglas-at](/en/CSS/At-rule#Conditional_Group_Rules). + +Para que los agentes de usuario puedan evitar recuperar recursos para tipos de medios no soportados, los autores pueden especificar reglas dependientes del tipo de medio `@import`. Estas condiciones @import se especifican separando por una coma las [consultas de medios (media query)](/en/CSS/Media_queries) despues de la _url_. En la ausencia de cualquier consulta de medios (media query), la importación es incondicional. Especificando `all` para el medio tiene el mismo efecto. + +## Sintaxis + +``` +@import url; or +@import url list-of-media-queries; +``` + +Dónde : + +- _url_ + + - : es una {{cssxref("<string>")}} o un {{cssxref("<uri>")}} + + Representa la ubicación del recurso a importar. La _url_ puede ser absoluta o relativa. + +- _list-of-media-queries_ + - : Es una lista separada por comas de [consultas de medios (media query)](/en/CSS/Media_queries) que condicionan la aplicación de las reglas CSS definidas en el enlace _url_. Si el navegador no soporta cualquiera de estos [consultas de medios (media query)](/en/CSS/Media_queries), ni siquiera cargará el recurso vinculado. + +## Ejemplos + +``` +@import url("fineprint.css") print; +@import url("bluish.css") projection, tv; +@import 'custom.css'; +@import "common.css" screen, projection; +@import url('landscape.css') screen and (orientation:landscape); +``` + +## Especificaciones + +| Especificación | Estado | Comentario | +| -------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{ SpecName('CSS3 Media Queries', '#media0', '@import') }} | {{ Spec2('CSS3 Media Queries') }} | Extiende la sintaxis para soportar cualquier [consultas de medios (media query)](/en/CSS/Media_queries) y no sólo los [tipos de medios](/en/CSS/@media#Media_types) simples. | +| {{ SpecName('CSS2.1', 'cascade.html#at-import', '@import') }} | {{ Spec2('CSS2.1') }} | Añade soporte para {{cssxref("<string>")}} para denotar la _url_ de una hoja de estilo, y es requerida para insertar la regla `@import` en el principio del documento CSS. | +| {{ SpecName('CSS1', '#the-cascade', '@import') }} | {{ Spec2('CSS1') }} | | + +## Compatibilidad de navegadores + +{{Compat("css.at-rules.import")}} diff --git a/files/es/web/css/_colon_dir/index.html b/files/es/web/css/_colon_dir/index.html deleted file mode 100644 index f14a2c3702dde5..00000000000000 --- a/files/es/web/css/_colon_dir/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: ':dir()' -slug: 'Web/CSS/:dir' -tags: - - CSS - - Experimental - - Pseudo-clase - - Referencia -translation_of: 'Web/CSS/:dir' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La pseudo-clase :dir de CSS coincide con los elementos en función de la direccionalidad del texto contenido en ellos.

- -
/* Selecciona cualquier elemento con texto de derecha a izquierda */
-:dir(rtl) {
-  background-color: red;
-}
- -

La pseudo-clase :dir() usa solo el valor semántico de la direccionalidad, es decir, el definido en el documento mismo. No tiene en cuenta la direccionalidad del estilo, es decir, la direccionalidad establecida por las propiedades de CSS como {{cssxref("direction")}}.

- -
-

Nota: Tenga en cuenta que el comportamiento de la pseudo-clase :dir() no es equivalente a los selectores de atributo [dir=...]. Estos últimos coinciden con el atributo HTML {{htmlattrxref("dir")}} e ignoran los elementos que carecen de él, incluso si heredan una dirección de su padre. (De forma similar, [dir=rtl] y [dir=ltr] no coincidirán con el valor auto.) En contraste, :dir() coincidirá con el valor calculado por {{glossary("user agent")}}, incluso si se hereda.

-
- -
-

Nota: En HTML, la dirección está determinada por el atributo {{htmlattrxref("dir")}} . Otros tipos de documentos pueden tener diferentes métodos.

-
- -

Sintaxis

- -

La pseudoclase :dir() requiere un parámetro, que representa la direccionalidad de texto que desea orientar.

- -

Parámetros

- -
-
ltr
-
Orientar elementos de izquierda a derecha.
-
rtl
-
Orientar elementos de derecha a izquierda.
-
-

Sintaxis formal

- - {{csssyntax}} -
-
- -

Ejemplo

- -

HTML

- -
<div dir="rtl">
-  <span>test1</span>
-  <div dir="ltr">test2
-    <div dir="auto">עִבְרִית</div>
-  </div>
-</div>
- -

CSS

- -
:dir(ltr) {
-  background-color: yellow;
-}
-
-:dir(rtl) {
-  background-color: powderblue;
-}
- -

Resultado

- -

{{ EmbedLiveSample('Ejemplo') }}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}{{Spec2('CSS4 Selectors')}}Definición Inicial.
- -

Compatibilidad con navegadores

- -

{{Compat("css.selectors.dir")}}

- -
- -

Ver también

- -
    -
  • Pseudo-clases relacionadas con el idioma: {{cssxref(":lang")}}, {{cssxref(":dir")}}
  • -
diff --git a/files/es/web/css/_colon_dir/index.md b/files/es/web/css/_colon_dir/index.md new file mode 100644 index 00000000000000..b093d4ae9b1bcf --- /dev/null +++ b/files/es/web/css/_colon_dir/index.md @@ -0,0 +1,85 @@ +--- +title: ':dir()' +slug: Web/CSS/:dir +tags: + - CSS + - Experimental + - Pseudo-clase + - Referencia +translation_of: Web/CSS/:dir +--- +{{CSSRef}}{{SeeCompatTable}} + +La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) `:dir` de [CSS](/es/docs/Web/CSS) coincide con los elementos en función de la direccionalidad del texto contenido en ellos. + +```css +/* Selecciona cualquier elemento con texto de derecha a izquierda */ +:dir(rtl) { + background-color: red; +} +``` + +La pseudo-clase `:dir()` usa solo el valor _semántico_ de la direccionalidad, es decir, el definido en el documento mismo. No tiene en cuenta la direccionalidad del _estilo_, es decir, la direccionalidad establecida por las propiedades de CSS como {{cssxref("direction")}}. + +> **Nota:** Tenga en cuenta que el comportamiento de la pseudo-clase `:dir()` no es equivalente a los [selectores de atributo](/es/docs/Web/CSS/Attribute_selectors) `[dir=...]`. Estos últimos coinciden con el atributo HTML {{htmlattrxref("dir")}} e ignoran los elementos que carecen de él, incluso si heredan una dirección de su padre. (De forma similar, `[dir=rtl]` y `[dir=ltr]` no coincidirán con el valor `auto`.) En contraste, `:dir()` coincidirá con el valor calculado por {{glossary("user agent")}}, incluso si se hereda. + +> **Nota:** En HTML, la dirección está determinada por el atributo {{htmlattrxref("dir")}} . Otros tipos de documentos pueden tener diferentes métodos. + +## Sintaxis + +La pseudoclase `:dir()` requiere un parámetro, que representa la direccionalidad de texto que desea orientar. + +### Parámetros + +- `ltr` + - : Orientar elementos de izquierda a derecha. +- `rtl` + - : Orientar elementos de derecha a izquierda. + +- ### Sintaxis formal + + - : {{csssyntax}} + +## Ejemplo + +### HTML + +```html +
+ test1 +
test2 +
עִבְרִית
+
+
+``` + +### CSS + +```css +:dir(ltr) { + background-color: yellow; +} + +:dir(rtl) { + background-color: powderblue; +} +``` + +### Resultado + +{{ EmbedLiveSample('Ejemplo') }} + +## Especificaciones + +| Especificación | Estado | Comentario | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- | +| {{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}} | {{Spec2('HTML WHATWG')}} | Ningún cambio. | +| {{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}} | {{Spec2('CSS4 Selectors')}} | Definición Inicial. | + +## Compatibilidad con navegadores + +{{Compat("css.selectors.dir")}} + +## Ver también + +- Pseudo-clases relacionadas con el idioma: {{cssxref(":lang")}}, {{cssxref(":dir")}} diff --git a/files/es/web/css/_colon_focus-visible/index.html b/files/es/web/css/_colon_focus-visible/index.html deleted file mode 100644 index 3f9727fc7d2605..00000000000000 --- a/files/es/web/css/_colon_focus-visible/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: ':focus-visible' -slug: 'Web/CSS/:focus-visible' -translation_of: 'Web/CSS/:focus-visible' ---- -
{{CSSRef}}
- -

La pseudo-clase :focus-visible se aplica mientras un elemento coincide con la pseudo-clase {{CSSxRef(":focus")}} y el UA (Agente de Usuario) determina mediante heurística que el foco debe hacerse evidente en el elemento. (Muchos navegdores muestras un "anillo de enfoque" por defecto en este caso.

- -

Este selector es útil para proporcionar un indicador de enfoque diferente basado en la modalidad de entrada del usuario (ratón vs teclado).

- -

Nótese que Firefox soporta una funcionalidad similar a través de una pseudo-clase prefijada — {{CSSxRef(":-moz-focusring")}}.

- -

Sintaxis

- -{{CSSSyntax}} - -

Ejemplos

- -

Ejemplos básicos

- -

En este ejemplo, el selector :focus-visible usa el comportamiento del UA para deteminar cuándo emparejar. Compara lo que sucede cuando haces clic en los diferentes controles con un ratón con lo que sucede cuando los atraviesas con el teclado. Note la diferencia de comportamiento con respecto a los elementos con estilo :focus.

- -
<input value="Default styles"><br>
-<button>Default styles</button><br>
-<input class="focus-only" value=":focus only"><br>
-<button class="focus-only">:focus only</button><br>
-<input class="focus-visible-only" value=":focus-visible only"><br>
-<button class="focus-visible-only">:focus-visible only</button>
- -
input, button {
-  margin: 10px;
-}
-
-.focus-only:focus {
-  outline: 2px solid black;
-}
-
-.focus-visible-only:focus-visible {
-  outline: 4px dashed darkorange;
-}
-
- -

{{EmbedLiveSample("Basic_example", "100%", 300)}}

- -

Mostrando selectivamente el indicador de enfoque

- -

Un control personalizado, como un botón de elemento personalizado, puede utilizar :focus-visible para aplicar selectivamente un indicador de enfoque sólo en el enfoque del teclado. Esto coincide con el comportamiento de enfoque nativo para controles como {{htmlelement("button")}}.

- -
<custom-button tabindex="0" role="button">Click Me</custom-button>
- -
custom-button {
-  display: inline-block;
-  margin: 10px;
-}
-
-custom-button:focus {
-  /* Provide a fallback style for browsers
-     that don't support :focus-visible */
-  outline: none;
-  background: lightgrey;
-}
-
-custom-button:focus:not(:focus-visible) {
-  /* Remove the focus indicator on mouse-focus for browsers
-     that do support :focus-visible */
-  background: transparent;
-}
-
-custom-button:focus-visible {
-  /* Draw a very noticeable focus style for
-     keyboard-focus on browsers that do support
-     :focus-visible */
-  outline: 4px dashed darkorange;
-  background: transparent;
-}
- -

{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}}

- -

Polyfill

- -

You can polyfill :focus-visible usando focus-visible.js.

- -

Problemas de accesibilidad

- -

Baja visión

- -

Asegúrate de que el indicador de enfoque visual pueda ser visto por personas con baja visión. Esto también beneficiará a cualquier persona que utilice una pantalla en un espacio brillantemente iluminado (como el exterior en el sol). WCAG 2.1 SC 1.4.11 Contraste Sin Texto requiere que el indicador de enfoque visual sea al menos 3 a 1.

- - - -

Cognición

- -

Puede que no sea obvio por qué el indicador de enfoque aparece y desaparece si una persona está utilizando formas mixtas de entrada. Para los usuarios con preocupaciones cognitivas, o que tienen menos conocimientos tecnológicos, esta falta de comportamiento consistente para los elementos interactivos puede ser confusa.

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}{{Spec2("CSS4 Selectors")}}Initial definition.
- -

Compatibilidad de navegador

- - - -

{{Compat("css.selectors.focus-visible")}}

- -

Vea también

- -
    -
  • {{CSSxRef(":focus")}}
  • -
  • {{CSSxRef(":focus-within")}}
  • -
diff --git a/files/es/web/css/_colon_focus-visible/index.md b/files/es/web/css/_colon_focus-visible/index.md new file mode 100644 index 00000000000000..593c45caf12184 --- /dev/null +++ b/files/es/web/css/_colon_focus-visible/index.md @@ -0,0 +1,116 @@ +--- +title: ':focus-visible' +slug: Web/CSS/:focus-visible +translation_of: Web/CSS/:focus-visible +--- +{{CSSRef}} + +La pseudo-clase **`:focus-visible`** se aplica mientras un elemento coincide con la pseudo-clase {{CSSxRef(":focus")}} y el UA ([Agente de Usuario](/es/docs/Glossary/User_agent)) determina mediante heurística que el foco debe hacerse evidente en el elemento. (Muchos navegdores muestras un "anillo de enfoque" por defecto en este caso. + +Este selector es útil para proporcionar un indicador de enfoque diferente basado en la modalidad de entrada del usuario (ratón vs teclado). + +Nótese que Firefox soporta una funcionalidad similar a través de una pseudo-clase prefijada — {{CSSxRef(":-moz-focusring")}}. + +## Sintaxis + +{{CSSSyntax}} + +## Ejemplos + +### Ejemplos básicos + +En este ejemplo, el selector `:focus-visible` usa el comportamiento del UA para deteminar cuándo emparejar. Compara lo que sucede cuando haces clic en los diferentes controles con un ratón con lo que sucede cuando los atraviesas con el teclado. Note la diferencia de comportamiento con respecto a los elementos con estilo `:focus`. + +```html +
+
+
+
+
+ +``` + +```css +input, button { + margin: 10px; +} + +.focus-only:focus { + outline: 2px solid black; +} + +.focus-visible-only:focus-visible { + outline: 4px dashed darkorange; +} +``` + +{{EmbedLiveSample("Basic_example", "100%", 300)}} + +### Mostrando selectivamente el indicador de enfoque + +Un control personalizado, como un botón de [elemento personalizado](/es/docs/User:Andreas_Wuest/Custom_Elements), puede utilizar `:focus-visible` para aplicar selectivamente un indicador de enfoque sólo en el enfoque del teclado. Esto coincide con el comportamiento de enfoque nativo para controles como {{htmlelement("button")}}. + +```html +Click Me +``` + +``` +custom-button { + display: inline-block; + margin: 10px; +} + +custom-button:focus { + /* Provide a fallback style for browsers + that don't support :focus-visible */ + outline: none; + background: lightgrey; +} + +custom-button:focus:not(:focus-visible) { + /* Remove the focus indicator on mouse-focus for browsers + that do support :focus-visible */ + background: transparent; +} + +custom-button:focus-visible { + /* Draw a very noticeable focus style for + keyboard-focus on browsers that do support + :focus-visible */ + outline: 4px dashed darkorange; + background: transparent; +} +``` + +{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}} + +## Polyfill + +You can polyfill `:focus-visible` usando [focus-visible.js](https://github.com/WICG/focus-visible). + +## Problemas de accesibilidad + +### Baja visión + +Asegúrate de que el indicador de enfoque visual pueda ser visto por personas con baja visión. Esto también beneficiará a cualquier persona que utilice una pantalla en un espacio brillantemente iluminado (como el exterior en el sol). [WCAG 2.1 SC 1.4.11 Contraste Sin Texto](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) requiere que el indicador de enfoque visual sea al menos 3 a 1. + +- Indicadores de enfoque visual accesibles: [Déle a su sitio un poco de enfoque! Consejos para diseñar indicadores de enfoque útiles y utilizables](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/) + +### Cognición + +Puede que no sea obvio por qué el indicador de enfoque aparece y desaparece si una persona está utilizando formas mixtas de entrada. Para los usuarios con preocupaciones cognitivas, o que tienen menos conocimientos tecnológicos, esta falta de comportamiento consistente para los elementos interactivos puede ser confusa. + +## Especificaciones + +| Especificación | Estado | Comentario | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}} | {{Spec2("CSS4 Selectors")}} | Initial definition. | + +## Compatibilidad de navegador + +{{Compat("css.selectors.focus-visible")}} + +## Vea también + +- {{CSSxRef(":focus")}} +- {{CSSxRef(":focus-within")}} diff --git a/files/es/web/css/_colon_indeterminate/index.html b/files/es/web/css/_colon_indeterminate/index.html deleted file mode 100644 index 1e65ab59b53bde..00000000000000 --- a/files/es/web/css/_colon_indeterminate/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: ':indeterminate' -slug: 'Web/CSS/:indeterminate' -tags: - - CSS - - Diseño - - Pseudo-clase - - Referencia - - Web -translation_of: 'Web/CSS/:indeterminate' ---- -
{{CSSRef}}
- -

La pseudo-clase :indeterminate de CSS representa cualquier elemento de formulario cuyo estado sea indeterminado.

- -
/* Selecciona cualquier <input> cuyo estado sea indeterminado */
-input:indeterminate {
-  background: lime;
-}
- -

Los elementos seleccionados por este selector son:

- -
    -
  • Elementos <input type="checkbox"> cuya propiedad indeterminate se establece en true por JavaScript
  • -
  • Elementos <input type="radio">, cuando todos los radio buttons con el mismo valor name en el formulario no están marcados
  • -
  • Elementos {{HTMLElement("progress")}} en un estado indeterminado
  • -
- -

Sintaxis

- -{{csssyntax}} - -

Ejemplos

- -

Checkbox y radio button

- -

Este ejemplo aplica estilos especiales a las etiquetas asociadas con campos de formulario indeterminados.

- -

HTML

- -
<div>
-  <input type="checkbox" id="checkbox">
-  <label for="checkbox">Esta etiqueta comienza con el color lima.</label>
-</div>
-<div>
-  <input type="radio" id="radio">
-  <label for="radio">Esta etiqueta comienza con el color lima.</label>
-</div>
- -

CSS

- -
input:indeterminate + label {
-  background: lime;
-}
-
- -

JavaScript

- -
var inputs = document.getElementsByTagName("input");
-
-for (var i = 0; i < inputs.length; i++) {
-  inputs[i].indeterminate = true;
-}
-
- -

Resultado

- -

{{EmbedLiveSample('Checkbox_y_radio_button', 'auto', 50)}}

- -

Barra de progreso

- -

HTML

- -
<progress>
-
- -

CSS

- -
progress {
-  margin: 4px;
-}
-
-progress:indeterminate {
-  opacity: 0.5;
-  background-color: lightgray;
-  box-shadow: 0 0 2px 1px red;
-}
-
- -

Resultado

- -

{{EmbedLiveSample('Barra_de_progreso', 'auto', 30)}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML5 W3C')}}Define la semántica de HTML y la validación de restricciones.
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}{{Spec2('CSS3 Basic UI')}}Define la pseudo-clase, pero no la semántica asociada.
- -

Compatibilidad con navegadores

- -
- - -

{{Compat("css.selectors.indeterminate")}}

-
diff --git a/files/es/web/css/_colon_indeterminate/index.md b/files/es/web/css/_colon_indeterminate/index.md new file mode 100644 index 00000000000000..b1d1fd4f4ef4aa --- /dev/null +++ b/files/es/web/css/_colon_indeterminate/index.md @@ -0,0 +1,111 @@ +--- +title: ':indeterminate' +slug: Web/CSS/:indeterminate +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: Web/CSS/:indeterminate +--- +{{CSSRef}} + +La [pseudo-clase](/es/docs/Web/CSS/Pseudo-classes) **`:indeterminate`** de [CSS](/es/docs/Web/CSS) representa cualquier elemento de formulario cuyo estado sea indeterminado. + +```css +/* Selecciona cualquier cuyo estado sea indeterminado */ +input:indeterminate { + background: lime; +} +``` + +Los elementos seleccionados por este selector son: + +- Elementos [``](/es/docs/Web/HTML/Element/input/checkbox) cuya propiedad `indeterminate` se establece en `true` por [JavaScript](/es/docs/Web/JavaScript) +- Elementos [``](/es/docs/Web/HTML/Element/input/radio), cuando todos los radio buttons con el mismo valor `name` en el formulario no están marcados +- Elementos {{HTMLElement("progress")}} en un estado indeterminado + +## Sintaxis + +{{csssyntax}} + +## Ejemplos + +### Checkbox y radio button + +Este ejemplo aplica estilos especiales a las etiquetas asociadas con campos de formulario indeterminados. + +#### HTML + +```html +
+ + +
+
+ + +
+``` + +#### CSS + +```css +input:indeterminate + label { + background: lime; +} +``` + +#### JavaScript + +```js +var inputs = document.getElementsByTagName("input"); + +for (var i = 0; i < inputs.length; i++) { + inputs[i].indeterminate = true; +} +``` + +### Resultado + +{{EmbedLiveSample('Checkbox_y_radio_button', 'auto', 50)}} + +### Barra de progreso + +#### HTML + +```html + +``` + +#### CSS + +```css +progress { + margin: 4px; +} + +progress:indeterminate { + opacity: 0.5; + background-color: lightgray; + box-shadow: 0 0 2px 1px red; +} +``` + +### Resultado + +{{EmbedLiveSample('Barra_de_progreso', 'auto', 30)}} + +## Especificaciones + +| Especificación | Estado | Comentarios | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------------------- | +| {{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}} | {{Spec2('HTML WHATWG')}} | Ningún cambio. | +| {{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}} | {{Spec2('HTML5 W3C')}} | Define la semántica de HTML y la validación de restricciones. | +| {{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}} | {{Spec2('CSS4 Selectors')}} | Ningún cambio. | +| {{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}} | {{Spec2('CSS3 Basic UI')}} | Define la pseudo-clase, pero no la semántica asociada. | + +## Compatibilidad con navegadores + +{{Compat("css.selectors.indeterminate")}} diff --git a/files/es/web/css/_doublecolon_first-line/index.html b/files/es/web/css/_doublecolon_first-line/index.html deleted file mode 100644 index 952c27dc19491d..00000000000000 --- a/files/es/web/css/_doublecolon_first-line/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: '::first-line (:first-line)' -slug: 'Web/CSS/::first-line' -tags: - - CSS - - Diseño - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::first-line' ---- -
{{CSSRef}}
- -

El Pseudoelemento ::first-line aplica estilos a la primera línea de un elemento de bloque. Nótese que la longitud de la primera línea depende de muchos factores, incluyendo el ancho del elemento, el ancho del documento y el tamaño de fuente del texto.

- -
/* Selecciona la primera línea de un <p> */
-p::first-line {
-  color: red;
-}
- -
-

CSS3 introdujo la notación ::first-line (con doble dos puntos) para distinguir pseudo-clases de pseudo-elementos. Los navegadores también aceptan :first-line, añadido en CSS2.

-
- -

Propiedades permitidas

- -

Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento ::first-line:

- -
    -
  • Todas las propiedades de fuente: {{Cssxref("font")}}, {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}}, and {{Cssxref("font-family")}}
  • -
  • Todas las propiedades de fondo: {{Cssxref("background-color")}}, {{cssxref("background-clip")}}, {{Cssxref("background-image")}}, {{cssxref("background-origin")}}, {{Cssxref("background-position")}}, {{Cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{Cssxref("background-attachment")}}, and {{cssxref("background-blend-mode")}}
  • -
  • La propiedad {{cssxref("color")}}
  • -
  • {{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}}, and {{cssxref("line-height")}}
  • -
  • {{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, and {{cssxref("vertical-align")}}.
  • -
- -

Sintaxis

- -{{csssyntax}} - -

Ejemplo

- -

HTML

- -
<p>Los estilos sólo se aplicarán en la primera línea de este párrafo.
-Posteriormente, todo el texto tendrá el estilo normal.
-¿Ves?</p>
-
-<span>La primera línea de este elemento no recibe ningún estilo
-especial, porque no es un elemento de bloque.</span>
- -

CSS

- -
::first-line {
-  color: blue;
-  text-transform: uppercase;
-
-
-  /* ADVERTENCIA: NO USES ESTOS*/
-  /* Muchas propiedades son inválidas en pseudoelementos ::first-line */
-  margin-left: 20px;
-  text-indent: 20px;
-}
- -

Resultado

- -

{{EmbedLiveSample('Example', 350, 160)}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}{{Spec2('CSS4 Pseudo-Elements')}} -

Defina más estrictamente dónde ::first-letter puede ocurrir. Generaliza propiedades permitidas. Define la herencia de ::first-letter.

-
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}{{Spec2('CSS3 Text Decoration')}}Permite el uso de {{cssxref("text-shadow")}} con ::first-letter.
{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}{{Spec2('CSS3 Selectors')}}Introducción de la sintexis de doble dos puntos.
{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}{{Spec2('CSS2.1')}}Sin cambios.
{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}{{Spec2('CSS1')}}Definición inicial, uso de la sintaxis de doble dos puntos.
- -
- - - - -

{{Compat("css.selectors.first-line")}}

-
- -

Ver También

- -
    -
  • {{cssxref("::first-letter")}}
  • -
diff --git a/files/es/web/css/_doublecolon_first-line/index.md b/files/es/web/css/_doublecolon_first-line/index.md new file mode 100644 index 00000000000000..f6fc2fd8b0296f --- /dev/null +++ b/files/es/web/css/_doublecolon_first-line/index.md @@ -0,0 +1,86 @@ +--- +title: '::first-line (:first-line)' +slug: Web/CSS/::first-line +tags: + - CSS + - Diseño + - Pseudo-element + - Reference +translation_of: Web/CSS/::first-line +--- +{{CSSRef}} + +El [Pseudoelemento](/es/docs/Web/CSS/Pseudoelementos) **`::first-line`** aplica estilos a la primera línea de un [elemento de bloque](/es/docs/Web/HTML/Block-level_elements). Nótese que la longitud de la primera línea depende de muchos factores, incluyendo el ancho del elemento, el ancho del documento y el tamaño de fuente del texto. + +```css +/* Selecciona la primera línea de un

*/ +p::first-line { + color: red; +} +``` + +> **Nota:** CSS3 introdujo la notación `::first-line` (con doble dos puntos) para distinguir [pseudo-clases](/es/docs/Web/CSS/Pseudo-classes) de [pseudo-elementos](/es/docs/Web/CSS/Pseudo-elements). Los navegadores también aceptan `:first-line`, añadido en CSS2. + +## Propiedades permitidas + +Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento `::first-line`: + +- Todas las propiedades de fuente: {{Cssxref("font")}}, {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}}, and {{Cssxref("font-family")}} +- Todas las propiedades de fondo: {{Cssxref("background-color")}}, {{cssxref("background-clip")}}, {{Cssxref("background-image")}}, {{cssxref("background-origin")}}, {{Cssxref("background-position")}}, {{Cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{Cssxref("background-attachment")}}, and {{cssxref("background-blend-mode")}} +- La propiedad {{cssxref("color")}} +- {{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}}, and {{cssxref("line-height")}} +- {{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, and {{cssxref("vertical-align")}}. + +## Sintaxis + +{{csssyntax}} + +## Ejemplo + +### HTML + +```html +

Los estilos sólo se aplicarán en la primera línea de este párrafo. +Posteriormente, todo el texto tendrá el estilo normal. +¿Ves?

+ +La primera línea de este elemento no recibe ningún estilo +especial, porque no es un elemento de bloque. +``` + +### CSS + +```css +::first-line { + color: blue; + text-transform: uppercase; + + + /* ADVERTENCIA: NO USES ESTOS*/ + /* Muchas propiedades son inválidas en pseudoelementos ::first-line */ + margin-left: 20px; + text-indent: 20px; +} +``` + +### Resultado + +{{EmbedLiveSample('Example', 350, 160)}} + +## Especificaciones + +| Especificación | Estatus | Comentario | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}} | {{Spec2('CSS4 Pseudo-Elements')}} | Defina más estrictamente dónde `::first-letter` puede ocurrir. Generaliza propiedades permitidas. Define la herencia de `::first-letter`. | +| {{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}} | {{Spec2('CSS3 Text Decoration')}} | Permite el uso de {{cssxref("text-shadow")}} con `::first-letter`. | +| {{SpecName('CSS3 Selectors', '#first-line', '::first-line')}} | {{Spec2('CSS3 Selectors')}} | Introducción de la sintexis de doble dos puntos. | +| {{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}} | {{Spec2('CSS2.1')}} | Sin cambios. | +| {{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}} | {{Spec2('CSS1')}} | Definición inicial, uso de la sintaxis de doble dos puntos. | + +**Compatibilidad** + +{{Compat("css.selectors.first-line")}} + +## Ver También + +- {{cssxref("::first-letter")}} diff --git a/files/es/web/css/align-items/index.html b/files/es/web/css/align-items/index.html deleted file mode 100644 index e746f2e169a4a7..00000000000000 --- a/files/es/web/css/align-items/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: align-items -slug: Web/CSS/align-items -tags: - - Cajas Flexibles CSS - - Propiedad CSS - - Referencia -translation_of: Web/CSS/align-items ---- -

La propiedad CSS align-items establece el valor {{cssxref("align-self")}} sobre todos los descendientes directos de un grupo. La propiedad align-self indica la alineación de un elemento dentro del bloque que lo contiene. En Flexbox controla la alineación de los elementos del {{glossary("Cross Axis")}}, en Grid Layout controla la alineación de los elementos en el eje Block dentro de su área grid.

- -

El ejemplo interactivo a continuación demuestra algunos de los valores de align-items utilizando el sistema grid.

- -
{{EmbedInteractiveExample("pages/css/align-items.html")}}
- -

Sintaxis

- -
/* Palabras Clave Basicas */
-align-items: normal;
-align-items: stretch;
-
-/* Alineamiento posicional */
-/* align-items no considera los valores de "left" o "right"  */
-align-items: center; /* Agrupa los elementos alrededor del centro */
-align-items: start; /* Agrupa los elementos desde el inicio */
-align-items: end; /* Agrupa los elementos desde el final */
-align-items: flex-start; /* Agrupa los elementos flex desde el incio */
-align-items: flex-end; /* Agrupa los elementos flex desde el final */
-align-items: self-start;
-align-items: self-end;
-
-/* Alineamiento de Linea Base */
-align-items: baseline;
-align-items: first baseline;
-align-items: last baseline; /* Alineamiento de desborde (solamente para alineamiento posicional) */
-align-items: safe center;
-align-items: unsafe center;
-
-/* Valores globales */
-align-items: inherit;
-align-items: initial;
-align-items: unset;
-
- -

Valores

- -
-
normal
-
El efecto de esta palabra clave depende del modo de diseño utilizado:
-
- -
    -
  • en diseños de absolutamente-posicionados, esta clave se comporta como start en cajas-absolutamente-posicionadas reemplazadas. y como stretch en todas las demas cajas-absolutamente-posicionadas.
  • -
  • En la posicion estatica de diseños absolutamenteposicionados, esta clave se comporta como stretch.
  • -
  • Para elementos flex, la clave se comporta como stretch.
  • -
  • Para elementos grid, Esta palabra clave conduce a un comportamiento similar al de stretch, excepto para cuadros con una relación de aspecto o un tamaño intrínseco donde se comporta como start.
  • -
  • La propiedad no se aplica a cajas de nivel de bloque ni a celdas de tabla.
  • -
- -
-
-
flex-start
-
El límite del margen transversal inicial del elemento flexible es unido al borde transversal final de la línea.
-
flex-end
-
El límite del margen transversal final del elemento flexible es unido al borde transversal final de la línea.
-
center
-
Los márgenes del elemento flexible son centrados dentro de la línea sobre su eje transversal. Si el tamaño transversal del elemento es mayor al del contenedor, se excederá por igual en ambas direcciones.
-
start
-
Los elementos se agrupan uno junto al otro hacia el borde inicial del contenedor de alineación en el eje apropiado.
-
end
-
Los elementos se agrupan uno junto al otro hacia el borde final del contenedor de alineación en el eje apropiado.
-
baseline
-
Todos los elementos flexibles son ajustados de modo que sus bases queden alineadas. El elemento con la distancia mayor entre su límite transversal inicial y su base es combinado con el borde transversal de la línea.
-
stretch
-
Las elementos flexibles son estirados de modo que el tamaño transversal de sus límites sea el mismo de la línea, manteniendo sus restricciones de anchura y altura.
-
-

Sintaxis formal

-
-
- -{{csssyntax}} - -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}{{Spec2('CSS3 Flexbox')}}Definición inicial
- -

Compatibilidad de navegadores

- -{{Compat("css.properties.align-items")}} - -

Véase también

- - diff --git a/files/es/web/css/align-items/index.md b/files/es/web/css/align-items/index.md new file mode 100644 index 00000000000000..9949f15a5d8625 --- /dev/null +++ b/files/es/web/css/align-items/index.md @@ -0,0 +1,92 @@ +--- +title: align-items +slug: Web/CSS/align-items +tags: + - Cajas Flexibles CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/align-items +--- +La propiedad [CSS](/es/docs/Web/CSS) **`align-items`** establece el valor {{cssxref("align-self")}} sobre todos los descendientes directos de un grupo. La propiedad align-self indica la alineación de un elemento dentro del bloque que lo contiene. En Flexbox controla la alineación de los elementos del {{glossary("Cross Axis")}}, en Grid Layout controla la alineación de los elementos en el eje Block dentro de su [área grid](/es/docs/Glossary/Grid_Areas). + +El ejemplo interactivo a continuación demuestra algunos de los valores de `align-items` utilizando el sistema grid. + +{{EmbedInteractiveExample("pages/css/align-items.html")}} + +## Sintaxis + +```css +/* Palabras Clave Basicas */ +align-items: normal; +align-items: stretch; + +/* Alineamiento posicional */ +/* align-items no considera los valores de "left" o "right" */ +align-items: center; /* Agrupa los elementos alrededor del centro */ +align-items: start; /* Agrupa los elementos desde el inicio */ +align-items: end; /* Agrupa los elementos desde el final */ +align-items: flex-start; /* Agrupa los elementos flex desde el incio */ +align-items: flex-end; /* Agrupa los elementos flex desde el final */ +align-items: self-start; +align-items: self-end; + +/* Alineamiento de Linea Base */ +align-items: baseline; +align-items: first baseline; +align-items: last baseline; /* Alineamiento de desborde (solamente para alineamiento posicional) */ +align-items: safe center; +align-items: unsafe center; + +/* Valores globales */ +align-items: inherit; +align-items: initial; +align-items: unset; +``` + +### Valores + +- `normal` + - : El efecto de esta palabra clave depende del modo de diseño utilizado: + + + +- en diseños de absolutamente-posicionados, esta clave se comporta como `start` en cajas-absolutamente-posicionadas _reemplazadas_. y como `stretch` en _todas las demas_ cajas-absolutamente-posicionadas. +- En la posicion estatica de diseños absolutamenteposicionados, esta clave se comporta como `stretch`. +- Para elementos flex, la clave se comporta como `stretch`. +- Para elementos grid, Esta palabra clave conduce a un comportamiento similar al de `stretch`, excepto para cuadros con una relación de aspecto o un tamaño intrínseco donde se comporta como `start`. +- La propiedad no se aplica a cajas de nivel de bloque ni a celdas de tabla. + + + +- `flex-start` + - : El límite del margen transversal inicial del elemento flexible es unido al borde transversal final de la línea. +- `flex-end` + - : El límite del margen transversal final del elemento flexible es unido al borde transversal final de la línea. +- `center` + - : Los márgenes del elemento flexible son centrados dentro de la línea sobre su eje transversal. Si el tamaño transversal del elemento es mayor al del contenedor, se excederá por igual en ambas direcciones. +- `start` + - : Los elementos se agrupan uno junto al otro hacia el borde inicial del contenedor de alineación en el eje apropiado. +- `end` + - : Los elementos se agrupan uno junto al otro hacia el borde final del contenedor de alineación en el eje apropiado. +- `baseline` + - : Todos los elementos flexibles son ajustados de modo que sus bases queden alineadas. El elemento con la distancia mayor entre su límite transversal inicial y su base es combinado con el borde transversal de la línea. +- `stretch` + - : Las elementos flexibles son estirados de modo que el tamaño transversal de sus límites sea el mismo de la línea, manteniendo sus restricciones de anchura y altura. + +### Sintaxis formal + +{{csssyntax}} + +## Especificaciones + +| Especificación | Estado | Comentarios | +| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------ | +| {{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}} | {{Spec2('CSS3 Flexbox')}} | Definición inicial | + +## Compatibilidad de navegadores + +{{Compat("css.properties.align-items")}} + +## Véase también + +- [Usando las cajas flexibles CSS](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS) diff --git a/files/es/web/css/angle/index.html b/files/es/web/css/angle/index.html deleted file mode 100644 index 913d44e6502aa1..00000000000000 --- a/files/es/web/css/angle/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: -slug: Web/CSS/angle -tags: - - Ángulo -translation_of: Web/CSS/angle ---- -

{{ CSSRef() }}

- -

Summary

- -

El tipo de dato <angle> de CSS representa valores de ángulo. Los valores positivos representan ángulos en sentido de las agujas del reloj, mientras los valores negativos representan ángulos en sentido opuesto. Su sintáxis es un valor de tipo numérico ({{cssxref("<number>")}}) seguido inmediatamente por la unidad (deg, grad, rad o turn). Al igual que cualquier otra dimensión en CSS, no debe haber espacio entre la unidad y el número.

- -

Para propiedades estáticas y una unidad dada, un ángulo puede ser representado por muchos valores: 90deg y -270deg, o 1turn y 4turn representan la misma posición final. Sin embargo, para posiciones dinámicas, como aplicar una transición ({{ cssxref("transition") }}) en la propiedad {{ cssxref("transform") }}, el efecto será diferente.

- -

Se deben usar las siguientes unidades:

- -
    -
  • deg, que representa un ángulo en grados. Un círculo completo equivale a 360deg. Ejemplos: 0deg, 90deg, 360deg.
  • -
  • grad, que representa un ángulo en grado centesimal. Un circulo completo equivale a 400grad. Ejemplos: 0grad, 100grad, 400grad.
  • -
  • rad, que representa un ángulo en radianes. Un círculo completo equivale a 2π radianes, que se aproxima a 6.2832rad. 1rad es 180/π grados. Ejemplos: 0rad, 1.0708rad, 6.2832rad.
  • -
  • turn, que representa el número de vueltas del ángulo. Un círculo completo equivale a 1turn. Ejemplos: 0turn, 0.25turn, 1turn.
  • -
- -

Aun cuando todas las unidades representan lo mismo para el valor 0, la unidad no debe ser omitida en ese caso, puesto que no es un valor de tipo {{cssxref("<length>")}}: 0 es inválido, y no representa 0deg, 0grad, 0rad o 0turn.

- -

Ejemplos

- - - - - - - - - - - - - - - - - - - - -
Angle90.png -

Ángulo recto: 90deg = 100grad = 0.25turn 1.5708rad

-
Angle180.pngÁngulo llano: 180deg = 200grad = 0.5turn 3.1416rad
AngleMinus90.pngÁngulo recto (hacia la izquierda): -90deg = -100grad = -0.25turn -1.5708rad
Angle0.png -

Ángulo nulo: 0deg = 0grad = 0turn = 0rad

- -
Nota: 0 no es un valor de ángulo válido.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentarios
{{ SpecName('CSS3 Values', '#angles', '<angle>') }}{{ Spec2('CSS3 Values') }}Definición inicial
- -

Compatibilidad de navegadores

- -{{Compat("css.types.angle")}} diff --git a/files/es/web/css/angle/index.md b/files/es/web/css/angle/index.md new file mode 100644 index 00000000000000..81ae4a10baee2c --- /dev/null +++ b/files/es/web/css/angle/index.md @@ -0,0 +1,41 @@ +--- +title: +slug: Web/CSS/angle +tags: + - Ángulo +translation_of: Web/CSS/angle +--- +{{ CSSRef() }} + +## Summary + +El tipo de dato `` de [CSS](/es/docs/Web/CSS) representa valores de ángulo. Los valores positivos representan ángulos en sentido de las agujas del reloj, mientras los valores negativos representan ángulos en sentido opuesto. Su sintáxis es un valor de tipo numérico ({{cssxref("<number>")}}) seguido inmediatamente por la unidad (`deg`, `grad`, `rad` o `turn`). Al igual que cualquier otra dimensión en CSS, no debe haber espacio entre la unidad y el número. + +Para propiedades estáticas y una unidad dada, un ángulo puede ser representado por muchos valores: `90deg` y `-270deg`, o `1turn` y `4turn` representan la misma posición final. Sin embargo, para posiciones dinámicas, como aplicar una transición ({{ cssxref("transition") }}) en la propiedad {{ cssxref("transform") }}, el efecto será diferente. + +Se deben usar las siguientes unidades: + +- [`deg`](), que representa un ángulo en [grados](https://es.wikipedia.org/wiki/Grado_sexagesimal). Un círculo completo equivale a `360deg`. Ejemplos: `0deg`, `90deg`, `360deg`. +- [`grad`](), que representa un ángulo en [grado centesimal](https://es.wikipedia.org/wiki/Grado_centesimal). Un circulo completo equivale a `400grad`. Ejemplos: `0grad`, `100grad`, `400grad`. +- [`rad`](), que representa un ángulo en [radianes](https://es.wikipedia.org/wiki/Radi%C3%A1n). Un círculo completo equivale a 2π radianes, que se aproxima a `6.2832rad`. `1rad` es 180/π grados. Ejemplos: `0rad`, `1.0708rad`, `6.2832rad`. +- [`turn`](), que representa el número de vueltas del ángulo. Un círculo completo equivale a `1turn`. Ejemplos: `0turn`, `0.25turn`, `1turn`. + +Aun cuando todas las unidades representan lo mismo para el valor `0`, la unidad no debe ser omitida en ese caso, puesto que no es un valor de tipo {{cssxref("<length>")}}: `0` es inválido, y no representa `0deg`, `0grad`, `0rad` o `0turn`. + +## Ejemplos + +| ![Angle90.png](/@api/deki/files/5704/=Angle90.png) | Ángulo recto: `90deg = 100grad = 0.25turn` ` ≈`` 1.5708rad ` | +| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | +| ![Angle180.png](/@api/deki/files/5706/=Angle180.png) | Ángulo llano: ` 180deg = 200grad = 0.5turn`` ``≈`` 3.1416rad ` | +| ![AngleMinus90.png](/@api/deki/files/5707/=AngleMinus90.png) | Ángulo recto (hacia la izquierda): `-90deg = -100grad = -0.25turn` ` ≈`` -1.5708rad ` | +| ![Angle0.png](/@api/deki/files/5708/=Angle0.png) | Ángulo nulo: ` 0deg = 0grad = 0turn`` ``=`` 0rad`

Nota: `0` no es un valor de ángulo válido. | + +## Especificaciones + +| Especificación | Estatus | Comentarios | +| ---------------------------------------------------------------------------- | ------------------------------------ | ------------------ | +| {{ SpecName('CSS3 Values', '#angles', '<angle>') }} | {{ Spec2('CSS3 Values') }} | Definición inicial | + +## Compatibilidad de navegadores + +{{Compat("css.types.angle")}} diff --git a/files/es/web/css/appearance/index.html b/files/es/web/css/appearance/index.html deleted file mode 100644 index c1d79943cd01a2..00000000000000 --- a/files/es/web/css/appearance/index.html +++ /dev/null @@ -1,1506 +0,0 @@ ---- -title: '-moz-appearance (-webkit-appearance)' -slug: Web/CSS/appearance -tags: - - Apariencia CSS - - CSS Referencia(2) - - No-estándar -translation_of: Web/CSS/appearance ---- -
{{non-standard_header}}{{CSSRef}}
- -

La propiedad CSS -moz-appearance se utiliza en Gecko (Firefox) para visualizar un elemento utilizando una plataforma nativa basada en el estilo del tema del sistema operativo.

- -

Esta propiedad es frecuentemente utilizada en hojas de estilo XUL para diseñar widgets personalizados con un estilo apropiado a la plataforma. También se utiliza en las implementaciones XBL de los widgets que se arman en la plataforma Mozilla.

- -
-

No utilizar esta propiedad en sitios Web: no sólo porque no es estándar, sinó porque su comportamiento cambia de un navegador a otro. Incluso la palabra clave none no tiene el mismo comportamiento en cada elemento de formulario a través de diferentes navegadores, y alguno no la soporta en absoluto.

-
- -

{{cssinfo}}

- -

Síntaxis

- -
/* Lista parcial de valores válidos en Gecko */
--moz-appearance: none;
--moz-appearance: button;
--moz-appearance: checkbox;
--moz-appearance: scrollbarbutton-up;
-
-/* Lista parcial de valores válidos en WebKit/Blink */
--webkit-appearance: none;
--webkit-appearance: button;
--webkit-appearance: checkbox;
--webkit-appearance: scrollbarbutton-up;
-
- -

Valores

- -

<appearance> es una de las siguientes palabras clave:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValueDemoDescription
none - - {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}No special styling is applied. This is the default. Note, however, {{bug(649849)}} and {{bug(605985)}}.
button - - {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}The element is drawn like a button.
button-arrow-down - - {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}
button-arrow-next - - {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}
button-arrow-previous - - {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}
button-arrow-up - - {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}
button-bevel - - {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}
button-focus - - {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}
caret - - {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}
checkbox - - {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}The element is drawn like a checkbox, including only the actual "checkbox" portion.
checkbox-container - - {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox.
checkbox-label - - {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}
checkmenuitem - - {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}
dualbutton - - {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}
groupbox - - {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}
listbox - - {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}
listitem - - {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}
menuarrow - - {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}
menubar - - {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}
menucheckbox - - {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}
menuimage - - {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}
menuitem - - {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}The element is styled as menu item, item is highlighted when hovered.
menuitemtext - - {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}
menulist - - {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}
menulist-button - - {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}The element is styled as a button that would indicate a menulist can be opened.
menulist-text - - {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}
menulist-textfield - - {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
menupopup - - {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}
menuradio - - {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}
menuseparator - - {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}
meterbar - - {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}New in Fx 16.
meterchunk - - {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}New in Fx 16
progressbar - - {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}The element is styled like a progress bar.
progressbar-vertical - - {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}
progresschunk - - {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}
progresschunk-vertical - - {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}
radio - - {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}The element is drawn like a radio button, including only the actual "radio button" portion.
radio-container - - {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}The element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a radio button.
radio-label - - {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}
radiomenuitem - - {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}
range - - {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}
range-thumb - - {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}
resizer - - {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}
resizerpanel - - {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}
scale-horizontal - - {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}
scalethumbend - - {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}
scalethumb-horizontal - - {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}
scalethumbstart - - {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}
scalethumbtick - - {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}
scalethumb-vertical - - {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}
scale-vertical - - {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}
scrollbarbutton-down - - {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}
scrollbarbutton-left - - {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}
scrollbarbutton-right - - {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}
scrollbarbutton-up - - {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}
scrollbarthumb-horizontal - - {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}
scrollbarthumb-vertical - - {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}
scrollbartrack-horizontal - - {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}
scrollbartrack-vertical - - {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}
searchfield - - {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}
separator - - {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}
sheet - - {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}
spinner - - {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}
spinner-downbutton - - {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}
spinner-textfield - - {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}
spinner-upbutton - - {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}
splitter - - {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}
statusbar - - {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}
statusbarpanel - - {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}
tab - - {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}
tabpanel - - {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}
tabpanels - - {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}
tab-scroll-arrow-back - - {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}
tab-scroll-arrow-forward - - {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}
textfield - - {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}
textfield-multiline - - {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}
toolbar - - {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}
toolbarbutton - - {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}
toolbarbutton-dropdown - - {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}
toolbargripper - - {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}
toolbox - - {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}
tooltip - - {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}
treeheader - - {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}
treeheadercell - - {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}
treeheadersortarrow - - {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}
treeitem - - {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}
treeline - - {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}
treetwisty - - {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}
treetwistyopen - - {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}
treeview - - {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}
-moz-mac-unified-toolbar - - {{EmbedLiveSample("sampleMacUnifiedToolbar",100,50,"","", "nobutton")}}Mac OS X only. This causes the toolbar and title bar to render using the unified toolbar style common to Mac OS X 10.4 and later applications.
{{gecko_minversion_inline("2.0")}} -moz-win-borderless-glass - - {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}Windows Vista and later only. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox - - {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}Windows Vista and later only. This toolbox style is meant to be used for the tab bar in a browser.
-moz-win-communicationstext - - {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}
-moz-win-communications-toolbox - - {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}Windows Vista and later only. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is -moz-win-communicationstext.
{{gecko_minversion_inline("6.0")}} -moz-win-exclude-glass - - {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}Windows Vista and later only. This styles is used to exclude the Aero Glass effect on the element.
-moz-win-glass - - {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}Windows Vista and later only. This style applies the Aero Glass effect to the element.
-moz-win-mediatext - - {{EmbedLiveSample("sampleWinMediaText",100,50,"","", "nobutton")}}
-moz-win-media-toolbox - - {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}Windows Vista and later only. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is -moz-win-mediatext.
-moz-window-button-box - - {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}
-moz-window-button-box-maximized - - {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}
-moz-window-button-close - - {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}
-moz-window-button-maximize - - {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}
-moz-window-button-minimize - - {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}
-moz-window-button-restore - - {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}
-moz-window-frame-bottom - - {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}
-moz-window-frame-left - - {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}
-moz-window-frame-right - - {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}
-moz-window-titlebar - - {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}
-moz-window-titlebar-maximized - - {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}
- -

Síntaxis formal

- -{{csssyntax}} - -

Ejemplos

- -
.exampleone {
-  -moz-appearance: toolbarbutton;
-}
-
- -

Especificaciones

- -

La propiedad appearance no se encuentra actualmente presente en ninguna nueva especificación CSS.

- -

Compatibilidad con navegadores

- -{{Compat("css.properties.appearance")}} - -

Ver también

- - diff --git a/files/es/web/css/appearance/index.md b/files/es/web/css/appearance/index.md new file mode 100644 index 00000000000000..34351ff3c5378c --- /dev/null +++ b/files/es/web/css/appearance/index.md @@ -0,0 +1,176 @@ +--- +title: '-moz-appearance (-webkit-appearance)' +slug: Web/CSS/appearance +tags: + - Apariencia CSS + - CSS Referencia(2) + - No-estándar +translation_of: Web/CSS/appearance +--- +{{non-standard_header}}{{CSSRef}} + +La propiedad CSS `-moz-appearance` se utiliza en Gecko (Firefox) para visualizar un elemento utilizando una plataforma nativa basada en el estilo del tema del sistema operativo. + +Esta propiedad es frecuentemente utilizada en hojas de estilo [XUL](/es/docs/Mozilla/Tech/XUL/Tutorial) para diseñar widgets personalizados con un estilo apropiado a la plataforma. También se utiliza en las implementaciones [XBL](/es/docs/XBL) de los widgets que se arman en la plataforma Mozilla. + +> **Nota:** _No utilizar_ esta propiedad en sitios Web: no sólo porque no es estándar, sinó porque su comportamiento cambia de un navegador a otro. Incluso la palabra clave `none` no tiene el mismo comportamiento en cada elemento de formulario a través de diferentes navegadores, y alguno no la soporta en absoluto. + +{{cssinfo}} + +## Síntaxis + +```css +/* Lista parcial de valores válidos en Gecko */ +-moz-appearance: none; +-moz-appearance: button; +-moz-appearance: checkbox; +-moz-appearance: scrollbarbutton-up; + +/* Lista parcial de valores válidos en WebKit/Blink */ +-webkit-appearance: none; +-webkit-appearance: button; +-webkit-appearance: checkbox; +-webkit-appearance: scrollbarbutton-up; +``` + +### Valores + +`` es una de las siguientes palabras clave: + +| Value | Description | +| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `none` | No special styling is applied. This is the default. Note, however, [error 649849](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) and [error 605985](https://bugzilla.mozilla.org/show_bug.cgi?id=605985). | +| `button` | The element is drawn like a button. | +| `button-arrow-down` | | +| `button-arrow-next` | | +| `button-arrow-previous` | | +| `button-arrow-up` | | +| `button-bevel` | | +| `button-focus` | | +| `caret` | | +| `checkbox` | The element is drawn like a checkbox, including only the actual "checkbox" portion. | +| `checkbox-container` | The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox. | +| `checkbox-label` | | +| `checkmenuitem` | | +| `dualbutton` | | +| `groupbox` | | +| `listbox` | | +| `listitem` | | +| `menuarrow` | | +| `menubar` | | +| `menucheckbox` | | +| `menuimage` | | +| `menuitem` | The element is styled as menu item, item is highlighted when hovered. | +| `menuitemtext` | | +| `menulist` | | +| `menulist-button` | The element is styled as a button that would indicate a menulist can be opened. | +| `menulist-text` | | +| `menulist-textfield` | The element is styled as the text field for a menulist. (Not implemented for the Windows platform) | +| `menupopup` | | +| `menuradio` | | +| `menuseparator` | | +| `meterbar` | New in Fx 16. | +| `meterchunk` | New in Fx 16 | +| `progressbar` | The element is styled like a progress bar. | +| `progressbar-vertical` | | +| `progresschunk` | | +| `progresschunk-vertical` | | +| `radio` | The element is drawn like a radio button, including only the actual "radio button" portion. | +| `radio-container` | The element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a radio button. | +| `radio-label` | | +| `radiomenuitem` | | +| range | | +| range-thumb | | +| `resizer` | | +| `resizerpanel` | | +| `scale-horizontal` | | +| `scalethumbend` | | +| `scalethumb-horizontal` | | +| `scalethumbstart` | | +| `scalethumbtick` | | +| `scalethumb-vertical` | | +| `scale-vertical` | | +| `scrollbarbutton-down` | | +| `scrollbarbutton-left` | | +| `scrollbarbutton-right` | | +| `scrollbarbutton-up` | | +| `scrollbarthumb-horizontal` | | +| `scrollbarthumb-vertical` | | +| `scrollbartrack-horizontal` | | +| `scrollbartrack-vertical` | | +| `searchfield` | | +| `separator` | | +| `sheet` | | +| `spinner` | | +| `spinner-downbutton` | | +| `spinner-textfield` | | +| `spinner-upbutton` | | +| `splitter` | | +| `statusbar` | | +| `statusbarpanel` | | +| `tab` | | +| `tabpanel` | | +| `tabpanels` | | +| `tab-scroll-arrow-back` | | +| `tab-scroll-arrow-forward` | | +| `textfield` | | +| `textfield-multiline` | | +| `toolbar` | | +| `toolbarbutton` | | +| `toolbarbutton-dropdown` | | +| `toolbargripper` | | +| `toolbox` | | +| `tooltip` | | +| `treeheader` | | +| `treeheadercell` | | +| `treeheadersortarrow` | | +| `treeitem` | | +| `treeline` | | +| `treetwisty` | | +| `treetwistyopen` | | +| `treeview` | | +| `-moz-mac-unified-toolbar` | **Mac OS X only**. This causes the toolbar and title bar to render using the unified toolbar style common to Mac OS X 10.4 and later applications. | +| `-moz-win-borderless-glass` | **Windows Vista and later only**. This style applies the Aero Glass effect -- but without a border -- to the element. | +| `-moz-win-browsertabbar-toolbox` | **Windows Vista and later only**. This toolbox style is meant to be used for the tab bar in a browser. | +| `-moz-win-communicationstext` | | +| `-moz-win-communications-toolbox` | **Windows Vista and later only**. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is `-moz-win-communicationstext`. | +| `-moz-win-exclude-glass` | **Windows Vista and later only.** This styles is used to exclude the Aero Glass effect on the element. | +| `-moz-win-glass` | **Windows Vista and later only**. This style applies the Aero Glass effect to the element. | +| `-moz-win-mediatext` | | +| `-moz-win-media-toolbox` | **Windows Vista and later only**. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is `-moz-win-mediatext`. | +| `-moz-window-button-box` | | +| `-moz-window-button-box-maximized` | | +| `-moz-window-button-close` | | +| `-moz-window-button-maximize` | | +| `-moz-window-button-minimize` | | +| `-moz-window-button-restore` | | +| `-moz-window-frame-bottom` | | +| `-moz-window-frame-left` | | +| `-moz-window-frame-right` | | +| `-moz-window-titlebar` | | +| `-moz-window-titlebar-maximized` | | + +### Síntaxis formal + +{{csssyntax}} + +## Ejemplos + +```css +.exampleone { + -moz-appearance: toolbarbutton; +} +``` + +## Especificaciones + +La propiedad `appearance` no se encuentra actualmente presente en ninguna nueva especificación CSS. + +## Compatibilidad con navegadores + +{{Compat("css.properties.appearance")}} + +## Ver también + +- [Definición de `appearance` en CSS 3 Interfaz Básico de Usuario](http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance) (Candidata a Recomendación desde 2004-05-11), desactualizada (La propiedad `appearance` se ha abandonado en las nuevas versiones de esta especificación.) +- [Características CSS3 abandonadas en la UI especificación.](http://wiki.csswg.org/spec/css4-ui#dropped-css3-features) diff --git a/files/es/web/css/backdrop-filter/index.html b/files/es/web/css/backdrop-filter/index.html deleted file mode 100644 index cdca9667a12e46..00000000000000 --- a/files/es/web/css/backdrop-filter/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: backdrop-filter -slug: Web/CSS/backdrop-filter -tags: - - CSS - - Diseño - - Filtro SVG - - Propiedad CSS - - Referencia - - SVG - - Web - - graficos -translation_of: Web/CSS/backdrop-filter ---- -{{CSSRef}} - -

La propiedad CSS de backdrop-filter le permite aplicar efectos gráficos como el desenfoque o el cambio de color al área detrás de un elemento. Debido a que se aplica a todo lo que está detrás del elemento, para ver el efecto debe hacer que el elemento o su fondo sean al menos parcialmente transparentes.

- -
/* Valor de palabra clave */
-backdrop-filter: none;
-
-/* URL al filtro SVG */
-backdrop-filter: url(commonfilters.svg#filter);
-
-/* valores <filter-function> */
-backdrop-filter: blur(2px);
-backdrop-filter: brightness(60%);
-backdrop-filter: contrast(40%);
-backdrop-filter: drop-shadow(4px 4px 10px blue);
-backdrop-filter: grayscale(30%);
-backdrop-filter: hue-rotate(120deg);
-backdrop-filter: invert(70%);
-backdrop-filter: opacity(20%);
-backdrop-filter: sepia(90%);
-backdrop-filter: saturate(80%);
-
-/* Múltiples filtros */
-backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
-
-/* Valores globales */
-backdrop-filter: inherit;
-backdrop-filter: initial;
-backdrop-filter: revert;
-backdrop-filter: unset;
-
- -

{{cssinfo}}

- -

Sintaxis

- -

Valores

- -
-
none
-
No se aplica filtro al fondo.
-
<filter-function-list>
-
Una lista separada por espacios de {{cssxref("<filter-function>")}} o un filtro SVG que se aplicará al fondo.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

CSS

- -
.box {
-  background-color: rgba(255, 255, 255, 0.3);
-  border-radius: 5px;
-  font-family: sans-serif;
-  text-align: center;
-  line-height: 1;
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  max-width: 50%;
-  max-height: 50%;
-  padding: 20px 40px;
-}
-
-html,
-body {
-  height: 100%;
-  width: 100%;
-}
-
-body {
-  background-image: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg');
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-.container {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-}
- -

HTML

- -
<div class="container">
-  <div class="box">
-    <p>backdrop-filter: blur(10px)</p>
-  </div>
-</div>
-
- -

Resultado

- -

{{EmbedLiveSample("Ejemplo", 600, 400)}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}{{Spec2('Filters 2.0')}}Definición inicial.
- -

Compatibilidad con navegadores

- - - -

{{Compat("css.properties.backdrop-filter")}}

- -

Ver también

- -
    -
  • {{cssxref("filter")}}
  • -
- diff --git a/files/es/web/css/backdrop-filter/index.md b/files/es/web/css/backdrop-filter/index.md new file mode 100644 index 00000000000000..7fe2ccd30fba61 --- /dev/null +++ b/files/es/web/css/backdrop-filter/index.md @@ -0,0 +1,129 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +tags: + - CSS + - Diseño + - Filtro SVG + - Propiedad CSS + - Referencia + - SVG + - Web + - graficos +translation_of: Web/CSS/backdrop-filter +--- +{{CSSRef}} + +La propiedad [CSS](/es/docs/Web/CSS) de **`backdrop-filter`** le permite aplicar efectos gráficos como el desenfoque o el cambio de color al área detrás de un elemento. Debido a que se aplica a todo lo que está _detrás_ del elemento, para ver el efecto debe hacer que el elemento o su fondo sean al menos parcialmente transparentes. + +```css +/* Valor de palabra clave */ +backdrop-filter: none; + +/* URL al filtro SVG */ +backdrop-filter: url(commonfilters.svg#filter); + +/* valores */ +backdrop-filter: blur(2px); +backdrop-filter: brightness(60%); +backdrop-filter: contrast(40%); +backdrop-filter: drop-shadow(4px 4px 10px blue); +backdrop-filter: grayscale(30%); +backdrop-filter: hue-rotate(120deg); +backdrop-filter: invert(70%); +backdrop-filter: opacity(20%); +backdrop-filter: sepia(90%); +backdrop-filter: saturate(80%); + +/* Múltiples filtros */ +backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); + +/* Valores globales */ +backdrop-filter: inherit; +backdrop-filter: initial; +backdrop-filter: revert; +backdrop-filter: unset; +``` + +{{cssinfo}} + +## Sintaxis + +### Valores + +- `none` + - : No se aplica filtro al fondo. +- `` + - : Una lista separada por espacios de {{cssxref("<filter-function>")}} o un [filtro SVG](/es/docs/Web/SVG/Element/filter) que se aplicará al fondo. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### CSS + +```css +.box { + background-color: rgba(255, 255, 255, 0.3); + border-radius: 5px; + font-family: sans-serif; + text-align: center; + line-height: 1; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + max-width: 50%; + max-height: 50%; + padding: 20px 40px; +} + +html, +body { + height: 100%; + width: 100%; +} + +body { + background-image: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg'); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; +} + +.container { + align-items: center; + display: flex; + justify-content: center; + height: 100%; + width: 100%; +} +``` + +### HTML + +```html +
+
+

backdrop-filter: blur(10px)

+
+
+``` + +### Resultado + +{{EmbedLiveSample("Ejemplo", 600, 400)}} + +## Especificaciones + +| Especificación | Estado | Comentario | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}} | {{Spec2('Filters 2.0')}} | Definición inicial. | + +## Compatibilidad con navegadores + +{{Compat("css.properties.backdrop-filter")}} + +## Ver también + +- {{cssxref("filter")}} diff --git a/files/es/web/css/backface-visibility/index.html b/files/es/web/css/backface-visibility/index.html deleted file mode 100644 index c91df3ed9a2262..00000000000000 --- a/files/es/web/css/backface-visibility/index.html +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: backface-visibility -slug: Web/CSS/backface-visibility -tags: - - CSS - - Experimental - - Propiedad CSS - - Referencia -translation_of: Web/CSS/backface-visibility ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

Resumen

- -

La propiedad CSS backface-visibility determina si la cara posterior de un elemento es visible de frente al usuario. La cara posterior de un elemento siempre es un fondo transparente, permitiendo, cuando es visible, que se muestre una imagen de espejo de la cara frontal.

- -

Hay casos en los que no queremos que la cara frontal de un elemento sea visible a través de la cara posterior, como cuando se hace el efecto de voltear una tarjeta (estableciendo dos elementos lado a lado).

- -

Esta propiedad no tiene efecto en transformaciones 2D, pues estos no tienen perspectiva.

- -

{{cssinfo}}

- -

Sintaxis

- -
backface-visibility: visible;
-backface-visibility: hidden;
-
- -

Valores

- -

Esta propiedad puede tener dos valores diferentes (y exclusivos):

- -
    -
  • visible significa que la cara posterior es visible, permitiendo que la cara frontal se muestre invertida
  • -
  • hidden significa que la cara posterior no es visible, ocultando la cara frontal
  • -
- -

Sintaxis formal

- -
-
- -{{csssyntax}} - -

Ejemplos

- -

Cubo con caras transparentes

- -

Contenido HTML

- -
<table>
-  <tbody>
-    <tr>
-      <th><code>backface-visibility: visible;</code></th>
-      <th><code>backface-visibility: hidden;</code></th>
-    </tr>
-    <tr>
-      <td>
-        <div class="container">
-          <div class="cube showbf">
-            <div class="face front">1</div>
-            <div class="face back">2</div>
-            <div class="face right">3</div>
-            <div class="face left">4</div>
-            <div class="face top">5</div>
-            <div class="face bottom">6</div>
-          </div>
-        </div>
-        <p>All the faces are transparent and the three back faces are visible through the front ones.</p>
-      </td>
-      <td>
-        <div class="container">
-          <div class="cube hidebf">
-            <div class="face front">1</div>
-            <div class="face back">2</div>
-            <div class="face right">3</div>
-            <div class="face left">4</div>
-            <div class="face top">5</div>
-            <div class="face bottom">6</div>
-          </div>
-        </div>
-        <p>No face is opaque, but the three back faces are always hidden now.</p>
-      </td>
-    </tr>
-  </tbody>
-</table>
- -

Contenido CSS

- -
/* Shorthand classes that will show or hide the three back faces of the "cube" */
-.hidebf div {
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-}
-
-.showbf div {
-  backface-visibility: visible;
-  -webkit-backface-visibility: visible;
-}
-
-/* Define the container div, the cube div, and a generic face */
-.container {
-  width: 150px;
-  height: 150px;
-  margin: 75px 0 0 75px;
-  border: none;
-}
-
-.cube {
-  width: 100%;
-  height: 100%;
-  perspective: 550px;
-  perspective-origin: 150% 150%;
-  transform-style: preserve-3d;
-  -webkit-perspective: 300px;
-  -webkit-perspective-origin: 150% 150%;
-  -webkit-transform-style: preserve-3d;
-}
-
-.face {
-  display: block;
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  border: none;
-  line-height: 100px;
-  font-family: sans-serif;
-  font-size: 60px;
-  color: white;
-  text-align: center;
-}
-
-/* Define each face based on direction */
-.front {
-  background: rgba(0, 0, 0, 0.3);
-  transform: translateZ(50px);
-  -webkit-transform: translateZ(50px);
-}
-
-.back {
-  background: rgba(0, 255, 0, 1);
-  color: black;
-  transform: rotateY(180deg) translateZ(50px);
-  -webkit-transform: rotateY(180deg) translateZ(50px);
-}
-
-.right {
-  background: rgba(196, 0, 0, 0.7);
-  transform: rotateY(90deg) translateZ(50px);
-  -webkit-transform: rotateY(90deg) translateZ(50px);
-}
-
-.left {
-  background: rgba(0, 0, 196, 0.7);
-  transform: rotateY(-90deg) translateZ(50px);
-  -webkit-transform: rotateY(-90deg) translateZ(50px);
-}
-
-.top {
-  background: rgba(196, 196, 0, 0.7);
-  transform: rotateX(90deg) translateZ(50px);
-  -webkit-transform: rotateX(90deg) translateZ(50px)
-}
-
-.bottom {
-  background: rgba(196, 0, 196, 0.7);
-  transform: rotateX(-90deg) translateZ(50px);
-  -webkit-transform: rotateX(-90deg) translateZ(50px);
-}
-
-/* Make the table a little nicer */
-th, p, td {
-  background-color: #EEEEEE;
-  margin: 0px;
-  padding: 6px;
-  font-family: sans-serif;
-  text-align: left;
-}
- -

Resultado

- -

{{EmbedLiveSample('Cube_with_transparent_faces', 620, 460)}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}}{{Spec2('CSS3 Transforms')}}Definición inicial
- -

Compatibilidad de navegadores

- -{{Compat("css.properties.backface-visibility")}} - -

Véase también

- - diff --git a/files/es/web/css/backface-visibility/index.md b/files/es/web/css/backface-visibility/index.md new file mode 100644 index 00000000000000..edb9fbbf0d25b1 --- /dev/null +++ b/files/es/web/css/backface-visibility/index.md @@ -0,0 +1,196 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +tags: + - CSS + - Experimental + - Propiedad CSS + - Referencia +translation_of: Web/CSS/backface-visibility +--- +{{CSSRef}}{{SeeCompatTable}} + +## Resumen + +La propiedad [CSS](/es/docs/CSS) **`backface-visibility`** determina si la cara posterior de un elemento es visible de frente al usuario. La cara posterior de un elemento siempre es un fondo transparente, permitiendo, cuando es visible, que se muestre una imagen de espejo de la cara frontal. + +Hay casos en los que no queremos que la cara frontal de un elemento sea visible a través de la cara posterior, como cuando se hace el efecto de voltear una tarjeta (estableciendo dos elementos lado a lado). + +Esta propiedad no tiene efecto en transformaciones 2D, pues estos no tienen perspectiva. + +{{cssinfo}} + +## Sintaxis + +```css +backface-visibility: visible; +backface-visibility: hidden; +``` + +### Valores + +Esta propiedad puede tener dos valores diferentes (y exclusivos): + +- `visible` significa que la cara posterior es visible, permitiendo que la cara frontal se muestre invertida +- `hidden` significa que la cara posterior no es visible, ocultando la cara frontal + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplos + +### Cubo con caras transparentes + +#### Contenido HTML + +```html + + + + + + + + + + + +
backface-visibility: visible;backface-visibility: hidden;
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+

All the faces are transparent and the three back faces are visible through the front ones.

+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+

No face is opaque, but the three back faces are always hidden now.

+
+``` + +#### Contenido CSS + +```css +/* Shorthand classes that will show or hide the three back faces of the "cube" */ +.hidebf div { + backface-visibility: hidden; + -webkit-backface-visibility: hidden; +} + +.showbf div { + backface-visibility: visible; + -webkit-backface-visibility: visible; +} + +/* Define the container div, the cube div, and a generic face */ +.container { + width: 150px; + height: 150px; + margin: 75px 0 0 75px; + border: none; +} + +.cube { + width: 100%; + height: 100%; + perspective: 550px; + perspective-origin: 150% 150%; + transform-style: preserve-3d; + -webkit-perspective: 300px; + -webkit-perspective-origin: 150% 150%; + -webkit-transform-style: preserve-3d; +} + +.face { + display: block; + position: absolute; + width: 100px; + height: 100px; + border: none; + line-height: 100px; + font-family: sans-serif; + font-size: 60px; + color: white; + text-align: center; +} + +/* Define each face based on direction */ +.front { + background: rgba(0, 0, 0, 0.3); + transform: translateZ(50px); + -webkit-transform: translateZ(50px); +} + +.back { + background: rgba(0, 255, 0, 1); + color: black; + transform: rotateY(180deg) translateZ(50px); + -webkit-transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(196, 0, 0, 0.7); + transform: rotateY(90deg) translateZ(50px); + -webkit-transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0, 0, 196, 0.7); + transform: rotateY(-90deg) translateZ(50px); + -webkit-transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(196, 196, 0, 0.7); + transform: rotateX(90deg) translateZ(50px); + -webkit-transform: rotateX(90deg) translateZ(50px) +} + +.bottom { + background: rgba(196, 0, 196, 0.7); + transform: rotateX(-90deg) translateZ(50px); + -webkit-transform: rotateX(-90deg) translateZ(50px); +} + +/* Make the table a little nicer */ +th, p, td { + background-color: #EEEEEE; + margin: 0px; + padding: 6px; + font-family: sans-serif; + text-align: left; +} +``` + +#### Resultado + +{{EmbedLiveSample('Cube_with_transparent_faces', 620, 460)}} + +## Especificaciones + +| Especificación | Estatus | Comentarios | +| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------ | +| {{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}} | {{Spec2('CSS3 Transforms')}} | Definición inicial | + +## Compatibilidad de navegadores + +{{Compat("css.properties.backface-visibility")}} + +## Véase también + +- [Uso de CSS transforms](/es/docs/CSS/Using_CSS_transforms) diff --git a/files/es/web/css/background-attachment/index.html b/files/es/web/css/background-attachment/index.html deleted file mode 100644 index af24aa790743c7..00000000000000 --- a/files/es/web/css/background-attachment/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: background-attachment -slug: Web/CSS/background-attachment -tags: - - CSS -translation_of: Web/CSS/background-attachment ---- -

{{CSSRef}}

- -

Resumen

- -

La propiedad CSS background-attachment determina si la posición de la imagen de fondo será fija dentro de la pantalla o se desplazará con su bloque contenedor.

- -
    -
  • {{ Cssxref("initial", "Inicial") }}: desplazamiento (scroll)
  • -
  • Se aplica a: todos los elementos
  • -
  • {{ Cssxref("inheritance", "Herencia") }}: no
  • -
  • Porcentajes: N/A
  • -
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
  • -
  • {{ Cssxref("computed value", "Valor calculada") }}: como se haya especificado
  • -
- -

Sintaxis

- -
background-attachment: scroll | fixed | inherit
-
- -

Valores

- -
-
scroll
-
Si scroll es especificado, la imagen de fondo se moverá dentro de la pantalla junto al bloque que la contiene.
-
fixed
-
Si fixed es especificado, la imagen de fondo estará fija en la pantalla y no se moverá con el bloque contenedor.
-
- -

Ejemplos

- -

Ejemplo simple

- -

CSS

- -
p {
-  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
-  background-attachment: fixed;
-}
-
- -

HTML

- -
<p>
-  There were doors all round the hall, but they were all locked; and when
-  Alice had been all the way down one side and up the other, trying every
-  door, she walked sadly down the middle, wondering how she was ever to
-  get out again.
-</p>
- -

Resultado

- -

{{EmbedLiveSample("Simple_example")}}

- -

Soporta múltiples imagenes de fondo

- -

Esta propiedad soporta multiples imágenes de fondo. Puedes especificar un <attachment> diferente por cada imagen de fondo, separado por comas. Cada imagen es asociada con el correspondiente valor de <attachment>, especificado desde el primero hasta el último.

- -

CSS

- -
p {
-  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
-  background-attachment: fixed, scroll;
-  background-repeat: no-repeat, repeat-y;
-}
- -

HTML

- -
<p>
-  There were doors all round the hall, but they were all locked; and when
-  Alice had been all the way down one side and up the other, trying every
-  door, she walked sadly down the middle, wondering how she was ever to
-  get out again.
-
-  Suddenly she came upon a little three-legged table, all made of solid
-  glass; there was nothing on it except a tiny golden key, and Alice's
-  first thought was that it might belong to one of the doors of the hall;
-  but, alas! either the locks were too large, or the key was too small,
-  but at any rate it would not open any of them. However, on the second
-  time round, she came upon a low curtain she had not noticed before, and
-  behind it was a little door about fifteen inches high: she tried the
-  little golden key in the lock, and to her great delight it fitted!
-</p>
- -

Resultado

- -

{{EmbedLiveSample("Multiple_background_image_support")}}

- -

Especificaciones

- - - -

Compatibilidad de navegadores

- - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
- -

Ver también

- -

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

diff --git a/files/es/web/css/background-attachment/index.md b/files/es/web/css/background-attachment/index.md new file mode 100644 index 00000000000000..74a8ec87b7cb99 --- /dev/null +++ b/files/es/web/css/background-attachment/index.md @@ -0,0 +1,117 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS +translation_of: Web/CSS/background-attachment +--- +{{CSSRef}} + +### Resumen + +La propiedad CSS **`background-attachment`** determina si la posición de la imagen de fondo será **fija** dentro de la pantalla o **se desplazará** con su bloque contenedor. + +- {{ Cssxref("initial", "Inicial") }}: desplazamiento (_scroll_) +- Se aplica a: todos los elementos +- {{ Cssxref("inheritance", "Herencia") }}: no +- Porcentajes: N/A +- Medio: {{ Cssxref("Media:Visual", "visual") }} +- {{ Cssxref("computed value", "Valor calculada") }}: como se haya especificado + +### Sintaxis + +``` +background-attachment: scroll | fixed | inherit +``` + +### Valores + +- scroll + - : Si `scroll` es especificado, la imagen de fondo se moverá dentro de la pantalla junto al bloque que la contiene. +- fixed + - : Si `fixed` es especificado, la imagen de fondo estará fija en la pantalla y no se moverá con el bloque contenedor. + +## Ejemplos + +### Ejemplo simple + +#### CSS + +```css +p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); + background-attachment: fixed; +} +``` + +#### HTML + +```html +

+ There were doors all round the hall, but they were all locked; and when + Alice had been all the way down one side and up the other, trying every + door, she walked sadly down the middle, wondering how she was ever to + get out again. +

+``` + +#### Resultado + +{{EmbedLiveSample("Simple_example")}} + +### Soporta múltiples imagenes de fondo + +Esta propiedad soporta multiples imágenes de fondo. Puedes especificar un `` diferente por cada imagen de fondo, separado por comas. Cada imagen es asociada con el correspondiente valor de \, especificado desde el primero hasta el último. + +#### CSS + +```css +p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); + background-attachment: fixed, scroll; + background-repeat: no-repeat, repeat-y; +} +``` + +#### HTML + +```html +

+ There were doors all round the hall, but they were all locked; and when + Alice had been all the way down one side and up the other, trying every + door, she walked sadly down the middle, wondering how she was ever to + get out again. + + Suddenly she came upon a little three-legged table, all made of solid + glass; there was nothing on it except a tiny golden key, and Alice's + first thought was that it might belong to one of the doors of the hall; + but, alas! either the locks were too large, or the key was too small, + but at any rate it would not open any of them. However, on the second + time round, she came upon a low curtain she had not noticed before, and + behind it was a little door about fifteen inches high: she tried the + little golden key in the lock, and to her great delight it fitted! +

+``` + +#### Resultado + +{{EmbedLiveSample("Multiple_background_image_support")}} + +### Especificaciones + +- [CSS 1](http://www.w3.org/TR/CSS1#background-attachment) +- [CSS 2.1](http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment) +- [CSS 3](http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-attachment) + +### Compatibilidad de navegadores + +| Navegador | Versión mínima | +| ----------------- | -------------- | +| Internet Explorer | 4 | +| Firefox | 1 | +| Netscape | 6 | +| Opera | 3.5 | + +### Ver también + +{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }} diff --git a/files/es/web/css/background-blend-mode/index.html b/files/es/web/css/background-blend-mode/index.html deleted file mode 100644 index 231456eef7e398..00000000000000 --- a/files/es/web/css/background-blend-mode/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: background-blend-mode -slug: Web/CSS/background-blend-mode -tags: - - Composición CSS - - Propiedad CSS -translation_of: Web/CSS/background-blend-mode ---- -

{{CSSRef()}}

- -

Resumen

- -

La propiedad CSS background-blend-mode describe cómo las imágenes de fondo y el color de fondo del elemento deben mezclar entre sí.

- -

Los modos de fusión deben ser definidos en el mismo orden que la propiedad CSS {{cssxref("background-image")}}. Si la cantidad de modos de fusión y de imagenes de fondo no son iguales, se repetirán y/o truncarán hasta igualar las cantidades.

- -

{{cssinfo}}

- -

Sintaxis

- -
/* Un valor */
-background-blend-mode: normal;
-
-/* Dos valores, uno por fondo */
-background-blend-mode: darken, luminosity;
-
-/* Valores globales */
-background-blend-mode: initial;
-background-blend-mode: inherit;
-background-blend-mode: unset;
-
- -

Valores

- -
-
<blend-mode>
-
Es un {{cssxref("<blend-mode>")}} que denota el modo de fusión que se aplicará. Puede haber varios valores, separados por coma.
-
- -

Ejemplos

- -<select id="select"> - <option>normal</option> - <option>multiply</option> - <option selected>screen</option> - <option>overlay</option> - <option>darken</option> - <option>lighten</option> - <option>color-dodge</option> - <option>color-burn</option> - <option>hard-light</option> - <option>soft-light</option> - <option>difference</option> - <option>exclusion</option> - <option>hue</option> - <option>saturation</option> - <option>color</option> - <option>luminosity</option> -</select> - -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: screen;
-}
- -
document.getElementById("select").onchange = function(event) {
-    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
-}
-console.log(document.getElementById('div'));
- -

{{ EmbedLiveSample('Examples', "330", "330") }}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }}{{ Spec2('Compositing') }}Definición inicial
- -

Compatibilidad en navegadores

- -{{Compat("css.properties.background-blend-mode")}} - -

Véase también

- -
    -
  • {{cssxref("<blend-mode>")}}
  • -
  • {{cssxref("mix-blend-mode")}}
  • -
diff --git a/files/es/web/css/background-blend-mode/index.md b/files/es/web/css/background-blend-mode/index.md new file mode 100644 index 00000000000000..13af830eaefdcd --- /dev/null +++ b/files/es/web/css/background-blend-mode/index.md @@ -0,0 +1,94 @@ +--- +title: background-blend-mode +slug: Web/CSS/background-blend-mode +tags: + - Composición CSS + - Propiedad CSS +translation_of: Web/CSS/background-blend-mode +--- +{{CSSRef()}} + +## Resumen + +La propiedad CSS **`background-blend-mode`** describe cómo las imágenes de fondo y el color de fondo del elemento deben mezclar entre sí. + +Los modos de fusión deben ser definidos en el mismo orden que la propiedad CSS {{cssxref("background-image")}}. Si la cantidad de modos de fusión y de imagenes de fondo no son iguales, se repetirán y/o truncarán hasta igualar las cantidades. + +{{cssinfo}} + +## Sintaxis + +```css +/* Un valor */ +background-blend-mode: normal; + +/* Dos valores, uno por fondo */ +background-blend-mode: darken, luminosity; + +/* Valores globales */ +background-blend-mode: initial; +background-blend-mode: inherit; +background-blend-mode: unset; +``` + +### Valores + +- `` + - : Es un {{cssxref("<blend-mode>")}} que denota el modo de fusión que se aplicará. Puede haber varios valores, separados por coma. + +## Ejemplos + +```html + +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: screen; +} +``` + +```js +document.getElementById("select").onchange = function(event) { + document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; +} +console.log(document.getElementById('div')); +``` + +{{ EmbedLiveSample('Examples', "330", "330") }} + +## Especificaciones + +| Especificación | Estado | Comentarios | +| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------ | +| {{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }} | {{ Spec2('Compositing') }} | Definición inicial | + +## Compatibilidad en navegadores + +{{Compat("css.properties.background-blend-mode")}} + +## Véase también + +- {{cssxref("<blend-mode>")}} +- {{cssxref("mix-blend-mode")}} diff --git a/files/es/web/css/background-clip/index.html b/files/es/web/css/background-clip/index.html deleted file mode 100644 index 31216e1069e0cc..00000000000000 --- a/files/es/web/css/background-clip/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: background-clip -slug: Web/CSS/background-clip -tags: - - CSS - - Diseño - - Fondo CSS - - Propiedad CSS - - Referencia - - Referência(2) - - Web -translation_of: Web/CSS/background-clip ---- -
{{ CSSRef() }}
- -

Resumen

- -

La propiedad CSS background-clip especifica si el fondo de un elemento, ya sea el color o imagen, se extiende por debajo su borde.

- -

Si la imagen o color de fondo no esta definido, esta propiedad solo tendrá un efecto visual cuando el borde tenga regiones transparentes o regiones parcialmente opacas (debido a {{ Cssxref("border-style") }} o {{ Cssxref("border-image") }}); de lo contrario el borde cubre la diferencia.

- -

{{cssinfo}}

- -

Sintaxis

- -
Sintaxis Formal: {{csssyntax("background-clip")}}
- -
background-clip: border-box
-background-clip: padding-box
-background-clip: content-box
-
-background-clip: inherit
-
- -

Valores

- -
-
border-box
-
El fondo se extiende hasta el borde exterior de el contenedor (pero por debajo de la frontera, en orden z).
-
padding-box
-
El fondo no se muestra a través del borde (el fondo se extiende hasta el borde exterior del padding).
-
content-box
-
El fondo se dibuja desde donde inicia el contenido.
-
- -

Ejemplo

- -

Contenido HTML

- -
<p class="border-box">The yellow background extends behind the border.</p>
-<p class="padding-box">The yellow background extends to the inside edge of the border.</p>
-<p class="content-box">The yellow background extends only to the edge of the content box.</p>
-
- -

Contenido CSS

- -
p {
-   border: 5px navy;
-   border-style: dotted double;
-   margin: 2em;
-   padding: 2em;
-   background: #F8D575;
-}
-.border-box { background-clip: border-box; }
-.padding-box { background-clip: padding-box; }
-.content-box { background-clip: content-box; }
-
- -

Salida

- -

{{ EmbedLiveSample('Ejemplo', 540, 450) }}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip') }}{{ Spec2('CSS3 Backgrounds') }}
- -

Compatibilidad del navegador

- -{{Compat("css.properties.background-clip")}} - -

Ver también

- - diff --git a/files/es/web/css/background-clip/index.md b/files/es/web/css/background-clip/index.md new file mode 100644 index 00000000000000..ffb43229521295 --- /dev/null +++ b/files/es/web/css/background-clip/index.md @@ -0,0 +1,89 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +tags: + - CSS + - Diseño + - Fondo CSS + - Propiedad CSS + - Referencia + - Referência(2) + - Web +translation_of: Web/CSS/background-clip +--- +{{ CSSRef() }} + +## Resumen + +La propiedad CSS `background-clip` especifica si el fondo de un elemento, ya sea el color o imagen, se extiende por debajo su borde. + +Si la imagen o color de fondo no esta definido, esta propiedad solo tendrá un efecto visual cuando el borde tenga regiones transparentes o regiones parcialmente opacas (debido a {{ Cssxref("border-style") }} o {{ Cssxref("border-image") }}); de lo contrario el borde cubre la diferencia. + +{{cssinfo}} + +## Sintaxis + +``` +Sintaxis Formal: {{csssyntax("background-clip")}} +``` + +``` +background-clip: border-box +background-clip: padding-box +background-clip: content-box + +background-clip: inherit +``` + +### Valores + +- `border-box` + - : El fondo se extiende hasta el borde exterior de el contenedor (pero por debajo de la frontera, en orden z). +- `padding-box` + - : El fondo no se muestra a través del borde (el fondo se extiende hasta el borde exterior del padding). +- `content-box` + - : El fondo se dibuja desde donde inicia el contenido. + +## Ejemplo + +### Contenido HTML + +```html +

The yellow background extends behind the border.

+

The yellow background extends to the inside edge of the border.

+

The yellow background extends only to the edge of the content box.

+``` + +### Contenido CSS + +```css +p { + border: 5px navy; + border-style: dotted double; + margin: 2em; + padding: 2em; + background: #F8D575; +} +.border-box { background-clip: border-box; } +.padding-box { background-clip: padding-box; } +.content-box { background-clip: content-box; } +``` + +#### Salida + +{{ EmbedLiveSample('Ejemplo', 540, 450) }} + +## Especificaciones + +| Especificación | Estado | Comentario | +| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------- | +| {{ SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip') }} | {{ Spec2('CSS3 Backgrounds') }} | | + +## Compatibilidad del navegador + +{{Compat("css.properties.background-clip")}} + +## Ver también + +- {{ cssxref("clip") }} +- [Modelo de caja CSS](/es/docs/Web/CSS/box_model) diff --git a/files/es/web/css/background-color/index.html b/files/es/web/css/background-color/index.html deleted file mode 100644 index 4e20ea9d01e9df..00000000000000 --- a/files/es/web/css/background-color/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: background-color -slug: Web/CSS/background-color -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/background-color ---- -

- -

Resumen

- -

Background-color es un propiedad de CSS que define el color de fondo de un elemento, puede ser el valor de un color o la palabra "transparente".

- -
    -
  • {{ Cssxref("initial", "Valor inicial") }}: transparente
  • -
  • Se aplica a: todos los elementos
  • -
  • {{ Cssxref("inheritance", "Herencia") }}: no
  • -
  • Percentages: N/A
  • -
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
  • -
  • {{ Cssxref("computed value", "Valor calculado") }}: como se haya especificado
  • -
- -

Sintaxis

- -
background-color: color | transparent | inherit
-
- -

Valores

- -
-
<color>
-
Se puede especificar el color de fondo como un valor RGB hexa-decimal o regular, o utilizando una de las palabras claves predefinidas de color.
-
- -
-
transparent
-
El valor por defecto del color de fondo (background-color) es transparente tomando así el color del elemento que está justo debajo de él en el apilamiento.
-
- -

Ejemplos

- -

HTML

- -
<div class="exampleone">
- Lorem ipsum dolor sit amet, consectetuer
-</div>
-
-<div class="exampletwo">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
-
-<div class="examplethree">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
- -

CSS

- -
.exampleone {
-  background-color: teal;
-  color: white;
-}
-
-.exampletwo {
-  background-color: rgb(153,102,153);
-  color: rgb(255,255,204);
-}
-
-.examplethree {
-  background-color: #777799;
-  color: #FFFFFF;
-}
-
- -

Result

- -

{{EmbedLiveSample("Ejemplos","200","150")}}

- -

Notas

- -

(Add links to good colour reference sites here.)

- -

- -

Especificaciones

- - - -

Compatibilidad de navegadores

- -

TBD: This may be removed in favour of a centralized compatibility chart.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Navegadorsoporta background-color
Internet Explorer 6parcialmente
Internet Explorer 7parcialmente
Firefox 1.5
Firefox 2
Opera 8.5parcialmente
Opera 9parcialmente
Konqueror 3.5
Safari 2
- -

Ver también

- -

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

diff --git a/files/es/web/css/background-color/index.md b/files/es/web/css/background-color/index.md new file mode 100644 index 00000000000000..1ba50fbbb46ae8 --- /dev/null +++ b/files/es/web/css/background-color/index.md @@ -0,0 +1,105 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - CSS:Referencias + - Todas_las_Categorías +translation_of: Web/CSS/background-color +--- +### Resumen + +`Background-color` es un propiedad de CSS que define el color de fondo de un elemento, puede ser el valor de un color o la palabra "`transparent`e". + +- {{ Cssxref("initial", "Valor inicial") }}: transparente +- Se aplica a: todos los elementos +- {{ Cssxref("inheritance", "Herencia") }}: no +- Percentages: N/A +- Medio: {{ Cssxref("Media:Visual", "visual") }} +- {{ Cssxref("computed value", "Valor calculado") }}: como se haya especificado + +### Sintaxis + +``` +background-color: color | transparent | inherit +``` + +### Valores + +- \ + - : Se puede especificar el color de fondo como un valor RGB hexa-decimal o regular, o utilizando una de las palabras claves predefinidas de color. + + + +- transparent + - : El valor por defecto del color de fondo (`background-color`) es `transparent`e tomando así el color del elemento que está justo debajo de él en el apilamiento. + +## Ejemplos + +### HTML + +```html +
+ Lorem ipsum dolor sit amet, consectetuer +
+ +
+ Lorem ipsum dolor sit amet, consectetuer +
+ +
+ Lorem ipsum dolor sit amet, consectetuer +
+``` + +### CSS + +```css +.exampleone { + background-color: teal; + color: white; +} + +.exampletwo { + background-color: rgb(153,102,153); + color: rgb(255,255,204); +} + +.examplethree { + background-color: #777799; + color: #FFFFFF; +} +``` + +### Result + +{{EmbedLiveSample("Ejemplos","200","150")}} + +### Notas + +(Add links to good colour reference sites here.) + +### Especificaciones + +- [CSS 1 (en)](http://www.w3.org/TR/CSS1#background-color) +- [CSS 2.1 (en)](http://www.w3.org/TR/CSS21/colors.html#propdef-background-color) +- [CSS 3 (en)](http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-color) + +### Compatibilidad de navegadores + +TBD: This may be removed in favour of a centralized compatibility chart. + +| Navegador | soporta background-color | +| ------------------- | ------------------------ | +| Internet Explorer 6 | parcialmente | +| Internet Explorer 7 | parcialmente | +| Firefox 1.5 | Sí | +| Firefox 2 | Sí | +| Opera 8.5 | parcialmente | +| Opera 9 | parcialmente | +| Konqueror 3.5 | Sí | +| Safari 2 | Sí | + +### Ver también + +{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }} diff --git a/files/es/web/css/background-image/index.html b/files/es/web/css/background-image/index.html deleted file mode 100644 index 643cf4bc820637..00000000000000 --- a/files/es/web/css/background-image/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: background-image -slug: Web/CSS/background-image -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/background-image ---- -

{{ PreviousNext("CSS:background-color", "CSS:background-position") }}

- -

Resumen

- -

La propiedad CSS background-image establece una o más imágenes de fondo para un elemento.

- -
    -
  • {{ Cssxref("initial", "Valor inicial") }}: ninguno
  • -
  • Se aplica a: todos los elementos
  • -
  • {{ Cssxref("inheritance", "Herencia") }}: no
  • -
  • Porcentajes: N/A
  • -
  • Medio: {{ Cssxref("visual") }}
  • -
  • {{ Cssxref("computed value", "Valor calculada") }}: URI absoluta o ninguna
  • -
- -

Sintaxis

- -
background-image: url | none | inherit
-
- -

Valores

- -
-
url
-
Localización de la imagen que se utilizará de fondo.
-
none
-
Utilizado para especificar que un elemento no debe tener ninguna imagen de fondo.
-
- -

Ejemplos

- -

Note that the star image is partially transparent and is layered over the cat image.

- -

HTML

- -
<div>
-    <p class="catsandstars">
-        This paragraph is full of cats<br />and stars.
-    </p>
-    <p>This paragraph is not.</p>
-    <p class="catsandstars">
-        Here are more cats for you.<br />Look at them!
-    </p>
-    <p>And no more.</p>
-</div>
- -

CSS

- -
pre, p {
-    font-size: 1.5em;
-    color: #FE7F88;
-    background-color: transparent;
-}
-
-div {
-  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
-}
-
-p {
-  background-image: none;
-}
-
-.catsandstars {
-  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
-                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
-  background-color: transparent;
-}
-
- -

Result

- -

{{EmbedLiveSample('Ejemplos')}}

- -

Notas

- -

Los desarrolladores deben asegurarse que han especificado un color de fondo ({{ Cssxref("background-color") }}) en el caso de no usar una imagen. Las imágenes de fondo son mostradas encima del color de fondo.

- -

Sobre Accesibilidad

- -

Los lectores de pantalla no reconocen las imágenes de fondo, si la imagen tiene un significado y no es de carácter meramente decorativa deberás incluirla semánticamente en el documento utilizando la etiqueta img.

- -

Para más información (en inglés):

- - - -

Especificaciones

- - - -

Compatibilidad de navegador

- - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape4
Opera3.5
- -

Ver también

- -

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

diff --git a/files/es/web/css/background-image/index.md b/files/es/web/css/background-image/index.md new file mode 100644 index 00000000000000..2560e20df9fd46 --- /dev/null +++ b/files/es/web/css/background-image/index.md @@ -0,0 +1,136 @@ +--- +title: background-image +slug: Web/CSS/background-image +page-type: css-property +translation_of: Web/CSS/background-image +browser-compat: css.properties.background-image +l10n: + sourceCommit: 642f2385b7cf791b3a40a81a17752f5b0c3208ea +--- + +{{CSSRef}} + +La propiedad [CSS](/es/docs/Web/CSS) **`background-image`** establece una o más imágenes de fondo para un elemento. + +{{EmbedInteractiveExample("pages/css/background-image.html")}} + +Las imágenes de fondo se dibujan apilando capas de contexto una encima de la otra. La primera capa especificada se dibuja como si estuviera más cerca del usuario. + +Los [bordes](/es/docs/Web/CSS/border) del elemento se dibujan encima de ellos y el {{cssxref("background-color")}} se dibuja debajo de ellos. La forma en que se dibujan las imágenes en relación con el cuadro y sus bordes se define mediante las propiedades CSS {{cssxref("background-clip")}} y {{cssxref("background-origin")}}. + +Si no se puede dibujar una imagen específica (por ejemplo, cuando no se puede cargar el archivo indicado por el URI especificado), los navegadores lo manejan como si fuera un valor `none`. + +> **Nota:** Incluso si las imágenes son opacas y el color no se mostrará en circunstancias normales, los desarrolladores web siempre deben especificar un {{cssxref("background-color")}}. Si las imágenes no se pueden cargar, por ejemplo, cuando la red no funciona, el color de fondo se utilizará como alternativa. + +## Sintaxis + +Cada imagen de fondo se especifica como la palabra clave `none` o como un valor {{cssxref("<image>")}}. + +Para especificar varias imágenes de fondo, proporcione varios valores, separados por una coma: + +```css +background-image: linear-gradient( + to bottom, + rgba(255, 255, 0, 0.5), + rgba(0, 0, 255, 0.5) + ), url("catfront.png"); + +/* Valores globales */ +background-image: inherit; +background-image: initial; +background-image: revert; +background-image: revert-layer; +background-image: unset; +``` + +### Valores + +- `none` + - : Utilizado para especificar que un elemento no debe tener imagen de fondo. +- `` + - : Es un {{cssxref("<image>")}} que indica la imagen que se va a mostrar. Puede haber varios, separados por comas, ya que se admiten [fondos múltiples](/es/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds). + +## Problemas de accesibilidad + +Los navegadores no brindan ninguna información especial sobre imágenes de fondo a la tecnología de asistencia. Esto es importante principalmente para los lectores de pantalla, ya que un lector de pantalla no anunciará su presencia y, por lo tanto, no transmitirá nada a sus usuarios. Si la imagen contiene información crítica para comprender el propósito general de la página, es mejor describirla semánticamente en el documento. + +- [MDN Entendiendo las WCAG, Directriz 1.1 explicaciones](/es/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Comprender el Criterio de Conformidad 1.1.1 | W3C Entendiendo las WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## Definicion formal + +{{cssinfo}} + +## Sytaxis formal + +{{csssyntax}} + +## Ejemplos + +### Imagenes por capas + +Tenga en cuenta que la imagen de la estrella es parcialmente transparente y se superpone a la imagen del gato. + +#### HTML + +```html +
+

Este párrafo está lleno de gatos
y estrellas.

+

Este párrafo no.

+

Aquí hay más gatos para ti.
¡Míralos!

+

Y no mas.

+
+``` + +#### CSS + +```css +p { + font-size: 1.5em; + color: #fe7f88; + background-image: none; + background-color: transparent; +} + +div { + background-image: url("mdn_logo_only_color.png"); +} + +.catsandstars { + background-image: url("startransparent.gif"), url("catfront.png"); + background-color: transparent; +} +``` + +#### Result + +{{EmbedLiveSample('Ejemplos')}} + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con navegadores + +{{Compat}} + +## Véase también + +- [Implementando sprites de imagen en CSS](/es/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS) +- {{HTMLElement("img")}} +- Tipos de datos relacionados con imágenes: {{cssxref("<image>")}}, {{cssxref("<gradient>")}} +- Funciones relacionadas con la imagen: + + - {{cssxref("cross-fade", "cross-fade()")}} + - {{cssxref("element", "element()")}} + - {{cssxref("image/image", "image()")}} + - {{cssxref("image/image-set", "image-set()")}} + - {{cssxref("gradient/linear-gradient", "linear-gradient()")}} + - {{cssxref("gradient/radial-gradient", "radial-gradient()")}} + - {{cssxref("gradient/conic-gradient", "conic-gradient()")}} + - {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}} + - {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}} + - {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} + - {{cssxref("image/paint", "paint()")}} + - {{cssxref("url", "url()")}} + diff --git a/files/es/web/css/background-origin/index.html b/files/es/web/css/background-origin/index.html deleted file mode 100644 index b0cc425568d9dd..00000000000000 --- a/files/es/web/css/background-origin/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: background-origin -slug: Web/CSS/background-origin -tags: - - CSS - - CSS Referência -translation_of: Web/CSS/background-origin ---- -

Resumen

-

La propiedad background-origin especifica el área de origen de un fondo o imagen en determinada caja. para que la propiedad background-position calcule la posición de inicio de un fondo o imagen definida por la propiedad background-image.

-
    -
  • Valor inicial: padding-box
  • -
  • Aplica a: Todos los elementos
  • -
  • Heredado: No
  • -
  • Porcentajes: n/a
  • -
  • Media: Visual
  • -
  • Valor computado: Mismo que valor especificado.
  • -
  • Animación: No
  • -
-

Sintaxis

-
background-origin:[padding-box | border-box | content-box][, [border-box | padding-box | content-box]]*
-
-

Valores

-
-
- border-box
-
-

El fondo se extiende al borde exterior (por debajo del borde en el orden z), la posición es relativa al borde de la caja.

-
-
- padding-box
-
-

El fondo se extiende al borde exterior del padding, la posición es relativa al padding de la caja.

-
-
- content-box
-
-

El fondo se extiende dentro del (recortado al) contenido de la caja, la posición es relativa al contenido de la caja.

-
-
-

Ejemplos

-
div{
-  border:4px dotted #FBE700;
-  background:url('imagen.jpg');
-  background-position:0 0;
-  background-origin:border-box;
-}
-
-
div{
-  background-image: url('image1.jpg'), url('image2.jpg');
-  background-position: 0 0, bottom left;
-  background-origin: padding-box, content-box;
-}
-
-

Notas

-
    -
  • La propiedad background-origin es ignorada si la propiedad background-attachment tiene un valor de fixed.
  • -
  • Si el valor de esta propiedad no es establecido en la propiedad abreviada (shorthand) background que es aplicada a el elemento despues de la propiedad background-origin, el valor de esta propiedad sera restablecido a su valor inicial por la propiedad abreviada background.
  • -
-

Compatibilidad de navegadores

-
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.04.0 (2.0)9.010.53.0 (522)
-
-

Especificaciones

- -

Relacionado

-

background, background-attachment, background-image, background-repeat

diff --git a/files/es/web/css/background-origin/index.md b/files/es/web/css/background-origin/index.md new file mode 100644 index 00000000000000..eafefd5432532e --- /dev/null +++ b/files/es/web/css/background-origin/index.md @@ -0,0 +1,72 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +tags: + - CSS + - CSS Referência +translation_of: Web/CSS/background-origin +--- +## Resumen + +La propiedad background-origin especifica el área de origen de un fondo o imagen en determinada caja. para que la propiedad [background-position](/es/CSS/background-position) calcule la posición de inicio de un fondo o imagen definida por la propiedad [background-image](/es/CSS/background-image). + +- Valor inicial: padding-box +- Aplica a: Todos los elementos +- Heredado: No +- Porcentajes: n/a +- Media: Visual +- Valor computado: Mismo que valor especificado. +- Animación: No + +## Sintaxis + +``` +background-origin:[padding-box | border-box | content-box][, [border-box | padding-box | content-box]]* +``` + +## Valores + +- border-box + - : El fondo se extiende al borde exterior (por debajo del borde en el orden z), la posición es relativa al borde de la caja. +- padding-box + - : El fondo se extiende al borde exterior del padding, la posición es relativa al padding de la caja. +- content-box + - : El fondo se extiende dentro del (recortado al) contenido de la caja, la posición es relativa al contenido de la caja. + +## Ejemplos + +``` +div{ + border:4px dotted #FBE700; + background:url('imagen.jpg'); + background-position:0 0; + background-origin:border-box; +} +``` + +``` +div{ + background-image: url('image1.jpg'), url('image2.jpg'); + background-position: 0 0, bottom left; + background-origin: padding-box, content-box; +} +``` + +## Notas + +- La propiedad background-origin es ignorada si la propiedad background-attachment tiene un valor de fixed. +- Si el valor de esta propiedad no es establecido en la propiedad abreviada (shorthand) [background](/es/CSS/background) que es aplicada a el elemento despues de la propiedad background-origin, el valor de esta propiedad sera restablecido a su valor inicial por la propiedad abreviada background. + +## Compatibilidad de navegadores + +| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari | +| -------------- | ------ | --------------- | ----------------- | ----- | --------- | +| Soporte básico | 1.0 | 4.0 (2.0) | 9.0 | 10.5 | 3.0 (522) | + +## Especificaciones + +- [Css fondos y bordes modulo nivel 3](http://dev.w3.org/csswg/css3-background/#the-background-origin)(candidato a recomendación] + +## Relacionado + +[background](/es/CSS/background), [background-attachment](/es/CSS/background-attachment)[, background-image](/es/CSS/background-image),[background-repeat](/es/CSS/background-repeat) diff --git a/files/es/web/css/background-position/index.html b/files/es/web/css/background-position/index.html deleted file mode 100644 index da5633cbbd4929..00000000000000 --- a/files/es/web/css/background-position/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: background-position -slug: Web/CSS/background-position -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/background-position ---- -

{{ PreviousNext("CSS:background-image", "CSS:background-repeat") }}

- -

Resumen

- -

background-position define la posición inicial de la imagen de fondo especificada.

- -
    -
  • {{ Cssxref("initial", "Valor inicial") }}: 0% 0%
  • -
  • Se aplica a: todos los elementos
  • -
  • {{ Cssxref("inheritance", "Herencia") }}: no
  • -
  • Porcentajes: se refiere al tamaño de la caja misma
  • -
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
  • -
  • {{ Cssxref("computed value", "Valor calculada") }}: para <length> el valor absoluto, para otros un porcentaje.
  • -
- -

Sintaxis

- -
background-position: [ <percentage> | <length> | left | center | right  ]
-                     [ <percentage> | <length> | top  | center | bottom ] ? ;
-
- -
background-position: [ top | center | bottom ];
-
- -
background-position: inherit;
-
- -

Valores

- -
-
{{ Cssxref("porcentaje") }} <percentage>
-
Con el par de valores '0% 0%', la esquina izquierda de la imagen es alineada con la esquina izquierda del borde del espaciado de la caja. Un valor '100% 100%' pone la esquina inferior de la imagen en la esquina inferior del área de espaciado. Con un valor '14% 84%', el punto a 14% a la derecha y 84% abajo de la imagen es colocado en el punto al 14% derecha y 84% abajo del área de espaciado.
-
{{ Cssxref("length") }} <length>
-
con un valor '2cm 1cm', la esquina superior izquierda de la imagen es colocada a 2 cm a la derecha y a 1cm debajo de la esquina superior izquierda del área de espaciado.
-
top left y left top
-
Es igual a '0% 0%'.
-
top, top center y center top
-
Es igual a '50% 0%'.
-
right top y top right
-
Es igual a '100% 0%'.
-
left, left center y center left
-
Es igual a '0% 50%'.
-
center and center center
-
Es igual a '50% 50%'.
-
right, right center y center right
-
Es igual a '100% 50%'.
-
bottom left y left bottom
-
Es igual a '0% 100%'.
-
bottom, bottom center y center bottom
-
Es igual a '50% 100%'.
-
bottom right y right bottom
-
Es igual a '100% 100%'.
-
- -

Si solo se especifica un valor, se entenderá que es la posición horizontal con la vertical al 50%. De otra manera el primer valor especifica la posición horizontal. Se admiten valores negativos y combinaciones de palabras claves, largos (lenght) o porcentajes, pero en el caso de mezclar las palabras claves con otros valores, 'left' y 'right' solo se utilizarán como primer valor y 'top' y 'bottom' como segundo.

- -

Ejemplos

- -
.exampleone {
-	background-image: url("logo.png");
-	background-position: top center;
-}
-
-.exampletwo {
-	background-image: url("logo.png");
-	background-position: 25% 75%;
-}
-
-.examplethree {
-	background-image: url("logo.png");
-	background-position: 2cm bottom;
-}
-
-.examplefour {
-	background-image: url("logo.png");
-	background-position: center 10%;
-}
-
-.examplefive {
-	background-image: url("logo.png");
-	background-position: 2cm 50%;
-}
-
-
- -

Especificaciones

- - - -

Compatibilidad

- - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
- -

Ver también

- -

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

diff --git a/files/es/web/css/background-position/index.md b/files/es/web/css/background-position/index.md new file mode 100644 index 00000000000000..2bcb5821fc3929 --- /dev/null +++ b/files/es/web/css/background-position/index.md @@ -0,0 +1,111 @@ +--- +title: background-position +slug: Web/CSS/background-position +tags: + - CSS + - CSS:Referencias + - Todas_las_Categorías +translation_of: Web/CSS/background-position +--- +{{ PreviousNext("CSS:background-image", "CSS:background-repeat") }} + +## Resumen + +`background-position` define la posición inicial de la imagen de fondo especificada. + +- {{ Cssxref("initial", "Valor inicial") }}: 0% 0% +- Se aplica a: todos los elementos +- {{ Cssxref("inheritance", "Herencia") }}: no +- Porcentajes: se refiere al tamaño de la caja misma +- Medio: {{ Cssxref("Media:Visual", "visual") }} +- {{ Cssxref("computed value", "Valor calculada") }}: para \ el valor absoluto, para otros un porcentaje. + +## Sintaxis + +``` +background-position: [ | | left | center | right ] + [ | | top | center | bottom ] ? ; +``` + +``` +background-position: [ top | center | bottom ]; +``` + +``` +background-position: inherit; +``` + +### Valores + +- {{ Cssxref("porcentaje") }} \ + - : Con el par de valores '0% 0%', la esquina izquierda de la imagen es alineada con la esquina izquierda del borde del espaciado de la caja. Un valor '100% 100%' pone la esquina inferior de la imagen en la esquina inferior del área de espaciado. Con un valor '14% 84%', el punto a 14% a la derecha y 84% abajo de la imagen es colocado en el punto al 14% derecha y 84% abajo del área de espaciado. +- {{ Cssxref("length") }} \ + - : con un valor '2cm 1cm', la esquina superior izquierda de la imagen es colocada a 2 cm a la derecha y a 1cm debajo de la esquina superior izquierda del área de espaciado. +- top left y left top + - : Es igual a '0% 0%'. +- top, top center y center top + - : Es igual a '50% 0%'. +- right top y top right + - : Es igual a '100% 0%'. +- left, left center y center left + - : Es igual a '0% 50%'. +- center and center center + - : Es igual a '50% 50%'. +- right, right center y center right + - : Es igual a '100% 50%'. +- bottom left y left bottom + - : Es igual a '0% 100%'. +- bottom, bottom center y center bottom + - : Es igual a '50% 100%'. +- bottom right y right bottom + - : Es igual a '100% 100%'. + +Si solo se especifica un valor, se entenderá que es la posición horizontal con la vertical al 50%. De otra manera el primer valor especifica la posición horizontal. Se admiten valores negativos y combinaciones de palabras claves, largos (lenght) o porcentajes, pero en el caso de mezclar las palabras claves con otros valores, '**left' y 'right'** solo se utilizarán como primer valor y '**top' y 'bottom'** como segundo. + +## Ejemplos + +``` +.exampleone { + background-image: url("logo.png"); + background-position: top center; +} + +.exampletwo { + background-image: url("logo.png"); + background-position: 25% 75%; +} + +.examplethree { + background-image: url("logo.png"); + background-position: 2cm bottom; +} + +.examplefour { + background-image: url("logo.png"); + background-position: center 10%; +} + +.examplefive { + background-image: url("logo.png"); + background-position: 2cm 50%; +} +``` + +## Especificaciones + +- [CSS 1](http://www.w3.org/TR/CSS1#background-position) +- [CSS 2.1](http://www.w3.org/TR/CSS21/colors.html#propdef-background-position) +- [CSS 3](http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-position) + +### Compatibilidad + +| Navegador | Versión mínima | +| ----------------- | -------------- | +| Internet Explorer | 4 | +| Firefox | 1 | +| Netscape | 6 | +| Opera | 3.5 | + +### Ver también + +{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }} diff --git a/files/es/web/css/background-repeat/index.html b/files/es/web/css/background-repeat/index.html deleted file mode 100644 index 397b3faa72433b..00000000000000 --- a/files/es/web/css/background-repeat/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: background-repeat -slug: Web/CSS/background-repeat -tags: - - CSS - - 'CSS:Referencias' - - Fondos CSS - - Propiedades de CSS - - Referências - - Todas_las_Categorías -translation_of: Web/CSS/background-repeat ---- -
{{CSSRef}}
- -

La propiedad de CSS background-repeat define como se repiten los fondos del documento. Un fondo de imagen puede ser repetido sobre el eje horizontal, el eje vertical, ambos ejes, o no estar repetido.

- - - -
{{EmbedInteractiveExample("pages/css/background-repeat.html")}}
- - - - - -
/* One-value syntax */
-background-repeat: repeat-x;
-background-repeat: repeat-y;
-background-repeat: repeat;
-background-repeat: space;
-background-repeat: round;
-background-repeat: no-repeat;
-
-/* Two-value syntax: horizontal | vertical */
-background-repeat: repeat space;
-background-repeat: repeat repeat;
-background-repeat: round space;
-background-repeat: no-repeat round;
-
-/* Global values */
-background-repeat: inherit;
-background-repeat: initial;
-background-repeat: unset;
-
- - - -

Por defecto, las imágenes repetidas son ajustadas al tamaño del elemento, pero pueden ser reescaladas para ajustarse (usando round) o igualmente distribuido desde un extremo a otro (usando space).

- -

{{cssinfo}}

- -

Sintaxis

- -

Valores

- -
-
<repeat-style>
-
Los atributos de valor único son una abreviación de los atributos de doble valor.
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Valor únicoDoble valor equivalente
repeat-xrepeat no-repeat
repeat-yno-repeat repeat
repeatrepeat repeat
spacespace space
roundround round
no-repeatno-repeat no-repeat
- En los atributos de doble valor, el primer valor se comporta usando la repetición horizontal y el segundo valor representa el comportamiento de repetición vertical. Aquí se explica como cada opción funciona con cada dirección:
-
- - - - - - - - - - - - - - - - - - - -
repeatLa imagen se repite hasta cubrir todo el fondo existente. La última imagen debe ser recortada si no encaja.
spaceLa imagen se repite lo máximo posible sin recortarse. La primera y última imagen son fijadas a cada lado del elemento, y el espacio blanco es distribuido igualmente entre las imágenes. La propiedad {{cssxref("background-position")}} es ignorada a menos que una sola imagen pueda ser desplegada sin recortar. El único caso donde se recorta usando space es cuando no hay suficiente sitio para desplegar una imagen.
roundComo el espacio permitido aumenta, las imágenes repetidas se estrechan (sin dejar huecos) hasta que haya espacio suficiente (espacio restante >= la mitad del ancho de la imagen) para que otra sea añadida. Cuando la próxima imagen es añadida, todas las demás son comprimidas al espacio disponible. Ejemplo: Una imagen con un ancho inicial de 260px, se repite 3 veces, debería estirarse hasta que el tamaño sea de 300px, luego otra imagen debe ser añadida. Luego deberían comprimirse hasta los 225px.
no-repeatLa imagen no se repite (y por lo tanto el area coloreada de la imagen de fondo no debe ser rellenada completamente). La posición del fondo no repetido es definida por la propiedad de CSS {{cssxref("background-position")}}.
-
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplos

- -

HTML

- -
<ol>
-  <li>no-repeat
-    <div class="one"></div>
-  </li>
-  <li>repeat
-    <div class="two"></div>
-  </li>
-  <li>repeat-x
-    <div class="three"></div>
-  </li>
-  <li>repeat-y
-    <div class="four"></div>
-  </li>
-  <li>space
-    <div class="five"></div>
-  </li>
-  <li>round
-    <div class="six"></div>
-  </li>
-  <li>repeat-x, repeat-y (multiple images)
-    <div class="seven"></div>
-  </li>
-</ol>
- -

CSS

- -
/* Shared for all DIVS in example */
-ol,
-li {
-  margin: 0;
-  padding: 0;
-}
-li {
-  margin-bottom: 12px;
-}
-div {
-    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
-    width: 160px;
-    height: 70px;
-}
-
-/* Background repeats */
-.one {
-  background-repeat: no-repeat;
-}
-.two {
-  background-repeat: repeat;
-}
-.three {
-  background-repeat: repeat-x;
-}
-.four {
-  background-repeat: repeat-y;
-}
-.five {
-  background-repeat: space;
-}
-.six {
-  background-repeat: round;
-}
-
-/* Multiple images */
-.seven {
-  background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
-                     url(https://developer.mozilla.org/static/img/favicon32.png);
-  background-repeat: repeat-x,
-                     repeat-y;
-  height: 144px;
-}
- -

Resultado

- -

En este ejemplo,cada elemento de la listcoincide con un valor diferente debackground-repeat.

- -

{{EmbedLiveSample('Examples', 240, 560)}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}{{Spec2('CSS3 Backgrounds')}}Añade soporte para diferentes imágenes de fondo, el atributo de doble valor equivalente permite un comportamiento de repetición diferente para las direcciones verticales y horizontales, las palabras clave space y round , y para fondos en elementos en la misma línea mediante la definición precisa de la zona disponible del fondo.
{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}{{Spec2('CSS2.1')}}Sin cambios significativos.
{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}{{Spec2('CSS1')}}Definición inicial.
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.background-repeat")}}

- -

Mira también

- - diff --git a/files/es/web/css/background-repeat/index.md b/files/es/web/css/background-repeat/index.md new file mode 100644 index 00000000000000..149fb7724872cc --- /dev/null +++ b/files/es/web/css/background-repeat/index.md @@ -0,0 +1,173 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +tags: + - CSS + - CSS:Referencias + - Fondos CSS + - Propiedades de CSS + - Referências + - Todas_las_Categorías +translation_of: Web/CSS/background-repeat +--- +{{CSSRef}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`background-repeat`** define como se repiten los fondos del documento. Un fondo de imagen puede ser repetido sobre el eje horizontal, el eje vertical, ambos ejes, o no estar repetido. + +{{EmbedInteractiveExample("pages/css/background-repeat.html")}} + +La fuente de este ejemplo interactivo es de GitHub. Si estás interesado en contribuir a los ejemplos interactivos, por favor accee a y envíanos una solicitud para colaborar. + +```css +/* One-value syntax */ +background-repeat: repeat-x; +background-repeat: repeat-y; +background-repeat: repeat; +background-repeat: space; +background-repeat: round; +background-repeat: no-repeat; + +/* Two-value syntax: horizontal | vertical */ +background-repeat: repeat space; +background-repeat: repeat repeat; +background-repeat: round space; +background-repeat: no-repeat round; + +/* Global values */ +background-repeat: inherit; +background-repeat: initial; +background-repeat: unset; +``` + +Por defecto, las imágenes repetidas son ajustadas al tamaño del elemento, pero pueden ser reescaladas para ajustarse (usando _round)_ o igualmente distribuido desde un extremo a otro (usando _space_). + +{{cssinfo}} + +## Sintaxis + +### Valores + +- `` + + - : Los atributos de valor único son una abreviación de los atributos de doble valor. + + | **Valor único** | **Doble valor equivalente** | + | --------------- | --------------------------- | + | `repeat-x` | `repeat no-repeat` | + | `repeat-y` | `no-repeat repeat` | + | `repeat` | `repeat repeat` | + | `space` | `space space` | + | `round` | `round round` | + | `no-repeat` | `no-repeat no-repeat` | + + En los atributos de doble valor, el primer valor se comporta usando la repetición horizontal y el segundo valor representa el comportamiento de repetición vertical. Aquí se explica como cada opción funciona con cada dirección: + + | `repeat` | La imagen se repite hasta cubrir todo el fondo existente. La última imagen debe ser recortada si no encaja. | + | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | + | `space` | La imagen se repite lo máximo posible sin recortarse. La primera y última imagen son fijadas a cada lado del elemento, y el espacio blanco es distribuido igualmente entre las imágenes. La propiedad {{cssxref("background-position")}} es ignorada a menos que una sola imagen pueda ser desplegada sin recortar. El único caso donde se recorta usando `space` es cuando no hay suficiente sitio para desplegar una imagen. | + | `round` | Como el espacio permitido aumenta, las imágenes repetidas se estrechan (sin dejar huecos) hasta que haya espacio suficiente (espacio restante >= la mitad del ancho de la imagen) para que otra sea añadida. Cuando la próxima imagen es añadida, todas las demás son comprimidas al espacio disponible. Ejemplo: Una imagen con un ancho inicial de 260px, se repite 3 veces, debería estirarse hasta que el tamaño sea de 300px, luego otra imagen debe ser añadida. Luego deberían comprimirse hasta los 225px. | + | `no-repeat` | La imagen no se repite (y por lo tanto el area coloreada de la imagen de fondo no debe ser rellenada completamente). La posición del fondo no repetido es definida por la propiedad de CSS {{cssxref("background-position")}}. | + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplos + +### HTML + +```html +
    +
  1. no-repeat +
    +
  2. +
  3. repeat +
    +
  4. +
  5. repeat-x +
    +
  6. +
  7. repeat-y +
    +
  8. +
  9. space +
    +
  10. +
  11. round +
    +
  12. +
  13. repeat-x, repeat-y (multiple images) +
    +
  14. +
+``` + +### CSS + +```css +/* Shared for all DIVS in example */ +ol, +li { + margin: 0; + padding: 0; +} +li { + margin-bottom: 12px; +} +div { + background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); + width: 160px; + height: 70px; +} + +/* Background repeats */ +.one { + background-repeat: no-repeat; +} +.two { + background-repeat: repeat; +} +.three { + background-repeat: repeat-x; +} +.four { + background-repeat: repeat-y; +} +.five { + background-repeat: space; +} +.six { + background-repeat: round; +} + +/* Multiple images */ +.seven { + background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), + url(https://developer.mozilla.org/static/img/favicon32.png); + background-repeat: repeat-x, + repeat-y; + height: 144px; +} +``` + +### Resultado + +En este ejemplo,cada elemento de la listcoincide con un valor diferente de`background-repeat`. + +{{EmbedLiveSample('Examples', 240, 560)}} + +## Especificaciones + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}} | {{Spec2('CSS3 Backgrounds')}} | Añade soporte para diferentes imágenes de fondo, el atributo de doble valor equivalente permite un comportamiento de repetición diferente para las direcciones verticales y horizontales, las palabras clave `space` y `round` , y para fondos en elementos en la misma línea mediante la definición precisa de la zona disponible del fondo. | +| {{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}} | {{Spec2('CSS2.1')}} | Sin cambios significativos. | +| {{SpecName('CSS1', '#background-repeat', 'background-repeat')}} | {{Spec2('CSS1')}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.background-repeat")}} + +## Mira también + +- [Usando diferentes fondos](/es/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) diff --git a/files/es/web/css/background-size/index.html b/files/es/web/css/background-size/index.html deleted file mode 100644 index 1ffd6535b5f2e1..00000000000000 --- a/files/es/web/css/background-size/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: background-size -slug: Web/CSS/background-size -tags: - - CSS - - CSS Background - - CSS Property - - Reference -translation_of: Web/CSS/background-size ---- -
{{ CSSRef() }}
- -

Resumen

- -

La propiedad CSS background-size especifica el tamaño de las imágenes de fondo.

- -
Nota: Si el valor de esta propiedad no se encuentra en una propiedad abreviada {{ cssxref("background") }} esta es aplicada para los elementos después de la propiedad CSS background-size, el valor de esta propiedad se restablece a su valor inicial de la propiedad abreviada.
- -

{{cssinfo}}

- -

Sintaxis

- -
background-size:  background-size[ background-size]*
-
- -

donde :

- -
-
background-size
-
Es una de las palabras claves:
-
-
    -
  • contain
    - Escala la imagen al mayor tamaño posible sin recortarla ni estirarla.
  • -
  • cover
    - Escala la imagen al mayor tamaño posible sin estirarla. Si las proporciones de la imagen difieren de las del elemento, es recortada vertical u horizontalmente para que no quede un espacio vacío.
  • -
- O bien, uno o dos de los siguientes valores, que denota el tamaño horizontal y el tamaño vertical respectivamente (si sólo es especificado uno, el valor predeterminado para el segundo es auto): - -
    -
  • Un valor {{cssxref("<percentage>")}} que escala la imagen de fondo en la dimensión correspondiente al porcentaje especificado del área de posicionamiento de fondo, que viene el valor determinado {{ cssxref("background-origin") }}. El área de posicionamiento del fondo es, por defecto, el área que contiene el contenido de la caja y su relleno, el área también se puede cambiar a simplemente el contenido o el área que contiene bordes, el relleno y contenido. Si el fondo de {{cssxref ("background-attachment", "attachment")}} es fija, el área de posicionamiento del fondo es más bien toda el área de la ventana del navegador, sin incluir el área cubierta por las barras de desplazamiento si están presentes. Porcentajes negativos no son permitidos.
  • -
  • Un valor {{cssxref("<length>")}} que escala la imagen de fondo a la longitud especificada en la dimensión correspondiente. Longitudes negativas no están permitidos.
  • -
  • La palabra clave auto que escala el fondo de la imagen en la dirección correspondiente de modo que su proporción escencial se mantiene.
  • -
-
-
- -

La interpretación de los valores posibles depende de las dimensiones propias de la imagen (ancho y alto) y proporción propia (relación entre la anchura y altura). Una imagen de mapa de bits siempre tiene dimensiones propias y una proporción propia. Una imagen del vector puede tener ambas dimensiones propias (y por lo tanto debe tener una proporción propia). También puede tener una o ningúna dimensiones propias, y en cualquier caso se podría o no tener una proporción propia. Los gradientes son tratados como imágenes sin dimensiones propias o proporción propia.

- -
-

Este comportamiento ha cambiado en Gecko 8.0 {{geckoRelease ("8.0")}}. Antes de esto, los gradientes se tratan como imágenes sin dimensiones propias, con una proporción propia idéntica al área de posicionamiento de fondo.

-
- -

Las imágenes de fondo generados a partir de elementos con {{ cssxref("-moz-element") }} (que en realidad coincide con un elemento) se tratan actualmente como las imágenes con las dimensiones del elemento, o de la zona de posicionamiento de fondo si el elemento es SVG, con la proporción propia correspondiente.

- -
Nota: El comportamiento de los <degradados> cambió en Gecko 8.0 {{geckoRelease("8.0")}}. Anteriormente se trataban como imágenes sin dimensiones intrínsecas, pero con proporciones intrínsecas idénticas a las del área de posicionamiento del fondo.
- -

El tamaño representado de la imagen de fondo se calcula como sigue:

- -
-
Si ambos componentes de background-size se especifican y no son auto:
-
La imagen de fondo representa al tamaño especificado.
-
si el background-size es contain o cover:
-
La imagen es renderizada, preservando su proporción propia, en el tamaño mayor contenido dentro de, o cubriendo, el área de posicionamiento de fondo. Si la imagen no tiene una proporción propia, entonces se representa al tamaño de la zona de posicionamiento de fondo.
-
Si el background-size es auto o auto auto:
-
Si la imagen tiene dos dimensiones propias, se representa en ese tamaño. Si no tiene dimensiones propias y no proporción propia, se representa en el tamaño del área de posicionamiento de fondo. Si no tiene dimensiones, pero tiene una proporción, se representa como si se hubiera especificado contener en su lugar. Si la imagen tiene una dimensión propia y una proporción, ha rendido en el tamaño determinado por esa única dimensión y la proporción. Si la imagen tiene una dimensión propia pero proporción no, se representa utilizando la dimensión propia y la dimensión correspondiente del área de posicionamiento de fondo.
-
Si el background-size tiene un auto componente y un non-auto componente:
-
Si la imagen tiene una proporción propia, entonces hacen uso de la dimensión especificada, y calcula la otra dimensión de la dimensión especificada y la proporción propia. Si la imagen no tiene una parte propia, utilice la dimensión especificada para esa dimensión. Por la otra dimensión, utilice la imagen de dimensión propia correspondiente, si es que existe. Si no hay ninguna dimensión propia tal, el uso de la dimensión correspondiente del área de posicionamiento de fondo.
-
- -

Tenga en cuenta que los antecedentes de tamaño de imágenes vectoriales que carecen de dimensiones propias o la proporción no se ha aplicado plenamente en todos los navegadores. Tenga cuidado con confiar en el comportamiento descrito anteriormente, y la prueba en varios navegadores (incluyendo específicamente las versiones de Firefox 7 o anterior y Firefox 8 o superior) para asegurarse de versiones diferentes son aceptables.

- -

Ejemplos

- -

Esta demostración de backround-size: cover y esta demostración de background-size: contain están destinados a ser abiertos en nuevas ventanas para que pueda ver cómo contain y cover comportarse cuando las dimensiones del área de posicionamiento de fondo variar. Esta serie de demostraciones de cómo funciona el background-size e interactúa con otras propiedades de background-* debe casi cubrir el suelo restante en el uso de background-size solo y en combinación con otras propiedades.

- -

Notas

- -

Si especifíca un degradado como fondo y tiene especificado un background-size para ir con ella, es mejor no especificar un tamaño que utilice un solo componente auto, o es especificado usando solo un valor de anchura (por ejemplo, background-size: 50%). Renderizado de gradientes en tales casos cambiaron en Firefox 8, y en la actualidad es generalmente inconsistente en todos los navegadores, que no todo implementa el renderizadando en total conformidad con la especificación CSS3 background-size y con la especificación de valores de imagen CSS3 gradiente.

- -
.bar {
-       width: 50px; height: 100px;
-       background-image: gradient(...);
-
-       /* NO RECOMENDADO */
-       background-size: 25px;
-       background-size: 50%;
-       background-size: auto 50px;
-       background-size: auto 50%;
-
-       /* OKAY */
-       background-size: 25px 50px;
-       background-size: 50% 50%;
-}
-
- -

Tenga en cuenta que particularmente no es recomendado usar una dimensión de píxeles y una dimensión auto con degradado, porque es imposible replicar el renderizado en las versiones de Firefox anteriores a 8, y en los navegadores que no implementaron el renderizado de Firefox 8, sin saber el tamaño exacto del elemento cuyo fondo se ha especificado.

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadosComentario
{{ SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size') }}{{ Spec2('CSS3 Backgrounds') }}
- -

Compatibilidad de navegador

- -{{Compat("css.properties.background-size")}} - -

Ver también

- - diff --git a/files/es/web/css/background-size/index.md b/files/es/web/css/background-size/index.md new file mode 100644 index 00000000000000..20fd244b5e9b8b --- /dev/null +++ b/files/es/web/css/background-size/index.md @@ -0,0 +1,106 @@ +--- +title: background-size +slug: Web/CSS/background-size +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-size +--- +{{ CSSRef() }} + +## Resumen + +La propiedad CSS **`background-size`** especifica el tamaño de las imágenes de fondo. + +> **Nota:** Si el valor de esta propiedad no se encuentra en una propiedad abreviada {{ cssxref("background") }} esta es aplicada para los elementos después de la propiedad CSS `background-size`, el valor de esta propiedad se restablece a su valor inicial de la propiedad abreviada. + +{{cssinfo}} + +## Sintaxis + +``` +background-size: background-size[ background-size]* +``` + +donde **:** + +- _**background-size**_ + + - : Es una de las palabras claves: + + - **`contain`** + Escala la imagen al mayor tamaño posible sin recortarla ni estirarla. + - **`cover`** + Escala la imagen al mayor tamaño posible sin estirarla. Si las proporciones de la imagen difieren de las del elemento, es recortada vertical u horizontalmente para que no quede un espacio vacío. + + O bien, uno o dos de los siguientes valores, que denota el tamaño horizontal y el tamaño vertical respectivamente (si sólo es especificado uno, el valor predeterminado para el segundo es auto): + + - Un valor {{cssxref("<percentage>")}} que escala la imagen de fondo en la dimensión correspondiente al porcentaje especificado del área de posicionamiento de fondo, que viene el valor determinado {{ cssxref("background-origin") }}. El área de posicionamiento del fondo es, por defecto, el área que contiene el contenido de la caja y su relleno, el área también se puede cambiar a simplemente el contenido o el área que contiene bordes, el relleno y contenido. Si el fondo de {{cssxref("background-attachment", "attachment")}} es fija, el área de posicionamiento del fondo es más bien toda el área de la ventana del navegador, sin incluir el área cubierta por las barras de desplazamiento si están presentes. Porcentajes negativos no son permitidos. + - Un valor {{cssxref("<length>")}} que escala la imagen de fondo a la longitud especificada en la dimensión correspondiente. Longitudes negativas no están permitidos. + - La palabra clave auto que escala el fondo de la imagen en la dirección correspondiente de modo que su proporción escencial se mantiene. + +La interpretación de los valores posibles depende de las dimensiones propias de la imagen (ancho y alto) y proporción propia (relación entre la anchura y altura). Una imagen de mapa de bits siempre tiene dimensiones propias y una proporción propia. Una imagen del vector puede tener ambas dimensiones propias (y por lo tanto debe tener una proporción propia). También puede tener una o ningúna dimensiones propias, y en cualquier caso se podría o no tener una proporción propia. Los gradientes son tratados como imágenes sin dimensiones propias o proporción propia. + +Este comportamiento ha cambiado en Gecko 8.0 {{geckoRelease ("8.0")}}. Antes de esto, los gradientes se tratan como imágenes sin dimensiones propias, con una proporción propia idéntica al área de posicionamiento de fondo. + +Las imágenes de fondo generados a partir de elementos con {{ cssxref("-moz-element") }} (que en realidad coincide con un elemento) se tratan actualmente como las imágenes con las dimensiones del elemento, o de la zona de posicionamiento de fondo si el elemento es SVG, con la proporción propia correspondiente. + +> **Nota:** **Nota**: El comportamiento de los `` cambió en Gecko 8.0 {{geckoRelease("8.0")}}. Anteriormente se trataban como imágenes sin dimensiones intrínsecas, pero con proporciones intrínsecas idénticas a las del área de posicionamiento del fondo. + +El tamaño representado de la imagen de fondo se calcula como sigue: + +- Si ambos componentes de `background-size` se especifican y no son auto: + - : La imagen de fondo representa al tamaño especificado. +- si el `background-size` es `contain` o `cover`: + - : La imagen es renderizada, preservando su proporción propia, en el tamaño mayor contenido dentro de, o cubriendo, el área de posicionamiento de fondo. Si la imagen no tiene una proporción propia, entonces se representa al tamaño de la zona de posicionamiento de fondo. +- Si el `background-size` es `auto` o `auto auto`: + - : Si la imagen tiene dos dimensiones propias, se representa en ese tamaño. Si no tiene dimensiones propias y no proporción propia, se representa en el tamaño del área de posicionamiento de fondo. Si no tiene dimensiones, pero tiene una proporción, se representa como si se hubiera especificado contener en su lugar. Si la imagen tiene una dimensión propia y una proporción, ha rendido en el tamaño determinado por esa única dimensión y la proporción. Si la imagen tiene una dimensión propia pero proporción no, se representa utilizando la dimensión propia y la dimensión correspondiente del área de posicionamiento de fondo. +- Si el background-size tiene un `auto` componente y un non-`auto` componente: + - : Si la imagen tiene una proporción propia, entonces hacen uso de la dimensión especificada, y calcula la otra dimensión de la dimensión especificada y la proporción propia. Si la imagen no tiene una parte propia, utilice la dimensión especificada para esa dimensión. Por la otra dimensión, utilice la imagen de dimensión propia correspondiente, si es que existe. Si no hay ninguna dimensión propia tal, el uso de la dimensión correspondiente del área de posicionamiento de fondo. + +Tenga en cuenta que los antecedentes de tamaño de imágenes vectoriales que carecen de dimensiones propias o la proporción no se ha aplicado plenamente en todos los navegadores. Tenga cuidado con confiar en el comportamiento descrito anteriormente, y la prueba en varios navegadores (incluyendo específicamente las versiones de Firefox 7 o anterior y Firefox 8 o superior) para asegurarse de versiones diferentes son aceptables. + +## Ejemplos + +Esta demostración de backround-size: cover y esta demostración de background-size: contain están destinados a ser abiertos en nuevas ventanas para que pueda ver cómo contain y cover comportarse cuando las dimensiones del área de posicionamiento de fondo variar. Esta serie de demostraciones de cómo funciona el background-size e interactúa con otras propiedades de background-\* debe casi cubrir el suelo restante en el uso de background-size solo y en combinación con otras propiedades. + +## Notas + +Si especifíca un degradado como fondo y tiene especificado un background-size para ir con ella, es mejor no especificar un tamaño que utilice un solo componente auto, o es especificado usando solo un valor de anchura (por ejemplo, background-size: 50%). Renderizado de gradientes en tales casos cambiaron en Firefox 8, y en la actualidad es generalmente inconsistente en todos los navegadores, que no todo implementa el renderizadando en total conformidad con la especificación CSS3 background-size y con la especificación de valores de imagen CSS3 gradiente. + +```css +.bar { + width: 50px; height: 100px; + background-image: gradient(...); + + /* NO RECOMENDADO */ + background-size: 25px; + background-size: 50%; + background-size: auto 50px; + background-size: auto 50%; + + /* OKAY */ + background-size: 25px 50px; + background-size: 50% 50%; +} +``` + +Tenga en cuenta que particularmente no es recomendado usar una dimensión de píxeles y una dimensión auto con degradado, porque es imposible replicar el renderizado en las versiones de Firefox anteriores a 8, y en los navegadores que no implementaron el renderizado de Firefox 8, sin saber el tamaño exacto del elemento cuyo fondo se ha especificado. + +## Especificaciones + +| Especificación | Estados | Comentario | +| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------- | +| {{ SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size') }} | {{ Spec2('CSS3 Backgrounds') }} | | + +## Compatibilidad de navegador + +{{Compat("css.properties.background-size")}} + +## Ver también + +- [CSS Reference](/es/docs/CSS/CSS_Reference) +- [Multiple backgrounds](/es/docs/CSS/Multiple_backgrounds) +- [Scaling background images](/es/docs/CSS/Scaling_background_images) diff --git a/files/es/web/css/background/index.html b/files/es/web/css/background/index.html deleted file mode 100644 index 79522238e24aca..00000000000000 --- a/files/es/web/css/background/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: background -slug: Web/CSS/background -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/background ---- -

{{CSSRef}}

- -

La propiedad background es un atajo para definir los valores individuales del fondo en una única regla CSS. Se puede usar background para definir los valores de una o de todas las propiedades siguientes: {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color", "color") }}, {{ Cssxref("background-image", "image") }}, {{ Cssxref("background-position", "position") }}, {{ Cssxref("background-repeat", "repeat") }}.

- -
    -
  • {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales
  • -
  • Se aplica a: todos los elementos
  • -
  • {{ Cssxref("inheritance", "Herencia") }}: no
  • -
  • Porcentajes: permitido en {{ Cssxref("background-position", "posición") }}
  • -
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
  • -
  • {{ Cssxref("computed value", "Valor calculada") }}: ver propiedades individuales
  • -
- -

Sintaxis

- -
/* Usando <background-color> */
-background: green;
-
-/* Usando <bg-image> y <repeat-style> */
-background: url("test.jpg") repeat-y;
-
-/* Usando <box> and <background-color> */
-background: border-box red;
-
-/* Una sola imagen, centrada y escalada */
-background: no-repeat center/80% url("../img/image.png");
- -

La propiedad background se especifica como una o más capas de fondo, separadas por comas.

- -

La sintaxis de cada capa es la siguiente:

- -
    -
  • Cada capa puede incluir cero o una ocurrencia de cualquiera de los siguientes valores - -
  • -
  • El valor <bg-size> sólo puede ser incluido inmediatamente después de la <position>, separado con el carácter '/', así: "center/80%".
  • -
  • El valor <box> puede ser incluido cero, una o dos veces. Si se incluye una vez, establece ambos {{cssxref("background-origin")}} y {{cssxref("background-clip")}}. Si se incluye dos veces, la primera ocurrencia establece {{cssxref("background-origin")}}, y el segundo conjunto {{cssxref("background-clip")}}.
  • -
  • El valor <background-color> sólo puede ser incluido en la última capa especificada.
  • -
- -

Valores

- -
-
background-color
-
ver color.
-
background-image
-
ver image.
-
background-repeat
-
ver repeat.
-
background-attachment
-
ver background-attachment.
-
background-position
-
ver position.
-
- -

Ejemplos

- -

HTML

- -
<p class="topbanner">
-  Starry sky<br/>
-  Twinkle twinkle<br/>
-  Starry sky
-</p>
-<p class="warning">Here is a paragraph<p>
- -

CSS

- -
.warning {
-  background: red;
-}
-
-.topbanner {
-  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
-}
-
- -

Result

- -

{{EmbedLiveSample("Ejemplos")}}

- -

Notas

- -

Tomando una declaración válida, la propiedad background inicia las propiedades individuales a sus valores iniciales para después asignarles los valores especificadas explícitamente en la declaración. No hay que definir un valor por cada propiedad individual, se cambia solo las que necesitamos en relación al valor por defecto.

- -

Especificaciones

- - - -

Compatibilidad de navegadores

- - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorMínima versión
Internet Explorer4
Firefox1
Netscape6
Opera3.5
- -

Ver también

- -

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

diff --git a/files/es/web/css/background/index.md b/files/es/web/css/background/index.md new file mode 100644 index 00000000000000..a630c72609389a --- /dev/null +++ b/files/es/web/css/background/index.md @@ -0,0 +1,116 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - CSS:Referencias + - Todas_las_Categorías +translation_of: Web/CSS/background +--- +{{CSSRef}} + +La propiedad `background` es un atajo para definir los valores individuales del fondo en una única regla CSS. Se puede usar `background` para definir los valores de una o de todas las propiedades siguientes: {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color", "color") }}, {{ Cssxref("background-image", "image") }}, {{ Cssxref("background-position", "position") }}, {{ Cssxref("background-repeat", "repeat") }}. + +- {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales +- Se aplica a: todos los elementos +- {{ Cssxref("inheritance", "Herencia") }}: no +- Porcentajes: permitido en {{ Cssxref("background-position", "posición") }} +- Medio: {{ Cssxref("Media:Visual", "visual") }} +- {{ Cssxref("computed value", "Valor calculada") }}: ver propiedades individuales + +## Sintaxis + +``` +/* Usando */ +background: green; + +/* Usando y */ +background: url("test.jpg") repeat-y; + +/* Usando and */ +background: border-box red; + +/* Una sola imagen, centrada y escalada */ +background: no-repeat center/80% url("../img/image.png"); +``` + +La propiedad `background` se especifica como una o más capas de fondo, separadas por comas. + +La sintaxis de cada capa es la siguiente: + +- Cada capa puede incluir cero o una ocurrencia de cualquiera de los siguientes valores + + - [``](/es/docs/Web/CSS/background$edit#%3Cattachment%3E) + - [``](/es/docs/Web/CSS/background$edit#%3Cbg-image%3E) + - [``](/es/docs/Web/CSS/background$edit#%3Cposition%3E) + - [``](/es/docs/Web/CSS/background$edit#%3Cbg-size%3E) + - [``](/es/docs/Web/CSS/background$edit#%3Crepeat-style%3E) + +- El valor [``](/es/docs/Web/CSS/background$edit#%3Cbg-size%3E) sólo puede ser incluido inmediatamente después de la [\](/es/docs/Web/CSS/background$edit#%3Cposition%3E), separado con el carácter '/', así: "`center/80%`". +- El valor [\](/es/docs/Web/CSS/background$edit#%3Cbox%3E) puede ser incluido cero, una o dos veces. Si se incluye una vez, establece ambos {{cssxref("background-origin")}} y {{cssxref("background-clip")}}. Si se incluye dos veces, la primera ocurrencia establece {{cssxref("background-origin")}}, y el segundo conjunto {{cssxref("background-clip")}}. +- El valor [``](/es/docs/Web/CSS/background$edit#%3Cbackground-color%3E) sólo puede ser incluido en la última capa especificada. + +## Valores + +- background-color + - : ver [`color`](/es/CSS/background-color). +- background-image + - : ver [`image`](/es/CSS/background-image). +- background-repeat + - : ver [`repeat`](/es/CSS/background-repeat). +- background-attachment + - : ver [`background-attachment`](/es/CSS/background-attachment). +- background-position + - : ver [`position`](/es/CSS/background-position). + +## Ejemplos + +### HTML + +```html +

+ Starry sky
+ Twinkle twinkle
+ Starry sky +

+

Here is a paragraph

+``` + +### CSS + +```css +.warning { + background: red; +} + +.topbanner { + background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed; +} +``` + +### Result + +{{EmbedLiveSample("Ejemplos")}} + +## Notas + +Tomando una declaración válida, la propiedad `background` inicia las propiedades individuales a sus valores iniciales para después asignarles los valores especificadas explícitamente en la declaración. No hay que definir un valor por cada propiedad individual, se cambia solo las que necesitamos en relación al valor por defecto. + +## Especificaciones + +- [CSS 1](http://www.w3.org/TR/CSS1#background) +- [CSS 2.1](http://www.w3.org/TR/CSS21/colors.html#propdef-background) +- [CSS 3](http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background) + +## Compatibilidad de navegadores + +| Navegador | Mínima versión | +| ----------------- | -------------- | +| Internet Explorer | 4 | +| Firefox | 1 | +| Netscape | 6 | +| Opera | 3.5 | + +## Ver también + +{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }} diff --git a/files/es/web/css/basic-shape/index.html b/files/es/web/css/basic-shape/index.html deleted file mode 100644 index 08f0b59ad8aa80..00000000000000 --- a/files/es/web/css/basic-shape/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: -slug: Web/CSS/basic-shape -tags: - - CSS - - Referencia - - Tipo de Dato CSS -translation_of: Web/CSS/basic-shape ---- -

{{CSSRef}}

- -

Resumen

- -

El tipo <basic-shape> puede ser especificado usando funciones de figura (shape) básicas. Al usar esta sintaxis para definir figuras, la caja de referencia es definida por cada propiedad que usa valores <basic-shape>. El sistema de coordenadas para la figura tiene su origen en la esquina superior izquierda de la caja de referencia, con el eje x corriendo hacia la derecha y el eje y, hacia abajo. Todas las longitudes expresadas en porcentajes son resueltas con base en las dimensiones de la caja de referencia.

- -

Figuras posibles

- -

Las siguientes figuras son soportadas. Todos los valores <basic-shape> usan notación funcional y son definidos aquí usando la sintaxis de definición de valor.

- -
-
inset()
-
-
inset( <shape-arg>{1,4} [round <border-radius>]? )
- -

Define un rectángulo incrustado.

- -

Cuando se proporcionan los cuatro primeros argumentos, representan la separación superior, derecha, inferior e izquierda del interior de la caja de referencia que define las posiciones de los bordes del rectángulo interior. Estos argumentos siguen la sintaxis de la abreviatura de margen, que permite definir los cuatro valores en uno, dos o cuatro valores.

- -

Los argumentos opcionales <border-radius> definen esquinas redondeadas para el rectángulo incrustado usando la sintaxis de abreviatura de border-radius.

- -

Cuando un par de valores inset en cualquier dimensión suman un valor mayor al límite de la dimensión disponible (como por ejemplo, que los valores inset izquierdo y derecho sean de 75% cada uno), se está definiendo una figura que no encierra ningun área. Para esta especificación, el resultado es un área flotante vacía.

-
-
polygon()
-
-
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
- -

<fill-rule> representa la regla de llenado usada para determinar el área interior del polígono. Los valores posibles son nonzero y evenodd. El valor predeterminado es nonzero.

- -

Cada elemento par de la lista representa xi y yi - las coordenadas del eje x y el eje y en el vértice i del polígono.

-
-
circle()
-
-
circle( [<shape-radius>]? [at <position>]? )
- -

El argumento <shape-radius> representa a r, el radio del círculo. Los valores negativos son inválidos. Un valor en porcentaje es resuelto de la anchura y altura presentes de la caja de referencia como sqrt(width^2+height^2)/sqrt(2).

- -

El argumento {{cssxref("<position>")}} define el centro del círculo. Su valor predeterminado es center.

-
-
ellipse()
-
-
ellipse( [<shape-radius>{2}]? [at <position>]? )
- -

El argumento <shape-radius> representa a rx y ry, los radios del eje x y del eje y de la elipse, en ese orden. Los valores negativos son inválidos. Los valores en porcentaje son resueltos contra la anchura (para rx) y altura (para ry) presentes en la caja de referencia.

- -

El argumento {{cssxref("<position>")}} define el centro de la elipse. Su valor predeterminado es center.

-
-
- -

Los argumentos no definidos arriba son definidos de esta forma:

- -
<shape-arg> = <length> | <percentage>
-<shape-radius> = <length> | <percentage> | closest-side | farthest-side
- -

Define un radio para un círculo o elipse. Su valor predeterminado es closest-side.

- -

closest-side usa la longitud desde el centro de la figura hasta el borde más cercano de la caja de referencia. Para círculos, es el lado más cercano en cualquier dimensión. Para elipses, es el lado más cercano en la dimensión del radio.

- -

farthest-side use la longitud desde el centro de la figura hasta el lado más alejado de la caja de referencia. Para círculos, es el lado más alejado en cualquier dimensión. Para elipses, es el lado más alejado en la dimensión del radio.

- -

Valores Calculados de Figuras Básicas

- -

Los valores en una función <basic-shape> son calculados segun se especifica, con estas excepciones:

- -
    -
  • Valores omitidos son incluidos y calculados acorde a su valor predeterminado.
  • -
  • Un valor {{cssxref("<position>")}} en circle() o ellipse() es calculado como un par de separaciones (horizontal y después vertical) desde el origen superior izquierdo, cada uno dado como combinación de una longitud absoluta y un porcentaje.
  • -
  • Un valor <border-radius> en inset() es calculado como una lista expandida de ocho valores {{cssxref("length")}} o de porcentaje.
  • -
- -

Interpolación de Figuras Básicas

- -
Para interpolar dos figuras, se aplican las reglas a continuación. Los valores en la función de figura se interpolan como una lista simple. La lista de valores se interpola como {{cssxref("length", "length")}}, {{cssxref("percentage", "percentage")}}, o {{cssxref("calc", "calc")}} donde sea posible. Si los valores listados no son de los de esos tipos pero son idénticos (por ejemplo, tener nonzero en la misma posición en ambas listas), sí se interpolan esos valores.
- -
- -
    -
  • Ambas figuras deben usar la misma figura de referencia.
  • -
  • Si ambas figuras son del mismo tipo, ellipse() o circle(), y ninguno de los radios usa las palabras clave closest-side o farthest-side keywords, se interpola entre cada valor de las funciones de figura.
  • -
  • Si ambas figuras son de tipo inset(), se interpola entre cada valor de las funciones de figura.
  • -
  • Si ambas figuras son de tipo polygon(), ambos polígonos tienen el mismo número de vértices y usan la misma regla <fill-rule>, se interpola entre cada valor de la función de figura.
  • -
  • En cualquier otro casa no se especifica la interpolación.
  • -
- -

Ejemplos

- -
TODO
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificicaciónEstatusComentarios
{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}{{ Spec2('CSS Shapes') }}Definición inicial
- -

Compatibilidad de navegadores

- -{{Compat("css.types.basic-shape")}} - -

Véase también

- -
    -
  • {{cssxref("clip-path")}}
  • -
  • {{cssxref("shape-outside")}}
  • -
diff --git a/files/es/web/css/basic-shape/index.md b/files/es/web/css/basic-shape/index.md new file mode 100644 index 00000000000000..f72e70e9a3a249 --- /dev/null +++ b/files/es/web/css/basic-shape/index.md @@ -0,0 +1,122 @@ +--- +title: +slug: Web/CSS/basic-shape +tags: + - CSS + - Referencia + - Tipo de Dato CSS +translation_of: Web/CSS/basic-shape +--- +{{CSSRef}} + +## Resumen + +El tipo **``** puede ser especificado usando funciones de figura (shape) básicas. Al usar esta sintaxis para definir figuras, la caja de referencia es definida por cada propiedad que usa valores ``. El sistema de coordenadas para la figura tiene su origen en la esquina superior izquierda de la caja de referencia, con el eje x corriendo hacia la derecha y el eje y, hacia abajo. Todas las longitudes expresadas en porcentajes son resueltas con base en las dimensiones de la caja de referencia. + +## Figuras posibles + +Las siguientes figuras son soportadas. Todos los valores `` usan notación funcional y son definidos aquí usando la [sintaxis de definición de valor](/es/docs/Web/CSS/Sintaxis_definición_de_valor). + +- `inset()` + + - : + + ``` + inset( {1,4} [round ]? ) + ``` + + Define un rectángulo incrustado. + + Cuando se proporcionan los cuatro primeros argumentos, representan la separación superior, derecha, inferior e izquierda del interior de la caja de referencia que define las posiciones de los bordes del rectángulo interior. Estos argumentos siguen la sintaxis de la abreviatura de margen, que permite definir los cuatro valores en uno, dos o cuatro valores. + + Los argumentos opcionales [``](/es/docs/Web/CSS/border-radius) definen esquinas redondeadas para el rectángulo incrustado usando la sintaxis de abreviatura de border-radius. + + Cuando un par de valores inset en cualquier dimensión suman un valor mayor al límite de la dimensión disponible (como por ejemplo, que los valores inset izquierdo y derecho sean de 75% cada uno), se está definiendo una figura que no encierra ningun área. Para esta especificación, el resultado es un área flotante vacía. + +- `polygon()` + + - : + + ``` + polygon( [,]? [ ]# ) + ``` + + `` representa la [regla de llenado](/es/docs/Web/SVG/Attribute/fill-rule) usada para determinar el área interior del polígono. Los valores posibles son `nonzero` y `evenodd`. El valor predeterminado es `nonzero`. + + Cada elemento par de la lista representa _xi_ y _yi_ - las coordenadas del eje x y el eje y en el vértice _i_ del polígono. + +- `circle(`) + + - : + + ``` + circle( []? [at ]? ) + ``` + + El argumento `` representa a _r_, el radio del círculo. Los valores negativos son inválidos. Un valor en porcentaje es resuelto de la anchura y altura presentes de la caja de referencia como `sqrt(width^2+height^2)/sqrt(2)`. + + El argumento {{cssxref("<position>")}} define el centro del círculo. Su valor predeterminado es `center`. + +- `ellipse()` + + - : + + ``` + ellipse( [{2}]? [at ]? ) + ``` + + El argumento `` representa a rx y ry, los radios del eje x y del eje y de la elipse, en ese orden. Los valores negativos son inválidos. Los valores en porcentaje son resueltos contra la anchura (para rx) y altura (para ry) presentes en la caja de referencia. + + El argumento {{cssxref("<position>")}} define el centro de la elipse. Su valor predeterminado es `center`. + +Los argumentos no definidos arriba son definidos de esta forma: + +``` + = | + = | | closest-side | farthest-side +``` + +Define un radio para un círculo o elipse. Su valor predeterminado es `closest-side`. + +`closest-side` usa la longitud desde el centro de la figura hasta el borde más cercano de la caja de referencia. Para círculos, es el lado más cercano en cualquier dimensión. Para elipses, es el lado más cercano en la dimensión del radio. + +`farthest-side` use la longitud desde el centro de la figura hasta el lado más alejado de la caja de referencia. Para círculos, es el lado más alejado en cualquier dimensión. Para elipses, es el lado más alejado en la dimensión del radio. + +## Valores Calculados de Figuras Básicas + +Los valores en una función `` son calculados segun se especifica, con estas excepciones: + +- Valores omitidos son incluidos y calculados acorde a su valor predeterminado. +- Un valor {{cssxref("<position>")}} en `circle()` o `ellipse()` es calculado como un par de separaciones (horizontal y después vertical) desde el origen superior izquierdo, cada uno dado como combinación de una longitud absoluta y un porcentaje. +- Un valor [``](/es/docs/Web/CSS/border-radius) en `inset()` es calculado como una lista expandida de ocho valores {{cssxref("length")}} o de porcentaje. + +## Interpolación de Figuras Básicas + +Para interpolar dos figuras, se aplican las reglas a continuación. Los valores en la función de figura se interpolan como una lista simple. La lista de valores se interpola como {{cssxref("length", "length")}}, {{cssxref("percentage", "percentage")}}, o {{cssxref("calc", "calc")}} donde sea posible. Si los valores listados no son de los de esos tipos pero son idénticos (por ejemplo, tener `nonzero` en la misma posición en ambas listas), sí se interpolan esos valores. + +- Ambas figuras deben usar la misma figura de referencia. +- Si ambas figuras son del mismo tipo, `ellipse()` o `circle()`, y ninguno de los radios usa las palabras clave `closest-side` o `farthest-side` keywords, se interpola entre cada valor de las funciones de figura. +- Si ambas figuras son de tipo `inset()`, se interpola entre cada valor de las funciones de figura. +- Si ambas figuras son de tipo `polygon()`, ambos polígonos tienen el mismo número de vértices y usan la misma regla [``](/es/docs/Web/SVG/Attribute/fill-rule), se interpola entre cada valor de la función de figura. +- En cualquier otro casa no se especifica la interpolación. + +## Ejemplos + +``` +TODO +``` + +## Especificaciones + +| Especificicación | Estatus | Comentarios | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ | +| {{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }} | {{ Spec2('CSS Shapes') }} | Definición inicial | + +## Compatibilidad de navegadores + +{{Compat("css.types.basic-shape")}} + +## Véase también + +- `{{cssxref("clip-path")}}` +- `{{cssxref("shape-outside")}}` diff --git a/files/es/web/css/blend-mode/index.html b/files/es/web/css/blend-mode/index.html deleted file mode 100644 index 7a11a9330c6749..00000000000000 --- a/files/es/web/css/blend-mode/index.html +++ /dev/null @@ -1,353 +0,0 @@ ---- -title: -slug: Web/CSS/blend-mode -tags: - - Composición - - Composición CSS - - Modos de mezcla - - Referencia - - Tipo de Dato CSS -translation_of: Web/CSS/blend-mode ---- -

{{CSSRef}}

- -

Resumen

- -

El tipo <blend-mode> es una coleccion de palabras clave que describen modos de mezcla.

- -

Un modo de mezcla (blend mode) es un método para calcular el color final de un píxel cuando hay dos capas superpuestas. Cada modo de mezcla toma el valor del color de primer plano y el de fondo (color superior y color inferior, respectivamente), realiza su cálculo y devuelve el valor de color. La capa final visible es el resultado de realizar el cálculo del modo de mezcla en cada pixel sobrepuesto entre las capas mezcladas.

- -

Sintaxis

- -
Sintaxis formal: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
- -

Valores posibles

- -
-
normal
-
-

El color final es el de la capa superior, sin importar el color de fondo.
- El efecto es similar a dos trozos de papel sobrepuestos.

- -
- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: normal;
-}
-
- -

{{ EmbedLiveSample('normal', "300", "300") }}

-
-
multiply
-
-

El color final es el resultado de multiplicar el color superior y el inferior.
- Una capa negra conduce a una capa final negra, y una capa blanca lleva a que no haya cambios.
- El efecto ese similar a dos imágenes impresas en papel transparente sobrepuestas.

- -
- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: multiply;
-}
-
- -

{{ EmbedLiveSample('multiply', "300", "300") }}

-
-
screen
-
-

El color final ees el resultado de invertir los colores, multiplicándolos e invirtiendo el valor resultante.
- Una capa negra no produce cambio alguno, y una capa blanca conduce a una capa blanca final.
- El efecto es similar a dos imágenes mostrándose desde un proyector.

- -
- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: screen;
-}
-
- -

{{ EmbedLiveSample('screen', "300", "300") }}

-
-
overlay
-
El color final es el resultado de multiply si el color inferior es más oscuro, o screen si el color inferior es más claro.
- Este modo de mezcla es equivalente a hard-light, pero si las capas son intercambiadas. -
- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: overlay;
-}
-
- -

{{ EmbedLiveSample('overlay', "300", "300") }}

-
-
darken
-
-

El resultado final es un color compuesto de los valores más oscuros por cada canal de color.

- -
- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: darken;
-}
-
- -

{{ EmbedLiveSample('darken', "300", "300") }}

-
-
lighten
-
-

El resultado final es un color compuesto de los valores más claros por cada canal de color.

- -
- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: lighten;
-}
-
- -

{{ EmbedLiveSample('lighten', "300", "300") }}

-
-
color-dodge
-
-

El color final es el resultado de dividir el color inferior por el inverso del color superior.
- Un fondo negro no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce un color completamente iluminado.
- Este modo de mezcla es similar a screen, pero basta con que el color de primer plano sea tan claro como el inverso del color de fondo para alcanzar un color completamente iluminado.

- -
- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: color-dodge;
-}
-
- -

{{ EmbedLiveSample('color-dodge', "300", "300") }}

-
-
color-burn
-
-

El color final es el resultado de invertir el color de fondo, dividier el valor por el color superior, e invertir ese valor.
- Un fondo blanco no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce una imagen negra.
- Este modo de mezcla es similar a multiply, pero basta con que el color de primer plano sea tan oscuro como el inverso del color de fondo para dar como resultado una imagen negra.

- -
- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: color-burn;
-}
-
- -

{{ EmbedLiveSample('color-burn', "300", "300") }}

-
-
hard-light
-
-

El color final es el resultado de multiply si el color superior es más oscuro, o screen si el color superior es más oscuro.
- Este modo de mezcla es equivalente a overlay, pero con las capas intercambiadas.
- El efecto es similar a encender un foco con mucha intensidad en el fondo.

- -
- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: hard-light;
-}
-
- -

{{ EmbedLiveSample('hard-light', "300", "300") }}

-
-
soft-light
-
-

El color final es similar a hard-light, pero más suave.
- Este modo de mezcla se comporta similar a hard-light.
- El efecto es similar a encender un foco difuso en el fondo.

- -
- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: soft-light;
-}
-
- -

{{ EmbedLiveSample('soft-light', "300", "300") }}

-
-
difference
-
-

El color final es elresultado de restar el color más oscuro de las dos capas, del más claro.
- Una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.

- -
- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: difference;
-}
-
- -

{{ EmbedLiveSample('difference', "300", "300") }}

-
-
exclusion
-
-

El color final es similar a difference, pero con menor contraste.
- Así como con difference, una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.

- -
- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: exclusion;
-}
-
- -

{{ EmbedLiveSample('exclusion', "300", "300") }}

-
-
hue
-
-

El color final tiene el matiz del color superior, mientras usa la saturación y luminosidad del color inferior.

- -
- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: hue;
-}
-
- -

{{ EmbedLiveSample('hue', "300", "300") }}

-
-
saturation
-
-

El color final tiene la saturación del color superior, mientras usa el matiz y luminosidad del color inferior.
- Un fondo gris puro, que no tenga saturación, no producirá efecto alguno.

- -
- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: saturation;
-}
-
- -

{{ EmbedLiveSample('saturation', "300", "300") }}

-
-
color
-
-

El color final tiene el matiz y saturación del color superior, mientras usa la luminosidad del color inferior.
- El efecto preserva los niveles de grid y puede ser usado para colorear el primer plano.

- -
- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: color;
-}
-
- -

{{ EmbedLiveSample('color', "300", "300") }}

-
-
luminosity
-
-

El color final tiene la luminosidad del color superior, mientras usa el matiz y saturación del color inferior.
- Este modo de mezcla es equivalente a color, pero con las capas intercambiadas.

- -
- -
#div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
-                url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: luminosity;
-}
-
- -

{{ EmbedLiveSample('luminosity', "300", "300") }}

-
-
- -

Interpolación de modos de mezcla

- -
- -

Los cambios entre modos de mezcla no son interpolados. Cualquier cambio ocurrirá abruptamente.

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{ SpecName('Compositing', '#ltblendmodegt', '<blend-mode>') }}{{ Spec2('Compositing') }}Definición inicial
- -

Compatibilidad de navegadores

- -{{Compat("css.types.blend-mode")}} - -

Véase también

- -
    -
  • Propiedades que usan valores de este tipo: {{cssxref("background-blend-mode")}} y {{cssxref("mix-blend-mode")}}
  • -
  • Blend modes
  • -
  • Índice de Referencia CSS
  • -
diff --git a/files/es/web/css/blend-mode/index.md b/files/es/web/css/blend-mode/index.md new file mode 100644 index 00000000000000..801bfc0539e2cd --- /dev/null +++ b/files/es/web/css/blend-mode/index.md @@ -0,0 +1,438 @@ +--- +title: +slug: Web/CSS/blend-mode +tags: + - Composición + - Composición CSS + - Modos de mezcla + - Referencia + - Tipo de Dato CSS +translation_of: Web/CSS/blend-mode +--- +{{CSSRef}} + +## Resumen + +El tipo **``** es una coleccion de palabras clave que describen modos de mezcla. + +Un modo de mezcla (blend mode) es un método para calcular el color final de un píxel cuando hay dos capas superpuestas. Cada modo de mezcla toma el valor del color de primer plano y el de fondo (color superior y color inferior, respectivamente), realiza su cálculo y devuelve el valor de color. La capa final visible es el resultado de realizar el cálculo del modo de mezcla en cada pixel sobrepuesto entre las capas mezcladas. + +## Sintaxis + +``` +Sintaxis formal: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity +``` + +### Valores posibles + +- `normal` + + - : El color final es el de la capa superior, sin importar el color de fondo. + + El efecto es similar a dos trozos de papel sobrepuestos. + +- `multiply` + + - : El color final es el resultado de multiplicar el color superior y el inferior. + + Una capa negra conduce a una capa final negra, y una capa blanca lleva a que no haya cambios. + + El efecto ese similar a dos imágenes impresas en papel transparente sobrepuestas. + +- `screen` + + - : El color final ees el resultado de invertir los colores, multiplicándolos e invirtiendo el valor resultante. + + Una capa negra no produce cambio alguno, y una capa blanca conduce a una capa blanca final. + + El efecto es similar a dos imágenes mostrándose desde un proyector. + +- `overlay` + + - : El color final es el resultado de `multiply` si el color inferior es más oscuro, o `screen` si el color inferior es más claro. + + Este modo de mezcla es equivalente a `hard-light`, pero si las capas son intercambiadas. + +- `darken` + + - : El resultado final es un color compuesto de los valores más oscuros por cada canal de color. + +- `lighten` + + - : El resultado final es un color compuesto de los valores más claros por cada canal de color. + +- `color-dodge` + + - : El color final es el resultado de dividir el color inferior por el inverso del color superior. + + Un fondo negro no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce un color completamente iluminado. + + Este modo de mezcla es similar a `screen`, pero basta con que el color de primer plano sea tan claro como el inverso del color de fondo para alcanzar un color completamente iluminado. + +- `color-burn` + + - : El color final es el resultado de invertir el color de fondo, dividier el valor por el color superior, e invertir ese valor. + + Un fondo blanco no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce una imagen negra. + + Este modo de mezcla es similar a `multiply`, pero basta con que el color de primer plano sea tan oscuro como el inverso del color de fondo para dar como resultado una imagen negra. + +- `hard-light` + + - : El color final es el resultado de `multiply` si el color superior es más oscuro, o `screen` si el color superior es más oscuro. + + Este modo de mezcla es equivalente a `overlay`, pero con las capas intercambiadas. + + El efecto es similar a encender un foco con mucha _intensidad_ en el fondo. + +- `soft-light` + + - : El color final es similar a `hard-light`, pero más suave. + + Este modo de mezcla se comporta similar a `hard-light`. + + El efecto es similar a encender un foco _difuso_ en el fondo. + +- `difference` + + - : El color final es elresultado de restar el color más oscuro de las dos capas, del más claro. + + Una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa. + +- `exclusion` + + - : El color final es similar a `difference,` pero con menor contraste. + + Así como con `difference`, una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa. + +- `hue` + + - : El color final tiene el _matiz_ del color superior, mientras usa la _saturación_ y _luminosidad_ del color inferior. + +- `saturation` + + - : El color final tiene la _saturación_ del color superior, mientras usa el _matiz_ y _luminosidad_ del color inferior. + + Un fondo gris puro, que no tenga saturación, no producirá efecto alguno. + +- `color` + + - : El color final tiene el **matiz** y **saturación** del color superior, mientras usa la _luminosidad_ del color inferior. + + El efecto preserva los niveles de grid y puede ser usado para colorear el primer plano. + +- `luminosity` + + - : El color final tiene la _luminosidad_ del color superior, mientras usa el _matiz_ y _saturación_ del color inferior. + + Este modo de mezcla es equivalente a `color`, pero con las capas intercambiadas. + +## Ejemplos + +### Ejemplo usando `normal` + +```html hidden +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: normal; +} +``` + +{{ EmbedLiveSample("", "300", "300") }} + +### Ejemplo usando `multiply` + +```html hidden +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: multiply; +} +``` + +{{ EmbedLiveSample("", "300", "300") }} + +### Ejemplo usando `screen` + +```html hidden +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: screen; +} +``` + +{{ EmbedLiveSample("", "300", "300") }} + +### Ejemplo usando `overlay` + +```html hidden +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: overlay; +} +``` + +{{ EmbedLiveSample("", "300", "300") }} + +### Ejemplo usando `darken` + +```html hidden +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: darken; +} +``` + +{{ EmbedLiveSample("", "300", "300") }} + +### Ejemplo usando `lighten` + +```html hidden +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: lighten; +} +``` + +{{ EmbedLiveSample("", "300", "300") }} + +### Ejemplo usando `color-dodge` + +```html hidden +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: color-dodge; +} +``` + +{{ EmbedLiveSample("", "300", "300") }} + +### Ejemplo usando `color-burn` + +```html hidden +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: color-burn; +} +``` + +{{ EmbedLiveSample("", "300", "300") }} + +### Ejemplo usando `hard-light` + +```html hidden +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: hard-light; +} +``` + +{{ EmbedLiveSample("", "300", "300") }} + +### Ejemplo usando `soft-light` + +```html hidden +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: soft-light; +} +``` + +{{ EmbedLiveSample("", "300", "300") }} + +### Ejemplo usando `difference` + +```html hidden +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: difference; +} +``` + +{{ EmbedLiveSample("", "300", "300") }} + +### Ejemplo usando `exclusion` + +```html hidden +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: exclusion; +} +``` + +{{ EmbedLiveSample("", "300", "300") }} + +### Ejemplo usando `hue` + +```html hidden +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: hue; +} +``` + +{{ EmbedLiveSample("", "300", "300") }} + +### Ejemplo usando `saturation` + +```html hidden +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: saturation; +} +``` + +{{ EmbedLiveSample("", "300", "300") }} + +### Ejemplo usando `color` + +```html hidden +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: color; +} +``` + +{{ EmbedLiveSample("", "300", "300") }} + +### Ejemplo usando `luminosity` + +```html hidden +
+``` + +```css +#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: luminosity; +} +``` + +{{ EmbedLiveSample("", "300", "300") }} + +## Interpolación de modos de mezcla + +Los cambios entre modos de mezcla no son interpolados. Cualquier cambio ocurrirá abruptamente. + +## Especificaciones + +| Especificación | Estado | Comentarios | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------ | +| {{ SpecName('Compositing', '#ltblendmodegt', '<blend-mode>') }} | {{ Spec2('Compositing') }} | Definición inicial | + +## Compatibilidad de navegadores + +{{Compat("css.types.blend-mode")}} + +## Véase también + +- Propiedades que usan valores de este tipo: {{cssxref("background-blend-mode")}} y {{cssxref("mix-blend-mode")}} +- [Blend modes](http://en.wikipedia.org/wiki/Blend_modes) +- Índice de [Referencia CSS](/es/docs/CSS/CSS_Reference) diff --git a/files/es/web/css/block-size/index.html b/files/es/web/css/block-size/index.html deleted file mode 100644 index 2aac46a8dc913a..00000000000000 --- a/files/es/web/css/block-size/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: block-size -slug: Web/CSS/block-size -tags: - - Experimental - - Propiedad CSS - - Propiedad Lógica CSS - - Referencia -translation_of: Web/CSS/block-size ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

La propiedad de CSS block-size CSS define el tamaño horizontal o vertical de los elementos en bloque, dependiendo de los modos de escritura. estos corresponden ya sea a la propiedad {{cssxref("width")}} o la propiedad {{cssxref("height")}}, dependiendo de los valores de {{cssxref("writing-mode")}}.

- -

{{EmbedInteractiveExample("pages/css/block-size.html")}}

- -

Resumen

- -

La propiedad de CSS block-size define el tamaño horizontal y vertical del bloque de un elemento, dependiendo de su modo de escritura. Corresponde a la propiedad {{cssxref("width")}} o {{cssxref("height")}}, dependiendo del valor definido en {{cssxref("writing-mode")}}.

- -

Si el modo de escritura está orientado verticalmente, el valor de block-size se relaciona con la anchura del elemento, de lo contrario, se relaciona con la altura del elemento. Está relacionada con {{cssxref("inline-size")}}, la cual define las otras dimensiones del elemento.

- -

{{cssinfo}}

- -

Sintaxis

- -
/* <length> values */
-block-size: 300px;
-block-size: 25em;
-
-/* <percentage> values */
-block-size: 75%;
-
-/* Keyword values */
-block-size: 25em border-box;
-block-size: 75% content-box;
-block-size: max-content;
-block-size: min-content;
-block-size: available;
-block-size: fit-content;
-block-size: auto;
-
-/* Global values */
-block-size: inherit;
-block-size: initial;
-block-size: unset;
-
- -

Valores

- -

La propiedad block-size toma los mismos valores que las propiedades {{cssxref("width")}} y {{cssxref("height")}}.

- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<p class="texto">Texto de ejemplo</p>
-
- -

Contenido CSS

- -
.texto {
-  writing-mode: vertical-rl;
-  background-color: yellow;
-  block-size: 200px;
-}
- -

{{EmbedLiveSample("Ejemplo")}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentarios
{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}{{Spec2("CSS Logical Properties")}}Definición inicial
- -

Compatibilidad de navegadores

- -{{Compat("css.properties.block-size")}} - -

Véase también

- -
    -
  • Las propiedades físicas asignadas: {{cssxref("width")}} y {{cssxref("height")}}
  • -
  • {{cssxref("writing-mode")}}
  • -
diff --git a/files/es/web/css/block-size/index.md b/files/es/web/css/block-size/index.md new file mode 100644 index 00000000000000..5d7ff63f201ac6 --- /dev/null +++ b/files/es/web/css/block-size/index.md @@ -0,0 +1,91 @@ +--- +title: block-size +slug: Web/CSS/block-size +tags: + - Experimental + - Propiedad CSS + - Propiedad Lógica CSS + - Referencia +translation_of: Web/CSS/block-size +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`block-size`** [CSS](/es/docs/Web/CSS) define el tamaño horizontal o vertical de los elementos en bloque, dependiendo de los modos de escritura. estos corresponden ya sea a la propiedad {{cssxref("width")}} o la propiedad {{cssxref("height")}}, dependiendo de los valores de {{cssxref("writing-mode")}}. + +{{EmbedInteractiveExample("pages/css/block-size.html")}} + +## Resumen + +La propiedad de [CSS](/es/docs/Web/CSS) **`block-size`** define el tamaño horizontal y vertical del bloque de un elemento, dependiendo de su modo de escritura. Corresponde a la propiedad {{cssxref("width")}} o {{cssxref("height")}}, dependiendo del valor definido en {{cssxref("writing-mode")}}. + +Si el modo de escritura está orientado verticalmente, el valor de `block-size` se relaciona con la anchura del elemento, de lo contrario, se relaciona con la altura del elemento. Está relacionada con {{cssxref("inline-size")}}, la cual define las otras dimensiones del elemento. + +{{cssinfo}} + +## Sintaxis + +```css +/* values */ +block-size: 300px; +block-size: 25em; + +/* values */ +block-size: 75%; + +/* Keyword values */ +block-size: 25em border-box; +block-size: 75% content-box; +block-size: max-content; +block-size: min-content; +block-size: available; +block-size: fit-content; +block-size: auto; + +/* Global values */ +block-size: inherit; +block-size: initial; +block-size: unset; +``` + +### Valores + +La propiedad `block-size` toma los mismos valores que las propiedades {{cssxref("width")}} y {{cssxref("height")}}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +

Texto de ejemplo

+``` + +### Contenido CSS + +```css +.texto { + writing-mode: vertical-rl; + background-color: yellow; + block-size: 200px; +} +``` + +{{EmbedLiveSample("Ejemplo")}} + +## Especificación + +| Especificación | Estatus | Comentarios | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------ | +| {{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial | + +## Compatibilidad de navegadores + +{{Compat("css.properties.block-size")}} + +## Véase también + +- Las propiedades físicas asignadas: {{cssxref("width")}} y {{cssxref("height")}} +- {{cssxref("writing-mode")}} diff --git a/files/es/web/css/border-block-color/index.html b/files/es/web/css/border-block-color/index.html deleted file mode 100644 index 06de0b103cfa82..00000000000000 --- a/files/es/web/css/border-block-color/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: border-block-color -slug: Web/CSS/border-block-color -translation_of: Web/CSS/border-block-color ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propiedad de CSS border-block-color define el color del borde de bloque de un elemento, que se asigna al color del borde físico dependiendo de los elementos de modo de escrituro, direccionalidad y la orientación del texto. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-right-color")}} y {{cssxref("border-left-color")}} dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
border-block-color: yellow;
-border-block-color: #F5F6F7;
-
- -

El color de borde en la otra dimensión puede ser establecida con {{cssxref("border-inline-color")}} que establece {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}.

- -

{{cssinfo}}

- -

Sintaxis

- -

Valores

- -
-
<'color'>
-
El color del borde. Mirar {{cssxref("color")}}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 10px solid blue;
-  border-block-color: red;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}}{{Spec2("CSS Logical Properties")}}Definición inicial
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-block-color")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ error 1297097
  • -
diff --git a/files/es/web/css/border-block-color/index.md b/files/es/web/css/border-block-color/index.md new file mode 100644 index 00000000000000..c352853aa9e30e --- /dev/null +++ b/files/es/web/css/border-block-color/index.md @@ -0,0 +1,71 @@ +--- +title: border-block-color +slug: Web/CSS/border-block-color +translation_of: Web/CSS/border-block-color +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-block-color`** define el color del borde de bloque de un elemento, que se asigna al color del borde físico dependiendo de los elementos de modo de escrituro, direccionalidad y la orientación del texto. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-right-color")}} y {{cssxref("border-left-color")}} dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +```css +border-block-color: yellow; +border-block-color: #F5F6F7; +``` + +El color de borde en la otra dimensión puede ser establecida con {{cssxref("border-inline-color")}} que establece {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}. + +{{cssinfo}} + +## Sintaxis + +### Valores + +- `<'color'>` + - : El color del borde. Mirar {{cssxref("color")}}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 10px solid blue; + border-block-color: red; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------ | +| {{SpecName("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-block-color")}} + +## Mira también + +- Esta propiedad se asigna a las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}. +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ error 1297097 diff --git a/files/es/web/css/border-block-end-color/index.html b/files/es/web/css/border-block-end-color/index.html deleted file mode 100644 index 01fd86d858570b..00000000000000 --- a/files/es/web/css/border-block-end-color/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: border-block-end-color -slug: Web/CSS/border-block-end-color -tags: - - CSS - - Experimental - - Propiedad CSS - - Propiedad Lógica CSS - - Referencia -translation_of: Web/CSS/border-block-end-color ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

La propiedad CSS border-block-end-color define el color del borde del final lógico de un elemento, que se mapea a un color de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
border-block-end-color: yellow;
-border-block-end-color: #F5F6F7;
-
- -

Está relacionada con {{cssxref("border-block-start-color")}}, {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}, que definen las otras propiedades de color de borde del elemento.

- -

{{cssinfo}}

- -

Sintaxis

- -

Valores

- -
-
<'border-color'>
-
Véase {{ cssxref("border-color") }}
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Texto de ejemplo</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 10px solid blue;
-  border-block-end-color: red;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}}{{Spec2("CSS Logical Properties")}}Definición inicial
- -

Compatibilidad en navegadores

- -{{Compat("css.properties.border-block-end-color")}} - -

Mira también

- -
    -
  • Las propiedades físicas mapeadas: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, y {{cssxref("border-left-color")}}
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097
  • -
diff --git a/files/es/web/css/border-block-end-color/index.md b/files/es/web/css/border-block-end-color/index.md new file mode 100644 index 00000000000000..2b2fa49b32fd1f --- /dev/null +++ b/files/es/web/css/border-block-end-color/index.md @@ -0,0 +1,77 @@ +--- +title: border-block-end-color +slug: Web/CSS/border-block-end-color +tags: + - CSS + - Experimental + - Propiedad CSS + - Propiedad Lógica CSS + - Referencia +translation_of: Web/CSS/border-block-end-color +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad [CSS](/es/docs/Web/CSS) `border-block-end-color` define el color del borde del final lógico de un elemento, que se mapea a un color de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +```css +border-block-end-color: yellow; +border-block-end-color: #F5F6F7; +``` + +Está relacionada con {{cssxref("border-block-start-color")}}, {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}, que definen las otras propiedades de color de borde del elemento. + +{{cssinfo}} + +## Sintaxis + +### Valores + +- `<'border-color'>` + - : Véase {{ cssxref("border-color") }} + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Texto de ejemplo

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 10px solid blue; + border-block-end-color: red; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentarios | +| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------ | +| {{SpecName("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-block-end-color")}} + +## Mira también + +- Las propiedades físicas mapeadas: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, y {{cssxref("border-left-color")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097 diff --git a/files/es/web/css/border-block-end-style/index.html b/files/es/web/css/border-block-end-style/index.html deleted file mode 100644 index e5a77fcf01064d..00000000000000 --- a/files/es/web/css/border-block-end-style/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: border-block-end-style -slug: Web/CSS/border-block-end-style -tags: - - CSS - - Experimental - - Propiedad CSS - - Propiedad Lógica CSS - - Referencia -translation_of: Web/CSS/border-block-end-style ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

La propiedad CSS border-block-end-style define el estilo del borde del final lógico del bloque de un elemento, que se mapea a un estilo de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
border-block-end-style: dashed;
-border-block-end-style: dotted;
-border-block-end-style: groove;
-
- -

Está relacionada a {{cssxref("border-block-start-style")}}, {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}, que definen las otras propiedades de estilos de borde del elemento.

- -

{{cssinfo}}

- -

Sintaxis

- -

Valores

- -
-
<'border-style'>
-
See {{ cssxref("border-style") }}
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Texto de ejemplo</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 5px solid blue;
-  border-block-end-style: dashed;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentarios
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}}{{Spec2("CSS Logical Properties")}}Definición inicial
- -

Compatibilidad de navegadores

- -{{Compat("css.properties.border-block-end-style")}} - -

Véase también

- -
    -
  • Las propiedades físicas mapeadas: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, y {{cssxref("border-left-style")}}
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-block-end-style/index.md b/files/es/web/css/border-block-end-style/index.md new file mode 100644 index 00000000000000..6434f94d2b5059 --- /dev/null +++ b/files/es/web/css/border-block-end-style/index.md @@ -0,0 +1,78 @@ +--- +title: border-block-end-style +slug: Web/CSS/border-block-end-style +tags: + - CSS + - Experimental + - Propiedad CSS + - Propiedad Lógica CSS + - Referencia +translation_of: Web/CSS/border-block-end-style +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad [CSS](/es/docs/Web/CSS) **`border-block-end-style`** define el estilo del borde del final lógico del bloque de un elemento, que se mapea a un estilo de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +```css +border-block-end-style: dashed; +border-block-end-style: dotted; +border-block-end-style: groove; +``` + +Está relacionada a {{cssxref("border-block-start-style")}}, {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}, que definen las otras propiedades de estilos de borde del elemento. + +{{cssinfo}} + +## Sintaxis + +### Valores + +- `<'border-style'>` + - : See {{ cssxref("border-style") }} + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Texto de ejemplo

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 5px solid blue; + border-block-end-style: dashed; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estatus | Comentarios | +| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------ | +| {{SpecName("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial | + +## Compatibilidad de navegadores + +{{Compat("css.properties.border-block-end-style")}} + +## Véase también + +- Las propiedades físicas mapeadas: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, y {{cssxref("border-left-style")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-block-end-width/index.html b/files/es/web/css/border-block-end-width/index.html deleted file mode 100644 index 8af0fea585c5ed..00000000000000 --- a/files/es/web/css/border-block-end-width/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: border-block-end-width -slug: Web/CSS/border-block-end-width -translation_of: Web/CSS/border-block-end-width ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propieda de CSS border-block-end-width define el ancho del borde final lógico de bloque de un elemento, que se asigna al borde físico que depende del modo de escritura, direccionalidad, y orientación del texto del elemento. Esto corresponde a la propiedad {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}} property dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}
- - - -

Sintaxis

- -
/* <'border-width'> values */
-border-block-end-width: 5px;
-border-block-end-width: thick;
-
- -

Las propiedades relacionadas son {{cssxref ("border-block-start-width")}}, {{cssxref ("border-inline-width")}}, y {{cssxref ("border-inline-end-width ")}}, que define los otros anchos de borde del elemento.

- -

{{cssinfo}}

- -

Valores

- -
-
<'border-width'>
-
El tamaño del borde. Mira {{ cssxref("border-width") }}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 1px solid blue;
-  border-block-end-width: 5px;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}}{{Spec2("CSS Logical Properties")}}Definición inicial
- -

Compatibilidad en Navegadores

- - - -

{{Compat("css.properties.border-block-end-width")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-block-end-width/index.md b/files/es/web/css/border-block-end-width/index.md new file mode 100644 index 00000000000000..4fa36a6b4aac7a --- /dev/null +++ b/files/es/web/css/border-block-end-width/index.md @@ -0,0 +1,74 @@ +--- +title: border-block-end-width +slug: Web/CSS/border-block-end-width +translation_of: Web/CSS/border-block-end-width +--- +{{CSSRef}}{{SeeCompatTable}} + +La propieda de [CSS](/es/docs/Web/CSS) **`border-block-end-width`** define el ancho del borde final lógico de bloque de un elemento, que se asigna al borde físico que depende del modo de escritura, direccionalidad, y orientación del texto del elemento. Esto corresponde a la propiedad {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}} property dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}} + +## Sintaxis + +```css +/* <'border-width'> values */ +border-block-end-width: 5px; +border-block-end-width: thick; +``` + +Las propiedades relacionadas son {{cssxref ("border-block-start-width")}}, {{cssxref ("border-inline-width")}}, y {{cssxref ("border-inline-end-width ")}}, que define los otros anchos de borde del elemento. + +{{cssinfo}} + +### Valores + +- `<'border-width'>` + - : El tamaño del borde. Mira {{ cssxref("border-width") }}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 1px solid blue; + border-block-end-width: 5px; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------ | +| {{SpecName("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial | + +## Compatibilidad en Navegadores + +{{Compat("css.properties.border-block-end-width")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-block-end/index.html b/files/es/web/css/border-block-end/index.html deleted file mode 100644 index 371989907250a2..00000000000000 --- a/files/es/web/css/border-block-end/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: border-block-end -slug: Web/CSS/border-block-end -tags: - - CSS - - Experimental - - Propiedad CSS - - Propiedad Lógica CSS - - Referencia -translation_of: Web/CSS/border-block-end ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

La propiedad CSS border-block-end es un atajo para establecer los valores de las propiedades individuales del borde final lógico de un bloque en un solo lugar de la hoja de estilos. border-block-end puede ser usada para establecer los valores de una o más de las siguientes propiedades: {{Cssxref("border-block-end-width")}}, {{Cssxref("border-block-end-style")}}, {{Cssxref("border-block-end-color")}}. Se asigna a un borde físico, dependiendo del modo de escritura del elemento, su direccionalidad y orientación de texto. Corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}, dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
border-block-end: 1px;
-border-block-end: 2px dotted;
-border-block-end: medium dashed blue;
-
- -

Está relacionada con {{cssxref("border-block-start")}}, {{cssxref("border-inline-start")}}, y {{cssxref("border-inline-end")}}, las cuales definen el borde contrario del elemento.

- -

{{cssinfo}}

- -

Sintaxis

- -

Valores

- -

Una o más de los siguientes, en cualquier orden:

- -
-
<'border-width'>
-
Véase {{ cssxref("border-width") }}
-
<'border-style'>
-
Véase {{ cssxref("border-style") }}
-
<'color'>
-
Véase {{ cssxref("color") }}
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Texto de ejemplo</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-rl;
-  border-block-end: 5px dashed blue;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentarios
{{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}}{{Spec2("CSS Logical Properties")}}Definición inicial
- -

Compatibilidad en navegadores

- -{{Compat("css.properties.border-block-end")}} - -

Mira también

- -
    -
  • Las propiedades físicas mapeadas: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, y {{cssxref("border-left")}}
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-block-end/index.md b/files/es/web/css/border-block-end/index.md new file mode 100644 index 00000000000000..77ac979639d786 --- /dev/null +++ b/files/es/web/css/border-block-end/index.md @@ -0,0 +1,83 @@ +--- +title: border-block-end +slug: Web/CSS/border-block-end +tags: + - CSS + - Experimental + - Propiedad CSS + - Propiedad Lógica CSS + - Referencia +translation_of: Web/CSS/border-block-end +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad [CSS](/es/docs/Web/CSS) **`border-block-end`** es un atajo para establecer los valores de las propiedades individuales del borde final lógico de un bloque en un solo lugar de la hoja de estilos. `border-block-end` puede ser usada para establecer los valores de una o más de las siguientes propiedades: {{Cssxref("border-block-end-width")}}, {{Cssxref("border-block-end-style")}}, {{Cssxref("border-block-end-color")}}. Se asigna a un borde físico, dependiendo del modo de escritura del elemento, su direccionalidad y orientación de texto. Corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}, dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +```css +border-block-end: 1px; +border-block-end: 2px dotted; +border-block-end: medium dashed blue; +``` + +Está relacionada con {{cssxref("border-block-start")}}, {{cssxref("border-inline-start")}}, y {{cssxref("border-inline-end")}}, las cuales definen el borde contrario del elemento. + +{{cssinfo}} + +## Sintaxis + +### Valores + +Una o más de los siguientes, en cualquier orden: + +- `<'border-width'>` + - : Véase {{ cssxref("border-width") }} +- `<'border-style'>` + - : Véase {{ cssxref("border-style") }} +- `<'color'>` + - : Véase {{ cssxref("color") }} + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Texto de ejemplo

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + border-block-end: 5px dashed blue; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estatus | Comentarios | +| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------ | +| {{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-block-end")}} + +## Mira también + +- Las propiedades físicas mapeadas: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, y {{cssxref("border-left")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-block-start-color/index.html b/files/es/web/css/border-block-start-color/index.html deleted file mode 100644 index 3ef9b64ac48d88..00000000000000 --- a/files/es/web/css/border-block-start-color/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: border-block-start-color -slug: Web/CSS/border-block-start-color -translation_of: Web/CSS/border-block-start-color ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propiedad de CSS border-block-start-color define el color del borde lógico de bloque inicial de un elemento, que se asigna al color de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}
- - - -

Sintaxis

- -
border-block-start-color: blue;
-border-block-start-color: #4c5d21;
-
- -

Propiedades relacionadas son {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}, que definen los otros colores del borde del elemento.

- -

{{cssinfo}}

- -

Valores

- -
-
<'color'>
-
Mira {{ cssxref("border-color") }}
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 10px solid blue;
-  border-block-start-color: red;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}}{{Spec2("CSS Logical Properties")}}Definición Inicial
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-block-start-color")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-block-start-color/index.md b/files/es/web/css/border-block-start-color/index.md new file mode 100644 index 00000000000000..0c843a7866e4dd --- /dev/null +++ b/files/es/web/css/border-block-start-color/index.md @@ -0,0 +1,73 @@ +--- +title: border-block-start-color +slug: Web/CSS/border-block-start-color +translation_of: Web/CSS/border-block-start-color +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-block-start-color`** define el color del borde lógico de bloque inicial de un elemento, que se asigna al color de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}} + +## Sintaxis + +```css +border-block-start-color: blue; +border-block-start-color: #4c5d21; +``` + +Propiedades relacionadas son {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}, que definen los otros colores del borde del elemento. + +{{cssinfo}} + +### Valores + +- `<'color'>` + - : Mira {{ cssxref("border-color") }} + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 10px solid blue; + border-block-start-color: red; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------ | +| {{SpecName("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}} | {{Spec2("CSS Logical Properties")}} | Definición Inicial | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-block-start-color")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}. +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-block-start-style/index.html b/files/es/web/css/border-block-start-style/index.html deleted file mode 100644 index 7207121c53fa00..00000000000000 --- a/files/es/web/css/border-block-start-style/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: border-block-start-style -slug: Web/CSS/border-block-start-style -translation_of: Web/CSS/border-block-start-style ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propiedad de CSS border-block-start-style define el estilo del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físicodependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}} dependiendo de los valores definidos por{{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}
- - - -

Sintaxis

- -
/* <'border-style'> values */
-border-block-start-style: dashed;
-border-block-start-style: dotted;
-border-block-start-style: groove;
-
- -

Propiedades relacionadas son {{cssxref("border-block-end-style")}}, {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}, que definen los otros estilos del borde del elemento.

- -

{{cssinfo}}

- -

Valores

- -
-
<'border-style'>
-
El estilo de la línea del borde. Mira {{ cssxref("border-style") }}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 5px solid blue;
-  border-block-start-style: dashed;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}}{{Spec2("CSS Logical Properties")}}Definición Inicial
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-block-start-style")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-block-start-style/index.md b/files/es/web/css/border-block-start-style/index.md new file mode 100644 index 00000000000000..b33fbba2f1907c --- /dev/null +++ b/files/es/web/css/border-block-start-style/index.md @@ -0,0 +1,75 @@ +--- +title: border-block-start-style +slug: Web/CSS/border-block-start-style +translation_of: Web/CSS/border-block-start-style +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-block-start-style`** define el estilo del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físicodependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}} dependiendo de los valores definidos por{{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}} + +## Sintaxis + +```css +/* <'border-style'> values */ +border-block-start-style: dashed; +border-block-start-style: dotted; +border-block-start-style: groove; +``` + +Propiedades relacionadas son {{cssxref("border-block-end-style")}}, {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}, que definen los otros estilos del borde del elemento. + +{{cssinfo}} + +### Valores + +- `<'border-style'>` + - : El estilo de la línea del borde. Mira {{ cssxref("border-style") }}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 5px solid blue; + border-block-start-style: dashed; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------ | +| {{SpecName("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}} | {{Spec2("CSS Logical Properties")}} | Definición Inicial | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-block-start-style")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}. +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-block-start-width/index.html b/files/es/web/css/border-block-start-width/index.html deleted file mode 100644 index 76aa603ef6c583..00000000000000 --- a/files/es/web/css/border-block-start-width/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: border-block-start-width -slug: Web/CSS/border-block-start-width -translation_of: Web/CSS/border-block-start-width ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propiedad de CSS border-block-start-width define el ancho del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}
- - - -

Sintaxis

- -
/* <'border-width'> values */
-border-block-start-width: 5px;
-border-block-start-width: thick;
-
- -

Propiedades relacionadas son{{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}}, y {{cssxref("border-inline-end-width")}}, que definen los otros anchos del borde del elemento.

- -

{{cssinfo}}

- -

Valores

- -
-
<'border-width'>
-
El ancho del borde. Mira {{ cssxref("border-width") }}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 1px solid blue;
-  border-block-start-width: 5px;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}}{{Spec2("CSS Logical Properties")}}Definición Inicial
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-block-start-width")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-block-start-width/index.md b/files/es/web/css/border-block-start-width/index.md new file mode 100644 index 00000000000000..886c34601d395f --- /dev/null +++ b/files/es/web/css/border-block-start-width/index.md @@ -0,0 +1,74 @@ +--- +title: border-block-start-width +slug: Web/CSS/border-block-start-width +translation_of: Web/CSS/border-block-start-width +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-block-start-width`** define el ancho del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}} + +## Sintaxis + +```css +/* <'border-width'> values */ +border-block-start-width: 5px; +border-block-start-width: thick; +``` + +Propiedades relacionadas son{{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}}, y {{cssxref("border-inline-end-width")}}, que definen los otros anchos del borde del elemento. + +{{cssinfo}} + +### Valores + +- `<'border-width'>` + - : El ancho del borde. Mira {{ cssxref("border-width") }}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 1px solid blue; + border-block-start-width: 5px; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------ | +| {{SpecName("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}} | {{Spec2("CSS Logical Properties")}} | Definición Inicial | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-block-start-width")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-block-start/index.html b/files/es/web/css/border-block-start/index.html deleted file mode 100644 index 416bd9509827de..00000000000000 --- a/files/es/web/css/border-block-start/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: border-block-start -slug: Web/CSS/border-block-start -translation_of: Web/CSS/border-block-start ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

La propiedad de CSS border-block-start es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque inicial en un solo lugar en la hoja de estilos.

- -
{{EmbedInteractiveExample("pages/css/border-block-start.html")}}
- - - -

Sintaxis

- -
border-block-start: 1px;
-border-block-start: 2px dotted;
-border-block-start: medium dashed blue;
-
- -

border-block-start puede ser usado para establecer los valores de uno o más de {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}}, y {{cssxref("border-block-start-color")}}. El borde físico al que se asigna depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -

Propiedades relacionadas son {{cssxref("border-block-end")}}, {{cssxref("border-inline-start")}}, y {{cssxref("border-inline-end")}}, que definen los otros bordes del elemento.

- -

{{cssinfo}}

- -

Valores

- -

El border-block-start es especificado con uno o más de los siguientes valores, en cualquier orden:

- -
-
<'border-width'>
-
El ancho del borde. Mira {{cssxref("border-width")}}.
-
<'border-style'>
-
El estilo de la línea del borde. Mira {{cssxref("border-style")}}.
-
<'color'>
-
El color del borde. Mira {{cssxref("color")}}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-rl;
-  border-block-start: 5px dashed blue;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}}{{Spec2("CSS Logical Properties")}}Definición Inicial
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-block-start")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-block-start/index.md b/files/es/web/css/border-block-start/index.md new file mode 100644 index 00000000000000..c5d0017e3c870a --- /dev/null +++ b/files/es/web/css/border-block-start/index.md @@ -0,0 +1,81 @@ +--- +title: border-block-start +slug: Web/CSS/border-block-start +translation_of: Web/CSS/border-block-start +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-block-start`** es una [propiedad abreviada](/es/docs/Web/CSS/Shorthand_properties) para establecer los valores lógicos individuales del borde de bloque inicial en un solo lugar en la hoja de estilos. + +{{EmbedInteractiveExample("pages/css/border-block-start.html")}} + +## Sintaxis + +```css +border-block-start: 1px; +border-block-start: 2px dotted; +border-block-start: medium dashed blue; +``` + +`border-block-start` puede ser usado para establecer los valores de uno o más de {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}}, y {{cssxref("border-block-start-color")}}. El borde físico al que se asigna depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +Propiedades relacionadas son {{cssxref("border-block-end")}}, {{cssxref("border-inline-start")}}, y {{cssxref("border-inline-end")}}, que definen los otros bordes del elemento. + +{{cssinfo}} + +### Valores + +El `border-block-start` es especificado con uno o más de los siguientes valores, en cualquier orden: + +- `<'border-width'>` + - : El ancho del borde. Mira {{cssxref("border-width")}}. +- `<'border-style'>` + - : El estilo de la línea del borde. Mira {{cssxref("border-style")}}. +- `<'color'>` + - : El color del borde. Mira {{cssxref("color")}}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + border-block-start: 5px dashed blue; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------ | +| {{SpecName("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}} | {{Spec2("CSS Logical Properties")}} | Definición Inicial | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-block-start")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}. +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-block-style/index.html b/files/es/web/css/border-block-style/index.html deleted file mode 100644 index 046a8287ed1939..00000000000000 --- a/files/es/web/css/border-block-style/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: border-block-style -slug: Web/CSS/border-block-style -translation_of: Web/CSS/border-block-style ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propiedad de CSS border-block-style CSS property defines the style of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
/* <'border-style'> values */
-border-block-style: dashed;
-border-block-style: dotted;
-border-block-style: groove;
-
- -

El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-inline-style")}}, que establece {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}.

- -

{{cssinfo}}

- -

Sintaxis

- -

Valores

- -
-
<'border-style'>
-
La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 5px solid blue;
-  border-block-style: dashed;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-block-style")}}

- -

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-block-style/index.md b/files/es/web/css/border-block-style/index.md new file mode 100644 index 00000000000000..ec4f7761e4fd6c --- /dev/null +++ b/files/es/web/css/border-block-style/index.md @@ -0,0 +1,73 @@ +--- +title: border-block-style +slug: Web/CSS/border-block-style +translation_of: Web/CSS/border-block-style +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-block-style`** [CSS](/es/docs/Web/CSS) property defines the style of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +```css +/* <'border-style'> values */ +border-block-style: dashed; +border-block-style: dotted; +border-block-style: groove; +``` + +El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-inline-style")}}, que establece {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}. + +{{cssinfo}} + +## Sintaxis + +### Valores + +- `<'border-style'>` + - : La línea de estilo del borde. Mira {{ cssxref("border-style") }}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 5px solid blue; + border-block-style: dashed; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-block-style")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}. +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-block-width/index.html b/files/es/web/css/border-block-width/index.html deleted file mode 100644 index f6f75e09c8d754..00000000000000 --- a/files/es/web/css/border-block-width/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: border-block-width -slug: Web/CSS/border-block-width -translation_of: Web/CSS/border-block-width ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propiedad de CSS border-block-width CSS property defines the width of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
/* <'border-width'> values */
-border-block-width: 5px;
-border-block-width: thick;
-
- -

El ancho del borde en otra dimensión puede establecerse con {{cssxref("border-inline-width")}}, que establece {{cssxref("border-inline-start-width")}}, y {{cssxref("border-inline-end-width")}}.

- -

{{cssinfo}}

- -

Sintaxis

- -

Valores

- -
-
<'border-width'>
-
El ancho del borde. Mira {{ cssxref("border-width") }}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 1px solid blue;
-  border-block-width: 5px;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-block-width")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-block-width/index.md b/files/es/web/css/border-block-width/index.md new file mode 100644 index 00000000000000..20db4502046039 --- /dev/null +++ b/files/es/web/css/border-block-width/index.md @@ -0,0 +1,72 @@ +--- +title: border-block-width +slug: Web/CSS/border-block-width +translation_of: Web/CSS/border-block-width +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-block-width`** [CSS](/es/docs/Web/CSS) property defines the width of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +```css +/* <'border-width'> values */ +border-block-width: 5px; +border-block-width: thick; +``` + +El ancho del borde en otra dimensión puede establecerse con {{cssxref("border-inline-width")}}, que establece {{cssxref("border-inline-start-width")}}, y {{cssxref("border-inline-end-width")}}. + +{{cssinfo}} + +## Sintaxis + +### Valores + +- `<'border-width'>` + - : El ancho del borde. Mira {{ cssxref("border-width") }}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 1px solid blue; + border-block-width: 5px; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-block-width")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-block/index.html b/files/es/web/css/border-block/index.html deleted file mode 100644 index 8d08d69bf275c2..00000000000000 --- a/files/es/web/css/border-block/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: border-block -slug: Web/CSS/border-block -translation_of: Web/CSS/border-block ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

La propiedad de CSS border-block es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos.

- -
border-block: 1px;
-border-block: 2px dotted;
-border-block: medium dashed blue;
-
- -

border-block puede ser usada para establecer los valores de uno o más {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}}, y {{cssxref("border-block-color")}} estableciendo tanto el inicio como el final en la dimensión del bloque a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref ("border-top")}} y {{cssxref ("border-bottom")}} o {{cssxref ("border-right")}}, y {{cssxref ("border -left ")}} dependiendo de los valores definidos para {{cssxref (" modo de escritura ")}}, {{cssxref (" dirección ")}}, y {{cssxref (" orientación de texto ")}} .

- -

Los bordes en la otra dimensión se pueden establecer con {{cssxref ("border-inline")}}, que establece {{cssxref ("border-inline-start")}}, y {{cssxref ("border-inline- fin")}}.

- -

{{cssinfo}}

- -

Sintaxis

- -

Valores

- -

El border-block es especificado con uno o más de los siguientes valores, en cualquier orden:

- -
-
<'border-width'>
-
El ancho del borde. Mirar {{cssxref("border-width")}}.
-
<'border-style'>
-
El estilo de la línea del borde. Mirar {{cssxref("border-style")}}.
-
<'color'>
-
El color del borde. Mirar {{cssxref("color")}}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-rl;
-  border-block: 5px dashed blue;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}}{{Spec2("CSS Logical Properties")}}Definition inicial
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-block")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-block/index.md b/files/es/web/css/border-block/index.md new file mode 100644 index 00000000000000..9cb8534e65c12d --- /dev/null +++ b/files/es/web/css/border-block/index.md @@ -0,0 +1,81 @@ +--- +title: border-block +slug: Web/CSS/border-block +translation_of: Web/CSS/border-block +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-block`** es una [propiedad abreviada](/es/docs/Web/CSS/Shorthand_properties) para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos. + +```css +border-block: 1px; +border-block: 2px dotted; +border-block: medium dashed blue; +``` + +`border-block` puede ser usada para establecer los valores de uno o más {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}}, y {{cssxref("border-block-color")}} estableciendo tanto el inicio como el final en la dimensión del bloque a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref ("border-top")}} y {{cssxref ("border-bottom")}} o {{cssxref ("border-right")}}, y {{cssxref ("border -left ")}} dependiendo de los valores definidos para {{cssxref (" modo de escritura ")}}, {{cssxref (" dirección ")}}, y {{cssxref (" orientación de texto ")}} . + +Los bordes en la otra dimensión se pueden establecer con {{cssxref ("border-inline")}}, que establece {{cssxref ("border-inline-start")}}, y {{cssxref ("border-inline- fin")}}. + +{{cssinfo}} + +## Sintaxis + +### Valores + +El `border-block` es especificado con uno o más de los siguientes valores, en cualquier orden: + +- `<'border-width'>` + - : El ancho del borde. Mirar {{cssxref("border-width")}}. +- `<'border-style'>` + - : El estilo de la línea del borde. Mirar {{cssxref("border-style")}}. +- `<'color'>` + - : El color del borde. Mirar {{cssxref("color")}}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + border-block: 5px dashed blue; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------ | +| {{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}} | {{Spec2("CSS Logical Properties")}} | Definition inicial | + +## Compatibilidad en navegadores + +La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite y envíanos un pull request. + +{{Compat("css.properties.border-block")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}. +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-bottom-color/index.html b/files/es/web/css/border-bottom-color/index.html deleted file mode 100644 index d9c0b135e3be3f..00000000000000 --- a/files/es/web/css/border-bottom-color/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: border-bottom-color -slug: Web/CSS/border-bottom-color -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/border-bottom-color ---- -

<< Volver

- -

Resumen

- -

La propiedad border-bottom-color define el color del borde inferior de un elemento, con la ayuda de un valor de color o con la palabra clave transparente.

- -
    -
  • {{ Cssxref("initial", "Valor inicial") }}: propiedad {{ Cssxref("color") }}
  • -
  • Se aplica a: todos los elementos
  • -
  • {{ Cssxref("inheritance", "Valor heredado") }}: non
  • -
  • Porcentajes: N/A
  • -
  • Medio : {{ Xref_cssvisual() }}
  • -
  • {{ Cssxref("computed value", "Valor calculado") }}: como se especifique o si proviene de la propiedad {{ Cssxref("color") }}, será el valor {{ Cssxref("color") }}.
  • -
- -

Sintaxis

- -
border-bottom-color: couleur | transparent | inherit
-
- -

Valores

- -
-
color
-
puede especificarse por un valor RGB hexa-decimal o regular o por una palabra clave predefinida (azul).
-
- -
-
transparent
-
el elemento no tiene color propio, muestra el color del elemento atrás suyo en el árbol de apilado.
-
- -

Propiedades relacionadas

- -
    -
  • {{ Cssxref("border-color") }}
  • -
  • {{ Cssxref("border-left-color") }}
  • -
  • {{ Cssxref("border-right-color") }}
  • -
  • {{ Cssxref("border-top-color") }}
  • -
- -

Ejemplos

- -

Ver El Ejemplo Vivo

- -
element {
-	width: 300px;
-        padding: 15px;
-        border-bottom-size: 1px;
-        border-bottom-style: solid;
-        border-bottom-color: #000;
-}
-
- -

Notas

- - - -

Especificaciones

- - - -

Compatibilidades

- - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
- -

- -

Ver también

- -

{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}

- -
-

Categorías

- -

Interwiki Languages

-
- -

{{ languages( { "de": "de/CSS/border-bottom-color", "en": "en/CSS/border-bottom-color", "fr": "fr/CSS/border-bottom-color", "ja": "ja/CSS/border-bottom-color", "pl": "pl/CSS/border-bottom-color" } ) }}

diff --git a/files/es/web/css/border-bottom-color/index.md b/files/es/web/css/border-bottom-color/index.md new file mode 100644 index 00000000000000..fb341a78f82d62 --- /dev/null +++ b/files/es/web/css/border-bottom-color/index.md @@ -0,0 +1,87 @@ +--- +title: border-bottom-color +slug: Web/CSS/border-bottom-color +tags: + - CSS + - CSS:Referencias + - Todas_las_Categorías +translation_of: Web/CSS/border-bottom-color +--- +<< [Volver](/es/Guía_de_referencia_de_CSS) + +### Resumen + +La propiedad `border-bottom-color` define el color del borde inferior de un elemento, con la ayuda de un valor de color o con la palabra clave `transparent`e. + +- {{ Cssxref("initial", "Valor inicial") }}: propiedad {{ Cssxref("color") }} +- Se aplica a: todos los elementos +- {{ Cssxref("inheritance", "Valor heredado") }}: non +- Porcentajes: N/A +- Medio : {{ Xref_cssvisual() }} +- {{ Cssxref("computed value", "Valor calculado") }}: como se especifique o si proviene de la propiedad {{ Cssxref("color") }}, será el valor {{ Cssxref("color") }}. + +### Sintaxis + +``` +border-bottom-color: couleur | transparent | inherit +``` + +### Valores + +- color + - : puede especificarse por un valor RGB hexa-decimal o regular o por una palabra clave predefinida (_azul_). + + + +- transparent + - : el elemento no tiene color propio, muestra el color del elemento atrás suyo en el árbol de apilado. + +### Propiedades relacionadas + +- {{ Cssxref("border-color") }} +- {{ Cssxref("border-left-color") }} +- {{ Cssxref("border-right-color") }} +- {{ Cssxref("border-top-color") }} + +### Ejemplos + +[Ver El Ejemplo Vivo](/samples/cssref/border.html) + +``` +element { + width: 300px; + padding: 15px; + border-bottom-size: 1px; + border-bottom-style: solid; + border-bottom-color: #000; +} +``` + +### Notas + +- [Color Chart by VisiBone (en)](http://html-color-codes.com/) +- [Sélecteur de couleur, chez yoyodesign (fr)](http://www.yoyodesign.org/outils/ncolor/ncolor.php?langue=fr) + +### Especificaciones + +- [CSS 2.1 (en)](http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom-color) +- [CSS 3 (en)](http://www.w3.org/TR/css3-background/#border-bottom) + +### Compatibilidades + +| Navegador | Versión mínima | +| ----------------- | -------------- | +| Internet Explorer | 4 | +| Firefox | 1 | +| Netscape | 6 | +| Opera | 3.5 | + +### Ver también + +{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }} + +Categorías + +Interwiki Languages + +{{ languages( { "de": "de/CSS/border-bottom-color", "en": "en/CSS/border-bottom-color", "fr": "fr/CSS/border-bottom-color", "ja": "ja/CSS/border-bottom-color", "pl": "pl/CSS/border-bottom-color" } ) }} diff --git a/files/es/web/css/border-bottom-left-radius/index.html b/files/es/web/css/border-bottom-left-radius/index.html deleted file mode 100644 index 7a03d45c7913cc..00000000000000 --- a/files/es/web/css/border-bottom-left-radius/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: border-bottom-left-radius -slug: Web/CSS/border-bottom-left-radius -tags: - - Bordes CSS - - Propiedad CSS - - Referencia -translation_of: Web/CSS/border-bottom-left-radius ---- -
{{CSSRef}}
- -

Resumen

- -

La propiedad CSS border-bottom-left-radius establece el redondeo de la esquina inferior izquierda del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0, no se redondeará la esquina, dejándola cuadrada.

- -
border-bottom-left-radius.png
- -

Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.

- -
Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad border-bottom-left-radius, el valor de esta propiedad es restaurado a su valor inicial por la propiedad de forma reducida.
- -

{{cssinfo}}

- -

Sintaxis

- -
/* la esquina es un círculo */
-/* border-bottom-left-radius: radius */
-border-bottom-left-radius: 3px;
-
-/* la esquina es una elipse */
-/* border-bottom-left-radius: horizontal vertical */
-border-bottom-left-radius: 0.5em 1em;
-
-border-bottom-left-radius: inherit;
-
- -
-

donde:

- -
-
radius
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
-
horizontal
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
-
vertical
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
-
-
- -

Valores

- -
-
<length>
-
Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
-
<percentage>
-
Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplos

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ejemplo en vivoCódigo
-
- -
-
Un arco de círculo usado como borde -
-div {
-  border-bottom-left-radius: 40px 40px;
-}
-
-
-
- -
-
Un arco de elipse usado como borde -
-div {
-  border-bottom-left-radius: 40px 20px;
-}
-
-
-
- -
-
La caja es un cuadro: un arco de círculo es usado como borde -
-div {
-  border-bottom-left-radius: 40%;
-}
-
-
-
- -
-
La caja no es un círculo: un arco de elipse es usado como borde -
-div {
-  border-bottom-left-radius: 40%;
-}
-
-
-
- -
-
El color de fondo está delimitado al borde -
-div {
-  border-bottom-left-radius:40%;
-  border-style: black 3px double;
-  background-color: rgb(250,20,70);
-  background-clip: content-box;
-}
-
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
- -

Compatibilidad de navegadores

- -{{Compat("css.properties.border-bottom-left-radius")}} - -

Véase también

- -

Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-top-left-radius")}}.

diff --git a/files/es/web/css/border-bottom-left-radius/index.md b/files/es/web/css/border-bottom-left-radius/index.md new file mode 100644 index 00000000000000..b0f9bf7443e584 --- /dev/null +++ b/files/es/web/css/border-bottom-left-radius/index.md @@ -0,0 +1,163 @@ +--- +title: border-bottom-left-radius +slug: Web/CSS/border-bottom-left-radius +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-bottom-left-radius +--- +{{CSSRef}} + +## Resumen + +La propiedad CSS **`border-bottom-left-radius`** establece el redondeo de la esquina inferior izquierda del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es `0`, no se redondeará la esquina, dejándola cuadrada. + +![border-bottom-left-radius.png](/@api/deki/files/6136/=border-bottom-left-radius.png) + +Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}. + +> **Nota:** Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad `border-bottom-left-radius`, el valor de esta propiedad es restaurado a su valor inicial por la [propiedad de forma reducida](/es/docs/Web/CSS/Shorthand_properties). + +{{cssinfo}} + +## Sintaxis + +```css +/* la esquina es un círculo */ +/* border-bottom-left-radius: radius */ +border-bottom-left-radius: 3px; + +/* la esquina es una elipse */ +/* border-bottom-left-radius: horizontal vertical */ +border-bottom-left-radius: 0.5em 1em; + +border-bottom-left-radius: inherit; +``` + +donde: + +- _radius_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina. +- _horizontal_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina. +- _vertical_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina. + +### Valores + +- `` + - : Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos. +- `` + - : Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplos + +#### Un arco de círculo usado como borde + +```html hidden +
+``` + +```css +div { + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; + border-bottom-left-radius: 40px 40px; +} +``` + +{{EmbedLiveSample}} + +#### Un arco de elipse usado como borde + +```html hidden +
+``` + +```css +div { + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; + border-bottom-left-radius: 40px 20px; +} +``` + +{{EmbedLiveSample}} + +#### La caja es un cuadro: un arco de círculo es usado como borde + +```html hidden +
+``` + +```css +div { + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; + border-bottom-left-radius: 40%; +} +``` + +{{EmbedLiveSample}} + +#### La caja no es un círculo: un arco de elipse es usado como borde + +```html hidden +
+``` + +```css +div { + background-color: lightgreen; + border: solid 1px black; + border-bottom-left-radius: 40%; + width: 100px; + height: 200px; +} +``` + +{{EmbedLiveSample}} + +#### El color de fondo está delimitado al borde + +```html hidden +
+``` + +```css +div { + border: black 3px double; + border-bottom-left-radius: 40%; + height: 100px; + width: 100px; + background-color: rgb(250,20,70); + background-clip: content-box; +} +``` + +{{EmbedLiveSample}} + +## Especificaciones + +| Especificación | Estado | Comentarios | +| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------ | +| {{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}} | {{Spec2('CSS3 Backgrounds')}} | Definición inicial | + +## Compatibilidad de navegadores + +{{Compat("css.properties.border-bottom-left-radius")}} + +## Véase también + +Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-top-left-radius")}}. diff --git a/files/es/web/css/border-bottom-right-radius/index.html b/files/es/web/css/border-bottom-right-radius/index.html deleted file mode 100644 index 77c1905c128f55..00000000000000 --- a/files/es/web/css/border-bottom-right-radius/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: border-bottom-right-radius -slug: Web/CSS/border-bottom-right-radius -tags: - - Bordes CSS - - Propiedad CSS - - Referencia -translation_of: Web/CSS/border-bottom-right-radius ---- -
{{CSSRef}}
- -

Resumen

- -

La propiedad CSS border-bottom-right-radius establece el redondeo de la esquina inferior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0, no se redondeará la esquina, dejándola cuadrada.

- -
border-bottom-right-radius.png
- -

Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.

- -
Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad border-bottom-right-radius, el valor de esta propiedad es restaurado a su valor inicial por la propiedad de forma reducida.
- -

{{cssinfo}}

- -

Sintaxis

- -
/* la esquina es un círculo */
-/* border-bottom-right-radius: radius */
-border-bottom-right-radius: 3px;
-
-/* la esquina es una elipse */
-/* border-bottom-right-radius: horizontal vertical */
-border-bottom-right-radius: 0.5em 1em;
-
-border-bottom-right-radius: inherit;
-
- -
-

donde:

- -
-
radius
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
-
horizontal
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
-
vertical
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
-
-
- -

Valores

- -
-
<length>
-
Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
-
<percentage>
-
Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplos

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ejemplo en vivoCódigo
-
- -
-
Un arco de círculo usado como borde -
-div {
-  border-bottom-right-radius: 40px 40px;
-}
-
-
-
- -
-
Un arco de elipse usado como borde -
-div {
-  border-bottom-right-radius: 40px 20px;
-}
-
-
-
- -
-
La caja es un cuadro: un arco de círculo es usado como borde -
-div {
-  border-bottom-right-radius: 40%;
-}
-
-
-
- -
-
La caja no es un círculo: un arco de elipse es usado como borde -
-div {
-  border-bottom-right-radius: 40%;
-}
-
-
-
- -
-
El color de fondo está delimitado al borde -
-div {
-  border-bottom-right-radius:40%;
-  border-style: black 3px double;
-  background-color: rgb(250,20,70);
-  background-clip: content-box;
-}
-
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
- -

Compatibilidad de navegadores

- -{{Compat("css.properties.border-bottom-right-radius")}} - -

Véase también

- -

Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-top-left-radius")}}, y {{cssxref("border-bottom-left-radius")}}.

diff --git a/files/es/web/css/border-bottom-right-radius/index.md b/files/es/web/css/border-bottom-right-radius/index.md new file mode 100644 index 00000000000000..3e786a9fe53bf3 --- /dev/null +++ b/files/es/web/css/border-bottom-right-radius/index.md @@ -0,0 +1,163 @@ +--- +title: border-bottom-right-radius +slug: Web/CSS/border-bottom-right-radius +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-bottom-right-radius +--- +{{CSSRef}} + +## Resumen + +La propiedad CSS **`border-bottom-right-radius`** establece el redondeo de la esquina inferior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es `0`, no se redondeará la esquina, dejándola cuadrada. + +![border-bottom-right-radius.png](/@api/deki/files/6134/=border-bottom-right-radius.png) + +Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}. + +> **Nota:** Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad `border-bottom-right-radius`, el valor de esta propiedad es restaurado a su valor inicial por la [propiedad de forma reducida](/es/docs/Web/CSS/Shorthand_properties). + +{{cssinfo}} + +## Sintaxis + +```css +/* la esquina es un círculo */ +/* border-bottom-right-radius: radius */ +border-bottom-right-radius: 3px; + +/* la esquina es una elipse */ +/* border-bottom-right-radius: horizontal vertical */ +border-bottom-right-radius: 0.5em 1em; + +border-bottom-right-radius: inherit; +``` + +donde: + +- _radius_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina. +- _horizontal_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina. +- _vertical_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina. + +### Valores + +- `` + - : Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos. +- `` + - : Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplos + +#### Un arco de círculo usado como borde + +```html hidden +
+``` + +```css +div { + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; + border-bottom-right-radius: 40px 40px; +} +``` + +{{EmbedLiveSample}} + +#### Un arco de elipse usado como borde + +```html hidden +
+``` + +```css +div { + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; + border-bottom-right-radius: 40px 20px; +} +``` + +{{EmbedLiveSample}} + +#### La caja es un cuadro: un arco de círculo es usado como borde + +```html hidden +
+``` + +```css +div { + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; + border-bottom-right-radius: 40%; +} +``` + +{{EmbedLiveSample}} + +#### La caja no es un círculo: un arco de elipse es usado como borde + +```html hidden +
+``` + +```css +div { + background-color: lightgreen; + border: solid 1px black; + border-bottom-right-radius: 40%; + width: 100px; + height: 200px; +} +``` + +{{EmbedLiveSample}} + +#### El color de fondo está delimitado al borde + +```html hidden +
+``` + +```css +div { + border: black 3px double; + border-bottom-right-radius: 40%; + height: 100px; + width: 100px; + background-color: rgb(250,20,70); + background-clip: content-box; +} +``` + +{{EmbedLiveSample}} + +## Especificaciones + +| Especificación | Estado | Comentarios | +| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ | +| {{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}} | {{Spec2('CSS3 Backgrounds')}} | Definición inicial | + +## Compatibilidad de navegadores + +{{Compat("css.properties.border-bottom-right-radius")}} + +## Véase también + +Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-top-left-radius")}}, y {{cssxref("border-bottom-left-radius")}}. diff --git a/files/es/web/css/border-bottom-style/index.html b/files/es/web/css/border-bottom-style/index.html deleted file mode 100644 index 69c09f07904a0f..00000000000000 --- a/files/es/web/css/border-bottom-style/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: border-bottom-style -slug: Web/CSS/border-bottom-style -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/border-bottom-style ---- -

- -

<< Volver

- -

- -

Resumen

- -

border-bottom-style define el estilo de línea del borde inferior de una caja.

- -
    -
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }}
  • -
  • Se aplica a: todos los elementos
  • -
  • {{ Cssxref("inheritance", "Valor heredado") }}: no
  • -
  • Porcentajes: N/A
  • -
  • Medio: {{ Xref_cssvisual() }}
  • -
  • {{ Cssxref("computed value", "Valor calculado") }}: como se especificó
  • -
- -

Sintaxis

- -
border-bottom-style: <border-style> | inherit
-
- -

Valores

- -
-
none
-
sin borde.
-
hidden
-
es igual a 'none', excepto en términos de resolución de conflicto para elementos de tabla.
-
dotted
-
series de puntos (....).
-
dashed
-
series de guiones cortos o pequeñas líneas (----).
-
solid
-
línea única, recta y sólida.
-
double
-
dos líneas rectas que se suman a la cantidad de píxeles definidos como ancho de bordeborder-width.
-
groove
-
efecto de hundido.
-
ridge
-
al revés de 'groove'. El borde aparece en 3D (saliendo).
-
inset
-
hace que la caja aparezca hundida.
-
outset
-
opuesto a 'inset'. La caja aparece en 3D (saliendo).
-
- -

Propiedades relacionadas

- -
    -
  • {{ Cssxref("border-left-style") }}
  • -
  • {{ Cssxref("border-right-style") }}
  • -
  • {{ Cssxref("border-top-style") }}
  • -
  • {{ Cssxref("border-style") }}
  • -
- -

Ejemplos

- -

Ver El Ejemplo Vivo

- -
element {
-        border-bottom-size: 1px;
-        border-bottom-style: dotted;
-        border-bottom-color: #000;
-}
-
- -

Notas

- -

A menos que un valor {{ Cssxref("border-style") }} sea definido, el borde no aparecerá porque el valor por defecto es 'none'.

- -

Especificaciones

- - - -

Compatibilidades

- -

Ver también

- -

{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}

- -

- -
-

Categorías

-Interwiki Languages
- -

{{ languages( { "de": "de/CSS/border-bottom-style", "en": "en/CSS/border-bottom-style", "fr": "fr/CSS/border-bottom-style", "ja": "ja/CSS/border-bottom-style", "pl": "pl/CSS/border-bottom-style" } ) }}

diff --git a/files/es/web/css/border-bottom-style/index.md b/files/es/web/css/border-bottom-style/index.md new file mode 100644 index 00000000000000..5ecc9e53e5a0e3 --- /dev/null +++ b/files/es/web/css/border-bottom-style/index.md @@ -0,0 +1,90 @@ +--- +title: border-bottom-style +slug: Web/CSS/border-bottom-style +tags: + - CSS + - CSS:Referencias + - Todas_las_Categorías +translation_of: Web/CSS/border-bottom-style +--- +<< [Volver](/es/Guía_de_referencia_de_CSS) + +### Resumen + +`border-bottom-style` define el estilo de línea del borde inferior de una caja. + +- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }} +- Se aplica a: todos los elementos +- {{ Cssxref("inheritance", "Valor heredado") }}: no +- Porcentajes: N/A +- Medio: {{ Xref_cssvisual() }} +- {{ Cssxref("computed value", "Valor calculado") }}: como se especificó + +### Sintaxis + +``` +border-bottom-style: | inherit +``` + +### Valores + +- none + - : sin borde. +- hidden + - : es igual a 'none', excepto en términos de resolución de conflicto para elementos de tabla. +- dotted + - : series de puntos (....). +- dashed + - : series de guiones cortos o pequeñas líneas (----). +- solid + - : línea única, recta y sólida. +- double + - : dos líneas rectas que se suman a la cantidad de píxeles definidos como ancho de borde`border-width`. +- groove + - : efecto de hundido. +- ridge + - : al revés de 'groove'. El borde aparece en 3D (saliendo). +- inset + - : hace que la caja aparezca hundida. +- outset + - : opuesto a 'inset'. La caja aparece en 3D (saliendo). + +### Propiedades relacionadas + +- {{ Cssxref("border-left-style") }} +- {{ Cssxref("border-right-style") }} +- {{ Cssxref("border-top-style") }} +- {{ Cssxref("border-style") }} + +### Ejemplos + +[Ver El Ejemplo Vivo](/samples/cssref/border.html) + +``` +element { + border-bottom-size: 1px; + border-bottom-style: dotted; + border-bottom-color: #000; +} +``` + +### Notas + +A menos que un valor {{ Cssxref("border-style") }} sea definido, el borde no aparecerá porque el valor por defecto es 'none'. + +### Especificaciones + +- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom-style) +- [CSS 3](http://www.w3.org/TR/css3-background/#border-style) + +### Compatibilidades + +### Ver también + +{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }} + +Categorías + +Interwiki Languages + +{{ languages( { "de": "de/CSS/border-bottom-style", "en": "en/CSS/border-bottom-style", "fr": "fr/CSS/border-bottom-style", "ja": "ja/CSS/border-bottom-style", "pl": "pl/CSS/border-bottom-style" } ) }} diff --git a/files/es/web/css/border-bottom-width/index.html b/files/es/web/css/border-bottom-width/index.html deleted file mode 100644 index e1152c2d16e20c..00000000000000 --- a/files/es/web/css/border-bottom-width/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: border-bottom-width -slug: Web/CSS/border-bottom-width -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/border-bottom-width ---- -

- -

<< Volver

- -

Resumen

- -

border-bottom-width define el ancho del borde inferior de una caja.

- -
    -
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("medium", "medio") }}
  • -
  • Se aplica a : todos los elementos
  • -
  • {{ Cssxref("inheritance", "Valor heredado") }}: no
  • -
  • Porcentajes: N/A
  • -
  • Medio: {{ Xref_cssvisual() }}
  • -
  • {{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo es none o hidden.
  • -
- -

Sintaxis

- -
border-bottom-width: <border-width> | inherit
-
- -

Valores

- -
-
thin
-
un borde fino.
-
medium
-
un borde mediano.
-
thick
-
un borde grueso.
-
<length>
-
El espesor de un borde tiene un valor explícito. los anchos de borde no pueden ser negativos.
- Nota : El valor em también es soportada.
-
- -

Propiedades relacionadas

- -
    -
  • {{ Cssxref("border-left-style") }}
  • -
  • {{ Cssxref("border-right-style") }}
  • -
  • {{ Cssxref("border-top-style") }}
  • -
  • {{ Cssxref("border-style") }}
  • -
- -

Ejemplos

- -

Ver El Ejemplo Vivo

- -
element {
-    border-bottom-width: thin;
-    border-bottom-style: solid;
-    border-bottom-color: #000;
-}
-
- -

Especificacions

- - - -

Compatibilidades

- - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorVersión mínima
Internet Explorer
Firefox
Netscape
Opera
- -

Ver también

- -

{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}

- -

- -
-

Categorías

- -

Interwiki Languages

-
- -

{{ languages( { "de": "de/CSS/border-bottom-width", "en": "en/CSS/border-bottom-width", "pl": "pl/CSS/border-bottom-width", "fr": "fr/CSS/border-bottom-width", "ja": "ja/CSS/border-bottom-width" } ) }}

diff --git a/files/es/web/css/border-bottom-width/index.md b/files/es/web/css/border-bottom-width/index.md new file mode 100644 index 00000000000000..92d8e28f339ce9 --- /dev/null +++ b/files/es/web/css/border-bottom-width/index.md @@ -0,0 +1,84 @@ +--- +title: border-bottom-width +slug: Web/CSS/border-bottom-width +tags: + - CSS + - CSS:Referencias + - Todas_las_Categorías +translation_of: Web/CSS/border-bottom-width +--- +<< [Volver](/es/Guía_de_referencia_de_CSS) + +### Resumen + +`border-bottom-width` define el ancho del borde inferior de una caja. + +- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("medium", "medio") }} +- Se aplica a : todos los elementos +- {{ Cssxref("inheritance", "Valor heredado") }}: no +- Porcentajes: N/A +- Medio: {{ Xref_cssvisual() }} +- {{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo es `none` o `hidden`. + +### Sintaxis + +``` +border-bottom-width: | inherit +``` + +### Valores + +- thin + - : un borde fino. +- medium + - : un borde mediano. +- thick + - : un borde grueso. +- \ + - : El espesor de un borde tiene un valor explícito. los anchos de borde no pueden ser negativos. + + Nota : El valor `em` también es soportada. + +### Propiedades relacionadas + +- {{ Cssxref("border-left-style") }} +- {{ Cssxref("border-right-style") }} +- {{ Cssxref("border-top-style") }} +- {{ Cssxref("border-style") }} + +### Ejemplos + +[Ver El Ejemplo Vivo](/samples/cssref/border.html) + +``` +element { + border-bottom-width: thin; + border-bottom-style: solid; + border-bottom-color: #000; +} +``` + +### Especificacions + +- [CSS 1](http://www.w3.org/TR/CSS1#border-width) +- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#border-width-properties) +- [CSS 3](http://www.w3.org/TR/css3-background/#border-width) + +### Compatibilidades + +| Navegador | Versión mínima | +| ----------------- | -------------- | +| Internet Explorer | | +| Firefox | | +| Netscape | | +| Opera | | + +### Ver también + +{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }} + +Categorías + +Interwiki Languages + +{{ languages( { "de": "de/CSS/border-bottom-width", "en": "en/CSS/border-bottom-width", "pl": "pl/CSS/border-bottom-width", "fr": "fr/CSS/border-bottom-width", "ja": "ja/CSS/border-bottom-width" } ) }} diff --git a/files/es/web/css/border-bottom/index.html b/files/es/web/css/border-bottom/index.html deleted file mode 100644 index 00e0cf9b6d9778..00000000000000 --- a/files/es/web/css/border-bottom/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: border-bottom -slug: Web/CSS/border-bottom -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/border-bottom ---- -

<< Volver

- -

Resumen

- -

La propiedad border-bottom permite de definir de una vez todas las propiedades individuales {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }}, y {{ Cssxref("border-bottom-width") }}, las cuales describen el color, estilo y ancho del borde inferior de un elementos.

- -
    -
  • {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales
  • -
  • Se aplica a : todos los elementos
  • -
  • {{ Cssxref("inheritance", "Valor heredado") }}: no
  • -
  • Porcentajes: N/A
  • -
  • Medio: {{ Xref_cssvisual() }}
  • -
  • {{ Cssxref("computed value", "Valor calculado") }}: ver propiedades individuales
  • -
- -

Sintaxis

- -
border-bottom: [ <border-width> || <border-style> || <border-color> ] | inherit
-
- -

Valores

- -
-
<border-width>
-
ver {{ Cssxref("border-bottom-width") }}.
-
<border-style>
-
ver {{ Cssxref("border-bottom-style") }}.
-
<border-color>
-
ver {{ Cssxref("border-bottom-color") }}.
-
- -

Ejemplos

- -

Ver El Ejemplo Vivo

- -
element {
-    border-bottom-width: 1px solid #000;
-}
-
- -

Notas

- -

Si no se especifica el color del borde, este tomará el valor definido en la propiedad del {{ Cssxref("color") }} general.

- -

Se puede especificar los tres valores en cualquier orden y se pueden omitir una o dos.

- -

Como con todas las propiedades generales, border-bottom siempre inicia todos los valores que le pueden ser definidos aún cuando no están especificados, en este caso toma los valores por defecto.

- -

Lo que significa que:

- -
  border-bottom-style: dotted;
-  border-bottom: thick green;
- -

es idéntico a:

- -
  border-bottom-style: dotted;
-  border-bottom: none thick green;
- -

y el valor de {{ Cssxref("border-bottom-style") }} dado antes de border-bottom es ignorado.

- -

Como el valor por defecto de {{ Cssxref("border-bottom-style") }} es none, el no especificar la parte <border-style> en la propiedad general significa: sin borde.

- -

Especificaciones

- - - -

Compatibilidades

- - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape4
Opera3.5
- -

Ver también

- -

{{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-color") }},

- -
-

Categorías

- -

Interwiki Languages

-
- -

{{ languages( { "de": "de/CSS/border-bottom", "en": "en/CSS/border-bottom", "fr": "fr/CSS/border-bottom", "ja": "ja/CSS/border-bottom", "pl": "pl/CSS/border-bottom" } ) }}

diff --git a/files/es/web/css/border-bottom/index.md b/files/es/web/css/border-bottom/index.md new file mode 100644 index 00000000000000..4132327f98f262 --- /dev/null +++ b/files/es/web/css/border-bottom/index.md @@ -0,0 +1,97 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +tags: + - CSS + - CSS:Referencias + - Todas_las_Categorías +translation_of: Web/CSS/border-bottom +--- +<< [Volver](/es/Guía_de_referencia_de_CSS) + +### Resumen + +La propiedad `border-bottom` permite de definir de una vez todas las propiedades individuales {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }}, y {{ Cssxref("border-bottom-width") }}, las cuales describen el color, estilo y ancho del borde inferior de un elementos. + +- {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales +- Se aplica a : todos los elementos +- {{ Cssxref("inheritance", "Valor heredado") }}: no +- Porcentajes: N/A +- Medio: {{ Xref_cssvisual() }} +- {{ Cssxref("computed value", "Valor calculado") }}: ver propiedades individuales + +### Sintaxis + +``` +border-bottom: [ || || ] | inherit +``` + +### Valores + +- \ + - : ver {{ Cssxref("border-bottom-width") }}. +- \ + - : ver {{ Cssxref("border-bottom-style") }}. +- \ + - : ver {{ Cssxref("border-bottom-color") }}. + +### Ejemplos + +[Ver El Ejemplo Vivo](/samples/cssref/border.html) + +``` +element { + border-bottom-width: 1px solid #000; +} +``` + +### Notas + +Si no se especifica el color del borde, este tomará el valor definido en la propiedad del {{ Cssxref("color") }} general. + +Se puede especificar los tres valores en cualquier orden y se pueden omitir una o dos. + +Como con todas las propiedades generales, `border-bottom` siempre inicia todos los valores que le pueden ser definidos aún cuando no están especificados, en este caso toma los valores por defecto. + +Lo que significa que: + +``` + border-bottom-style: dotted; + border-bottom: thick green; +``` + +es idéntico a: + +``` + border-bottom-style: dotted; + border-bottom: none thick green; +``` + +y el valor de {{ Cssxref("border-bottom-style") }} dado antes de `border-bottom` es ignorado. + +Como el valor por defecto de {{ Cssxref("border-bottom-style") }} es `none`, el no especificar la parte \ en la propiedad general significa: **sin borde**. + +### Especificaciones + +- [CSS 1](http://www.w3.org/TR/CSS1#border-bottom) +- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties) +- [CSS 3](http://www.w3.org/TR/css3-background/#the-border-shorthands) + +### Compatibilidades + +| Navegador | Versión mínima | +| ----------------- | -------------- | +| Internet Explorer | 4 | +| Firefox | 1 | +| Netscape | 4 | +| Opera | 3.5 | + +### Ver también + +{{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-color") }}, + +Categorías + +Interwiki Languages + +{{ languages( { "de": "de/CSS/border-bottom", "en": "en/CSS/border-bottom", "fr": "fr/CSS/border-bottom", "ja": "ja/CSS/border-bottom", "pl": "pl/CSS/border-bottom" } ) }} diff --git a/files/es/web/css/border-collapse/index.html b/files/es/web/css/border-collapse/index.html deleted file mode 100644 index 15602efea73cf1..00000000000000 --- a/files/es/web/css/border-collapse/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: border-collapse -slug: Web/CSS/border-collapse -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/border-collapse ---- -

<< Volver

- -

Resumen

- -

La propiedad border-collapse se utiliza para fusionar los bordes. Ésto tiene una gran influencia sobre la presentación y el estilo de las celdas de tabla. La representación de los bordes de tabla es dividida en dos categorías en CSS2 - "fusión" y "separación" (collapsed - separated). Esta propiedad especifica que modo de presentación de borde hay que usar.

- -

En el modelo de fusión, las celdas adyacentes comparten los mismos bordes

- -

En el modelo de separación, cada celda adyacente tiene su propio borde (la distancia entre cada borde es dado con la propiedad del {{ Cssxref("border-spacing", "espaciado de borde") }}).

- -
    -
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("separate", "separado") }}
  • -
  • {{ Cssxref("inheritance", "Valor heredado") }}: Yes
  • -
  • Media: {{ Xref_cssvisual() }}
  • -
  • {{ Cssxref("computed value", "Valor calculado") }}:
  • -
- -

Sintaxis

- -
border-collapse: value
-
- -

Valores

- -
    -
  • inherit : Define explícitamente el valor como heredada del elemento padre.
  • -
  • separate : Utiliza el modo de presentación de separación de borde.
  • -
  • collapse : Utiliza el modo de presentación de fusión de borde
  • -
- -

Ejemplos

- -

Ver El Ejemplo Vivo

- -
<table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500">
-
- -
<table border="1" style="border-collapse: separate" bordercolor="#111111" width="500">
-
- -

Notas

- -

En el modelo de fusión, el valor del {{ Cssxref("border-style", "estilo de borde") }} de inset se comporta como groove, y outset como ridge.

- -

CSS 2 especifica que el valor inicial para esta propiedad es collapse, pero CSS 2.1 y Mozilla/Opera definen o se comportan como si el valor inicial fuera separate.

- -

Especificaciones

- - - -

Compatibilidades

- - - - - - - - - - - - - - - - - - - - -
NavegadorVersión mínima
Internet Explorer5.5
Netscape7
Opera5
- -

- -

Ver también

- -

{{ Cssxref("border-spacing") }}

- -
-

Categorías

- -

Interwiki Languages

-
- -

{{ languages( { "en": "en/CSS/border-collapse", "fr": "fr/CSS/border-collapse", "pl": "pl/CSS/border-collapse" } ) }}

diff --git a/files/es/web/css/border-collapse/index.md b/files/es/web/css/border-collapse/index.md new file mode 100644 index 00000000000000..75230c97a08fe4 --- /dev/null +++ b/files/es/web/css/border-collapse/index.md @@ -0,0 +1,76 @@ +--- +title: border-collapse +slug: Web/CSS/border-collapse +tags: + - CSS + - CSS:Referencias + - Todas_las_Categorías +translation_of: Web/CSS/border-collapse +--- +<< [Volver](es/Gu%c3%ada_de_referencia_de_CSS) + +### Resumen + +La propiedad `border-collapse` se utiliza para fusionar los bordes. Ésto tiene una gran influencia sobre la presentación y el estilo de las celdas de tabla. La representación de los bordes de tabla es dividida en dos categorías en CSS2 - "fusión" y "separación" (collapsed - separated). Esta propiedad especifica que modo de presentación de borde hay que usar. + +En el modelo de fusión, las celdas adyacentes comparten los mismos bordes + +En el modelo de separación, cada celda adyacente tiene su propio borde (la distancia entre cada borde es dado con la propiedad del {{ Cssxref("border-spacing", "espaciado de borde") }}). + +- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("separate", "separado") }} +- {{ Cssxref("inheritance", "Valor heredado") }}: Yes +- Media: {{ Xref_cssvisual() }} +- {{ Cssxref("computed value", "Valor calculado") }}: + +### Sintaxis + +``` +border-collapse: value +``` + +### Valores + +- **inherit** : Define explícitamente el valor como heredada del elemento padre. +- **separate** : Utiliza el modo de presentación de separación de borde. +- **collapse** : Utiliza el modo de presentación de fusión de borde + +### Ejemplos + +[Ver El Ejemplo Vivo](/samples/cssref/border-collapse.html) + +``` + +``` + +``` +
+``` + +### Notas + +En el modelo de fusión, el valor del {{ Cssxref("border-style", "estilo de borde") }} de `inset` se comporta como `groove`, y `outset` como `ridge`. + +CSS 2 especifica que el valor inicial para esta propiedad es `collapse`, pero CSS 2.1 y Mozilla/Opera definen o se comportan como si el valor inicial fuera `separate`. + +### Especificaciones + +- [CSS 2.1](http://www.w3.org/TR/CSS21/tables.html#collapsing-borders) +- [CSS 3](http://www.w3.org/TR/REC-CSS2/tables.html#borders) + +### Compatibilidades + +| Navegador | Versión mínima | +| ----------------- | -------------- | +| Internet Explorer | 5.5 | +| Netscape | 7 | +| Opera | 5 | + +### Ver también + +{{ Cssxref("border-spacing") }} + +Categorías + +Interwiki Languages + +{{ languages( { "en": "en/CSS/border-collapse", "fr": "fr/CSS/border-collapse", "pl": "pl/CSS/border-collapse" } ) }} diff --git a/files/es/web/css/border-color/index.html b/files/es/web/css/border-color/index.html deleted file mode 100644 index 8e6e61c681717a..00000000000000 --- a/files/es/web/css/border-color/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: border-color -slug: Web/CSS/border-color -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/border-color ---- -

{{ PreviousNext("CSS:border", "CSS:border-style") }}

- -

Resumen

- -

la propiedad border-color es un atajo para definir el color de los cuatro bordes de un elemento.

- -
    -
  • {{ Cssxref("initial", "Valor inicial") }}: el {{ Cssxref("color") }} del elemento en sí
  • -
  • Se aplica a: todos los elementos
  • -
  • {{ Cssxref("inheritance", "Herencia") }}: no
  • -
  • Percentages: N/A
  • -
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
  • -
  • {{ Cssxref("computed value", "Valor calculada") }}: el valor del color por defecto, o lo que se especificó.
  • -
- -

Sintaxis

- -
border-color: [ <color> || transparent ]{1,4} | inherit
-
- -

Valores

- -
-
<color>
-
el color se puede especificar con un valor RGB hexa-decimal o regular, o con el nombre predefinido de ese color.
-
- -
-
transparent
-
el borde no aparece pero ocupa el sitio definido.
-
- -

Se pueden pasar hasta cuatro valores;

- -

Con un color, los cuatro lados tendrán el mismo.
- Con dos colores, los lados de arriba y abajo utilizan el primer valor y los izquierda y derecha el segundo.
- Con tres colores, el primero para arriba, el segundo para izquierda y derecha y el tercero para abajo.
- Con cuatro colores, el primero para arriba, el segundo para la derecha, el tercero para abajo y el cuarto para la izquierda.

- -

Ejemplos

- -

Ver El Ejemplo Vivo

- -
element {
-  border-width: 1px;
-  border-style: solid;
-  border-color: black;
-}
-
- -

Notas

- -

Para poder ver el/los bordes también hay que definir {{ Cssxref("border-width", "el ancho") }} con un valor positivo y {{ Cssxref("border-style", "el estilo") }} con algo visible. (diferente de none o hidden)

- -

Especificaciones

- - - -

Compatibilidad

- -
- - - - - - - - - - - - - - - - - - - - - - -
NavegadoresVersión mínima
Internet Explorer4
Firefox1
Netscape4
Opera3.5
- -

Extensiones Mozilla

- -

La siguientes extensiones definen los múltiples colores de los respectivos bordes en los navegadores Gecko.

- -
    -
  • {{ Cssxref("-moz-border-bottom-colors") }}
  • -
  • {{ Cssxref("-moz-border-left-colors") }}
  • -
  • {{ Cssxref("-moz-border-right-colors") }}
  • -
  • {{ Cssxref("-moz-border-top-colors") }}
  • -
- -

Ver también

- -

{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}

diff --git a/files/es/web/css/border-color/index.md b/files/es/web/css/border-color/index.md new file mode 100644 index 00000000000000..974d9be45a5df3 --- /dev/null +++ b/files/es/web/css/border-color/index.md @@ -0,0 +1,88 @@ +--- +title: border-color +slug: Web/CSS/border-color +tags: + - CSS + - CSS:Referencias + - Todas_las_Categorías +translation_of: Web/CSS/border-color +--- +{{ PreviousNext("CSS:border", "CSS:border-style") }} + +### Resumen + +la propiedad `border-color` es un atajo para definir el color de los cuatro bordes de un elemento. + +- {{ Cssxref("initial", "Valor inicial") }}: el {{ Cssxref("color") }} del elemento en sí +- Se aplica a: todos los elementos +- {{ Cssxref("inheritance", "Herencia") }}: no +- Percentages: N/A +- Medio: {{ Cssxref("Media:Visual", "visual") }} +- {{ Cssxref("computed value", "Valor calculada") }}: el valor del `color` por defecto, o lo que se especificó. + +### Sintaxis + +``` +border-color: [ || transparent ]{1,4} | inherit +``` + +### Valores + +- \ + - : el color se puede especificar con un valor RGB hexa-decimal o regular, o con el nombre predefinido de ese color. + + + +- transparent + - : el borde no aparece pero ocupa el sitio definido. + +Se pueden pasar hasta cuatro valores; + +Con **un** color, los cuatro lados tendrán el mismo. +Con **dos** colores, los lados de arriba y abajo utilizan el primer valor y los izquierda y derecha el segundo. +Con **tres** colores, el primero para arriba, el segundo para izquierda y derecha y el tercero para abajo. +Con **cuatro** colores, el primero para arriba, el segundo para la derecha, el tercero para abajo y el cuarto para la izquierda. + +### Ejemplos + +[Ver El Ejemplo Vivo](/samples/cssref/border.html) + +``` +element { + border-width: 1px; + border-style: solid; + border-color: black; +} +``` + +### Notas + +Para poder ver el/los bordes también hay que definir {{ Cssxref("border-width", "el ancho") }} con un valor positivo y {{ Cssxref("border-style", "el estilo") }} con algo visible. (_diferente de `none o hidden`_) + +### Especificaciones + +- [CSS 1](http://www.w3.org/TR/CSS1#border-color) +- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#border-color-properties) +- [CSS 3](http://www.w3.org/TR/css3-background/#the-border-color) + +### Compatibilidad + +| Navegadores | Versión mínima | +| ----------------- | -------------- | +| Internet Explorer | 4 | +| Firefox | 1 | +| Netscape | 4 | +| Opera | 3.5 | + +### Extensiones Mozilla + +La siguientes extensiones definen los múltiples colores de los respectivos bordes en los navegadores Gecko. + +- {{ Cssxref("-moz-border-bottom-colors") }} +- {{ Cssxref("-moz-border-left-colors") }} +- {{ Cssxref("-moz-border-right-colors") }} +- {{ Cssxref("-moz-border-top-colors") }} + +### Ver también + +{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }} diff --git a/files/es/web/css/border-end-end-radius/index.html b/files/es/web/css/border-end-end-radius/index.html deleted file mode 100644 index 63124941ef0f1f..00000000000000 --- a/files/es/web/css/border-end-end-radius/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: border-end-end-radius -slug: Web/CSS/border-end-end-radius -translation_of: Web/CSS/border-end-end-radius ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

La propiedad de CSS border-end-end-radius define un radio de borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
/* <length> values */
-/* With one value the corner will be a circle */
-border-end-end-radius: 10px;
-border-end-end-radius: 1em;
-
-/* With two values the corner will be an ellipse */
-border-end-end-radius: 1em 2em;
-
-/* Global values */
-border-end-end-radius: inherit;
-border-end-end-radius: initial;
-border-end-end-radius: unset;
-
- -

Por ejemplo, en un modo de escritura horizontal-tb, esta propiedad corresponde a la propiedad {{CSSxRef("border-bottom-right-radius")}}.

- -

Sintaxis

- -

Valores

- -
-
<length-percentage>
-
Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.
-
- -

Sintaxis formal

- -{{CSSSyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: rebeccapurple;
-  width: 120px;
-  height: 120px;
-  border-end-end-radius: 10px;
-}
-
-.exampleText {
-  writing-mode: vertical-rl;
-  padding: 10px;
-  background-color: #fff;
-  border-end-end-radius: 10px;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

{{CSSInfo}}

- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-end-end-radius")}}

- -

Mira también

- -
    -
  • La propiedad física asignada: {{CSSxRef("border-bottom-right-radius")}}
  • -
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-end-end-radius/index.md b/files/es/web/css/border-end-end-radius/index.md new file mode 100644 index 00000000000000..8d05729e4bc46d --- /dev/null +++ b/files/es/web/css/border-end-end-radius/index.md @@ -0,0 +1,83 @@ +--- +title: border-end-end-radius +slug: Web/CSS/border-end-end-radius +translation_of: Web/CSS/border-end-end-radius +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-end-end-radius`** define un radio de borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +```css +/* values */ +/* With one value the corner will be a circle */ +border-end-end-radius: 10px; +border-end-end-radius: 1em; + +/* With two values the corner will be an ellipse */ +border-end-end-radius: 1em 2em; + +/* Global values */ +border-end-end-radius: inherit; +border-end-end-radius: initial; +border-end-end-radius: unset; +``` + +Por ejemplo, en un modo de escritura `horizontal-tb`, esta propiedad corresponde a la propiedad {{CSSxRef("border-bottom-right-radius")}}. + +## Sintaxis + +### Valores + +- `` + - : Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos. + +### Sintaxis formal + +{{CSSSyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example

+
+``` + +### Contenido CSS + +```css +div { + background-color: rebeccapurple; + width: 120px; + height: 120px; + border-end-end-radius: 10px; +} + +.exampleText { + writing-mode: vertical-rl; + padding: 10px; + background-color: #fff; + border-end-end-radius: 10px; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +{{CSSInfo}} + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-end-end-radius")}} + +## Mira también + +- La propiedad física asignada: {{CSSxRef("border-bottom-right-radius")}} +- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} diff --git a/files/es/web/css/border-end-start-radius/index.html b/files/es/web/css/border-end-start-radius/index.html deleted file mode 100644 index 8341ce4b933b59..00000000000000 --- a/files/es/web/css/border-end-start-radius/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: border-end-start-radius -slug: Web/CSS/border-end-start-radius -translation_of: Web/CSS/border-end-start-radius ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

La propiedad de CSS border-end-start-radius define un radio del borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
/* <length> values */
-/* With one value the corner will be a circle */
-border-end-start-radius: 10px;
-border-end-start-radius: 1em;
-
-/* With two values the corner will be an ellipse */
-border-end-start-radius: 1em 2em;
-
-/* Global values */
-border-end-start-radius: inherit;
-border-end-start-radius: initial;
-border-end-start-radius: unset;
-
- -

Por ejemplo, en un modo de escritura horizontal-tb, esta propiedad corresponde a la propiedad {{CSSxRef("border-top-right-radius")}}.

- -

Sintaxis

- -

Valores

- -
-
<length-percentage>
-
Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.
-
- -

Sintaxis formal

- -{{CSSSyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: rebeccapurple;
-  width: 120px;
-  height: 120px;
-  border-end-start-radius: 10px;
-}
-
-.exampleText {
-  writing-mode: vertical-rl;
-  padding: 10px;
-  background-color: #fff;
-  border-end-start-radius: 10px;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

{{CSSInfo}}

- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-end-start-radius")}}

- -

Mira también

- -
    -
  • La propiedad física asignada: {{CSSxRef("border-top-right-radius")}}
  • -
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-end-start-radius/index.md b/files/es/web/css/border-end-start-radius/index.md new file mode 100644 index 00000000000000..a436127c3d3246 --- /dev/null +++ b/files/es/web/css/border-end-start-radius/index.md @@ -0,0 +1,83 @@ +--- +title: border-end-start-radius +slug: Web/CSS/border-end-start-radius +translation_of: Web/CSS/border-end-start-radius +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-end-start-radius`** define un radio del borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +```css +/* values */ +/* With one value the corner will be a circle */ +border-end-start-radius: 10px; +border-end-start-radius: 1em; + +/* With two values the corner will be an ellipse */ +border-end-start-radius: 1em 2em; + +/* Global values */ +border-end-start-radius: inherit; +border-end-start-radius: initial; +border-end-start-radius: unset; +``` + +Por ejemplo, en un modo de escritura `horizontal-tb`, esta propiedad corresponde a la propiedad {{CSSxRef("border-top-right-radius")}}. + +## Sintaxis + +### Valores + +- `` + - : Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos. + +### Sintaxis formal + +{{CSSSyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example

+
+``` + +### Contenido CSS + +```css +div { + background-color: rebeccapurple; + width: 120px; + height: 120px; + border-end-start-radius: 10px; +} + +.exampleText { + writing-mode: vertical-rl; + padding: 10px; + background-color: #fff; + border-end-start-radius: 10px; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +{{CSSInfo}} + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-end-start-radius")}} + +## Mira también + +- La propiedad física asignada: {{CSSxRef("border-top-right-radius")}} +- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} diff --git a/files/es/web/css/border-image-outset/index.html b/files/es/web/css/border-image-outset/index.html deleted file mode 100644 index b155585c577946..00000000000000 --- a/files/es/web/css/border-image-outset/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: border-image-outset -slug: Web/CSS/border-image-outset -tags: - - Bordes CSS - - CSS - - Propiedad CSS - - Referencia -translation_of: Web/CSS/border-image-outset ---- -
{{CSSRef}}
- -

Resumen

- -

La propiedad border-image-outset describe el monto por el cual se extenderá la imagen de borde más allá del límite de la caja.

- -

Las porciones de la imagen de borde que se dibujen fuera de los límites de la caja como resultado de esta propiedad no provocarán desplazamiento del contenido. Estas áreas tampoco capturarán o causarán que ocurran eventos del ratón con referencia al elemento al que pertenecen.

- -
{{cssinfo}}
- -

Sintaxis

- -
/* border-image-outset: sides */
-border-image-outset: 1.5;
-
-/* border-image-outset: vertical horizontal */
-border-image-outset: 1 1.2;
-
-/* border-image-outset: top horizontal bottom */
-border-image-outset: 30px 2 45px;
-
-/* border-image-outset: top right bottom left */
-border-image-outset: 7px 12px 14px 5px;
-
-border-image-outset: inherit;
-
- -

Valores

- -
-

Cuando un valor se especifica como valor {{cssxref("<number>")}} sin unidad, el valor es multiplicado por el {{cssxref("border-width")}} calculado correspondiente, para determinar el valor de border-image-outset. Los valores negativos no son permitidos.

-
- -
-
sides
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en las cuatro direcciones.
-
horizontal
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones horizontales (izquierda y derecha).
-
vertical
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones verticales (superior e inferior).
-
top
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde superior de la caja.
-
bottom
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde inferior de la caja.
-
right
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde derecho de la caja.
-
left
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde izquierdo de la caja.
-
inherit
-
Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de sus elementos padre.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Backgrounds', '#border-image-outset', 'border-image-outset')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
- -

Compatibilidad de navegadores

- -{{Compat("css.properties.border-image-outset")}} diff --git a/files/es/web/css/border-image-outset/index.md b/files/es/web/css/border-image-outset/index.md new file mode 100644 index 00000000000000..bf89f3c10b97b1 --- /dev/null +++ b/files/es/web/css/border-image-outset/index.md @@ -0,0 +1,72 @@ +--- +title: border-image-outset +slug: Web/CSS/border-image-outset +tags: + - Bordes CSS + - CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-image-outset +--- +{{CSSRef}} + +## Resumen + +La propiedad **`border-image-outset`** describe el monto por el cual se extenderá la imagen de borde más allá del límite de la caja. + +Las porciones de la imagen de borde que se dibujen fuera de los límites de la caja como resultado de esta propiedad no provocarán desplazamiento del contenido. Estas áreas tampoco capturarán o causarán que ocurran eventos del ratón con referencia al elemento al que pertenecen. + +{{cssinfo}} + +## Sintaxis + +```css +/* border-image-outset: sides */ +border-image-outset: 1.5; + +/* border-image-outset: vertical horizontal */ +border-image-outset: 1 1.2; + +/* border-image-outset: top horizontal bottom */ +border-image-outset: 30px 2 45px; + +/* border-image-outset: top right bottom left */ +border-image-outset: 7px 12px 14px 5px; + +border-image-outset: inherit; +``` + +### Valores + +> **Nota:** Cuando un valor se especifica como valor {{cssxref("<number>")}} sin unidad, el valor es multiplicado por el {{cssxref("border-width")}} calculado correspondiente, para determinar el valor de `border-image-outset`. Los valores negativos no son permitidos. + +- _sides_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en las cuatro direcciones. +- _horizontal_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones horizontales (izquierda y derecha). +- _vertical_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones verticales (superior e inferior). +- _top_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde superior de la caja. +- _bottom_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde inferior de la caja. +- _right_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde derecho de la caja. +- _left_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde izquierdo de la caja. +- `inherit` + - : Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de sus elementos padre. + +### Sintaxis formal + +{{csssyntax}} + +## Especificaciones + +| Especificación | Estatus | Comentarios | +| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ | +| {{SpecName('CSS3 Backgrounds', '#border-image-outset', 'border-image-outset')}} | {{Spec2('CSS3 Backgrounds')}} | Definición inicial | + +## Compatibilidad de navegadores + +{{Compat("css.properties.border-image-outset")}} diff --git a/files/es/web/css/border-image-repeat/index.html b/files/es/web/css/border-image-repeat/index.html deleted file mode 100644 index f9812c6e79626a..00000000000000 --- a/files/es/web/css/border-image-repeat/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: border-image-repeat -slug: Web/CSS/border-image-repeat -tags: - - Bordes CSS - - CSS - - Propiedades CSS - - Referencia -translation_of: Web/CSS/border-image-repeat ---- -
{{CSSRef}}
- -

Resumen

- -

La propiedad CSS border-image-repeat define cómo se manejará la parte media de una imagen de borde para que coincida con el tamaño del borde. Tiene sintaxis de un valor, el cual describe el comportamiento de todos los lados, y otra sintaxis de dos valores, que establece diferentes valores para el comportamiento horizontal y vertical.

- -
{{cssinfo}}
- -

Sintaxis

- -
/* border-image-repeat: type */
-border-image-repeat: stretch;
-
-/* border-image-repeat: horizontal vertical */
-border-image-repeat: round stretch;
-
-/* Global values */
-border-image-repeat: inherit;
-border-image-repeat: initial;
-border-image-repeat: unset;
-
- -

Valores

- -
-
type
-
Puede ser stretch, repeat, o round, que denotan cómo será tratada la imagen vertical y horizontalmente.
-
horizontal
-
Puede ser stretch, repeat, o round, denotando cómo será tratada la imagen horizontalmente.
-
vertical
-
Puede ser stretch, repeat, o round, denotando cómo será tratada la imagen verticalmente.
-
stretch
-
Palabra clave que indica que la imagen deberá ser estirada para cubrir el espacio entre dos bordes.
-
repeat
-
Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes.
-
round
-
Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes. Si la imagen no se ajusta después de repetirse un número íntegro de veces, la imagen es escalada para ajustarse.
-
space
-
La imagen es repetida hasta cubrir el área del elemento. Si no se cubre el área completa con un número de imágenes, el espacio extra es distribuido al rededor de éstas.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido CSS

- -
#borderImageRepetition {
-  width: 260px;
-  height: 80px;
-  margin-bottom: 10px;
-  border: 30px solid;
-  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
-  border-image-repeat: stretch; /* Puede ser modificado en el ejemplo en vivo */
-}
-
- - - -

{{EmbedLiveSample("Example", "330px", "180px")}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Backgrounds', '#border-image-repeat', 'border-image-repeat')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
- -

Compatibilidad de navegadores

- -
{{Compat("css.properties.border-image-repeat")}}
- -

Véase también

- - diff --git a/files/es/web/css/border-image-repeat/index.md b/files/es/web/css/border-image-repeat/index.md new file mode 100644 index 00000000000000..bfd1abee2cd882 --- /dev/null +++ b/files/es/web/css/border-image-repeat/index.md @@ -0,0 +1,104 @@ +--- +title: border-image-repeat +slug: Web/CSS/border-image-repeat +tags: + - Bordes CSS + - CSS + - Propiedades CSS + - Referencia +translation_of: Web/CSS/border-image-repeat +--- +{{CSSRef}} + +## Resumen + +La propiedad CSS **`border-image-repeat`** define cómo se manejará la parte media de una imagen de borde para que coincida con el tamaño del borde. Tiene sintaxis de un valor, el cual describe el comportamiento de todos los lados, y otra sintaxis de dos valores, que establece diferentes valores para el comportamiento horizontal y vertical. + +{{cssinfo}} + +## Sintaxis + +```css +/* border-image-repeat: type */ +border-image-repeat: stretch; + +/* border-image-repeat: horizontal vertical */ +border-image-repeat: round stretch; + +/* Global values */ +border-image-repeat: inherit; +border-image-repeat: initial; +border-image-repeat: unset; +``` + +### Valores + +- _type_ + - : Puede ser `stretch`, `repeat`, o `round`, que denotan cómo será tratada la imagen vertical y horizontalmente. +- _horizontal_ + - : Puede ser `stretch`, `repeat`, o `round`, denotando cómo será tratada la imagen horizontalmente. +- _vertical_ + - : Puede ser `stretch`, `repeat`, o `round`, denotando cómo será tratada la imagen verticalmente. +- `stretch` + - : Palabra clave que indica que la imagen deberá ser estirada para cubrir el espacio entre dos bordes. +- `repeat` + - : Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes. +- `round` + - : Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes. Si la imagen no se ajusta después de repetirse un número íntegro de veces, la imagen es escalada para ajustarse. +- `space` + - : La imagen es repetida hasta cubrir el área del elemento. Si no se cubre el área completa con un número de imágenes, el espacio extra es distribuido al rededor de éstas. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido CSS + +```css +#borderImageRepetition { + width: 260px; + height: 80px; + margin-bottom: 10px; + border: 30px solid; + border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; + border-image-repeat: stretch; /* Puede ser modificado en el ejemplo en vivo */ +} +``` + +```html hidden +
+
+ +``` + +```js hidden +var repetition = document.getElementById("repetition"); +repetition.addEventListener("change", function (evt) { + document.getElementById("borderImageRepetition").style.borderImageRepeat = evt.target.value; +}); +``` + +{{EmbedLiveSample("Example", "330px", "180px")}} + +## Especificaciones + +| Especificación | Estatus | Comentarios | +| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ | +| {{SpecName('CSS3 Backgrounds', '#border-image-repeat', 'border-image-repeat')}} | {{Spec2('CSS3 Backgrounds')}} | Definición inicial | + +## Compatibilidad de navegadores + +{{Compat("css.properties.border-image-repeat")}} + +## Véase también + +- [css-tricks border-image](https://css-tricks.com/almanac/properties/b/border-image/) diff --git a/files/es/web/css/border-image-slice/index.html b/files/es/web/css/border-image-slice/index.html deleted file mode 100644 index 48c0e35af11f0f..00000000000000 --- a/files/es/web/css/border-image-slice/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: border-image-slice -slug: Web/CSS/border-image-slice -tags: - - Bordes CSS - - CSS - - Propiedad CSS - - Referencia -translation_of: Web/CSS/border-image-slice ---- -
{{CSSRef}}
- -

Resumen

- -

La propiedad CSS border-image-slice divide la imagen especificada por {{cssxref("border-image-source")}} en nueve regiones: las cuatro esquinas, los cuatro bordes y el espacio enmedio. Esto se hace especificando cuatro desplazamientos hacia adentro.

- -

The nine slices defined by the CSS border-image shorthand or border-image-slice longhand propertiesCuatro valores controlan la posición de las líneas de corte. Si algunas no son especificada, se infieren de las otras, con la sintaxis común de cuatro valores de CSS.

- -

La región media no es usada por el borde en sí, pero sí se usa como imagen de fondo si se establece la palabra clave fill. Se puede establecer este valor en cualquier posición en la propiedad (antes, después o entre los otros valores).

- -

Las propiedades {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}} y {{cssxref("border-image-outset")}} definen cómo se usarán estas imágenes.

- -

La propiedad abreviada {{cssxref("border-image")}} podría restaurar esta propiedad a su valor predeterminado.

- -

{{cssinfo}}

- -

Sintaxis

- -
/* border-image-slice: slice */
-border-image-slice: 30%;
-
-/* border-image-slice: horizontal vertical */
-border-image-slice: 10% 30%;
-
-/* border-image-slice: top horizontal bottom */
-border-image-slice: 30 30% 45;
-
-/* border-image-slice: top right bottom left */
-border-image-slice: 7 12 14 5;
-
-/* border-image-slice: … fill */
-/* The fill value can be placed between any value */
-border-image-slice: 10% fill 7 12;
-
-/* Global values */
-border-image-slice: inherit;
-border-image-slice: initial;
-border-image-slice: unset;
-
- -

Valores

- -
-
slice
-
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las cuatro líneas de corte. Un valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inváildos, y valores mayores al tamaño relevante, anchura o altura, son restringidos a 100%.
-
horizontal
-
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las dos líneas de corte horizontales, la superior y la inferior. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
-
vertical
-
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las dos líneas de corte verticales, la izquierda y la derecha. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
-
top
-
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte superior. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
-
bottom
-
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte inferior. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
-
right
-
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte derecha. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
-
left
-
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte izquierda. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
-
fill
-
Es una palabra clave cuya presencia forza que la región media de la imagen sea mostrada sobre la imagen de fondo; su tamaño y altura son redimensionados acorde a los fragmentos superior e izquierdo, respectivamente.
-
inherit
-
Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de su elemento padre.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
- -

Compatibilidad de navegadores

- -{{Compat("css.properties.border-image-slice")}} - -

Véase también

- - diff --git a/files/es/web/css/border-image-slice/index.md b/files/es/web/css/border-image-slice/index.md new file mode 100644 index 00000000000000..20bdad5d3a78ab --- /dev/null +++ b/files/es/web/css/border-image-slice/index.md @@ -0,0 +1,89 @@ +--- +title: border-image-slice +slug: Web/CSS/border-image-slice +tags: + - Bordes CSS + - CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-image-slice +--- +{{CSSRef}} + +## Resumen + +La propiedad CSS **`border-image-slice`** divide la imagen especificada por {{cssxref("border-image-source")}} en nueve regiones: las cuatro esquinas, los cuatro bordes y el espacio enmedio. Esto se hace especificando cuatro desplazamientos hacia adentro. + +[![The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties](/files/3814/border-image-slice.png)](/files/3814/border-image-slice.png)Cuatro valores controlan la posición de las líneas de corte. Si algunas no son especificada, se infieren de las otras, con la sintaxis común de cuatro valores de CSS. + +La región media no es usada por el borde en sí, pero sí se usa como imagen de fondo si se establece la palabra clave `fill`. Se puede establecer este valor en cualquier posición en la propiedad (antes, después o entre los otros valores). + +Las propiedades {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}} y {{cssxref("border-image-outset")}} definen cómo se usarán estas imágenes. + +La propiedad abreviada {{cssxref("border-image")}} podría restaurar esta propiedad a su valor predeterminado. + +{{cssinfo}} + +## Sintaxis + +```css +/* border-image-slice: slice */ +border-image-slice: 30%; + +/* border-image-slice: horizontal vertical */ +border-image-slice: 10% 30%; + +/* border-image-slice: top horizontal bottom */ +border-image-slice: 30 30% 45; + +/* border-image-slice: top right bottom left */ +border-image-slice: 7 12 14 5; + +/* border-image-slice: … fill */ +/* The fill value can be placed between any value */ +border-image-slice: 10% fill 7 12; + +/* Global values */ +border-image-slice: inherit; +border-image-slice: initial; +border-image-slice: unset; +``` + +### Valores + +- _slice_ + - : Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las cuatro líneas de corte. Un valor {{cssxref("<number>")}} representa _píxeles_ para imágenes de mapa de bits y _coordenadas_ para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inváildos, y valores mayores al tamaño relevante, anchura o altura, son restringidos a `100%`. +- _horizontal_ + - : Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las dos líneas de corte horizontales, la superior y la inferior. El valor {{cssxref("<number>")}} representa _píxeles_ para imágenes de mapa de bits y _coordenadas_ para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a `100%`. +- _vertical_ + - : Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las dos líneas de corte verticales, la izquierda y la derecha. El valor {{cssxref("<number>")}} representa _píxeles_ para imágenes de mapa de bits y _coordenadas_ para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a `100%`. +- _top_ + - : Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte superior. El valor {{cssxref("<number>")}} representa _píxeles_ para imágenes de mapa de bits y _coordenadas_ para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a `100%`. +- _bottom_ + - : Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte inferior. El valor {{cssxref("<number>")}} representa _píxeles_ para imágenes de mapa de bits y _coordenadas_ para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a `100%`. +- _right_ + - : Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte derecha. El valor {{cssxref("<number>")}} representa _píxeles_ para imágenes de mapa de bits y _coordenadas_ para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a `100%`. +- _left_ + - : Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte izquierda. El valor {{cssxref("<number>")}} representa _píxeles_ para imágenes de mapa de bits y _coordenadas_ para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a `100%`. +- `fill` + - : Es una palabra clave cuya presencia forza que la región media de la imagen sea mostrada sobre la imagen de fondo; su tamaño y altura son redimensionados acorde a los fragmentos superior e izquierdo, respectivamente. +- `inherit` + - : Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de su elemento padre. + +### Sintaxis formal + +{{csssyntax}} + +## Especificaciones + +| Especificación | Estatus | Comentarios | +| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ | +| {{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}} | {{Spec2('CSS3 Backgrounds')}} | Definición inicial | + +## Compatibilidad de navegadores + +{{Compat("css.properties.border-image-slice")}} + +## Véase también + +- [Illustrated description of the 1-to-4-value syntax](/es/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases) diff --git a/files/es/web/css/border-image/index.html b/files/es/web/css/border-image/index.html deleted file mode 100644 index b2309297a7ffed..00000000000000 --- a/files/es/web/css/border-image/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: border-image -slug: Web/CSS/border-image -tags: - - CSS - - CSS Borders - - CSS Property - - Reference -translation_of: Web/CSS/border-image ---- -
{{CSSRef("CSS Borders")}}
- -

Resumen

- -

La propiedad de CSS border-image permite utilizar una imágen para definir los bordes de los elementos. Esto hace que dibujarlos sea más simple y elimina la necesidad de utilizar muchas cajas en algunos casos.

- -

La propiedad border-image es usada en lugar de la sentencia {{cssxref("border-style")}}. Por eso es muy importante tener en cuenta el valor dado por la sentencia {{cssxref("border-image-source")}}, que se puede establecer ya sea por la propiedad border-image-source o la abreviatura border-image, en caso de que su valor sea nulo (none), o si la imágen no se puede visualizar, se utilizarán los estilos de borde.

- -

{{cssinfo}}

- -

Sintaxis

- -
Etiquetado formal: {{csssyntax("border-image")}}
- -

Valores

- -

A continuación vea las respectivas propiedades para los diferentes valores.

- -

Ejemplos

- -

Bitmap repeated (repeat)

- -

La imágen es cortada para rellenar el area del borde, repitiendose si es necesario.

- -
.example {
-  border: 30px solid transparent;
-  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
-  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
-  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
-  border-image:url("/files/4127/border.png") 30 30 repeat;
-}
-
- -

Resultado:
- border image repeat demo

- -

Bitmap repeated (round)

- -

La opción 'round' es una variación de la opción 'repeat', la cual distribuye las partes de tal manera que los extremos se conecten bién.

- -
.example {
-  border: 30px solid transparent;
-  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
-  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
-  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
-  border-image:url("/files/4127/border.png") 30 30 round;
-}
- -

Resultado:
- border image round demo

- -

Bitmap stretched

- -

La opción 'stretch' estira la imágen para rellenar todo el borde del área

- -
.example {
-  border: 30px solid transparent;
-  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
-  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
-  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
-  border-image:url("/files/4127/border.png") 30 30 stretch;
-}
- -

Resultado:
- border image stretch demo

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#border-image', 'border-image')}}{{Spec2('CSS3 Backgrounds')}}
- -

Compatibilidad de navegadores

- -{{Compat("css.properties.border-image")}} diff --git a/files/es/web/css/border-image/index.md b/files/es/web/css/border-image/index.md new file mode 100644 index 00000000000000..a8bf2aba2eb0ad --- /dev/null +++ b/files/es/web/css/border-image/index.md @@ -0,0 +1,92 @@ +--- +title: border-image +slug: Web/CSS/border-image +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image +--- +{{CSSRef("CSS Borders")}} + +## Resumen + +La propiedad de CSS `border-image` permite utilizar una imágen para definir los bordes de los elementos. Esto hace que dibujarlos sea más simple y elimina la necesidad de utilizar muchas cajas en algunos casos. + +La propiedad `border-image` es usada en lugar de la sentencia {{cssxref("border-style")}}. Por eso es muy importante tener en cuenta el valor dado por la sentencia {{cssxref("border-image-source")}}, que se puede establecer ya sea por la propiedad `border-image-source` o la abreviatura `border-image`, en caso de que su valor sea nulo (none), o si la imágen no se puede visualizar, se utilizarán los estilos de borde. + +{{cssinfo}} + +## Sintaxis + +``` +Etiquetado formal: {{csssyntax("border-image")}} +``` + +### Valores + +A continuación vea las respectivas propiedades para los diferentes valores. + +## Ejemplos + +### Bitmap repeated (repeat) + +La imágen es cortada para rellenar el area del borde, repitiendose si es necesario. + +```css +.example { + border: 30px solid transparent; + -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */ + -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */ + -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */ + border-image:url("/files/4127/border.png") 30 30 repeat; +} +``` + +Resultado: +![border image repeat demo](/files/4129/repeat.png) + +### Bitmap repeated (round) + +La opción 'round' es una variación de la opción 'repeat', la cual distribuye las partes de tal manera que los extremos se conecten bién. + +```css +.example { + border: 30px solid transparent; + -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */ + -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */ + -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */ + border-image:url("/files/4127/border.png") 30 30 round; +} +``` + +Resultado: +![border image round demo](/files/4131/round.png) + +### Bitmap stretched + +La opción 'stretch' estira la imágen para rellenar todo el borde del área + +```css +.example { + border: 30px solid transparent; + -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */ + -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */ + -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */ + border-image:url("/files/4127/border.png") 30 30 stretch; +} +``` + +Resultado: +![border image stretch demo](/files/4133/stretch.png) + +## Especificaciones + +| Especificación | Estado | Comentarios | +| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- | +| {{SpecName('CSS3 Backgrounds', '#border-image', 'border-image')}} | {{Spec2('CSS3 Backgrounds')}} | | + +## Compatibilidad de navegadores + +{{Compat("css.properties.border-image")}} diff --git a/files/es/web/css/border-inline-color/index.html b/files/es/web/css/border-inline-color/index.html deleted file mode 100644 index 231cae2c497323..00000000000000 --- a/files/es/web/css/border-inline-color/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: border-inline-color -slug: Web/CSS/border-inline-color -translation_of: Web/CSS/border-inline-color ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propiedad de CSS border-inline-color define el color del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
border-inline-color: yellow;
-border-inline-color: #F5F6F7;
-
- -

El color del borde en otra dimensión puede establecerse con {{cssxref("border-block-color")}} que establece {{cssxref("border-block-start-color")}}, y {{cssxref("border-block-end-color")}}.

- -

{{cssinfo}}

- -

Sintaxis

- -

Valores

- -
-
<'color'>
-
El color del borde. Mira {{cssxref("color")}}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 10px solid blue;
-  border-inline-color: red;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-inline-color")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097
  • -
diff --git a/files/es/web/css/border-inline-color/index.md b/files/es/web/css/border-inline-color/index.md new file mode 100644 index 00000000000000..02dc5bdfd231e8 --- /dev/null +++ b/files/es/web/css/border-inline-color/index.md @@ -0,0 +1,71 @@ +--- +title: border-inline-color +slug: Web/CSS/border-inline-color +translation_of: Web/CSS/border-inline-color +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-color`** define el color del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +```css +border-inline-color: yellow; +border-inline-color: #F5F6F7; +``` + +El color del borde en otra dimensión puede establecerse con {{cssxref("border-block-color")}} que establece {{cssxref("border-block-start-color")}}, y {{cssxref("border-block-end-color")}}. + +{{cssinfo}} + +## Sintaxis + +### Valores + +- `<'color'>` + - : El color del borde. Mira {{cssxref("color")}}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 10px solid blue; + border-inline-color: red; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-inline-color")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}. +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097 diff --git a/files/es/web/css/border-inline-end-color/index.html b/files/es/web/css/border-inline-end-color/index.html deleted file mode 100644 index daf18d59ddf4de..00000000000000 --- a/files/es/web/css/border-inline-end-color/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: border-inline-end-color -slug: Web/CSS/border-inline-end-color -translation_of: Web/CSS/border-inline-end-color ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propiedad de CSS border-inline-end-color CSS property defines the color of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}
- - - -

Sintaxis

- -
border-inline-end-color: rebeccapurple;
-border-inline-end-color: #663399;
-
- -

Propiedades relacionadas son {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, y {{cssxref("border-inline-start-color")}}, que definen los otros colores del borde del elemento.

- -

{{cssinfo}}

- -

Valores

- -
-
<'color'>
-
El color del borde. Mira {{cssxref("color")}}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 10px solid blue;
-  border-inline-end-color: red;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-inline-end-color")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-inline-end-color/index.md b/files/es/web/css/border-inline-end-color/index.md new file mode 100644 index 00000000000000..de07aed0854c50 --- /dev/null +++ b/files/es/web/css/border-inline-end-color/index.md @@ -0,0 +1,73 @@ +--- +title: border-inline-end-color +slug: Web/CSS/border-inline-end-color +translation_of: Web/CSS/border-inline-end-color +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-end-color`** [CSS](/es/docs/Web/CSS) property defines the color of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}} + +## Sintaxis + +```css +border-inline-end-color: rebeccapurple; +border-inline-end-color: #663399; +``` + +Propiedades relacionadas son {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, y {{cssxref("border-inline-start-color")}}, que definen los otros colores del borde del elemento. + +{{cssinfo}} + +### Valores + +- `<'color'>` + - : El color del borde. Mira {{cssxref("color")}}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 10px solid blue; + border-inline-end-color: red; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-inline-end-color")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}. +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-inline-end-style/index.html b/files/es/web/css/border-inline-end-style/index.html deleted file mode 100644 index 1b4afaae4fdfe8..00000000000000 --- a/files/es/web/css/border-inline-end-style/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: border-inline-end-style -slug: Web/CSS/border-inline-end-style -translation_of: Web/CSS/border-inline-end-style ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propiedad de CSS border-inline-end-style CSS property defines the style of the logical inline end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}
- - - -

Sintaxis

- -
/* <'border-style'> values */
-border-inline-end-style: dashed;
-border-inline-end-style: dotted;
-border-inline-end-style: groove;
-
- -

Propiedades relacionadas son {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, and {{cssxref("border-inline-start-style")}}, que definen los otros estilos del borde del elemento.

- -

{{cssinfo}}

- -

Valores

- -
-
<'border-style'>
-
La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 5px solid blue;
-  border-inline-end-style: dashed;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-inline-end-style")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-inline-end-style")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-inline-end-style/index.md b/files/es/web/css/border-inline-end-style/index.md new file mode 100644 index 00000000000000..1908e29153fbdf --- /dev/null +++ b/files/es/web/css/border-inline-end-style/index.md @@ -0,0 +1,75 @@ +--- +title: border-inline-end-style +slug: Web/CSS/border-inline-end-style +translation_of: Web/CSS/border-inline-end-style +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-end-style`** [CSS](/es/docs/Web/CSS) property defines the style of the logical inline end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}} + +## Sintaxis + +```css +/* <'border-style'> values */ +border-inline-end-style: dashed; +border-inline-end-style: dotted; +border-inline-end-style: groove; +``` + +Propiedades relacionadas son {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, and {{cssxref("border-inline-start-style")}}, que definen los otros estilos del borde del elemento. + +{{cssinfo}} + +### Valores + +- `<'border-style'>` + - : La línea de estilo del borde. Mira {{ cssxref("border-style") }}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 5px solid blue; + border-inline-end-style: dashed; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-inline-end-style")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-inline-end-style")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}. +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-inline-end-width/index.html b/files/es/web/css/border-inline-end-width/index.html deleted file mode 100644 index 6f0ca0e79dc650..00000000000000 --- a/files/es/web/css/border-inline-end-width/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: border-inline-end-width -slug: Web/CSS/border-inline-end-width -translation_of: Web/CSS/border-inline-end-width ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propiedad de CSS border-inline-end-width CSS property defines the width of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}
- - - -

Sintaxis

- -
/* <'border-width'> values */
-border-inline-end-width: 2px;
-border-inline-end-width: thick;
-
- -

Propiedades relacionadas son {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-start-width")}}, que definen los otros anchos del borde del elemento.

- -

{{cssinfo}}

- -

Valores

- -
-
<'border-width'>
-
El ancho del borde. Mira {{ cssxref("border-width") }}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 1px solid blue;
-  border-inline-end-width: 5px;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-inline-end-width")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-inline-end-width/index.md b/files/es/web/css/border-inline-end-width/index.md new file mode 100644 index 00000000000000..feceb56ee65155 --- /dev/null +++ b/files/es/web/css/border-inline-end-width/index.md @@ -0,0 +1,74 @@ +--- +title: border-inline-end-width +slug: Web/CSS/border-inline-end-width +translation_of: Web/CSS/border-inline-end-width +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-end-width`** [CSS](/es/docs/Web/CSS) property defines the width of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}} + +## Sintaxis + +```css +/* <'border-width'> values */ +border-inline-end-width: 2px; +border-inline-end-width: thick; +``` + +Propiedades relacionadas son {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-start-width")}}, que definen los otros anchos del borde del elemento. + +{{cssinfo}} + +### Valores + +- `<'border-width'>` + - : El ancho del borde. Mira {{ cssxref("border-width") }}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 1px solid blue; + border-inline-end-width: 5px; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-inline-end-width")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-inline-end/index.html b/files/es/web/css/border-inline-end/index.html deleted file mode 100644 index 028860cda7d0b4..00000000000000 --- a/files/es/web/css/border-inline-end/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: border-inline-end -slug: Web/CSS/border-inline-end -translation_of: Web/CSS/border-inline-end ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

La propiedad de CSS border-inline-end es una propiedad abreviada para establecer los valores lógicos individuales del borde en línea final en un solo lugar en la hoja de estilos.

- -
{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}
- - - -

Sintaxis

- -
border-inline-end: 1px;
-border-inline-end: 2px dashed;
-border-inline-end: medium dashed blue;
-
- -

border-inline-end puede ser usado para establecer los valores de uno o más de {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}}, y {{cssxref("border-inline-end-color")}}. El borde físico al que se mapea depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -

Propiedades relacionadas son {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, and {{cssxref("border-inline-start")}}, que definen los otros bordes del elemento.

- -

{{cssinfo}}

- -

Valores

- -

El border-inline-end es especificado con uno o más de los siguientes valores, en cualquier orden:

- -
-
<'border-width'>
-
El ancho del borde. Mira {{cssxref("border-width")}}.
-
<'border-style'>
-
La línea de estilo del borde. Mira {{cssxref("border-style")}}.
-
<'color'>
-
El color del borde. Mira {{cssxref("color")}}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-rl;
-  border-inline-end: 5px dashed blue;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-inline-end")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-inline-end/index.md b/files/es/web/css/border-inline-end/index.md new file mode 100644 index 00000000000000..9e0b4b489e726c --- /dev/null +++ b/files/es/web/css/border-inline-end/index.md @@ -0,0 +1,81 @@ +--- +title: border-inline-end +slug: Web/CSS/border-inline-end +translation_of: Web/CSS/border-inline-end +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-end`** es una [propiedad abreviada](/es/docs/Web/CSS/Shorthand_properties) para establecer los valores lógicos individuales del borde en línea final en un solo lugar en la hoja de estilos. + +{{EmbedInteractiveExample("pages/css/border-inline-end.html")}} + +## Sintaxis + +```css +border-inline-end: 1px; +border-inline-end: 2px dashed; +border-inline-end: medium dashed blue; +``` + +`border-inline-end` puede ser usado para establecer los valores de uno o más de {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}}, y {{cssxref("border-inline-end-color")}}. El borde físico al que se mapea depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +Propiedades relacionadas son {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, and {{cssxref("border-inline-start")}}, que definen los otros bordes del elemento. + +{{cssinfo}} + +### Valores + +El `border-inline-end` es especificado con uno o más de los siguientes valores, en cualquier orden: + +- `<'border-width'>` + - : El ancho del borde. Mira {{cssxref("border-width")}}. +- `<'border-style'>` + - : La línea de estilo del borde. Mira {{cssxref("border-style")}}. +- `<'color'>` + - : El color del borde. Mira {{cssxref("color")}}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + border-inline-end: 5px dashed blue; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-inline-end")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}. +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-inline-start-color/index.html b/files/es/web/css/border-inline-start-color/index.html deleted file mode 100644 index 40fc1d68d2dfe1..00000000000000 --- a/files/es/web/css/border-inline-start-color/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: border-inline-start-color -slug: Web/CSS/border-inline-start-color -translation_of: Web/CSS/border-inline-start-color ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propiedad de CSS border-inline-start-color define el color del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}
- - - -

Sintaxis

- -
border-inline-start-color: red;
-border-inline-start-color: #ee4141;
-
- -

Propiedades relacionadas son {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, y {{cssxref("border-inline-end-color")}}, que define los otros colores del borde del elemento.

- -

{{cssinfo}}

- -

Valores

- -
-
<'color'>
-
El color del borde. Mira {{cssxref("color")}}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 10px solid blue;
-  border-inline-start-color: red;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-inline-start-color")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, y {{cssxref("border-left-color")}}
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-inline-start-color/index.md b/files/es/web/css/border-inline-start-color/index.md new file mode 100644 index 00000000000000..d73c7eaaedebdd --- /dev/null +++ b/files/es/web/css/border-inline-start-color/index.md @@ -0,0 +1,73 @@ +--- +title: border-inline-start-color +slug: Web/CSS/border-inline-start-color +translation_of: Web/CSS/border-inline-start-color +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-start-color`** define el color del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}} + +## Sintaxis + +```css +border-inline-start-color: red; +border-inline-start-color: #ee4141; +``` + +Propiedades relacionadas son {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, y {{cssxref("border-inline-end-color")}}, que define los otros colores del borde del elemento. + +{{cssinfo}} + +### Valores + +- `<'color'>` + - : El color del borde. Mira {{cssxref("color")}}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 10px solid blue; + border-inline-start-color: red; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-inline-start-color")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, y {{cssxref("border-left-color")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-inline-start-style/index.html b/files/es/web/css/border-inline-start-style/index.html deleted file mode 100644 index 138a28e16d09f1..00000000000000 --- a/files/es/web/css/border-inline-start-style/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: border-inline-start-style -slug: Web/CSS/border-inline-start-style -translation_of: Web/CSS/border-inline-start-style ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propiedad de CSS border-inline-start-style define el estilo del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}
- - - -

Sintaxis

- -
/* <'border-style'> values */
-border-inline-start-style: dashed;
-border-inline-start-style: dotted;
-border-inline-start-style: groove;
-
- -

Propiedades relacionadas son {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, y {{cssxref("border-inline-end-style")}}, que definen los otros estilos del borde del elemento.

- -

{{cssinfo}}

- -

Valores

- -
-
<'border-style'>
-
La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 5px solid blue;
-  border-inline-start-style: dashed;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-inline-start-style")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-inline-start-style/index.md b/files/es/web/css/border-inline-start-style/index.md new file mode 100644 index 00000000000000..613aec90a50811 --- /dev/null +++ b/files/es/web/css/border-inline-start-style/index.md @@ -0,0 +1,75 @@ +--- +title: border-inline-start-style +slug: Web/CSS/border-inline-start-style +translation_of: Web/CSS/border-inline-start-style +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-start-style`** define el estilo del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}} + +## Sintaxis + +```css +/* <'border-style'> values */ +border-inline-start-style: dashed; +border-inline-start-style: dotted; +border-inline-start-style: groove; +``` + +Propiedades relacionadas son {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, y {{cssxref("border-inline-end-style")}}, que definen los otros estilos del borde del elemento. + +{{cssinfo}} + +### Valores + +- `<'border-style'>` + - : La línea de estilo del borde. Mira {{ cssxref("border-style") }}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 5px solid blue; + border-inline-start-style: dashed; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-inline-start-style")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}. +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-inline-start-width/index.html b/files/es/web/css/border-inline-start-width/index.html deleted file mode 100644 index 1cc63c10dc604a..00000000000000 --- a/files/es/web/css/border-inline-start-width/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: border-inline-start-width -slug: Web/CSS/border-inline-start-width -translation_of: Web/CSS/border-inline-start-width ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propiedad de CSS border-inline-start-width define el ancho del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}
- - - -

Sintaxis

- -
/* <'border-width'> values */
-border-inline-start-width: 5px;
-border-inline-start-width: thick;
-
- -

Propiedades relacionadas son {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-end-width")}}, que definen los otros anchos del borde del elemento.

- -

{{cssinfo}}

- -

Valores

- -
-
<'border-width'>
-
El ancho del borde. Mira {{ cssxref("border-width") }}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 1px solid blue;
-  border-inline-start-width: 5px;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-inline-start-width")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-inline-start-width/index.md b/files/es/web/css/border-inline-start-width/index.md new file mode 100644 index 00000000000000..fa73624d72da72 --- /dev/null +++ b/files/es/web/css/border-inline-start-width/index.md @@ -0,0 +1,74 @@ +--- +title: border-inline-start-width +slug: Web/CSS/border-inline-start-width +translation_of: Web/CSS/border-inline-start-width +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-start-width`** define el ancho del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}} + +## Sintaxis + +```css +/* <'border-width'> values */ +border-inline-start-width: 5px; +border-inline-start-width: thick; +``` + +Propiedades relacionadas son {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-end-width")}}, que definen los otros anchos del borde del elemento. + +{{cssinfo}} + +### Valores + +- `<'border-width'>` + - : El ancho del borde. Mira {{ cssxref("border-width") }}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 1px solid blue; + border-inline-start-width: 5px; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-inline-start-width")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-inline-start/index.html b/files/es/web/css/border-inline-start/index.html deleted file mode 100644 index d8dace0954b987..00000000000000 --- a/files/es/web/css/border-inline-start/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: border-inline-start -slug: Web/CSS/border-inline-start -translation_of: Web/CSS/border-inline-start ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

La propiedad de CSS border-inline-start es una propiedad abreviada para establecer los valores de la propiedad inicial del borde individual en línea en un solo lugar en la hoja de estilos.

- -
{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}
- - - -

Sintaxis

- -
border-inline-start: 1px;
-border-inline-start: 2px dotted;
-border-inline-start: medium dashed green;
-
- -

border-inline-start es especificado con uno o más de {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}}, and {{cssxref("border-inline-start-color")}}. El borde físico al que se mapea depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -

Propiedades relacionadas son {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, and {{cssxref("border-inline-end")}}, que definen los otros bordes del elemento.

- -

{{cssinfo}}

- -

Valores

- -

El border-inline-start es especificado con uno o más de los sigueintes valores, en cualquier orden:

- -
-
<'border-width'>
-
El ancho del borde. Mira {{cssxref("border-width")}}.
-
<'border-style'>
-
La línea de estilo del borde. Mira {{cssxref("border-style")}}.
-
<'color'>
-
El color del borde. Mira {{cssxref("color")}}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-rl;
-  border-inline-start: 5px dashed blue;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-inline-start")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-inline-start/index.md b/files/es/web/css/border-inline-start/index.md new file mode 100644 index 00000000000000..f8646dbf1c0c47 --- /dev/null +++ b/files/es/web/css/border-inline-start/index.md @@ -0,0 +1,81 @@ +--- +title: border-inline-start +slug: Web/CSS/border-inline-start +translation_of: Web/CSS/border-inline-start +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-start`** es una [propiedad abreviada](/es/docs/Web/CSS/Shorthand_properties) para establecer los valores de la propiedad inicial del borde individual en línea en un solo lugar en la hoja de estilos. + +{{EmbedInteractiveExample("pages/css/border-inline-start.html")}} + +## Sintaxis + +```css +border-inline-start: 1px; +border-inline-start: 2px dotted; +border-inline-start: medium dashed green; +``` + +`border-inline-start` es especificado con uno o más de {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}}, and {{cssxref("border-inline-start-color")}}. El borde físico al que se mapea depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +Propiedades relacionadas son {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, and {{cssxref("border-inline-end")}}, que definen los otros bordes del elemento. + +{{cssinfo}} + +### Valores + +El `border-inline-start` es especificado con uno o más de los sigueintes valores, en cualquier orden: + +- `<'border-width'>` + - : El ancho del borde. Mira {{cssxref("border-width")}}. +- `<'border-style'>` + - : La línea de estilo del borde. Mira {{cssxref("border-style")}}. +- `<'color'>` + - : El color del borde. Mira {{cssxref("color")}}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + border-inline-start: 5px dashed blue; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-inline-start")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}. +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-inline-style/index.html b/files/es/web/css/border-inline-style/index.html deleted file mode 100644 index 4d69915d65759e..00000000000000 --- a/files/es/web/css/border-inline-style/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: border-inline-style -slug: Web/CSS/border-inline-style -translation_of: Web/CSS/border-inline-style ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propiedad de CSS border-inline-style define el estilo de los bordes lógicos en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
/* <'border-style'> values */
-border-inline-style: dashed;
-border-inline-style: dotted;
-border-inline-style: groove;
-
- -

El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-block-style")}}, que establece {{cssxref("border-block-start-style")}}, y {{cssxref("border-block-end-style")}}.

- -

{{cssinfo}}

- -

Sintaxis

- -

Valores

- -
-
<'border-style'>
-
La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 5px solid blue;
-  border-inline-style: dashed;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-inline-style")}}

- -

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-inline-style/index.md b/files/es/web/css/border-inline-style/index.md new file mode 100644 index 00000000000000..5bdc79c60195d1 --- /dev/null +++ b/files/es/web/css/border-inline-style/index.md @@ -0,0 +1,73 @@ +--- +title: border-inline-style +slug: Web/CSS/border-inline-style +translation_of: Web/CSS/border-inline-style +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-style`** define el estilo de los bordes lógicos en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +```css +/* <'border-style'> values */ +border-inline-style: dashed; +border-inline-style: dotted; +border-inline-style: groove; +``` + +El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-block-style")}}, que establece {{cssxref("border-block-start-style")}}, y {{cssxref("border-block-end-style")}}. + +{{cssinfo}} + +## Sintaxis + +### Valores + +- `<'border-style'>` + - : La línea de estilo del borde. Mira {{ cssxref("border-style") }}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 5px solid blue; + border-inline-style: dashed; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-inline-style")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}. +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-inline-width/index.html b/files/es/web/css/border-inline-width/index.html deleted file mode 100644 index 72d7553ad49e35..00000000000000 --- a/files/es/web/css/border-inline-width/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: border-inline-width -slug: Web/CSS/border-inline-width -translation_of: Web/CSS/border-inline-width ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propiedad de CSS border-inline-width define al ancho del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
/* <'border-width'> values */
-border-inline-width: 5px 10px;
-border-inline-width: 5px;
-border-inline-width: thick;
-
- -

El ancho del borde en otra dimensión puede establecerse con {{cssxref("border-block-width")}}, que establece {{cssxref("border-block-start-width")}}, y {{cssxref("border-block-end-width")}}.

- -

{{cssinfo}}

- -

Sintaxis

- -

Valores

- -
-
<'border-width'>
-
El ancho del borde. Mira {{ cssxref("border-width") }}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  border: 1px solid blue;
-  border-inline-width: 5px 10px;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-block-width")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-inline-width/index.md b/files/es/web/css/border-inline-width/index.md new file mode 100644 index 00000000000000..7cc5250222a573 --- /dev/null +++ b/files/es/web/css/border-inline-width/index.md @@ -0,0 +1,73 @@ +--- +title: border-inline-width +slug: Web/CSS/border-inline-width +translation_of: Web/CSS/border-inline-width +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-width`** define al ancho del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +```css +/* <'border-width'> values */ +border-inline-width: 5px 10px; +border-inline-width: 5px; +border-inline-width: thick; +``` + +El ancho del borde en otra dimensión puede establecerse con {{cssxref("border-block-width")}}, que establece {{cssxref("border-block-start-width")}}, y {{cssxref("border-block-end-width")}}. + +{{cssinfo}} + +## Sintaxis + +### Valores + +- `<'border-width'>` + - : El ancho del borde. Mira {{ cssxref("border-width") }}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 1px solid blue; + border-inline-width: 5px 10px; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-block-width")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-inline/index.html b/files/es/web/css/border-inline/index.html deleted file mode 100644 index bc8e9fd85c867f..00000000000000 --- a/files/es/web/css/border-inline/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: border-inline -slug: Web/CSS/border-inline -translation_of: Web/CSS/border-inline ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

La propiedad de CSS border-inline es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos.

- -
border-inline: 1px;
-border-inline: 2px dotted;
-border-inline: medium dashed blue;
-
- -

border-inline puede ser usada para establecer los valores de uno o más de {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}}, y {{cssxref("border-inline-color")}} estableciendo tanto el inicio como el final en la dimensión en línea a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponden a las propiedades {{cssxref("border-top")}} y {{cssxref("border-bottom")}} o {{cssxref("border-right")}}, and {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -

El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-block")}}, que establece {{cssxref("border-block-start")}}, y {{cssxref("border-block-end")}}.

- -

{{cssinfo}}

- -

Sintaxis

- -

Valores

- -

El border-inline es especificado con uno o más de los siguientes valores, en cualquier orden:

- -
-
<'border-width'>
-
El ancho del borde. Mira {{cssxref("border-width")}}.
-
<'border-style'>
-
La línea de estilo del borde. Mira {{cssxref("border-style")}}.
-
<'color'>
-
El color del borde. Mira {{cssxref("color")}}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example text</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-rl;
-  border-inline: 5px dashed blue;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline", "border-inline")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-inline")}}

- -

Mira también

- -
    -
  • Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
  • -
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-inline/index.md b/files/es/web/css/border-inline/index.md new file mode 100644 index 00000000000000..b5b9de4416ba9a --- /dev/null +++ b/files/es/web/css/border-inline/index.md @@ -0,0 +1,79 @@ +--- +title: border-inline +slug: Web/CSS/border-inline +translation_of: Web/CSS/border-inline +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline`** es una [propiedad abreviada](/es/docs/Web/CSS/Shorthand_properties) para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos. + +```css +border-inline: 1px; +border-inline: 2px dotted; +border-inline: medium dashed blue; +``` + +`border-inline` puede ser usada para establecer los valores de uno o más de {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}}, y {{cssxref("border-inline-color")}} estableciendo tanto el inicio como el final en la dimensión en línea a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponden a las propiedades {{cssxref("border-top")}} y {{cssxref("border-bottom")}} o {{cssxref("border-right")}}, and {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-block")}}, que establece {{cssxref("border-block-start")}}, y {{cssxref("border-block-end")}}. + +{{cssinfo}} + +## Sintaxis + +### Valores + +El `border-inline` es especificado con uno o más de los siguientes valores, en cualquier orden: + +- `<'border-width'>` + - : El ancho del borde. Mira {{cssxref("border-width")}}. +- `<'border-style'>` + - : La línea de estilo del borde. Mira {{cssxref("border-style")}}. +- `<'color'>` + - : El color del borde. Mira {{cssxref("color")}}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example text

+
+``` + +### Contenido CSS + +```css +div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + border-inline: 5px dashed blue; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-inline", "border-inline")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-inline")}} + +## Mira también + +- Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}. +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/es/web/css/border-left-color/index.html b/files/es/web/css/border-left-color/index.html deleted file mode 100644 index f249c957eda417..00000000000000 --- a/files/es/web/css/border-left-color/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: border-left-color -slug: Web/CSS/border-left-color -translation_of: Web/CSS/border-left-color ---- -

Resumen

- -

border-left-color pone el color del borde izquierdo de un elemento,con el valor de el color en hexadecimal o con palabras clave, como azul, verde, rojo transparente .

- -
    -
  • {{ Xref_cssinitial() }}: {{ Cssxref("color") }} propiedad
  • -
  • Se aplica a : todos los elementos
  • -
  • {{ Xref_cssinherited() }}: no
  • -
  • Porcentajes: N/A
  • -
  • Media: {{ Xref_cssvisual() }}
  • -
  • {{ Xref_csscomputed() }}: cuando son tomados de la propiedad 'color',los valores computarizados de 'color'; de otra manera como sean especificados.
  • -
- -

Sintaxis

- -
border-left-color:color | transparent | inherit
-
- -

Valores

- -
-
color
-
El color puede ser especificado en un valor RGB en hexadecimal, o usando uno de los colores predeterminados
-
transparent
-
El elemento no tiene color de si mismo, en vez este enseña el color detras de este elemento.
-
- -

Propiedades parecidas

- -
    -
  • {{ Cssxref("border-color") }}
  • -
  • {{ Cssxref("border-bottom-color") }}
  • -
  • {{ Cssxref("border-right-color") }}
  • -
  • {{ Cssxref("border-top-color") }}
  • -
- -

Examples

- -

Ver El Ejemplo Vivo

- -
element {
-	width: 300px;
-        padding: 15px;
-        border-bottom-size: 1px;
-        border-bottom-style: solid;
-        border-bottom-color: #000;
-}
-
-
- -

- -
p {
-border-style: solid;
-border-left-color: #ff0000
-}
-
-p {
-border-style: solid;
-border-left-color: rgb(255,0,0)
-}
-
- -

Notas

- - diff --git a/files/es/web/css/border-left-color/index.md b/files/es/web/css/border-left-color/index.md new file mode 100644 index 00000000000000..75c09e194dada8 --- /dev/null +++ b/files/es/web/css/border-left-color/index.md @@ -0,0 +1,65 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +translation_of: Web/CSS/border-left-color +--- +### Resumen + +`border-left-color` pone el color del borde izquierdo de un elemento,con el valor de el color en hexadecimal o con palabras clave, como azul, verde, rojo `transparente`. + +- {{ Xref_cssinitial() }}: {{ Cssxref("color") }} propiedad +- Se aplica a : todos los elementos +- {{ Xref_cssinherited() }}: no +- Porcentajes: N/A +- Media: {{ Xref_cssvisual() }} +- {{ Xref_csscomputed() }}: cuando son tomados de la propiedad 'color',los valores computarizados de 'color'; de otra manera como sean especificados. + +### Sintaxis + +``` +border-left-color:color | transparent | inherit +``` + +### Valores + +- color + - : El color puede ser especificado en un valor RGB en hexadecimal, o usando uno de los colores predeterminados +- transparent + - : El elemento no tiene color de si mismo, en vez este enseña el color detras de este elemento. + +### Propiedades parecidas + +- {{ Cssxref("border-color") }} +- {{ Cssxref("border-bottom-color") }} +- {{ Cssxref("border-right-color") }} +- {{ Cssxref("border-top-color") }} + +### Examples + +[Ver El Ejemplo Vivo](/samples/cssref/border.html) + +``` +element { + width: 300px; + padding: 15px; + border-bottom-size: 1px; + border-bottom-style: solid; + border-bottom-color: #000; +} +``` + +``` +p { +border-style: solid; +border-left-color: #ff0000 +} + +p { +border-style: solid; +border-left-color: rgb(255,0,0) +} +``` + +### Notas + +- [Color Chart by VisiBone](http://html-color-codes.com/) diff --git a/files/es/web/css/border-left/index.html b/files/es/web/css/border-left/index.html deleted file mode 100644 index f05b94be1d8ce9..00000000000000 --- a/files/es/web/css/border-left/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: border-left -slug: Web/CSS/border-left -translation_of: Web/CSS/border-left ---- -

{{CSSRef}}

- -

Resumen

- -

El borde_izquierdo es una propiedad rápida para poner el ancho, estilo y color del borde izquierdo de un elemento. Esta propiedad puede ser usada para poner los valores de uno o mas de : {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-color") }}. Valores omitidos son puestos a su valor inicial.

- -

{{cssinfo}}

- -

Sintaxis

- -
border-left: [border-width || border-style || border-color | inherit] ;
-
- -

Valores

- -
-
border-width
-
See {{ Cssxref("border-width") }}.
-
border-style
-
See {{ Cssxref("border-style") }}.
-
border-color
-
See {{ Cssxref("border-color") }}.
-
- -

Ejemplos

- -

element {

- -
    border-left: 1px solid #000;
-
- -

}

- -

Notas

- -

Si las reglas no especifican un color de borde, el borde tendrá la propiedad {{ Cssxref("color") }}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }}{{ Spec2('CSS3 Backgrounds') }}No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it.
{{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }}{{ Spec2('CSS2.1') }}No significant changes
{{ SpecName('CSS1', '#border-left', 'border-left') }}{{ Spec2('CSS1') }}Initial definition
- -

Browser compatibility

- -{{Compat("css.properties.border-left")}} diff --git a/files/es/web/css/border-left/index.md b/files/es/web/css/border-left/index.md new file mode 100644 index 00000000000000..02a1e3dfe1229c --- /dev/null +++ b/files/es/web/css/border-left/index.md @@ -0,0 +1,51 @@ +--- +title: border-left +slug: Web/CSS/border-left +translation_of: Web/CSS/border-left +--- +{{CSSRef}} + +## Resumen + +El `borde_izquierdo` es una propiedad rápida para poner el ancho, estilo y color del borde izquierdo de un elemento. Esta propiedad puede ser usada para poner los valores de uno o mas de : {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-color") }}. Valores omitidos son puestos a su valor inicial. + +{{cssinfo}} + +## Sintaxis + +``` +border-left: [border-width || border-style || border-color | inherit] ; +``` + +### Valores + +- border-width + - : See {{ Cssxref("border-width") }}. +- border-style + - : See {{ Cssxref("border-style") }}. +- border-color + - : See {{ Cssxref("border-color") }}. + +## Ejemplos + +```css +element { + border-left: 1px solid #000; +} +``` + +## Notas + +Si las reglas no especifican un color de borde, el borde tendrá la propiedad {{ Cssxref("color") }} + +## Specifications + +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | +| {{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }} | {{ Spec2('CSS3 Backgrounds') }} | No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it. | +| {{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }} | {{ Spec2('CSS2.1') }} | No significant changes | +| {{ SpecName('CSS1', '#border-left', 'border-left') }} | {{ Spec2('CSS1') }} | Initial definition | + +## Browser compatibility + +{{Compat("css.properties.border-left")}} diff --git a/files/es/web/css/border-right/index.html b/files/es/web/css/border-right/index.html deleted file mode 100644 index ea9e06da1f12bd..00000000000000 --- a/files/es/web/css/border-right/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: border-right -slug: Web/CSS/border-right -tags: - - Bordes CSS - - Propiedad CSS - - Referencia -translation_of: Web/CSS/border-right ---- -
{{CSSRef}}
- -

La propiedad CSS border-right es un a propiedad rápida para dar valores al {{cssxref("border-right-width")}}, {{cssxref("border-right-style")}} y {{cssxref("border-right-color")}}. Estas propiedades establecen un borde derecho del elemento.

- -
{{EmbedInteractiveExample("pages/css/border-right.html")}}
- - - -

Como con todas las propiedades rápidas, border-right siempre establece los valores de todas las propiedades que puede establecer, incluso si no están especificadas. Establece los no especificados a sus valores por defecto. Lo que significa que ...

- -
border-right-style: dotted;
-border-right: thick green;
-
- -

... es en realidad lo mismo que ...

- -
border-right-style: dotted;
-border-right: none thick green;
-
- -

... y el valor de {{cssxref("border-right-style")}} dado previamente a border-right es ignorado. Puesto que el valor por defecto de {{cssxref("border-right-style")}} es none, si no se especifica la parte border-style el resultado es no establecer un borde.

- -

Sintaxis

- -
border-right: 1px;
-border-right: 2px dotted;
-border-right: medium dashed green;
-
- -

Los tres valores de la propiedad rápida pueden ser especificados en cualquier orden, incluso omitiendo uno o dos de ellos.

- -

Valores

- -
-
<br-width>
-
Ver {{cssxref("border-right-width")}}.
-
<br-style>
-
Ver {{cssxref("border-right-style")}}.
-
{{cssxref("<color>")}}
-
Ver {{cssxref("border-right-color")}}.
-
- -

Formal syntax

- -{{csssyntax}} - -

Ejemplo

- -
<div>
-  Esta caja tiene un borde en el lado derecho.
-</div>
- -
div {
-  border-right: 4px dashed blue;
-  background-color: gold;
-  height: 100px;
-  width: 100px;
-  font-weight: bold;
-  text-align: center;
-}
-
- -

{{EmbedLiveSample('Example')}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Backgrounds', '#border-right', 'border-right')}}{{Spec2('CSS3 Backgrounds')}}No direct changes, though the modification of values for the {{cssxref("border-right-color")}} do apply to it.
{{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}{{Spec2('CSS2.1')}}No significant changes.
{{SpecName('CSS1', '#border-right', 'border-right')}}{{Spec2('CSS1')}}Initial definition
- -
{{cssinfo}}
- -

Compatibilitidad del navegador

- -

{{Compat("css.properties.border-right")}}

diff --git a/files/es/web/css/border-right/index.md b/files/es/web/css/border-right/index.md new file mode 100644 index 00000000000000..0dee68188e2e5b --- /dev/null +++ b/files/es/web/css/border-right/index.md @@ -0,0 +1,88 @@ +--- +title: border-right +slug: Web/CSS/border-right +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-right +--- +{{CSSRef}} + +La propiedad [CSS](/es/docs/Web/CSS) **`border-right`** es un a propiedad rápida para dar valores al {{cssxref("border-right-width")}}, {{cssxref("border-right-style")}} y {{cssxref("border-right-color")}}. Estas propiedades establecen un [borde](/es/docs/Web/CSS/border)derecho del elemento. + +{{EmbedInteractiveExample("pages/css/border-right.html")}} + +Como con todas las propiedades rápidas, `border-right` siempre establece los valores de todas las propiedades que puede establecer, incluso si no están especificadas. Establece los no especificados a sus valores por defecto. Lo que significa que ... + +```css +border-right-style: dotted; +border-right: thick green; +``` + +... es en realidad lo mismo que ... + +```css +border-right-style: dotted; +border-right: none thick green; +``` + +... y el valor de {{cssxref("border-right-style")}} dado previamente a `border-right` es ignorado. Puesto que el valor por defecto de {{cssxref("border-right-style")}} es `none`, si no se especifica la parte `border-style` el resultado es no establecer un borde. + +## Sintaxis + +```css +border-right: 1px; +border-right: 2px dotted; +border-right: medium dashed green; +``` + +Los tres valores de la propiedad rápida pueden ser especificados en cualquier orden, incluso omitiendo uno o dos de ellos. + +### Valores + +- `` + - : Ver {{cssxref("border-right-width")}}. +- `` + - : Ver {{cssxref("border-right-style")}}. +- {{cssxref("<color>")}} + - : Ver {{cssxref("border-right-color")}}. + +### Formal syntax + +{{csssyntax}} + +## Ejemplo + +```html +
+ Esta caja tiene un borde en el lado derecho. +
+``` + +```css +div { + border-right: 4px dashed blue; + background-color: gold; + height: 100px; + width: 100px; + font-weight: bold; + text-align: center; +} +``` + +{{EmbedLiveSample('Example')}} + +## Especificaciones + +| Especificación | Estado | Comentario | +| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS3 Backgrounds', '#border-right', 'border-right')}} | {{Spec2('CSS3 Backgrounds')}} | No direct changes, though the modification of values for the {{cssxref("border-right-color")}} do apply to it. | +| {{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}} | {{Spec2('CSS2.1')}} | No significant changes. | +| {{SpecName('CSS1', '#border-right', 'border-right')}} | {{Spec2('CSS1')}} | Initial definition | + +{{cssinfo}} + +## Compatibilitidad del navegador + +{{Compat("css.properties.border-right")}} diff --git a/files/es/web/css/border-spacing/index.html b/files/es/web/css/border-spacing/index.html deleted file mode 100644 index 019da046319561..00000000000000 --- a/files/es/web/css/border-spacing/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: border-spacing -slug: Web/CSS/border-spacing -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/border-spacing ---- -

<< Volver

- -

Resumen

- -

La propiedad de {{ Cssxref("border-spacing", "espaciado de borde") }} especifica la distancia entre los bordes de celdas adyacentes (sólo para el modelo de separación de borde). Es el equivalente al atributo cellspacing en HTML.

- -
    -
  • {{ Cssxref("initial", "Valor inicial") }}: 0
  • -
  • Se aplica a: tablas y elementos con la propiedad inline-table
  • -
  • {{ Cssxref("inheritance", "Valor heredado") }}: sí
  • -
  • Medio: {{ Xref_cssvisual() }}
  • -
  • {{ Cssxref("computed value", "Valor calculado") }}: dos largos absolutos.
  • -
- -

Sintaxis

- -

border-spacing: <length> | <length> <length> | inherit

- -

Valores

- -
    -
  • <length> : un largo a utilizar para el espaciado horizontal y vertical.
  • -
  • <length> <length> : el primero da el espaciado horizontal (espacio entre celdas de una fila) y el segundo el espaciado vertical (espacio entre celdas de una columna).
  • -
- -

Ejemplos

- -

Ver El Ejemplo Vivo

- -
table#space {
-  border-collapse: separate;
-  border-spacing: 10px 5px;
-}
-
- -

Notas

- -

Ésta propiedad sólo se aplica cuando {{ Cssxref("border-collapse") }} es especificado en separate.

- -

El espaciado de borde también se utiliza en los bordes exteriores de las tablas donde la distancia entre los bordes de tabla y las celdas en la primera/última columna o fila es la suma de los espaciados (horizontales o verticales) y de los espaciados (arriba, derecho, abajo o izquierdo) en una tabla.

- -

Especificaciones

- - - -

Compatibilidades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorVersión mínima
Netscape6
Internet Explorer7
Firefox1
Mozilla1
Safari1
Opera6
- -

- -

Ver también

- -

{{ Cssxref("border-collapse") }}

- -
-

Categorías

- -

Interwiki Languages

-
- -

{{ languages( { "fr": "fr/CSS/border-spacing", "pl": "pl/CSS/border-spacing", "en": "en/CSS/border-spacing" } ) }}

diff --git a/files/es/web/css/border-spacing/index.md b/files/es/web/css/border-spacing/index.md new file mode 100644 index 00000000000000..57d5baf97fda47 --- /dev/null +++ b/files/es/web/css/border-spacing/index.md @@ -0,0 +1,71 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - CSS:Referencias + - Todas_las_Categorías +translation_of: Web/CSS/border-spacing +--- +<< [Volver](es/Gu%c3%ada_de_referencia_de_CSS) + +### Resumen + +La propiedad de {{ Cssxref("border-spacing", "espaciado de borde") }} especifica la distancia entre los bordes de celdas adyacentes (sólo para el modelo de [separación de borde](es/CSS/border-collapse)). Es el equivalente al atributo `cellspacing` en HTML. + +- {{ Cssxref("initial", "Valor inicial") }}: 0 +- Se aplica a: tablas y elementos con la propiedad `inline-table` +- {{ Cssxref("inheritance", "Valor heredado") }}: sí +- Medio: {{ Xref_cssvisual() }} +- {{ Cssxref("computed value", "Valor calculado") }}: dos largos absolutos. + +### Sintaxis + +border-spacing: \ | \ \ | inherit + +### Valores + +- **\** : un largo a utilizar para el espaciado horizontal y vertical. +- **\ \** : el primero da el espaciado horizontal (espacio entre celdas de una fila) y el segundo el espaciado vertical (espacio entre celdas de una columna). + +### Ejemplos + +[Ver El Ejemplo Vivo](/samples/cssref/border-spacing.html) + +``` +table#space { + border-collapse: separate; + border-spacing: 10px 5px; +} +``` + +### Notas + +Ésta propiedad sólo se aplica cuando {{ Cssxref("border-collapse") }} es especificado en `separate`. + +El espaciado de borde también se utiliza en los bordes exteriores de las tablas donde la distancia entre los bordes de tabla y las celdas en la primera/última columna o fila es la suma de los espaciados (horizontales o verticales) y de los espaciados (arriba, derecho, abajo o izquierdo) en una tabla. + +### Especificaciones + +- [CSS 2.1](http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing) + +### Compatibilidades + +| Navegador | Versión mínima | +| ----------------- | -------------- | +| Netscape | 6 | +| Internet Explorer | 7 | +| Firefox | 1 | +| Mozilla | 1 | +| Safari | 1 | +| Opera | 6 | + +### Ver también + +{{ Cssxref("border-collapse") }} + +Categorías + +Interwiki Languages + +{{ languages( { "fr": "fr/CSS/border-spacing", "pl": "pl/CSS/border-spacing", "en": "en/CSS/border-spacing" } ) }} diff --git a/files/es/web/css/border-start-end-radius/index.html b/files/es/web/css/border-start-end-radius/index.html deleted file mode 100644 index 4c4c7268e4ff8c..00000000000000 --- a/files/es/web/css/border-start-end-radius/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: border-start-end-radius -slug: Web/CSS/border-start-end-radius -translation_of: Web/CSS/border-start-end-radius ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

La propiedad de CSS border-start-end-radius define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.

- -
/* <length> values */
-/* With one value the corner will be a circle */
-border-start-end-radius: 10px;
-border-start-end-radius: 1em;
-
-/* With two values the corner will be an ellipse */
-border-start-end-radius: 1em 2em;
-
-/* Global values */
-border-start-end-radius: inherit;
-border-start-end-radius: initial;
-border-start-end-radius: unset;
-
- -

Por ejemplo, en un modo de escritura horizontal-tb, esta propiedad corresponde a la propiedad {{CSSxRef("border-bottom-left-radius")}}.

- -

Sintaxis

- -

Valores

- -
-
<length-percentage>
-
Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.
-
- -

Sintaxis formal

- -{{CSSSyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: rebeccapurple;
-  width: 120px;
-  height: 120px;
-  border-start-end-radius: 10px;
-}
-
-.exampleText {
-  writing-mode: vertical-rl;
-  padding: 10px;
-  background-color: #fff;
-  border-start-end-radius: 10px;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

{{CSSInfo}}

- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-start-end-radius")}}

- -

Mira también

- -
    -
  • La propiedad física asignada: {{CSSxRef("border-bottom-left-radius")}}
  • -
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-start-end-radius/index.md b/files/es/web/css/border-start-end-radius/index.md new file mode 100644 index 00000000000000..14cbd489afa938 --- /dev/null +++ b/files/es/web/css/border-start-end-radius/index.md @@ -0,0 +1,83 @@ +--- +title: border-start-end-radius +slug: Web/CSS/border-start-end-radius +translation_of: Web/CSS/border-start-end-radius +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-start-end-radius`** define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}. + +```css +/* values */ +/* With one value the corner will be a circle */ +border-start-end-radius: 10px; +border-start-end-radius: 1em; + +/* With two values the corner will be an ellipse */ +border-start-end-radius: 1em 2em; + +/* Global values */ +border-start-end-radius: inherit; +border-start-end-radius: initial; +border-start-end-radius: unset; +``` + +Por ejemplo, en un modo de escritura `horizontal-tb`, esta propiedad corresponde a la propiedad {{CSSxRef("border-bottom-left-radius")}}. + +## Sintaxis + +### Valores + +- `` + - : Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos. + +### Sintaxis formal + +{{CSSSyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example

+
+``` + +### Contenido CSS + +```css +div { + background-color: rebeccapurple; + width: 120px; + height: 120px; + border-start-end-radius: 10px; +} + +.exampleText { + writing-mode: vertical-rl; + padding: 10px; + background-color: #fff; + border-start-end-radius: 10px; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +{{CSSInfo}} + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-start-end-radius")}} + +## Mira también + +- La propiedad física asignada: {{CSSxRef("border-bottom-left-radius")}} +- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} diff --git a/files/es/web/css/border-start-start-radius/index.html b/files/es/web/css/border-start-start-radius/index.html deleted file mode 100644 index 1a8568295be741..00000000000000 --- a/files/es/web/css/border-start-start-radius/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: border-start-start-radius -slug: Web/CSS/border-start-start-radius -translation_of: Web/CSS/border-start-start-radius ---- -

{{CSSRef}}{{SeeCompatTable}}

- -

La propiedad de CSS border-start-start-radius define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

- -
/* <length> values */
-/* With one value the corner will be a circle */
-border-start-start-radius: 10px;
-border-start-start-radius: 1em;
-
-/* With two values the corner will be an ellipse */
-border-start-start-radius: 1em 2em;
-
-/* Global values */
-border-start-start-radius: inherit;
-border-start-start-radius: initial;
-border-start-start-radius: unset;
-
- -

Por ejemplo, en un modo de escritura horizontal-tb, esta propiedad corresponde a la propiedad {{CSSxRef("border-top-left-radius")}}.

- -

Sintaxis

- -

Valores

- -
-
<length-percentage>
-
Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.
-
- -

Sintaxis formal

- -{{CSSSyntax}} - -

Ejemplo

- -

Contenido HTML

- -
<div>
-  <p class="exampleText">Example</p>
-</div>
-
- -

Contenido CSS

- -
div {
-  background-color: rebeccapurple;
-  width: 120px;
-  height: 120px;
-  border-start-start-radius: 10px;
-}
-
-.exampleText {
-  writing-mode: vertical-rl;
-  padding: 10px;
-  background-color: #fff;
-  border-start-start-radius: 10px;
-}
- -

{{EmbedLiveSample("Ejemplo", 140, 140)}}

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
- -

{{CSSInfo}}

- -

Compatibilidad en navegadores

- - - -

{{Compat("css.properties.border-start-start-radius")}}

- -

Mira también

- -
    -
  • La propiedad física asignada: {{CSSxRef("border-top-left-radius")}}
  • -
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
  • -
diff --git a/files/es/web/css/border-start-start-radius/index.md b/files/es/web/css/border-start-start-radius/index.md new file mode 100644 index 00000000000000..b916dd9a58125d --- /dev/null +++ b/files/es/web/css/border-start-start-radius/index.md @@ -0,0 +1,83 @@ +--- +title: border-start-start-radius +slug: Web/CSS/border-start-start-radius +translation_of: Web/CSS/border-start-start-radius +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad de [CSS](/es/docs/Web/CSS) **`border-start-start-radius`** define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}. + +```css +/* values */ +/* With one value the corner will be a circle */ +border-start-start-radius: 10px; +border-start-start-radius: 1em; + +/* With two values the corner will be an ellipse */ +border-start-start-radius: 1em 2em; + +/* Global values */ +border-start-start-radius: inherit; +border-start-start-radius: initial; +border-start-start-radius: unset; +``` + +Por ejemplo, en un modo de escritura `horizontal-tb`, esta propiedad corresponde a la propiedad {{CSSxRef("border-top-left-radius")}}. + +## Sintaxis + +### Valores + +- `` + - : Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos. + +### Sintaxis formal + +{{CSSSyntax}} + +## Ejemplo + +### Contenido HTML + +```html +
+

Example

+
+``` + +### Contenido CSS + +```css +div { + background-color: rebeccapurple; + width: 120px; + height: 120px; + border-start-start-radius: 10px; +} + +.exampleText { + writing-mode: vertical-rl; + padding: 10px; + background-color: #fff; + border-start-start-radius: 10px; +} +``` + +{{EmbedLiveSample("Ejemplo", 140, 140)}} + +## Especificación + +| Especificación | Estado | Comentario | +| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +{{CSSInfo}} + +## Compatibilidad en navegadores + +{{Compat("css.properties.border-start-start-radius")}} + +## Mira también + +- La propiedad física asignada: {{CSSxRef("border-top-left-radius")}} +- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} diff --git a/files/es/web/css/border-style/index.html b/files/es/web/css/border-style/index.html deleted file mode 100644 index b8584a75de5f1f..00000000000000 --- a/files/es/web/css/border-style/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: border-style -slug: Web/CSS/border-style -tags: - - Bordes CSS - - CSS - - Propiedad CSS - - Referencia -translation_of: Web/CSS/border-style ---- -
{{CSSRef}}
- -

La propiedad border-style CSS es una shorthand property (Propiedad abreviada) que establece el estilo de línea para los cuatro lados del borde de un elemento.

- -
{{EmbedInteractiveExample("pages/css/border-style.html")}}
- - - -

Syntax

- -
/* Keyword values */
-border-top-style: none;
-border-top-style: hidden;
-border-top-style: dotted;
-border-top-style: dashed;
-border-top-style: solid;
-border-top-style: double;
-border-top-style: groove;
-border-top-style: ridge;
-border-top-style: inset;
-border-top-style: outset;
-
-/* vertical | horizontal */
-border-style: dotted solid;
-
-/* top | horizontal | bottom */
-border-style: hidden double dashed;
-
-/* top | right | bottom | left */
-border-style: none solid dotted dashed;
-
-/* Global values */
-border-style: inherit;
-border-style: initial;
-border-style: unset;
-
- -

La propiedad border-style se puede especificar usando uno, dos, tres o cuatro valores.

- -
    -
  • Cuando se especifica un valor, se aplica el mismo estilo a los cuatro lados.
  • -
  • Cuando se especifican dos valores, el primer estilo se aplica a la parte superior e inferior, el segundo a la izquierda y a la derecha
  • -
  • Cuando se especifican tres valores, el primer estilo se aplica a la parte superior, el segundo a la izquierda y derecha, el tercero a la parte inferior.
  • -
  • Cuando se especifican cuatro valores, los estilos se aplican a la parte superior, derecha, inferior e izquierda en ese orden (en el sentido de las agujas del reloj).
  • -
- -

Cada valor es una palabra clave elegida de la siguiente lista.

- -

Values

- -
-
<br-style>
-
Describe el estilo del borde. Puede tener los siguientes valores: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
none -
-
Like the hidden keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.
hidden -
-
Like the none keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highest priority: if any other conflicting border is set, it won't be displayed.
dotted -
-
Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated {{ cssxref("border-top-width") }}.
dashed -
-
Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
solid -
-
Displays a single, straight, solid line.
double -
-
Displays two straight lines that add up to the pixel size defined by {{ cssxref("border-width") }} or {{ cssxref("border-top-width") }}.
groove -
-
Displays a border with a carved appearance. It is the opposite of ridge.
ridge -
-
Displays a border with an extruded appearance. It is the opposite of groove.
inset -
-
Displays a border that makes the element appear embedded. It is the opposite of outset. When applied to a table cell with {{ cssxref("border-collapse") }} set to collapsed, this value behaves like groove.
outset -
-
-

Displays a border that makes the element appear embossed. It is the opposite of inset. When applied to a table cell with {{ cssxref("border-collapse") }} set to collapsed, this value behaves like ridge.

-
-
-
- -

Formal syntax

- -{{csssyntax}} - -

Ejemplos

- -

Tabla con todos los valores de propiedad

- -

A continuación, se muestra un ejemplo de todos los valores de propiedad.

- -

HTML

- -
<table>
-  <tr>
-    <td class="b1">none</td>
-    <td class="b2">hidden</td>
-    <td class="b3">dotted</td>
-    <td class="b4">dashed</td>
-  </tr>
-  <tr>
-    <td class="b5">solid</td>
-    <td class="b6">double</td>
-    <td class="b7">groove</td>
-    <td class="b8">ridge</td>
-  </tr>
-  <tr>
-    <td class="b9">inset</td>
-    <td class="b10">outset</td>
-  </tr>
-</table>
- -

CSS

- -
/* Define look of the table */
-table {
-  border-width: 3px;
-  background-color: #52E396;
-}
-tr, td {
-  padding: 2px;
-}
-
-/* border-style example classes */
-.b1 {border-style:none;}
-.b2 {border-style:hidden;}
-.b3 {border-style:dotted;}
-.b4 {border-style:dashed;}
-.b5 {border-style:solid;}
-.b6 {border-style:double;}
-.b7 {border-style:groove;}
-.b8 {border-style:ridge;}
-.b9 {border-style:inset;}
-.b10 {border-style:outset;}
- -

Output

- -

{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Especificacion EstadoComentario
{{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}{{ Spec2('CSS3 Backgrounds') }}No change.
{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}{{ Spec2('CSS2.1') }}Adds hidden keyword value.
{{ SpecName('CSS1', '#border-style', 'border-style') }}{{ Spec2('CSS1') }}Initial definition.
- -

{{cssinfo}}

- -

Compatibilidad del navegador

- - - -

{{Compat("css.properties.border-style")}}

- -

Ver también

- -
    -
  • The border-related shorthand CSS properties: {{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}
  • -
diff --git a/files/es/web/css/border-style/index.md b/files/es/web/css/border-style/index.md new file mode 100644 index 00000000000000..9d467d9f80bdc3 --- /dev/null +++ b/files/es/web/css/border-style/index.md @@ -0,0 +1,152 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - Bordes CSS + - CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-style +--- +{{CSSRef}} + +La propiedad **`border-style`** [CSS](/en/CSS) es una [shorthand property](/es/docs/Web/CSS/Shorthand_properties) (Propiedad abreviada) que establece el estilo de línea para los cuatro lados del borde de un elemento. + +{{EmbedInteractiveExample("pages/css/border-style.html")}} + +## Syntax + +```css +/* Keyword values */ +border-top-style: none; +border-top-style: hidden; +border-top-style: dotted; +border-top-style: dashed; +border-top-style: solid; +border-top-style: double; +border-top-style: groove; +border-top-style: ridge; +border-top-style: inset; +border-top-style: outset; + +/* vertical | horizontal */ +border-style: dotted solid; + +/* top | horizontal | bottom */ +border-style: hidden double dashed; + +/* top | right | bottom | left */ +border-style: none solid dotted dashed; + +/* Global values */ +border-style: inherit; +border-style: initial; +border-style: unset; +``` + +La propiedad `border-style` se puede especificar usando uno, dos, tres o cuatro valores. + +- Cuando se especifica **un** valor, se aplica el mismo estilo a los **cuatro lados**. +- Cuando se especifican **dos** valores, el primer estilo se aplica a la parte **superior e inferior**, el segundo a la **izquierda y a la derecha** +- Cuando se especifican **tres** valores, el primer estilo se aplica a la **parte superior**, el segundo a la **izquierda y derecha**, el tercero a la **parte inferior**. +- Cuando se especifican **cuatro** valores, los estilos se aplican a la parte **superior**, **derecha**, **inferior** e **izquierda** en ese orden (en el sentido de las agujas del reloj). + +Cada valor es una palabra clave elegida de la siguiente lista. + +### Values + +- `` + + - : Describe el estilo del borde. Puede tener los siguientes valores: + + | `none` | | Like the `hidden` keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be `0`, even if the specified value is something else. In the case of table cell and border collapsing, the `none` value has the _lowest_ priority: if any other conflicting border is set, it will be displayed. | + | -------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | + | `hidden` | | Like the `none` keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be `0`, even if the specified value is something else. In the case of table cell and border collapsing, the `hidden` value has the _highest_ priority: if any other conflicting border is set, it won't be displayed. | + | `dotted` | | Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated {{ cssxref("border-top-width") }}. | + | `dashed` | | Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific. | + | `solid` | | Displays a single, straight, solid line. | + | `double` | | Displays two straight lines that add up to the pixel size defined by {{ cssxref("border-width") }} or {{ cssxref("border-top-width") }}. | + | `groove` | | Displays a border with a carved appearance. It is the opposite of `ridge`. | + | `ridge` | | Displays a border with an extruded appearance. It is the opposite of `groove`. | + | `inset` | | Displays a border that makes the element appear embedded. It is the opposite of `outset`. When applied to a table cell with {{ cssxref("border-collapse") }} set to `collapsed`, this value behaves like `groove`. | + | `outset` | | Displays a border that makes the element appear embossed. It is the opposite of `inset`. When applied to a table cell with {{ cssxref("border-collapse") }} set to `collapsed`, this value behaves like `ridge`. | + +### Formal syntax + +{{csssyntax}} + +## Ejemplos + +### Tabla con todos los valores de propiedad + +A continuación, se muestra un ejemplo de todos los valores de propiedad. + +#### HTML + +```html + + + + + + + + + + + + + + + + + +
nonehiddendotteddashed
soliddoublegrooveridge
insetoutset
+``` + +#### CSS + +```css +/* Define look of the table */ +table { + border-width: 3px; + background-color: #52E396; +} +tr, td { + padding: 2px; +} + +/* border-style example classes */ +.b1 {border-style:none;} +.b2 {border-style:hidden;} +.b3 {border-style:dotted;} +.b4 {border-style:dashed;} +.b5 {border-style:solid;} +.b6 {border-style:double;} +.b7 {border-style:groove;} +.b8 {border-style:ridge;} +.b9 {border-style:inset;} +.b10 {border-style:outset;} +``` + +#### Output + +{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }} + +## Especificaciones + +| Especificacion | Estado | Comentario | +| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------- | +| {{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }} | {{ Spec2('CSS3 Backgrounds') }} | No change. | +| {{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }} | {{ Spec2('CSS2.1') }} | Adds `hidden` keyword value. | +| {{ SpecName('CSS1', '#border-style', 'border-style') }} | {{ Spec2('CSS1') }} | Initial definition. | + +{{cssinfo}} + +## Compatibilidad del navegador + +{{Compat("css.properties.border-style")}} + +## Ver también + +- The border-related shorthand CSS properties: {{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }} diff --git a/files/es/web/css/border-top-color/index.html b/files/es/web/css/border-top-color/index.html deleted file mode 100644 index 786cdabddff90f..00000000000000 --- a/files/es/web/css/border-top-color/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: border-top-color -slug: Web/CSS/border-top-color -translation_of: Web/CSS/border-top-color ---- -
{{CSSRef}}
- -

La propiedad CSS border-top-color establece el color superior de un elemento {{cssxref("border")}}. Tenga en cuenta que en la mayoria de los casos las propiedades abreviadas {{cssxref("border-color")}} o {{cssxref("border-top")}} son mas convenientes y preferidas.

- -
/*valores <color> */
-border-top-color: red;
-border-top-color: #ffbb00;
-border-top-color: rgb(255, 0, 0);
-border-top-color: hsla(100%, 50%, 25%, 0.75);
-border-top-color: currentColor;
-border-top-color: transparent;
-
-/* Valores globales */
-border-top-color: inherit;
-border-top-color: initial;
-border-top-color: unset;
-
- -

{{cssinfo}}

- -

Sintaxis

- -

La propiedad border-top-color es especificada con un valor unico.

- -

Valores

- -
-
{{cssxref("<color>")}}
-
El color superior del borde
-
- -

Sintaxis Formal

- -{{csssyntax}} - -

Ejemplos

- -

Un div simple con un borde

- -

HTML

- -
<div class="mybox">
-  <p>Esta es una caja con un border alrededor.
-     Tenga en cuenta que un border de la caja es
-     <span class="redtext">Rojo</span>.</p>
-</div>
- -

CSS

- -
.mybox {
-  border: solid 0.3em gold;
-  border-top-color: red;
-  width: auto;
-}
-
-.redtext {
-  color: red;
-}
- -

Resultado

- -

{{EmbedLiveSample('A_simple_div_with_a_border')}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}{{Spec2('CSS3 Backgrounds')}}Sin cambios significativos, aunque la palabra clave transparent , ahora incluida en {{cssxref("<color>")}} que se ha extendido, se ha eliminado formalmente.
{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-top-color')}}{{Spec2('CSS2.1')}}Definición inicial
- -

Compatibilidad entre navegadores

- - - -

{{Compat("css.properties.border-top-color")}}

- -

Ver tambien

- -
    -
  • Las propiedades abreviadas de CSS relacionadas con los bordes : {{Cssxref("border")}}, {{Cssxref("border-top")}}, y {{Cssxref("border-color")}}.
  • -
  • Las propiedades abrevadas de CSS relacionadas con el color para los bordes: {{Cssxref("border-right-color")}}, {{Cssxref("border-bottom-color")}}, y {{Cssxref("border-left-color")}}.
  • -
  • Las otras propiedades CSS relaciones con los bordes que se aplican al mismo borde : {{cssxref("border-top-style")}} y {{cssxref("border-top-width")}}.
  • -
diff --git a/files/es/web/css/border-top-color/index.md b/files/es/web/css/border-top-color/index.md new file mode 100644 index 00000000000000..bc99383e825f64 --- /dev/null +++ b/files/es/web/css/border-top-color/index.md @@ -0,0 +1,87 @@ +--- +title: border-top-color +slug: Web/CSS/border-top-color +translation_of: Web/CSS/border-top-color +--- +{{CSSRef}} + +La propiedad CSS **`border-top-color`** establece el color superior de un elemento {{cssxref("border")}}. Tenga en cuenta que en la mayoria de los casos las propiedades abreviadas {{cssxref("border-color")}} o {{cssxref("border-top")}} son mas convenientes y preferidas. + +```css +/*valores */ +border-top-color: red; +border-top-color: #ffbb00; +border-top-color: rgb(255, 0, 0); +border-top-color: hsla(100%, 50%, 25%, 0.75); +border-top-color: currentColor; +border-top-color: transparent; + +/* Valores globales */ +border-top-color: inherit; +border-top-color: initial; +border-top-color: unset; +``` + +{{cssinfo}} + +## Sintaxis + +La propiedad `border-top-color` es especificada con un valor unico. + +### Valores + +- {{cssxref("<color>")}} + - : El color superior del borde + +### Sintaxis Formal + +{{csssyntax}} + +## Ejemplos + +### Un div simple con un borde + +#### HTML + +```html +
+

Esta es una caja con un border alrededor. + Tenga en cuenta que un border de la caja es + Rojo.

+
+``` + +#### CSS + +```css +.mybox { + border: solid 0.3em gold; + border-top-color: red; + width: auto; +} + +.redtext { + color: red; +} +``` + +#### Resultado + +{{EmbedLiveSample('A_simple_div_with_a_border')}} + +## Especificaciones + +| Especificación | Estado | Comentarios | +| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}} | {{Spec2('CSS3 Backgrounds')}} | Sin cambios significativos, aunque la palabra clave `transparent` , ahora incluida en {{cssxref("<color>")}} que se ha extendido, se ha eliminado formalmente. | +| {{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-top-color')}} | {{Spec2('CSS2.1')}} | Definición inicial | + +## Compatibilidad entre navegadores + +{{Compat("css.properties.border-top-color")}} + +## Ver tambien + +- Las propiedades abreviadas de CSS relacionadas con los bordes : {{Cssxref("border")}}, {{Cssxref("border-top")}}, y {{Cssxref("border-color")}}. +- Las propiedades abrevadas de CSS relacionadas con el color para los bordes: {{Cssxref("border-right-color")}}, {{Cssxref("border-bottom-color")}}, y {{Cssxref("border-left-color")}}. +- Las otras propiedades CSS relaciones con los bordes que se aplican al mismo borde : {{cssxref("border-top-style")}} y {{cssxref("border-top-width")}}. diff --git a/files/es/web/css/border-top-left-radius/index.html b/files/es/web/css/border-top-left-radius/index.html deleted file mode 100644 index 4b7af19869abf5..00000000000000 --- a/files/es/web/css/border-top-left-radius/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: border-top-left-radius -slug: Web/CSS/border-top-left-radius -tags: - - Bordes CSS - - Propiedad CSS - - Referencia -translation_of: Web/CSS/border-top-left-radius ---- -
{{CSSRef}}
- -

La propiedad CSS border-top-left-radius establece el redondeo de la esquina superior izquierda del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0,no se redondeará la esquina, dejándola cuadrada.

- -
border-radius.png
- -

Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.

- -
Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad border-top-left-radius, el valor de esta propiedad es restaurado a su valor inicial por la propiedad de forma reducida.
- -

{{cssinfo}}

- -

Sintaxis

- -
/* la esquina es un círculo */
-/* border-top-left-radius: radius */
-border-top-left-radius: 3px;
-
-/* la esquina es una elipse */
-/* border-top-left-radius: horizontal vertical */
-border-top-left-radius: 0.5em 1em;
-
-border-top-left-radius: inherit;
-
- -
-

donde:

- -
-
radius
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
-
horizontal
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
-
vertical
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
-
-
- -

Valores

- -
-
<length>
-
Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
-
<percentage>
-
Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplos

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ejemplo en vivoCódigo
-
-
Un arco de círculo usado como borde -
-div {
-  border-top-left-radius: 40px 40px;
-}
-
-
-
-
Un arco de elipse usado como borde -
-div {
-  border-top-left-radius: 40px 20px;
-}
-
-
-
-
La caja es un cuadro: un arco de círculo es usado como borde -
-div
-  border-top-left-radius: 40%;
-}
-
-
-
-
La caja no es un círculo: un arco de elipse es usado como borde -
-div {
-  border-top-left-radius: 40%;
-}
-
-
-
-
El color de fondo está delimitado al borde -
-div {
-  border-top-left-radius:40%;
-  border-style: black 3px double;
-  background-color: rgb(250,20,70);
-  background-clip: content-box;
-}
-
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
- -

Compatibilidad de navegadores

- -{{Compat("css.properties.border-top-left-radius")}} - -

Véase también

- -

Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-bottom-left-radius")}}.

diff --git a/files/es/web/css/border-top-left-radius/index.md b/files/es/web/css/border-top-left-radius/index.md new file mode 100644 index 00000000000000..817865c22be847 --- /dev/null +++ b/files/es/web/css/border-top-left-radius/index.md @@ -0,0 +1,161 @@ +--- +title: border-top-left-radius +slug: Web/CSS/border-top-left-radius +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-top-left-radius +--- +{{CSSRef}} + +La propiedad CSS **`border-top-left-radius`** establece el redondeo de la esquina superior izquierda del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es `0,`no se redondeará la esquina, dejándola cuadrada. + +![border-radius.png](/@api/deki/files/6132/=border-radius.png) + +Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}. + +> **Nota:** Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad `border-top-left-radius`, el valor de esta propiedad es restaurado a su valor inicial por la [propiedad de forma reducida](/es/docs/Web/CSS/Shorthand_properties). + +{{cssinfo}} + +## Sintaxis + +```css +/* la esquina es un círculo */ +/* border-top-left-radius: radius */ +border-top-left-radius: 3px; + +/* la esquina es una elipse */ +/* border-top-left-radius: horizontal vertical */ +border-top-left-radius: 0.5em 1em; + +border-top-left-radius: inherit; +``` + +donde: + +- _radius_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina. +- _horizontal_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina. +- _vertical_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina. + +### Valores + +- `` + - : Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos. +- `` + - : Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplos + +#### Un arco de círculo usado como borde + +```html hidden +
+``` + +```css +div { + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; + border-top-left-radius: 40px 40px; +} +``` + +{{EmbedLiveSample}} + +#### Un arco de elipse usado como borde + +```html hidden +
+``` + +```css +div { + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; + border-top-left-radius: 40px 20px; +} +``` + +{{EmbedLiveSample}} + +#### La caja es un cuadro: un arco de círculo es usado como borde + +```html hidden +
+``` + +```css +div { + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; + border-top-left-radius: 40%; +} +``` + +{{EmbedLiveSample}} + +#### La caja no es un círculo: un arco de elipse es usado como borde + +```html hidden +
+``` + +```css +div { + background-color: lightgreen; + border: solid 1px black; + border-top-left-radius: 40%; + width: 100px; + height: 200px; +} +``` + +{{EmbedLiveSample}} + +#### El color de fondo está delimitado al borde + +```html hidden +
+``` + +```css +div { + border: black 3px double; + border-top-left-radius: 40%; + height: 100px; + width: 100px; + background-color: rgb(250,20,70); + background-clip: content-box; +} +``` + +{{EmbedLiveSample}} + +## Especificaciones + +| Especificación | Estado | Comentarios | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------ | +| {{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}} | {{Spec2('CSS3 Backgrounds')}} | Definición inicial | + +## Compatibilidad de navegadores + +{{Compat("css.properties.border-top-left-radius")}} + +## Véase también + +Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-bottom-left-radius")}}. diff --git a/files/es/web/css/border-top-right-radius/index.html b/files/es/web/css/border-top-right-radius/index.html deleted file mode 100644 index a84a026315d2e6..00000000000000 --- a/files/es/web/css/border-top-right-radius/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: border-top-right-radius -slug: Web/CSS/border-top-right-radius -tags: - - Bordes CSS - - Propiedad CSS - - Referencia -translation_of: Web/CSS/border-top-right-radius ---- -
{{CSSRef}}
- -

Resumen

- -

La propiedad CSS border-top-right-radius establece el redondeo de la esquina superior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0,no se redondeará la esquina, dejándola cuadrada.

- -
border-top-right-radius.png
- -

Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.

- -
Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad border-top-radius-radius, el valor de esta propiedad es restaurado a su valor inicial por la propiedad de forma reducida.
- -

{{cssinfo}}

- -

Sintaxis

- -
/* la esquina es un círculo */
-/* border-top-right-radius: radius */
-border-top-right-radius: 3px;
-
-/* la esquina es una elipse */
-/* border-top-right-radius: horizontal vertical */
-border-top-right-radius: 0.5em 1em;
-
-border-top-right-radius: inherit;
-
- -
-

donde:

- -
-
radius
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
-
horizontal
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
-
vertical
-
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
-
-
- -

Valores

- -
-
<length>
-
Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
-
<percentage>
-
Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplos

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ejemplo en vivoCódigo
-
-
Un arco de círculo usado como borde -
-div {
-  border-top-right-radius: 40px 40px;
-}
-
-
-
-
Un arco de elipse usado como borde -
-div {
-  border-top-right-radius: 40px 20px;
-}
-
-
-
-
La caja es un cuadro: un arco de círculo es usado como borde -
-div {
-  border-top-right-radius: 40%;
-}
-
-
-
- -
-
La caja no es un círculo: un arco de elipse es usado como borde -
-div {
-  border-top-right-radius: 40%;
-}
-
-
-
-
El color de fondo está delimitado al borde -
-div {
-  border-top-right-radius:40%;
-  border-style: black 3px double;
-  background-color: rgb(250,20,70);
-  background-clip: content-box;
-}
-
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
- -

Compatibilidad de navegadores

- -{{Compat("css.properties.border-top-right-radius")}} - -

Véase también

- -

Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-left-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-bottom-left-radius")}}.

diff --git a/files/es/web/css/border-top-right-radius/index.md b/files/es/web/css/border-top-right-radius/index.md new file mode 100644 index 00000000000000..e68779c21afa41 --- /dev/null +++ b/files/es/web/css/border-top-right-radius/index.md @@ -0,0 +1,163 @@ +--- +title: border-top-right-radius +slug: Web/CSS/border-top-right-radius +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-top-right-radius +--- +{{CSSRef}} + +## Resumen + +La propiedad CSS **`border-top-right-radius`** establece el redondeo de la esquina superior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es `0,`no se redondeará la esquina, dejándola cuadrada. + +![border-top-right-radius.png](/@api/deki/files/6133/=border-top-right-radius.png) + +Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}. + +> **Nota:** Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad `border-top-radius-radius`, el valor de esta propiedad es restaurado a su valor inicial por la [propiedad de forma reducida](/es/docs/Web/CSS/Shorthand_properties). + +{{cssinfo}} + +## Sintaxis + +```css +/* la esquina es un círculo */ +/* border-top-right-radius: radius */ +border-top-right-radius: 3px; + +/* la esquina es una elipse */ +/* border-top-right-radius: horizontal vertical */ +border-top-right-radius: 0.5em 1em; + +border-top-right-radius: inherit; +``` + +donde: + +- _radius_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina. +- _horizontal_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina. +- _vertical_ + - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina. + +### Valores + +- `` + - : Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos. +- `` + - : Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplos + +#### Un arco de círculo usado como borde + +```html hidden +
+``` + +```css +div { + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; + border-top-right-radius: 40px 40px; +} +``` + +{{EmbedLiveSample}} + +#### Un arco de elipse usado como borde + +```html hidden +
+``` + +```css +div { + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; + border-top-right-radius: 40px 20px; +} +``` + +{{EmbedLiveSample}} + +#### La caja es un cuadro: un arco de círculo es usado como borde + +```html hidden +
+``` + +```css +div { + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; + border-top-right-radius: 40%; +} +``` + +{{EmbedLiveSample}} + +#### La caja no es un círculo: un arco de elipse es usado como borde + +```html hidden +
+``` + +```css +div { + background-color: lightgreen; + border: solid 1px black; + border-top-right-radius: 40%; + width: 100px; + height: 200px; +} +``` + +{{EmbedLiveSample}} + +#### El color de fondo está delimitado al borde + +```html hidden +
+``` + +```css +div { + border: black 3px double; + border-top-right-radius: 40%; + height: 100px; + width: 100px; + background-color: rgb(250,20,70); + background-clip: content-box; +} +``` + +{{EmbedLiveSample}} + +## Especificaciones + +| Especificación | Estado | Comentarios | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------ | +| {{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}} | {{Spec2('CSS3 Backgrounds')}} | Definición inicial | + +## Compatibilidad de navegadores + +{{Compat("css.properties.border-top-right-radius")}} + +## Véase también + +Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-left-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-bottom-left-radius")}}. diff --git a/files/es/web/css/border-top/index.html b/files/es/web/css/border-top/index.html deleted file mode 100644 index 13876b1111ba89..00000000000000 --- a/files/es/web/css/border-top/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: border-top -slug: Web/CSS/border-top -tags: - - Bordes - - CSS - - Propiedades CSS - - Referencia -translation_of: Web/CSS/border-top ---- -
{{CSSRef}}
- -

Resumen

- -

La propiedad de CSS border-top es una abreviatura que establece los valores de {{Cssxref("border-top-color")}}, {{Cssxref("border-top-style")}}, y {{Cssxref("border-top-width")}}. Estas propiedades las características del borde superior de un elemento.

- -
-

Los tres valores de la abreviatura pueden ser especificados en cualquier orden, y uno o dos de ellos pueden ser omitidos.

- -

Como con todas las propiedades abreviadas, border-top siempre establece los valores de todas las propiedades que sean posibles, aun si no están especificadas. Establece aquellas que no son especificadas a sus valores por defecto. Esto significa que:

- -
  border-top: none thick green;
-
- -

es lo mismo que

- -
  border-top: thick green;
-
- -

y el valor de {{Cssxref("border-top-style")}} establecido antes de border-top es ignorado.

- -

El no especificar la parte de border-style que está destinada a establecer el valor de {{Cssxref("border-top-style")}} significa que se tomará el valor por defecto, lo que significa que el {{Cssxref("border-top-style")}} será none.

- -

También hay que tomar en cuenta que en el siguiente bloque de código se ignorará la primer asignación de {{Cssxref("border-top-style")}} dado que al indicar border-top se establecerá implicitamente el valor de {{Cssxref("border-top-style")}} a none

- -
  border-top-style: dotted;
-  border-top: thick green;
-
-
- -
{{cssinfo}}
- -

Sintaxis

- -
border-top: 1px;
-border-top: 2px dotted;
-border-top: medium dashed green;
-
- -

Valores

- -
-
<br-width>
-
See {{Cssxref("border-top-width")}}.
-
<br-style>
-
See {{Cssxref("border-top-style")}}.
-
<color>
-
See {{Cssxref("border-top-color")}}.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplos

- -
element {
-    border-top: 1px solid #000;
-}
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónStatusComentarios
{{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}{{Spec2('CSS3 Backgrounds')}} -

No hay cambios directos, aunque la modificación de valores para {{cssxref("border-top-color")}} sí aplican.

-
{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}{{Spec2('CSS2.1')}}No hay cambios significativos
{{SpecName('CSS1', '#border-top', 'border-top')}}{{Spec2('CSS1')}}Definición inicial
- -

Compatibilidad con navegadores

- -{{Compat("css.properties.border-top")}} diff --git a/files/es/web/css/border-top/index.md b/files/es/web/css/border-top/index.md new file mode 100644 index 00000000000000..2a4a9f92b57972 --- /dev/null +++ b/files/es/web/css/border-top/index.md @@ -0,0 +1,83 @@ +--- +title: border-top +slug: Web/CSS/border-top +tags: + - Bordes + - CSS + - Propiedades CSS + - Referencia +translation_of: Web/CSS/border-top +--- +{{CSSRef}} + +## Resumen + +La propiedad de [CSS](/es/docs/CSS) **`border-top`** es una abreviatura que establece los valores de {{Cssxref("border-top-color")}}, {{Cssxref("border-top-style")}}, y {{Cssxref("border-top-width")}}. Estas propiedades las características del borde superior de un elemento. + +> **Nota:** Los tres valores de la abreviatura pueden ser especificados en cualquier orden, y uno o dos de ellos pueden ser omitidos. +> +> Como con todas las propiedades abreviadas, border-top siempre establece los valores de todas las propiedades que sean posibles, aun si no están especificadas. Establece aquellas que no son especificadas a sus valores por defecto. Esto significa que: +> +> ```css +> border-top: none thick green; +> ``` +> +> es lo mismo que +> +> ```css +> border-top: thick green; +> ``` +> +> y el valor de {{Cssxref("border-top-style")}} establecido antes de `border-top` es ignorado. +> +> El no especificar la parte de border-style que está destinada a establecer el valor de {{Cssxref("border-top-style")}} significa que se tomará el valor por defecto, lo que significa que el {{Cssxref("border-top-style")}} será `none.` +> +> También hay que tomar en cuenta que en el siguiente bloque de código se ignorará la primer asignación de {{Cssxref("border-top-style")}} dado que al indicar `border-top` se establecerá implicitamente el valor de {{Cssxref("border-top-style")}} a `none` +> +> ```css +> border-top-style: dotted; +> border-top: thick green; +> ``` + +{{cssinfo}} + +## Sintaxis + +```css +border-top: 1px; +border-top: 2px dotted; +border-top: medium dashed green; +``` + +### Valores + +- `` + - : See {{Cssxref("border-top-width")}}. +- `` + - : See {{Cssxref("border-top-style")}}. +- `` + - : See {{Cssxref("border-top-color")}}. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplos + +```css +element { + border-top: 1px solid #000; +} +``` + +## Especificaciones + +| Especificación | Status | Comentarios | +| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}} | {{Spec2('CSS3 Backgrounds')}} | No hay cambios directos, aunque la modificación de valores para {{cssxref("border-top-color")}} sí aplican. | +| {{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}} | {{Spec2('CSS2.1')}} | No hay cambios significativos | +| {{SpecName('CSS1', '#border-top', 'border-top')}} | {{Spec2('CSS1')}} | Definición inicial | + +## Compatibilidad con navegadores + +{{Compat("css.properties.border-top")}} diff --git a/files/es/web/css/border-width/index.html b/files/es/web/css/border-width/index.html deleted file mode 100644 index d6de911dc187f3..00000000000000 --- a/files/es/web/css/border-width/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: border-width -slug: Web/CSS/border-width -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/border-width ---- -

Resumen

- -

La propiedad border-width define el ancho del borde.

- -
    -
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("medium", "medio") }}
  • -
  • Se aplica a: todos los elementos
  • -
  • {{ Cssxref("inheritance", "Herencia") }}: no
  • -
  • Porcentajes: N/A
  • -
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
  • -
  • {{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo del borde es ninguno ('none') o 'hidden'.
  • -
- -

Sintaxis

- -
 border-width: <border-width-value> {1,4} | {{ Cssxref("inherit", "heredado") }}
-
- -

Valores

- -
-
<border-width-value>
-
thin | medium | thick | {{ Cssxref("length", "largo") }}
-
thin
-
Un borde fino.
-
medium
-
Un borde mediano.
-
thick
-
Un borde grueso.
-
<length>
-
El grosor de un borde es un valor explícito por lo cual el ancho no puede ser nunca negativo.
- Nota: Un valor em también es reconocido y soportado.
-
- -

Propiedades relacionadas

- -
    -
  • {{ Cssxref("border-bottom-width") }}
  • -
  • {{ Cssxref("border-left-width") }}
  • -
  • {{ Cssxref("border-right-width") }}
  • -
  • {{ Cssxref("border-top-width") }}
  • -
- -

Ejemplos

- -

Ver el ejemplo en vivo

- -
element {
-    border-width: thin;
-    border-style: solid;
-    border-color: #000;
-}
-
- -

Especificaciones

- - - -

Compatibilidad

- - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorVersión mínima
Internet Explorer4.0
Firefox1.0
Netscape
Opera3.5
- -

Ver también

- -

{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}

diff --git a/files/es/web/css/border-width/index.md b/files/es/web/css/border-width/index.md new file mode 100644 index 00000000000000..3c14c4a297eed8 --- /dev/null +++ b/files/es/web/css/border-width/index.md @@ -0,0 +1,77 @@ +--- +title: border-width +slug: Web/CSS/border-width +tags: + - CSS + - CSS:Referencias + - Todas_las_Categorías +translation_of: Web/CSS/border-width +--- +### Resumen + +La propiedad **`border-width`** define el ancho del borde. + +- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("medium", "medio") }} +- Se aplica a: todos los elementos +- {{ Cssxref("inheritance", "Herencia") }}: no +- Porcentajes: N/A +- Medio: {{ Cssxref("Media:Visual", "visual") }} +- {{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo del borde es _ninguno_ ('none') o 'hidden'. + +### Sintaxis + +``` + border-width: {1,4} | {{ Cssxref("inherit", "heredado") }} +``` + +### Valores + +- **\** + - : `thin | medium | thick |`{{ Cssxref("length", "largo") }} +- thin + - : Un borde fino. +- medium + - : Un borde mediano. +- thick + - : Un borde grueso. +- \ + - : El grosor de un borde es un valor explícito por lo cual el ancho **no** puede ser nunca negativo. + Nota: Un valor `em` también es reconocido y soportado. + +### Propiedades relacionadas + +- {{ Cssxref("border-bottom-width") }} +- {{ Cssxref("border-left-width") }} +- {{ Cssxref("border-right-width") }} +- {{ Cssxref("border-top-width") }} + +### Ejemplos + +[V](/samples/cssref/border.html)er el ejemplo en vivo + +``` +element { + border-width: thin; + border-style: solid; + border-color: #000; +} +``` + +### Especificaciones + +- [CSS 1](http://www.w3.org/TR/CSS1#border-width) +- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#border-width-properties) +- [CSS 3](http://www.w3.org/TR/css3-background/#border-width) + +### Compatibilidad + +| Navegador | Versión mínima | +| ----------------- | -------------- | +| Internet Explorer | 4.0 | +| Firefox | 1.0 | +| Netscape | | +| Opera | 3.5 | + +### Ver también + +{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }} diff --git a/files/es/web/css/border/index.html b/files/es/web/css/border/index.html deleted file mode 100644 index 755a64571be8e8..00000000000000 --- a/files/es/web/css/border/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: border -slug: Web/CSS/border -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/border ---- -

{{ PreviousNext("Guía de referencia de CSS", "CSS:border-color") }}

- -

Propiedades Constitutivas

- -

Esta es una propiedad abreviada para las siguientes propiedades CSS:

- -
    -
  • border-color
  • -
  • border-style
  • -
  • border-width
  • -
- - - - - -

Resumen

- -

La propiedad border permite definir en una única regla todos los bordes de los elementos seleccionados. Se puede utilizar border para definir el o los valores siguientes: {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}.

- -
    -
  • {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales
  • -
  • Se aplica a: todos los elementos
  • -
  • {{ Cssxref("inheritance", "Herencia") }}: no
  • -
  • Porcentajes: N/A
  • -
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
  • -
  • {{ Cssxref("computed value", "Valor calculada") }}: ver propiedades individuales
  • -
- -

Sintaxis

- -
border: [border-width || border-style || border-color | inherit] ;
-
- -

Valores

- -
-
{{ Cssxref("border-width") }}.
-
{{ Cssxref("border-style") }}.
-
{{ Cssxref("border-color") }}.
-
- -

Ejemplos

- -

Ver ejemplo en vivo

- -
element {
-    border: 1px solid #000;
-}
-
- -

Notas importantes

- -

Mientras que las propiedades {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }} y {{ Cssxref("border-color") }} admiten hasta cuatro valores diferentes, ésta (border) no acepta más de uno por cada propiedad.

- -

Especificaciones

- - - -

Compatibilidad

- - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape4
Opera3.5
- -

Ver también

- -

{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}

- -

Descripción

- -

Como sucede con todas las propiedades abreviadas, cualquier subvalor omitdo será definido a su valor inicial. Cabe destacar que la asignación de un valor personalizado a border-image no puede ser realizada mediante el uso de border, en todo caso éste útltimo lo fijaría a su valor inicial, por ejemplo, a none.

- -

La propiedad abreviada border es especialmente útil cuando deseas que los cuatro bordes sean idénticos. Sin embargo, es posible hacerlos distintos utilzando las propiedades extensas (aquellas individuales que componen a la abreviada) border-width, border-style y border-color puesto que aceptan valores distintos por lado. Alternativamente, puedes modificar un borde a la vez con las propiedades físicas (p. ej. border-top) y lógicas (p. ej. border-block-start) del borde.

- -

Bordes vs. contornos

- -

Los bordes y los contornos son muy parecidos. Sin embargo, los contornos se distinguen de los bordes de la siguiente forma:

- -
    -
  • Los conronos nunca toman espacio, ya que se dibujan fuera del contenido de un elemento.
  • -
  • De conformidad con las especificaciones, si bien los contornos suelen ser rectangulares, no necesitan serlo.
  • -
diff --git a/files/es/web/css/border/index.md b/files/es/web/css/border/index.md new file mode 100644 index 00000000000000..fa3e21d6781c5d --- /dev/null +++ b/files/es/web/css/border/index.md @@ -0,0 +1,89 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS + - CSS:Referencias + - Todas_las_Categorías +translation_of: Web/CSS/border +--- +{{ PreviousNext("Guía de referencia de CSS", "CSS:border-color") }} + +### Propiedades Constitutivas + +Esta es una [propiedad abreviada](/es/docs/Web/CSS/Shorthand_properties) para las siguientes propiedades CSS: + +- border-color +- border-style +- border-width + +### Resumen + +La propiedad `border` permite definir en una única regla todos los bordes de los elementos seleccionados. Se puede utilizar `border` para definir el o los valores siguientes: {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}. + +- {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales +- Se aplica a: todos los elementos +- {{ Cssxref("inheritance", "Herencia") }}: no +- Porcentajes: N/A +- Medio: {{ Cssxref("Media:Visual", "visual") }} +- {{ Cssxref("computed value", "Valor calculada") }}: ver propiedades individuales + +### Sintaxis + +``` +border: [border-width || border-style || border-color | inherit] ; +``` + +### Valores + +{{ Cssxref("border-width") }}. + +{{ Cssxref("border-style") }}. + +{{ Cssxref("border-color") }}. + +### Ejemplos + +[Ver ejemplo en vivo](/samples/cssref/border.html) + +``` +element { + border: 1px solid #000; +} +``` + +### Notas importantes + +Mientras que las propiedades {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }} y {{ Cssxref("border-color") }} admiten hasta cuatro valores diferentes, ésta (_border_) no acepta más de uno por cada propiedad. + +### Especificaciones + +- [CSS 1](http://www.w3.org/TR/CSS1#border) +- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#box-border-area) +- [CSS 3](http://www.w3.org/TR/css3-background/#the-border-shorthands) + +### Compatibilidad + +| Navegador | Versión mínima | +| ----------------- | -------------- | +| Internet Explorer | 4 | +| Firefox | 1 | +| Netscape | 4 | +| Opera | 3.5 | + +### Ver también + +{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }} + +### Descripción + +Como sucede con todas las propiedades abreviadas, cualquier subvalor omitdo será definido a su valor inicial. Cabe destacar que la asignación de un valor personalizado a `border-image` no puede ser realizada mediante el uso de `border`, en todo caso éste útltimo lo fijaría a su valor inicial, por ejemplo, a `none`. + +La propiedad abreviada `border` es especialmente útil cuando deseas que los cuatro bordes sean idénticos. Sin embargo, es posible hacerlos distintos utilzando las propiedades extensas (aquellas individuales que componen a la abreviada) `border-width`, `border-style` y `border-color` puesto que aceptan valores distintos por lado. Alternativamente, puedes modificar un borde a la vez con las propiedades físicas (p. ej. `border-top)` y lógicas (p. ej. `border-block-start`) del borde. + +### Bordes vs. contornos + +Los bordes y los [contornos](/es/docs/Web/CSS/outline) son muy parecidos. Sin embargo, los contornos se distinguen de los bordes de la siguiente forma: + +- Los conronos nunca toman espacio, ya que se dibujan fuera del contenido de un elemento. +- De conformidad con las especificaciones, si bien los contornos suelen ser rectangulares, no necesitan serlo. diff --git a/files/es/web/css/bottom/index.html b/files/es/web/css/bottom/index.html deleted file mode 100644 index 2941fe78b96d0f..00000000000000 --- a/files/es/web/css/bottom/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: bottom -slug: Web/CSS/bottom -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/bottom ---- -

-

<< Volver -

-

Resumen

-

La propiedad bottom especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código). -

Para los elementos con una posición absoluta (aquellos que tienen la propiedad position: absolute o position: fixed), la propiedad bottom determina la distancia entre el borde inferior del elemento y el borde inferior de su bloque contenedor. -

Para los elementos con una posición relativa (los que tienen la propiedad position: relative), la propiedad bottom determina la distancia que el elemento se mueve hacia arriba desde su posición normal. Sin embargo, la propiedad {{ Cssxref("top") }} se antepone a la propiedad bottom, por lo que si top no es auto, el valor computado de bottom es el valor negativo del valor computado de top. -

-
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("auto", "automático") }} -
  • Se aplica a: {{ Cssxref("position", "la posición de los elementos") }} -
  • {{ Cssxref("inheritance", "Heredado") }}: no -
  • Porcentajes: se refieren a la altura del bloque contenedor. -
  • Medio: {{ Cssxref("Media:Visual", "visual") }} -
  • {{ Cssxref("computed value", "Valor calculada") }}: valor absoluto, porcentaje o auto. -
-

Sintaxis

-
   bottom: <length> | <percentage> | auto | inherit
-
-

Valores

-
<length>
Una longitud, usada como se describe en el resumen. Puede ser un valor negativo, cero o un valor positivo. -
<percentage>
Un porcentaje de la altura del bloque contenedor, usado como se describe en el resumen. -
auto
Para los elementos con posición absoluta, el elemento se posiciona en base a la propiedad {{ Cssxref("top") }} y por tanto se trata height: auto como una altura basada en el contenido del elemento. Para los elementos posicionados como relativos, especifica un desplazamiento desde su posición normal basada en la propiedad {{ Cssxref("top") }} o si, top es también auto, no se produce desplazamiento alguno. -
inherit
Recoge el valor que tenga el elemento padre (que puede no ser el bloque contenedor). Este valor calculado es tratado como si fuera un valor <length>, <percentage> o auto. -
-

Ejemplos

-
element {
-    position: absolute;
-    bottom: 20px;
-    height: 200px;
-    border: 1px solid #000;
-}
-
-

El siguiente ejemplo permite contrastar entre position:absolute y position:fixed. Cuando el texto ocupa un espacio más alto que la porción visible de la página (la porción visible en la ventana del navegador) los bloques posicionados con position:absolute se desplazarán junto con la página, mientras que los bloques posicionados con position:fixed, no lo harán. -

-
  • Atención: IE6 no soporta el código position:fixed. -
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
-   "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
-<title>Position at bottom, absolute or fixed</title>
-<style type="text/css">
-p {font-size:30px; line-height:3em;}
-div.pos {width:49%; text-align:center; border:2px solid #00f;}
-div#abs {position:absolute; bottom:0; left:0;}
-div#fix {position:fixed; bottom:0; right:0;}
-</style>
-</head>
-<body>
-  <p>Esto<br>es<br>un texto<br>alto,<br>alto,
-    <br>alto,<br>alto,<br>alto<br>de prueba.</p>
-  <div id="fix" class="pos"><p>Fixed</p></div>
-  <div id="abs" class="pos"><p>Absolute</p></div>
-</body>
-</html>
-

Notas

-

Para los elementos posicionados de forma absoluta cuyo bloque contenedor sea un elemento de tipo bloque, esta propiedad es un desplazamiento a partir del borde de relleno (padding) de dicho elemento. -

Para los elementos posicionados de forma absoluta, la propiedad bottom no tiene efectos visibles cuando los valores {{ Cssxref("top") }}, {{ Cssxref("height") }}, y {{ Cssxref("margin-top") }} no son auto (que es el valor por defecto para top y height). -

-

Especificaciones

- -

Compatibilidad entre navegadores

-This is as far back as the documentaion goes. -
Navegador Versión mínima
Internet Explorer 5
Firefox 1
Netscape 6
Opera 6
-

Ver también

-

{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("left") }} -


-

-
-

Categorías -

Interwiki Languages -

-
-{{ languages( { "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom", "en": "en/CSS/bottom" } ) }} diff --git a/files/es/web/css/bottom/index.md b/files/es/web/css/bottom/index.md new file mode 100644 index 00000000000000..46c0e95528eaff --- /dev/null +++ b/files/es/web/css/bottom/index.md @@ -0,0 +1,112 @@ +--- +title: bottom +slug: Web/CSS/bottom +tags: + - CSS + - CSS:Referencias + - Todas_las_Categorías +translation_of: Web/CSS/bottom +--- +<< [Volver](es/Gu%c3%ada_de_referencia_de_CSS) + +### Resumen + +La propiedad `bottom` especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código). + +Para los elementos con una posición absoluta (aquellos que tienen la propiedad `position: absolute` o `position: fixed`), la propiedad bottom determina la distancia entre el borde inferior del elemento y el borde inferior de su bloque contenedor. + +Para los elementos con una posición relativa (los que tienen la propiedad `position: relative`), la propiedad bottom determina la distancia que el elemento se mueve hacia arriba desde su posición normal. Sin embargo, la propiedad {{ Cssxref("top") }} se antepone a la propiedad bottom, por lo que si `top` no es `auto`, el valor computado de `bottom` es el valor negativo del valor computado de `top`. + +- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("auto", "automático") }} +- Se aplica a: {{ Cssxref("position", "la posición de los elementos") }} +- {{ Cssxref("inheritance", "Heredado") }}: no +- Porcentajes: se refieren a la altura del bloque contenedor. +- Medio: {{ Cssxref("Media:Visual", "visual") }} +- {{ Cssxref("computed value", "Valor calculada") }}: valor absoluto, porcentaje o auto. + +### Sintaxis + +``` + bottom: | | auto | inherit +``` + +### Valores + +- \ + - : Una longitud, usada como se describe en el [resumen](#Resumen). Puede ser un valor negativo, cero o un valor positivo. +- \ + - : Un porcentaje de la altura del bloque contenedor, usado como se describe en el [resumen](#Resumen). +- `auto` + - : Para los elementos con posición absoluta, el elemento se posiciona en base a la propiedad {{ Cssxref("top") }} y por tanto se trata `height: auto` como una altura basada en el contenido del elemento. Para los elementos posicionados como relativos, especifica un desplazamiento desde su posición normal basada en la propiedad {{ Cssxref("top") }} o si, `top` es también `auto`, no se produce desplazamiento alguno. +- `inherit` + - : Recoge el valor que tenga el elemento padre (que puede no ser el bloque contenedor). Este valor calculado es tratado como si fuera un valor \, \ o `auto`. + +### Ejemplos + +``` +element { + position: absolute; + bottom: 20px; + height: 200px; + border: 1px solid #000; +} +``` + +El siguiente ejemplo permite contrastar entre `position:absolute` y `position:fixed`. Cuando el texto ocupa un espacio más alto que la porción visible de la página (la porción visible en la ventana del navegador) los bloques posicionados con `position:absolute` se desplazarán junto con la página, mientras que los bloques posicionados con `position:fixed`, no lo harán. + +- **Atención**: IE6 **no** soporta el código `position:fixed`. + +``` + + + + +Position at bottom, absolute or fixed + + + +

Esto
es
un texto
alto,
alto, +
alto,
alto,
alto
de prueba.

+

Fixed

+

Absolute

+ + +``` + +### Notas + +Para los elementos posicionados de forma absoluta cuyo bloque contenedor sea un elemento de tipo bloque, esta propiedad es un desplazamiento a partir del borde de relleno (padding) de dicho elemento. + +Para los elementos posicionados de forma absoluta, la propiedad `bottom` no tiene efectos visibles cuando los valores {{ Cssxref("top") }}, {{ Cssxref("height") }}, y {{ Cssxref("margin-top") }} _no_ son `auto` (que es el valor por defecto para `top` y `height`). + +### Especificaciones + +- [CSS 2.1 (en)](http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom) +- [CSS 3 (en)](http://www.w3.org/Style/CSS/current-work#positioning) + +### Compatibilidad entre navegadores + +This is as far back as the documentaion goes. + +| Navegador | Versión mínima | +| ----------------- | -------------- | +| Internet Explorer | 5 | +| Firefox | 1 | +| Netscape | 6 | +| Opera | 6 | + +### Ver también + +{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("left") }} + +Categorías + +Interwiki Languages + +{{ languages( { "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom", "en": "en/CSS/bottom" } ) }} diff --git a/files/es/web/css/box-flex/index.html b/files/es/web/css/box-flex/index.html deleted file mode 100644 index 8897a726b281ba..00000000000000 --- a/files/es/web/css/box-flex/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: '-moz-box-flex' -slug: Web/CSS/box-flex -tags: - - CSS - - No estándar(2) - - Referencia CSS -translation_of: Web/CSS/box-flex -original_slug: Web/CSS/-moz-box-flex ---- -
{{CSSRef}}{{warning("Esta propiedad es para controlar parte del modelo de caja XUL. No coincide ni con el antiguo borrador del módulo CSS para el diseño de caja flexibles 'box-flex' (que se basa en esta propiedad) ni con el comportamiento de '-webkit-box-flex' (que se basa en esos borradores).")}}
- -

Ver Flexbox para más información acerca de qué usar en vez de esta propiedad.

- -

Resumen

- -

Las propiedades CSS-moz-box-flex y -webkit-box-flex especifican cómo una -moz-box o -webkit-box crecen para rellenar la caja que los contienen, en la dirección del diseño o esquema (layout) de la caja contenedora.Ver Flexbox para más información sobre las propiedades de los elementos flexbox.

- -

{{cssinfo}}

- -

Síntaxis

- -
/* Valores <number> */
--moz-box-flex: 0;
--moz-box-flex: 3;
--webkit-box-flex: 0;
--webkit-box-flex: 3;
-
-/* Valores gloables */
--moz-box-flex: inherit;
--moz-box-flex: initial;
--moz-box-flex: unset;
-
- -

Valores

- -
-
0
-
La caja no crece.
-
> 0
-
La caja crece para rellenar un proporción del espacio disponible..
-
- -

Síntaxis Formal

- -{{csssyntax}} - -

Ejemplos

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>Ejemplo de -moz-box-flex</title>
-    <style>
-      div.example {
-        display: -moz-box;
-        display: -webkit-box;
-        border: 1px solid black;
-        width: 100%;
-      }
-      div.example > p:nth-child(1) {
-        -moz-box-flex: 1;       /* Mozilla */
-        -webkit-box-flex: 1;    /* WebKit */
-        border: 1px solid black;
-      }
-      div.example > p:nth-child(2) {
-        -moz-box-flex: 0;       /* Mozilla */
-        -webkit-box-flex: 0;    /* WebKit */
-        border: 1px solid black;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="example">
-      <p>Creceré para rellenar un espacio extra</p>
-      <p>No creceré</p>
-    </div>
-  </body>
-</html>
-
- -

Notas

- -

La caja contenedora asigna el espacio extra disponible de manera proporcional al valor flex de cada uno de los elementos que contiene.

- -

Los elementos dentro del contenedor que tienen 0 flex no crecen.

- -

Si śolo uno de los elementos tiene un valor distinto de cero ocupará todo el espacio disponible.

- -

Los elementos que tienen el mismo valor para flex crecen en la misma cantidad en términos absolutos.

- -

Si el valor flex se ha establecido usando el atributo flex del elemento, entonces el estilo es ignorado.

- -

Para hacer que los elementos XUL dentro de una caja contenedora tengan el mismo tamaño, fijaremos el atributo equalsize de la caja contenedora a always. Este atributo no tiene correspondencia con ninguna propiedad CSS.

- -

Un truco para hacer que todos los elementos dentro una caja contenedora tengan el mismo tamaño es darles un tamaño fijo,(por ejemplo height: 0), y el mismo valor box-flex mayor que cero a todos (por ejemplo -moz-box-flex: 1).

- -

Especificaciones

- -

Esta propiedad es una extensión no estándar. Había una old draft of the CSS3 Flexbox specification que definía una propiedadbox-flex , pero ese borrador nunca ha sido sustituido.

- -

Compatibilidad con los distintos navegadores

- -{{Compat("css.properties.box-flex")}} - -

Ver además

- -

{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}

diff --git a/files/es/web/css/box-flex/index.md b/files/es/web/css/box-flex/index.md new file mode 100644 index 00000000000000..1d0b46043c5797 --- /dev/null +++ b/files/es/web/css/box-flex/index.md @@ -0,0 +1,108 @@ +--- +title: '-moz-box-flex' +slug: Web/CSS/box-flex +tags: + - CSS + - No estándar(2) + - Referencia CSS +translation_of: Web/CSS/box-flex +original_slug: Web/CSS/-moz-box-flex +--- +{{CSSRef}}{{warning("Esta propiedad es para controlar parte del modelo de caja XUL. No coincide ni con el antiguo borrador del módulo CSS para el diseño de caja flexibles 'box-flex' (que se basa en esta propiedad) ni con el comportamiento de '-webkit-box-flex' (que se basa en esos borradores).")}} + +Ver [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) para más información acerca de qué usar en vez de esta propiedad. + +## Resumen + +Las propiedades [CSS](/es/docs/Web/CSS)`-moz-box-flex` y `-webkit-box-flex` especifican cómo una `-moz-box` o `-webkit-box` crecen para rellenar la caja que los contienen, en la dirección del diseño o esquema (layout) de la caja contenedora.Ver [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) para más información sobre las propiedades de los elementos flexbox. + +{{cssinfo}} + +## Síntaxis + +```css +/* Valores */ +-moz-box-flex: 0; +-moz-box-flex: 3; +-webkit-box-flex: 0; +-webkit-box-flex: 3; + +/* Valores gloables */ +-moz-box-flex: inherit; +-moz-box-flex: initial; +-moz-box-flex: unset; +``` + +### Valores + +- 0 + - : La caja no crece. +- \> 0 + - : La caja crece para rellenar un proporción del espacio disponible.. + +### Síntaxis Formal + +{{csssyntax}} + +## Ejemplos + +```html + + + + Ejemplo de -moz-box-flex + + + +
+

Creceré para rellenar un espacio extra

+

No creceré

+
+ + +``` + +## Notas + +La caja contenedora asigna el espacio extra disponible de manera proporcional al valor flex de cada uno de los elementos que contiene. + +Los elementos dentro del contenedor que tienen 0 flex no crecen. + +Si śolo uno de los elementos tiene un valor distinto de cero ocupará todo el espacio disponible. + +Los elementos que tienen el mismo valor para flex crecen en la misma cantidad en términos absolutos. + +Si el valor flex se ha establecido usando el atributo flex del elemento, entonces el estilo es ignorado. + +Para hacer que los elementos XUL dentro de una caja contenedora tengan el mismo tamaño, fijaremos el atributo `equalsize`de la caja contenedora a `always`. Este atributo no tiene correspondencia con ninguna propiedad CSS. + +Un truco para hacer que todos los elementos dentro una caja contenedora tengan el mismo tamaño es darles un tamaño fijo,(por ejemplo `height: 0`), y el mismo valor box-flex mayor que cero a todos (por ejemplo `-moz-box-flex: 1`). + +## Especificaciones + +Esta propiedad es una extensión no estándar. Había una [old draft of the CSS3 Flexbox specification](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/) que definía una propiedad`box-flex` , pero ese borrador nunca ha sido sustituido. + +## Compatibilidad con los distintos navegadores + +{{Compat("css.properties.box-flex")}} + +## Ver además + +{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}} diff --git a/files/es/web/css/box-ordinal-group/index.html b/files/es/web/css/box-ordinal-group/index.html deleted file mode 100644 index a5c8faafdcb6ce..00000000000000 --- a/files/es/web/css/box-ordinal-group/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: '-moz-box-ordinal-group' -slug: Web/CSS/box-ordinal-group -tags: - - CSS - - 'CSS: Extensiones Mozilla' - - Caja Flexible - - No estandar - - Referencia CSS -translation_of: Web/CSS/box-ordinal-group -translation_of_original: Web/CSS/-moz-box-ordinal-group -original_slug: Web/CSS/-moz-box-ordinal-group ---- -

{{CSSRef}}
- {{warning("Esta propiedad pertenece al borrador original del diseño o esquema de la caja CSS flexible, y ha sido reemplazada en borradores posteriores.")}}

- -

Ver Flexbox para más información sobre qué usar en sustitución de esta propiedad.

- -

Resumen

- -

Indica el grupo ordinal al que pertenece el elemento. Aquellos elementos con un grupo ordinal menor son mostrados antes que aquellos con un grupo ordinal mayor.

- -

Valores

- -

Los valores deben ser enteros positivos (mayores de cero). El valor por defecto para esta propiedad es 1.

- -

Ejemplos

- -
<style type="text/css">
-  #Flexbox {
-    display: -ms-box;
-    display: -moz-box;
-    display: -webkit-box;
-  }
-
-  #text1 {
-    background: red;
-    -ms-box-ordinal-group: 4;
-    -moz-box-ordinal-group: 4;
-    -webkit-box-ordinal-group: 4;
-  }
-
-  #text2 {
-    background: green;
-    -ms-box-ordinal-group: 3;
-    -moz-box-ordinal-group: 3;
-    -webkit-box-ordinal-group: 3;
-  }
-
-  #text3 {
-    background: blue;
-    -ms-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -webkit-box-ordinal-group: 2;
-  }
-
-  #text4 {
-    background: orange;
-  }
-</style>
-
-<div id="Flexbox">
-  <div id="text1">text 1</div>
-  <div id="text2">text 2</div>
-  <div id="text3">text 3</div>
-  <div id="text4">text 4</div>
-</div>
-
diff --git a/files/es/web/css/box-ordinal-group/index.md b/files/es/web/css/box-ordinal-group/index.md new file mode 100644 index 00000000000000..f0be6f28fdb27d --- /dev/null +++ b/files/es/web/css/box-ordinal-group/index.md @@ -0,0 +1,69 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/box-ordinal-group +tags: + - CSS + - 'CSS: Extensiones Mozilla' + - Caja Flexible + - No estandar + - Referencia CSS +translation_of: Web/CSS/box-ordinal-group +translation_of_original: Web/CSS/-moz-box-ordinal-group +original_slug: Web/CSS/-moz-box-ordinal-group +--- +{{CSSRef}} +{{warning("Esta propiedad pertenece al borrador original del diseño o esquema de la caja CSS flexible, y ha sido reemplazada en borradores posteriores.")}} + +Ver [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) para más información sobre qué usar en sustitución de esta propiedad. + +## Resumen + +Indica el grupo ordinal al que pertenece el elemento. Aquellos elementos con un grupo ordinal menor son mostrados antes que aquellos con un grupo ordinal mayor. + +## Valores + +Los valores deben ser enteros positivos (mayores de cero). El valor por defecto para esta propiedad es 1. + +## Ejemplos + +```html + + +
+
text 1
+
text 2
+
text 3
+
text 4
+
+``` diff --git a/files/es/web/css/box-pack/index.html b/files/es/web/css/box-pack/index.html deleted file mode 100644 index a6312cf536a7ff..00000000000000 --- a/files/es/web/css/box-pack/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: '-moz-box-pack' -slug: Web/CSS/box-pack -tags: - - CSS - - Diseño - - No estándar(2) - - Propiedad CSS - - Referencia CSS -translation_of: Web/CSS/box-pack -original_slug: Web/CSS/-moz-box-pack ---- -
{{CSSRef}}{{warning("Esta propiedad es parte del módulo estándar original para el diseño de las cajas CSS Flexible que fue sustituida por un nuevo estándar.")}}
- -

Ver Flexbox para más información.

- -

Resumen

- -

Las propiedades CSS -moz-box-pack y -webkit-box-pack especifican cómo una -moz-box o un -webkit-box empaquetan o disponen su contenido en la dirección de su diseño o esquema. El efecto de esto sólo es visible si hay expacio extra en la caja. Ver Flexbox para más información sobre las propiedades de los elementos flexbox.

- -

La dirección del esquema o diseño (layout) depende de la orientación del elemento: vertical o horizontal.

- -

{{cssinfo}}

- -

Síntaxis

- -
/* Valores de palabras clave */
--moz-box-pack: start;
--moz-box-pack: center;
--moz-box-pack: end;
--moz-box-pack: justify;
-
-/* Valores gloables */
--moz-box-pack: inherit;
--moz-box-pack: initial;
--moz-box-pack: unset;
-
- -

Valores

- -
-
start
-
La caja empaqueta o muestra el contenido al principio dejando el espacio libre que hubiera al final.
-
center
-
La caja empaqueta o muestra el contenido en el centro dejando el espacio libre que hubiera dividido de igual manera entre el inicio y el final.
-
end
-
La caja empaqueta o muestra el contenido al final dejando el espacio libre que hubiera al principio.
-
justify
-
El espacio se divide de igual manera entre los diferentes hijos sin dejar nada del espacio libre ni antes del primer hijo ni después del último. Si sólo hay un hijo el comportamiento es como si fuera start.
-
- -

Síntaxis Formal

- -{{csssyntax}} - -

Ejemplos

- -
div.example {
-  border-style: solid;
-
-  display: -moz-box; /* Mozilla */
-  display: -webkit-box; /* WebKit */
-
-  /* Hace esta caja más alta que los hijos para que haya hueco suficiente
-     para el empaquetado en la caja */
-  height: 300px;
-  /* Hace la caja lo suficientemente ancha para mostrar los contenidos
-     centrados horizontalmente */
-  width: 300px;
-
-  /* Los hijos deberían estar orientados verticalmente */
-  -moz-box-orient: vertical; /* Mozilla */
-  -webkit-box-orient: vertical; /* WebKit */
-
-  /* Alínea los hijos con el centro horizontal de la caja */
-  -moz-box-align: center; /* Mozilla */
-  -webkit-box-align: center; /* WebKit */
-
-  /* Dispone a los hijos en el fondo de la caja */
-  -moz-box-pack: end;             /* Mozilla */
-  -webkit-box-pack: end;          /* WebKit */
-}
-
-div.example p {
-  /* hace los hijos más estrechos que el padra para que
-     haya espacio suficiente para el box-align */
-  width: 200px;
-}
-
- -
<div class="example">
-  <p>Será el segundo empezando desde el fondo de div.example y centrado horizontalmente.</p>
-  <p>Estaré en el fondo de div.example y centrado horizontalmente.</p>
-</div>
-
- -

{{EmbedLiveSample('Examples', 310, 310)}}

- -

Notas

- -

EL borde de la caja que será tomado como start para el empqeutado dependerá de la orientación y dirección de la caja:

- - - - - - - - - - - - - - - - - - - -
NormalReverse
Horizontalleftright
Verticaltopbottom
- -

El borde opuesto a start será el considerado como end.

- -

Si el empaquetado se establece usando el atributo pack del elemento el estilo es ignorado.

- -

Especificaciones

- -

Esta propiedad es no estándar aunque una propiedad similar apareción en draft of CSS3 Flexbox, que a su vez ha sido sustituida para nuevas versiones de la especificación.

- -

Compatibilidad con los distintos navegadores

- -{{Compat("css.properties.box-pack")}} - -

Ver además

- -

{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}

diff --git a/files/es/web/css/box-pack/index.md b/files/es/web/css/box-pack/index.md new file mode 100644 index 00000000000000..89af631f5eee45 --- /dev/null +++ b/files/es/web/css/box-pack/index.md @@ -0,0 +1,123 @@ +--- +title: '-moz-box-pack' +slug: Web/CSS/box-pack +tags: + - CSS + - Diseño + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/box-pack +original_slug: Web/CSS/-moz-box-pack +--- +{{CSSRef}}{{warning("Esta propiedad es parte del módulo estándar original para el diseño de las cajas CSS Flexible que fue sustituida por un nuevo estándar.")}} + +Ver [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) para más información. + +## Resumen + +Las propiedades [CSS](/es/docs/Web/CSS)`-moz-box-pack` y `-webkit-box-pack` especifican cómo una `-moz-box` o un `-webkit-box` empaquetan o disponen su contenido en la dirección de su diseño o esquema. El efecto de esto sólo es visible si hay expacio extra en la caja. Ver [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Flexible_box_properties) para más información sobre las propiedades de los elementos flexbox. + +La dirección del esquema o diseño (layout) depende de la orientación del elemento: vertical o horizontal. + +{{cssinfo}} + +## Síntaxis + +```css +/* Valores de palabras clave */ +-moz-box-pack: start; +-moz-box-pack: center; +-moz-box-pack: end; +-moz-box-pack: justify; + +/* Valores gloables */ +-moz-box-pack: inherit; +-moz-box-pack: initial; +-moz-box-pack: unset; +``` + +### Valores + +- `start` + - : La caja empaqueta o muestra el contenido al principio dejando el espacio libre que hubiera al final. +- `center` + - : La caja empaqueta o muestra el contenido en el centro dejando el espacio libre que hubiera dividido de igual manera entre el inicio y el final. +- `end` + - : La caja empaqueta o muestra el contenido al final dejando el espacio libre que hubiera al principio. +- `justify` + - : El espacio se divide de igual manera entre los diferentes hijos sin dejar nada del espacio libre ni antes del primer hijo ni después del último. Si sólo hay un hijo el comportamiento es como si fuera `start`. + +### Síntaxis Formal + +{{csssyntax}} + +## Ejemplos + +```css +div.example { + border-style: solid; + + display: -moz-box; /* Mozilla */ + display: -webkit-box; /* WebKit */ + + /* Hace esta caja más alta que los hijos para que haya hueco suficiente + para el empaquetado en la caja */ + height: 300px; + /* Hace la caja lo suficientemente ancha para mostrar los contenidos + centrados horizontalmente */ + width: 300px; + + /* Los hijos deberían estar orientados verticalmente */ + -moz-box-orient: vertical; /* Mozilla */ + -webkit-box-orient: vertical; /* WebKit */ + + /* Alínea los hijos con el centro horizontal de la caja */ + -moz-box-align: center; /* Mozilla */ + -webkit-box-align: center; /* WebKit */ + + /* Dispone a los hijos en el fondo de la caja */ + -moz-box-pack: end; /* Mozilla */ + -webkit-box-pack: end; /* WebKit */ +} + +div.example p { + /* hace los hijos más estrechos que el padra para que + haya espacio suficiente para el box-align */ + width: 200px; +} +``` + +```html +
+

Será el segundo empezando desde el fondo de div.example y centrado horizontalmente.

+

Estaré en el fondo de div.example y centrado horizontalmente.

+
+``` + +{{EmbedLiveSample('Examples', 310, 310)}} + +## Notas + +EL borde de la caja que será tomado como _start_ para el empqeutado dependerá de la orientación y dirección de la caja: + +| | **Normal** | **Reverse** | +| -------------- | ---------- | ----------- | +| **Horizontal** | left | right | +| **Vertical** | top | bottom | + +El borde opuesto a start será el considerado como _end_. + +Si el empaquetado se establece usando el atributo `pack` del elemento el estilo es ignorado. + +## Especificaciones + +Esta propiedad es no estándar aunque una propiedad similar apareción en [draft of CSS3 Flexbox](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/), que a su vez ha sido sustituida para nuevas versiones de la especificación. + +## Compatibilidad con los distintos navegadores + +{{Compat("css.properties.box-pack")}} + +## Ver además + +{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}} diff --git a/files/es/web/css/box-shadow/index.html b/files/es/web/css/box-shadow/index.html deleted file mode 100644 index 8b9921ffcff5be..00000000000000 --- a/files/es/web/css/box-shadow/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: box-shadow -slug: Web/CSS/box-shadow -tags: - - CSS - - CSS Background - - Estilos - - Reference - - Referencia - - Sombras - - box-shadow -translation_of: Web/CSS/box-shadow ---- -

{{ CSSRef() }}

- -

La propiedad CSS box-shadow añade efectos de sombra alrededor del marco de un elemento. Se pueden definir múltiples efectos separados por comas. La caja de la sombra se describe por los desplazamientos en X e Y, los radios de desenfoque y dispersión, y el color relativos al elemento.

- - - -

La propiedad box-shadow permite proyectar una sombra difuminada desde el marco de casi cualquier elemento. Si {{cssxref("border-radius")}} es especificado en un elemento con la propiedad box-shadow, la sombra adopta la misma curva en las esquinas. El z-orden de múltiples cajas de sombra es la misma que de múltiples sombras de texto (la primera sombra definida se ubica hasta arriba).

- -

Generador de Box-shadow es una herramienta interactiva que permite generar una box-shadow.

- -

Sintaxis

- -
/* Keyword values */
-box-shadow: none;
-
-/* offset-x | offset-y | color */
-box-shadow: 60px -16px teal;
-
-/* offset-x | offset-y | blur-radius | color */
-box-shadow: 10px 5px 5px black;
-
-/* offset-x | offset-y | blur-radius | spread-radius | color */
-box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
-
-/* inset | offset-x | offset-y | color */
-box-shadow: inset 5em 1em gold;
-
-/* Any number of shadows, separated by commas */
-box-shadow: 3px 3px red, -1em 0 0.4em olive;
-
-/* Global keywords */
-box-shadow: inherit;
-box-shadow: initial;
-box-shadow: unset;
- -

Especifica una sola box-shadow utilizando:

- -
    -
  • Dos, tres, o cuatro valores <length>. - - -
  • -
  • Opcionalmente, la palabra clave inset.
  • -
  • Opcionalmente, el valor <color>.
  • -
- -

Valores

- -
-
inset
-
Si no se especifica (por defecto), la sombra asume una sombra difuminada (como si la caja fuera levantada por encima del contenido).
- La presencia de la palabra clave inset cambia la sombra a una dentro del marco (como si el contenido estuviera deprimido dentro de la caja). Inset shadows dibuja dentro del borde (incluso de los transparentes), por encima del fondo, pero por debajo del contenido.
-
<offset-x> <offset-y>
-
Estos son dos valores {{cssxref("<length>")}} para definir el desplazamiento de la sombra. <offset-x> especifica la distancia horizontal. Los valores negativos colocan las combra a la izquierda de el elemento. <offset-y> Especifica la distancia vertical. Los valores negativos colocan la sombra por encima del elemento. Ver{{cssxref("<length>")}} para posibles unidades.
- Si ambos valores son 0, la sombra es ubicada detras del elemento (y puede generar un efecto de difuminación <blur-radius> y/o <spread-radius> está establecido).
-
<blur-radius>
-
Este es el tercer valor {{cssxref("<length>")}}. Cuando mayor sea este valor, mayor sera la difuminación, por consecuencia la sombra se vuelve más grande y ligera. Los valores negativos no son permitidos. Si esto no es especificado, su valor será 0 (el borde de la sombra es fuerte). La especificación no incluye un algoritmo exacto para como el radio de desenfoque debe ser calculado, sin embargo, explica lo siguiente:
-
- -
-

...para una borde largo y recto de la sombra, se debería crear una transición de color con la longitud de la distancia de desenfoque que sea perpendicular a y centrada al borde de la sombra, y en estos rangos desde el color de la sombra total en el punto final del radio dentro de la sombra hasta totalmente transparente en el punto final fuera de ella.

-
- -
-
<spread-radius>
-
Este es el cuarto valor {{cssxref("<length>")}} . Los valores positivos harán que la sombra se expanda y crezca más, los valores negativos harán que la sombra se reduzca de tamaño. Si no se especifica, este será 0 (la sombra será del mismo tamaño del elemento).
-
<color>
-
Ver los valores de {{cssxref("<color>")}} para las posibles palabras claves y anotaciones.
- Si no se especifica, el color depende del navegador - usualmente el valor de la propiedad {{ cssxref("color") }}, pero notar que en Safari, actualmente pinta una sombra transparente en este caso que sea omitido.
-
- -

Ejemplos

- -

En nuestro ejemplo, se incluyen tres sombras: una sombra interior, una sombra difuminada normal, y una sombra de 2px que crea un efecto de borde (podría haberse usado un {{cssxref('outline')}} en lugar de una tercera sombra).

- -

HTML

- -
<blockquote><q>You may shoot me with your words,<br/>
-You may cut me with your eyes,<br/>
-You may kill me with your hatefulness,<br/>
-But still, like air, I'll rise.</q>
-<p>&mdash; Maya Angelou</p>
-</blockquote>
-
- -

Podrías dispararme con tus palabras,
- podrías cortarme con tus ojos,
- podrías matarme con tu odio,
- y aún, como el aire, levantarme.

- -Traduccion-

- -

CSS

- -
blockquote {
-  padding: 20px;
-  box-shadow:
-       inset 0 -3em 3em rgba(0,0,0,0.1),
-             0 0  0 2px rgb(255,255,255),
-             0.3em 0.3em 1em rgba(0,0,0,0.3);
-}
- -

{{EmbedLiveSample('Examples1', '300', '300')}}

- -
-

HTML

- -
<div><p>Hello World</p></div>
-
- -

CSS

- -
p {
-  box-shadow: 0 0 0 2em #F4AAB9,
-              0 0 0 4em #66CCFF;
-  margin: 4em;
-  padding:1em;
-}
- -

{{EmbedLiveSample('Examples2', '300', '300')}}

- -

Cuando el x-offset, y-offset, y blur son todos cero, la sombra sera un contorno unifrome. Las sombras son dibujadas desde el fondo hasta el frente, así que la primera sombra se encuentra encima de sombras posteriores. Cuando el border-radius es 0, como por defecto, las esquinas de la sombra serán, bien, esquinas. De haberse definido un border-radius de cualquier otro valor, las esquinas habrían sido redondeadas.

- -

Se ha añadido un margen del tamaño de la sombra más ancha para asegurarse de que la sombra no se superponga a los elementos adyacentes o vaya más allá del borde de la caja de contención. Una sombra de caja no afeta a las dimensiones del modelo de caja.

- - - -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
- -

cssinfo}}

- -

Compatibilidad de los navegadores

- - - -

{{Compat("css.properties.box-shadow")}}

- -

Ver también

- -
    -
  • El tipo de dato {{cssxref("<color>")}}
  • -
  • Otras propiedades relacionadas al color: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}}
  • -
  • {{cssxref("text-shadow")}}
  • -
  • Aplicando color a los elementos HTML utilizando CSS
  • -
diff --git a/files/es/web/css/box-shadow/index.md b/files/es/web/css/box-shadow/index.md new file mode 100644 index 00000000000000..b612e2c8292262 --- /dev/null +++ b/files/es/web/css/box-shadow/index.md @@ -0,0 +1,148 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - CSS + - CSS Background + - Estilos + - Reference + - Referencia + - Sombras + - box-shadow +translation_of: Web/CSS/box-shadow +--- +{{ CSSRef() }} + +La propiedad CSS `box-shadow` añade efectos de sombra alrededor del marco de un elemento. Se pueden definir múltiples efectos separados por comas. La caja de la sombra se describe por los desplazamientos en X e Y, los radios de desenfoque y dispersión, y el color relativos al elemento. + +La propiedad `box-shadow` permite proyectar una sombra difuminada desde el marco de casi cualquier elemento. Si {{cssxref("border-radius")}} es especificado en un elemento con la propiedad box-shadow, la sombra adopta la misma curva en las esquinas. El z-orden de múltiples cajas de sombra es la misma que de múltiples [sombras de texto](https://developer.mozilla.org/en-US/CSS/text-shadow) (la primera sombra definida se ubica hasta arriba). + +[Generador de Box-shadow](/es/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator) es una herramienta interactiva que permite generar una `box-shadow`. + +## Sintaxis + +```css +/* Keyword values */ +box-shadow: none; + +/* offset-x | offset-y | color */ +box-shadow: 60px -16px teal; + +/* offset-x | offset-y | blur-radius | color */ +box-shadow: 10px 5px 5px black; + +/* offset-x | offset-y | blur-radius | spread-radius | color */ +box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); + +/* inset | offset-x | offset-y | color */ +box-shadow: inset 5em 1em gold; + +/* Any number of shadows, separated by commas */ +box-shadow: 3px 3px red, -1em 0 0.4em olive; + +/* Global keywords */ +box-shadow: inherit; +box-shadow: initial; +box-shadow: unset; +``` + +Especifica una sola box-shadow utilizando: + +- Dos, tres, o cuatro valores [``](https://developer.mozilla.org/en-US/docs/Web/CSS/length). + + - Si solo dos valores son definidos, son interpretados como valores [``](https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#offset-x). + - Si un tercer valor es dado, es interpretado como un [``](https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#blur-radius). + - Si un cuarto valor es dado, es interpretado como un [``](https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#spread-radius). + +- Opcionalmente, la palabra clave [`inset`](https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#inset). +- Opcionalmente, el valor [``](https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#color). + +### Valores + +- `inset` + - : Si no se especifica (por defecto), la sombra asume una sombra difuminada (como si la caja fuera levantada por encima del contenido). + La presencia de la palabra clave `inset` cambia la sombra a una dentro del marco (como si el contenido estuviera deprimido dentro de la caja). Inset shadows dibuja dentro del borde (incluso de los transparentes), por encima del fondo, pero por debajo del contenido. +- ` ` + - : Estos son dos valores {{cssxref("<length>")}} para definir el desplazamiento de la sombra. `` especifica la distancia horizontal. Los valores negativos colocan las combra a la izquierda de el elemento. `` Especifica la distancia vertical. Los valores negativos colocan la sombra por encima del elemento. Ver{{cssxref("<length>")}} para posibles unidades. + Si ambos valores son `0`, la sombra es ubicada detras del elemento (y puede generar un efecto de difuminación `` y/o `` está establecido). +- `` + - : Este es el tercer valor {{cssxref("<length>")}}. Cuando mayor sea este valor, mayor sera la difuminación, por consecuencia la sombra se vuelve más grande y ligera. Los valores negativos no son permitidos. Si esto no es especificado, su valor será `0` (el borde de la sombra es fuerte). La especificación no incluye un algoritmo exacto para como el radio de desenfoque debe ser calculado, sin embargo, explica lo siguiente: + +> ...para una borde largo y recto de la sombra, se debería crear una transición de color con la longitud de la distancia de desenfoque que sea perpendicular a y centrada al borde de la sombra, y en estos rangos desde el color de la sombra total en el punto final del radio dentro de la sombra hasta totalmente transparente en el punto final fuera de ella. + +- `` + - : Este es el cuarto valor {{cssxref("<length>")}} . Los valores positivos harán que la sombra se expanda y crezca más, los valores negativos harán que la sombra se reduzca de tamaño. Si no se especifica, este será `0` (la sombra será del mismo tamaño del elemento). +- `` + - : Ver los valores de {{cssxref("<color>")}} para las posibles palabras claves y anotaciones. + Si no se especifica, el color depende del navegador - usualmente el valor de la propiedad {{ cssxref("color") }}, pero notar que en Safari, actualmente pinta una sombra transparente en este caso que sea omitido. + +## Ejemplos + +En nuestro ejemplo, se incluyen tres sombras: una sombra interior, una sombra difuminada normal, y una sombra de 2px que crea un efecto de borde (podría haberse usado un {{cssxref('outline')}} en lugar de una tercera sombra). + +```html +
You may shoot me with your words,
+You may cut me with your eyes,
+You may kill me with your hatefulness,
+But still, like air, I'll rise.
+

— Maya Angelou

+
+``` + +_Podrías dispararme con tus palabras, +podrías cortarme con tus ojos, +podrías matarme con tu odio, +y aún, como el aire, levantarme._ +\-Traduccion- + +```css +blockquote { + padding: 20px; + box-shadow: + inset 0 -3em 3em rgba(0,0,0,0.1), + 0 0 0 2px rgb(255,255,255), + 0.3em 0.3em 1em rgba(0,0,0,0.3); +} +``` + +{{EmbedLiveSample("", '300', '300')}} + +### Contorno uniforme + +```html +

Hello World

+``` + +```css +p { + box-shadow: 0 0 0 2em #F4AAB9, + 0 0 0 4em #66CCFF; + margin: 4em; + padding:1em; +} +``` + +{{EmbedLiveSample("", '300', '300')}} + +Cuando el `x-offset`, `y-offset`, y `blur` son todos cero, la sombra sera un contorno unifrome. Las sombras son dibujadas desde el fondo hasta el frente, así que la primera sombra se encuentra encima de sombras posteriores. Cuando el `border-radius` es 0, como por defecto, las esquinas de la sombra serán, bien, esquinas. De haberse definido un `border-radius` de cualquier otro valor, las esquinas habrían sido redondeadas. + +Se ha añadido un margen del tamaño de la sombra más ancha para asegurarse de que la sombra no se superponga a los elementos adyacentes o vaya más allá del borde de la caja de contención. Una sombra de caja no afeta a las dimensiones del [modelo de caja](/es/docs/Web/CSS/CSS_Box_Model). + +## Especificaciones + +| Especificación | Estado | Comentario | +| -------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ | +| {{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}} | {{Spec2('CSS3 Backgrounds')}} | Definición inicial | + +cssinfo}} + +## Compatibilidad de los navegadores + +{{Compat("css.properties.box-shadow")}} + +## Ver también + +- El tipo de dato {{cssxref("<color>")}} +- Otras propiedades relacionadas al color: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}} +- {{cssxref("text-shadow")}} +- [Aplicando color a los elementos HTML utilizando CSS](/es/docs/Web/HTML/Applying_color) diff --git a/files/es/web/css/box-sizing/index.html b/files/es/web/css/box-sizing/index.html deleted file mode 100644 index 64153dd00c45a0..00000000000000 --- a/files/es/web/css/box-sizing/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: box-sizing -slug: Web/CSS/box-sizing -tags: - - CSS - - Layout - - Propiedades CSS - - Web -translation_of: Web/CSS/box-sizing ---- -
{{CSSRef}}
- -

La propiedad CSS box-sizing como el {{glossary("user agent")}} debe calcular el ancho y alto total de un elemento.

- -
{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
- - - -

Por defecto en el modelo de caja de CSS, el ancho y alto asignado a un elemento es aplicado solo al contenido de la caja del elemento. Si el elemento tiene algun borde (border) o relleno (padding), este es entonces añadido al ancho y alto a alcanzar el tamaño de la caja que es desplegada en pantalla. Esto significa que cuando se definen el ancho y alto, se tiene que ajustar el valor definido para permitir cualquier borde o relleno que se pueda añadir.

- -

La propiedad box-sizing puede ser usada para ajustar el siguiente comportamiento:

- -
    -
  • content-box es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno ser añadirá al ancho final desplegado.
  • -
  • border-box le dice al navegador tomar en cuenta para cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluíran cualquier borde o relleno que se añadan, y la caja de contenido se encogerá para absorber ese ancho extra. Esto típicamente hace mucho más fácil dimensionar elementos.
  • -
- -

Sintaxis

- -

La propiedad box-sizing es especificada como una sola palabra clave elegida de la lista de valores que aparece abajo.

- -

Valores

- -
-
content-box
-
Este es el valor inicial y por defecto especificado por el estándar CSS. Las propiedades {{Cssxref("width")}} and {{Cssxref("height")}} no incluyen el borde, relleno o margen. Por ejemplo, .box {width: 350px; border: 10px solid black;} despliega una caja con un ancho de 370 pixeles.
-
Aquí, las dimensiones de un elemento son calculados como: ancho = ancho del contenido, altura = altura del contenido. (Los bordes y rellenos no son incluídos en el cálculo.)
-
border-box
-
Las propiedad de {{Cssxref("width")}} y {{Cssxref("height")}} incluyen el contenido, relleno y borde pero no incluyen el margén. Tenga en cuenta que el relleno y borde estarán dentro de la caja. Por ejemplo, .box {width: 350px; border: 10px solid black;} despliega una caja con un ancho de 350 pixeles. La caja de contenidos no puede ser negativo y tiene un valor mínimo de 0, haciendo imposible usar el border-box para hacer que el elemento desaparezca.
-
Las dimensiones del elemeno se calculan como: ancho = borde + relleno + ancho del contenido, y altura = borde + relleno + altura del contenido.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -

Este ejemplo muesta cómo diferentes valores de tamaño de la caja (box-sizing) alteran el tamaño desplegado de dos elementos idénticos.

- -

HTML

- -
<div class="content-box">Contenido de la caja</div>
-<br>
-<div class="border-box">Borde de la caja</div>
- -

CSS

- -
div {
-  width: 160px;
-  height: 80px;
-  padding: 20px;
-  border: 8px solid red;
-  background: yellow;
-}
-
-.content-box {
-  box-sizing: content-box;
-  /* Ancho  total: 160px + (2 * 20px) + (2 * 8px) = 216px
-     Altura total: 80px + (2 * 20px) + (2 * 8px) = 136px
-     Ancho de la caja de contenido: 160px
-     Altura de la caja de contenido: 80px */
-}
-
-.border-box {
-  box-sizing: border-box;
-  /* Ancho total: 160px
-     Altura total: 80px
-     Ancho de la caja de contenido: 160px - (2 * 20px) - (2 * 8px) = 104px
-     Altura de la caja de contenido: 80px - (2 * 20px) - (2 * 8px) = 24px */
-}
-
- -

Resultado

- -

{{EmbedLiveSample('Ejemplo', 'auto', 300)}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}Definición inicial
- -

{{cssinfo}}

- -

Compatibilidad del navegador

- - - -

{{Compat("css.properties.box-sizing")}}

- -

Ver también

- - diff --git a/files/es/web/css/box-sizing/index.md b/files/es/web/css/box-sizing/index.md new file mode 100644 index 00000000000000..e237f277a0f32b --- /dev/null +++ b/files/es/web/css/box-sizing/index.md @@ -0,0 +1,104 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - Layout + - Propiedades CSS + - Web +translation_of: Web/CSS/box-sizing +--- +{{CSSRef}} + +La propiedad CSS **`box-sizing`** como el {{glossary("user agent")}} debe calcular el ancho y alto total de un elemento. + +{{EmbedInteractiveExample("pages/css/box-sizing.html")}} + +Por defecto en el [modelo de caja de CSS](/es/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model), el ancho y alto asignado a un elemento es aplicado solo al contenido de la caja del elemento. Si el elemento tiene algun borde (border) o relleno (padding), este es entonces añadido al ancho y alto a alcanzar el tamaño de la caja que es desplegada en pantalla. Esto significa que cuando se definen el ancho y alto, se tiene que ajustar el valor definido para permitir cualquier borde o relleno que se pueda añadir. + +La propiedad `box-sizing` puede ser usada para ajustar el siguiente comportamiento: + +- `content-box` es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno ser añadirá al ancho final desplegado. +- `border-box` le dice al navegador tomar en cuenta para cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluíran cualquier borde o relleno que se añadan, y la caja de contenido se encogerá para absorber ese ancho extra. Esto típicamente hace mucho más fácil dimensionar elementos. + +## Sintaxis + +La propiedad `box-sizing` es especificada como una sola palabra clave elegida de la lista de valores que aparece abajo. + +### Valores + +- `content-box` + + - : Este es el valor inicial y por defecto especificado por el estándar CSS. Las propiedades {{Cssxref("width")}} and {{Cssxref("height")}} no incluyen el borde, relleno o margen. Por ejemplo, `.box {width: 350px; border: 10px solid black;}` despliega una caja con un ancho de 370 pixeles. + + Aquí, las dimensiones de un elemento son calculados como: ancho = ancho del contenido, altura = altura del contenido. (Los bordes y rellenos no son incluídos en el cálculo.) + +- `border-box` + + - : Las propiedad de {{Cssxref("width")}} y {{Cssxref("height")}} incluyen el contenido, relleno y borde pero no incluyen el margén. Tenga en cuenta que el relleno y borde estarán dentro de la caja. Por ejemplo, `.box {width: 350px; border: 10px solid black;}` despliega una caja con un ancho de 350 pixeles. La caja de contenidos no puede ser negativo y tiene un valor mínimo de 0, haciendo imposible usar el `border-box` para hacer que el elemento desaparezca. + + Las dimensiones del elemeno se calculan como: ancho = borde + relleno + ancho del contenido, y altura = borde + relleno + altura del contenido. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplo + +Este ejemplo muesta cómo diferentes valores de tamaño de la caja (`box-sizing`) alteran el tamaño desplegado de dos elementos idénticos. + +### HTML + +```html +
Contenido de la caja
+
+
Borde de la caja
+``` + +### CSS + +```css +div { + width: 160px; + height: 80px; + padding: 20px; + border: 8px solid red; + background: yellow; +} + +.content-box { + box-sizing: content-box; + /* Ancho total: 160px + (2 * 20px) + (2 * 8px) = 216px + Altura total: 80px + (2 * 20px) + (2 * 8px) = 136px + Ancho de la caja de contenido: 160px + Altura de la caja de contenido: 80px */ +} + +.border-box { + box-sizing: border-box; + /* Ancho total: 160px + Altura total: 80px + Ancho de la caja de contenido: 160px - (2 * 20px) - (2 * 8px) = 104px + Altura de la caja de contenido: 80px - (2 * 20px) - (2 * 8px) = 24px */ +} +``` + +### Resultado + +{{EmbedLiveSample('Ejemplo', 'auto', 300)}} + +## Especificaciones + +| Especificación | Estatus | Comentario | +| ---------------------------------------------------------------------------- | ------------------------------------ | ------------------ | +| {{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}} | {{Spec2('CSS3 Basic UI')}} | Definición inicial | + +{{cssinfo}} + +## Compatibilidad del navegador + +{{Compat("css.properties.box-sizing")}} + +## Ver también + +- [Modelo de caja de CSS](/es/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)