From 876394961a177fee825182f6d91a1b021422b922 Mon Sep 17 00:00:00 2001 From: Alexander Date: Thu, 20 Oct 2022 12:35:09 -0500 Subject: [PATCH 1/9] css/c-f html cleanup --- files/es/web/css/clip/index.html | 4 +- .../using_css_animations/index.html | 2 +- files/es/web/css/css_fonts/index.html | 1 + .../basic_concepts_of_grid_layout/index.html | 4 +- files/es/web/css/css_grid_layout/index.html | 2 +- .../relationship_of_grid_layout/index.html | 4 +- .../css_images/using_css_gradients/index.html | 2 +- .../stacking_context_example_1/index.html | 2 +- .../using_css_transforms/index.html | 106 +++++++++--------- .../using_css_transitions/index.html | 4 +- .../web/css/descendant_combinator/index.html | 2 +- files/es/web/css/display/index.html | 2 +- .../css/filter-function/brightness/index.html | 2 +- files/es/web/css/fit-content/index.html | 4 +- files/es/web/css/flex-basis/index.html | 3 +- files/es/web/css/flex-direction/index.html | 6 +- files/es/web/css/flex-flow/index.html | 2 +- files/es/web/css/flex-wrap/index.html | 2 +- files/es/web/css/flex/index.html | 4 +- files/es/web/css/float/index.html | 8 +- .../css/font-variant-alternates/index.html | 2 +- files/es/web/css/font-variant/index.html | 4 +- files/es/web/css/font/index.html | 20 ++-- 23 files changed, 92 insertions(+), 100 deletions(-) diff --git a/files/es/web/css/clip/index.html b/files/es/web/css/clip/index.html index e0bb17e83b80f6..ae23508a5f8e36 100644 --- a/files/es/web/css/clip/index.html +++ b/files/es/web/css/clip/index.html @@ -37,8 +37,8 @@

Valores

o 
rect(<top> <right> <bottom> <left>)      /* sintaxis compatible inversa */
- donde<top> y <bottom> especifícan desplazamientos de la esquina del borde superior de la caja, y <right>, y <left> especifican desplazamientos de la esquina del borde izquiedo de la caja. -
<top>, <right>, <bottom>, y <left> pueden cada uno tenerun valor {{cssxref("<length>")}} o auto.
+ donde<top> y <bottom> especifícan desplazamientos de la esquina del borde superior de la caja, y <right>, y <left> especifican desplazamientos de la esquina del borde izquiedo de la caja.

+ <top>, <right>, <bottom>, y <left> pueden cada uno tenerun valor {{cssxref("<length>")}} o auto.
auto
El elemento no se recorta (valor por defecto)
diff --git a/files/es/web/css/css_animations/using_css_animations/index.html b/files/es/web/css/css_animations/using_css_animations/index.html index d4e71af96ce378..5510d904c4c3c2 100644 --- a/files/es/web/css/css_animations/using_css_animations/index.html +++ b/files/es/web/css/css_animations/using_css_animations/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Animations/Using_CSS_animations original_slug: Web/CSS/CSS_Animations/Usando_animaciones_CSS --- -

{{SeeCompatTable}}{{CSSRef}}

+

{{SeeCompatTable}}{{CSSRef}}

Las animaciones CSS3 permiten animar la transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.

diff --git a/files/es/web/css/css_fonts/index.html b/files/es/web/css/css_fonts/index.html index bdeb1055a95702..6174c2f91b4eb9 100644 --- a/files/es/web/css/css_fonts/index.html +++ b/files/es/web/css/css_fonts/index.html @@ -58,6 +58,7 @@

Atributos

{{cssxref("@font-feature-values")}}
+
Empty

Guia

diff --git a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index 9ec75d9198435f..bdd707946cbc06 100644 --- a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -241,7 +241,7 @@

La cuadrícula implícita y expl

En el siguiente ejemplo usamos grid-auto-rows para asegurar que las vías creadas en la cuadrícula implícita tengan 200 píxeles de alto.

-
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> +
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> 
.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -319,7 +319,7 @@ 
Tamaño de vía y minmax()

 
{{ EmbedLiveSample('Tamaño_de_vía_y_minmax', '240', '470') }}
-

Líneas de la cuadrículaEdit

+

Líneas de la cuadrículaEdit

Debe tenerse en cuenta que cuando definimos una cuadrícula definimos las vías de la cuadrícula, no las líneas. Grid luego nos da las líneas numeradas a utilizar al posicionar elementos. En nuestra cuadrícula de tres columnas y dos filas, tenemos cuatro líneas de columna.

diff --git a/files/es/web/css/css_grid_layout/index.html b/files/es/web/css/css_grid_layout/index.html index 042d1f04fb42e3..aa544f3b4fdb06 100644 --- a/files/es/web/css/css_grid_layout/index.html +++ b/files/es/web/css/css_grid_layout/index.html @@ -191,7 +191,7 @@

Especificaciones

+``` + +```css hidden +html,body { height: 100%; box-sizing: border-box; } @@ -163,33 +166,32 @@ p:first-child { .c14 { color: hsl(30, 100%, 50%, 0.6); } .c15 { color: hsla(30, 100%, 50%, 0.6); } .c16 { color: hsl(30 100% 50% / 0.6); } -.c17 { color: hsla(30 100% 50% / 0.6); } - +.c17 { color: hsla(30 100% 50% / 0.6); } +``` -

{{EmbedLiveSample("color", "100%", 630, "", "", "example-outcome-frame")}}

+{{EmbedLiveSample("color", "100%", 630, "", "", "example-outcome-frame")}} -
{{cssinfo}}
+{{cssinfo}} -

Sintaxis

+## Sintaxis -

La propiedad color esta especificada como un solo un valor de {{cssxref("<color>")}}

+La propiedad `color` esta especificada como un solo un valor de {{cssxref("<color>")}} -

Valores

+### Valores -
-
{{cssxref("<color>")}}
-
Establece el color de las partes textuales y decorativas del elemento.
-
+- {{cssxref("<color>")}} + - : Establece el color de las partes textuales y decorativas del elemento. -

Sintaxis formal

+### Sintaxis formal {{csssyntax}} -

Ejemplos

+## Ejemplos -

Las siguientes son todas las formas de hacer que el texto de un párrafo sea rojo:

+Las siguientes son todas las formas de hacer que el texto de un párrafo sea rojo: -
p { color: red; }
+```css
+p { color: red; }
 p { color: #f00; }
 p { color: #ff0000; }
 p { color: rgb(255,0,0); }
@@ -199,62 +201,24 @@ p { color: hsl(0, 100%, 50%); }
 /* 50% translúcido */
 p { color: rgba(255, 0, 0, 0.5); }
 p { color: hsla(0, 100%, 50%, 0.5); }
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}{{Spec2('CSS4 Colors')}} -

Agrega sintaxis sin comas para las funciones rgb(), rgba(), hsl(), y hsla(). Permite valores alfa en rgb() y hsl(), convirtiéndose rgba() y hsla() en alias (obsoletos) para ellos.
- Agrega una palabra clave de color rebeccapurple.
- Agrega valores de color hexadecimal de 4 y 8 dígitos, donde el último dígito representa el valor alfa.
- Añade las funciones hwb(), device-cmyk(), y color().

-
{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}{{Spec2('CSS3 Transitions')}}Define color como animable.
{{SpecName('CSS3 Colors', '#color', 'color')}}{{Spec2('CSS3 Colors')}}Desprecia los colores del sistema. Agrega colores SVG. Agrega las funciones rgba(), hsl(), y hsla().
{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}{{Spec2('CSS2.1')}}Añade el color orange y los colores del sistema.
{{SpecName('CSS1', '#color', 'color')}}{{Spec2('CSS1')}}Definicion inicial.
- -

Compatibilidad de navegadores

- - - -

{{Compat("css.properties.color")}}

- -

Ver también

- - +``` + +## Especificaciones + +| Especificación | Estado | Comentario | +| -------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| {{SpecName('CSS4 Colors', '#the-color-property', 'color')}} | {{Spec2('CSS4 Colors')}} | Agrega sintaxis sin comas para las funciones `rgb()`, `rgba()`, `hsl()`, y `hsla()`. Permite valores alfa en `rgb()` y `hsl()`, convirtiéndose `rgba()` y `hsla()` en alias (obsoletos) para ellos. Agrega una palabra clave de color `rebeccapurple`. Agrega valores de color hexadecimal de 4 y 8 dígitos, donde el último dígito representa el valor alfa. Añade las funciones `hwb()`, `device-cmyk()`, y `color()`. | +| {{SpecName('CSS3 Transitions', '#animatable-css', 'color')}} | {{Spec2('CSS3 Transitions')}} | Define `color` como animable. | +| {{SpecName('CSS3 Colors', '#color', 'color')}} | {{Spec2('CSS3 Colors')}} | Desprecia los colores del sistema. Agrega colores SVG. Agrega las funciones `rgba()`, `hsl()`, y `hsla()`. | +| {{SpecName('CSS2.1', 'colors.html#colors', 'color')}} | {{Spec2('CSS2.1')}} | Añade el color `orange` y los colores del sistema. | +| {{SpecName('CSS1', '#color', 'color')}} | {{Spec2('CSS1')}} | Definicion inicial. | + +## Compatibilidad de navegadores + +{{Compat("css.properties.color")}} + +## Ver también + +- El tipo de datos de {{cssxref("<color>")}} +- Otras propiedades relacionadas con el color: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}} +- [Aplicar color a elementos HTML usando CSS](/es/docs/Web/HTML/Applying_color) diff --git a/files/es/web/css/color_value/index.md b/files/es/web/css/color_value/index.md index 265624e8643234..fc8982712a8b50 100644 --- a/files/es/web/css/color_value/index.md +++ b/files/es/web/css/color_value/index.md @@ -10,1020 +10,1015 @@ tags: - Web translation_of: Web/CSS/color_value --- -

{{CSSRef}}

+{{CSSRef}} -

Resumen

+## Resumen -

El tipo de datos CSS <color> denota un color en el sRGB color space. Un color puede ser descrito de cualquiera de las siguiente maneras:

+`El tipo de datos `[CSS](/es/docs/Web/CSS)` ` denota un color en el [sRGB color space](http://en.wikipedia.org/wiki/SRGB). Un color puede ser descrito de cualquiera de las siguiente maneras: - +- Usando una _palabra clave_. +- Usando el sistema [RGB cubic-coordinate](http://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation) (usando #-hexadecimal o las notaciones funcionales `rgb()` y `rgba()` ) +- Usando el sistema [HSL cylindrical-coordinate](http://en.wikipedia.org/wiki/HSL_and_HSV) (usando las notaciones funcionales `hsl()` y `hsla() `) -

Hay que destacar que la lista de valores de color aceptados ha ido creciendo conforme la especificación evolucionaba, para acabar con la lista de colores de CSS3.

+Hay que destacar que la lista de valores de color aceptados ha ido creciendo conforme la especificación evolucionaba, para acabar con la lista de colores de CSS3. -

Asociado con el color en el espacio sRGB, un valor <color> también consiste en una coordenada alpha-channel o valor de transparencia, indicando cómo se debe composite o mezclar el color con su color de fondo.

+Asociado con el color en el espacio sRGB, un valor `` también consiste en una coordenada [alpha-channel](http://en.wikipedia.org/wiki/Alpha_compositing) o valor de transparencia, indicando cómo se debe [composite](http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending) o mezclar el color con su color de fondo. -

Aunque los valores de colores en CSS son definidos de manera precisa existe la posibilidad de que parezcan distintos en dispositivos diferentes. La mayoría de ellos no están calibrados y algunos navegadores no soportan los color profile de algunos dispositivos de salidas. En esta situación el color puede variar bastante.

+Aunque los valores de colores en CSS son definidos de manera precisa existe la posibilidad de que parezcan distintos en dispositivos diferentes. La mayoría de ellos no están calibrados y algunos navegadores no soportan los [color profile](http://en.wikipedia.org/wiki/ICC_profile) de algunos dispositivos de salidas. En esta situación el color puede variar bastante. -
Notas: La recomendación WCAG 2.0 de la W3C aconseja a los autores web de manera clara que no usen color como el único medido para especificar una información, acción o resultado concreto. Algunos usuarios tienen problemas para diferenciar colores y existe la posibilidad de que la información transmitida no sea captada. Por supuesto esto no impide que se use el color, sólo su uso como único medio para describir alguna información.
+> **Nota:** **Notas:** La recomendación [WCAG 2.0](http://www.w3.org/TR/WCAG/#visual-audio-contrast) de la W3C aconseja a los autores web de manera clara que no usen _color_ como el único medido para especificar una información, acción o resultado concreto. Algunos usuarios tienen problemas para diferenciar colores y existe la posibilidad de que la información transmitida no sea captada. Por supuesto esto no impide que se use el color, sólo su uso como único medio para describir alguna información. -

Interpolación

+## Interpolación -

Los valores del tipo de datos CSS <color> pueden ser interpolados para lograr animaciones o para crear valores <gradient>. En este caso son interpolados en cada uno de sus componentes rojo, verde y azul, conteniendo, cada uno de ellos, un número decimal con coma flotante. Debe tenerse en cuenta que la interpolación del color sucede en el alpha-premultiplied sRGBA color space para evitar que aparezcan grises inesperados. En las animaciones, la velocidad de la interpolación viene determinada por la timing function asociada con la animación.

+Los valores del tipo de datos CSS `` pueden ser interpolados para lograr animaciones o para crear valores `. `En este caso son interpolados en cada uno de sus componentes rojo, verde y azul, conteniendo, cada uno de ellos, un número decimal con coma flotante. Debe tenerse en cuenta que la interpolación del color sucede en el [alpha-premultiplied sRGBA color space](http://www.gimp.org/docs/plug-in/appendix-alpha.html) para evitar que aparezcan grises inesperados. En las animaciones, la velocidad de la interpolación viene determinada por la [timing function](/es/docs/Web/CSS/timing-function) asociada con la animación. -

Valores

+## Valores -

Hay varias formas de describir un valor <color>.

+Hay varias formas de describir un valor ``. -

Palabras clave de colores

+### Palabras clave de colores -

Las palabras clave de colores son identificadores en los que no hay distinción entre mayúsculas y minúsculas y que sirven para representar un color concreto, por ejemplo red, blue, brown, lightseagreen. El nombre describe el color aunque es mayormente artificial. La lista de valores válidos cambia un montón de una especificación a otra:

+Las palabras clave de colores son identificadores en los que no hay distinción entre mayúsculas y minúsculas y que sirven para representar un color concreto, por ejemplo `red, blue, brown, lightseagreen`. El nombre describe el color aunque es mayormente artificial. La lista de valores válidos cambia un montón de una especificación a otra: -
    -
  • CSS Nivel 1 sólo acepta 16 colores básicos, los llamados colores VGA ya que son tomados de los colores que son capaces de mostrar las trajetas gráficas VGA.
    • -
  • CSS Nivel 2 añadió la palabra clave orange.
    • -
  • Desde el principio los navegadores aceptarons otros colores, sobre todo la lista de colores X11 con unas pocas diferencias. ya que, los primeros navegadores, eran en su mayoría aplicaciones X11. SVG 1.0 fué el primer estándar que definió formalmente estas palabras clave. Con frecuencia nos referimos a ello como la lista extendida de colores , los colores X11 o los colores SVG.
    • -
+- CSS Nivel 1 sólo acepta 16 colores básicos, los llamados _colores_ _VGA_ ya que son tomados de los colores que son capaces de mostrar las trajetas gráficas [VGA](http://en.wikipedia.org/wiki/VGA). +- CSS Nivel 2 añadió la palabra clave `orange`. +- Desde el principio los navegadores aceptarons otros colores, sobre todo la lista de colores X11 con unas pocas diferencias. ya que, los primeros navegadores, eran en su mayoría aplicaciones X11. SVG 1.0 fué el primer estándar que definió formalmente estas palabras clave. Con frecuencia nos referimos a ello como la lista extendida de colores , los colores X11 o los colores SVG. -

Hay algunas advertencias a tener en cuenta al usar las palabras clave relativas a colores:

+Hay algunas advertencias a tener en cuenta al usar las palabras clave relativas a colores: -
    -
  • A excepción de los 16 colores básicos, que son comunes en HTML, los otros no pueden ser usados en HTML. HTML convertirá estos valores desconocidos usando un algoritmo específico y se obtendrá colores totalmente diferentes. Estas palabras clave deberían sólo usarse en SGV y CSS.
    • -
  • Colores desconocidos hacen que la propiedad CSS sea declarada inválida. Las propiedades inválidas son ignoradas y , por tanto, el color no tendrá efecto. Esto es un comportamiento diferente al del HTML
    • -
  • Ninguna palabra clave de color tiene transparencia en CSS, son colores planos y sólidos.
    • -
  • Algunas referencian el mismo color: -
      -
    • darkgray / darkgrey
      • -
    • darkslategray / darkslategrey
      • -
    • dimgray / dimgrey
      • -
    • lightgray / lightgrey
      • -
    • lightslategray / lightslategrey
      • -
    • gray / grey
      • -
    • slategray / slategrey
      • -
    -
    • -
  • Aunque las palabras clave de colores han sido tomadas de los nombres de colores usuales en X11, el color puede ser ligeramente diferente al color en X11 ya que son adaptados por el fabricante para un hardware específico.
    • -
+- A excepción de los 16 colores básicos, que son comunes en HTML, los otros no pueden ser usados en HTML. HTML convertirá estos valores desconocidos usando un algoritmo específico y se obtendrá colores totalmente diferentes. Estas palabras clave deberían sólo usarse en SGV y CSS. +- Colores desconocidos hacen que la propiedad CSS sea declarada inválida. Las propiedades inválidas son ignoradas y , por tanto, el color no tendrá efecto. Esto es un comportamiento diferente al del HTML +- Ninguna palabra clave de color tiene transparencia en CSS, son colores planos y sólidos. +- Algunas referencian el mismo color: + + - `darkgray` / `darkgrey` + - `darkslategray` / `darkslategrey` + - `dimgray` / `dimgrey` + - `lightgray` / `lightgrey` + - `lightslategray` / `lightslategrey` + - `gray` / `grey` + - `slategray` / `slategrey` + +- Aunque las palabras clave de colores han sido tomadas de los nombres de colores usuales en X11, el color puede ser ligeramente diferente al color en X11 ya que son adaptados por el fabricante para un hardware específico. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónColorPalabra claveValor RGB hexadecimalMuestra
{{SpecName("CSS1")}} black#000000
silver#c0c0c0
gray#808080
white#ffffff
maroon#800000
red#ff0000
purple#800080
fuchsia#ff00ff
green#008000
lime#00ff00
olive#808000
yellow#ffff00
navy#000080
blue#0000ff
teal#008080
aqua#00ffff
{{SpecName("CSS2.1")}} orange#ffa500
{{SpecName("CSS3 Colors")}} aliceblue#f0f8ff
antiquewhite#faebd7
aquamarine#7fffd4
azure#f0ffff
beige#f5f5dc
bisque#ffe4c4
blanchedalmond#ffe4c4
blueviolet#8a2be2
brown#a52a2a
burlywood#deb887
cadetblue#5f9ea0
chartreuse#7fff00
chocolate#d2691e
coral#ff7f50
cornflowerblue#6495ed
cornsilk#fff8dc
crimson#dc143c
darkblue#00008b
darkcyan#008b8b
darkgoldenrod#b8860b
darkgray#a9a9a9
darkgreen#006400
darkgrey#a9a9a9
darkkhaki#bdb76b
darkmagenta#8b008b
darkolivegreen#556b2f
darkorange#ff8c00
darkorchid#9932cc
darkred#8b0000
darksalmon#e9967a
darkseagreen#8fbc8f
darkslateblue#483d8b
darkslategray#2f4f4f
darkslategrey#2f4f4f
darkturquoise#00ced1
darkviolet#9400d3
deeppink#ff1493
deepskyblue#00bfff
dimgray#696969
dimgrey#696969
dodgerblue#1e90ff
firebrick#b22222
floralwhite#fffaf0
forestgreen#228b22
gainsboro#dcdcdc
ghostwhite#f8f8ff
gold#ffd700
goldenrod#daa520
greenyellow#adff2f
grey#808080
honeydew#f0fff0
hotpink#ff69b4
indianred#cd5c5c
indigo#4b0082
ivory#fffff0
khaki#f0e68c
lavender#e6e6fa
lavenderblush#fff0f5
lawngreen#7cfc00
lemonchiffon#fffacd
lightblue#add8e6
lightcoral#f08080
lightcyan#e0ffff
lightgoldenrodyellow#fafad2
lightgray#d3d3d3
lightgreen#90ee90
lightgrey#d3d3d3
lightpink#ffb6c1
lightsalmon#ffa07a
lightseagreen#20b2aa
lightskyblue#87cefa
lightslategray#778899
lightslategrey#778899
lightsteelblue#b0c4de
lightyellow#ffffe0
limegreen#32cd32
linen#faf0e6
mediumaquamarine#66cdaa
mediumblue#0000cd
mediumorchid#ba55d3
mediumpurple#9370db
mediumseagreen#3cb371
mediumslateblue#7b68ee
mediumspringgreen#00fa9a
mediumturquoise#48d1cc
mediumvioletred#c71585
midnightblue#191970
mintcream#f5fffa
mistyrose#ffe4e1
moccasin#ffe4b5
navajowhite#ffdead
oldlace#fdf5e6
olivedrab#6b8e23
orangered#ff4500
orchid#da70d6
palegoldenrod#eee8aa
palegreen#98fb98
paleturquoise#afeeee
palevioletred#db7093
papayawhip#ffefd5
peachpuff#ffdab9
peru#cd853f
pink#ffc0cb
plum#dda0dd
powderblue#b0e0e6
rosybrown#bc8f8f
royalblue#4169e1
saddlebrown#8b4513
salmon#fa8072
sandybrown#f4a460
seagreen#2e8b57
seashell#fff5ee
sienna#a0522d
skyblue#87ceeb
slateblue#6a5acd
slategray#708090
slategrey#708090
snow#fffafa
springgreen#00ff7f
steelblue#4682b4
tan#d2b48c
thistle#d8bfd8
tomato#ff6347
turquoise#40e0d0
violet#ee82ee
wheat#f5deb3
whitesmoke#f5f5f5
yellowgreen#9acd32
{{SpecName("CSS4 Colors")}} rebeccapurple#663399
EspecificaciónColorPalabra claveValor RGB hexadecimalMuestra
{{SpecName("CSS1")}}black#000000
silver#c0c0c0
gray#808080
white#ffffff
maroon#800000
red#ff0000
purple#800080
fuchsia#ff00ff
green#008000
lime#00ff00
olive#808000
yellow#ffff00
navy#000080
blue#0000ff
teal#008080
aqua#00ffff
{{SpecName("CSS2.1")}}orange#ffa500
{{SpecName("CSS3 Colors")}}aliceblue#f0f8ff
antiquewhite#faebd7
aquamarine#7fffd4
azure#f0ffff
beige#f5f5dc
bisque#ffe4c4
blanchedalmond#ffe4c4
blueviolet#8a2be2
brown#a52a2a
burlywood#deb887
cadetblue#5f9ea0
chartreuse#7fff00
chocolate#d2691e
coral#ff7f50
cornflowerblue#6495ed
cornsilk#fff8dc
crimson#dc143c
darkblue#00008b
darkcyan#008b8b
darkgoldenrod#b8860b
darkgray#a9a9a9
darkgreen#006400
darkgrey#a9a9a9
darkkhaki#bdb76b
darkmagenta#8b008b
darkolivegreen#556b2f
darkorange#ff8c00
darkorchid#9932cc
darkred#8b0000
darksalmon#e9967a
darkseagreen#8fbc8f
darkslateblue#483d8b
darkslategray#2f4f4f
darkslategrey#2f4f4f
darkturquoise#00ced1
darkviolet#9400d3
deeppink#ff1493
deepskyblue#00bfff
dimgray#696969
dimgrey#696969
dodgerblue#1e90ff
firebrick#b22222
floralwhite#fffaf0
forestgreen#228b22
gainsboro#dcdcdc
ghostwhite#f8f8ff
gold#ffd700
goldenrod#daa520
greenyellow#adff2f
grey#808080
honeydew#f0fff0
hotpink#ff69b4
indianred#cd5c5c
indigo#4b0082
ivory#fffff0
khaki#f0e68c
lavender#e6e6fa
lavenderblush#fff0f5
lawngreen#7cfc00
lemonchiffon#fffacd
lightblue#add8e6
lightcoral#f08080
lightcyan#e0ffff
lightgoldenrodyellow#fafad2
lightgray#d3d3d3
lightgreen#90ee90
lightgrey#d3d3d3
lightpink#ffb6c1
lightsalmon#ffa07a
lightseagreen#20b2aa
lightskyblue#87cefa
lightslategray#778899
lightslategrey#778899
lightsteelblue#b0c4de
lightyellow#ffffe0
limegreen#32cd32
linen#faf0e6
mediumaquamarine#66cdaa
mediumblue#0000cd
mediumorchid#ba55d3
mediumpurple#9370db
mediumseagreen#3cb371
mediumslateblue#7b68ee
mediumspringgreen#00fa9a
mediumturquoise#48d1cc
mediumvioletred#c71585
midnightblue#191970
mintcream#f5fffa
mistyrose#ffe4e1
moccasin#ffe4b5
navajowhite#ffdead
oldlace#fdf5e6
olivedrab#6b8e23
orangered#ff4500
orchid#da70d6
palegoldenrod#eee8aa
palegreen#98fb98
paleturquoise#afeeee
palevioletred#db7093
papayawhip#ffefd5
peachpuff#ffdab9
peru#cd853f
pink#ffc0cb
plum#dda0dd
powderblue#b0e0e6
rosybrown#bc8f8f
royalblue#4169e1
saddlebrown#8b4513
salmon#fa8072
sandybrown#f4a460
seagreen#2e8b57
seashell#fff5ee
sienna#a0522d
skyblue#87ceeb
slateblue#6a5acd
slategray#708090
slategrey#708090
snow#fffafa
springgreen#00ff7f
steelblue#4682b4
tan#d2b48c
thistle#d8bfd8
tomato#ff6347
turquoise#40e0d0
violet#ee82ee
wheat#f5deb3
whitesmoke#f5f5f5
yellowgreen#9acd32
{{SpecName("CSS4 Colors")}}rebeccapurple#663399
-

El color rebeccapurple es equivalente al color #639, y se puede encontrar información adicional sobre por qué fue introducidoa en el blog Codepen blog en un post realizado por Trezy "Honoring a Great Man."

+El color `rebeccapurple` es equivalente al color `#639`, y se puede encontrar información adicional sobre por qué fue introducidoa en el blog Codepen blog en un post realizado por Trezy "[Honoring a Great Man](http://codepen.io/trezy/blog/honoring-a-great-man)." -

Palabra clave transparent

+### `Palabra clave transparent` -

La palaba transparent representa un color totalmente transparente, es decir, el color que veremos será el colore de fondo. Técnicamente es un color negro con un valor mínimo en el canal alfa y la manera de representarlo es rgba(0,0,0,0).

+La palaba `transparent` representa un color totalmente transparente, es decir, el color que veremos será el colore de fondo. Técnicamente es un color negro con un valor mínimo en el canal alfa y la manera de representarlo es `rgba(0,0,0,0)`. -
Nota histórica
-La palabra clave transparent no fue un color en CSS hasta CSS Nivel 2 (Revisión 1). Podía ser usada en lugar de un valor <color> regular en dos propiedades CSS: {{Cssxref("background")}} y {{Cssxref("border")}}. En esencia fue añadida para permitir sobreescribir valores sólidos heredados.
-
-Con el soporte de la opacidad que nos proporcionan los alpha channels, transparent fue redefinido como un color verdadero más en CSS Nivel 3 permitiendo su use en cualquier sitio donde de requiera un valor<color> , como la propiedad {{Cssxref("color")}}.
+> **Nota:** **Nota histórica** +> La palabra clave `transparent` no fue un color en CSS hasta CSS Nivel 2 (Revisión 1). Podía ser usada en lugar de un valor \ regular en dos propiedades CSS: {{Cssxref("background")}} y {{Cssxref("border")}}. En esencia fue añadida para permitir sobreescribir valores sólidos heredados. +> +> Con el soporte de la opacidad que nos proporcionan los [alpha channels](http://en.wikipedia.org/wiki/Alpha_compositing), `transparent fue redefinido como un color verdadero más en `CSS Nivel 3 permitiendo su use en cualquier sitio donde de requiera un valor`` , como la propiedad {{Cssxref("color")}}. -

Palabra clave currentColor

+### `Palabra clave currentColor` -

La palabra clave currentColor representa el valor calculado para la la propiedad del elemento {{Cssxref("color")}} . Permite hacer que las propiedades de color sean heredadas por los elementos hijo, que no lo hacen por defecto.

+La palabra clave `currentColor` representa el valor calculado para la la propiedad del elemento {{Cssxref("color")}} . Permite hacer que las propiedades de color sean heredadas por los elementos hijo, que no lo hacen por defecto. -

También puede ser usada en propiedades que heredan el valor calculado de la propiedad del elemento {{Cssxref("color")}}, en este caso, será equivalente a la plabara clave inherit en estos elementos, si es que la hubiera.

+También puede ser usada en propiedades que heredan el valor calculado de la propiedad del elemento {{Cssxref("color")}}, en este caso, será equivalente a la plabara clave `inherit` en estos elementos, si es que la hubiera. -

Ejemplo

+#### Ejemplo -

El color de la una line (un div relleno de color) se adapta al color de su propiedad {Cssxref("color")}} , heredada de su padre.

+El color de la una line (un div relleno de color) se adapta al color de su propiedad {Cssxref("color")}} , heredada de su padre. -
-
Live example 1
+##### Live example 1 -
<div style="color:darkred">
- EL color de este texto es el mismo que el de la línea  <div style="background:currentcolor; height:1px"></div>
+```html
+

+ EL color de este texto es el mismo que el de la línea  

  Algo más de texto
-</div>
-
+
+``` -

{{EmbedLiveSample('Live_example_1')}}

+{{EmbedLiveSample('Live_example_1')}} -
Live example 2
+##### Live example 2 -
<div style="color:blue; border-bottom: 1px dashed currentcolor;">
+```html
+

  El color de este texto es el mimso que el color de la línea:
-  <div style="background:currentcolor; height:1px"></div>
+  

  Algo más de texto.
-</div>
- -

{{EmbedLiveSample('Live_example_2')}}

+``` + +{{EmbedLiveSample('Live_example_2')}} + +### `rgb()` -

rgb()

+Los colores puede ser definidos usando el modelo RGB (rojo-verde-azul) de dos maneras:ways: -

Los colores puede ser definidos usando el modelo RGB (rojo-verde-azul) de dos maneras:ways:

+- Notación Hexadecimal `#RRGGBB` ay `#RGB` -
-
Notación Hexadecimal #RRGGBB ay #RGB
-
-
    -
  • "#", seguido de seis caracteres hexadecimales (0-9, A-F).
    • -
  • "#", seguido de tres caracteres hexadecimales (0-9, A-F).
    • -
- La notación de tres dígitos (#RGB) y la de seis (#RRGGBB) son iguales.
- Por ejemplo, #f03 y #ff0033 representan el mismo color.
-
Notación funcional rgb(R,G,B)
-
"rgb", seguido por tres valores {{cssxref("<integer>")}} o tres {{cssxref("<percentage>")}} values.
- El número entero 255 representa el 100%, y F o FF en notación hexadecimal.
-
+ - : -
/* Todos estos ejemplos son el mismo color RGB: */
+    - "`#`", seguido de seis caracteres hexadecimales (0-9, A-F).
+    - "`#`", seguido de tres caracteres hexadecimales (0-9, A-F).
+
+    La notación de tres dígitos (`#RGB`) y la de seis (`#RRGGBB`) son iguales.
+    Por ejemplo, `#f03` y `#ff0033` representan el mismo color.
+
+- Notación funcional `rgb(R,G,B)`
+  - : "`rgb`", seguido por tres valores {{cssxref("<integer>")}} o tres {{cssxref("<percentage>")}} values.
+    El número entero 255 representa el 100%, y F o FF en notación hexadecimal.
+
+```
+/* Todos estos ejemplos son el mismo color RGB: */
 
  #f03
  #F03
@@ -1031,256 +1026,244 @@ Con el soporte de la opacidad que nos proporcionan los rgb(255, 0, 51.2) /* ¡ERROR! No uses número decimales , usa enteros*/
+ rgb(255, 0, 51.2) /* ¡ERROR! No uses número decimales , usa enteros*/
  rgb(100%,0%,20%)
  rgb(100%, 0%, 20%)
- rgb(100%, 0, 20%) /* ¡ERROR! No mezcles notaciones de enteros y de porcentajes*/
-
- -

hsl()

- -

Los colores también puede ser definidos usando el modelo tono (hue) - saturación (saturation) - brillo (lightness) (HSL) con la notación funcional hsl(). La ventaja del modelo HSL sobre el modelo RGB es que es mucho más intuitivo: puedes adivinar los colores que tú quieres y luego modificarlos. Es también más fácil crear conjuntos de colores (manteniendo el tono (hue) igual y modificando el brillo y la saturación.

- -

El tono (Hue) se representa como un ángulo del círculo de color (por así decir, el arco iris representado en un círculo). El ángulo se proporciona como un {{cssxref("<number>")}} sin unidades. Por definición rojo=0=360, y los demas colores están dispersos por el círculo, verde=120, azul=240, etc. Al ser un ánguilo implítamente -120=240 y 480=120.

- -

La saturación y el brillo son representados por porcentajes.
- 100% es saturacion completa, y 0% es una sombra de gris..
- 100% brillo es blanco, 0% negro, y 50% es brillo "normal".

- -
hsl(0,  100%,50%)    /* red */   
-hsl(30, 100%,50%)                
-hsl(60, 100%,50%)                
-hsl(90, 100%,50%)                
-hsl(120,100%,50%)    /* green */ 
-hsl(150,100%,50%)                
-hsl(180,100%,50%)                
-hsl(210,100%,50%)                
-hsl(240,100%,50%)    /* blue */  
-hsl(270,100%,50%)                
-hsl(300,100%,50%)                
-hsl(330,100%,50%)                
-hsl(360,100%,50%)    /* red */   
-
-hsl(120,100%,25%)    /* dark green */  
-hsl(120,100%,50%)    /* green */       
-hsl(120,100%,75%)    /* light green */ 
-
-hsl(120,100%,50%)    /* green */  
-hsl(120, 67%,50%)                 
-hsl(120, 33%,50%)                 
-hsl(120,  0%,50%)                 
-
-hsl(120, 60%,70%)    /* pastel green */ 
-
- -

rgba()

- -

Podemos definir los colores con el modelo Rojo (red) - Verde (green) - Azul (blue) - alpha (RGBa) usando la notación funcional rgba(). RGBa amplia el modelo RGA añadiendo un canal alfa, permitiendo de esta manera especificar la opacidad de un color.
- a representa opacidad: 0=transparente; 1=opaco;

- -
rgba(255,0,0,0.1)    /* 10% opaque red */  
-rgba(255,0,0,0.4)    /* 40% opaque red */  
-rgba(255,0,0,0.7)    /* 70% opaque red */  
-rgba(255,0,0,  1)    /* full opaque red */ 
-
- -

hsla()

- -

Podemos definir los colores usando el modelo saturación tono (hue) - (saturation) - brillo (lightness) (HSLa) usando lla notación funcional hsla(). HSLa amplía el modelo HSL incluyendo el canal alfa, permitiendo de esta manera especificar la opacidad de un color.
- a es la opacidad: 0=transparente; 1=opaco;

- -
hsla(240,100%,50%,0.05)   /* 5% opaque blue */   
-hsla(240,100%,50%, 0.4)   /* 40% opaque blue */  
-hsla(240,100%,50%, 0.7)   /* 70% opaque blue */  
-hsla(240,100%,50%,   1)   /* full opaque blue */ 
-
- -

Colores de Sistema

- -

No todos los colores de sistema son soportados por todos los sistemas. {{deprecated_inline}} para usar en páginas web públicas..

- -
-
ActiveBorder
-
Borde de la ventana activa
-
ActiveCaption
-
Título de la ventana activa. Deb usarse con CaptionText como color de fondo
-
AppWorkspace
-
Color de fondo para el interfaz de múltiples documentos.
-
Background
-
Fondo de escritorio.
-
ButtonFace
-
Color de fondo frontal para elementos 3-D que parecen 3-D debido a una capa del borde próximo. Debe usar con el color de frente ButtonText .
-
ButtonHighlight
-
The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
-
ButtonShadow
-
The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
-
ButtonText
-
Text on push buttons. Should be used with the ButtonFace or ThreeDFace background color.
-
CaptionText
-
Text in caption, size box, and scrollbar arrow box. Should be used with the ActiveCaption background color.
-
GrayText
-
Gris para el texto deshabilitado:
-
Highlight
-
Elemento(s) seleccionados en un control. Debe ser usado con el color de frente HighlightText.
-
HighlightText
-
Texto de los elemento(s) seleccionados en un control. Debe usar con el color de fondo Highlight.
-
InactiveBorder
-
Borde de ventana inactivo.
-
InactiveCaption
-
Inactive window caption. Should be used with the InactiveCaptionText foreground color.
-
InactiveCaptionText
-
Color of text in an inactive caption. Should be used with the InactiveCaption background color.
-
InfoBackground
-
Color de foBackground color for tooltip controls. Should be used with the InfoText foreground color.
-
InfoText
-
Text color for tooltip controls. Should be used with the InfoBackground background color.
-
Menu
-
Fondo del menú. Debe ser usado Menu background. Should be used with the MenuText or -moz-MenuBarText foreground color.
-
MenuText
-
Texto en el menú. Debe ser usado Text in menus. Should be used with the Menu background color.
-
Scrollbar
-
Color de fondo para las barras de scroll.
-
ThreeDDarkShadow
-
The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
-
ThreeDFace
-
The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the ButtonText foreground color.
-
ThreeDHighlight
-
The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two
- concentric layers of surrounding border.
-
ThreeDLightShadow
-
The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two
- concentric layers of surrounding border.
-
ThreeDShadow
-
The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
-
Window
-
Fondo de las ventanas. Debe usarse con el color de frente WindowText.
-
WindowFrame
-
Marco de ventana
-
WindowText
-
Texto en las ventanas.Debe usarse con el color de fono de ventana.
-
- -

Extensiones de Mozilla al Sistema de Colores

- -
-
-moz-ButtonDefault
-
The border color that goes around buttons that represent the default action for a dialog box.
-
-moz-ButtonHoverFace
-
The background color of a button that the mouse pointer is over (which would be ThreeDFace or ButtonFace when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverText foreground color.
-
-moz-ButtonHoverText
-
The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverFace background color.
-
-moz-CellHighlight
-
Background color for selected item in a tree widget. Should be used with the -moz-CellHighlightText foreground color. See also -moz-html-CellHighlight.
-
-moz-CellHighlightText
-
Text color for a selected item in a tree. Should be used with the -moz-CellHighlight background color. See also -moz-html-CellHighlightText.
-
-moz-Combobox
-
{{Gecko_minversion_inline("1.9.2")}} Background color for combo-boxes. Should be used with the -moz-ComboboxText foreground color. In versions prior to 1.9.2, use -moz-Field instead.
-
-moz-ComboboxText
-
{{Gecko_minversion_inline("1.9.2")}} Text color for combo-boxes. Should be used with the -moz-Combobox background color. In versions prior to 1.9.2, use -moz-FieldText instead.
-
-moz-Dialog
-
Color de fondo para cuadros de diálogo. Debe usarse con el color de frente -moz-DialogText
-
-moz-DialogText
-
Text color for dialog boxes. Should be used with the -moz-Dialog background color.
-
-moz-dragtargetzone
-
-moz-EvenTreeRow
-
{{gecko_minversion_inline("1.9")}} Background color for even-numbered rows in a tree. Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-OddTreeRow.
-
-moz-Field
-
Text field background color. Should be used with the -moz-FieldText foreground color.
-
-moz-FieldText
-
Text field text color. Should be used with the -moz-Field, -moz-EvenTreeRow, or -moz-OddTreeRow background color.
-
-moz-html-CellHighlight
-
{{gecko_minversion_inline("1.9")}} Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight.
-
-moz-html-CellHighlightText
-
{{gecko_minversion_inline("1.9")}} Text color for highlighted items in HTML {{HTMLElement("select")}}s. Should be used with the -moz-html-CellHighlight background color. Prior to Gecko 1.9, use -moz-CellHighlightText.
-
-moz-mac-accentdarkestshadow
-
-moz-mac-accentdarkshadow
-
-moz-mac-accentface
-
-moz-mac-accentlightesthighlight
-
-moz-mac-accentlightshadow
-
-moz-mac-accentregularhighlight
-
-moz-mac-accentregularshadow
-
-moz-mac-chrome-active
-
{{Gecko_minversion_inline("1.9.1")}}
-
-moz-mac-chrome-inactive
-
{{Gecko_minversion_inline("1.9.1")}}
-
-moz-mac-focusring
-
-moz-mac-menuselect
-
-moz-mac-menushadow
-
-moz-mac-menutextselect
-
-moz-MenuHover
-
Background color for hovered menu items. Often similar to Highlight. Should be used with the -moz-MenuHoverText or -moz-MenuBarHoverText foreground color.
-
-moz-MenuHoverText
-
Text color for hovered menu items. Often similar to HighlightText. Should be used with the -moz-MenuHover background color.
-
-moz-MenuBarText
-
{{Gecko_minversion_inline("1.9.2")}} Text color in menu bars. Often similar to MenuText. Should be used on top of Menu background.
-
-moz-MenuBarHoverText
-
Color for hovered text in menu bars. Often similar to -moz-MenuHoverText. Should be used on top of -moz-MenuHover background.
-
-moz-nativehyperlinktext
-
{{Gecko_minversion_inline("1.9.1")}} Default platform hyperlink color.
-
-moz-OddTreeRow
-
{{gecko_minversion_inline("1.9")}} Background color for odd-numbered rows in a tree. Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-EvenTreeRow.
-
-moz-win-communicationstext
-
{{gecko_minversion_inline("1.9")}} Should be used for text in objects with {{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;.
-
-moz-win-mediatext
-
{{gecko_minversion_inline("1.9")}} Should be used for text in objects with {{cssxref("-moz-appearance")}}: -moz-win-media-toolbox.
-
- -

Extensiones de Mozilla a las Preferencias de Color

- -
-
-moz-activehyperlinktext
-
Preferencias de usuario para el color de texto de los enlaces activos. Debe ser usado con el color de fondo por defecto del documento.
-
-moz-default-background-color
-
{{Gecko_minversion_inline("5.0")}} Preferencias de usuario para el color de fondo del documento.
-
-moz-default-color
-
{{Gecko_minversion_inline("5.0")}} Preferencias de usuario para el color del texto.
-
-moz-hyperlinktext
-
Preferencias de usuario para el color del texto de los enlaces sin visitar. Debe ser usado con el color de fondo por defecto del documento.
-
-moz-visitedhyperlinktext
-
Preferencias de usuario para el color del texto de los enlaces ya visitados. Debe ser usado con el color de fondo por defecto del documento.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS4 Colors', '#colorunits', '<color>')}}{{Spec2('CSS4 Colors')}}Añadido el color rebeccapurple.
{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}{{Spec2('CSS3 Colors')}}Colores de sistema depreciados; añadidos colores SVG; añadidos las notaciones funcionales rgba(), hsl(), hsla().
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}{{Spec2('CSS2.1')}}Añadidos el naranja y los colores de sistema.
{{SpecName('CSS1', '#color-units', '<color>')}}{{Spec2('CSS1')}}Definición Inicial
- -

Compatibilidad con los distintos navegadores

+ rgb(100%, 0, 20%) /* ¡ERROR! No mezcles notaciones de enteros y de porcentajes*/ +``` + +### `hsl()` + +Los colores también puede ser definidos usando el modelo tono (hue) - saturación (saturation) - brillo (lightness) (HSL) con la notación funcional hsl(). La ventaja del modelo HSL sobre el modelo RGB es que es mucho más intuitivo: puedes adivinar los colores que tú quieres y luego modificarlos. Es también más fácil crear conjuntos de colores (manteniendo el tono (hue) igual y modificando el brillo y la saturación. + +**El tono (Hue)** se representa como un ángulo del círculo de color (por así decir, el arco iris representado en un círculo). El ángulo se proporciona como un {{cssxref("<number>")}} sin unidades. Por definición **rojo=0=360**, y los demas colores están dispersos por el círculo, **verde=120**, **azul=240**, etc. Al ser un ánguilo implítamente -120=240 y 480=120. + +La saturación y el brillo son representados por porcentajes. +`100%` es **saturacion** completa, y `0%` es una sombra de gris.. +`100%` **brillo** es blanco, `0%` negro, y `50%` es brillo "normal". + +```css +hsl(0, 100%,50%) /* red */ +hsl(30, 100%,50%) +hsl(60, 100%,50%) +hsl(90, 100%,50%) +hsl(120,100%,50%) /* green */ +hsl(150,100%,50%) +hsl(180,100%,50%) +hsl(210,100%,50%) +hsl(240,100%,50%) /* blue */ +hsl(270,100%,50%) +hsl(300,100%,50%) +hsl(330,100%,50%) +hsl(360,100%,50%) /* red */ + +hsl(120,100%,25%) /* dark green */ +hsl(120,100%,50%) /* green */ +hsl(120,100%,75%) /* light green */ + +hsl(120,100%,50%) /* green */ +hsl(120, 67%,50%) +hsl(120, 33%,50%) +hsl(120, 0%,50%) + +hsl(120, 60%,70%) /* pastel green */ +``` + +### `rgba()` + +Podemos definir los colores con el modelo Rojo (red) - Verde (green) - Azul (blue) - alpha (RGBa) usando la notación funcional `rgba()`. RGBa amplia el modelo RGA añadiendo un canal alfa, permitiendo de esta manera especificar la opacidad de un color. +**a** representa opacidad: 0=transparente; 1=opaco; + +```css +rgba(255,0,0,0.1) /* 10% opaque red */ +rgba(255,0,0,0.4) /* 40% opaque red */ +rgba(255,0,0,0.7) /* 70% opaque red */ +rgba(255,0,0, 1) /* full opaque red */ +``` + +### `hsla()` + +Podemos definir los colores usando el modelo saturación tono (hue) - (saturation) - brillo (lightness) (HSLa) usando lla notación funcional `hsla()`. HSLa amplía el modelo HSL incluyendo el canal alfa, permitiendo de esta manera especificar la opacidad de un color. +**a** es la opacidad: 0=transparente; 1=opaco; + +```css +hsla(240,100%,50%,0.05) /* 5% opaque blue */ +hsla(240,100%,50%, 0.4) /* 40% opaque blue */ +hsla(240,100%,50%, 0.7) /* 70% opaque blue */ +hsla(240,100%,50%, 1) /* full opaque blue */ +``` + +### Colores de Sistema + +No todos los colores de sistema son soportados por todos los sistemas. {{deprecated_inline}} para usar en páginas web públicas.. + +- ActiveBorder + - : Borde de la ventana activa +- ActiveCaption + - : Título de la ventana activa. Deb usarse con `CaptionText` como color de fondo +- AppWorkspace + - : Color de fondo para el interfaz de múltiples documentos. +- Background + - : Fondo de escritorio. +- ButtonFace + - : Color de fondo frontal para elementos 3-D que parecen 3-D debido a una capa del borde próximo. Debe usar con el color de frente `ButtonText` . +- ButtonHighlight + - : The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border. +- ButtonShadow + - : The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border. +- ButtonText + - : Text on push buttons. Should be used with the `ButtonFace` or `ThreeDFace` background color. +- CaptionText + - : Text in caption, size box, and scrollbar arrow box. Should be used with the `ActiveCaption` background color. +- GrayText + - : Gris para el texto deshabilitado: +- Highlight + - : Elemento(s) seleccionados en un control. Debe ser usado con el color de frente `HighlightText.` +- HighlightText + - : Texto de los elemento(s) seleccionados en un control. Debe usar con el color de fondo `Highlight`. +- InactiveBorder + - : Borde de ventana inactivo. +- InactiveCaption + - : Inactive window caption. Should be used with the `InactiveCaptionText` foreground color. +- InactiveCaptionText + - : Color of text in an inactive caption. Should be used with the `InactiveCaption` background color. +- InfoBackground + - : Color de foBackground color for tooltip controls. Should be used with the `InfoText` foreground color. +- InfoText + - : Text color for tooltip controls. Should be used with the `InfoBackground` background color. +- Menu + - : Fondo del menú. Debe ser usado Menu background. Should be used with the `MenuText` or `-moz-MenuBarText` foreground color. +- MenuText + - : Texto en el menú. Debe ser usado Text in menus. Should be used with the `Menu` background color. +- Scrollbar + - : Color de fondo para las barras de scroll. +- ThreeDDarkShadow + - : The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. +- ThreeDFace + - : The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the `ButtonText` foreground color. +- ThreeDHighlight + - : The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two + concentric layers of surrounding border. +- ThreeDLightShadow + - : The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two + concentric layers of surrounding border. +- ThreeDShadow + - : The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. +- Window + - : Fondo de las ventanas. Debe usarse con el color de frente `WindowText`. +- WindowFrame + - : Marco de ventana +- WindowText + - : Texto en las ventanas.Debe usarse con el color de fono de ventana. + +### Extensiones de Mozilla al Sistema de Colores + +- \-moz-ButtonDefault + - : The border color that goes around buttons that represent the default action for a dialog box. +- \-moz-ButtonHoverFace + - : The background color of a button that the mouse pointer is over (which would be `ThreeDFace` or `ButtonFace` when the mouse pointer is not over it). Should be used with the `-moz-ButtonHoverText` foreground color. +- \-moz-ButtonHoverText + - : The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it). Should be used with the `-moz-ButtonHoverFace background` color. +- \-moz-CellHighlight + - : Background color for selected item in a tree widget. Should be used with the `-moz-CellHighlightText` foreground color. See also `-moz-html-CellHighlight`. +- \-moz-CellHighlightText + - : Text color for a selected item in a tree. Should be used with the `-moz-CellHighlight background` color. See also `-moz-html-CellHighlightText`. +- \-moz-Combobox + - : {{Gecko_minversion_inline("1.9.2")}} Background color for combo-boxes. Should be used with the `-moz-ComboboxText` foreground color. In versions prior to 1.9.2, use `-moz-Field` instead. +- \-moz-ComboboxText + - : {{Gecko_minversion_inline("1.9.2")}} Text color for combo-boxes. Should be used with the `-moz-Combobox` background color. In versions prior to 1.9.2, use `-moz-FieldText` instead. +- \-moz-Dialog + - : Color de fondo para cuadros de diálogo. Debe usarse con el color de frente `-moz-DialogText` +- \-moz-DialogText + - : Text color for dialog boxes. Should be used with the `-moz-Dialog` background color. +- \-moz-dragtargetzone + + \-moz-EvenTreeRow + + - : {{gecko_minversion_inline("1.9")}} Background color for even-numbered rows in a tree. Should be used with the `-moz-FieldText` foreground color. In Gecko versions prior to 1.9, use `-moz-Field`. See also `-moz-OddTreeRow`. + +- \-moz-Field + - : Text field background color. Should be used with the `-moz-FieldText` foreground color. +- \-moz-FieldText + - : Text field text color. Should be used with the `-moz-Field`, `-moz-EvenTreeRow`, or `-moz-OddTreeRow` background color. +- \-moz-html-CellHighlight + - : {{gecko_minversion_inline("1.9")}} Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the `-moz-html-CellHighlightText` foreground color. Prior to Gecko 1.9, use `-moz-CellHighlight`. +- \-moz-html-CellHighlightText + - : {{gecko_minversion_inline("1.9")}} Text color for highlighted items in HTML {{HTMLElement("select")}}s. Should be used with the `-moz-html-CellHighlight` background color. Prior to Gecko 1.9, use `-moz-CellHighlightText`. +- \-moz-mac-accentdarkestshadow + + \-moz-mac-accentdarkshadow + + \-moz-mac-accentface + + \-moz-mac-accentlightesthighlight + + \-moz-mac-accentlightshadow + + \-moz-mac-accentregularhighlight + + \-moz-mac-accentregularshadow + + \-moz-mac-chrome-active + + - : {{Gecko_minversion_inline("1.9.1")}} + +- \-moz-mac-chrome-inactive + - : {{Gecko_minversion_inline("1.9.1")}} +- \-moz-mac-focusring + + \-moz-mac-menuselect + + \-moz-mac-menushadow + + \-moz-mac-menutextselect + + \-moz-MenuHover + + - : Background color for hovered menu items. Often similar to `Highlight`. Should be used with the `-moz-MenuHoverText` or `-moz-MenuBarHoverText` foreground color. + +- \-moz-MenuHoverText + - : Text color for hovered menu items. Often similar to `HighlightText`. Should be used with the `-moz-MenuHover` background color. +- \-moz-MenuBarText + - : {{Gecko_minversion_inline("1.9.2")}} Text color in menu bars. Often similar to `MenuText`. Should be used on top of `Menu` background. +- \-moz-MenuBarHoverText + - : Color for hovered text in menu bars. Often similar to `-moz-MenuHoverText`. Should be used on top of `-moz-MenuHover` background. +- \-moz-nativehyperlinktext + - : {{Gecko_minversion_inline("1.9.1")}} Default platform hyperlink color. +- \-moz-OddTreeRow + - : {{gecko_minversion_inline("1.9")}} Background color for odd-numbered rows in a tree. Should be used with the `-moz-FieldText` foreground color. In Gecko versions prior to 1.9, use `-moz-Field`. See also `-moz-EvenTreeRow`. +- \-moz-win-communicationstext + - : {{gecko_minversion_inline("1.9")}} Should be used for text in objects with `{{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;`. +- \-moz-win-mediatext + - : {{gecko_minversion_inline("1.9")}} Should be used for text in objects with `{{cssxref("-moz-appearance")}}: -moz-win-media-toolbox`. + +### Extensiones de Mozilla a las Preferencias de Color + +- \-moz-activehyperlinktext + - : Preferencias de usuario para el color de texto de los enlaces activos. Debe ser usado con el color de fondo por defecto del documento. +- \-moz-default-background-color + - : {{Gecko_minversion_inline("5.0")}} Preferencias de usuario para el color de fondo del documento. +- \-moz-default-color + - : {{Gecko_minversion_inline("5.0")}} Preferencias de usuario para el color del texto. +- \-moz-hyperlinktext + - : Preferencias de usuario para el color del texto de los enlaces sin visitar. Debe ser usado con el color de fondo por defecto del documento. +- \-moz-visitedhyperlinktext + - : Preferencias de usuario para el color del texto de los enlaces ya visitados. Debe ser usado con el color de fondo por defecto del documento. + +## Especificaciones + +| Especificación | Estado | Comentario | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS4 Colors', '#colorunits', '<color>')}} | {{Spec2('CSS4 Colors')}} | Añadido el color `rebeccapurple`. | +| {{SpecName('CSS3 Colors', '#colorunits', '<color>')}} | {{Spec2('CSS3 Colors')}} | Colores de sistema depreciados; añadidos colores SVG; añadidos las notaciones funcionales `rgba()`, `hsl()`, `hsla().` | +| {{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}} | {{Spec2('CSS2.1')}} | Añadidos el naranja y los colores de sistema. | +| {{SpecName('CSS1', '#color-units', '<color>')}} | {{Spec2('CSS1')}} | Definición Inicial | + +## Compatibilidad con los distintos navegadores {{Compat("css.types.color")}} -

Ver además

+## Ver además -
    -
  • La propiedad {{Cssxref("opacity")}} , que permite definir la transparencia a nivel de elemento.
    • -
  • Las propiedades {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}, {{Cssxref("box-shadow")}}.
    • -
+- La propiedad {{Cssxref("opacity")}} , que permite definir la transparencia a nivel de elemento. +- Las propiedades {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}, {{Cssxref("box-shadow")}}. diff --git a/files/es/web/css/column-count/index.md b/files/es/web/css/column-count/index.md index e9874ef0fa2068..5ec36e45cd860b 100644 --- a/files/es/web/css/column-count/index.md +++ b/files/es/web/css/column-count/index.md @@ -8,88 +8,75 @@ tags: - Referencia translation_of: Web/CSS/column-count --- -
{{CSSRef}}
+{{CSSRef}} -

La propiedad CSS column-count divide el contenido de un elemento en el número de columnas indicado.

+La propiedad [CSS](/es/docs/Web/CSS) **`column-count`** divide el contenido de un elemento en el número de columnas indicado. -
{{EmbedInteractiveExample("pages/css/column-count.html")}}
+{{EmbedInteractiveExample("pages/css/column-count.html")}} -

Sintaxis

+## Sintaxis -
/* Keyword value */
+```css
+/* Keyword value */
 column-count: auto;
 
-/* <integer> value */
+/*  value */
 column-count: 3;
 
 /* Global values */
 column-count: inherit;
 column-count: initial;
-column-count: unset;
+column-count: unset; +``` -

Valores

+### Valores -
-
auto
-
El número de columnas es determinado por otras propiedades CSS, como {{cssxref("column-width")}}.
-
{{cssxref("<integer>")}}
-
Es un {{cssxref("<integer>")}} estrictamente positivo que describe el número ideal de columnas en las que el contenido del elemento va a fluir. Si la propiedad {{cssxref("column-width")}} se establece a un valor que no sea auto, se limitará a indicar el número máximo permitido de columnas.
-
+- `auto` + - : El número de columnas es determinado por otras propiedades CSS, como {{cssxref("column-width")}}. +- `{{cssxref("<integer>")}}` + - : Es un {{cssxref("<integer>")}} estrictamente positivo que describe el número ideal de columnas en las que el contenido del elemento va a fluir. Si la propiedad {{cssxref("column-width")}} se establece a un valor que no sea `auto`, se limitará a indicar el número máximo permitido de columnas. -

Sintaxis formal

+### Sintaxis formal {{csssyntax}} -

Ejemplos

+## Ejemplos -

HTML

+### HTML -
<p class="content-box">
+```html
+

   This is a bunch of text split into three columns
   using the CSS `column-count` property. The text
   is equally distributed over the columns.
-</p>
-
+

+``` -

CSS

+### CSS -
.content-box {
+```css
+.content-box {
   column-count: 3;
 }
-
+``` -

Resultado

+### Resultado -

{{EmbedLiveSample('Example', 'auto', 120)}}

+{{EmbedLiveSample('Example', 'auto', 120)}} -

Especificaciones

+## Especificaciones - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Multicol', '#column-count', 'column-count')}}{{Spec2('CSS3 Multicol')}}Definición inicial
+| Especificación | Estado | Comentario | +| ------------------------------------------------------------------------------------ | ------------------------------------ | ------------------ | +| {{SpecName('CSS3 Multicol', '#column-count', 'column-count')}} | {{Spec2('CSS3 Multicol')}} | Definición inicial | -

{{cssinfo}}

+{{cssinfo}} -

Compatibilidad con navegadores

+## Compatibilidad con navegadores -

{{Compat("css.properties.column-count")}}

+{{Compat("css.properties.column-count")}} -

Ver también

+## Ver también - +- [Diseño con columnas múltiples](/es/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Conceptos básicos de Multicol](/es/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol) diff --git a/files/es/web/css/column-gap/index.md b/files/es/web/css/column-gap/index.md index b4171b22e27157..15073afc19da97 100644 --- a/files/es/web/css/column-gap/index.md +++ b/files/es/web/css/column-gap/index.md @@ -5,53 +5,55 @@ translation_of: Web/CSS/column-gap translation_of_original: Web/CSS/grid-column-gap original_slug: Web/CSS/grid-column-gap --- -

La propiedad CSS grid-column-gap especifica el {{glossary("gutters","gutter")}} entre {{glossary("grid columns")}}.

+La propiedad CSS **`grid-column-gap`** especifica el {{glossary("gutters","gutter")}} entre {{glossary("grid columns")}}. -
/* <length> values */
+```css
+/*  values */
 grid-column-gap: 20px;
 grid-column-gap: 1em;
 grid-column-gap: 3vmin;
 grid-column-gap: 0.5cm;
 
-/* <percentage> value */
+/*  value */
 grid-column-gap: 10%;
 
 /* Global values */
 grid-column-gap: inherit;
 grid-column-gap: initial;
 grid-column-gap: unset;
-
+``` -

El efecto es como si las {{glossary("grid lines")}} afectadas adquieren una anchura específica: Los {{glossary("grid tracks", "grid track")}} entre dos líneas de la cuadrícula es el espacio entre los canales que las representa. Para el tamaño de la pista, cada canal se trata esencialmente como una pista adicional del tamaño especificado. Los valores negativos no son válidos.

+El efecto es como si las {{glossary("grid lines")}} afectadas adquieren una anchura específica: Los {{glossary("grid tracks", "grid track")}} entre dos líneas de la cuadrícula es el espacio entre los canales que las representa. Para el tamaño de la pista, cada canal se trata esencialmente como una pista adicional del tamaño especificado. Los valores negativos no son válidos. -

{{cssinfo}}

+{{cssinfo}} -

Syntax

+## Syntax -

Valores

+### Valores -
-
<length-percentage>
-
Es el ancho del canal que separa las columnas de la grilla. {{cssxref("<percentage>")}} valores son relativos a la dimensión del elemento.
-
+- `` + - : Es el ancho del canal que separa las columnas de la grilla. {{cssxref("<percentage>")}} valores son relativos a la dimensión del elemento. -

Sintaxis formal

+### Sintaxis formal {{csssyntax}} -

Ejemplo

+## Ejemplo -

HTML

+### HTML -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
+```html +
+
+
+
+
+``` -

CSS

+### CSS -
#grid {
+```css
+#grid {
   display: grid;
   height: 100px;
   grid-template-columns: repeat(3, 1fr);
@@ -59,101 +61,72 @@ grid-column-gap: unset;
   grid-column-gap: 20px;
 }
 
-#grid > div {
+#grid > div {
   background-color: lime;
 }
-
- -

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

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-column-gap", "grid-column-gap")}}{{Spec2("CSS3 Grid")}}Definición incial
- -

Compatibilidad en navegadores

- -

- - - -

{{Compat("css.properties.grid-column-gap")}}

- -

- -

Ver también

- - - - +``` + +{{EmbedLiveSample("Example", "100%", "100px")}} + +## Especificaciones + +| Especificación | Estado | Comentario | +| ------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------- | +| {{SpecName("CSS3 Grid", "#propdef-grid-column-gap", "grid-column-gap")}} | {{Spec2("CSS3 Grid")}} | Definición incial | + +## Compatibilidad en navegadores + +{{Compat("css.properties.grid-column-gap")}} + +## Ver también + +- Propiedades CSS relacionadas: {{cssxref("grid-row-gap")}}, {{cssxref("grid-gap")}} +- Guía sobre CSS Grid Layout: _[Conceptos básicos sobre CSS Grid Layout - Gutters](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters)_ + +1. [**CSS**](/es/docs/Web/CSS) +2. **[Referencia CSS](/es/docs/Web/CSS/Reference)** +3. [Diseño CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout) +4. **Guías** + + 1. [Conceptos básicos sobre Diseño CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) + 2. [Relación con otros métodos de diseño](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout) + 3. [Posicionamiento basado en línea](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) + 4. [Grid template areas](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas) + 5. [Layout using named grid lines](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines) + 6. [Auto-placement in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout) + 7. [Box alignment in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout) + 8. [Grids, logical values and writing modes](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes) + 9. [CSS Grid Layout and Accessibility](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility) + 10. [CSS Grid Layout and Progressive Enhancement](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) + 11. [Realizing common layouts using grids](/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout) + +5. **Propiedades** + + 1. [grid](/es/docs/Web/CSS/grid) + 2. [grid-area](/es/docs/Web/CSS/grid-area) + 3. [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns) + 4. [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow) + 5. [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows) + 6. [grid-column](/es/docs/Web/CSS/grid-column) + 7. [grid-column-end](/es/docs/Web/CSS/grid-column-end) + 8. [grid-column-gap](/es/docs/Web/CSS/grid-column-gap) + 9. [grid-column-start](/es/docs/Web/CSS/grid-column-start) + 10. [grid-gap](/es/docs/Web/CSS/grid-gap) + 11. [grid-row](/es/docs/Web/CSS/grid-row) + 12. [grid-row-end](/es/docs/Web/CSS/grid-row-end) + 13. [grid-row-gap](/es/docs/Web/CSS/grid-row-gap) + 14. [grid-row-start](/es/docs/Web/CSS/grid-row-start) + 15. [grid-template](/es/docs/Web/CSS/grid-template) + 16. [grid-template-areas](/es/docs/Web/CSS/grid-template-areas) + 17. [grid-template-colunms](/es/docs/Web/CSS/grid-template-columns) + 18. [grid-template-rows](/es/docs/Web/CSS/grid-template-rows) + +6. **Glosario** + + 1. [Grid lines](/es/docs/Glossary/Grid_lines) + 2. [Grid tracks](/es/docs/Glossary/Grid_tracks) + 3. [Grid cell](/es/docs/Glossary/Grid_cell) + 4. [Grid areas](/es/docs/Glossary/Grid_areas) + 5. [Gutters](/es/docs/Glossary/Gutters) + 6. [Grid row](/es/docs/Glossary/Grid_rows) + 7. [Grid column](/es/docs/Glossary/Grid_column) diff --git a/files/es/web/css/column-span/index.md b/files/es/web/css/column-span/index.md index 54e1a6a45b120d..3b2510c1680ecd 100644 --- a/files/es/web/css/column-span/index.md +++ b/files/es/web/css/column-span/index.md @@ -7,13 +7,14 @@ tags: - Referencia translation_of: Web/CSS/column-span --- -
{{CSSRef}}
+{{CSSRef}} -

La propiedad column-span CSS hace posible que un elemento se extienda sobre todas las columnas cuando su valor se establece a all.

+La propiedad **`column-span`** [CSS](/es/docs/Web/CSS) hace posible que un elemento se extienda sobre todas las columnas cuando su valor se establece a `all`. -
{{EmbedInteractiveExample("pages/css/column-span.html")}}
+{{EmbedInteractiveExample("pages/css/column-span.html")}} -
/* Keyword values */
+```css
+/* Keyword values */
 column-span: none;
 column-span: all;
 
@@ -21,79 +22,64 @@ column-span: all;
 column-span: inherit;
 column-span: initial;
 column-span: unset;
-
+``` -

A un elemento que se extiende más de una columna se le llama elemento extendido (spanning element).

+A un elemento que se extiende más de una columna se le llama elemento extendido (_spanning element)_. -

Sintaxis

+## Sintaxis -

La propiedad column-span se especifica como una de las palabras clave listadas a continuación.

+La propiedad `column-span` se especifica como una de las palabras clave listadas a continuación. -

Valores

+### Valores -
-
none
-
El elemento no se extiende en sobre varias columnas.
-
all
-
El elemento se extiende sobre todas las columnas. El contenido en el flujo normal que aparece antes del elemento se equilibra automáticamente en todas las columnas antes de que aparezca el elemento. El elemento establece un nuevo contexto de formato de bloque..
-
+- `none` + - : El elemento no se extiende en sobre varias columnas. +- `all` + - : El elemento se extiende sobre todas las columnas. El contenido en el flujo normal que aparece antes del elemento se equilibra automáticamente en todas las columnas antes de que aparezca el elemento. El elemento establece un nuevo contexto de formato de bloque.. -

Sintaxis formal

+### Sintaxis formal {{csssyntax}} -

Ejemplo

+## Ejemplo -

En este ejemplo, la cabecera se expande sobre todas las columnas del artículo.

+En este ejemplo, la cabecera se expande sobre todas las columnas del artículo. -

HTML

+### HTML -
<article>
-  <h2>My Very Special Columns</h2>
-  <p>This is a bunch of text split into three columns
+```html
+

+  
My Very Special Columns

+  
This is a bunch of text split into three columns
      using the CSS `columns` property. The text
-     is equally distributed over the columns.</p>
-</article>
-
+ is equally distributed over the columns.

+ +``` -

CSS

+### CSS -
article {
+```css
+article {
   columns: 3;
 }
 
 h2 {
   column-span: all;
 }
-
+``` -

Resultado

+### Resultado -

{{EmbedLiveSample('Example', 'auto', 120)}}

+{{EmbedLiveSample('Example', 'auto', 120)}} -

Especificaciones

+## Especificaciones - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Multicol', '#column-span', 'column-span')}}{{Spec2('CSS3 Multicol')}}Definición inicial.
+| Especificación | Estado | Comentario | +| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName('CSS3 Multicol', '#column-span', 'column-span')}} | {{Spec2('CSS3 Multicol')}} | Definición inicial. | -

{{cssinfo}}

+{{cssinfo}} -

Compatibilidad con navegadores

+## Compatibilidad con navegadores - - -

{{Compat("css.properties.column-span")}}

+{{Compat("css.properties.column-span")}} diff --git a/files/es/web/css/comments/index.md b/files/es/web/css/comments/index.md index 272bb195a4f5e0..1b32f03d253bcf 100644 --- a/files/es/web/css/comments/index.md +++ b/files/es/web/css/comments/index.md @@ -8,21 +8,24 @@ tags: translation_of: Web/CSS/Comments original_slug: Web/CSS/Comentarios --- -
{{CSSRef}}
+{{CSSRef}} -

Resumen

+## Resumen -

Los comentarios son usados para añadir notas explicatorias o prevenir que el navegador interprete partes de la hoja de estilos.

+Los comentarios son usados para añadir notas explicatorias o prevenir que el navegador interprete partes de la hoja de estilos. -

Los comentarios se pueden colocar en cualquier espacio en blanco que se permita en la hoja de estilos.

+Los comentarios se pueden colocar en cualquier espacio en blanco que se permita en la hoja de estilos. -

Sintaxis

+## Sintaxis -
/* Comentario */
+``` +/* Comentario */ +``` -

Examples

+## Examples -
/* Comentario de una sola línea */
+```css
+/* Comentario de una sola línea */
 
 /*
 Un comentario
@@ -30,21 +33,17 @@ que se extiende
 en varias
 líneas
 */
-
+``` -

Notas

+## Notas -

La sintaxis de comentarios /* */ es usada para comentarios de una o múltiples líneas. No hay otra forma de especificar comentarios en hojas de estilos externas. Sin embargo, cuando se usa el elemento <style>, se puede usar <!-- --> para ocultar CSS para navegadores antiguos, aunque no es recomendable. Como en la mayoría de los lenguajes de programación que usan la sintaxis de comentarios /* */ estos no pueden ser anidados. En otras palabras, la primera instancia de */ que siga a una instancia de /* cerrará el comentario.

+La sintaxis de comentarios `/* */` es usada para comentarios de una o múltiples líneas. No hay otra forma de especificar comentarios en hojas de estilos externas. Sin embargo, cuando se usa el elemento ` + + + + +

+ +
+
DIV #1 +
position: absolute; +
z-index: 5; +
+ +
+
DIV #2 +
position: relative; +
z-index: 3; +
+ +
+
DIV #3 +
position: relative; +
z-index: 2; +
+ +
+
DIV #4 +
position: absolute; +
z-index: 1; +
+ +
+
DIV #5 +
no positioning +
z-index: 8; +
+ + + +``` + +### También puedes ver + +- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index " javichito Apilando sin z-index") : Reglas de apilamiento por defecto +- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float "Apilamiento y float") : Cómo son manejados los elementos flotantes +- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento "El contexto de apilamiento") : Notas sobre el contexto de apilamiento +- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento "Ejemplo 1 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en el último nivel +- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento "Ejemplo 2 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en todos los niveles +- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento "Ejemplo 3 del contexto de apilamiento") : Jerarquía HTML de 3 niveles, z-index en el segundo nivel + +### Información del documento original + +- Autor(es): Paolo Lombardi +- Este artículo es una traducción al inglés de un artículo que escribí en italiano para [YappY](http://www.yappy.it). He dado el derecho de compartir el contenido bajo [Creative Commons: Attribution-Sharealike license](http://creativecommons.org/licenses/by-sa/2.0/) +- Last Updated Date: November 3rd, 2014 + +{{ languages( { "fr": "fr/CSS/Comprendre\_z-index/Ajout\_de\_z-index" } ) }} diff --git a/files/es/web/css/css_positioning/understanding_z_index/index.md b/files/es/web/css/css_positioning/understanding_z_index/index.md index fb4de9b9099a45..308cfdecc5c595 100644 --- a/files/es/web/css/css_positioning/understanding_z_index/index.md +++ b/files/es/web/css/css_positioning/understanding_z_index/index.md @@ -11,38 +11,30 @@ tags: translation_of: Web/CSS/CSS_Positioning/Understanding_z_index original_slug: Web/CSS/CSS_Positioning/entendiendo_z_index --- -

Usualmente se puede considerar que las páginas HTML tienen dos dimensiones, porque el texto, las imágenes y otros elementos son organizados en la página sin superponerse. Hay un solo flujo de renderizado, y todos los elementos son concientes del espacio ocupado por otros. El atributo {{cssxref("z-index")}} te permite ajustar el orden de las capas de los objetos cuando el contenido está siendo renderizado.

+Usualmente se puede considerar que las páginas HTML tienen dos dimensiones, porque el texto, las imágenes y otros elementos son organizados en la página sin superponerse. Hay un solo flujo de renderizado, y todos los elementos son concientes del espacio ocupado por otros. El atributo {{cssxref("z-index")}} te permite ajustar el orden de las capas de los objetos cuando el contenido está siendo renderizado. -
-

En CSS 2.1, cada caja tiene una posición en tres dimensiones. Adicionalmente a sus posiciones horizontales y verticales, las cajas caen a lo largo de un "eje-z" y son formadas una encima de la otra. Las posiciones eje-Z son particularmente relevantes cuando las cajas se superponen visualmente.

-
+> En CSS 2.1, cada caja tiene una posición en tres dimensiones. Adicionalmente a sus posiciones horizontales y verticales, las cajas caen a lo largo de un "eje-z" y son formadas una encima de la otra. Las posiciones eje-Z son particularmente relevantes cuando las cajas se superponen visualmente. -

(de CSS 2.1 Section 9.9.1 - Layered presentation)

+(de [CSS 2.1 Section 9.9.1 - Layered presentation](http://www.w3.org/TR/CSS21/visuren.html#z-index)) -

Eso significa que las reglas de estilo CSS te permiten posicionar cajas en capas adicionales a la capa normal de renderizado (capa 0). La posición Z de cada capa es expresada como un entero que representa el orden de apilamiento durante el proceso de renderizado. Números más grandes significan mayor cercanía al observador. La posición Z puede ser controlada con la propiedad CSS {{ cssxref("z-index") }}.

+Eso significa que las reglas de estilo CSS te permiten posicionar cajas en capas adicionales a la capa normal de renderizado (capa 0). La posición Z de cada capa es expresada como un entero que representa el orden de apilamiento durante el proceso de renderizado. Números más grandes significan mayor cercanía al observador. La posición Z puede ser controlada con la propiedad CSS {{ cssxref("z-index") }}. -

Usar z-index parece extremadamente fácil: una sola propiedad, asigna un número entero, con un comportamiento fácil de entender. Sin embargo, cuando z-index es aplicada a jerarquías complejas de elementos HTML, su comportamiento puede ser difícil de entender o incluso impredecible. Esto es debido a reglas complejas de apilamiento. De hecho una sección dedicada ha sido reservada en la especificación CSS CSS-2.1 Appendix E para explicar mejor estas reglas.

+Usar z-index parece extremadamente fácil: una sola propiedad, asigna un número entero, con un comportamiento fácil de entender. Sin embargo, cuando z-index es aplicada a jerarquías complejas de elementos HTML, su comportamiento puede ser difícil de entender o incluso impredecible. Esto es debido a reglas complejas de apilamiento. De hecho una sección dedicada ha sido reservada en la especificación CSS [CSS-2.1 Appendix E](http://www.w3.org/TR/CSS21/zindex.html) para explicar mejor estas reglas. -

Este artículo va a intentar explicar esas reglas, de una forma más simple y con varios ejemplos.

+Este artículo va a intentar explicar esas reglas, de una forma más simple y con varios ejemplos. -
    -
  1. Apilando sin z-index : Reglas de apilamiento por defecto
    2. -
  2. Apilamiento y float : Cómo son manejados los elementos flotantes
    3. -
  3. Agregando z-index : Usando z-index para cambiar el apilamiento por defecto
    4. -
  4. El contexto de apilamiento : Notas sobre el contexto de apilamiento
    5. -
  5. Ejemplo 1 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en el último nivel
    6. -
  6. Ejemplo 2 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en todos los niveles
    7. -
  7. Ejemplo 3 del contexto de apilamiento : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
    8. -
+1. [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index " javichito Apilando sin z-index") : Reglas de apilamiento por defecto +2. [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float "Apilamiento y float") : Cómo son manejados los elementos flotantes +3. [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index") : Usando z-index para cambiar el apilamiento por defecto +4. [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento "El contexto de apilamiento") : Notas sobre el contexto de apilamiento +5. [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento "Ejemplo 1 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en el último nivel +6. [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento "Ejemplo 2 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en todos los niveles +7. [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento "Ejemplo 3 del contexto de apilamiento") : Jerarquía HTML de 3 niveles, z-index en el segundo nivel -

Nota del autor: Gracias a Wladimir Palant y Rod Whiteley por la revisión.

+_Nota del autor: Gracias a Wladimir Palant y Rod Whiteley por la revisión._ -
-

Información del documento original

+### Información del documento original -
    -
  • Autor(es): Paolo Lombardi
    • -
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • -
  • Fecha de última actualización: 9 de Julio del 2005
    • -
-
+- Autor(es): Paolo Lombardi +- Este artículo es una traducción al inglés de un artículo que escribí en italiano para [YappY](http://www.yappy.it). He dado el derecho de compartir el contenido bajo [Creative Commons: Attribution-Sharealike license](http://creativecommons.org/licenses/by-sa/2.0/) +- Fecha de última actualización: 9 de Julio del 2005 diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md b/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md index e583fb854fd9a0..8a368063d2f9dc 100644 --- a/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md @@ -11,60 +11,58 @@ tags: translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float original_slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float --- -
{{cssref}}
+{{cssref}} -

Apilamiento y float

+### Apilamiento y float -

Para los bloques flotantes el orden de apilamiento es un poco diferente. Los bloques flotantes son colocados entre bloques no posicionados y bloques posicionados:

+Para los bloques flotantes el orden de apilamiento es un poco diferente. Los bloques flotantes son colocados entre bloques no posicionados y bloques posicionados: -
    -
  1. Fondo y bordes del elemento raiz
    2. -
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. -
  3. Bloques flotantes
    4. -
  4. Elementos posicionados descendentemente , en orden de aparición (en HTML)
    5. -
+1. Fondo y bordes del elemento raiz +2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML) +3. Bloques flotantes +4. Elementos posicionados descendentemente , en orden de aparición (en HTML) -

En realidad, como puedes ver en el siguiente ejemplo, el fondo y el borde del bloque no posicionado (DIV #4) no son afectados por los bloques flotantes, mientras que el contenido si es afectado. Esto ocurre de acuerdo al comportamiento flotante stándar de CSS.

+En realidad, como puedes ver en el siguiente ejemplo, el fondo y el borde del bloque no posicionado (DIV #4) no son afectados por los bloques flotantes, mientras que el contenido si es afectado. Esto ocurre de acuerdo al comportamiento flotante stándar de CSS. -

Este comportamiento puede ser explicado con una versión mejorada de la lista previa:

+Este comportamiento puede ser explicado con una versión mejorada de la lista previa: -
    -
  1. Fondo y bordes del elemento raiz
    2. -
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. -
  3. Bloques flotantes
    4. -
  4. Descendientes en línea en el flujo normal
    5. -
  5. Elementos posicionados descendentemente , en orden de aparición (en HTML)
    6. -
+1. Fondo y bordes del elemento raiz +2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML) +3. Bloques flotantes +4. Descendientes en línea en el flujo normal +5. Elementos posicionados descendentemente , en orden de aparición (en HTML) -
Nota: En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.)
+> **Nota:** En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.) -

{{ EmbedLiveSample('Example_source_code', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }}

+{{ EmbedLiveSample('Example_source_code', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }} -

Código fuente de ejemplo

+## Código fuente de ejemplo -

HTML

+### HTML -
<div id="abs1">
-  <b>DIV #1</b><br />position: absolute;</div>
+```html
+

+  DIV #1
position: absolute;

 
-<div id="flo1">
-  <b>DIV #2</b><br />float: left;</div>
+

+  DIV #2
float: left;

 
-<div id="flo2">
-  <b>DIV #3</b><br />float: right;</div>
+

+  DIV #3
float: right;

 
-<br />
+

 
-<div id="sta1">
-  <b>DIV #4</b><br />no positioning</div>
+

+  DIV #4
no positioning

 
-<div id="abs2">
-  <b>DIV #5</b><br />position: absolute;</div>
-
+
+ DIV #5
position: absolute;
+``` -

CSS

+### CSS -
div {
+```css
+div {
   padding: 10px;
   text-align: center;
 }
@@ -117,29 +115,20 @@ b {
   left: 100px;
   border: 1px dashed #990;
   background-color: #fdd;
-}
- -

También puedes ver

- - - -
-

Información del documento original

- -
    -
  • Autor(es): Paolo Lombardi
    • -
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • -
  • Last Updated Date: November 3rd, 2014
    • -
-
- -

+} +``` + +### También puedes ver + +- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index " javichito Apilando sin z-index") : Reglas de apilamiento por defecto +- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index") : Usando z-index para cambiar el apilamiento por defecto +- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento "El contexto de apilamiento") : Notas sobre el contexto de apilamiento +- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento "Ejemplo 1 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en el último nivel +- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento "Ejemplo 2 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en todos los niveles +- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento "Ejemplo 3 del contexto de apilamiento") : Jerarquía HTML de 3 niveles, z-index en el segundo nivel + +### Información del documento original + +- Autor(es): Paolo Lombardi +- Este artículo es una traducción al inglés de un artículo que escribí en italiano para [YappY](http://www.yappy.it). He dado el derecho de compartir el contenido bajo [Creative Commons: Attribution-Sharealike license](http://creativecommons.org/licenses/by-sa/2.0/) +- Last Updated Date: November 3rd, 2014 diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md index d2a558d7d55bff..b80bb6ef23ba3f 100644 --- a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md @@ -5,71 +5,69 @@ translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_e original_slug: >- Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento --- -

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+« [CSS](/es/CSS "CSS") « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index "Understanding CSS z-index") -

Ejemplo 1 del contexto de apilamiento

+### Ejemplo 1 del contexto de apilamiento -

Empecemos con un ejemplo básico. En el contexto de apilamiento raíz tenemos dos DIVs (DIV #1 and DIV #3), ambos con posición relativa, pero sin propiedad z-index. Dentro del DIV #1 se encuentra el DIV #2 de posición absoluta, mientras que en el DIV #3 se encuentra el DIV #4 con posición absoluta, ambos sin propiedad z-index.

+Empecemos con un ejemplo básico. En el contexto de apilamiento raíz tenemos dos DIVs (DIV #1 and DIV #3), ambos con posición relativa, pero sin propiedad z-index. Dentro del DIV #1 se encuentra el DIV #2 de posición absoluta, mientras que en el DIV #3 se encuentra el DIV #4 con posición absoluta, ambos sin propiedad z-index. -

El único contexto de apilamiento es el contexto raíz. Sin la propiedad z-index, los elementos son apilados por orden de ocurrencia.

+El único contexto de apilamiento es el contexto raíz. Sin la propiedad z-index, los elementos son apilados por orden de ocurrencia. -

Stacking context example 1

+![Stacking context example 1](/@api/deki/files/914/=Understanding_zindex_05a.png) -

Si a DIV #2 le asignamos un valor z-index positivo (no-cero y no-auto), es renderizado encima de todos los otros DIVs.

+Si a DIV #2 le asignamos un valor z-index positivo (no-cero y no-auto), es renderizado encima de todos los otros DIVs. -

Stacking context example 1

+![Stacking context example 1](/@api/deki/files/915/=Understanding_zindex_05b.png) -

Luego si al DIV #4 también se le asigna un z-index positivo mayor que el z-index del DIV #2, es renderizado encima de los otros DIVs incluyendo DIV #2.

+Luego si al DIV #4 también se le asigna un z-index positivo mayor que el z-index del DIV #2, es renderizado encima de los otros DIVs incluyendo DIV #2. -

Stacking context example 1

+![Stacking context example 1](/@api/deki/files/916/=Understanding_zindex_05c.png) -

En este último ejemplo puedes ver que el DIV #2 y el DIV #4 no son hermanos, porque pertenecen a padres distintos en la jerarquía de elementos HTML. A pesar de esto, el apilamiento del DIV #4 con respecto al DIV #2 puede ser controlado a través de z-index. Pasa que, dado a que al DIV #1 y al DIV #3 no se le ha asignado ningún valor z-index, ellos no han creado un contexto de apilamiento. Esto significa que todos sus contenidos, incluyendo el DIV #2 y el DIV #4, pertenecen al mismo contexto de apilamiento raíz.

+En este último ejemplo puedes ver que el DIV #2 y el DIV #4 no son hermanos, porque pertenecen a padres distintos en la jerarquía de elementos HTML. A pesar de esto, el apilamiento del DIV #4 con respecto al DIV #2 puede ser controlado a través de z-index. Pasa que, dado a que al DIV #1 y al DIV #3 no se le ha asignado ningún valor z-index, ellos no han creado un contexto de apilamiento. Esto significa que todos sus contenidos, incluyendo el DIV #2 y el DIV #4, pertenecen al mismo contexto de apilamiento raíz. -

En términos de contextos de apilamiento, el DIV #1 y el DIV #3 son simplemente asimilados dentro del elemento raíz, y la jerarquía resultante es la siguiente:

+En términos de contextos de apilamiento, el DIV #1 y el DIV #3 son simplemente asimilados dentro del elemento raíz, y la jerarquía resultante es la siguiente: -
    -
  • contexto de apilamiento raíz -
      -
    • DIV #2 (z-index 1)
      • -
    • DIV #4 (z-index 2)
      • -
    -
    • -
+- contexto de apilamiento raíz -
Nota: El DIV #1 y el DIV #3 no son translúcidos. Es importante recordar que asignar una opacidad menor a 1 a un elemento posicionado implica la creación de un contexto de apilamiento, como ocurre cuando se añade un valor z-index. Y este ejemplo muestra que ocurre cuando un elemento padre no crea un contexto de apilamiento.
+ - DIV #2 (z-index 1) + - DIV #4 (z-index 2) -

Ejemplo

+> **Nota:** El DIV #1 y el DIV #3 no son translúcidos. Es importante recordar que asignar una opacidad menor a 1 a un elemento posicionado implica la creación de un contexto de apilamiento, como ocurre cuando se añade un valor z-index. Y este ejemplo muestra que ocurre cuando un elemento padre no crea un contexto de apilamiento. -

HTML

+## Ejemplo -
<div id="div1">
-<br /><span class="bold">DIV #1</span>
-<br />position: relative;
-   <div id="div2">
-   <br /><span class="bold">DIV #2</span>
-   <br />position: absolute;
-   <br />z-index: 1;
-   </div>
-</div>
+### HTML
 
-<br />
+```html
+

+
DIV #1
+
position: relative;
+   

+   
DIV #2
+   
position: absolute;
+   
z-index: 1;
+   

+

+
+

 
-<div id="div3">
-<br /><span class="bold">DIV #3</span>
-<br />position: relative;
-   <div id="div4">
-   <br /><span class="bold">DIV #4</span>
-   <br />position: absolute;
-   <br />z-index: 2;
-   </div>
-</div>
+

+
DIV #3
+
position: relative;
+   

+   
DIV #4
+   
position: absolute;
+   
z-index: 2;
+   

+

 
-</body></html>
-
+ +``` -

CSS

+### CSS -
.bold {
+```css
+.bold {
     font-weight: bold;
     font: 12px Arial;
 }
@@ -105,29 +103,24 @@ original_slug: >-
     background-color: #ddddff;
     text-align: left;
     padding-left: 10px;
-}
+} +``` -

Resultado

+### Resultado -

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}

+{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }} -

También puedes ver

+### También puedes ver - +- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index " javichito Apilando sin z-index") : Reglas de apilamiento por defecto +- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float "Apilamiento y float") : Cómo son manejados los elementos flotantes +- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index") : Usando z-index para cambiar el apilamiento por defecto +- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento "El contexto de apilamiento") : Notas sobre el contexto de apilamiento +- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento "Ejemplo 2 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en todos los niveles +- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento "Ejemplo 3 del contexto de apilamiento") : Jerarquía HTML de 3 niveles, z-index en el segundo nivel -
-

Información del documento original

+### Información del documento original -
    -
  • Autor(es): Paolo Lombardi
    • -
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • -
  • Last Updated Date: July 9th, 2005
    • -
-
+- Autor(es): Paolo Lombardi +- Este artículo es una traducción al inglés de un artículo que escribí en italiano para [YappY](http://www.yappy.it). He dado el derecho de compartir el contenido bajo [Creative Commons: Attribution-Sharealike license](http://creativecommons.org/licenses/by-sa/2.0/) +- Last Updated Date: July 9th, 2005 diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md index 5ac5bccb3478e0..deadaa6a7dc812 100644 --- a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md @@ -5,41 +5,36 @@ translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_e original_slug: >- Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento --- -

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+« [CSS](/es/CSS "CSS") « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index "Understanding CSS z-index") -

Ejemplo 2 del contexto de apilamiento

+### Ejemplo 2 del contexto de apilamiento -

Este es un ejemplo muy simple, pero es la clave para entender el concepto de contexto de apilamiento. Tenemos los mismos 4 DIVs del ejemplo previo, pero ahora las propiedades z-index son asignadas en ambos niveles de la jerarquía.

+Este es un ejemplo muy simple, pero es la clave para entender el concepto de _contexto de apilamiento._ Tenemos los mismos 4 DIVs del ejemplo previo, pero ahora las propiedades z-index son asignadas en ambos niveles de la jerarquía. -

{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}

+{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }} -

Puedes ver que el DIV #2 (z-index: 2) está encima del DIV #3 (z-index: 1), porque ambos pertenecen al mismo contexto de apilamiento (el contexto raíz), así que los valores z-index indican cómo son apilados los elementos.

+Puedes ver que el DIV #2 (z-index: 2) está encima del DIV #3 (z-index: 1), porque ambos pertenecen al mismo contexto de apilamiento (el contexto raíz), así que los valores z-index indican cómo son apilados los elementos. -

Lo que puede ser considerado extraño es que el DIV #2 (z-index: 2) está encima del DIV #4 (z-index: 10), a pesar de sus valores z-index. La razón es que ellos no pertenecen al mismo contexto de apilamiento. El DIV #4 pertenece al contexto de apilamiento creado por el DIV #3, y como explicamos previamente el DIV #3 (y todos su contenido) está debajo del DIV #2.

+Lo que puede ser considerado extraño es que el DIV #2 (z-index: 2) está encima del DIV #4 (z-index: 10), a pesar de sus valores z-index. La razón es que ellos no pertenecen al mismo contexto de apilamiento. El DIV #4 pertenece al contexto de apilamiento creado por el DIV #3, y como explicamos previamente el DIV #3 (y todos su contenido) está debajo del DIV #2. -

Para entender mejor esta situación, esta es la jerarquía del contexto de apilamiento:

+Para entender mejor esta situación, esta es la jerarquía del contexto de apilamiento: -
    -
  • contexto de apilamiento raíz -
      -
    • DIV #2 (z-index 2)
      • -
    • DIV #3 (z-index 1) -
        -
      • DIV #4 (z-index 10)
        • -
      -
      • -
    -
    • -
+- contexto de apilamiento raíz -
Nota: Vale la pena recordar que en general la jerarquía HTML es diferente de la jerarquía del contexto de apilamiento. En la jerarquía del contexto de apilamiento, los elementos que no crean un contexto de apilamiento son colapsados en sus padres.
+ - DIV #2 (z-index 2) + - DIV #3 (z-index 1) -

Código fuente de ejemplo

+ - DIV #4 (z-index 10) -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-<head><style type="text/css">
+> **Nota:** Vale la pena recordar que en general la jerarquía HTML es diferente de la jerarquía del contexto de apilamiento. En la jerarquía del contexto de apilamiento, los elementos que no crean un contexto de apilamiento son colapsados en sus padres.
+
+### Código fuente de ejemplo
+
+```html
+
+
+
 
-<body>
+
 
-    <br />
+    

 
-    <div id="div1"><br />
-        <span class="bold">DIV #1</span><br />
+    


+        DIV #1

         position: relative;
-        <div id="div2"><br />
-            <span class="bold">DIV #2</span><br />
-            position: absolute;<br />
+        


+            DIV #2

+            position: absolute;

             z-index: 2;
-        </div>
-    </div>
+        

+    

 
-    <br />
+    

 
-    <div id="div3"><br />
-        <span class="bold">DIV #3</span><br />
-        position: relative;<br />
+    


+        DIV #3

+        position: relative;

         z-index: 1;
-        <div id="div4"><br />
-            <span class="bold">DIV #4</span><br />
-            position: absolute;<br />
+        


+            DIV #4

+            position: absolute;

             z-index: 10;
-        </div>
-    </div>
-
-</body>
-</html>
-
- -

También puedes ver

- - - -
-

Información del documento original

- -
    -
  • Autor(es): Paolo Lombardi
    • -
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • -
  • Last Updated Date: July 9th, 2005
    • -
-
+ + + + + +``` + +### También puedes ver + +- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index " javichito Apilando sin z-index") : Reglas de apilamiento por defecto +- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float "Apilamiento y float") : Cómo son manejados los elementos flotantes +- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index") : Usando z-index para cambiar el apilamiento por defecto +- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento "El contexto de apilamiento") : Notas sobre el contexto de apilamiento +- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento "Ejemplo 1 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en el último nivel +- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento "Ejemplo 3 del contexto de apilamiento") : Jerarquía HTML de 3 niveles, z-index en el segundo nivel + +### Información del documento original + +- Autor(es): Paolo Lombardi +- Este artículo es una traducción al inglés de un artículo que escribí en italiano para [YappY](http://www.yappy.it). He dado el derecho de compartir el contenido bajo [Creative Commons: Attribution-Sharealike license](http://creativecommons.org/licenses/by-sa/2.0/) +- Last Updated Date: July 9th, 2005 diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md index 023f84081e4320..77366c20ed15e9 100644 --- a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md @@ -5,60 +5,55 @@ translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_e original_slug: >- Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento --- -

« CSS « Understanding CSS z-index

+« [CSS](/en/CSS "CSS") « [Understanding CSS z-index](/en/CSS/Understanding_z-index "Understanding CSS z-index") -

Ejemplo 3 del contexto de apilamiento

+### Ejemplo 3 del contexto de apilamiento -

Este último ejemplo muestra los problemas que surgen cuando se combinan varios elementos posicionados en una jerarquía HTML multi nivel y cuando los valores z-index son asignados usando selectores de clase.

+Este último ejemplo muestra los problemas que surgen cuando se combinan varios elementos posicionados en una jerarquía HTML multi nivel y cuando los valores z-index son asignados usando selectores de clase. -

Tomemos como ejemplo un menú jerárquico de tres niveles formado por varios DIVs posicionados. DIVs de segundo y tercer nivel aparecen cuando se pone el cursor encima o se hace clic en sus padres. Usualmente este tipo de menú es generado mediante un script del lado del cliente o del lado del servidor, así que las reglas de estilos son asignadas con un selector de clase en lugar de un selector de id.

+Tomemos como ejemplo un menú jerárquico de tres niveles formado por varios DIVs posicionados. DIVs de segundo y tercer nivel aparecen cuando se pone el cursor encima o se hace clic en sus padres. Usualmente este tipo de menú es generado mediante un script del lado del cliente o del lado del servidor, así que las reglas de estilos son asignadas con un selector de clase en lugar de un selector de id. -

Si los tres niveles del menú se superponen parcialmente, entonces gestionar el apilamiento se podría convertir en un problema.

+Si los tres niveles del menú se superponen parcialmente, entonces gestionar el apilamiento se podría convertir en un problema. -

{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }}

+{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }} -

El menú de primer nivel solo tiene posición relativa, así que ningún contexto de apilamiento es creado.

+El menú de primer nivel solo tiene posición relativa, así que ningún contexto de apilamiento es creado. -

El menú de segundo nivel tiene posición absoluta dentro del elemento padre. Para colocarlo encima de todos los menus de primer nivel, usamos z-index. El problema es que para cada menú de segundo nivel, un contexto de apilamiento es creado y cada menú de tercer nivel pertenece al contexto de su padre.

+El menú de segundo nivel tiene posición absoluta dentro del elemento padre. Para colocarlo encima de todos los menus de primer nivel, usamos z-index. El problema es que para cada menú de segundo nivel, un contexto de apilamiento es creado y cada menú de tercer nivel pertenece al contexto de su padre. -

De manera que un menú de tercer nivel va a ser apilado bajo los menus de segundo nivel porque todos los menus de segundo nivel comparten el mismo valor z-index y las reglas de apilamiento por defecto son aplicadas.

+De manera que un menú de tercer nivel va a ser apilado bajo los menus de segundo nivel porque todos los menus de segundo nivel comparten el mismo valor z-index y las reglas de apilamiento por defecto son aplicadas. -

Para entender mejor la situación, esta es la jerarquía del contexto de apilamiento:

+Para entender mejor la situación, esta es la jerarquía del contexto de apilamiento: -
    -
  • contexto de apilamiento raíz -
      -
    • NIVEL #1 -
        -
      • NIVEL #2 (z-index: 1) -
          -
        • NIVEL #3
          • -
        • ...
          • -
        • NIVEL #3
          • -
        -
        • -
      • NIVEL #2 (z-index: 1)
        • -
      • ...
        • -
      • NIVEL #2 (z-index: 1)
        • -
      -
      • -
    • NIVEL #1
      • -
    • ...
      • -
    • NIVEL #1
      • -
    -
    • -
+- contexto de apilamiento raíz -

Este problema puede ser evitado al remover la superposición entre menus de diferentes niveles, o usando valores z-index individuales (y diferentes) asignados a través del selector id en lugar de un selector de clase, o aplanando la jerarquía HTML.

+ - NIVEL #1 -
Nota: En el código fuente vas a ver que los menus de segundo y tercer nivel están hechos de varios DIVs contenidos en un contenedor con posición absoluta. Esto es útil para agrupar y posicionarlos todos a la vez.
+ - NIVEL #2 (z-index: 1) -

Código fuente de ejemplo

+ - NIVEL #3 + - ... + - NIVEL #3 -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-<head><style type="text/css">
+    - NIVEL #2 (z-index: 1)
+    - ...
+    - NIVEL #2 (z-index: 1)
+
+  - NIVEL #1
+  - ...
+  - NIVEL #1
+
+Este problema puede ser evitado al remover la superposición entre menus de diferentes niveles, o usando valores z-index individuales (y diferentes) asignados a través del selector id en lugar de un selector de clase, o aplanando la jerarquía HTML.
+
+> **Nota:** En el código fuente vas a ver que los menus de segundo y tercer nivel están hechos de varios DIVs contenidos en un contenedor con posición absoluta. Esto es útil para agrupar y posicionarlos todos a la vez.
+
+### Código fuente de ejemplo
+
+```html
+
+
+
 
-<body>
+
 
-<br />
+

 
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
+

+LEVEL #1
 
-   <div id="container1">
+   

 
-      <div class="lev2">
-      <br /><span class="bold">LEVEL #2</span>
-      <br />z-index: 1;
+      

+      
LEVEL #2
+      
z-index: 1;
 
-         <div id="container2">
+         

 
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            
LEVEL #3

+            
LEVEL #3

+            
LEVEL #3

+            
LEVEL #3

+            
LEVEL #3

+            
LEVEL #3

+            
LEVEL #3

+            
LEVEL #3

+            
LEVEL #3

+            
LEVEL #3

+            
LEVEL #3

 
-         </div>
+         

 
-      </div>
+      

 
-      <div class="lev2">
-      <br /><span class="bold">LEVEL #2</span>
-      <br />z-index: 1;
-      </div>
+      

+      
LEVEL #2
+      
z-index: 1;
+      

 
-   </div>
-</div>
+   

+

 
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-</div>
+

+LEVEL #1
+

 
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-</div>
+

+LEVEL #1
+

 
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-</div>
+

+LEVEL #1
+

 
-</body></html>
-
+ +``` -

También puedes ver

+### También puedes ver - +- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index " javichito Apilando sin z-index") : Reglas de apilamiento por defecto +- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float "Apilamiento y float") : Cómo son manejados los elementos flotantes +- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index") : Usando z-index para cambiar el apilamiento por defecto +- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento "El contexto de apilamiento") : Notas sobre el contexto de apilamiento +- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento "Ejemplo 1 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en el último nivel +- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento "Ejemplo 2 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en todos los niveles -
-

Información del documento original

+### Información del documento original -
    -
  • Autor(es): Paolo Lombardi
    • -
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • -
  • Last Updated Date: July 9th, 2005
    • -
-
+- Autor(es): Paolo Lombardi +- Este artículo es una traducción al inglés de un artículo que escribí en italiano para [YappY](http://www.yappy.it). He dado el derecho de compartir el contenido bajo [Creative Commons: Attribution-Sharealike license](http://creativecommons.org/licenses/by-sa/2.0/) +- Last Updated Date: July 9th, 2005 diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md index cb4a80605efe49..2d3f5389dfff95 100644 --- a/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md @@ -4,59 +4,51 @@ slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index original_slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index --- -

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+« [CSS](/es/CSS "CSS") « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index "Understanding CSS z-index") -

Apilando sin z-index

+### Apilando sin z-index -

Cuando ningún elemento tiene z-index, los elementos son apilados en este orden (de abajo hacia arriba):

+Cuando ningún elemento tiene z-index, los elementos son apilados en este orden (de abajo hacia arriba): -
    -
  1. El fondo y los bordes del elemento raiz
    2. -
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. -
  3. Elementos posicionados descendentemente, en orden de aparición (en HTML)
    4. -
+1. El fondo y los bordes del elemento raiz +2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML) +3. Elementos posicionados descendentemente, en orden de aparición (en HTML) -

En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son apropiadamente dimensionados y posicionados para ilustrar las reglas de apilamiento.

+En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son apropiadamente dimensionados y posicionados para ilustrar las reglas de apilamiento. -
-

Notas:

+> **Nota:** **Notas:** +> +> - Dado un grupo homogéneo de elementos sin propiedad z-index, tales como los bloques posicionados (DIV #1 al #4) en el ejemplo, el orden de apilamiento de los elementos es su orden en la jerarquía HTML, independientemente de su posición. +> - Bloques estándar (DIV #5) en el flujo normal, sin ninguna propiedad de posicionamiento, siempre son renderizados antes de los elementos posicionados y aparecen debajo de los mismos, incluso si están después en la jerarquía HTML. -
    -
  • Dado un grupo homogéneo de elementos sin propiedad z-index, tales como los bloques posicionados (DIV #1 al #4) en el ejemplo, el orden de apilamiento de los elementos es su orden en la jerarquía HTML, independientemente de su posición.
    • -
  • -

    Bloques estándar (DIV #5) en el flujo normal, sin ninguna propiedad de posicionamiento, siempre son renderizados antes de los elementos posicionados y aparecen debajo de los mismos, incluso si están después en la jerarquía HTML.

    -
    • -
-
+![understanding_zindex_01.png](/@api/deki/files/910/=understanding_zindex_01.png) -

understanding_zindex_01.png

+## Ejemplo -

+### HTML -

Ejemplo

+```html +
+
DIV #1 +
position: absolute;
+
+
DIV #2 +
position: relative;
+
+
DIV #3 +
position: relative;
+
+
DIV #4 +
position: absolute;
+
+
DIV #5 +
no positioning
+``` -

HTML

+### CSS -
<div id="absdiv1">
-    <br /><span class="bold">DIV #1</span>
-    <br />position: absolute; </div>
-<div id="reldiv1">
-    <br /><span class="bold">DIV #2</span>
-    <br />position: relative; </div>
-<div id="reldiv2">
-    <br /><span class="bold">DIV #3</span>
-    <br />position: relative; </div>
-<div id="absdiv2">
-    <br /><span class="bold">DIV #4</span>
-    <br />position: absolute; </div>
-<div id="normdiv">
-    <br /><span class="bold">DIV #5</span>
-    <br />no positioning </div>
-
- -

CSS

- -
 .bold {
+```css
+ .bold {
      font-weight: bold;
      font: 12px Arial;
  }
@@ -110,33 +102,25 @@ original_slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-in
      background-color: #ffdddd;
      text-align: center;
  }
-
- -

Resultado

+``` -

(Si la imagen no aparece en CodePen, haz clic en el botón Tidy en la sección CSS)

+### Resultado -

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index') }}

+(Si la imagen no aparece en CodePen, haz clic en el botón Tidy en la sección CSS) -

También puedes ver

+{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index') }} - +### También puedes ver -
-

Información del documento original

+- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float "Apilamiento y float") : Cómo son manejados los elementos flotantes +- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index") : Usando z-index para cambiar el apilamiento por defecto +- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento "El contexto de apilamiento") : Notas sobre el contexto de apilamiento +- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento "Ejemplo 1 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en el último nivel +- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento "Ejemplo 2 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en todos los niveles +- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento "Ejemplo 3 del contexto de apilamiento") : Jerarquía HTML de 3 niveles, z-index en el segundo nivel -
    -
  • Autor(es): Paolo Lombardi
    • -
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • -
  • Last Updated Date: November 3rd, 2014
    • -
-
+### Información del documento original -

+- Autor(es): Paolo Lombardi +- Este artículo es una traducción al inglés de un artículo que escribí en italiano para [YappY](http://www.yappy.it). He dado el derecho de compartir el contenido bajo [Creative Commons: Attribution-Sharealike license](http://creativecommons.org/licenses/by-sa/2.0/) +- Last Updated Date: November 3rd, 2014 diff --git a/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md index 44d607b5cfad97..d11e60c6aff6c4 100644 --- a/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md +++ b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md @@ -4,142 +4,123 @@ slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context original_slug: Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento --- -

El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.

- -

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

- -

El contexto de apilamiento

- -

- -

En el ejemplo previo, Agregando z-index, el orden de renderizado de ciertos DIVs es influenciado por sus valores z-index. Esto ocurre debido a que estos DIVs tienen propiedades especiales que causan que formen un contexto de apilamiento.

- -

Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemento que

- -
    -
  • sea el elemento raiz (HTML),
    • -
  • tenga posición (absoluta o relativa) con un valor z-index distinto de "auto",
    • -
  • un elemento flex con un valor z-index distinto de "auto", que sea el elemento padre display: flex|inline-flex,
    • -
  • sean elementos con un valor {{cssxref("opacity")}} menor de 1. (Mira la especificación de opacity),
    • -
  • elementos con un valor {{cssxref("transform")}} distinto de "none",
    • -
  • elementos con un valor {{cssxref("mix-blend-mode")}} distinto de "normal",
    • -
  • elementos con un valor {{cssxref("filter")}} distinto de "none",
    • -
  • elementos con un valor {{cssxref("perspective")}} distinto de "none",
    • -
  • elementos con un valor {{cssxref("isolation")}} igual a "isolate",
    • -
  • position: fixed
    • -
  • especifican cualquier atributo superior en {{cssxref("will-change")}} incluso si no especificas valores para estos atributos directamente (Mira este post)
    • -
  • elementos con un valor {{cssxref("-webkit-overflow-scrolling")}} igual a "touch"
    • -
- -

Dentro de un contexto de apilamiento, los elementos hijos son apilados de acuerdo a las mismas reglas previamente explicadas. Es importante entender que los valores z-index de los contextos de apilamiento de los hijos solo tienen sentido en el contexto del padre. Los contextos de apilamiento son tratados atómicamente como una sola unidad en el contexto de apilamiento del padre.

- -

En resumen:

- -
    -
  • Posicionar y asignar un valor z-index a un elemento HTML crea un contexto de apilamiento, (asi como también lo hace asignar una opacidad parcial)
    • -
  • Contextos de apilamiento pueden ser contenidos en otros contextos de apilamiento, y juntos crean una jerarquía de contextos de apilamiento
    • -
  • Cada contexto de apilamiento es completamente independiente de sus hermanos: solo los elementos descendientes son considerados cuando el apilamiento es procesado.
    • -
  • Cada contexto de apilamiento es auto contenido: luego que los contenidos del elemento son apilados, el elemento completo es considerado en el orden de apilamiento del contexto del padre.
    • -
- -
Nota: La jerarquía de apilar contextos es un sub conjunto de la jerarquía de elementos HTML, porque solo ciertos elementos crean contextos de apilamiento. Podemos decir que los elementos que no crean sus propios contextos de apilamiento son asimilados por el contexto de apilamiento padre.
- -

El ejemplo

- -

Example of stacking rules modified using z-index

- -

En este ejemplo cada elemento posicionado crea su propio contexto de apilamiento, debido a sus valores de posicionamiento y z-index. La jerarquía de contextos de apilamiento es organizada de la siguiente manera:

- -
    -
  • Raíz -
      -
    • DIV #1
      • -
    • DIV #2
      • -
    • DIV #3 -
        -
      • DIV #4
        • -
      • DIV #5
        • -
      • DIV #6
        • -
      -
      • -
    -
    • -
- -

Es importante notar que el DIV #4, DIV #5 y el DIV #6 son hijos del DIV #3, así que el apilamiento de esos elementos es completamente resuelto dentro del DIV#3. Una vez que el apilamiento y el renderizado dentro del DIV#3 ha sido completado, todo el elemento DIV#3 es apilado en el elemento raíz con respecto a sus DIV hermanos.

- -
-

Notas:

- -
    -
  • DIV #4 es renderizado debajo de DIV #1 porque el z-index (5) de DIV #1 es válido dentro del contexto de apilamiento del elemento raiz, mientras que el z-index (6) de DIV #4 es válido dentro del contexto de apilamiento de DIV #3. Así que DIV #4 está debajo de DIV #1, porque DIV #4 pertenece a DIV #3, que tiene un valor z-index menor.
    • -
  • Por la misma razón DIV #2 (z-index 2) es renderizado bajo DIV#5 (z-index 1) porque DIV #5 pertenece a DIV #3, que tiene un valor z-index mayor.
    • -
  • El valor z-index de DIV #3 es 4, pero este valor es independiente del z-index de DIV #4, DIV #5 and DIV #6, porque pertenece a un contexto de apilamiento diferente.
    • -
  • Una forma fácil de descubrir el orden de renderizado de los elementos apilados en el eje Z es pensar en esto como un tipo de "número de versión", donde los elementos hijos son números de versión menores bajo los números de versión mayores de sus padres. De esta manera podemos ver fácilmente cómo un elemento con un valor z-index de 1 (DIV #5) es apilado encima de un elemento con un valor z-index de 2 (DIV #2), y cómo un elemento con un valor z-index de 6 (DIV #4) es apilado debajo de un elemento con un valor z-index de 5 (DIV #1). En nuestro ejemplo (ordenado de acuerdo al orden de renderizado final): -
      -
    • Raíz -
        -
      • El valor z-index de DIV #2 es 2
        • -
      • El valor z-index de DIV #3 es 4 -
          -
        • El valor z-index de DIV #5 es 1, apilado bajo un elemento con un valor z-index de 4, que resulta en un orden de renderizado de 4.1
          • -
        • El valor z-index de DIV #6 es 3, apilado debajo de un elemento con un valor z-index de 4, que resulta en un orden de renderizado de 4.3
          • -
        • El valor z-index de DIV #4 es 6, apilado bajo un elemento con valor z-index de 4, que resulta en un orden de renderizado de 4.6
          • -
        -
        • -
      • El valor z-index de DIV #1 es 5
        • -
      -
      • -
    -
    • -
-
- -

Ejemplo

- -

HTML

- -
    <div id="div1">
-      <h1>Division Element #1</h1>
-      <code>position: relative;<br/>
-      z-index: 5;</code>
-    </div>
-
-    <div id="div2">
-      <h1>Division Element #2</h1>
-      <code>position: relative;<br/>
-      z-index: 2;</code>
-    </div>
-
-    <div id="div3">
-
-      <div id="div4">
-        <h1>Division Element #4</h1>
-        <code>position: relative;<br/>
-        z-index: 6;</code>
-      </div>
-
-      <h1>Division Element #3</h1>
-      <code>position: absolute;<br/>
-      z-index: 4;</code>
-
-      <div id="div5">
-        <h1>Division Element #5</h1>
-        <code>position: relative;<br/>
-        z-index: 1;</code>
-      </div>
-
-      <div id="div6">
-        <h1>Division Element #6</h1>
-        <code>position: absolute;<br/>
-        z-index: 3;</code>
-      </div>
-    </div>
-
- -

CSS

- -
* {
+El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.
+
+« [CSS](/es/CSS "CSS") « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index "Understanding CSS z-index")
+
+## El contexto de apilamiento
+
+En el ejemplo previo, [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index"), el orden de renderizado de ciertos DIVs es influenciado por sus valores z-index. Esto ocurre debido a que estos DIVs tienen propiedades especiales que causan que formen un contexto de apilamiento.
+
+Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemento que
+
+- sea el elemento raiz (HTML),
+- tenga posición (absoluta o relativa) con un valor z-index distinto de "auto",
+- un elemento flex con un valor z-index distinto de "auto", que sea el elemento padre display: flex|inline-flex,
+- sean elementos con un valor {{cssxref("opacity")}} menor de 1. (Mira [la especificación de opacity](http://www.w3.org/TR/css3-color/#transparency)),
+- elementos con un valor {{cssxref("transform")}} distinto de "none",
+- elementos con un valor {{cssxref("mix-blend-mode")}} distinto de "normal",
+- elementos con un valor {{cssxref("filter")}} distinto de "none",
+- elementos con un valor {{cssxref("perspective")}} distinto de "none",
+- elementos con un valor {{cssxref("isolation")}} igual a "isolate",
+- `position: fixed`
+- especifican cualquier atributo superior en `{{cssxref("will-change")}} incluso si no especificas valores para estos atributos directamente `(Mira [este post](http://dev.opera.com/articles/css-will-change-property/))
+- elementos con un valor {{cssxref("-webkit-overflow-scrolling")}} igual a "touch"
+
+Dentro de un contexto de apilamiento, los elementos hijos son apilados de acuerdo a las mismas reglas previamente explicadas. Es importante entender que los valores z-index de los contextos de apilamiento de los hijos solo tienen sentido en el contexto del padre. Los contextos de apilamiento son tratados atómicamente como una sola unidad en el contexto de apilamiento del padre.
+
+En resumen:
+
+- Posicionar y asignar un valor z-index a un elemento HTML crea un contexto de apilamiento, (asi como también lo hace asignar una opacidad parcial)
+- Contextos de apilamiento pueden ser contenidos en otros contextos de apilamiento, y juntos crean una jerarquía de contextos de apilamiento
+- Cada contexto de apilamiento es completamente independiente de sus hermanos: solo los elementos descendientes son considerados cuando el apilamiento es procesado.
+- Cada contexto de apilamiento es auto contenido: luego que los contenidos del elemento son apilados, el elemento completo es considerado en el orden de apilamiento del contexto del padre.
+
+> **Nota:** La jerarquía de apilar contextos es un sub conjunto de la jerarquía de elementos HTML, porque solo ciertos elementos crean contextos de apilamiento. Podemos decir que los elementos que no crean sus propios contextos de apilamiento son asimilados por el contexto de apilamiento padre.
+
+## El ejemplo
+
+![Example of stacking rules modified using z-index](/@api/deki/files/913/=Understanding_zindex_04.png)
+
+En este ejemplo cada elemento posicionado crea su propio contexto de apilamiento, debido a sus valores de posicionamiento y z-index. La jerarquía de contextos de apilamiento es organizada de la siguiente manera:
+
+- Raíz
+
+  - DIV #1
+  - DIV #2
+  - DIV #3
+
+    - DIV #4
+    - DIV #5
+    - DIV #6
+
+Es importante notar que el DIV #4, DIV #5 y el DIV #6 son hijos del DIV #3, así que el apilamiento de esos elementos es completamente resuelto dentro del DIV#3. Una vez que el apilamiento y el renderizado dentro del DIV#3 ha sido completado, todo el elemento DIV#3 es apilado en el elemento raíz con respecto a sus DIV hermanos.
+
+> **Nota:** **Notas:**
+>
+> - DIV #4 es renderizado debajo de DIV #1 porque el z-index (5) de DIV #1 es válido dentro del contexto de apilamiento del elemento raiz, mientras que el z-index (6) de DIV #4 es válido dentro del contexto de apilamiento de DIV #3. Así que DIV #4 está debajo de DIV #1, porque DIV #4 pertenece a DIV #3, que tiene un valor z-index menor.
+> - Por la misma razón DIV #2 (z-index 2) es renderizado bajo DIV#5 (z-index 1) porque DIV #5 pertenece a DIV #3, que tiene un valor z-index mayor.
+> - El valor z-index de DIV #3 es 4, pero este valor es independiente del z-index de DIV #4, DIV #5 and DIV #6, porque pertenece a un contexto de apilamiento diferente.
+> - Una forma fácil de descubrir el _orden de renderizado_ de los elementos apilados en el eje Z es pensar en esto como un tipo de "número de versión", donde los elementos hijos son números de versión menores bajo los números de versión mayores de sus padres. De esta manera podemos ver fácilmente cómo un elemento con un valor z-index de 1 (DIV #5) es apilado encima de un elemento con un valor z-index de 2 (DIV #2), y cómo un elemento con un valor z-index de 6 (DIV #4) es apilado debajo de un elemento con un valor z-index de 5 (DIV #1). En nuestro ejemplo (ordenado de acuerdo al orden de renderizado final):
+>
+>   - Raíz
+>
+>     - El valor z-index de DIV #2 es 2
+>     - El valor z-index de DIV #3 es 4
+>
+>       - El valor z-index de DIV #5 es 1, apilado bajo un elemento con un valor z-index de 4, que resulta en un orden de renderizado de 4.1
+>       - El valor z-index de DIV #6 es 3, apilado debajo de un elemento con un valor z-index de 4, que resulta en un orden de renderizado de 4.3
+>       - El valor z-index de DIV #4 es 6, apilado bajo un elemento con valor z-index de 4, que resulta en un orden de renderizado de 4.6
+>
+>     - El valor z-index de DIV #1 es 5
+
+## Ejemplo
+
+### HTML
+
+```html
+    

+      
Division Element #1

+      position: relative;

+      z-index: 5;
+    

+
+    

+      
Division Element #2

+      position: relative;

+      z-index: 2;
+    

+
+    

+
+      

+        
Division Element #4

+        position: relative;

+        z-index: 6;
+      

+
+      
Division Element #3

+      position: absolute;

+      z-index: 4;
+
+      

+        
Division Element #5

+        position: relative;

+        z-index: 1;
+      

+
+      

+        
Division Element #6

+        position: absolute;

+        z-index: 3;
+      

+    

+```
+
+### CSS
+
+```css
+* {
     margin: 0;
 }
 html {
@@ -204,29 +185,24 @@ h1 {
     padding-top: 125px;
     background-color: #ddf;
     text-align: center;
-}
+} +``` -

Resultado

+### Resultado -

{{ EmbedLiveSample('Example', '556', '396') }}

+{{ EmbedLiveSample('Example', '556', '396') }} -

También puedes ver

+### También puedes ver - +- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index " javichito Apilando sin z-index") : Reglas de apilamiento por defecto +- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float "Apilamiento y float") : Cómo son manejados los elementos flotantes +- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index") : Usando z-index para cambiar el apilamiento por defecto +- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento "Ejemplo 1 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en el último nivel +- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento "Ejemplo 2 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en todos los niveles +- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento "Ejemplo 3 del contexto de apilamiento") : Jerarquía HTML de 3 niveles, z-index en el segundo nivel -
-

Información del documento original

+### Información del documento original -
    -
  • Autor(es): Paolo Lombardi
    • -
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • -
  • Last Updated Date: July 9th, 2005
    • -
-
+- Autor(es): Paolo Lombardi +- Este artículo es una traducción al inglés de un artículo que escribí en italiano para [YappY](http://www.yappy.it). He dado el derecho de compartir el contenido bajo [Creative Commons: Attribution-Sharealike license](http://creativecommons.org/licenses/by-sa/2.0/) +- Last Updated Date: July 9th, 2005 diff --git a/files/es/web/css/css_selectors/index.md b/files/es/web/css/css_selectors/index.md index 04b954db2387aa..68f23c54e1f967 100644 --- a/files/es/web/css/css_selectors/index.md +++ b/files/es/web/css/css_selectors/index.md @@ -10,108 +10,69 @@ tags: translation_of: Web/CSS/CSS_Selectors original_slug: Web/CSS/Selectores_CSS --- -
{{CSSRef}}
+{{CSSRef}} -

Los selectores definen sobre qué elementos se aplicará un conjunto de reglas CSS.

+Los **selectores** definen sobre qué elementos se aplicará un conjunto de reglas CSS. -

Selectores básicos

+## Selectores básicos -
-
Selector de tipo
-
Selecciona todos los elementos que coinciden con el nombre del elemento especificado.
- Sintaxis: eltname
- Ejemplo: input se aplicará a cualquier elemento {{HTMLElement('input')}}.
-
Selector de clase
-
Selecciona todos los elementos que tienen el atributo de class especificado.
- Sintaxis: .classname
- Ejemplo: .index seleccionará cualquier elemento que tenga la clase "index".
-
Selector de ID
-
Selecciona un elemento basándose en el valor de su atributo id. Solo puede haber un elemento con un determinado ID dentro de un documento.
- Sintaxis: #idname
- Ejemplo: #toc se aplicará a cualquier elemento que tenga el ID "toc".
-
Selector universal
-
Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres.
- Sintaxis: * ns|* *|*
- Ejemplo: * se aplicará a todos los elementos del documento.
-
Selector de atributo
-
Selecciona elementos basándose en el valor de un determinado atributo.
- Sintaxis: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
- Ejemplo: [autoplay] seleccionará todos los elementos que tengan el atributo "autoplay" establecido (a cualquier valor).
-
+- [Selector de tipo](/es/docs/Web/CSS/Type_selectors) + - : Selecciona todos los elementos que coinciden con el nombre del elemento especificado. + **Sintaxis:** `eltname` + **Ejemplo:** `input` se aplicará a cualquier elemento {{HTMLElement('input')}}. +- [Selector de clase](/es/docs/Web/CSS/Class_selectors) + - : Selecciona todos los elementos que tienen el atributo de `class` especificado. + **Sintaxis:** `.classname` + **Ejemplo:** `.index` seleccionará cualquier elemento que tenga la clase "_index_". +- [Selector de ID](/es/docs/Web/CSS/ID_selectors) + - : Selecciona un elemento basándose en el valor de su atributo `id`. Solo puede haber un elemento con un determinado ID dentro de un documento. + **Sintaxis:** `#idname` + **Ejemplo:** `#toc` se aplicará a cualquier elemento que tenga el ID "_toc_". +- [Selector universal](/es/docs/Web/CSS/Universal_selectors) + - : Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres. + **Sintaxis:** `* ns|* *|*` + **Ejemplo:** `*` se aplicará a todos los elementos del documento. +- [Selector de atributo](/es/docs/Web/CSS/Attribute_selectors) + - : Selecciona elementos basándose en el valor de un determinado atributo. + **Sintaxis:** `[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]` + **Ejemplo:** `[autoplay]` seleccionará todos los elementos que tengan el atributo "autoplay" establecido (a cualquier valor). -

Combinadores

+## Combinadores -
-
Combinador de hermanos adyacentes
-
El combinador + selecciona hermanos adyacentes. Esto quiere decir que el segundo elemento sigue directamente al primero y ambos comparten el mismo elemento padre.
- Sintaxis: A + B
- Ejemplo: La regla h2 + p se aplicará a todos los elementos {{HTMLElement('p')}} que siguen directamente a un elemento {{HTMLElement('h2')}}.
-
Combinador general de hermanos
-
El combinador ~ selecciona hermanos. Esto quiere decir que el segundo elemento sigue al primero (no necesariamente de forma inmediata) y ambos comparten el mismo elemento padre.
- Sintaxis: A ~ B
- Ejemplo: La regla p ~ span se aplicará a todos los elementos {{HTMLElement('span')}} que siguen un elemento {{HTMLElement('p')}}.
-
Combinador de hijo
-
El combinador > selecciona los elementos que son hijos directos del primer elemento.
- Sintaxis: A > B
- Ejemplo: La regla ul > li se aplicará a todos los elementos {{HTMLElement('li')}} que son hijos directos de un elemento {{HTMLElement('ul')}}.
-
Combinador de descendientes
-
El combinador (espacio) selecciona los elementos que son descendientes del primer elemento.
- Sintaxis: A B
- Ejemplo: La regla div span se aplicará a todos los elementos {{HTMLElement('span')}} que están dentro de un elemento {{HTMLElement('div')}}.
-
Combinador de columna {{Experimental_Inline}}
-
El combinador || selecciona los elementos especificados pertenecientes a una columna.
- Sintaxis: A || B
- Ejemplo: col || td seleccionará todos los elementos {{HTMLElement("td")}} que pertenezcan al ámbito de {{HTMLElement("col")}}.
-
+- [Combinador de hermanos adyacentes](/es/docs/Web/CSS/Selectores_hermanos_adyacentes) + - : El combinador `+` selecciona hermanos adyacentes. Esto quiere decir que el segundo elemento sigue directamente al primero y ambos comparten el mismo elemento padre. + **Sintaxis:** `A + B` + **Ejemplo:** La regla `h2 + p` se aplicará a todos los elementos {{HTMLElement('p')}} que siguen directamente a un elemento {{HTMLElement('h2')}}. +- [Combinador general de hermanos](/es/docs/Web/CSS/Selectores_hermanos_generales) + - : El combinador `~` selecciona hermanos. Esto quiere decir que el segundo elemento sigue al primero (no necesariamente de forma inmediata) y ambos comparten el mismo elemento padre. + **Sintaxis:** `A ~ B` + **Ejemplo:** La regla `p ~ span` se aplicará a todos los elementos {{HTMLElement('span')}} que siguen un elemento {{HTMLElement('p')}}. +- [Combinador de hijo](/es/docs/Web/CSS/Child_selectors) + - : El combinador `>` selecciona los elementos que son hijos directos del primer elemento. + **Sintaxis:** `A > B` + **Ejemplo:** La regla `ul > li` se aplicará a todos los elementos {{HTMLElement('li')}} que son hijos directos de un elemento {{HTMLElement('ul')}}. +- [Combinador de descendientes](/es/docs/Web/CSS/Descendant_selectors) + - : El combinador ``(espacio) selecciona los elementos que son descendientes del primer elemento. **Sintaxis:** `A B`**Ejemplo:** La regla`div span` se aplicará a todos los elementos {{HTMLElement('span')}} que están dentro de un elemento {{HTMLElement('div')}}. +- [Combinador de column](/es/docs/Web/CSS/Column_combinator)a {{Experimental_Inline}} + - : El combinador `||` selecciona los elementos especificados pertenecientes a una columna. + **Sintaxis:** `A || B` + **Ejemplo:** `col || td` seleccionará todos los elementos {{HTMLElement("td")}} que pertenezcan al ámbito de {{HTMLElement("col")}}. -

Pseudoclases

+## Pseudoclases -
-
Las pseudoclases permiten la selección de elementos, basada en información de estado que no está contenida en el árbol de documentos.
-
Ejemplo: La regla a:visited se aplicará a todos los elementos {{HTMLElement("a")}} que hayan sido visitados por el usuario.
-
+- Las [pseudoclases](/es/docs/Web/CSS/Pseudo-classes) permiten la selección de elementos, basada en información de estado que no está contenida en el árbol de documentos. + - : **Ejemplo:** La regla a`:visited` se aplicará a todos los elementos {{HTMLElement("a")}} que hayan sido visitados por el usuario. -

Pseudoelementos

+## Pseudoelementos -
-
-

Los pseudoelementos son abstracciones del árbol que representan entidades más allá de los elementos HTML. Por ejemplo, HTML no tiene un elemento que describa la primera letra de un párrafo ni los marcadores de una lista. Los pseudoelementos representan estas entidades y nos permiten asignarles reglas CSS. De este modo podemos diseñar estas entidades de forma independiente.

-
-
Ejemplo: La regla p::first-line se aplicará a la primera línea de texto de todos los elementos {{HTMLElement('p')}}.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Añadidos el combinador de columna ||, selectores de estructura de grilla, combinadores lógicos, pseudoclases de ubicación, dimensión temporal, estado de recurso, lingüisticas y de UI, modificador para la selección de valores de atributo ASCII que distingue entre mayúsculas y minúsculas.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Añadidos el combinador ~ general de hermanos y las pseudoclases de árbol-estructural. Los pseudoelementos creados, usan un prefijo :: de dos puntos dobles. Selectores de atributos adicionales.
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}Añadidos los combinadores > de elemento hijo y + de elementos hermanos adyacentes. Añadidos los selectores universal y de atributo.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definición inicial.
+- Los [pseudoelementos](/es/docs/Web/CSS/Pseudoelementos) son abstracciones del árbol que representan entidades más allá de los elementos HTML. Por ejemplo, HTML no tiene un elemento que describa la primera letra de un párrafo ni los marcadores de una lista. Los pseudoelementos representan estas entidades y nos permiten asignarles reglas CSS. De este modo podemos diseñar estas entidades de forma independiente. + - : **Ejemplo:** La regla `p::first-line` se aplicará a la primera línea de texto de todos los elementos {{HTMLElement('p')}}. +## Especificaciones +| Especificación | Estado | Comentario | +| ---------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS4 Selectors')}} | {{Spec2('CSS4 Selectors')}} | Añadidos el combinador de columna `\|\|`, selectores de estructura de grilla, combinadores lógicos, pseudoclases de ubicación, dimensión temporal, estado de recurso, lingüisticas y de UI, modificador para la selección de valores de atributo ASCII que distingue entre mayúsculas y minúsculas. | +| {{SpecName('CSS3 Selectors')}} | {{Spec2('CSS3 Selectors')}} | Añadidos el combinador `~` general de hermanos y las pseudoclases de árbol-estructural. Los pseudoelementos creados, usan un prefijo `::` de dos puntos dobles. Selectores de atributos adicionales. | +| {{SpecName('CSS2.1', 'selector.html')}} | {{Spec2('CSS2.1')}} | Añadidos los combinadores `>` de elemento hijo y `+` de elementos hermanos adyacentes. Añadidos los selectores **universal** y de **atributo**. | +| {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Definición inicial. | diff --git a/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md b/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md index 374f60b0c02895..8a248dc20dd3fa 100644 --- a/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md +++ b/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md @@ -8,61 +8,60 @@ tags: translation_of: Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors original_slug: Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores --- -

When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience. {{CSSRef}}

+When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience. {{CSSRef}} -

Como ayuda para identificar el destino de un enlace que apunta a una parte específica de un documento, los Selectores CSS3 incluyen la pseudo-clase {{ Cssxref(":target") }}.

+Como ayuda para identificar el destino de un enlace que apunta a una parte específica de un documento, los [Selectores CSS3](http://www.w3.org/TR/css3-selectors/#target-pseudo) incluyen la [pseudo-clase](/en/CSS/Pseudo-classes "Pseudo-classes") {{ Cssxref(":target") }}. -

Seleccionando un objetivo (target)

+### Seleccionando un objetivo (target) -

La pseudo-clase {{ Cssxref(":target") }} es usada para estilizar el elemento objetivo de una URI que contiene un identificador de fragmento. Por ejemplo, la URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example contiene el identificador de fragmento #Example. En HTML, los identificadores son valores de los atributos id o name, pues ambos comparten el mismo espacio de nombres. Por lo tanto, la URI de ejemplo apuntará al encabezado "Example" en este documento.

+La pseudo-clase `{{ Cssxref(":target") }}` es usada para estilizar el elemento objetivo de una URI que contiene un identificador de fragmento. Por ejemplo, la URI `http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example` contiene el identificador de fragmento `#Example`. En HTML, los identificadores son valores de los atributos `id` o `name`, pues ambos comparten el mismo espacio de nombres. Por lo tanto, la URI de ejemplo apuntará al encabezado "Example" en este documento. -

Supongamos que se quiere estilizar cualquier elemento h2 que sea el objetivo de una URI, pero no queremos que cualquier otro elemento tenga esos mismos estilos. Es así de simple:

+Supongamos que se quiere estilizar cualquier elemento `h2` que sea el objetivo de una URI, pero no queremos que cualquier otro elemento tenga esos mismos estilos. Es así de simple: -
h2:target {font-weight: bold;}
+``` +h2:target {font-weight: bold;} +``` -

También es posible crear estilos específicos para fragmentos particulares del documento. Esto se hace usando el mismo valor del identificador que se encuentra en la URI. Así, para añadir un borde al fragmento #Example, escribiremos:

+También es posible crear estilos específicos para fragmentos particulares del documento. Esto se hace usando el mismo valor del identificador que se encuentra en la URI. Así, para añadir un borde al fragmento `#Example`, escribiremos: -
#Example:target {border: 1px solid black;}
+``` +#Example:target {border: 1px solid black;} +``` -

Aplicando estilos a todos los elementos objetivo

+### Aplicando estilos a todos los elementos objetivo -

Si lo que se intenta es crear un estilo que cubra a todos los elementos objetivo, se puede usar el selector universal:

+Si lo que se intenta es crear un estilo que cubra a todos los elementos objetivo, se puede usar el selector universal: -
:target {color: red;}
-
+``` +:target {color: red;} +``` -

Ejemplo

+### Ejemplo -

En el siguiente ejemplo, hay cinco enlaces que apuntan a elementos en el mismo documento. Seleccionar el enlace "First", por ejemplo, causará que <h1 id="one"> sea el elemento objetivo. Nótese que el documento puede desplazarse a una nueva posición, pues los elementos objetivo están ubicados en la parte superior de la ventana del navegador cuando es posible.

+En el siguiente ejemplo, hay cinco enlaces que apuntan a elementos en el mismo documento. Seleccionar el enlace "First", por ejemplo, causará que `

` sea el elemento objetivo. Nótese que el documento puede desplazarse a una nueva posición, pues los elementos objetivo están ubicados en la parte superior de la ventana del navegador cuando es posible. -
-
<h4 id="one">...</h4> <p id="two">...</p>
-<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
+```
+
...
 
...

+
...
 ... ...
 
-<a href="#one">First</a>
-<a href="#two">Second</a>
-<a href="#three">Third</a>
-<a href="#four">Fourth</a>
-<a href="#five">Fifth</a>
-
+First +Second +Third +Fourth +Fifth +``` -

Conclusión

+### Conclusión -

En los casos en los que un identificador de fragmento apunte a una porción del documento, los lectores pueden confundirse sobre qué parte del documento se supone que están leyendo. Darle un estilo particular al objetivo de la URI le resta confusión al lector, o incluso la elimina.

+En los casos en los que un identificador de fragmento apunte a una porción del documento, los lectores pueden confundirse sobre qué parte del documento se supone que están leyendo. Darle un estilo particular al objetivo de la URI le resta confusión al lector, o incluso la elimina. - +### Enlaces relacionados - +- [Selectores CSS3 #target-pseudo](http://www.w3.org/TR/css3-selectors/#target-pseudo) +- [Referencia CSS :target](/es/CSS/:target "En/CSS/:target") -
-

Información del Documento Original

+### Información del Documento Original -
    -
  • Autor(es): Eric Meyer, Evangelista de Estándares, Netscape Communications
    • -
  • Información Original de Copyright: Copyright © 2001-2003 Netscape. Todos los derechos reservados.
    • -
  • Nota: El artículo en inglés era originalmente parte del sitio DevEdge.
    • -
-
+- Autor(es): Eric Meyer, Evangelista de Estándares, Netscape Communications +- Información Original de Copyright: Copyright © 2001-2003 Netscape. Todos los derechos reservados. +- Nota: El artículo en inglés era originalmente parte del sitio DevEdge. diff --git a/files/es/web/css/css_text/index.md b/files/es/web/css/css_text/index.md index 8ca96c4a71485e..74ed591d679dd8 100644 --- a/files/es/web/css/css_text/index.md +++ b/files/es/web/css/css_text/index.md @@ -8,69 +8,38 @@ tags: translation_of: Web/CSS/CSS_Text original_slug: Web/CSS/Texto_CSS --- -
{{CSSRef}}
+{{CSSRef}} -

Texto CSS es el módulo de CSS que define cómo realizar la manipulación de elementos de texto como los saltos de línea, la justificación, la alineación, la gestión de espacios en blanco y las transformaciones de texto.

+**Texto CSS** es el módulo de CSS que define cómo realizar la manipulación de elementos de texto como los saltos de línea, la justificación, la alineación, la gestión de espacios en blanco y las transformaciones de texto. -

Referencia

+## Referencia -

Propiedades

+### Propiedades -
-
    -
  • {{cssxref("hyphens")}}
    • -
  • {{cssxref("letter-spacing")}}
    • -
  • {{cssxref("line-break")}}
    • -
  • {{cssxref("overflow-wrap")}}
    • -
  • {{cssxref("tab-size")}}
    • -
  • {{cssxref("text-align")}}
    • -
  • {{cssxref("text-align-last")}}
    • -
  • {{cssxref("text-indent")}}
    • -
  • {{cssxref("text-size-adjust")}}
    • -
  • {{cssxref("text-transform")}}
    • -
  • {{cssxref("white-space")}}
    • -
  • {{cssxref("word-break")}}
    • -
  • {{cssxref("word-spacing")}}
    • -
  • {{cssxref("word-wrap")}}
    • -
-
+- {{cssxref("hyphens")}} +- {{cssxref("letter-spacing")}} +- {{cssxref("line-break")}} +- {{cssxref("overflow-wrap")}} +- {{cssxref("tab-size")}} +- {{cssxref("text-align")}} +- {{cssxref("text-align-last")}} +- {{cssxref("text-indent")}} +- {{cssxref("text-size-adjust")}} +- {{cssxref("text-transform")}} +- {{cssxref("white-space")}} +- {{cssxref("word-break")}} +- {{cssxref("word-spacing")}} +- {{cssxref("word-wrap")}} -

Guías

+## Guías -

None.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS Logical Properties')}}{{Spec2('CSS Logical Properties')}}Actualiza varias propiedades para que sean independientes de la direccionalidad del texto.
{{SpecName('CSS3 Text')}}{{Spec2('CSS3 Text')}}
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definición Inicial
+_None._ +## Especificaciones +| Especificación | Estado | Comentario | +| ---------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ | +| {{SpecName('CSS Logical Properties')}} | {{Spec2('CSS Logical Properties')}} | Actualiza varias propiedades para que sean independientes de la direccionalidad del texto. | +| {{SpecName('CSS3 Text')}} | {{Spec2('CSS3 Text')}} | | +| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Definición Inicial | diff --git a/files/es/web/css/css_transforms/index.md b/files/es/web/css/css_transforms/index.md index d7b94b3bcdbfd3..fabb2d6cdb2f0f 100644 --- a/files/es/web/css/css_transforms/index.md +++ b/files/es/web/css/css_transforms/index.md @@ -3,50 +3,29 @@ title: CSS Transforms slug: Web/CSS/CSS_Transforms translation_of: Web/CSS/CSS_Transforms --- -

{{CSSRef}}{{SeeCompatTable}}

- -

CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.

- -

Reference

- -

CSS Properties

- -
-
    -
  • {{cssxref("backface-visibility")}}
    • -
  • {{cssxref("perspective")}}
    • -
  • {{cssxref("perspective-origin")}}
    • -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("transform-box")}}
    • -
  • {{cssxref("transform-origin")}}
    • -
  • {{cssxref("transform-style")}}
    • -
-
- -

Guides

- -
-
Using CSS transforms
-
Step-by-step tutorial about how to transform elements styled with CSS.
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Transforms') }}{{ Spec2('CSS3 Transforms') }}Initial definition.
+{{CSSRef}}{{SeeCompatTable}} +**CSS Transforms** is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space. +## Reference + +### CSS Properties + +- {{cssxref("backface-visibility")}} +- {{cssxref("perspective")}} +- {{cssxref("perspective-origin")}} +- {{cssxref("transform")}} +- {{cssxref("transform-box")}} +- {{cssxref("transform-origin")}} +- {{cssxref("transform-style")}} + +## Guides + +- [Using CSS transforms](/es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) + - : Step-by-step tutorial about how to transform elements styled with CSS. + +## Specifications + +| Specification | Status | Comment | +| -------------------------------------------- | ---------------------------------------- | ------------------- | +| {{ SpecName('CSS3 Transforms') }} | {{ Spec2('CSS3 Transforms') }} | Initial definition. | diff --git a/files/es/web/css/css_transforms/using_css_transforms/index.md b/files/es/web/css/css_transforms/using_css_transforms/index.md index da4ad59bc0dd0f..823f780d2e27f7 100644 --- a/files/es/web/css/css_transforms/using_css_transforms/index.md +++ b/files/es/web/css/css_transforms/using_css_transforms/index.md @@ -3,223 +3,75 @@ title: Uso de CSS transforms slug: Web/CSS/CSS_Transforms/Using_CSS_transforms translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms --- -
{{CSSRef}}
+{{CSSRef}} -

Al modificar las coordenadas del espacio, las transformaciones CSS permiten cambiar la posición del contenido afectado sin interrumpir el flujo normal. Se implementan haciendo uso de un conjunto de propiedades CSS que permiten aplicar transformaciones lineales a elementos HTML. Estas transformaciones incluyen rotar, torcer, escalar y desplazar en plano o en un espacio 3D.

+Al modificar las coordenadas del espacio, las transformaciones CSS permiten cambiar la posición del contenido afectado sin interrumpir el flujo normal. Se implementan haciendo uso de un conjunto de propiedades CSS que permiten aplicar transformaciones lineales a elementos HTML. Estas transformaciones incluyen rotar, torcer, escalar y desplazar en plano o en un espacio 3D. -

Propiedades de las transformaciones CSS

+## Propiedades de las transformaciones CSS -

Se usan dos propiedades principalmente para definir las transformaciones CSS: {{ cssxref("transform") }} y {{ cssxref("transform-origin") }}

+Se usan dos propiedades principalmente para definir las transformaciones CSS: {{ cssxref("transform") }} y {{ cssxref("transform-origin") }} -
-
{{ cssxref("transform-origin") }}
-
Especifica la posición de origen que se usará para la transformación. Por defecto es el lado superior izquierdo del elemento. Esta posición es usada por varias transformaciones como rotar, escalar o torcer ya que necesitan de este punto especifico como parámetro.
-
{{ cssxref("transform") }}
-
Especifica la transformación a realizar sobre el elemento. Se define como una lista separada por espacios de transformaciones que se aplican en orden una después de la otra, tal y como es requerido por la operación de composición.
-
+- {{ cssxref("transform-origin") }} + - : Especifica la posición de origen que se usará para la transformación. Por defecto es el lado superior izquierdo del elemento. Esta posición es usada por varias transformaciones como rotar, escalar o torcer ya que necesitan de este punto especifico como parámetro. +- {{ cssxref("transform") }} + - : Especifica la transformación a realizar sobre el elemento. Se define como una lista separada por espacios de transformaciones que se aplican en orden una después de la otra, tal y como es requerido por la operación de composición. -

Ejemplos

+## Ejemplos -

Esta es una imagen inalterada del logo de MDN:

+Esta es una imagen inalterada del logo de MDN: -

MDN Logo

+![MDN Logo](https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png) -

Ejemplo: Rotando

+### Ejemplo: Rotando -

Aquí está el logo MDN en un iframe rotado 90 grados desde su esquina inferior izquierda.

+Aquí está el logo MDN en un iframe rotado 90 grados desde su esquina inferior izquierda. -
<img style="transform: rotate(90deg);
+```html
+
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+```
 
-
{{ EmbedLiveSample('Ejemplo_Rotando', 'auto', 240, '', 'Web/CSS/CSS_Transforms/Using_CSS_transforms') }}

+{{ EmbedLiveSample('Ejemplo_Rotando', 'auto', 240, '', 'Web/CSS/CSS_Transforms/Using_CSS_transforms') }}
 
-
Ejemplo: Torciendo y desplazando

+### Ejemplo: Torciendo y desplazando
 
-
Aquí está el logo MDN torcido 10 grados y desplazado 150 pixels en el eje X.

+Aquí está el logo MDN torcido 10 grados y desplazado 150 pixels en el eje X.
 
-
<img style="transform: skewx(10deg) translatex(150px);
+```html
+
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+```
 
-
Propiedades CSS específicas para 3D

+## Propiedades CSS específicas para 3D
 
-
Realizar cambios en las propiedades CSS en el espacio tridemensional es un poco más complejo. Debes empezar configurando el espacio 3D dándole una perspectiva, a continuación debes configurar cómo interactuarán los elementos 2D en dicho espacio.

+Realizar cambios en las propiedades CSS en el espacio tridemensional es un poco más complejo. Debes empezar configurando el espacio 3D dándole una perspectiva, a continuación debes configurar cómo interactuarán los elementos 2D en dicho espacio.
 
-
Definiendo una perspectiva

+### Definiendo una perspectiva
 
-
El primer elemento a definir es la perspectiva. La perspectiva es lo que nos da la sensación de 3D. Cuanto más lejanos estén los elementos del espectador, más pequeños serán.

+El primer elemento a definir es la _perspectiva_. La perspectiva es lo que nos da la sensación de 3D. Cuanto más lejanos estén los elementos del espectador, más pequeños serán.
 
-
Definímos como de rápido se encogen con la propiedad {{ cssxref("perspective") }}. Cuánto más pequeño sea el valor, más profunda será la perspectiva.

+Definímos como de rápido se encogen con la propiedad {{ cssxref("perspective") }}. Cuánto más pequeño sea el valor, más profunda será la perspectiva.
 
-

-
- 
-  
-   
-   
-  
-  
-   
-   
-   
-   
-  
- 
-
perspective:0;perspective:250px;

-    

-    

-    
   

+| `perspective:0;` | `perspective:250px;` |        |        |
+| ---------------- | -------------------- | ------ | ------ |
+| 123456           | 123456               | 123456 | 123456 |
 
-    
1

+El segundo elemento a configurar es la posición del espectador, con la propiedad {{ cssxref("perspective-origin") }}. Por defecto, la perspectiva está centrada en el espectad
 
-    
2

+{{ EmbedLiveSample('Definiendo_una_perspectiva', '', '', '', 'Web/CSS/CSS_Transforms/Using_CSS_transforms') }}
 
-    
3

+or, pero no siempre es lo adecuado.
 
-    
4

+| `perspective-origin:150px 150px;` | `perspective-origin:50% 50%;` | `perspective-origin:-50px -50px;` |
+| --------------------------------- | ----------------------------- | --------------------------------- |
+| 123456                            | 123456                        | 123456                            |
 
-    
5

+Una vez has hecho esto, ya puedes trabajar con los elementos en el espacio 3D.
 
-    
6

-    

-    

-   		
-    

-    

-    
   

+### 2D elements in the 3D space
 
-    
1

+## See also
 
-    
2

-
-    
3

-
-    
4

-
-    
5

-
-    
6

-    

-    

-   		
-    

-    

-    
   

-
-    
1

-
-    
2

-
-    
3

-
-    
4

-
-    
5

-
-    
6

-    

-    

-   		
-    

-    

-    
   

-
-    
1

-
-    
2

-
-    
3

-
-    
4

-
-    
5

-
-    
6

-    

-    

-   

-

-
-
El segundo elemento a configurar es la posición del espectador, con la propiedad {{ cssxref("perspective-origin") }}. Por defecto, la perspectiva está centrada en el espectad

-
-
{{ EmbedLiveSample('Definiendo_una_perspectiva', '', '', '', 'Web/CSS/CSS_Transforms/Using_CSS_transforms') }}

-
-
or, pero no siempre es lo adecuado.

-
-

-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
perspective-origin:150px 150px;perspective-origin:50% 50%;perspective-origin:-50px -50px;

-    

-    

-    
1

-
-    
2

-
-    
3

-
-    
4

-
-    
5

-
-    
6

-    

-    

-   		
-    

-    

-    
1

-
-    
2

-
-    
3

-
-    
4

-
-    
5

-
-    
6

-    

-    

-   		
-    

-    

-    
1

-
-    
2

-
-    
3

-
-    
4

-
-    
5

-
-    
6

-    

-    

-   

-

-
-
Una vez has hecho esto, ya puedes trabajar con los elementos en el espacio 3D.

-
-
2D elements in the 3D space

-
-
See also

-
-
+- [Using deviceorientation in 3D Transforms](/en/Using_Deviceorientation_In_3D_Transforms "Using Deviceorientation In 3D Transforms")
diff --git a/files/es/web/css/css_transitions/index.md b/files/es/web/css/css_transitions/index.md
index 0e2555ab4bc881..61ab921684b1b2 100644
--- a/files/es/web/css/css_transitions/index.md
+++ b/files/es/web/css/css_transitions/index.md
@@ -9,52 +9,31 @@ tags:
   - Vista general
 translation_of: Web/CSS/CSS_Transitions
 ---
-
{{CSSRef}}{{SeeCompatTable}}

-
-
Transiciones CSS es un módulo de CSS que define cómo crear transiciones suaves entre diferentes valores de las propiedades CSS. Permite tanto crearlas como definir su evolución usando funciones relacionadas con el tiempo.

-
-
Referencia

-
-
Propiedades

-
-

-
    
- 
  • {{cssxref("transition")}}
    • 
- 
  • {{cssxref("transition-delay")}}
    • 
- 
  • {{cssxref("transition-duration")}}
    • 
- 
  • {{cssxref("transition-property")}}
    • 
- 
  • {{cssxref("transition-timing-function")}}
    • 
-

-

-
-
Guías

-
-

- 
Using CSS transitions

- 
Tutorial donde se explica paso a paso cómo crear transiciones suaves usando CSS. El artículo describe cada propiedad CSS relevante y explica como interactúan entre ellas.

-

-
-
Especificaciones

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
EspecificaciónEstadoComentario
{{SpecName('CSS3 Transitions')}}{{Spec2('CSS3 Transitions')}}Definición Inicial

-
-
Ver además

-
-
    
- 
  • Transiciones relacionadas, CSS Animations pueden producir animaciones independientemente de los cambios en los valores.
    • 
-

+{{CSSRef}}{{SeeCompatTable}}
+
+**Transiciones CSS** es un módulo de CSS que define cómo crear transiciones suaves entre diferentes valores de las propiedades CSS. Permite tanto crearlas como definir su evolución usando funciones relacionadas con el tiempo.
+
+## Referencia
+
+### Propiedades
+
+- {{cssxref("transition")}}
+- {{cssxref("transition-delay")}}
+- {{cssxref("transition-duration")}}
+- {{cssxref("transition-property")}}
+- {{cssxref("transition-timing-function")}}
+
+## Guías
+
+- [Using CSS transitions](/es/docs/Web/Guide/CSS/Using_CSS_transitions)
+  - : Tutorial donde se explica paso a paso cómo crear transiciones suaves usando CSS. El artículo describe cada propiedad CSS relevante y explica como interactúan entre ellas.
+
+## Especificaciones
+
+| Especificación                               | Estado                                   | Comentario         |
+| -------------------------------------------- | ---------------------------------------- | ------------------ |
+| {{SpecName('CSS3 Transitions')}} | {{Spec2('CSS3 Transitions')}} | Definición Inicial |
+
+## Ver además
+
+- Transiciones relacionadas, [CSS Animations](/es/docs/Web/CSS/CSS_Animations) pueden producir animaciones independientemente de los cambios en los valores.
diff --git a/files/es/web/css/css_transitions/using_css_transitions/index.md b/files/es/web/css/css_transitions/using_css_transitions/index.md
index d34ba6670f7381..58fb574c7ddbb7 100644
--- a/files/es/web/css/css_transitions/using_css_transitions/index.md
+++ b/files/es/web/css/css_transitions/using_css_transitions/index.md
@@ -8,384 +8,194 @@ tags:
 translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
 original_slug: Web/CSS/Transiciones_de_CSS
 ---
-
{{ SeeCompatTable() }}

-
-
Las transiciones CSS, parte del borrador de la especificación CSS3, proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.

-
-
Nota: como la especificación de las transiciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko. Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo,  la propiedad de transición se especificaría como -moz-transition, -webkit-transition y -o-transition.

-
-
Las propiedades de transición CSS

-
-
Las transiciones CSS se controlan mediante la propiedad abreviada {{ cssxref("transition") }}. Es preferible utilizar este método porque de esta forma se evita que la longitud de la lista de parámetros sea diferente, lo que puede dar lugar a tener que emplear un tiempo considerablemente largo en depurar el código CSS.

-
-
Puedes controlar los componentes individuales de la transición usando las siguientes subpropiedades:

-
-

- 
{{ cssxref("transition-property") }}

- 
Especifica el nombre o nombres de las propiedades CSS a las que deberían aplicarse las transiciones. Sólo las propiedades que se enumeran aquí son animadas durante las transiciones; los cambios en el resto de las propiedades suceden de manera instantánea como siempre.

- 
{{ cssxref("transition-duration") }}

- 
Especifica la duración en la que sucederán las transiciones. Puedes especificar una única duración que se aplique a todas las propiedades durante la transición o valores múltiples que permitan a cada propiedad de transición un período de tiempo diferente.

- 
{{ cssxref("transition-timing-function") }}

- 
Especifica la curva cúbica bézier que se usa para definir cómo se computan los valores intermedios para las propiedades.

- 
{{ cssxref("transition-delay") }}

- 
Define el tiempo de espera entre el momento en que se cambia una propiedad y el inicio de la transición.

-

-
-
Detectar la finalización de una transición

-
-
Hay un único acontecimiento que se desencadena cuando se completan las transiciones. En Firefox, el evento es transitionend, en Opera, OTransitionEnd y en WebKit es webkitTransitionEnd. Consulta la tabla de compatibilidades al final de la página si deseas más información. El evento transitionend ofrece dos propiedades:

-
-

- 
propertyName

- 
Una cadena que indica el nombre de la propiedad CSS cuya transición se completó.

- 
elapsedTime

- 
Un float que indica el número de segundos que la transición se había estado ejecutando en el momento en que el acontecimiento se desencadenó. Este valor no está afectado por el valor de {{ cssxref("transition-delay") }}.

-

-
-
Como es habitual, puedes usar el método {{ domxref("element.addEventListener()") }} para monitorizar este acontecimiento:

-
-
el.addEventListener("transitionend", updateTransition, true);
-

-
-
Nota: el evento "transitionend" no se dispara si la transición se anula debido a que el valor de la propiedad de animación es modificado antes de que la transición se complete.

-
-
Propiedades que pueden ser animadas

-
-
Las transiciones y las animaciones CSS pueden usarse para animar las siguientes propiedades.

-
-
Nota: el conjunto de propiedades que puede animarse está sujeto a cambios, por lo tanto se recomienda evitar incluir cualquier propiedad en la lista que no anime porque en un futuro podría provocar resultados inesperados.

-
-
-
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
PropiedadTipo de valor
{{ cssxref("background-color") }}{{cssxref("<color>")}}
{{ cssxref("background-image") }}solo degradado; no está implementado en Firefox (see {{ bug(536540) }})
{{ cssxref("background-position") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("background-size") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("border-color") }} (including sub-properties){{cssxref("<color>")}}
{{ cssxref("border-radius") }} (including sub-properties){{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("border-width") }} (including sub-properties){{cssxref("<length>")}}
{{ cssxref("border-spacing") }}{{cssxref("<length>")}}
{{ cssxref("bottom") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("-moz-box-flex") }}número
{{ cssxref("box-shadow") }}sombra
{{ cssxref("color") }}{{cssxref("<color>")}}
{{ cssxref("-moz-column-count") }}número
{{ cssxref("-moz-column-gap") }}{{cssxref("<length>")}}, palabras clave
{{ cssxref("-moz-column-rule-color") }}{{cssxref("<color>")}}
{{ cssxref("-moz-column-rule-width") }}{{cssxref("<length>")}}, palabras clave
{{ cssxref("-moz-column-width") }}{{cssxref("<length>")}}
{{ cssxref("clip") }}rectágulo
{{ svgattr("fill") }}pintar
{{ svgattr("fill-opacity") }}valor de opacidad
{{ svgattr("flood-color") }}{{cssxref("<color>")}} | palabras clave
{{ cssxref("font-size") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("font-size-adjust") }}números, palabras clave
{{ cssxref("font-stretch") }}palabras clave
{{ cssxref("font-weight") }}números| palabras clave (excluyendo bolder, lighter)
{{ cssxref("height") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("-moz-image-region") }}rect()
{{ cssxref("left") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("letter-spacing") }}{{cssxref("<length>")}}
{{ svgattr("lighting-color") }}{{cssxref("<color>")}} | palabras clave
{{ cssxref("line-height") }}número | {{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("margin") }} (including sub-properties){{cssxref("<length>")}}
{{ cssxref("marker-offset") }}{{cssxref("<length>")}}
{{ cssxref("max-height") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("max-width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("min-height") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("min-width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("opacity") }}número
{{ cssxref("outline-color") }}{{cssxref("<color>")}}
{{ cssxref("outline-offset") }}entero
{{ cssxref("-moz-outline-radius") }} (including sub-properties){{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("outline-width") }}{{cssxref("<length>")}}
{{ cssxref("padding") }} (including sub-properties){{cssxref("<length>")}}
{{ cssxref("right") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ svgattr("stop-color") }}{{cssxref("<color>")}} | palabras clave
{{ svgattr("stop-opacity") }}valor de opacidad
{{ svgattr("stroke") }}pintar
{{ svgattr("stroke-dasharray") }}dasharray
{{ svgattr("stroke-dashoffset") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ svgattr("stroke-miterlimit") }}miterlimit
{{ svgattr("stroke-opacity") }}valor de opacidad
{{ svgattr("stroke-width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("text-indent") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("text-shadow") }}sombra
{{ cssxref("top") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("-moz-transform-origin") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}, keywords
{{ cssxref("-moz-transform") }}transform-function
{{ cssxref("vertical-align") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}, palabras clave
{{ cssxref("visibility") }}visibilidad
{{ cssxref("width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("word-spacing") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("z-index") }}entero

-
-
Cuando las listas de valores de propiedades tienen longitudes diferentes

-
-
Si cualquier lista de valores de propiedades es más corta que las otras, sus valores se repiten para hacer que coincidan. Por ejemplo:

-
-
div {
+{{ SeeCompatTable() }}
+
+Las transiciones CSS, parte del borrador de la especificación CSS3, proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.
+
+> **Nota:** como la especificación de las transiciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko. Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo, la propiedad de transición se especificaría como `-moz-transition`, `-webkit-transition `y `-o-transition`.
+
+## Las propiedades de transición CSS
+
+Las transiciones CSS se controlan mediante la propiedad abreviada {{ cssxref("transition") }}. Es preferible utilizar este método porque de esta forma se evita que la longitud de la lista de parámetros sea diferente, lo que puede dar lugar a tener que emplear un tiempo considerablemente largo en depurar el código CSS.
+
+Puedes controlar los componentes individuales de la transición usando las siguientes subpropiedades:
+
+- {{ cssxref("transition-property") }}
+  - : Especifica el nombre o nombres de las propiedades CSS a las que deberían aplicarse las transiciones. Sólo las propiedades que se enumeran aquí son animadas durante las transiciones; los cambios en el resto de las propiedades suceden de manera instantánea como siempre.
+- {{ cssxref("transition-duration") }}
+  - : Especifica la duración en la que sucederán las transiciones. Puedes especificar una única duración que se aplique a todas las propiedades durante la transición o valores múltiples que permitan a cada propiedad de transición un período de tiempo diferente.
+- {{ cssxref("transition-timing-function") }}
+  - : Especifica la curva cúbica bézier que se usa para definir cómo se computan los valores intermedios para las propiedades.
+- {{ cssxref("transition-delay") }}
+  - : Define el tiempo de espera entre el momento en que se cambia una propiedad y el inicio de la transición.
+
+## Detectar la finalización de una transición
+
+Hay un único acontecimiento que se desencadena cuando se completan las transiciones. En Firefox, el evento es `transitionend`, en Opera, `OTransitionEnd` y en WebKit es `webkitTransitionEnd`. Consulta la tabla de compatibilidades al final de la página si deseas más información. El evento `transitionend` ofrece dos propiedades:
+
+- `propertyName`
+  - : Una cadena que indica el nombre de la propiedad CSS cuya transición se completó.
+- `elapsedTime`
+  - : Un float que indica el número de segundos que la transición se había estado ejecutando en el momento en que el acontecimiento se desencadenó. Este valor no está afectado por el valor de {{ cssxref("transition-delay") }}.
+
+Como es habitual, puedes usar el método {{ domxref("element.addEventListener()") }} para monitorizar este acontecimiento:
+
+```
+el.addEventListener("transitionend", updateTransition, true);
+```
+
+> **Nota:** el evento "transitionend" no se dispara si la transición se anula debido a que el valor de la propiedad de animación es modificado antes de que la transición se complete.
+
+## Propiedades que pueden ser animadas
+
+Las transiciones y las animaciones CSS pueden usarse para animar las siguientes propiedades.
+
+> **Nota:** el conjunto de propiedades que puede animarse está sujeto a cambios, por lo tanto se recomienda evitar incluir cualquier propiedad en la lista que no anime porque en un futuro podría provocar resultados inesperados.
+
+| Propiedad                                                                   | Tipo de valor                                                                                            |
+| --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| {{ cssxref("background-color") }}                                | {{cssxref("<color>")}}                                                                     |
+| {{ cssxref("background-image") }}                                | solo degradado; no está implementado en Firefox (see {{ bug(536540) }})                           |
+| {{ cssxref("background-position") }}                            | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("background-size") }}                                | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("border-color") }} (including sub-properties)         | {{cssxref("<color>")}}                                                                     |
+| {{ cssxref("border-radius") }} (including sub-properties)         | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("border-width") }} (including sub-properties)         | {{cssxref("<length>")}}                                                                 |
+| {{ cssxref("border-spacing") }}                                    | {{cssxref("<length>")}}                                                                 |
+| {{ cssxref("bottom") }}                                            | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("-moz-box-flex") }}                                    | número                                                                                                   |
+| {{ cssxref("box-shadow") }}                                        | sombra                                                                                                   |
+| {{ cssxref("color") }}                                                | {{cssxref("<color>")}}                                                                     |
+| {{ cssxref("-moz-column-count") }}                                | número                                                                                                   |
+| {{ cssxref("-moz-column-gap") }}                                | {{cssxref("<length>")}}, palabras clave                                                 |
+| {{ cssxref("-moz-column-rule-color") }}                        | {{cssxref("<color>")}}                                                                     |
+| {{ cssxref("-moz-column-rule-width") }}                        | {{cssxref("<length>")}}, palabras clave                                                 |
+| {{ cssxref("-moz-column-width") }}                                | {{cssxref("<length>")}}                                                                 |
+| {{ cssxref("clip") }}                                                | rectágulo                                                                                                |
+| {{ svgattr("fill") }}                                                | pintar                                                                                                   |
+| {{ svgattr("fill-opacity") }}                                    | valor de opacidad                                                                                        |
+| {{ svgattr("flood-color") }}                                        | {{cssxref("<color>")}} \| palabras clave                                                   |
+| {{ cssxref("font-size") }}                                        | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("font-size-adjust") }}                                | números, palabras clave                                                                                  |
+| {{ cssxref("font-stretch") }}                                    | palabras clave                                                                                           |
+| {{ cssxref("font-weight") }}                                        | números\| palabras clave (excluyendo `bolder`, `lighter`)                                                |
+| {{ cssxref("height") }}                                            | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("-moz-image-region") }}                                | `rect()`                                                                                                 |
+| {{ cssxref("left") }}                                                | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("letter-spacing") }}                                    | {{cssxref("<length>")}}                                                                 |
+| {{ svgattr("lighting-color") }}                                    | {{cssxref("<color>")}} \| palabras clave                                                   |
+| {{ cssxref("line-height") }}                                        | número \| {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}       |
+| {{ cssxref("margin") }} (including sub-properties)                 | {{cssxref("<length>")}}                                                                 |
+| {{ cssxref("marker-offset") }}                                    | {{cssxref("<length>")}}                                                                 |
+| {{ cssxref("max-height") }}                                        | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("max-width") }}                                        | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("min-height") }}                                        | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("min-width") }}                                        | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("opacity") }}                                            | número                                                                                                   |
+| {{ cssxref("outline-color") }}                                    | {{cssxref("<color>")}}                                                                     |
+| {{ cssxref("outline-offset") }}                                    | entero                                                                                                   |
+| {{ cssxref("-moz-outline-radius") }} (including sub-properties) | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("outline-width") }}                                    | {{cssxref("<length>")}}                                                                 |
+| {{ cssxref("padding") }} (including sub-properties)                 | {{cssxref("<length>")}}                                                                 |
+| {{ cssxref("right") }}                                                | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ svgattr("stop-color") }}                                        | {{cssxref("<color>")}} \| palabras clave                                                   |
+| {{ svgattr("stop-opacity") }}                                    | valor de opacidad                                                                                        |
+| {{ svgattr("stroke") }}                                            | pintar                                                                                                   |
+| {{ svgattr("stroke-dasharray") }}                                | dasharray                                                                                                |
+| {{ svgattr("stroke-dashoffset") }}                                | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ svgattr("stroke-miterlimit") }}                                | miterlimit                                                                                               |
+| {{ svgattr("stroke-opacity") }}                                    | valor de opacidad                                                                                        |
+| {{ svgattr("stroke-width") }}                                    | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("text-indent") }}                                        | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("text-shadow") }}                                        | sombra                                                                                                   |
+| {{ cssxref("top") }}                                                | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("-moz-transform-origin") }}                        | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}, keywords       |
+| {{ cssxref("-moz-transform") }}                                    | transform-function                                                                                       |
+| {{ cssxref("vertical-align") }}                                    | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}, palabras clave |
+| {{ cssxref("visibility") }}                                        | visibilidad                                                                                              |
+| {{ cssxref("width") }}                                                | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("word-spacing") }}                                    | {{cssxref("<percentage>")}} \| {{cssxref("<length>")}}                 |
+| {{ cssxref("z-index") }}                                            | entero                                                                                                   |
+
+## Cuando las listas de valores de propiedades tienen longitudes diferentes
+
+Si cualquier lista de valores de propiedades es más corta que las otras, sus valores se repiten para hacer que coincidan. Por ejemplo:
+
+```css
+div {
   transition-property: opacity, left, top, height;
   transition-duration: 3s, 5s;
 }
-

+```
 
-
Se considera como si fuera:

+Se considera como si fuera:
 
-
div {
+```css
+div {
   transition-property: opacity, left, top, height;
   transition-duration: 3s, 5s, 3s, 5s;
-}

+}
+```
 
-
De manera similar, si cualquier lista de valores de propiedades es más larga que la de {{ cssxref("transition-property") }}, se trunca, de forma que si tienes la siguiente CSS:

+De manera similar, si cualquier lista de valores de propiedades es más larga que la de {{ cssxref("transition-property") }}, se trunca, de forma que si tienes la siguiente CSS:
 
-
div {
+```css
+div {
   transition-property: opacity, left;
   transition-duration: 3s, 5s, 2s, 1s;
-}

+}
+```
 
-
Se interpreta como:

+Se interpreta como:
 
-
div {
+```css
+div {
   transition-property: opacity, left;
   transition-duration: 3s, 5s;
-}

+}
+```
 
-
Funciones de intervalos de transición

+## Funciones de intervalos de transición
 
-
Las funciones de intervalos determinan el cálculo de los valores intermedios de la transición. La función de intervalo puede especificarse proporcionando el gráfico de la función correspondiente, como lo definen los cuatro puntos que definen una cúbica bézier:

+Las funciones de intervalos determinan el cálculo de los valores intermedios de la transición. La función de intervalo puede especificarse proporcionando el gráfico de la función correspondiente, como lo definen los cuatro puntos que definen una cúbica bézier:
 
-

+![](/@api/deki/files/5226/=transition-timing-function.png)
 
-
En lugar de especificar directamente una bézier, existen valores de intervalos predeterminados:

+En lugar de especificar directamente una bézier, existen valores de intervalos predeterminados:
 
-
    
- 
  • ease, equivalente a cubic-bezier(0.25, 0.1, 0.25, 1.0)
    • 
- 
  • linear, equivalente a cubic-bezier(0.0, 0.0, 1.0, 1.0)
    • 
- 
  • ease-in, equivalente a cubic-bezier(0.42, 0, 1.0, 1.0)
    • 
- 
  • ease-out, equivalente a cubic-bezier(0, 0, 0.58, 1.0)
    • 
- 
  • ease-in-out, equivalente a cubic-bezier(0.42, 0, 0.58, 1.0)
    • 
-

+- **ease**, equivalente a `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
+- **linear**, equivalente a `cubic-bezier(0.0, 0.0, 1.0, 1.0)`
+- **ease-in**, equivalente a `cubic-bezier(0.42, 0, 1.0, 1.0)`
+- **ease-out**, equivalente a `cubic-bezier(0, 0, 0.58, 1.0)`
+- **ease-in-out**, equivalente a `cubic-bezier(0.42, 0, 0.58, 1.0)`
 
-
Ejemplos

+## Ejemplos
 
-
Una muestra del efecto de transición

+### Una muestra del efecto de transición
 
-
Este sencillo ejemplo proporciona demostraciones de distintos efectos de transición sin excesivos adornos.

+Este sencillo ejemplo proporciona demostraciones de distintos efectos de transición sin excesivos adornos.
 
-
En primer lugar, el HTML para crear los elementos sobre los que probaremos nuestras transiciones:

+En primer lugar, el HTML para crear los elementos sobre los que probaremos nuestras transiciones:
 
-
<ul>
-  <li id="long1">Transición larga, gradual...</li>
-  <li id="fast1">Transición muy rápida...</li>
-  <li id="delay1">Transición larga de un minuto de retraso...</li>
-  <li id="easeout">Usar intervalos de alejamiento...</li>
-  <li id="linear">Usar intervalos lineales...</li>
-  <li id="cubic1">Usar cúbica bézier(0.2, 0.4, 0.7, 0.8)...</li>
-</ul>
-

+```
+
    
+  
  • Transición larga, gradual...
    • 
+  
  • Transición muy rápida...
    • 
+  
  • Transición larga de un minuto de retraso...
    • 
+  
  • Usar intervalos de alejamiento...
    • 
+  
  • Usar intervalos lineales...
    • 
+  
  • Usar cúbica bézier(0.2, 0.4, 0.7, 0.8)...
    • 
+

+```
 
-
Cada elemento tiene su propia id.; la CSS se encarga del resto. Veamos un par de ejemplos.

+Cada elemento tiene su propia id.; la CSS se encarga del resto. Veamos un par de ejemplos.
 
-
Usar un retraso

+#### Usar un retraso
 
-
Este ejemplo realiza una transición de tamaño de fuente de cuatro segundos con dos segundos de retraso entre el momento en que el usuario pasa el ratón por encima del elemento y el comienzo del efecto de animación:

+Este ejemplo realiza una transición de tamaño de fuente de cuatro segundos con dos segundos de retraso entre el momento en que el usuario pasa el ratón por encima del elemento y el comienzo del efecto de animación:
 
-
#delay1 {
+```
+#delay1 {
   position: relative;
   transition-property: font-size;
   transition-duration: 4s;
@@ -399,45 +209,49 @@ original_slug: Web/CSS/Transiciones_de_CSS
   transition-delay: 2s;
   font-size: 36px;
 }
-

+```
 
-
Usar una función de intervalos de transición lineales

+#### Usar una función de intervalos de transición lineales
 
-
De manera predeterminada, la función de intervalos que se usa para computar los pasos intermedios durante la secuencia de animación proporciona una curva suave de aceleración y desaceleración para el efecto de animación. Si prefieres que el efecto mantenga una velocidad constante a lo largo de la animación, puedes especificar que deseas usar la función de intervalos de transición linear, tal y como se muestra a continuación.

+De manera predeterminada, la función de intervalos que se usa para computar los pasos intermedios durante la secuencia de animación proporciona una curva suave de aceleración y desaceleración para el efecto de animación. Si prefieres que el efecto mantenga una velocidad constante a lo largo de la animación, puedes especificar que deseas usar la función de intervalos de transición `linear`, tal y como se muestra a continuación.
 
-
transition-timing-function: linear;
-

+```
+transition-timing-function: linear;
+```
 
-
Existen distintas funciones de intervalos estándares disponibles; consulta {{ cssxref("transition-timing-function") }} para tener más detalles.

+Existen distintas funciones de intervalos estándares disponibles; consulta {{ cssxref("transition-timing-function") }} para tener más detalles.
 
-
Especificar una función de intervalos cúbicos bézier

+#### Especificar una función de intervalos cúbicos bézier
 
-
Puedes controlar aún más el intervalo de la secuencia de animación si especificas tu propia curva cúbica bézier que describe la velocidad de animación. Por ejemplo:

+Puedes controlar aún más el intervalo de la secuencia de animación si especificas tu propia curva cúbica bézier que describe la velocidad de animación. Por ejemplo:
 
-
  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
-

+```
+  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
+```
 
-
Establece una función de intervalo con una curva bézier definida por los puntos (0.0, 0.0), (0.2, 0.4), (0.7, 0.8) y (1.0, 1.0).

+Establece una función de intervalo con una curva bézier definida por los puntos (0.0, 0.0), (0.2, 0.4), (0.7, 0.8) y (1.0, 1.0).
 
-
Menús de resaltado

+### Menús de resaltado
 
-
Un uso común de CSS es resaltar elementos de un menú mientras el usuario desplaza el cursor del ratón por encima de ellos. Es fácil usar las transciones para hacer que el efecto sea aún más atractivo.

+Un uso común de CSS es resaltar elementos de un menú mientras el usuario desplaza el cursor del ratón por encima de ellos. Es fácil usar las transciones para hacer que el efecto sea aún más atractivo.
 
-
Antes de que miremos los fragmentos de código, tal vez desees echar un vistazo a la demo en vivo (suponiendo que tu navegador admita transiciones). También puedes echar un vistazo directamente a la CSS que usa.

+Antes de que miremos los fragmentos de código, tal vez desees [echar un vistazo a la demo en vivo](http://developer.mozilla.org/samples/cssref/transitions/sample2/) (suponiendo que tu navegador admita transiciones). También puedes echar un [vistazo directamente a la CSS](http://developer.mozilla.org/samples/cssref/transitions/sample2/transitions.css) que usa.
 
-
Primero configuramos el menú usando HTML:

+Primero configuramos el menú usando HTML:
 
-
<div class="sidebar">
-  <p><a class="menuButton" href="home">Inicio</a></p>
-  <p><a class="menuButton" href="about">Acerca de</a></p>
-  <p><a class="menuButton" href="contact">Contacto Us</a></p>
-  <p><a class="menuButton" href="links">Vínculos</a></p>
-</div>
-

+```
+

+  
Inicio

+  
Acerca de

+  
Contacto Us

+  
Vínculos

+

+```
 
-
Después construimos la CSS para implementar el aspecto de nuestro menú. Las porciones relevantes se muestran a continuación:

+Después construimos la CSS para implementar el aspecto de nuestro menú. Las porciones relevantes se muestran a continuación:
 
-
.menuButton {
+```
+.menuButton {
   position: relative;
   transition-property: background-color, color;
   transition-duration: 1s;
@@ -474,48 +288,48 @@ original_slug: Web/CSS/Transiciones_de_CSS
   color:black;
   -moz-box-shadow: 2px 2px 1px black;
 }
-

-
-
Esta CSS establece el aspecto del menú con los colores de fondo y del texto que cambian cuando el elemento está en su estado {{ cssxref(":hover") }}.

+```
 
-
En lugar de describir el efecto con todo detalle, puedes echar un vistazo a la muestra en vivo si tu navegador admite transiciones (Firefox y WebKit nightlies, Opera 10.5).

+Esta CSS establece el aspecto del menú con los colores de fondo y del texto que cambian cuando el elemento está en su estado {{ cssxref(":hover") }}.
 
-
Usar eventos de transición para animar un objeto

+En lugar de describir el efecto con todo detalle, puedes echar un [vistazo a la muestra en vivo](/samples/cssref/transitions/sample2) si tu navegador admite transiciones (Firefox y WebKit nightlies, Opera 10.5).
 
-
En este ejemplo, una pequeña caja con texto dentro se mueve hacia atrás y hacia delante a través de la pantalla y los colores de fondo y del texto se difuminan entre dos valores mientras tiene lugar la animación.

+### Usar eventos de transición para animar un objeto
 
-
- 
-

+En este ejemplo, una pequeña caja con texto dentro se mueve hacia atrás y hacia delante a través de la pantalla y los colores de fondo y del texto se difuminan entre dos valores mientras tiene lugar la animación.
 
+```
 
+```
 
-
Antes de que miremos los fragmentos de código, tal vez desees echar un vistazo a la demo en vivo (suponiendo que tu navegador admita transiciones). También puedes echar un vistazo directamente a la CSS que usa.

+Antes de que miremos los fragmentos de código, tal vez desees [echar un vistazo a la demo en vivo](http://developer.mozilla.org/samples/cssref/transitions/sample1/) (suponiendo que tu navegador admita transiciones). También puedes echar un [vistazo directamente a la CSS](http://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css) que usa.
 
-
El HTML

+#### El HTML
 
-
El HTML para este ejemplo es muy sencillo:

+El HTML para este ejemplo es muy sencillo:
 
-
<!DOCTYPE html>
-<html>
-  <head>
-    <title>CSS Transition Demo</title>
-    <link rel="stylesheet" href="transitions.css" type="text/css">
-    <script src="transitions.js" type="text/javascript"></script>
-  </head>
-  <body onload="runDemo()">
-    <div class="slideRight">¡Esto es una caja!</div>
-  </body>
-</html>
-

+```
+
+
+  
+    CSS Transition Demo
+    
+    
+  
+  
+    
¡Esto es una caja!

+  
+
+```
 
-
Lo único que hay que observar aquí es que establecemos la clase para nuestra caja en "slideRight" inicialmente y cuando el documento haya terminado de cargarse, se ejecuta la función runDemo() del código JavaScript.

+Lo único que hay que observar aquí es que establecemos la clase para nuestra caja en "slideRight" inicialmente y cuando el documento haya terminado de cargarse, se ejecuta la función `runDemo()` del código JavaScript.
 
-
La CSS

+#### La CSS
 
-
Para crear nuestro efecto de animación, usamos dos clases de CSS, "slideRight" y "slideLeft". Si deseas ver el código completo de CSS, puedes mirar el archivo transitions.css en su totalidad. A continuación se muestran sólo los trozos relevantes:

+Para crear nuestro efecto de animación, usamos dos clases de CSS, "slideRight" y "slideLeft". Si deseas ver el código completo de CSS, puedes mirar el archivo [`transitions.css`](/samples/cssref/transitions/sample1/transitions.css "https://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css") en su totalidad. A continuación se muestran sólo los trozos relevantes:
 
-
.slideRight {
+```
+.slideRight {
   position: absolute;
   transition-property: background-color, color, left;
   transition-duration: 5s;
@@ -527,19 +341,20 @@ original_slug: Web/CSS/Transiciones_de_CSS
   left: 0%;
   color: black;
 }
-

+```
 
-
Observa que aquí especificamos de manera explícita la propiedad de posición. Esto es necesario porque sólo aquellos elementos cuya propiedad de posición se defina de manera expresa pueden animar su posición.

+Observa que aquí especificamos de manera explícita la propiedad de posición. Esto es necesario porque sólo aquellos elementos cuya propiedad de posición se defina de manera expresa pueden animar su posición.
 
-
La propiedad {{ cssxref("transition-property") }} se usa para enumerar las propiedades CSS que deseamos animar. En este caso, las propiedades que se van a animar son {{ cssxref("background-color") }}, {{ cssxref("color") }} y {{ cssxref("left") }}. La propiedad {{ cssxref("transition-duration") }} indica que deseamos que la animación tarde 5 segundos desde que comienza hasta que termina.

+La propiedad {{ cssxref("transition-property") }} se usa para enumerar las propiedades CSS que deseamos animar. En este caso, las propiedades que se van a animar son {{ cssxref("background-color") }}, {{ cssxref("color") }} y {{ cssxref("left") }}. La propiedad {{ cssxref("transition-duration") }} indica que deseamos que la animación tarde 5 segundos desde que comienza hasta que termina.
 
-
Se incluyen los equivalentes WebKit y Opera para permitir que el ejemplo funcione en el software correspondiente.

+Se incluyen los equivalentes WebKit y Opera para permitir que el ejemplo funcione en el software correspondiente.
 
-
La clase "slideRight" se usa para especificar el punto de inicio para que la animación desplace el elemento desde el borde izquierdo hasta el borde derecho de la ventana del navegador. Como tal, define la posición y el color del elemento cuando está al principio de la secuencia de animación; concretamente, el valor para su propiedad {{ cssxref("left") }} es 0%, lo que indica que comenzará en el borde izquierdo de la ventana.

+La clase "slideRight" se usa para especificar el punto de inicio para que la animación desplace el elemento desde el borde izquierdo hasta el borde derecho de la ventana del navegador. Como tal, define la posición y el color del elemento cuando está al principio de la secuencia de animación; concretamente, el valor para su propiedad {{ cssxref("left") }} es 0%, lo que indica que comenzará en el borde izquierdo de la ventana.
 
-
Se muestra a continuación la clase "slideLeft", que define el punto final de la animación, es decir, el punto en el que concluirá la animación de izquierda a derecha y cambiaremos a una animación de derecha a izquierda.

+Se muestra a continuación la clase "slideLeft", que define el punto final de la animación, es decir, el punto en el que concluirá la animación de izquierda a derecha y cambiaremos a una animación de derecha a izquierda.
 
-
.slideLeft {
+```
+.slideLeft {
   position: absolute;
   transition-property: background-color, color, left;
   transition-duration: 5s;
@@ -554,19 +369,20 @@ original_slug: Web/CSS/Transiciones_de_CSS
   width: 100px;
   height: 100px;
 }
-

+```
 
-
Los valores de color aquí se han cambiado para hacer que los colores de fondo y del texto cambien durante el tiempo de la secuencia de animación. Además de esto, la propiedad {{ cssxref("left") }} está aquí al 90%.

+Los valores de color aquí se han cambiado para hacer que los colores de fondo y del texto cambien durante el tiempo de la secuencia de animación. Además de esto, la propiedad {{ cssxref("left") }} está aquí al 90%.
 
-
El código JavaScript

+#### El código JavaScript
 
-
Una vez que hemos establecido los extremos de la secuencia de animación, lo que tenemos que hacer es iniciar la animación. Podemos hacerlo fácilmente usando JavaScript.

+Una vez que hemos establecido los extremos de la secuencia de animación, lo que tenemos que hacer es iniciar la animación. Podemos hacerlo fácilmente usando JavaScript.
 
-
Nota: una vez que la compatibilidad para las animaciones CSS esté disponible, el código JavaScript no será necesario para lograr este efecto.

+> **Nota:** una vez que [la compatibilidad para las animaciones](http://dev.w3.org/csswg/css3-animations/) CSS esté disponible, el código JavaScript no será necesario para lograr este efecto.
 
-
En primer lugar, la función runDemo() que se llama cuando el documento se carga para inicializar la secuencia de animación:

+En primer lugar, la función` runDemo()` que se llama cuando el documento se carga para inicializar la secuencia de animación:
 
-
function runDemo() {
+```
+function runDemo() {
   var el = updateTransition();
 
   // Configurar un controlador de eventos para invertir la dirección
@@ -574,13 +390,14 @@ original_slug: Web/CSS/Transiciones_de_CSS
 
   el.addEventListener("transitionend", updateTransition, true);
 }
-

+```
 
-
Es bastante sencillo: llama a la función updateTranslation() que definiremos enseguida, cuyo trabajo es establecer la clase para el elemento que estamos animando según la dirección en la que queramos que viaje. A continuación configura un proceso de escucha de evento para observar el evento "transitionend" que se envía cuando se completa una transición; esto nos permite saber cuándo es el momento para cambiar la clase del elemento para revertir la dirección de la animación.

+Es bastante sencillo: llama a la función` updateTranslation()` que definiremos enseguida, cuyo trabajo es establecer la clase para el elemento que estamos animando según la dirección en la que queramos que viaje. A continuación configura un proceso de escucha de evento para observar el evento "transitionend" que se envía cuando se completa una transición; esto nos permite saber cuándo es el momento para cambiar la clase del elemento para revertir la dirección de la animación.
 
-
La función updateTransition() tiene este aspecto:

+La función `updateTransition()` tiene este aspecto:
 
-
function updateTransition() {
+```
+function updateTransition() {
   var el = document.querySelector("div.slideLeft");
 
   if (el) {
@@ -592,21 +409,17 @@ original_slug: Web/CSS/Transiciones_de_CSS
 
   return el;
 }
-

-
-
Esto ubica el elemento que estamos animando al buscarlo por su nombre de clase (aquí podríamos usar una id, por supuesto, pero seguidme la corriente). En primer lugar buscamos el nombre de la clase "slideLeft". Si se encuentra, cambiamos la clase del elemento a "slideRight". Esto iniciará la transición de derecha a izquierda, puesto que es el momento de que se deslice a la izquierda si el elemento está ya en el borde derecho, que será cuando llegue el evento "transitionend" y la clase del elemento sea "slideLeft" (se deslice a la izquierda).

+```
 
-
Si no se halla ningún elemento que coincida con la clase "slideLeft", buscamos el elemento que coincida con "slideRight" y cambiamos su clase a "slideLeft", comenzando de ese modo la animación en la dirección contraria.

+Esto ubica el elemento que estamos animando al buscarlo por su nombre de clase (aquí podríamos usar una id, por supuesto, pero seguidme la corriente). En primer lugar buscamos el nombre de la clase "slideLeft". Si se encuentra, cambiamos la clase del elemento a "slideRight". Esto iniciará la transición de derecha a izquierda, puesto que es el momento de que se deslice a la izquierda si el elemento está ya en el borde derecho, que será cuando llegue el evento "transitionend" y la clase del elemento sea "slideLeft" (se deslice a la izquierda).
 
+Si no se halla ningún elemento que coincida con la clase "slideLeft", buscamos el elemento que coincida con "slideRight" y cambiamos su clase a "slideLeft", comenzando de ese modo la animación en la dirección contraria.
 
+## Consultar también
 
-
Consultar también

-
-
    
- 
  • Módulo de transiciones CSS nivel 3
    • 
- 
  • {{ cssxref("-moz-transition") }}
    • 
- 
  • {{ cssxref("-moz-transition-property") }}
    • 
- 
  • {{ cssxref("-moz-transition-duration") }}
    • 
- 
  • {{ cssxref("-moz-transition-timing-function") }}
    • 
- 
  • {{ cssxref("-moz-transition-delay") }}
    • 
-

+- [Módulo de transiciones CSS nivel 3](http://www.w3.org/TR/css3-transitions)
+- {{ cssxref("-moz-transition") }}
+- {{ cssxref("-moz-transition-property") }}
+- {{ cssxref("-moz-transition-duration") }}
+- {{ cssxref("-moz-transition-timing-function") }}
+- {{ cssxref("-moz-transition-delay") }}
diff --git a/files/es/web/css/css_types/index.md b/files/es/web/css/css_types/index.md
index bdb0c5386e9acc..cf8775160fa9fb 100644
--- a/files/es/web/css/css_types/index.md
+++ b/files/es/web/css/css_types/index.md
@@ -8,57 +8,40 @@ tags:
   - Visión general
 translation_of: Web/CSS/CSS_Types
 ---
-
{{CssRef}}

+{{CssRef}}
 
-
Los tipos de datos básicos de CSS definen los valores típicos (incluidas las palabras clave y las unidades) aceptados por las propiedades y funciones de CSS. Son un tipo especial de valor de componente.

+Los **tipos de datos básicos de CSS** definen los valores típicos (incluidas las palabras clave y las unidades) aceptados por las propiedades y funciones de CSS. Son un tipo especial de [valor de componente](https://www.w3.org/TR/css3-values/#component-types).
 
-
En sintaxis formal, los tipos de datos se denotan con una palabra clave colocada entre los signos de desigualdad "<" y ">".

+En sintaxis formal, los tipos de datos se denotan con una palabra clave colocada entre los signos de desigualdad "<" y ">".
 
-
Referencia

+## Referencia
 
-

-
    
- 
  • {{cssxref("<angle>")}}
    • 
- 
  • {{cssxref("<basic-shape>")}}
    • 
- 
  • {{cssxref("<blend-mode>")}}
    • 
- 
  • {{cssxref("<color>")}}
    • 
- 
  • {{cssxref("<custom-ident>")}}
    • 
- 
  • {{cssxref("<filter-function>")}}
    • 
- 
  • {{cssxref("<flex>")}}
    • 
- 
  • {{cssxref("<frequency>")}}
    • 
- 
  • {{cssxref("<gradient>")}}
    • 
- 
  • {{cssxref("<image>")}}
    • 
- 
  • {{cssxref("<integer>")}}
    • 
- 
  • {{cssxref("<length>")}}
    • 
- 
  • {{cssxref("<number>")}}
    • 
- 
  • {{cssxref("<percentage>")}}
    • 
- 
  • {{cssxref("<position>")}}
    • 
- 
  • {{cssxref("<ratio>")}}
    • 
- 
  • {{cssxref("<resolution>")}}
    • 
- 
  • {{cssxref("<shape-box>")}}
    • 
- 
  • {{cssxref("<single-transition-timing-function>")}}
    • 
- 
  • {{cssxref("<string>")}}
    • 
- 
  • {{cssxref("<time>")}}
    • 
- 
  • {{cssxref("<transform-function>")}}
    • 
- 
  • {{cssxref("<url>")}}
    • 
-

-

+- {{cssxref("<angle>")}}
+- {{cssxref("<basic-shape>")}}
+- {{cssxref("<blend-mode>")}}
+- {{cssxref("<color>")}}
+- {{cssxref("<custom-ident>")}}
+- {{cssxref("<filter-function>")}}
+- {{cssxref("<flex>")}}
+- {{cssxref("<frequency>")}}
+- {{cssxref("<gradient>")}}
+- {{cssxref("<image>")}}
+- {{cssxref("<integer>")}}
+- {{cssxref("<length>")}}
+- {{cssxref("<number>")}}
+- {{cssxref("<percentage>")}}
+- {{cssxref("<position>")}}
+- {{cssxref("<ratio>")}}
+- {{cssxref("<resolution>")}}
+- {{cssxref("<shape-box>")}}
+- {{cssxref("<single-transition-timing-function>")}}
+- {{cssxref("<string>")}}
+- {{cssxref("<time>")}}
+- {{cssxref("<transform-function>")}}
+- {{cssxref("<url>")}}
 
-
Especificaciones

+## Especificaciones
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Definición Inicial.

+| Especificación                           | Estado                               | Comentarios         |
+| ---------------------------------------- | ------------------------------------ | ------------------- |
+| {{ SpecName('CSS3 Values') }} | {{ Spec2('CSS3 Values') }} | Definición Inicial. |
diff --git a/files/es/web/css/css_writing_modes/index.md b/files/es/web/css/css_writing_modes/index.md
index 61d611e2be5293..a31d78b707e068 100644
--- a/files/es/web/css/css_writing_modes/index.md
+++ b/files/es/web/css/css_writing_modes/index.md
@@ -3,50 +3,25 @@ title: CSS Writing Modes
 slug: Web/CSS/CSS_Writing_Modes
 translation_of: Web/CSS/CSS_Writing_Modes
 ---
-
{{CSSRef}}

+{{CSSRef}}
 
-
CSS Writing Modes es un modulo CSS que define varios modos internacionales de escritura, como izquierda-derecha (e.g. usado por Latin y textos Indic), de derecha-zquierda (e.g. usado por textos Hebreos o Árabes), bidireccional (usado cuando se mezcla izquierda-derecha y  derecha-izquierda) y vertical (e.g. usado por algunos textos Asiaticos).

+**CSS Writing Modes** es un modulo CSS que define varios modos internacionales de escritura, como izquierda-derecha (e.g. usado por Latin y textos Indic), de derecha-zquierda (e.g. usado por textos Hebreos o Árabes), bidireccional (usado cuando se mezcla izquierda-derecha y derecha-izquierda) y vertical (e.g. usado por algunos textos Asiaticos).
 
-
Referencia

+## Referencia
 
-
Propiedades

+### Propiedades
 
-

-
    
- 
  • {{cssxref("direction")}}
    • 
- 
  • {{cssxref("glyph-orientation-horizontal")}}
    • 
- 
  • {{cssxref("text-combine-upright")}}
    • 
- 
  • {{cssxref("text-orientation")}}
    • 
- 
  • {{cssxref("unicode-bidi")}}
    • 
- 
  • {{cssxref("writing-mode")}}
    • 
-

-

+- {{cssxref("direction")}}
+- {{cssxref("glyph-orientation-horizontal")}}
+- {{cssxref("text-combine-upright")}}
+- {{cssxref("text-orientation")}}
+- {{cssxref("unicode-bidi")}}
+- {{cssxref("writing-mode")}}
 
-
Especificaciones

+## Especificaciones
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
EspecificaciónEstadoComentario
{{SpecName('CSS3 Writing Modes')}}{{Spec2('CSS3 Writing Modes')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition

+| Especificación                                   | Estado                                   | Comentario         |
+| ------------------------------------------------ | ---------------------------------------- | ------------------ |
+| {{SpecName('CSS3 Writing Modes')}}     | {{Spec2('CSS3 Writing Modes')}} |                    |
+| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}}                 |                    |
+| {{SpecName('CSS1')}}                     | {{Spec2('CSS1')}}                 | Initial definition |
diff --git a/files/es/web/css/cursor/index.md b/files/es/web/css/cursor/index.md
index 307e37ccdcec87..68fd5a259aed9d 100644
--- a/files/es/web/css/cursor/index.md
+++ b/files/es/web/css/cursor/index.md
@@ -5,248 +5,221 @@ tags:
   - Referencia_CSS
 translation_of: Web/CSS/cursor
 ---
-
{{ CSSRef() }}

+{{ CSSRef() }}
 
-
Resumen

+### Resumen
 
-
La propiedad CSS:cursor especifica el tipo de cursor que se mostrara cuando este se encuentre sobre un elemento.

+La propiedad [CSS:cursor](es/CSS/cursor) especifica el tipo de cursor que se mostrara cuando este se encuentre sobre un elemento.
 
-
+- [CSS:Valor_inicial](es/CSS/Valor_inicial):` CSS:auto`
+- Se aplica a: todos los elementos
+- [CSS:inheritance](es/CSS/inheritance): Si
+- Porcentaje: N/A
+- Media: [CSS:Media:Visual](es/CSS/Media/Visual), [CSS:Media:Interactivo](es/CSS/Media/Interactivo)
+- [CSS:Valor_calculado](es/CSS/Valor_calculado):como sea especificado con URLs relativos convertidos a URLs absolutos.
 
-
Sintaxis

+### Sintaxis
 
-
cursor: <std-cursor-name> | <url> [<x> <y>]? [, <url> [<x> <y>]?]* | CSS:inherit ;
-

+```
+cursor:  |  [ ]? [,  [ ]?]* | CSS:inherit ;
+```
 
-
cursor: [<url> [<x> <y>]?,]*  <std-cursor-name> ;
-

+```
+cursor: [ [ ]?,]*   ;
+```
 
-
Values

+### Values
 
-

- 
<url> {{ mediawiki.external(' ') }}? 

- 
URL del cursor seleccionado mas posición opcional. Mas de un URL puede provocar problemas, in caso de que algunos tipode de imágenes de cursor no puedan ser usados.vea Uso_de_URL_como_valor_de_la_propiedad_cursor para mas detalles.

- 
<std-cursor-name>

- 
Algunos nombres de cursores se encuentra en la siguiente tabla.

-

+- \ {{ mediawiki.external(' ') }}?
+  - : URL del cursor seleccionado mas posición opcional. Mas de un URL puede provocar problemas, in caso de que algunos tipode de imágenes de cursor no puedan ser usados.vea [Uso_de_URL_como_valor_de_la_propiedad_cursor](es/Uso_de_URL_como_valor_de_la_propiedad_cursor) para mas detalles.
+- \
+  - : Algunos nombres de cursores se encuentra en la siguiente tabla.
 
-
Supported CSS standard values

+#### Supported CSS standard values
 
 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
+  
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
Categoríanombre de CSSDescripción
GeneralautoEl browser (user agent) determina el cursor que mostrara basado en el contenido presente.

-    E.g. equivalent to text when hovering text
defaultdefault cursor (typically an arrow)
noneno cursor is rendered
Links & statuscontext-menucursor indicating that a context menu is available under the cursor
helpcursor indicating help is available
pointercursor used when over links (typically a hand)
progresscursor indicating that the program is busy in the background but the user can still interact with the interface (unlike for wait)
waitcursor indicating the program is busy (sometimes an hourglass or a watch)
Selectioncellcursor indicating that cells can be selected
crosshaircross cursor, often used to indicate selection in a bitmap
textcursor indicating text can be selected (typically an I-beam)
vertical-textcursor indicating that vertical text can be selected (typically a sideways I-beam)
Drag and dropaliascursor indicating an alias or shortcut is to be created
copycursor indicating that something can be copied
movethe hovered object may be moved
no-dropcursor showing that a drop is not allowed at the current location
not-allowedcursor showing that something cannot be done
Resize & scrollingall-scrollcursor showing that something can be scrolled in any direction (panned)
col-resizecursor for resizing columns horizontally
e-resizecursor for resizing the right edge of a box
ew-resizecursor for resizing left or right
n-resizecursor for resizing the top edge of a box
ne-resizecursor for resizing the top right corner of a box
nesw-resizecursor for resizing in the top-right or bottom-left directions
ns-resizecursor for resizing up or down
nw-resizecursor for resizing the top left corner of a box
nwse-resizecursor for resizing in the top-left or bottom-right directions
row-resizecursor for resizing rows vertically
s-resizecursor for resizing the bottom edge of a box
se-resizecursor for resizing the bottom right corner of a box
sw-resizecursor for resizing the bottom left corner of a box
w-resizecursor for resizing the left edge of a box
Categoríanombre de CSSDescripción
Generalauto
+        El browser (user agent) determina el cursor que mostrara basado en el
+        contenido presente.
E.g. equivalent to text when
+        hovering text
+      
defaultdefault cursor (typically an arrow)
noneno cursor is rendered
Links & statuscontext-menu
+        cursor indicating that a context menu is available under the cursor
+      
helpcursor indicating help is available
pointercursor used when over links (typically a hand)
progress
+        cursor indicating that the program is busy in the background but the
+        user can still interact with the interface (unlike for
+        wait)
+      
wait
+        cursor indicating the program is busy (sometimes an hourglass or a
+        watch)
+      
Selectioncellcursor indicating that cells can be selected
crosshaircross cursor, often used to indicate selection in a bitmap
textcursor indicating text can be selected (typically an I-beam)
vertical-text
+        cursor indicating that vertical text can be selected (typically a
+        sideways I-beam)
+      
Drag and dropaliascursor indicating an alias or shortcut is to be created
copycursor indicating that something can be copied
movethe hovered object may be moved
no-dropcursor showing that a drop is not allowed at the current location
not-allowedcursor showing that something cannot be done
Resize & scrollingall-scroll
+        cursor showing that something can be scrolled in any direction (panned)
+      
col-resizecursor for resizing columns horizontally
e-resizecursor for resizing the right edge of a box
ew-resizecursor for resizing left or right
n-resizecursor for resizing the top edge of a box
ne-resizecursor for resizing the top right corner of a box
nesw-resizecursor for resizing in the top-right or bottom-left directions
ns-resizecursor for resizing up or down
nw-resizecursor for resizing the top left corner of a box
nwse-resizecursor for resizing in the top-left or bottom-right directions
row-resizecursor for resizing rows vertically
s-resizecursor for resizing the bottom edge of a box
se-resizecursor for resizing the bottom right corner of a box
sw-resizecursor for resizing the bottom left corner of a box
w-resizecursor for resizing the left edge of a box

 

 
-
Extended Gecko CSS values

+#### Extended Gecko CSS values
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
CSS nameDescriptionDeprecation
-moz-aliasreplaced by standard value alias as described in the previous tableGecko 1.8a6
-moz-cellreplaced by standard value cell as described in the previous tableGecko 1.8a6
-moz-context-menureplaced by standard value context-menu as described in the previous tableGecko 1.8a6
-moz-copyreplaced by standard value copy as described in the previous tableGecko 1.8a6
-moz-graba cursor value that should indicate that an element or an object in a webpage can be grabbed 
-moz-grabbinga cursor value that should indicate that an element or an object is currently being grabbed 
-moz-spinningreplaced by standard value progress as described in the previous tableGecko 1.7.1
-moz-zoom-inused to indicate that an element or an object in a webpage is actually being resized, enlarged or is actually being magnified 
-moz-zoom-outused to indicate that an element or an object in a webpage is actually being resized, reduced or is actually being zoomed out 

+| CSS name                                        | Description                                                                                                                   | Deprecation |
+| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| [`-moz-alias`](es/CSS/-moz-alias)               | replaced by standard value `alias` as described in the previous table                                                         | Gecko 1.8a6 |
+| [`-moz-cell`](es/CSS/-moz-cell)                 | replaced by standard value `cell` as described in the previous table                                                          | Gecko 1.8a6 |
+| [`-moz-context-menu`](es/CSS/-moz-context-menu) | replaced by standard value `context-menu` as described in the previous table                                                  | Gecko 1.8a6 |
+| [`-moz-copy`](es/CSS/-moz-copy)                 | replaced by standard value `copy` as described in the previous table                                                          | Gecko 1.8a6 |
+| [`-moz-grab`](es/CSS/-moz-grab)                 | a cursor value that should indicate that an element or an object in a webpage can be grabbed                                  |             |
+| [`-moz-grabbing`](es/CSS/-moz-grabbing)         | a cursor value that should indicate that an element or an object is currently being grabbed                                   |             |
+| [`-moz-spinning`](es/CSS/-moz-spinning)         | replaced by standard value `progress` as described in the previous table                                                      | Gecko 1.7.1 |
+| [`-moz-zoom-in`](es/CSS/-moz-zoom-in)           | used to indicate that an element or an object in a webpage is actually being resized, enlarged or is actually being magnified |             |
+| [`-moz-zoom-out`](es/CSS/-moz-zoom-out)         | used to indicate that an element or an object in a webpage is actually being resized, reduced or is actually being zoomed out |             |
 
-
Examples

+### Examples
 
-
Ver El Ejemplo Vivo

+[Ver El Ejemplo Vivo](/samples/cssref/cursor.html)
 
-
Inline:
+```
+Inline:
 
-<span style="cursor: crosshair">Some Text</span>
+Some Text
 
 External:
 
@@ -256,67 +229,29 @@ External:
 .move {
 	cursor: move;
 }
+```
 
-

-
-
Notes

+### Notes
 
-
While this property works on older browsers, not all values are fully supported.

+While this property works on older browsers, not all values are fully supported.
 
-
Specifications

+### Specifications
 
-
+- [CSS 2.1](http://www.w3.org/TR/CSS21/ui.html#propdef-cursor)
+- [css3-ui](http://www.w3.org/TR/css3-ui/#cursor)
 
-
Browser compatibility

+### Browser compatibility
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
BrowserLowest Version (<std-cursor-name>)Lowest Version (<url>)
Internet Explorer46 (only .cur files)
Firefox1.01.5
Netscape68
Opera7-
Konqueror3.13.1
Safari1.21.2
Safari (Win)3.03.0

+| Browser           | Lowest Version (``) | Lowest Version (``) |
+| ----------------- | ------------------------------------ | ------------------------ |
+| Internet Explorer | 4                                    | 6 (only `.cur` files)    |
+| Firefox           | 1.0                                  | 1.5                      |
+| Netscape          | 6                                    | 8                        |
+| Opera             | 7                                    | -                        |
+| Konqueror         | 3.1                                  | 3.1                      |
+| Safari            | 1.2                                  | 1.2                      |
+| Safari (Win)      | 3.0                                  | 3.0                      |
 
-
See also

+### See also
 
-
{{ languages( { "fr": "fr/CSS/cursor", "pl": "pl/CSS/cursor", "en": "en/CSS/cursor" } ) }}

+{{ languages( { "fr": "fr/CSS/cursor", "pl": "pl/CSS/cursor", "en": "en/CSS/cursor" } ) }}
diff --git a/files/es/web/css/descendant_combinator/index.md b/files/es/web/css/descendant_combinator/index.md
index b777ff16a98fef..281625fb73ee2b 100644
--- a/files/es/web/css/descendant_combinator/index.md
+++ b/files/es/web/css/descendant_combinator/index.md
@@ -3,52 +3,46 @@ title: Los selectores descendientes
 slug: Web/CSS/Descendant_combinator
 translation_of: Web/CSS/Descendant_combinator
 ---
-
{{ CSSRef() }}

-
Sumario

-
El ␣ combinador  (que se supone que representan un espacio, o mejor dicho uno o más espacios en blanco) combina dos selectores tales que el selector combinado incluye sólo los elementos que coinciden con el segundo selector para los que hay un elemento ancestro que coincide con el primer selector. Los selectores descendientes son similares a selectores hijos , pero que no requieren que la relación entre los elementos coincidentes ser estrictamente entre padres e hijos.

-
Sintaxis

-
selector1 selector2 { propiedades de estilos }
-

-
Ejemplo

-
span { background-color: white; }
+{{ CSSRef() }}
+
+## Sumario
+
+El `␣` combinador (que se supone que representan un espacio, o mejor dicho uno o más espacios en blanco) combina dos selectores tales que el selector combinado incluye sólo los elementos que coinciden con el segundo selector para los que hay un elemento ancestro que coincide con el primer selector. Los selectores descendientes son similares a [selectores hijos](https://developer.mozilla.org/en/CSS/Child_selectors "selectores es / CSS / Niños") , pero que no requieren que la relación entre los elementos coincidentes ser estrictamente entre padres e hijos.
+
+## Sintaxis
+
+```
+selector1 selector2 { propiedades de estilos }
+```
+
+## Ejemplo
+
+```css
+span { background-color: white; }
 div span { background-color: DodgerBlue; }
-

-
<div>
-  <span>Span 1.
-    <span>Span 2.</span>
-  </span>
-</div>
-<span>Span 3.</span>
-

-
{{ EmbedLiveSample('Example', '', '', '') }}

-
Especificaciones

-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
EspecificaciónEstadoComentario
Selector CSS Nivel 3{{ Spec2('CSS3 Selectors') }} 
CSS 2.1{{ Spec2('CSS2.1') }} 
CSS 1{{ Spec2('CSS1') }} 

-
Compatibilidad del navegador

+```
+
+```html
+

+  Span 1.
+    Span 2.
+  
+

+Span 3.
+```
+
+{{ EmbedLiveSample('Example', '', '', '') }}
+
+## Especificaciones
+
+| Especificación                                                                           | Estado                                   | Comentario |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ---------- |
+| [Selector CSS Nivel 3](http://www.w3.org/TR/css3-selectors/#general-sibling-combinators) | {{ Spec2('CSS3 Selectors') }} |            |
+| [CSS 2.1](http://www.w3.org/TR/CSS21/selector.html#descendant-selectors)                 | {{ Spec2('CSS2.1') }}             |            |
+| [CSS 1](http://www.w3.org/TR/CSS1/#contextual-selectors)                                 | {{ Spec2('CSS1') }}                 |            |
+
+## Compatibilidad del navegador
+
 {{Compat("css.selectors.descendant")}}
 
-
Ver también

+## Ver también
diff --git a/files/es/web/css/direction/index.md b/files/es/web/css/direction/index.md
index 2d8c7fede0095a..bababcbe56e47b 100644
--- a/files/es/web/css/direction/index.md
+++ b/files/es/web/css/direction/index.md
@@ -3,52 +3,64 @@ title: direction
 slug: Web/CSS/direction
 tags:
   - CSS
-  - 'CSS:Referencias'
+  - CSS:Referencias
   - Referencia_CSS
   - Todas_las_Categorías
 translation_of: Web/CSS/direction
 ---
-

-
{{ CSSRef() }}
-

-
 Resumen 

-
La propiedad direction se utiliza para indicar en que dirección fluye el texto: {{ Cssxref("rtl") }} para hebreo o árabe y {{ Cssxref("ltr") }} para otros tipos de escritura. Esto tendría que especificarse como parte del documento (por ejemplo, usando el código dir en HTML) en lugar que directamente en la hoja de estilo CSS.
-
Esta propiedad establece el sentido de base del texto para los elementos de tipo bloque y la dirección para los elementos creados por la propiedad {{ Cssxref("unicode-bidi") }}. Además, asigna el valor por defecto para la alineación de texto y de elementos tipo bloque dentro de las celdas de una tabla.
-

-
  •  {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("ltr", "de izquierda a derecha") }}
-
  •  Se aplica a: todos los elementos.
-
  •  {{ Cssxref("inheritance", "Valor heredado") }}: si
-
  •  Porcentajes: n/a
-
  •  Medio: {{ Cssxref("Media:Visual", "visual") }}
-
  •  {{ Cssxref("computed value", "Valor calculado") }}:
-

-
 Sintaxis 

-
direction: [ ltr | rtl | inherit ] ;
-

-
 Valores 

-
 ltr 
 Valor por defecto de direction. El contenido, texto y otros elementos fluyen de izquierda a derecha.
-
 rtl 
 El contenido, texto y otros elementos van de derecha a izquierda. 

-
Para que la propiedad direction tenga algún efecto en elementos de tipo en línea (inline), el valor de la propiedad {{ Cssxref("unicode-bidi") }} debe ser embed o override.
-

-
 Ejemplos 

-
blockquote {
+{{ CSSRef() }}
+
+### Resumen
+
+La propiedad `direction` se utiliza para indicar en que dirección fluye el texto: {{ Cssxref("rtl") }} para hebreo o árabe y {{ Cssxref("ltr") }} para otros tipos de escritura. Esto tendría que especificarse como parte del documento (por ejemplo, usando el código `dir` en HTML) en lugar que directamente en la hoja de estilo CSS.
+
+Esta propiedad establece el sentido de base del texto para los elementos de tipo bloque y la dirección para los elementos creados por la propiedad {{ Cssxref("unicode-bidi") }}. Además, asigna el valor por defecto para la alineación de texto y de elementos tipo bloque dentro de las celdas de una tabla.
+
+- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("ltr", "de izquierda a derecha") }}
+- Se aplica a: todos los elementos.
+- {{ Cssxref("inheritance", "Valor heredado") }}: si
+- Porcentajes: n/a
+- Medio: {{ Cssxref("Media:Visual", "visual") }}
+- {{ Cssxref("computed value", "Valor calculado") }}:
+
+### Sintaxis
+
+```
+direction: [ ltr | rtl | inherit ] ;
+```
+
+### Valores
+
+- ltr
+  - : Valor por defecto de `direction`. El contenido, texto y otros elementos fluyen de izquierda a derecha.
+- rtl
+  - : El contenido, texto y otros elementos van de derecha a izquierda.
+
+Para que la propiedad `direction` tenga algún efecto en elementos de tipo en línea (_inline_), el valor de la propiedad {{ Cssxref("unicode-bidi") }} debe ser `embed` o `override`.
+
+### Ejemplos
+
+```
+blockquote {
   direction : rtl ;
 }
-

-
 Notas 

-
Al contrario que el atributo dir en HTML, la propiedad direction no es heredada desde las columnas de una tabla a las celdas, ya que la herencia en CSS sigue el árbol del documento, y las celdas de una tabla son parte de las filas y no de las columnas.
-

-
 Especificaciones 

-
-
 Ver también 

-
{{ Cssxref("unicode-bidi") }} - {{ Cssxref("ltr") }} - {{ Cssxref("rtl") }}
-


-

-

-
Categorías
-
Interwiki Languages
-

-

+```
+
+### Notas
+
+Al contrario que el atributo `dir` en HTML, la propiedad `direction` no es heredada desde las columnas de una tabla a las celdas, ya que la herencia en CSS sigue el árbol del documento, y las celdas de una tabla son parte de las filas y no de las columnas.
+
+### Especificaciones
+
+- [CSS 2.1](http://www.w3.org/TR/CSS21/visuren.html#direction)
+- [CSS 3 Text Module](http://www.w3.org/TR/2003/CR-css3-text-20030514/#direction)
+
+### Ver también
+
+{{ Cssxref("unicode-bidi") }} - {{ Cssxref("ltr") }} - {{ Cssxref("rtl") }}
+
+Categorías
+
+Interwiki Languages
+
 {{ languages( { "fr": "fr/CSS/direction", "pl": "pl/CSS/direction", "en": "en/CSS/direction" } ) }}
diff --git a/files/es/web/css/display/index.md b/files/es/web/css/display/index.md
index a44d60d7e2488c..27110b4c750a85 100644
--- a/files/es/web/css/display/index.md
+++ b/files/es/web/css/display/index.md
@@ -7,21 +7,22 @@ tags:
   - Propiedades CSS
 translation_of: Web/CSS/display
 ---
-
{{CSSRef}}

+{{CSSRef}}
 
-
La propiedad CSS display especifica si un elemento es tratado como block or inline element y el diseño usado por sus hijos, como flow layout(Diseño de Flujo), grid(Cuadricula) o flex(Flexible). 

+La propiedad CSS **`display`** especifica si un elemento es tratado como [block or inline element](/es/docs/Web/CSS/CSS_Flow_Layout) y el diseño usado por sus hijos, como [flow layout](/es/docs/Web/CSS/CSS_Flow_Layout)(Diseño de Flujo), [grid](/es/docs/Web/CSS/CSS_Grid_Layout)(Cuadricula) o [flex](/es/docs/Web/CSS/CSS_Flexible_Box_Layout)(Flexible).
 
-
Formalmente la propiedad display establece los tipos de visualización interna y externa de un elemento. La tipo externa establece la participacion de un elemento en flow layout; la tipo interna establece el layout(Diseño) de los hijos. Algunos valores de display estan totalmente definidos con sus especificaciones propias; por ejemplo el detalle de que pasa cuando display: flex es declarado y definido en la especificacion de Modelo Flexible de Caja(Flexible Box Model specification) de CSS. Vea la siguientes tablas para mas especificaciones individuales.

+Formalmente la propiedad `display` establece los tipos de visualización interna y externa de un elemento. La tipo externa establece la participacion de un elemento en [flow layout](/es/docs/Web/CSS/CSS_Flow_Layout); la tipo interna establece el layout(Diseño) de los hijos. Algunos valores de `display` estan totalmente definidos con sus especificaciones propias; por ejemplo el detalle de que pasa cuando `display: flex` es declarado y definido en la especificacion de Modelo Flexible de Caja(Flexible Box Model specification) de CSS. **Vea** la siguientes tablas para mas especificaciones individuales.
 
-
Además de los Diferentes Tipos de caja de Visualizacion, el valor de none permite Desactivar la Visualizacion DE UN Elemento; cuando no se utiliza none, todos los elementos descendentes también quedan desactivados. El documento se procesa como si el elemento no existiera en el árbol de documentos.

+Además de los Diferentes Tipos de caja de Visualizacion, el valor de `none` permite Desactivar la Visualizacion DE UN Elemento; cuando no se utiliza `none`, todos los elementos descendentes también quedan desactivados. El documento se procesa como si el elemento no existiera en el árbol de documentos.
 
-
/ * Valores <display-outside> * /
+```css
+/ * Valores  * /
 
 display: block;
 display: inline;
 display: run-in;
 
-/ * Valores <display-inside> * /
+/ * Valores  * /
 display: flow;
 display: flow-root;
 display: table;
@@ -30,12 +31,12 @@ display: grid;
 display: ruby;
 display: subgrid;
 
-/ * Valores <display-outside> más valores <display-inside> * /
+/ * Valores  más valores  * /
 display: block flow;
 display: inline table;
 display: flex run-in;
 
-/ * Valores <display-listitem> * /
+/ * Valores  * /
 display: list-item;
 display: list-item block;
 display: list-item inline;
@@ -45,7 +46,7 @@ display: list-item block flow;
 display: list-item block flow-root;
 display: flow list-item block;
 
-/ * Valores <display-internal> * /
+/ * Valores  * /
 display: table-row-group;
 display: table-header-group;
 display: table-footer-group;
@@ -59,11 +60,11 @@ display: ruby-text;
 display: ruby-base-container;
 display: ruby-text-container;
 
-/ * Valores <display-box> * /
+/ * Valores  * /
 display: contents;
 display: none;
 
-/ * Valores <display-legacy> * /
+/ * Valores  * /
 display: inline-block;
 display: inline-table;
 display: inline-flex;
@@ -73,342 +74,166 @@ display: inline-grid;
 display: heredar;
 display: initial;
 display: unset;
-

-
-
{{cssinfo}}

-
-
Sintaxis

-
-
La propiedad display se especifica mediante valores de palabras clave. Los valores de palabras clave se agrupan en seis categorías:

-
-
-
-
En la actualidad, es mejor especificar display utilizando una sola palabra clave; aunque las últimas especificaciones permiten combinar algunas palabras clave, esto aún no está bien soportado por los navegadores.

-
-
Valores

-
-

- 
<display-outside>

- 
Estas palabras clave especifican el tipo de pantalla externa del elemento, que es esencialmente su función en el diseño de flujo: A continuación se definen:
- 
-  
-   
-    
-    
-   
-  
-  
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-  
- 
ValorDescripción
blockEl elemento genera un cuadro de elemento de bloque.
inlineEl elemento genera uno o más cuadros de elemento en línea.
run-in {{experimental_inline}}El elemento genera un cuadro de ejecución. Los elementos de ejecución actúan como líneas o bloques, dependiendo de los elementos circundantes. Es decir: Si el cuadro de ejecución contiene un cuadro de bloque, igual que el bloque. Si un cuadro de bloque sigue el cuadro de ejecución, el cuadro de ejecución se convierte en el primer cuadro en línea del cuadro de bloque. Si sigue un cuadro en línea, el cuadro de ejecución se convierte en un cuadro de bloque.

- 

- 
<display-inside>

- 
Estas palabras clave especifican el tipo de pantalla interna del elemento, que define el tipo de contexto de formato que establece su contenido (suponiendo que es un elemento no reemplazado). Se definen como sigue:
- 
-  
-   
-    
-    
-   
-  
-  
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-  
- 
ValorDescripción
flow {{experimental_inline}}El elemento expone su contenido utilizando el diseño de flujo (diseño en bloque y en línea).
-     
Si su tipo de pantalla externa es inline o run-in, y está participando en un contexto de formato de bloque o en línea, entonces genera un cuadro en línea. De lo contrario genera una caja de contenedor de bloques.

-
-     
Dependiendo del valor de otras propiedades (como {{cssxref("position")}}, {{cssxref("float")}} o {{cssxref("overflow")}} en un contexto de formato en bloque o en línea, establece un nuevo contexto de formato de bloque para su contenido o integra su contenido en su contexto de formato padre.

-    
flow-root {{experimental_inline}}El elemento genera un cuadro de elemento de bloque que establece un nuevo contexto de formato de bloque .
tableEstos elementos se comportan como elementos HTML {{HTMLElement ("table")}}. Define un cuadro de nivel de bloque.
flexEl elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de flexbox .
gridEl elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de cuadrícula.
subgrid {{experimental_inline}}Si el elemento padre tiene display:grid, el elemento en sí y su contenido se establecen de acuerdo con el modelo de cuadrícula.
ruby {{experimental_inline}}El elemento se comporta como un elemento en línea y establece su contenido de acuerdo con el modelo de formato ruby. Se comporta como los elementos HTML {{HTMLElement ("ruby")}} correspondientes.

- 

- 
<display-listitem>

- 

- 
El elemento genera un cuadro de bloque para el contenido y un cuadro en línea de elemento de lista independiente.

-
- 
Si no se especifica ningún valor <display-inside>, el tipo de pantalla interna de la caja principal es el predeterminado flow. Si no se especifica ningún valor <display-outside>, el tipo de pantalla externa de la caja principal tiene el valor predeterminado block.

- 

- 
<display-internal>

- 

- 
Algunos modelos de disposición, como table y ruby, tienen una estructura interna completa, con varios papeles diferentes que sus hijos y descendientes pueden llenar. Esta sección define los valores de visualización "internos", que sólo tienen significado dentro de ese modo de disposición particular.

-
- 
A menos que se especifique lo contrario, el tipo de visualización interno y el tipo de visualización exterior de los elementos que utilizan estos valores de visualización se establecen en la palabra clave dada.

-
- 
-  
-   
-    
-    
-   
-  
-  
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-  
- 
ValorDescripción
table-row-groupEstos elementos se comportan como {{HTMLElement ("tbody")}} Elementos HTML
table-header-groupEstos elementos se comportan como elementos HTML de {{HTMLElement ("thead")}}.
table-footer-groupEstos elementos se comportan como elementos HTML {{HTMLElement ("tfoot")}}.
table-rowEstos elementos se comportan como elementos HTML {{HTMLElement ("tr")}}.
table-cellEstos elementos se comportan como elementos HTML de {{HTMLElement ("td")}}.
table-column-groupEstos elementos se comportan como elementos HTML {{HTMLElement ("colgroup")}}.
table-columnEstos elementos se comportan como elementos HTML {{HTMLElement ("col")}}.
table-captionEstos elementos se comportan como elementos HTML de {{HTMLElement ("caption")}}.
ruby-base {{experimental_inline}}Estos elementos se comportan como elementos {{HTMLElement ("rb")}}.
ruby-text {{experimental_inline}}Estos elementos se comportan como elementos {{HTMLElement ("rt")}}.
ruby-base-container {{experimental_inline}}Estos elementos se comportan como elementos {{HTMLElement ("rbc")}} generados como cajas anónimas.
ruby-text-container {{experimental_inline}}Estos elementos se comportan como elementos {{HTMLElement ("rtc")}}.

- 

- 
<display-box>

- 
Estos valores se definen si un elemento genera cuadros de visualización en absoluto.
- 
-  
-   
-    
-    
-   
-  
-  
-   
-    
-    
-   
-   
-    
-    
-   
-  
- 
ValorDescripción
contents {{experimental_inline}}Estos elementos no producen una caja específica por sí mismos. Son reemplazados por su pseudo-caja y sus cajas infantiles.
none
-     
Desaparece la visualización de un elemento para que no tenga ningún efecto en el diseño (el documento se representa como si el elemento no existiera). Todos los elementos descendentes también tienen su pantalla apagada.

-
-     
Para que un elemento ocupe el espacio que normalmente tendría, pero sin producir nada, utilice la propiedad {{cssxref("visibility")}}.

-    

- 

- 
<display-legacy>

- 
CSS 2 usó una sintaxis de palabra clave única para la propiedad display, requiriendo palabras clave separadas para variantes de nivel de bloque e inline del mismo modo de disposición. Se definen como sigue:
- 
-  
-   
-    
-    
-   
-  
-  
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-   
-    
-    
-   
-  
- 
ValorDescripción
inline-block
-     
El elemento genera una caja de elemento de bloque que fluye con el contenido circundante como si fuera una sola caja en línea (comportándose como un elemento reemplazado)

-
-     
Es equivalente a inline flow-root.

-    
inline-table
-     
El  valor inline-table no tiene una asignación directa en HTML. Se comporta como un elemento HTML {{HTMLElement ("tabla")}}, pero como un cuadro en línea, en el lugar de un cuadro a nivel de bloque. Dentro del cuadro de la tabla hay un contexto de nivel de bloque.

-
-     
Es equivalente a  inline table.

-    
inline-flex
-     
El elemento se comporta como un elemento en línea y se establece su contenido de acuerdo con el modelo flexbox.

-
-     
Es equivalente a  inline flex.

-    
inline-gridEl elemento se comporta como un elemento en línea y se establece su contenido de acuerdo con el modelo de cuadrícula.

- 

-

-
-
Sintaxis formal

+```
+
+{{cssinfo}}
+
+## Sintaxis
+
+La propiedad `display` se especifica mediante valores de palabras clave. Los valores de palabras clave se agrupan en seis categorías:
+
+- [\](#display-outside)
+- [\](#display-inside)
+- [\](#display-listitem)
+- [\](#display-internal)
+- [\](#display-box)
+- [\](#display-legacy)
+
+En la actualidad, es mejor especificar `display` utilizando una sola palabra clave; aunque las últimas especificaciones permiten combinar algunas palabras clave, esto aún no está bien soportado por los navegadores.
+
+### Valores
+
+- \
+
+  - : Estas palabras clave especifican el tipo de pantalla externa del elemento, que es esencialmente su función en el diseño de flujo: A continuación se definen:
+
+    | Valor                                     | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+    | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+    | `block`                                   | El elemento genera un cuadro de elemento de bloque.                                                                                                                                                                                                                                                                                                                                                                                                                        |
+    | `inline`                                  | El elemento genera uno o más cuadros de elemento en línea.                                                                                                                                                                                                                                                                                                                                                                                                                 |
+    | `run-in` {{experimental_inline}} | El elemento genera un cuadro de ejecución. Los elementos de ejecución actúan como líneas o bloques, dependiendo de los elementos circundantes. Es decir: Si el cuadro de ejecución contiene un cuadro de bloque, igual que el bloque. Si un cuadro de bloque sigue el cuadro de ejecución, el cuadro de ejecución se convierte en el primer cuadro en línea del cuadro de bloque. Si sigue un cuadro en línea, el cuadro de ejecución se convierte en un cuadro de bloque. |
+
+- \
+
+  - : Estas palabras clave especifican el tipo de pantalla interna del elemento, que define el tipo de contexto de formato que establece su contenido (suponiendo que es un elemento no reemplazado). Se definen como sigue:
+
+    | Valor                                        | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+    | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+    | `flow` {{experimental_inline}}      | El elemento expone su contenido utilizando el diseño de flujo (diseño en bloque y en línea).Si su tipo de pantalla externa es inline o run-in, y está participando en un contexto de formato de bloque o en línea, entonces genera un cuadro en línea. De lo contrario genera una caja de contenedor de bloques.Dependiendo del valor de otras propiedades (como {{cssxref("position")}}, {{cssxref("float")}} o {{cssxref("overflow")}} en un contexto de formato en bloque o en línea, establece un nuevo [contexto de formato de bloque](/es/docs/Web/Guide/CSS/Block_formatting_context) para su contenido o integra su contenido en su contexto de formato padre. |
+    | `flow-root` {{experimental_inline}} | El elemento genera un cuadro de elemento de bloque que establece un nuevo [contexto de formato de bloque](/es/docs/Web/Guide/CSS/Block_formatting_context) .                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+    | `table`                                      | Estos elementos se comportan como elementos HTML {{HTMLElement ("table")}}. Define un cuadro de nivel de bloque.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+    | `flex`                                       | El elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el [modelo de flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout) .                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+    | `grid`                                       | El elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de cuadrícula.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+    | `subgrid` {{experimental_inline}}   | Si el elemento padre tiene `display:grid`, el elemento en sí y su contenido se establecen de acuerdo con el modelo de cuadrícula.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+    | `ruby` {{experimental_inline}}      | El elemento se comporta como un elemento en línea y establece su contenido de acuerdo con el modelo de formato ruby. Se comporta como los elementos HTML {{HTMLElement ("ruby")}} correspondientes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+
+- \
+
+  - : El elemento genera un cuadro de bloque para el contenido y un cuadro en línea de elemento de lista independiente.
+
+    Si no se especifica ningún valor ``, el tipo de pantalla interna de la caja principal es el predeterminado `flow`. Si no se especifica ningún valor ``, el tipo de pantalla externa de la caja principal tiene el valor predeterminado `block`.
+
+- \
+
+  - : Algunos modelos de disposición, como table y ruby, tienen una estructura interna completa, con varios papeles diferentes que sus hijos y descendientes pueden llenar. Esta sección define los valores de visualización "internos", que sólo tienen significado dentro de ese modo de disposición particular.
+
+    A menos que se especifique lo contrario, el tipo de visualización interno y el tipo de visualización exterior de los elementos que utilizan estos valores de visualización se establecen en la palabra clave dada.
+
+    | Valor                                                  | Descripción                                                                                                 |
+    | ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |
+    | `table-row-group`                                      | Estos elementos se comportan como {{HTMLElement ("tbody")}} Elementos HTML                           |
+    | `table-header-group`                                   | Estos elementos se comportan como elementos HTML de {{HTMLElement ("thead")}}.                       |
+    | `table-footer-group`                                   | Estos elementos se comportan como elementos HTML {{HTMLElement ("tfoot")}}.                          |
+    | `table-row`                                            | Estos elementos se comportan como elementos HTML {{HTMLElement ("tr")}}.                              |
+    | `table-cell`                                           | Estos elementos se comportan como elementos HTML de {{HTMLElement ("td")}}.                           |
+    | `table-column-group`                                   | Estos elementos se comportan como elementos HTML {{HTMLElement ("colgroup")}}.                      |
+    | `table-column`                                         | Estos elementos se comportan como elementos HTML {{HTMLElement ("col")}}.                          |
+    | `table-caption`                                        | Estos elementos se comportan como elementos HTML de {{HTMLElement ("caption")}}.                   |
+    | `ruby-base` {{experimental_inline}}           | Estos elementos se comportan como elementos {{HTMLElement ("rb")}}.                                   |
+    | `ruby-text` {{experimental_inline}}           | Estos elementos se comportan como elementos {{HTMLElement ("rt")}}.                                   |
+    | `ruby-base-container` {{experimental_inline}} | Estos elementos se comportan como elementos {{HTMLElement ("rbc")}} generados como cajas anónimas. |
+    | `ruby-text-container` {{experimental_inline}} | Estos elementos se comportan como elementos {{HTMLElement ("rtc")}}.                               |
+
+- \
+
+  - : Estos valores se definen si un elemento genera cuadros de visualización en absoluto.
+
+    | Valor                                       | Descripción                                                                                                                                                                                                                                                                                                                                                              |
+    | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+    | `contents` {{experimental_inline}} | Estos elementos no producen una caja específica por sí mismos. Son reemplazados por su pseudo-caja y sus cajas infantiles.                                                                                                                                                                                                                                               |
+    | `none`                                      | Desaparece la visualización de un elemento para que no tenga ningún efecto en el diseño (el documento se representa como si el elemento no existiera). Todos los elementos descendentes también tienen su pantalla apagada.Para que un elemento ocupe el espacio que normalmente tendría, pero sin producir nada, utilice la propiedad {{cssxref("visibility")}}. |
+
+- \
+
+  - : CSS 2 usó una sintaxis de palabra clave única para la propiedad `display`, requiriendo palabras clave separadas para variantes de nivel de bloque e inline del mismo modo de disposición. Se definen como sigue:
+
+    | Valor          | Descripción                                                                                                                                                                                                                                                                                                      |
+    | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+    | `inline-block` | El elemento genera una caja de elemento de bloque que fluye con el contenido circundante como si fuera una sola caja en línea (comportándose como un elemento reemplazado)Es equivalente a `inline flow-root`.                                                                                                   |
+    | `inline-table` | El valor `inline-table` no tiene una asignación directa en HTML. Se comporta como un elemento HTML {{HTMLElement ("tabla")}}, pero como un cuadro en línea, en el lugar de un cuadro a nivel de bloque. Dentro del cuadro de la tabla hay un contexto de nivel de bloque.Es equivalente a `inline table`. |
+    | `inline-flex`  | El elemento se comporta como un elemento en línea y se establece su contenido de acuerdo con el modelo flexbox.Es equivalente a `inline flex`.                                                                                                                                                                   |
+    | `inline-grid`  | El elemento se comporta como un elemento en línea y se establece su contenido de acuerdo con el modelo de cuadrícula.                                                                                                                                                                                            |
+
+### Sintaxis formal
 
 {{csssyntax}}
 
-
Sobre Accesibilidad

+## Sobre Accesibilidad
 
-
display: none;

+### `display: none;`
 
-
Al utilizar un valor de none en la propiedad display el elemento se elimina del árbol de accesibilidad. El efecto de esto será que este elemento y sus hijos no serán anunciados a los lectores de pantalla utilizados por no videntes.

+Al utilizar un valor de `none `en la propiedad `display `el elemento se elimina del [árbol de accesibilidad](/es/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs). El efecto de esto será que este elemento y sus hijos no serán anunciados a los lectores de pantalla utilizados por no videntes.
 
-
Si deseas ocultar el elemento solo de forma visible, pero que los lectores de accesibilidad lo sigan anunciando, puedes utilizar un método alternativo con una combinación de propiedades de CSS.

+Si deseas ocultar el elemento solo de forma visible, pero que los lectores de accesibilidad lo sigan anunciando, puedes utilizar [un método alternativo con una combinación de propiedades de CSS](https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link).
 
-
display: contents;

+### `display: contents;`
 
-
Los navegadores eliminarán el atributo predeterminado de role de cualquier elemento con una propiedad display que tenga un valor de contents del árbol de accesibilidad. Esto causará que los elementos y sus descendientes no sean anunciados a los lectores de pantalla.

+Los navegadores eliminarán el atributo predeterminado de `role` de cualquier elemento con una propiedad `display` que tenga un valor de `contents` del árbol de accesibilidad. Esto causará que los elementos y sus descendientes no sean anunciados a los lectores de pantalla.
 
-
Esto es un bug ya reportado, para encontrar más información por favor referirse a los siguientes artículos

+Esto es un bug ya reportado, para encontrar más información por favor referirse a los siguientes artículos
 
-
+- [Display: Contents Is Not a CSS Reset | Adrian Roselli](http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html)
+- [More accessible markup with display: contents — hiddedevries.nl](https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents)
 
-
Tablas

+### Tablas
 
-
Al trabajar con una tabla, si la propiedad display cambia al valor de block, grid o flex se altera la representación de ese elemento en el árbol de accessibilidad. Esto causará que el elemento ya no será anunciado como una tabla.

+Al trabajar con una tabla, si la propiedad `display` cambia al valor de `block`, `grid` o `flex` se altera la representación de ese elemento en el árbol de accessibilidad. Esto causará que el elemento ya no será anunciado como una tabla.
 
-
Para más información por favor referirse a los siguientes artículos:

+Para más información por favor referirse a los siguientes artículos:
 
-
+- [Short note on what CSS display properties do to table semantics — The Paciello Group](https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/)
+- [Hidden content for better a11y | Go Make Things](https://gomakethings.com/hidden-content-for-better-a11y/)
+- [MDN Understanding WCAG, Guideline 1.3 explanations](/es/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways)
+- [Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
 
-
Ejemplos

+## Ejemplos
 
-
Ocultar Elementos

+### Ocultar Elementos
 
-
Contenido HTML

+#### Contenido HTML
 
-
<p> Texto visible </ p>

+```html
+
 Texto visible 
+```
 
-
Contenido CSS

+#### Contenido CSS
 
-
  display: none;

+```css
+  display: none;
+```
 
-
Resultado

+### Resultado
 
-
{{EmbedLiveSample ("Hide_element", 300, 60)}}

+{{EmbedLiveSample ("Hide_element", 300, 60)}}
 
-
Ver El Ejemplo Vivo

+[Ver El Ejemplo Vivo](/samples/cssref/display.html)
 
-
Especificaciones

+## Especificaciones
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
EspecificaciónEstadoComentario
{{SpecName ('CSS3 Display', '# the-display-properties', 'display')}}{{Spec2 ('Pantalla CSS3')}}Agregado run-in, flow, flow-root, contents, y los valores de varias palabras clave.
{{SpecName ('CSS3 Ruby', '# ruby-display', 'display')}}{{Spec2 ('CSS3 Ruby')}}Agregado ruby, ruby-base, ruby-text, ruby-base-container, y ruby-text-container.
{{SpecName ('CSS3 Grid', '# grid-containers', 'display')}}{{Spec2 ('Cuadrícula CSS3')}}Se agregaron los valores del modelo de cuadrícula.
{{SpecName ('CSS3 Flexbox', '# flex-containers', 'display')}}{{Spec2 ('CSS3 Flexbox')}}Se agregaron los valores del modelo de caja flexible.
{{SpecName ('CSS2.1', 'visuren.html # display-prop', 'display')}}{{Spec2 ('CSS2.1')}}Se agregaron los valores del modelo de tabla e inline-block.
{{SpecName ('CSS1', '#display', 'display')}}{{Spec2 ('CSS1')}}Definición inicial. Valores básicos: none, block, inline, y list-item.

+| Especificación                                                                               | Estado                                   | Comentario                                                                                  |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------- |
+| {{SpecName ('CSS3 Display', '# the-display-properties', 'display')}} | {{Spec2 ('Pantalla CSS3')}}     | Agregado `run-in`, `flow`, `flow-root`, `contents`, y los valores de varias palabras clave. |
+| {{SpecName ('CSS3 Ruby', '# ruby-display', 'display')}}                     | {{Spec2 ('CSS3 Ruby')}}         | Agregado `ruby`, `ruby-base`, `ruby-text`, `ruby-base-container`, y `ruby-text-container`.  |
+| {{SpecName ('CSS3 Grid', '# grid-containers', 'display')}}                 | {{Spec2 ('Cuadrícula CSS3')}} | Se agregaron los valores del modelo de cuadrícula.                                          |
+| {{SpecName ('CSS3 Flexbox', '# flex-containers', 'display')}}             | {{Spec2 ('CSS3 Flexbox')}}     | Se agregaron los valores del modelo de caja flexible.                                       |
+| {{SpecName ('CSS2.1', 'visuren.html # display-prop', 'display')}}     | {{Spec2 ('CSS2.1')}}             | Se agregaron los valores del modelo de tabla e `inline-block.`                              |
+| {{SpecName ('CSS1', '#display', 'display')}}                                 | {{Spec2 ('CSS1')}}                 | Definición inicial. Valores básicos: `none`, `block`, `inline`, y `list-item`.              |
 
-
Compatibilidad del navegador

+## Compatibilidad del navegador
 
 {{Compat("css.properties.display")}}
 
-
Ver también

+## Ver también
 
-
    
- 
  • {{cssxref("visibility")}}, {{cssxref("float")}}, {{cssxref("posición")}}
    • 
- 
  • {{cssxref("flex")}}
    • 
-

+- {{cssxref("visibility")}}, {{cssxref("float")}}, {{cssxref("posición")}}
+- {{cssxref("flex")}}
diff --git a/files/es/web/css/env/index.md b/files/es/web/css/env/index.md
index 42583b2eebf08f..039bab947254e6 100644
--- a/files/es/web/css/env/index.md
+++ b/files/es/web/css/env/index.md
@@ -11,18 +11,12 @@ tags:
 translation_of: Web/CSS/env()
 original_slug: Web/CSS/env()
 ---
-
La función CSS env() puede ser utilizada para insertar el valor de una variable de entorno, que sea global para un documento en particular, al contrario de una propiedad personalizada. Entonces, la funcion env() puede ser utilizada para remplazar el valor en ubicaciones arbitrarias, de la misma manera que la función var().

+La función [CSS](/es/docs/Web/CSS) **`env`\*\***`()`\*_ puede ser utilizada para insertar el valor de una variable de entorno, que sea global para un documento en particular, al contrario de una [propiedad personalizada](/es/docs/Web/CSS/--_). Entonces, la funcion env() puede ser utilizada para remplazar el valor en ubicaciones arbitrarias, de la misma manera que la función [var()](/es/docs/Web/CSS/var).
 
-
La función env() puede ser utilizada en el lugar de cualquier parte de un valor en cualquier propiedad de cualquier elemento, o de cualquier parte de un valor en cualquier descriptor de cualquier regla @, y en varios otros lugares donde los valores CSS están permitidos.

+La función env() puede ser utilizada en el lugar de cualquier parte de un valor en cualquier propiedad de cualquier elemento, o de cualquier parte de un valor en cualquier descriptor de cualquier regla @, y en varios otros lugares donde los valores CSS están permitidos.
 
-
Las Variables de Entorno CSS están actualmente en curso de definición en un borrador de Recomendación: CSS Environment Variables Module Level 1.

+Las Variables de Entorno CSS están actualmente en curso de definición en un borrador de Recomendación: [CSS Environment Variables Module Level 1](https://drafts.csswg.org/css-env-1/).
 
-
Compatibilidad con navegadores

+## Compatibilidad con navegadores
 
-

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

-

-
-
 

+{{Compat("css.properties.custom-property.env")}}
diff --git a/files/es/web/css/filter-function/blur/index.md b/files/es/web/css/filter-function/blur/index.md
index c1d0a80431d4e7..646177bc4a94e5 100644
--- a/files/es/web/css/filter-function/blur/index.md
+++ b/files/es/web/css/filter-function/blur/index.md
@@ -9,33 +9,31 @@ tags:
 translation_of: Web/CSS/filter-function/blur()
 original_slug: Web/CSS/filter-function/blur()
 ---
-
{{cssref}}

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

+La función CSS **`blur()`** aplica un [desenfoque Gaussiano](https://en.wikipedia.org/wiki/Gaussian_blur) a la imagen de entrada. El resultado es un {{cssxref("<filter-function>")}}.
 
-
{{EmbedInteractiveExample("pages/css/function-blur.html")}}

+{{EmbedInteractiveExample("pages/css/function-blur.html")}}
 
+## Sintaxis
 
+```
+blur(radio)
+```
 
-
Sintaxis

+### Parámetros
 
-
blur(radio)

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

+## Ejemplos
 
-

- 
radio

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

-

-
-
Ejemplos

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

+blur(1.17rem)  /* Desenfoque con 1.17rem de radio */
+```
 
-
Ver también

+## Ver también
 
-
    
- 
  • {{cssxref("<filter-function>")}}
    • 
-

+- {{cssxref("<filter-function>")}}
diff --git a/files/es/web/css/filter-function/brightness/index.md b/files/es/web/css/filter-function/brightness/index.md
index 70685a37dcf954..5c2545bf1aeba2 100644
--- a/files/es/web/css/filter-function/brightness/index.md
+++ b/files/es/web/css/filter-function/brightness/index.md
@@ -4,43 +4,43 @@ slug: Web/CSS/filter-function/brightness
 translation_of: Web/CSS/filter-function/brightness()
 original_slug: Web/CSS/filter-function/brightness()
 ---
-
{{cssref}}

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

+La función **`brightness()`** [CSS](/es/docs/Web/CSS) aplica un multiplicador linear a la imagen, haciendo que su apariencia sea más brallante u oscura. Su resultado es un {{cssxref("<filter-function>")}}.
 
-
{{EmbedInteractiveExample("pages/css/function-brightness.html")}}

+{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
 
-
El código de este ejemplo interactivo se encuentra en GitHub repository. Si desea contribuir en el proyecto de ejemplos interactivos, por favor clone el repositorio https://github.com/mdn/interactive-examples y envie un pull request.

+El código de este ejemplo interactivo se encuentra en GitHub repository. Si desea contribuir en el proyecto de ejemplos interactivos, por favor clone el repositorio  y envie un pull request.
 
-
Sintaxis

+## Sintaxis
 
-
brightness(valor)

+```
+brightness(valor)
+```
 
-
Parametros

+### Parametros
 
-

- 
valor

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

-

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

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

-
-
Ver también

-
-
    
- 
  • {{cssxref("<filter-function>")}}
    • 
- 
  • {{cssxref("filter-function/blur", "blur()")}}
    • 
- 
  • {{cssxref("filter-function/contrast", "contrast()")}}
    • 
- 
  • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
    • 
- 
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • 
- 
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
    • 
- 
  • {{cssxref("filter-function/invert", "invert()")}}
    • 
- 
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • 
- 
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • 
- 
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • 
-

+brightness(200%) /* Doble de Brillo */
+```
+
+## Ver también
+
+- {{cssxref("<filter-function>")}}
+- {{cssxref("filter-function/blur", "blur()")}}
+- {{cssxref("filter-function/contrast", "contrast()")}}
+- {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
+- {{cssxref("filter-function/grayscale", "grayscale()")}}
+- {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
+- {{cssxref("filter-function/invert", "invert()")}}
+- {{cssxref("filter-function/opacity", "opacity()")}}
+- {{cssxref("filter-function/saturate", "saturate()")}}
+- {{cssxref("filter-function/sepia", "sepia()")}}
diff --git a/files/es/web/css/filter-function/index.md b/files/es/web/css/filter-function/index.md
index b49712c5d1694e..20f4c8eed99246 100644
--- a/files/es/web/css/filter-function/index.md
+++ b/files/es/web/css/filter-function/index.md
@@ -8,58 +8,41 @@ tags:
   - Tipos de dato CSS
 translation_of: Web/CSS/filter-function
 ---
-
{{cssref}}

-
-
El tipo de datos CSS <filter-function> representa un efecto gráfico que puede cambiar la apariencia de una imagen de entrada. Se usa en las propiedades {{cssxref("filter")}} y {{cssxref("backdrop-filter")}}.

-
-
Sintaxis

-
-
El tipo de datos <filter-function> se especifica utilizando una de las funciones de filtro enumeradas a continuación. Cada función requiere un argumento que, si no es válido, da como resultado que no se aplique ningún filtro.

-
-

- 
blur()

- 
Difumina la imagen.

- 
brightness()

- 
Hace que la imagen sea más brillante o más oscura.

- 
contrast()

- 
Aumenta o disminuye el contraste de la imagen.

- 
drop-shadow()

- 
Aplica una sombra paralela detrás de la imagen.

- 
grayscale()

- 
Convierte la imagen a escala de grises.

- 
hue-rotate()

- 
Cambia el tono general de la imagen.

- 
invert()

- 
Invierte los colores de la imagen.

- 
opacity()

- 
Hace que la imagen sea transparente.

- 
saturate()

- 
Super-saturado o desaturado la imagen de entrada.

- 
sepia()

- 
Convierte la imagen a sepia.

-

-
-
Especificación

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
EspecificaciónEstadoComentarios
{{ SpecName('Filters 1.0', '#typedef-filter-function', '<filter-function>') }}{{ Spec2('Filters 1.0') }}Definición inicial.

-
-
Ver también

-
-
    
- 
  • Propiedades que usan este tipo de datos: {{cssxref("filter")}} y {{cssxref("backdrop-filter")}}
    • 
-

+{{cssref}}
+
+El [tipo de datos](/es/docs/Web/CSS/CSS_Types) [CSS](/es/docs/Web/CSS) **``** representa un efecto gráfico que puede cambiar la apariencia de una imagen de entrada. Se usa en las propiedades {{cssxref("filter")}} y {{cssxref("backdrop-filter")}}.
+
+## Sintaxis
+
+El tipo de datos `` se especifica utilizando una de las funciones de filtro enumeradas a continuación. Cada función requiere un argumento que, si no es válido, da como resultado que no se aplique ningún filtro.
+
+- [`blur()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur)
+  - : Difumina la imagen.
+- [`brightness()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness)
+  - : Hace que la imagen sea más brillante o más oscura.
+- [`contrast()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast)
+  - : Aumenta o disminuye el contraste de la imagen.
+- [`drop-shadow()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow)
+  - : Aplica una sombra paralela detrás de la imagen.
+- [`grayscale()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale)
+  - : Convierte la imagen a escala de grises.
+- [`hue-rotate()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate)
+  - : Cambia el tono general de la imagen.
+- [`invert()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert)
+  - : Invierte los colores de la imagen.
+- [`opacity()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity)
+  - : Hace que la imagen sea transparente.
+- [`saturate()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate)
+  - : Super-saturado o desaturado la imagen de entrada.
+- [`sepia()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia)
+  - : Convierte la imagen a sepia.
+
+## Especificación
+
+| Especificación                                                                                                   | Estado                               | Comentarios         |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- |
+| {{ SpecName('Filters 1.0', '#typedef-filter-function', '<filter-function>') }} | {{ Spec2('Filters 1.0') }} | Definición inicial. |
+
+## Ver también
+
+- Propiedades que usan este tipo de datos: {{cssxref("filter")}} y {{cssxref("backdrop-filter")}}
diff --git a/files/es/web/css/filter/index.md b/files/es/web/css/filter/index.md
index 52c97bee8af437..315ac00be671d8 100644
--- a/files/es/web/css/filter/index.md
+++ b/files/es/web/css/filter/index.md
@@ -10,21 +10,22 @@ tags:
   - SVG
 translation_of: Web/CSS/filter
 ---
-
{{SeeCompatTable}}{{CSSRef}}

+{{SeeCompatTable}}{{CSSRef}}
 
-
Resumen

+## Resumen
 
-
La propiedad CSS filter dota de efectos gráficos como el desenfoque o cambio de color en la representación antes de que se muestre el elemento. Los filtros se utilizan comúnmente para ajustar la representación de imágenes, fondos o bordes.

+La propiedad CSS **`filter`** dota de efectos gráficos como el desenfoque o cambio de color en la representación antes de que se muestre el elemento. Los filtros se utilizan comúnmente para ajustar la representación de imágenes, fondos o bordes.
 
-
Hay varias funciones Incluidas en el estándar CSS que logran efectos predefinidos. También puede hacer referencia a un filtro especificado en SVG con una URL  a un filtro de un elemento SVG.

+Hay varias funciones Incluidas en el estándar CSS que logran efectos predefinidos. También puede hacer referencia a un filtro especificado en SVG con una URL a un [filtro de un elemento SVG](/es/docs/Web/SVG/Element/filter "/en/SVG/Element/filter").
 
-
Nota: Versiones anteriores (4.0 hasta 9.0) del navegador Internet Explorer de Windows admiten una propiedad "filter" no incluida en el estándar que ha quedado en desuso.

+> **Nota:** Versiones anteriores (4.0 hasta 9.0) del navegador Internet Explorer de Windows admiten una propiedad ["filter"]() no incluida en el estándar que ha quedado en desuso.
 
-
{{cssinfo}}

+{{cssinfo}}
 
-
Sintaxis

+## Sintaxis
 
-
filter: url("filters.svg#filter-id");
+```css
+filter: url("filters.svg#filter-id");
 filter: blur(5px);
 filter: brightness(0.4);
 filter: contrast(200%);
@@ -43,88 +44,97 @@ filter: contrast(175%) brightness(3%);
 filter: inherit;
 filter: initial;
 filter: unset;
-

+```
 
-
Con una función, use el siguiente código:

+Con una función, use el siguiente código:
 
-
filter: <filter-function> [<filter-function>]* | none
-

+```
+filter:  []* | none
+```
 
-
Para referenciar a al valor {{SVGElement("filter")}} de un elemento SVG, use el siguiente código:

+Para referenciar a al valor {{SVGElement("filter")}} de un elemento SVG, use el siguiente código:
 
-
filter: url(file.svg#filter-element-id)
-

+```
+filter: url(file.svg#filter-element-id)
+```
 
-
Interpolación

+### Interpolación
 
-
Si ambos filtros tienen una lista de funciones con la misma longitud y sin {{cssxref("<url>")}}, cada una de las funciones de filtro es interpolada, de acuerdo a sus reglas específicas. Si tienen longitudes diferentes, las funciones equivalentes que falten de la lista más larga se añaden al final de la lista más corta, usando sus valores lagunares, y después todas las funciones son interpoladas de acuerdo a sus reglas específicas. Si un filtro es 'none', es reemplazado por la lista de funciones de filtro del otro, usando los valores predeterminados para cada función, y después todos los filtros son interpolados de acuerdo a su regla específica. De otra forma, se usa interpolación discreta.

+Si ambos filtros tienen una lista de funciones con la misma longitud y sin {{cssxref("<url>")}}, cada una de las funciones de filtro es interpolada, de acuerdo a sus reglas específicas. Si tienen longitudes diferentes, las funciones equivalentes que falten de la lista más larga se añaden al final de la lista más corta, usando sus valores lagunares, y después todas las funciones son interpoladas de acuerdo a sus reglas específicas. Si un filtro es 'none', es reemplazado por la lista de funciones de filtro del otro, usando los valores predeterminados para cada función, y después todos los filtros son interpolados de acuerdo a su regla específica. De otra forma, se usa interpolación discreta.
 
-
Sintaxis formal

+### Sintaxis formal
 
 {{csssyntax}}
 
-
Ejemplos

+## Ejemplos
 
-
Ejemplos del uso de las funciones predefinidas se muestran a continuación. Ver cada función. Ver cada función para un ejemplo específico.

+Ejemplos del uso de las funciones predefinidas se muestran a continuación. Ver cada función. Ver cada función para un ejemplo específico.
 
-
.mydiv { filter: grayscale(50%) }
+```css
+.mydiv { filter: grayscale(50%) }
 
 /* funcion del blanco y negro "grayscale" al 50% y un desenfoque "blur" de 10px */
 img {
   filter: grayscale(0.5) blur(10px);
-}

+}
+```
 
-
Ejemplos del uso de la función  con el recurso SVG se muestran a continuación.

+Ejemplos del uso de la función con el recurso SVG se muestran a continuación.
 
-
.target { filter: url(#c1); }
+```css
+.target { filter: url(#c1); }
 
 .mydiv { filter: url(commonfilters.xml#large-blur) }
-

-
-
Funciones

-
-
Para utilizar la propiedad CSS filter, hay que especificar un valor para una de las siguientes funciones. Si el valor no es válido, la función se ejecutará de la misma manera que si se le aplicara "none". Las funciones que toman un valor en procentaje (como en el 34%) también aceptan el valor expresado como decimal (como en 0.34 ó .34).

-
-
url()

-
-
La función url() toma la dirección de un archivo XML que especifica un filtro SVG, y puede incluir un ancla para un elemento de filtro especifico.

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

-
-
blur()

-
-
Aplica un desenfoque Gaussiano a la imagen. El valor de 'radio' define el valor de la desviación estándar de la función de desenfoque Gaussiano o el número de píxeles que se mezclan entre sí, por lo que un valor mayor creará un mayor desenfoque. El valor lagunar de interpolación (es decir, si no se proporciona ningún parametro) es 0. El parámetro se especifica como una longitud de CSS, pero no acepta porcentajes.

-
-
filter: blur(5px)
-

-
-
-
-
<svg height="0" xmlns="http://www.w3.org/2000/svg">
-  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
-  </filter>
-</svg>

-
-
{{EmbedLiveSample('blur_example','100%','236px','')}}

-
-
brightness()

-
-
Se aplica una multiplicación lineal a la imagen, haciendo que parezca más o menos brillante. Un valor de 0% convertirá la imagen completamente a negro. Un valor de 100% no producirá ningún cambio en la imagen. Otros valores causarán una multiplicación lineal en el efecto. Los valores de una cantidad superior al 100% aumentarán el brillo de la imagen. El valor lagunar (si no se especifica ningún valor) es 1 (equivalente a 100%).

-
-
filter: brightness(0.5)

-
-
<svg height="0" xmlns="http://www.w3.org/2000/svg">
- <filter id="brightness">
-    <feComponentTransfer>
-        <feFuncR type="linear" slope="[amount]"/>
-        <feFuncG type="linear" slope="[amount]"/>
-        <feFuncB type="linear" slope="[amount]"/>
-    </feComponentTransfer>
-  </filter>
-</svg>

-
-
-
-
{{EmbedLiveSample('brightness_example','100%','231px','')}}

-
-
contrast()

-
-
Ajusta el contraste del elemento. Un valor superior a 0% creará una imagen completamente gris. Un valor de 100% deja al elemento sin cambios. Valores superiores a 100% son permitidos, dando como resultado mayor contraste. El valor lagunar de interpolación (si no se especifica ningún valor) es 1 (equivalente a 100%).

-
-
filter: contrast(200%)
-

-
-
<svg height="0" xmlns="http://www.w3.org/2000/svg">
-  <filter id="contrast">
-    <feComponentTransfer>
-      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
-      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
-      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
-    </feComponentTransfer>
-  </filter>
-</svg>
-

-
-
-
-
{{EmbedLiveSample('contrast_example','100%','203px','')}}

-
-
drop-shadow()

-
-
Aplica un efecto de sombra a la imagen. Una  sombra es realmente una versión desenfocada y separada de la máscara alfa de la imagen, dibujada en un color particular, debajo de la misma. La función acepta un parámetro de tipo <shadow> (definido en CSS3 Backgrounds), con la excepción de que la palabra clave ‘inset’ no está permitida. Esta función es similar a la propiedad {{cssxref("box-shadow")}}, más establecida; la diferencia es que con filtros, algunos navegadores proveen aceleración de hardware para mayor rendimiento. Los valores para el parámetro <shadow> son los siguientes:

-
-

- 
<offset-x> <offset-y> (requerido)

- 
Son dos valores {{cssxref("<length>")}} para establecer la posición de la sobra respecto a la imagen. <offset-x> especifica la distancia horizontal. Valores negativos establecen la sombra a la izquierda del elemento. <offset-y> especifica la distancia vertical. Valores negativos establecen la sombra arriba del elemento. Véase {{cssxref("<length>")}} para unidades posibles.

- Si ambos valores son 0, la sombra será colocada detrás del elemento (y puede generar un efecto de desenfoque si se establecen <blur-radius> y/o <spread-radius>).

- 
<blur-radius> (opcional)

- 
Es un tercer valor {{cssxref("<length>")}}. Mientras mayor sea el valor, mayor será el desenfoque, por lo que la sombra se vuelve más grande y clara. No se permiten valores negativos. Si no es especificado, su valor predeterminado será 0 (el borde de la sombra es nítido).

- 
<spread-radius> (opcional)

- 
Es el cuarto valor {{cssxref("<length>")}}. Valores positivos harán que la sombra se expanda, y valores negativos harán que la sombra se contraiga. Si no se especifica, su valor predeterminado será 0 (la sombra tendrá el mismo tamaño del elemento). 

- Nota: Webkit, y tal vez otros navegadores, no soportan este cuarto valor; si se incluye, no se aplicará el filtro.

- 
<color> (opcional)

- 
Véanse los valores {{cssxref("<color>")}} para las opciones posibles de palabras clave y notaciones. Si no se especifica, el color depende del navegador. En Gecko (Firefox), Presto (Opera) y Trident (Internet Explorer), se usa el valor de la propiedad {{cssxref("color")}}. Por otro lado, la sombra en WebKit es transparente, y por lo tanto, es inútil si se omite <color>.

-

-
-
filter: drop-shadow(16px 16px 10px black)

-
-
<svg height="0" xmlns="http://www.w3.org/2000/svg">
- <filter id="drop-shadow">
-    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
-    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
-    <feFlood flood-color="[color]"/>
-    <feComposite in2="offsetblur" operator="in"/>
-    <feMerge>
-      <feMergeNode/>
-      <feMergeNode in="SourceGraphic"/>
-    </feMerge>
-  </filter>
-</svg>
-

-
-
-
-
{{EmbedLiveSample('shadow_example','100%','300px','')}}

-
-
grayscale()

-
-
Convierte la imagen a escala de grises. El valor del parámetro define la proporción de la conversión. Un valor de 100% es completamente a escala de grises. Un valor de 0% deja la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales de este efecto. Si el parámetro no es incluido, se usa el valor de 0.

-
-
filter: grayscale(100%)

-
-
-
-
{{EmbedLiveSample('grayscale_example','100%','209px','')}}

-
-
hue-rotate()

-
-
Aplica una rotación de tono (matiz) al elemento. El valor del ángulo define el número de grados al rededor del círculo de colores al que se ajustarán los colores de la imagen. Un valor de 0deg deja la imagen sin cambios. Si el parámetro del ángulo no es especiicado, se usa valor de 0deg. Aunque no hay valor máximo, el efecto de valores encima de 360deg da la vuelta al círculo de colores.

-
-
filter: hue-rotate(90deg)

-
-
-
-
<svg height="0" xmlns="http://www.w3.org/2000/svg">
-  <filter id="svgHueRotate" >
-    <feColorMatrix type="hueRotate" values="[angle]" />
-  <filter />
-</svg>

-
-
{{EmbedLiveSample('huerotate_example','100%','221px','')}}

-
-
invert()

-
-
Invierte los colores de la imagen. El parámetro define la proporción de la conversión. Un valor de 100% invierte completamente la imagen. Un valor de 0% deja a la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales del efecto. Si el parámetro no es especificado, se usa un valor de 0.

-
-
filter: invert(100%)

-
-
-
-
{{EmbedLiveSample('invert_example','100%','407px','')}}

-
-
opacity()

-
-
Aplica transparencia a la imagen. El valor del parámetro define la proporción de la conversión. Un valor de 0% es completamente transparente. Un valor de 100% deja la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales del efecto. Esto es equivalente a multiplicar las muestras de la imagen por el valor indicado. Si el parámetro no es especificado, se usa un valor de 1. Esta función es similar a la propiedad {{cssxref("opacity")}}, más establecida; la diferencia es que con filtros, algunos navegadores proveen aceleración de hardware para mayor rendimiento.

-
-
filter: opacity(50%)

-
-
-
-
{{EmbedLiveSample('opacity_example','100%','210px','')}}

-
-
saturate()

-
-
Aplica saturación a la imagen. El valor del parámetro define la proporción de la conversión. Un valor de 0% es completamente sin saturación. Un valor de 100% deja la imagen sin cambios. Otros valores son múltiplos lineales del efecto. Valores por encima de 100% son permitidos, dando resultados de sobresaturación. Si no se especifica el parámetro, se usa el valor de 1.

-
-
filter: saturate(200%)

-
-
-
-
{{EmbedLiveSample('saturate_example','100%','332px','')}}

-
-
sepia()

-
-
Convierte la imagen a sepia. El valor del parámetro define la proporción de la conversión. Un valor de 100% es completamente sepia. Un valor de 0% deja la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales del efecto. Si no se especifica el parámetro, se usa el valor de 0.

-
-
filter: sepia(100%)

-
-
-
-
{{EmbedLiveSample('sepia_example','100%','229px','')}}

-
-
Combinando funciones

-
-
Se puede combinar cualquier número de funciones para manipular la representación de la imagen. Los siguientes ejemplos aumentan el contraste y brillo de la imagen.

-
-
filter: contrast(175%) brightness(3%)

-
-
+```
 
-
{{EmbedLiveSample('combination_example','100%','209px','')}}

+{{EmbedLiveSample('combination_example','100%','209px','')}}
 
-
Especificaciones

+## Especificaciones
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
EspecificaciónEstatusComentarios
{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}{{ Spec2('Filters 1.0') }}Definición inicial

+| Especificación                                                               | Estatus                              | Comentarios        |
+| ---------------------------------------------------------------------------- | ------------------------------------ | ------------------ |
+| {{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }} | {{ Spec2('Filters 1.0') }} | Definición inicial |
 
-
Compatibilidad de navegadores

+## Compatibilidad de navegadores
 
 {{Compat("css.properties.filter")}}
 
-
Véase también

+## Véase también
 
-
+- [Aplicando efectos de SVG a contenido HTML](/es/docs/Applying_SVG_effects_to_HTML_content "En/Applying SVG effects to HTML content")
+- La propiedad {{ Cssxref("mask") }}
+- [SVG](/es/docs/SVG "En/SVG")
+- [Entendiendo los filtros CSS](http://www.html5rocks.com/en/tutorials/filters/understanding-css/), artículo en inglés de HTML5Rocks!
diff --git a/files/es/web/css/fit-content/index.md b/files/es/web/css/fit-content/index.md
index 9b235680dce80f..d79570810025e0 100644
--- a/files/es/web/css/fit-content/index.md
+++ b/files/es/web/css/fit-content/index.md
@@ -11,47 +11,49 @@ tags:
   - Web
 translation_of: Web/CSS/fit-content
 ---
-
{{CSSRef}}{{SeeCompatTable}}

+{{CSSRef}}{{SeeCompatTable}}
 
-
La función CSS fit-content() ajusta un tamaño dado a un tamaño disponible de acuerdo a la fórmula: min(maximum size, max(minimum size, argument)).

+La función [CSS](/es/docs/Web/CSS) **`fit-content()`** ajusta un tamaño dado a un tamaño disponible de acuerdo a la fórmula: `min(maximum size, max(minimum size, argument))`.
 
-
/* <length> values */
+```css
+/*  values */
 fit-content(200px)
 fit-content(5cm)
 fit-content(30vw)
 fit-content(100ch)
 
-/* <percentage> value */
+/*  value */
 fit-content(40%)
-

+```
 
-
La función se puede usar como un tamaño de track en las propiedades de CSS Grid, donde el tamaño máximo es definido por max-content y el mínimo por auto, el cual es calculado por "auto" (ej. minmax(auto, max-content)), excepto que el tamaño del track se restringe al argumento si éste es mas grande que el "auto" mínimo .

+La función se puede usar como un tamaño de track en las propiedades de [CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout), donde el tamaño máximo es definido por [`max-content`](/en-US/docs/Web/CSS/grid-template-columns#max-content) y el mínimo por [`auto`](/en-US/docs/Web/CSS/grid-template-columns#auto), el cual es calculado por "`auto"` (ej. [`minmax(auto, max-content)`](/en-US/docs/Web/CSS/minmax)), excepto que el tamaño del track se restringe al argumento si éste es mas grande que el "auto" mínimo .
 
-
También puede usarse como tamaño de caja disponible para {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} y {{cssxref("max-height")}}, donde el tamañó máximo se refiere al tamaño máximo contenido y el mínimo al tamaño mínimo contenido.

+También puede usarse como tamaño de caja disponible para {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} y {{cssxref("max-height")}}, donde el tamañó máximo se refiere al tamaño máximo contenido y el mínimo al tamaño mínimo contenido.
 
-
Sintaxis

+## Sintaxis
 
-
Función que acepta un  <length> o un <percentage> como un argumento.

+Función que acepta un `` o un `` como un argumento.
 
-
Values

+### Values
 
-

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

- 
Una Longitud Absoluta.

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

- 
Un porcentaje relativo al espacio disponible en los ejes dados.


- In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.

-

+- {{cssxref("<length>")}}
+  - : Una Longitud Absoluta.
+- {{cssxref("<percentage>")}}
 
-
Formal syntax

+  - : Un porcentaje relativo al espacio disponible en los ejes dados.
+
+    In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.
+
+### Formal syntax
 
 {{csssyntax}}
 
-
Ejemplo

+## Ejemplo
 
-
CSS

+### CSS
 
-
#container {
+```css
+#container {
   display: grid;
   grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
   grid-gap: 5px;
@@ -62,58 +64,37 @@ fit-content(40%)
   padding: 10px;
 }
 
-#container > div {
+#container > div {
   background-color: #8ca0ff;
   padding: 5px;
 }
-

+```
 
-
HTML

+### HTML
 
-
<div id="container">
-  <div>Item as wide as the content.</div>
-  <div>
+```html
+

+  
Item as wide as the content.

+  

     Item con más texto en él. Porque el contenido que es
     mas grande que el ancho máximo, está restringido a los
     300 pixeles.
-  </div>
-  <div>Flexible item</div>
-</div>

-
-
Result

-
-
{{EmbedLiveSample("Ejemplo", "100%", 200)}}

-
-
Especificaciones

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
EspecificaciónEstadoComentario
{{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}{{Spec2("CSS3 Sizing")}}Define la función como el tamaño de caja disponible para {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} y {{cssxref("max-height")}}.
{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}{{Spec2("CSS Grid")}}Define la función cuando es usada como un tamaño de track.

+  
+  
Flexible item

+
+```
 
-
Browser compatibility

+### Result
 
-
 

+{{EmbedLiveSample("Ejemplo", "100%", 200)}}
 
+## Especificaciones
 
+| Especificación                                                                                                           | Estado                           | Comentario                                                                                                                                                                                                                                                    |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}} | {{Spec2("CSS3 Sizing")}} | Define la función como el tamaño de caja disponible para {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} y {{cssxref("max-height")}}. |
+| {{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}     | {{Spec2("CSS Grid")}}     | Define la función cuando es usada como un tamaño de track.                                                                                                                                                                                                    |
 
-
{{Compat("css.properties.grid-template-columns.fit-content")}}

+## Browser compatibility
 
-
 

+{{Compat("css.properties.grid-template-columns.fit-content")}}
diff --git a/files/es/web/css/flex-basis/index.md b/files/es/web/css/flex-basis/index.md
index b01a077c0f3b00..0d2ef45881b3e0 100644
--- a/files/es/web/css/flex-basis/index.md
+++ b/files/es/web/css/flex-basis/index.md
@@ -7,17 +7,18 @@ tags:
   - Propiedad de CSS
 translation_of: Web/CSS/flex-basis
 ---
-
{{CSSRef}}

+{{CSSRef}}
 
-
Resumen

+## Resumen
 
-
La propiedad de CSS flex-basis especifíca la base flexible, la cual es el tamaño inicial de un elemento flexible. Ésta propiedad determina el tamaño de una caja de contenidos a no ser que se haya especificado de otra forma usando {{Cssxref("box-sizing")}}.

+La propiedad de [CSS](/es/docs/Web/CSS) **`flex-basis`** especifíca la base flexible, la cual es el **tamaño inicial** de un elemento flexible. Ésta propiedad determina el tamaño de una caja de contenidos a no ser que se haya especificado de otra forma usando {{Cssxref("box-sizing")}}.
 
-
{{cssinfo}}

+{{cssinfo}}
 
-
Sintaxis

+## Sintaxis
 
-
/* Especificar <'width'> */
+```css
+/* Especificar <'width'> */
 flex-basis: 10em;
 flex-basis: 3px;
 flex-basis: auto;
@@ -35,53 +36,50 @@ flex-basis: content;
 flex-basis: inherit;
 flex-basis: initial;
 flex-basis: unset;
-

+```
 
-
Valores

+### Valores
 
-

- 
width

- 
Definido por un número seguido de una unidad absoluta tal como px, mm o pt, o un porcentaje del tamaño principal de un contenedor flexible padre. Los valores negativos no son válidos.

- 
content

- 
Indica el dimensionamiento automático, basado en el contenido del elemento flexible.


- 
Nota: Tenga en cuenta que éste valor no fue presentado en el lanzamiento inicial del Diseño de Caja Flexible, así que no será soportado por algunas implementaciones antiguas. El efecto equivalente puede tenerlo usando auto junto con un tamaño principal (width o height) en auto.

+- `width`
+  - : Definido por un número seguido de una unidad absoluta tal como `px`, `mm` o `pt`, o un porcentaje del tamaño principal de un contenedor flexible padre. Los valores negativos no son válidos.
+- `content`
 
- 

- 
Nota: Breve historia

+  - : Indica el dimensionamiento automático, basado en el contenido del elemento flexible.
 
- 
    
-  
  • Originalmente, "flex-basis:auto" significa "observa mi propiedad width o height".
    • 
-  
  • Después, flex-basis:auto fue cambiado a automatic-sizing, y fue introducido "main-size" como palabra clave "observa mi propiedad width o height". Ésto fue implementado en bug 1032922.
    • 
-  
  • Después, ese cambio fue revertido en bug 1093316, y nuevamente "auto" significa "observa mi propiedad width o height"; y se está introduciendo una nueva palabra clave 'content' para provocar un dimensionamiento automático. ({{bug("1105111")}} incluye la inclusión de dicha palabra clave).
    • 
- 

- 

- 

-

+    > **Nota:**Tenga en cuenta que éste valor no fue presentado en el lanzamiento inicial del Diseño de Caja Flexible, así que no será soportado por algunas implementaciones antiguas. El efecto equivalente puede tenerlo usando `auto` junto con un tamaño principal ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) o [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) en auto.
 
-
Sintaxis Formal

+    > **Nota:** Breve historia
+    >
+    > - Originalmente, "flex-basis:auto" significa "observa mi propiedad width o height".
+    > - Después, flex-basis:auto fue cambiado a automatic-sizing, y fue introducido "main-size" como palabra clave "observa mi propiedad width o height". Ésto fue implementado en [bug 1032922](https://bugzilla.mozilla.org/show_bug.cgi?id=1032922 'RESOLVED FIXED - Rename "flex-basis:auto" to "main-size", while preserving "flex:auto" shorthand value').
+    > - Después, ese cambio fue revertido en [bug 1093316](https://bugzilla.mozilla.org/show_bug.cgi?id=1093316 'RESOLVED FIXED - Back out flexbox "flex-basis:main-size" rename, since the CSSWG removed it from the spec'), y nuevamente "auto" significa "observa mi propiedad width o height"; y se está introduciendo una nueva palabra clave 'content' para provocar un dimensionamiento automático. ({{bug("1105111")}} incluye la inclusión de dicha palabra clave).
+
+### Sintaxis Formal
 
 {{csssyntax}}
 
-
Ejemplo

+## Ejemplo
 
-
HTML

+### HTML
 
-
<ul class="container">
-  <li class="flex flex1">1: flex-basis test</li>
-  <li class="flex flex2">2: flex-basis test</li>
-  <li class="flex flex3">3: flex-basis test</li>
-  <li class="flex flex4">4: flex-basis test</li>
-  <li class="flex flex5">5: flex-basis test</li>
-</ul>
+```html
+
    
+  
  • 1: flex-basis test
    • 
+  
  • 2: flex-basis test
    • 
+  
  • 3: flex-basis test
    • 
+  
  • 4: flex-basis test
    • 
+  
  • 5: flex-basis test
    • 
+

 
-<ul class="container">
-  <li class="flex flex6">6: flex-basis test</li>
-</ul>
-

+
    
+  
  • 6: flex-basis test
    • 
+

+```
 
-
CSS

+### CSS
 
-
.container {
+```css
+.container {
   font-family: arial, sans-serif;
   margin: 0;
   padding: 0;
@@ -167,38 +165,23 @@ flex-basis: unset;
 .flex6:after {
   content: 'fill/-webkit-fill-available/-moz-available';
 }
-

+```
 
-
Resultados

+### Resultados
 
-
{{EmbedLiveSample('Example', '860', '360', '', 'Web/CSS/flex-basis')}}

+{{EmbedLiveSample('Example', '860', '360', '', 'Web/CSS/flex-basis')}}
 
-
Especificaciones

+## Especificaciones
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
EspecificaciónEstadoComentario
{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}{{Spec2('CSS3 Flexbox')}}Definición Inicial

+| Especificación                                                                           | Estado                           | Comentario         |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------ |
+| {{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}} | {{Spec2('CSS3 Flexbox')}} | Definición Inicial |
 
-
Compatibilidad de navegadores

+## Compatibilidad de navegadores
 
 {{Compat("css.properties.flex-basis")}}
 
-
Ver también

+## Ver también
 
-
+- [Using CSS flexible boxes](/es/docs/CSS/Using_CSS_flexible_boxes)
+- {{cssxref("width")}}
diff --git a/files/es/web/css/flex-direction/index.md b/files/es/web/css/flex-direction/index.md
index 5f83e865c29c7b..0b117597625b37 100644
--- a/files/es/web/css/flex-direction/index.md
+++ b/files/es/web/css/flex-direction/index.md
@@ -9,150 +9,131 @@ tags:
   - flexbox
 translation_of: Web/CSS/flex-direction
 ---
-
{{CSSRef}}

+{{CSSRef}}
 
-
La propiedad CSS flex-direction especifica cómo colocar los objetos flexibles en el contenedor flexible definiendo el eje principal y la dirección (normal o al revés).

+La propiedad CSS **`flex-direction`** especifica cómo colocar los objetos flexibles en el contenedor flexible definiendo el eje principal y la dirección (normal o al revés).
 
-
{{EmbedInteractiveExample("pages/css/flex-direction.html")}}

+{{EmbedInteractiveExample("pages/css/flex-direction.html")}}
 
-
Tenga en cuenta que el valor de row y  row-reverse se verán afectados por la direccionalidad del contenedor flexible. Si su atributo dir es ltr, row representa el eje horizontal orientado de  izquierda a derecha, y row-reverse desde la derecha hacia la izquierda; si el atributo dir es rtl, row representa el eje orientado de derecha a izquierda, y  row-reverse de izquierda a derecha.

+Tenga en cuenta que el valor de `row `y `row-reverse` se verán afectados por la direccionalidad del contenedor flexible. Si su atributo `dir `es `ltr`, `row` representa el eje horizontal orientado de izquierda a derecha, y `row-reverse` desde la derecha hacia la izquierda; si el atributo `dir `es `rtl`, `row `representa el eje orientado de derecha a izquierda, y `row-reverse` de izquierda a derecha.
 
-
Sintaxis

+## Sintaxis
 
-
/* La dirección del texto se presenta en una línea */
-flex-direction: row;
+```css
+/* La dirección del texto se presenta en una línea */
+flex-direction: row;
 
-/* Como <row>, pero al revés */
-flex-direction: row-reverse;
+/* Como , pero al revés */
+flex-direction: row-reverse;
 
-/* La dirección en la que se apilas las líneas de texto */
-flex-direction: column;
+/* La dirección en la que se apilas las líneas de texto */
+flex-direction: column;
 
-/* Como <column>, pero al revés */
-flex-direction: column-reverse;
+/* Como , pero al revés */
+flex-direction: column-reverse;
 
-/* Valores globales */
-flex-direction: inherit;
-flex-direction: initial;
-flex-direction: unset;

+/* Valores globales */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+```
 
-
Valores

+### Valores
 
-
Se aceptan los siguientes valores:

+Se aceptan los siguientes valores:
 
-

- 
row

- 
El eje principal del contenedor flexible está definido para ser el mismo que la dirección del texto. Los puntos principales de inicio y final son los mismos que la dirección del contenido.

- 
row-reverse

- 

- 
Se comporta igual que row pero los puntos principales de inicio y final son intercambiados.

- 

- 
column

- 
El eje principal del contenedor flexible es el mismo que el eje del bloque. Los puntos principales de inicio y final son los mismos que los puntos de antes y después del modo escritura.

- 
column-reverse

- 
Se comporta igual que column pero los puntos principales de inicio y final son intercambiados.

-

+- `row`
+  - : El eje principal del contenedor flexible está definido para ser el mismo que la dirección del texto. Los **puntos principales de inicio y final** son los mismos que la dirección del contenido.
+- `row-reverse`
+  - : Se comporta igual que `row` pero los **puntos principales de inicio** y **final** son intercambiados.
+- `column`
+  - : El eje principal del contenedor flexible es el mismo que el eje del bloque. Los **puntos principales de inicio y final** son los mismos que los **puntos de antes y después** del modo escritura.
+- `column-reverse`
+  - : Se comporta igual que column pero los **puntos principales de inicio** y **final** son intercambiados.
 
-
Sintaxis formal

+### Sintaxis formal
 
 {{csssyntax}}
 
-
Ejemplo

-
-
HTML

-
-
<h4>Esto es un Column-Reverse</h4>
-<div id="content">
-    <div class="box" style="background-color:red;">A</div>
-    <div class="box" style="background-color:lightblue;">B</div>
-    <div class="box" style="background-color:yellow;">C</div>
-</div>
-<h4>Esto es un Row-Reverse</h4>
-<div id="content1">
-    <div class="box1" style="background-color:red;">A</div>
-    <div class="box1" style="background-color:lightblue;">B</div>
-    <div class="box1" style="background-color:yellow;">C</div>
-</div>

-
-
CSS

-
-
#content {
-  width: 200px;
-  height: 200px;
-  border: 1px solid #c3c3c3;
-  display: -webkit-flex;
-  -webkit-flex-direction: column-reverse;
-  display: flex;
-  flex-direction: column-reverse;
-}
-
-.box {
-  width: 50px;
-  height: 50px;
-}
-
-#content1 {
-  width: 200px;
-  height: 200px;
-  border: 1px solid #c3c3c3;
-  display: -webkit-flex;
-  -webkit-flex-direction: row-reverse;
-  display: flex;
-  flex-direction: row-reverse;
-}
-
-.box1 {
-  width: 50px;
-  height: 50px;
-}

-
-
Resultado

-
-
{{ EmbedLiveSample('Example', '', '300', '', 'Web/CSS/flex-direction') }}

-
-
Sobre Accesibilidad

-
-
Si utilizas flex-direction con un valor de row-reverse o column-reverse en elementos que necesitan foco (como botones) el orden de visualización será distinto al orden el DOM, por lo que los usuarios de lectores de pantalla no verán reflejado el mismo orden de los elementos que un usuario vidente. Para más información (en inglés):

-
-
-
-
Specificaciones

-
-
-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
EspecificaciónEstado
-    
Comentario

-   
{{ SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction') }}{{ Spec2('CSS3 Flexbox') }}Definición inicial

-
-
{{cssinfo}}

-
-
Compatibilidad de Navegadores

-
-
{{Compat("css.properties.flex-direction")}}

-
-
Ver también

-
-
+## Ejemplo
+
+### HTML
+
+```html
+
Esto es un Column-Reverse

+

+    
A

+    
B

+    
C

+

+
Esto es un Row-Reverse

+

+    
A

+    
B

+    
C

+

+```
+
+### CSS
+
+```css
+#content {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: -webkit-flex;
+  -webkit-flex-direction: column-reverse;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+}
+
+#content1 {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: -webkit-flex;
+  -webkit-flex-direction: row-reverse;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.box1 {
+  width: 50px;
+  height: 50px;
+}
+```
+
+### Resultado
+
+{{ EmbedLiveSample('Example', '', '300', '', 'Web/CSS/flex-direction') }}
+
+## Sobre Accesibilidad
+
+Si utilizas `flex-direction` con un valor de `row-reverse` o `column-reverse` en elementos que necesitan foco (como botones) el orden de visualización será distinto al orden el DOM, por lo que los usuarios de lectores de pantalla no verán reflejado el mismo orden de los elementos que un usuario vidente. Para más información (en inglés):
+
+- [Flexbox & the keyboard navigation disconnect — Tink](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)
+- [Source Order Matters | Adrian Roselli](http://adrianroselli.com/2015/09/source-order-matters.html)
+- [MDN Understanding WCAG, Guideline 1.3 explanations](/es/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways)
+- [Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html)
+
+## Specificaciones
+
+| Especificación                                                                           | Estado                               | Comentario         |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------ |
+| {{ SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction') }} | {{ Spec2('CSS3 Flexbox') }} | Definición inicial |
+
+{{cssinfo}}
+
+## Compatibilidad de Navegadores
+
+{{Compat("css.properties.flex-direction")}}
+
+## Ver también
+
+- Guía de CSS Flexbox: _[Conceptos básicos de Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- Guía de CSS Flexbox: _[Ordenar items flex](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)_
diff --git a/files/es/web/css/flex-flow/index.md b/files/es/web/css/flex-flow/index.md
index 8fa9c601cdbe2f..c3b76e6f39fe83 100644
--- a/files/es/web/css/flex-flow/index.md
+++ b/files/es/web/css/flex-flow/index.md
@@ -8,30 +8,31 @@ tags:
   - Referencia
 translation_of: Web/CSS/flex-flow
 ---
-
{{ CSSRef}}

+{{ CSSRef}}
 
-
Resumen

+## Resumen
 
-
La propiedad CSS flex-flow  es una propiedad atajo para las propiedades individuales flex-direction y flex-wrap.

+La propiedad [CSS](/es/docs/CSS "CSS") **`flex-flow`** es una propiedad atajo para las propiedades individuales `flex-direction` y `flex-wrap`.
 
-
{{cssinfo}}

+{{cssinfo}}
 
-
Para más propiedades e información ve Utilizando cajas flexibles CSS.

+Para más propiedades e información ve [Utilizando cajas flexibles CSS](/es/docs/CSS/Using_CSS_flexible_boxes).
 
-
Sintaxis

+## Sintaxis
 
-
/* flex-flow: <'flex-direction'> */
+```css
+/* flex-flow: <'flex-direction'> */
 flex-flow: row;
 flex-flow: row-reverse;
 flex-flow: column;
 flex-flow: column-reverse;
 
-/* flex-flow: <'flex-wrap'> */
+/* flex-flow: <'flex-wrap'> */
 flex-flow: nowrap;
 flex-flow: wrap;
 flex-flow: wrap-reverse;
 
-/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
+/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
 flex-flow: row nowrap;
 flex-flow: column wrap;
 flex-flow: column-reverse wrap-reverse;
@@ -40,49 +41,35 @@ flex-flow: column-reverse wrap-reverse;
 flex-flow: inherit;
 flex-flow: initial;
 flex-flow: unset;
-

+```
 
-
Valores

+### Valores
 
-
Ve flex-direction y flex-wrap para más detalles de los valores.

+Ve [`flex-direction`](/es/docs/CSS/flex-direction "en-US/docs/CSS/flex-direction") y [`flex-wrap`](/es/docs/CSS/flex-wrap "flex-wrap") para más detalles de los valores.
 
-
Sintaxis formal

+### Sintaxis formal
 
 {{csssyntax}}
 
-
Ejemplos

+## Ejemplos
 
-
element {
+```
+element {
   /* Main-axis es la dirección de bloque con main-start y main-end opuesto. Los artículos flex se distribuyen en múltiples líneas */
   flex-flow: column-reverse wrap;
 }
-

-
-
Especificaciones

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Flexbox','#flex-flow','flex-flow') }}{{ Spec2('CSS3 Flexbox') }}Definición inicial

-
-
Compatibilidad de navegador

+```
+
+## Especificaciones
+
+| Especificación                                                           | Estado                               | Comentario         |
+| ------------------------------------------------------------------------ | ------------------------------------ | ------------------ |
+| {{ SpecName('CSS3 Flexbox','#flex-flow','flex-flow') }} | {{ Spec2('CSS3 Flexbox') }} | Definición inicial |
+
+## Compatibilidad de navegador
 
 {{Compat("css.properties.flex-flow")}}
 
-
Ver también

+## Ver también
 
-
+- [Utilizando cajas flexibles CSS](/es/docs/CSS/Using_CSS_flexible_boxes)
diff --git a/files/es/web/css/flex-grow/index.md b/files/es/web/css/flex-grow/index.md
index d5572bd4569330..8cbe9d929ffab3 100644
--- a/files/es/web/css/flex-grow/index.md
+++ b/files/es/web/css/flex-grow/index.md
@@ -7,23 +7,24 @@ tags:
   - Propiedades CSS
 translation_of: Web/CSS/flex-grow
 ---
-
{{CSSRef}}

+{{CSSRef}}
 
-
Resumen

+## Resumen
 
-
La propiedad flex-grow de CSS especifica el factor de crecimiento de un elemento flexible (que tiene asignado display:flex), en su dirección principal. El factor de crecimiento especifica qué cantidad del espacio restante dentro del contenedor flexible, debería ocupar el item en cuestión.

+La propiedad **`flex-grow`** de [CSS](/es/docs/Web/CSS) especifica el factor de crecimiento de un elemento flexible (que tiene asignado display:flex), en su dirección principal. El factor de crecimiento especifica qué cantidad del espacio restante dentro del contenedor flexible, debería ocupar el item en cuestión.
 
-
La dirección principal puede ser la altura o el ancho del elemento, dependiendo del valor de {{cssxref("flex-direction")}}. 

+La dirección principal puede ser la altura o el ancho del elemento, dependiendo del valor de {{cssxref("flex-direction")}}.
 
-
El espacio restante es el tamaño del contenedor flexible menos el tamaño de todos los elementos flexibles juntos. Si todos los ítems dentro del contenedor tienen el mismo factor de crecimiento, todos los elementos reciben la misma cantidad del espacio restante. De lo contrario, el espacio restante se distribuye en función de los diferentes factores de crecimientos de cada item.

+El espacio restante es el tamaño del contenedor flexible menos el tamaño de todos los elementos flexibles juntos. Si todos los ítems dentro del contenedor tienen el mismo factor de crecimiento, todos los elementos reciben la misma cantidad del espacio restante. De lo contrario, el espacio restante se distribuye en función de los diferentes factores de crecimientos de cada item.
 
-
{{cssinfo}}

+{{cssinfo}}
 
-
Ver Usando las cajas flexibles en CSS para más propiedades e información.

+Ver [Usando las cajas flexibles en CSS](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS) para más propiedades e información.
 
-
Sintaxis

+## Sintaxis
 
-
/* <number> valores */
+```css
+/*  valores */
 flex-grow: 3;
 flex-grow: 0.6;
 
@@ -31,39 +32,38 @@ flex-grow: 0.6;
 flex-grow: inherit;
 flex-grow: initial;
 flex-grow: unset;
-

+```
 
-
Valores

+### Valores
 
-

- 
<number>

- 
Ver {{cssxref("<number>")}}. Los valores negativos no son válidos.

-

+- ``
+  - : Ver {{cssxref("<number>")}}. Los valores negativos no son válidos.
 
-
Sintaxis formal

+### Sintaxis formal
 
 {{csssyntax}}
 
-
Ejemplo

+## Ejemplo
 
-
HTML

+### HTML
 
-

-
<h4>This is a Flex-Grow</h4>
-<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
-<div id="content">
-  <div class="box" style="background-color:red;">A</div>
-  <div class="box" style="background-color:lightblue;">B</div>
-  <div class="box" style="background-color:yellow;">C</div>
-  <div class="box1" style="background-color:brown;">D</div>
-  <div class="box1" style="background-color:lightgreen;">E</div>
-  <div class="box" style="background-color:brown;">F</div>
-</div>
-

+```html
+
This is a Flex-Grow

+
A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .

+

+  
A

+  
B

+  
C

+  
D

+  
E

+  
F

+

+```
 
-
CSS

+### CSS
 
-
#content {
+```css
+#content {
   -ms-box-orient: horizontal;
   display: -webkit-box;
   display: -moz-box;
@@ -89,38 +89,22 @@ flex-grow: unset;
   flex-grow: 2;
   border: 3px solid rgba(0,0,0,.2);
 }
-

-

+```
 
-
Resultado

+### Resultado
 
-
{{EmbedLiveSample('Example', '700px', '300px', '', 'Web/CSS/flex-grow')}}

+{{EmbedLiveSample('Example', '700px', '300px', '', 'Web/CSS/flex-grow')}}
 
-
Especificaciones

+## Especificaciones
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
EspecificaciónEstadoComentario
{{SpecName('CSS3 Flexbox','#flex-grow','flex-grow')}}{{Spec2('CSS3 Flexbox')}}Definición inicial

+| Especificación                                                           | Estado                           | Comentario         |
+| ------------------------------------------------------------------------ | -------------------------------- | ------------------ |
+| {{SpecName('CSS3 Flexbox','#flex-grow','flex-grow')}} | {{Spec2('CSS3 Flexbox')}} | Definición inicial |
 
-
Compatibilidad de Navegadores

+## Compatibilidad de Navegadores
 
 {{Compat("css.properties.flex-grow")}}
 
-
Ver también

+## Ver también
 
-
+- [Usando las cajas flexibles en CSS](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS)
diff --git a/files/es/web/css/flex-shrink/index.md b/files/es/web/css/flex-shrink/index.md
index 42342faf11ab51..6df09114c55c42 100644
--- a/files/es/web/css/flex-shrink/index.md
+++ b/files/es/web/css/flex-shrink/index.md
@@ -3,33 +3,36 @@ title: flex-shrink
 slug: Web/CSS/flex-shrink
 translation_of: Web/CSS/flex-shrink
 ---
-
{{CSSRef}}

+{{CSSRef}}
 
-
La propiedad CSS flex-shrink especifica el factor de contracción de un flex item. Los flex items se encogerán para llenar el contenedor de acuerdo a su número flex-shrink , cuando el tamaño por defecto de los flex items sea mayor al de su contenedor flex container.

+La propiedad [CSS](/es/docs/CSS "CSS") **`flex-shrink`** especifica el factor de contracción de un flex item. Los flex items se encogerán para llenar el contenedor de acuerdo a su número `flex-shrink` , cuando el tamaño por defecto de los flex items sea mayor al de su contenedor flex container.
 
-
flex-shrink: 2;
+```css
+flex-shrink: 2;
 flex-shrink: 0.6;
 
 /* Valores globales */
 flex-shrink: inherit;
 flex-shrink: initial;
 flex-shrink: unset;
-

-
-
+.large { flex-shrink: 3; }
+```
 
-
{{EmbedLiveSample("flex-shrink", "100%", 280, "", "", "example-outcome-frame")}}

+{{EmbedLiveSample("flex-shrink", "100%", 280, "", "", "example-outcome-frame")}}
 
-
{{cssinfo}}

+{{cssinfo}}
 
-
 

+## Sintaxis
 
-
Sintaxis

+La propiedad `flex-shrink` se especifica como un único [``](#).
 
-
La propiedad flex-shrink se especifica como un único <número>.

+### Valores
 
-
Valores

+- `
+  - : Véase{{cssxref("<number>")}}. Los valores negativos no son válidos
 
-

- 
<número>

- 
Véase{{cssxref("<number>")}}. Los valores negativos no son válidos

-

-
-
Sintaxi formal

+### Sintaxi formal
 
 {{csssyntax}}
 
-
Ejemplo

+## Ejemplo
 
-
HTML

+### HTML
 
-

-
<p>El ancho del contenido es de 500px; el flex-basis de los flex items es 120px.</p>
-<p>A, B, C tiene flex-shrink:1. D y E tienen flex-shrink:2</p>
-<p>El ancho de D y E es menor al de los otros.</p>
-<div id="content">
-  <div class="box" style="background-color:red;">A</div>
-  <div class="box" style="background-color:lightblue;">B</div>
-  <div class="box" style="background-color:yellow;">C</div>
-  <div class="box1" style="background-color:brown;">D</div>
-  <div class="box1" style="background-color:lightgreen;">E</div>
-</div>
-

+```html
+
El ancho del contenido es de 500px; el flex-basis de los flex items es 120px.

+
A, B, C tiene flex-shrink:1. D y E tienen flex-shrink:2

+
El ancho de D y E es menor al de los otros.

+

+  
A

+  
B

+  
C

+  
D

+  
E

+

+```
 
-
CSS

+### CSS
 
-
#content {
+```css
+#content {
   display: flex;
   width: 500px;
 }
@@ -142,43 +142,23 @@ flex-shrink: unset;
 .box1 {
   flex-shrink: 2;
 }
-

-

-
-
Result

-
-
{{ EmbedLiveSample('Example', '500px', '300px', '', 'Web/CSS/flex-shrink') }}

-
-
Especificaciones

+```
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}{{ Spec2('CSS3 Flexbox') }}Definición inicial

+### Result
 
-
Compatibilidad con navegadores

+{{ EmbedLiveSample('Example', '500px', '300px', '', 'Web/CSS/flex-shrink') }}
 
+## Especificaciones
 
+| Especificación                                                                   | Estado                               | Comentarios        |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------ |
+| {{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }} | {{ Spec2('CSS3 Flexbox') }} | Definición inicial |
 
-
{{Compat("css.properties.flex-shrink")}}

+## Compatibilidad con navegadores
 
-
Vea también

+{{Compat("css.properties.flex-shrink")}}
 
-
+## Vea también
 
-

+- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_
diff --git a/files/es/web/css/flex-wrap/index.md b/files/es/web/css/flex-wrap/index.md
index e3176202f06f39..5b73f6446c2ae3 100644
--- a/files/es/web/css/flex-wrap/index.md
+++ b/files/es/web/css/flex-wrap/index.md
@@ -3,73 +3,59 @@ title: flex-wrap
 slug: Web/CSS/flex-wrap
 translation_of: Web/CSS/flex-wrap
 ---
-
{{ CSSRef("CSS Flexible Boxes") }}

+{{ CSSRef("CSS Flexible Boxes") }}
 
-
Resumen

+## Resumen
 
-
La propiedad flex-wrap de CSS  especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas. Si la cobertura (wrap) está permitida, esta propiedad también te permite controlar la dirección en la cual serán apilados los elementos.

+La propiedad **`flex-wrap`** de [CSS](/es/docs/CSS "CSS") especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas. Si la cobertura (wrap) está permitida, esta propiedad también te permite controlar la dirección en la cual serán apilados los elementos.
 
-
{{cssinfo}}

+{{cssinfo}}
 
-
Ver Usando cajas flexibles CSS para conocer más propiedades e información.

+Ver [Usando cajas flexibles CSS](/es/docs/Web/Guide/CSS/Cajas_flexibles "/en/CSS/Using_CSS_flexible_boxes") para conocer más propiedades e información.
 
-
Sintaxis

+## Sintaxis
 
-
Sintaxis formal: {{csssyntax("flex-wrap")}}
-

+```
+Sintaxis formal: {{csssyntax("flex-wrap")}}
+```
 
-
flex-wrap: nowrap
+```
+flex-wrap: nowrap
 flex-wrap: wrap
 flex-wrap: wrap-reverse
 
 flex-wrap: inherit
-

+```
 
-
Valores

+### Valores
 
-
Se aceptan los siguientes valores:

+Se aceptan los siguientes valores:
 
-

- 
nowrap

- 
Los elementos flex son distribuidos en una sola línea, lo cual puede llevar a que se desborde el contenedor flex. El valor cross-start es equivalente a start o before según el valor de {{cssxref("flex-direction")}}.

- 
wrap

- 
Los elementos flex son colocados en varias líneas. El valor cross-start equivale a start o before dependiendo del valor flex-direction y cross-end implicaría lo opuesto a lo especificado por cross-start.

- 
wrap-reverse

- 
Actúa como wrap pero cross-start y cross-end están intercambiados.

-

+- `nowrap`
+  - : Los elementos flex son distribuidos en una sola línea, lo cual puede llevar a que se desborde el contenedor flex. El valor **cross-start** es equivalente a **start** o **before** según el valor de {{cssxref("flex-direction")}}.
+- `wrap`
+  - : Los elementos flex son colocados en varias líneas. El valor **cross-start** equivale a **start** o **before** dependiendo del valor `flex-direction` y **cross-end** implicaría lo opuesto a lo especificado por **cross-start**.
+- `wrap-reverse`
+  - : Actúa como `wrap` pero **cross-start** y **cross-end** están intercambiados.
 
-
Ejemplos

+## Ejemplos
 
-
element {
+```
+element {
   flex-wrap: nowrap;
 }
-

-
-
Especificaciones

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
EspecificacionEstadoComentario
{{ SpecName('CSS3 Flexbox', '#flex-wrap', 'flex-wrap') }}{{ Spec2('CSS3 Flexbox') }} 

-
-
Compatibilidad

+```
+
+## Especificaciones
+
+| Especificacion                                                               | Estado                               | Comentario |
+| ---------------------------------------------------------------------------- | ------------------------------------ | ---------- |
+| {{ SpecName('CSS3 Flexbox', '#flex-wrap', 'flex-wrap') }} | {{ Spec2('CSS3 Flexbox') }} |            |
+
+## Compatibilidad
 
 {{Compat("css.properties.flex-wrap")}}
 
-
Ver también

+## Ver también
 
-
+- [Usando cajas flexibles CSS](/es/docs/Web/Guide/CSS/Cajas_flexibles "/en-US/docs/CSS/Using_CSS_flexible_boxes")
diff --git a/files/es/web/css/flex/index.md b/files/es/web/css/flex/index.md
index 34121812a14157..e275f86b603f33 100644
--- a/files/es/web/css/flex/index.md
+++ b/files/es/web/css/flex/index.md
@@ -3,23 +3,20 @@ title: flex
 slug: Web/CSS/flex
 translation_of: Web/CSS/flex
 ---
-
{{CSSRef}}

+{{CSSRef}}
 
-
Resumen

+## Resumen
 
-
 

+La propiedad CSS flex es una propiedad resumida que indica la capacidad de un elemento flexible para alterar sus dimensiones y llenar el espacio disponible. Los elementos flexibles pueden ser estirados para utilizar el espacio disponible proporcional a su factor de crecimiento flexible o su factor de contracción flexible para evitar desbordamiento.
 
-
La propiedad CSS flex es una propiedad resumida que indica la capacidad de un elemento flexible para alterar sus dimensiones y llenar el espacio disponible. Los elementos flexibles pueden ser estirados para utilizar el espacio disponible proporcional a su factor de crecimiento flexible o su factor de contracción flexible para evitar desbordamiento.

+{{cssinfo}}
 
-
{{cssinfo}}

+Consulte [Cómo usar las cajas flexibles de CSS](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS/) para conocer más propiedades e información.
 
-
 

+## Sintáxis
 
-
Consulte Cómo usar las cajas flexibles de CSS para conocer más propiedades e información.

-
-
Sintáxis

-
-
/* 0 0 auto */
+```css
+/* 0 0 auto */
 flex: none;
 
 /* Un valor, número sin unidades: flex-grow */
@@ -44,104 +41,88 @@ flex: 2 2 10%;
 flex: inherit;
 flex: initial;
 flex: unset;
-

-
-
Valores

-
-

- 
<'flex-grow'>

- 

- 
Define el flex-grow del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.

- 

- 
<'flex-shrink'>

- 
Define el flex-shrink del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.

- 
<'flex-basis'>

- 
Define el flex-basis del elemento flexible. Se acepta cualquier valor válido para las propiedades  width y height . Un tamaño preferente de 0 debe tener una unidad para evitar ser interpretado como flexible. El valor predeterminado es 0% cuando se omite.

- 
none

- 
Esta palabra clave se computa a 0 0 auto.

-

-
- 
Sintaxis normal

+```
+
+### Valores
+
+- `<'flex-grow'>`
+  - : Define el [flex-grow](/es/docs/Web/CSS/flex-grow) del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.
+- `<'flex-shrink'>`
+  - : Define el [`flex-shrink`](/en-US/docs/Web/CSS/flex-shrink) del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.
+- `<'flex-basis'>`
+  - : Define el [`flex-basis`](/es/docs/CSS/flex-basis "CSS/flex-basis") del elemento flexible. Se acepta cualquier valor válido para las propiedades `width` y `height` . Un tamaño preferente de 0 debe tener una unidad para evitar ser interpretado como flexible. El valor predeterminado es 0% cuando se omite.
+- `none`
+  - : Esta palabra clave se computa a `0 0 auto`.
+
+### Sintaxis normal
+
 {{csssyntax}}
 
-
Ejemplo

+## Ejemplo
 
-
#flex-container {
+```css
+#flex-container {
 	display: -webkit-flex;
 	display: flex;
 	-webkit-flex-direction: row;
 	flex-direction: row;
 }
 
-#flex-container > .flex-item {
+#flex-container > .flex-item {
 	-webkit-flex: auto;
 	flex: auto;
 }
 
-#flex-container > .raw-item {
+#flex-container > .raw-item {
 	width: 5rem;
 }
-

+```
 
-
<div id="flex-container">
-    <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
-    <div class="raw-item" id="raw">Raw box</div>
-</div>
-

+```html
+

+    
Flex box (click to toggle raw box)

+    
Raw box

+

+```
 
-
+```
 
-
Resultado

+### Resultado
 
-
{{EmbedLiveSample('Example','100%','60')}}

+{{EmbedLiveSample('Example','100%','60')}}
 
-
Especificaciones

+## Especificaciones
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}{{Spec2('CSS3 Flexbox')}}Initial definition

+| Specification                                                            | Status                           | Comment            |
+| ------------------------------------------------------------------------ | -------------------------------- | ------------------ |
+| {{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}} | {{Spec2('CSS3 Flexbox')}} | Initial definition |
 
-
Compatibilidad de Navegadores

+## Compatibilidad de Navegadores
 
 {{Compat("css.properties.flex")}}
 
-
Ver también

+## Ver también
 
-
+- [Usar las cajas felxibles de CSS](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS/)
diff --git a/files/es/web/css/float/index.md b/files/es/web/css/float/index.md
index 20fff2c2acaa01..f19525ff89563e 100644
--- a/files/es/web/css/float/index.md
+++ b/files/es/web/css/float/index.md
@@ -6,96 +6,45 @@ tags:
   - CSS Float
   - CSS Posicionamiento
   - CSS Propiedad
-  - 'CSS:Referencias'
+  - CSS:Referencias
   - Todas_las_Categorías
 translation_of: Web/CSS/float
 ---
-
{{CSSRef}}

-
-
La propiedad CSS float ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo a los elementos de texto y en línea aparecer a su costado. El elemento es removido del normal flujo de la página, aunque aún sigue siendo parte del flujo (a diferencia del  posicionamiento absoluto).

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

-
-

-
La fuente de este ejemplo interactivo está almacenada en un repositorio de GitHub. Si deseas contribuír a los ejemplos interactivos del proyecto, por favor clonar https://github.com/mdn/interactive-examples y enviarnos una solicitud de extracción -pull request-.

-

-
-
Un elemento flotante es un elemento en el que el {{ Cssxref("computed value", "valor calculado") }} de float no es igual a none.

-
-
Como float implica el uso del layout de bloques, este modifica el valor calculado de los valores {{cssxref("display")}} , en algunos casos:

-
-
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
Valor especificadoValor Computado
inlineblock
inline-blockblock
inline-tabletable
table-rowblock
table-row-groupblock
table-columnblock
table-column-groupblock
table-cellblock
table-captionblock
table-header-groupblock
table-footer-groupblock
inline-flexflex
inline-gridgrid
otrossin cambios

-
-
Nota: Al referirse a una propiedad desde JavaScript como un miembro del objeto element.style, hay que tener en cuenta que los navegadores modernos soportan float pero en navegadores más antiguos hay que escribir la propiedad como cssFloat, otros navegadores como Internet Explorer 8 y anteriores utilizan styleFloat. Fue una excepción a la regla, que el nombre del miembro DOM sea el nombre camel-case (styleFloat) del nombre CSS (style-float) separado por guión (debido al hecho que "float" es una palabra reservada en JavaScript, es necesario escapar "class" como "className" y escapar "for" de la etiqueta como "htmlFor" ).

-
-
Sintáxis

-
-
/* Valores clave || Keyword values */
+{{CSSRef}}
+
+La propiedad CSS `float` ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo a los elementos de texto y en línea aparecer a su costado. El elemento es removido del normal flujo de la página, aunque aún sigue siendo parte del flujo (a diferencia del [posicionamiento absoluto](/es/docs/Web/CSS/position#Absolute_positioning)).
+
+{{EmbedInteractiveExample("pages/css/float.html")}}
+
+La fuente de este ejemplo interactivo está almacenada en un repositorio de GitHub. Si deseas contribuír a los ejemplos interactivos del proyecto, por favor clonar  y enviarnos una solicitud de extracción -pull request-.
+
+Un elemento **flotante** es un elemento en el que el {{ Cssxref("computed value", "valor calculado") }} de `float` _no_ es igual a `none`.
+
+Como `float` implica el uso del layout de bloques, este modifica el valor calculado de los valores {{cssxref("display")}} , en algunos casos:
+
+| **Valor especificado** | **Valor Computado** |
+| ---------------------- | ------------------- |
+| inline                 | block               |
+| inline-block           | block               |
+| inline-table           | table               |
+| table-row              | block               |
+| table-row-group        | block               |
+| table-column           | block               |
+| table-column-group     | block               |
+| table-cell             | block               |
+| table-caption          | block               |
+| table-header-group     | block               |
+| table-footer-group     | block               |
+| inline-flex            | flex                |
+| inline-grid            | grid                |
+| otros                  | sin cambios         |
+
+Nota: Al referirse a una propiedad desde JavaScript como un miembro del objeto [element.style](/es/DOM/element#element.style "es/DOM/element#element.style"), hay que tener en cuenta que los navegadores modernos soportan `float` pero en navegadores más antiguos hay que escribir la propiedad como `cssFloat`, otros navegadores como Internet Explorer 8 y anteriores utilizan `styleFloat`. Fue una excepción a la regla, que el nombre del miembro DOM sea el nombre _camel-case_ (styleFloat) del nombre CSS (style-float) separado por guión (debido al hecho que "float" es una palabra reservada en JavaScript, es necesario escapar "class" como "className" y escapar "for" de la etiqueta como "htmlFor" ).
+
+## Sintáxis
+
+```
+/* Valores clave || Keyword values */
 float: left;
 float: right;
 float: none;
@@ -105,67 +54,69 @@ float: inline-end;
 /* Valores globales || Global values */
 float: inherit;
 float: initial;
-float: unset;

+float: unset;
+```
 
-
Valores

+### Valores
 
-
left 

+**`left`**
 
-
El elemento debe flotar a la izquierda de su bloque contenedor.

+El elemento debe flotar a la izquierda de su bloque contenedor.
 
-
right 

+**`right`**
 
-
El elemento debe flotar a la derecha de su bloque contenedor.

+El elemento debe flotar a la derecha de su bloque contenedor.
 
-
none 

+**`none`**
 
-
El elemento no deberá flotar.

+El elemento no deberá flotar.
 
-
inline-start

+**`inline-start`**
 
-
El elemento debe flotar en el costado de inicio de su bloque contenedor. Esto es el lado izquierdo con scripts ltr y el lado derecho con scripts rtl.

+El elemento debe flotar en el costado de inicio de su bloque contenedor. Esto es el lado izquierdo con scripts `ltr` y el lado derecho con scripts `rtl`.
 
-

- 
inline-end

- 
El elemento debe flotar en el costado de término de su bloque contenedor . Esto es el lado derecho con scripts ltr y el lado izquierdo con scripts rtl.

-

+- `inline-end`
+  - : El elemento debe flotar en el costado de término de su bloque contenedor . Esto es el lado derecho con scripts `ltr` y el lado izquierdo con scripts `rtl`.
 
-
Definición Formal

+## Definición Formal
 
-
{{cssinfo}}

+{{cssinfo}}
 
-
Sintáxis Formal

+## Sintáxis Formal
 
 {{csssyntax}}
 
-
Ejemplos

+## Ejemplos
 
-
Como son ubicados los elements flotantes 

+### Como son ubicados los elements flotantes
 
-
Ver El Ejemplo Vivo

+[Ver El Ejemplo Vivo](/samples/cssref/float.html)
 
-
Como se ha mencionado más arriba, cuando un elemento flota, es removido del flujo normal del documento (aunque sigue perteneciendo a él). Se cambia hacia la izquierda, o hacia la derecha, hasta que toca el límite de su caja contenedora, u otro elemento flotante.

+Como se ha mencionado más arriba, cuando un elemento flota, es removido del flujo normal del documento (aunque sigue perteneciendo a él). Se cambia hacia la izquierda, o hacia la derecha, hasta que toca el límite de su caja contenedora, u _otro elemento flotante._
 
-
En este ejemplo, hay tres cuadrados de color. Dos flotan hacia la izquierda, y uno hacia la derecha. Nota cómo el segundo cuadrado de la izquierda se coloca a la derecha del primero. Si agregamos cuadrados adicionales se continuarían apilando hacia la derecha, hasta que hayan llenado la caja contenedora, y luego rellenarían la siguiente línea.

+En este ejemplo, hay tres cuadrados de color. Dos flotan hacia la izquierda, y uno hacia la derecha. Nota cómo el segundo cuadrado de la izquierda se coloca a la derecha del primero. Si agregamos cuadrados adicionales se continuarían apilando hacia la derecha, hasta que hayan llenado la caja contenedora, y luego rellenarían la siguiente línea.
 
-
Un elemento flotante es al menos tan alto como su elemento hijo flotante más alto. En el ejemplo se le da al elemento padre width: 100% y la propiedad de flotante para asegurar que es lo suficientemente alto para encajar con sus hijos flotantes, y asegurar que ocupa el ancho -width- del padre de modo de no tener que limpiar su pariente adyacente.

+Un elemento flotante es al menos tan alto como su elemento hijo flotante más alto. En el ejemplo se le da al elemento padre `width: 100% `y la propiedad de flotante para asegurar que es lo suficientemente alto para encajar con sus hijos flotantes, y asegurar que ocupa el ancho -width- del padre de modo de no tener que limpiar su pariente adyacente.
 
-
HTML

+**HTML**
 
-
<section>
-  <div class="left">1</div>
-  <div class="left">2</div>
-  <div class="right">3</div>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+```
+

+  
1

+  
2

+  
3

+  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Morbi tristique sapien ac erat tincidunt, sit amet dignissim
      lectus vulputate. Donec id iaculis velit. Aliquam vel
      malesuada erat. Praesent non magna ac massa aliquet tincidunt
-     vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
-</section>

+     vel in massa. Phasellus feugiat est vel leo finibus congue.

+
+```
 
-
CSS

+**CSS**
 
-
section {
+```
+section {
   border: 1px solid blue;
   width: 100%;
   float: left;
@@ -185,52 +136,34 @@ div {
 .right {
   float: right;
   background: cyan;
-}

+}
+```
 
-
RESULTADO:

+**RESULTADO:**
 
-
{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}

+{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}
 
-
Limpiando (clearing) flotantes:

+### Limpiando (clearing) flotantes:
 
-
A veces querrás forzar un item a moverse por debajo de elementos flotantes. Por ejemplo, párrafos que han de permanecer adyacentes a elementos flotantes, pero forzar a los encabezados a estar en su propia línea. Para ello revisa el siguiente ejemplo: {{cssxref("clear")}}

+A veces querrás forzar un item a moverse por debajo de elementos flotantes. Por ejemplo, párrafos que han de permanecer adyacentes a elementos flotantes, pero forzar a los encabezados a estar en su propia línea. Para ello revisa el siguiente ejemplo: {{cssxref("clear")}}
 
-
Especificaciones

+### Especificaciones
 
-
+- [CSS 1](http://www.w3.org/TR/CSS1#float)
+- [CSS 2.1](http://www.w3.org/TR/CSS21/visuren.html#propdef-float)
 
-
Compatibilidad de navegadores

+### Compatibilidad de navegadores
 
-
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
NavegadorVersión mínima
Internet Explorer4
Netscape4
Opera3.5

+| Navegador         | Versión mínima |
+| ----------------- | -------------- |
+| Internet Explorer | 4              |
+| Netscape          | 4              |
+| Opera             | 3.5            |
 
-
Ver también

+### Ver también
 
-
{{ Cssxref("clear") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}

+{{ Cssxref("clear") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}
 
-

-
Categorías

+Categorías
 
-
Interwiki Language

-

+Interwiki Language
diff --git a/files/es/web/css/font-family/index.md b/files/es/web/css/font-family/index.md
index 55d578ddcb4c36..bb1807227ce7e0 100644
--- a/files/es/web/css/font-family/index.md
+++ b/files/es/web/css/font-family/index.md
@@ -3,59 +3,57 @@ title: font-family
 slug: Web/CSS/font-family
 tags:
   - CSS
-  - 'CSS:Referencias'
+  - CSS:Referencias
   - Todas_las_Categorías
 translation_of: Web/CSS/font-family
 ---
-
{{CSSRef}}

+{{CSSRef}}
 
-
Resumen

+## Resumen
 
-
La propiedad font-family define una lista de fuentes o familias de fuentes, con un orden de prioridad, para utilizar en un elemento seleccionado. A diferencia de la mayoría de las propiedades CSS, los valores se separan con comas (",") para indicar que son valores alternativos.

+La propiedad `font-family` define una lista de fuentes o familias de fuentes, con un orden de prioridad, para utilizar en un elemento seleccionado. A diferencia de la mayoría de las propiedades CSS, los valores se separan con comas (",") para indicar que son valores alternativos.
 
-
{{cssinfo}}

+{{cssinfo}}
 
-
Sintaxis

+## Sintaxis
 
-
font-family: <familia o nombre genérico> [, <familia o nombre genérico>]* | inherit
-

+```
+font-family:  [, ]* | inherit
+```
 
-
Valores

+### Valores
 
-

- 
<nombre de familia o genérico>

- 
puede ser un <nombre de familia> o un <nombre genérico>

- 
nombre de familia 

- 
El nombre de la familia de la fuente. Por ejemplo, 'Times' y 'Helvética' son nombres de familia. Los nombres de familia que contengan espacios, deben escribirse entre comillas (por ejemplo: "Times New Roman").

- 
nombre genérico 

- 
Se han definido los siguientes nombres genéricos: serif, sans-serif, cursive, fantasy, monospace. Los nombres genéricos son palabras claves y no deben ponerse entre comillas.

-

+- \
+  - : puede ser un `` o un ``
+- nombre de familia
+  - : El nombre de la familia de la fuente. Por ejemplo, 'Times' y 'Helvética' son nombres de familia. Los nombres de familia que contengan espacios, deben escribirse entre comillas (por ejemplo: "Times New Roman").
+- nombre genérico
+  - : Se han definido los siguientes nombres genéricos: `serif, sans-serif, cursive, fantasy, monospace`. Los nombres genéricos son palabras claves y no deben ponerse entre comillas.
 
-
Ejemplos

+## Ejemplos
 
-
Ver El Ejemplo Vivo

+[Ver El Ejemplo Vivo](/samples/cssref/font-family.html)
 
-
body { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }
+```
+body { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }
 
 .receipt { font-family: Courier, "Lucida Console", monospace }
-

+```
 
-
Notas

+## Notas
 
-
Un nombre genérico debería ser siempre el último de la lista en una propiedad font-family.

+Un nombre genérico debería ser siempre el último de la lista en una propiedad `font-family`.
 
-
La propiedad font-family especifica una lista de fuentes, desde la prioridad más alta a la más baja. La selección de fuentes no se detiene en la primera de la lista que está en el equipo del usuario. Por el contrario la selección de fuentes se realizacarácter a carácter, por lo que, si una fuente seleccionada no tiene el carácter que se quiere mostrar, se recurre a la siguiente.

+La propiedad `font-family` especifica una lista de fuentes, desde la prioridad más alta a la más baja. La selección de fuentes **no se detiene** en la primera de la lista que está en el equipo del usuario. Por el contrario la selección de fuentes se realiza*carácter a carácter*, por lo que, si una fuente seleccionada no tiene el carácter que se quiere mostrar, se recurre a la siguiente.
 
-
Cuando una fuente no está disponible en algún {{ Cssxref("font-style", "estilo de fuente") }}, {{ Cssxref("font-variant", "variantes de fuente") }}, o {{ Cssxref("font-size", "tamaño de fuente") }}, estas propiedades pueden influir en la elección de la fuente.

+Cuando una fuente no está disponible en algún {{ Cssxref("font-style", "estilo de fuente") }}, {{ Cssxref("font-variant", "variantes de fuente") }}, o {{ Cssxref("font-size", "tamaño de fuente") }}, estas propiedades pueden influir en la elección de la fuente.
 
-
Especificaciones

+## Especificaciones
 
-
+- [CSS 1](http://www.w3.org/TR/CSS1#font-family)
+- [CSS 2.1](http://www.w3.org/TR/CSS21/fonts.html#font-family-prop)
+- [CSS 3](http://www.w3.org/TR/2002/WD-css3-fonts-20020802/#font-family-prop)
 
-
Compatibilidades

+## Compatibilidades
 
-
TBD (La mejor manera centralizada en un único cuadro de compatibilidad.)

+TBD (La mejor manera centralizada en un único cuadro de compatibilidad.)
diff --git a/files/es/web/css/font-language-override/index.md b/files/es/web/css/font-language-override/index.md
index 941c6e946acc31..8f4b76a24fe64f 100644
--- a/files/es/web/css/font-language-override/index.md
+++ b/files/es/web/css/font-language-override/index.md
@@ -5,4 +5,4 @@ translation_of: Web/CSS/font-language-override
 translation_of_original: Web/CSS/-moz-font-language-override
 original_slug: Web/CSS/-moz-font-language-override
 ---
-
*  , html,  body, div, p  { font-Zawgyi-One  !  important; }

+\* , html, body, div, p { font-Zawgyi-One ! important; }
diff --git a/files/es/web/css/font-size-adjust/index.md b/files/es/web/css/font-size-adjust/index.md
index 5c95ec1405d0d8..1bda0fbebea497 100644
--- a/files/es/web/css/font-size-adjust/index.md
+++ b/files/es/web/css/font-size-adjust/index.md
@@ -3,58 +3,53 @@ title: font-size-adjust
 slug: Web/CSS/font-size-adjust
 tags:
   - CSS
-  - 'CSS:Referencias'
+  - CSS:Referencias
   - Referencia_CSS
   - Todas_las_Categorías
 translation_of: Web/CSS/font-size-adjust
 ---
-
{{ CSSRef() }}

+{{ CSSRef() }}
 
-
Resumen

+## Resumen
 
-
La propiedad {{ Cssxref("font-size-adjust") }} especifica que el tamaño de la fuente debería escogerse basándose en el tamaño de las minúsculas en lugar las mayúsculas.

+La propiedad {{ Cssxref("font-size-adjust") }} especifica que el tamaño de la fuente debería escogerse basándose en el tamaño de las minúsculas en lugar las mayúsculas.
 
-
Esto resulta útil ya que la legibilidad de las fuentes, especialmente en el tamaño pequeño, está determinada por el tamaño de las letras minúsculas más que por las mayúsculas. Esto puede causar problemas cuando la primera opción en {{ Cssxref("font-family") }} no está disponible y su reemplazo tiene significativamente un aspecto distinto (el ratio entre las letras minúsculas y mayúsculas de la fuente).

+Esto resulta útil ya que la legibilidad de las fuentes, especialmente en el tamaño pequeño, está determinada por el tamaño de las letras minúsculas más que por las mayúsculas. Esto puede causar problemas cuando la primera opción en {{ Cssxref("font-family") }} no está disponible y su reemplazo tiene significativamente un aspecto distinto (el ratio entre las letras minúsculas y mayúsculas de la fuente).
 
-
Para hacer esto de forma que sea compatible con los navegadores que no soportan {{ Cssxref("font-size-adjust") }}, se ha especificado de forma que sea el número por el que está multiplicada la propiedad {{ Cssxref("font-size") }}. Esto quiere decir que el valor especificado para la propiedad debería ser el valor deratio o relación de aspecto entre las minúsculas y las mayúsculas de la fuente escogida como primera opción. Por ejemplo, si especificamos una fuente font-size: 16px; font-size-adjust: 0.5, realmente estamos especificando que las letras minúsculas de la fuente deben tener 8px de alto (16px multiplicado por 0.5).

+Para hacer esto de forma que sea compatible con los navegadores que no soportan {{ Cssxref("font-size-adjust") }}, se ha especificado de forma que sea el número por el que está multiplicada la propiedad {{ Cssxref("font-size") }}. Esto quiere decir que el valor especificado para la propiedad debería ser el valor de*ratio* o relación de aspecto entre las minúsculas y las mayúsculas de la fuente escogida como primera opción. Por ejemplo, si especificamos una fuente `font-size: 16px; font-size-adjust: 0.5`, realmente estamos especificando que las letras minúsculas de la fuente deben tener `8px` de alto (16px multiplicado por 0.5).
 
-
{{cssinfo}}

+{{cssinfo}}
 
-
Sintaxis

+## Sintaxis
 
-
font-size-adjust: <número> | none | {{ Cssxref("inherit") }}

+`font-size-adjust:` \ | `none` | {{ Cssxref("inherit") }}
 
-
Valores

+### Valores
 
-

- 
none 

- 
Escoge el tamaño de la fuente basándose sólo en función de la propiedad {{ Cssxref("font-size") }}.

- 
<número> 

- 

- 
Escoge el tamaño de la fuente de manera tal que su letra minúscula (determinada por la altura-x de la fuente) sea elnúmero de veces el tamaño de {{ Cssxref("font-size") }}.

+- `none`
+  - : Escoge el tamaño de la fuente basándose sólo en función de la propiedad {{ Cssxref("font-size") }}.
+- \
 
- 
El número especificado es generalmente la relación de aspecto de la fuente de primera elección en la propiedad {{ Cssxref("font-family") }}. Esto significa que la primera fuente, si está disponible, aparecerá con el mismo tamaño en los navegadores, soporten estos o no la propiedad {{ Cssxref("font-size-adjust") }}.

- 

-

+  - : Escoge el tamaño de la fuente de manera tal que su letra minúscula (determinada por la altura-x de la fuente) sea el*número* de veces el tamaño de {{ Cssxref("font-size") }}.
 
-
Ejemplos

+    El número especificado es generalmente la relación de aspecto de la fuente de primera elección en la propiedad {{ Cssxref("font-family") }}. Esto significa que la primera fuente, si está disponible, aparecerá con el mismo tamaño en los navegadores, soporten estos o no la propiedad {{ Cssxref("font-size-adjust") }}.
 
-
Ver El Ejemplo Vivo

+## Ejemplos
 
-
p{
+[Ver El Ejemplo Vivo](/samples/cssref/font-size-adjust.html)
+
+```
+p{
   font: 12px Verdana, sans-serif;
   font-size-adjust: 0.58;
 }
+```
 
-

-
-
Especificaciones

+## Especificaciones
 
-
+- [CSS 2](http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font-size-adjust)
+- [css3-fonts](http://www.w3.org/TR/css3-fonts/#font-size-adjust)
 
-
Compatibilidades

+## Compatibilidades
 
-
Soportado en todas las plataformas a partir de Gecko 1.9 / Firefox 3, pero soportado sólo en Windows bastante antes.

+Soportado en todas las plataformas a partir de Gecko 1.9 / Firefox 3, pero soportado sólo en Windows bastante antes.
diff --git a/files/es/web/css/font-size/index.md b/files/es/web/css/font-size/index.md
index f14130e113dcb0..83d1db243da5c7 100644
--- a/files/es/web/css/font-size/index.md
+++ b/files/es/web/css/font-size/index.md
@@ -3,49 +3,48 @@ title: font-size
 slug: Web/CSS/font-size
 tags:
   - CSS
-  - 'CSS:Referencias'
+  - CSS:Referencias
   - Todas_las_Categorías
 translation_of: Web/CSS/font-size
 ---
-
{{CSSRef}}

+{{CSSRef}}
 
-
Resumen

+## Resumen
 
-
La propiedad font-size especifica la dimensión de la letra. Este tamaño puede, a su vez, alterar el aspecto de alguna otra cosa, ya que se usa para calcular la longitud de las unidades em y ex.

+La propiedad `font-size` especifica la dimensión de la letra. Este tamaño puede, a su vez, alterar el aspecto de alguna otra cosa, ya que se usa para calcular la longitud de las unidades `em` y `ex`.
 
-
{{cssinfo}}

+{{cssinfo}}
 
-
Sintaxis

+## Sintaxis
 
-
font-size: xx-small | x-small | small | medium | large | x-large | xx-large

+`font-size:` `xx-small` | `x-small` | `small` | `medium` | `large` | `x-large` | `xx-large`
 
-
font-size: smaller | larger

+`font-size:` `smaller` | `larger`
 
-
font-size: <longitud> | <porcentaje> | {{ Cssxref("inherit") }}

+`font-size:` \ | \ | {{ Cssxref("inherit") }}
 
-
Valores

+### Valores
 
-

- 
xx-small, x-small, small, medium, large, x-large, xx-large 

- 
un grupo de palabras clave de dimensión absoluta en relación al que determina el usuario como tamaño por defecto (que es medium). De forma parecida a las sentencias HTML <font size="1"> hasta <font size="7"> donde el tamaño por defecto es <font size="3">.

- 
larger, smaller 

- 
más grande o más pequeño que el tamaño de letra del elemento padre, con aproximadamente el mismo ratio que el mencionado anteriormente.

- 
<longitud> 

- 
una unidad positiva de longitud.

-

+- xx-small, x-small, small, medium, large, x-large, xx-large
+  - : un grupo de palabras clave de dimensión absoluta en relación al que determina el usuario como tamaño por defecto (que es `medium`). De forma parecida a las sentencias HTML `` hasta `` donde el tamaño por defecto es ``.
+- larger, smaller
+  - : más grande o más pequeño que el tamaño de letra del elemento padre, con aproximadamente el mismo ratio que el mencionado anteriormente.
+- [\](es/CSS/length)
+  - : una unidad positiva de [longitud](es/CSS/length).
 
-

- 
<Porcentaje> 

- 
un porcentaje positivo del cuerpo de letra del elemento padre.

-

+
 
-
Es aconsejable evitar el uso de valores que no sean relativos al tamaño por defecto definido por el usuario, tales como longitud absoluta en unidades distintas a em o ex. Sin embargo, si hay que usar ese tipo de valores, es preferible utilizar unidades px (píxel), ya que su significado no varía en función de las características del sistema operativo (casi siempre erróneas) como la resolución del monitor.

+- \
+  - : un porcentaje positivo del cuerpo de letra del elemento padre.
 
-
Ejemplos

+Es aconsejable evitar el uso de valores que no sean relativos al tamaño por defecto definido por el usuario, tales como `longitud` absoluta en unidades distintas a `em` o `ex`. Sin embargo, si hay que usar ese tipo de valores, es preferible utilizar unidades `px` (píxel), ya que su significado no varía en función de las características del sistema operativo (casi siempre erróneas) como la resolución del monitor.
 
-
Ver El Ejemplo Vivo

+## Ejemplos
 
-
/* Ajusta el texto del párrafo a un cuerpo de letra muy grande. */
+[Ver El Ejemplo Vivo](/samples/cssref/font-size.html)
+
+```
+/* Ajusta el texto del párrafo a un cuerpo de letra muy grande. */
 p { font-size: xx-large }
 
 /* Ajusta la cabecera de nivel 1 (h1) a 2,5 veces del tamaño
@@ -54,16 +53,14 @@ h1 { font-size: 250% }
 
 /* Ajusta el texto incluido en span a 16px */
 span { font-size: 16px; }
-

+```
 
-
Notas

+## Notas
 
-
Las unidades em y ex en la propiedad {{ Cssxref("font-size") }} son relativas al tamaño de letra del elemento padre (al contrario que todas las demás propiedades, en las que estas unidades son relativas al tamaño de letra del elemento). Esto quiere decir que las unidades em y los porcentajes se comportan de igual forma cuando hablamos de {{ Cssxref("font-size") }}.

+Las unidades `em` y `ex` en la propiedad {{ Cssxref("font-size") }} son relativas al tamaño de letra del elemento padre (al contrario que todas las demás propiedades, en las que estas unidades son relativas al tamaño de letra del elemento). Esto quiere decir que las unidades `em` y los porcentajes se comportan de igual forma cuando hablamos de {{ Cssxref("font-size") }}.
 
-
Especificaciones

+## Especificaciones
 
-
+- [CSS 1](http://www.w3.org/TR/CSS1#font-size)
+- [CSS 2.1](http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size)
+- [css3-fonts](http://www.w3.org/TR/css3-fonts/#font-size)
diff --git a/files/es/web/css/font-style/index.md b/files/es/web/css/font-style/index.md
index 5945217aa89486..1c75e6d778851d 100644
--- a/files/es/web/css/font-style/index.md
+++ b/files/es/web/css/font-style/index.md
@@ -10,17 +10,18 @@ tags:
   - tipo de letra
 translation_of: Web/CSS/font-style
 ---
-
{{CSSRef}}

+{{CSSRef}}
 
-
Resumen

+## Resumen
 
-
La propiedad font-style permite definir el aspecto de una familia tipográfica entre los valores: normal, italic (cursiva) y oblique.

+La propiedad `font-style` permite definir el aspecto de una familia tipográfica entre los valores: `normal`, italic (cursiva) y `oblique`.
 
-
{{cssinfo}}

+{{cssinfo}}
 
-
Sintaxis

+## Sintaxis
 
-
font-style: normal;
+```css
+font-style: normal;
 font-style: italic;
 font-style: oblique;
 
@@ -28,33 +29,33 @@ font-style: oblique;
 font-style: inherit;
 font-style: initial;
 font-style: unset;
-

+```
 
-
Valores

+### Valores
 
-

- 
normal

- 
Escoge un tipo de letra clasificado como normal dentro de una {{Cssxref("font-family", "familia de fuente")}}.

- 
italic

- 
Escoge un tipo de letra etiquetado como italic, o, si una versión cursiva del tipo de letra no esté disponible, escoge un tipo de letra etiquetado como oblique en lugar de eso.

- 
oblique

- 
Escoge un tipo de letra etiquetado como oblique, o, si una versión oblique del tipo de letra no esté disponible, escoge un tipo de letra etiquetado como italic en lugar de eso.

-

+- `normal`
+  - : Escoge un tipo de letra clasificado como `normal` dentro de una {{Cssxref("font-family", "familia de fuente")}}.
+- `italic`
+  - : Escoge un tipo de letra etiquetado como `italic`, o, si una versión cursiva del tipo de letra no esté disponible, escoge un tipo de letra etiquetado como `oblique` en lugar de eso.
+- `oblique`
+  - : Escoge un tipo de letra etiquetado como `oblique`, o, si una versión oblique del tipo de letra no esté disponible, escoge un tipo de letra etiquetado como `italic` en lugar de eso.
 
-
Sintaxis formal

+### Sintaxis formal
 
 {{csssyntax}}
 
-
Ejemplo

+## Ejemplo
 
-
El ejemplo muestra los valores diferentes de font-style.

+El ejemplo muestra los valores diferentes de `font-style`.
 
-
+```html
+
This paragraph is normal.

+
This paragraph is italic.

+
This paragraph is oblique.

+```
 
-
.normal {
+```css
+.normal {
   font-style: normal;
 }
 
@@ -64,41 +65,21 @@ font-style: unset;
 
 .oblique {
   font-style: oblique;
-}

-
-
{{ EmbedLiveSample('Ejemplo') }}

-
-
Ten en cuenta que no todas las fuentes tienen tipos de letra distintos para oblique y italic, si este no es el caso, los navegadores simulan el estilo que falta utilizando el tipo de letra presente. Un ejemplo de representación de una fuente con ambos tipos de letra:

-
-

-
-
Especificaciones

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
EspecificaciónEstadoComentario
{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS3 Fonts')}}Sin cambio
{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}{{Spec2('CSS2.1')}}Sin cambio
{{SpecName('CSS1', '#font-style', 'font-style')}}{{Spec2('CSS1')}}Definición inicial

+}
+```
+
+{{ EmbedLiveSample('Ejemplo') }}
+
+Ten en cuenta que no todas las fuentes tienen tipos de letra distintos para `oblique` y `italic`, si este no es el caso, los navegadores simulan el estilo que falta utilizando el tipo de letra presente. Un ejemplo de representación de una fuente con ambos tipos de letra:
+
+![](https://mdn.mozillademos.org/files/12049/Screen%20Shot%202015-12-05%20at%2008.41.03.png)
+
+## Especificaciones
+
+| Especificación                                                                               | Estado                           | Comentario         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ |
+| {{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}             | {{Spec2('CSS3 Fonts')}} | Sin cambio         |
+| {{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}} | {{Spec2('CSS2.1')}}         | Sin cambio         |
+| {{SpecName('CSS1', '#font-style', 'font-style')}}                             | {{Spec2('CSS1')}}         | Definición inicial |
 
 {{Compat("css.properties.font-style")}}
diff --git a/files/es/web/css/font-variant-alternates/index.md b/files/es/web/css/font-variant-alternates/index.md
index 80f3c78a3935b5..c8b3d27351bfdf 100644
--- a/files/es/web/css/font-variant-alternates/index.md
+++ b/files/es/web/css/font-variant-alternates/index.md
@@ -7,19 +7,20 @@ tags:
   - Referencia
 translation_of: Web/CSS/font-variant-alternates
 ---
-
{{CSSRef}}

+{{CSSRef}}
 
-
Resumen

+## Resumen
 
-
La propiedad CSS font-variant-alternates controla el uso de glifos alternos. Estos glifos alternos pueden ser referenciados por nombres alternativos en {{cssxref("@font-feature-values")}}.

+La propiedad CSS **`font-variant-alternates`** controla el uso de glifos alternos. Estos glifos alternos pueden ser referenciados por nombres alternativos en {{cssxref("@font-feature-values")}}.
 
-
Las reglas-at definen nombres, para un tipo determinado de glifos alternativos (stylistic, styleset, character-variant, swash, ornament o annotation), asociándolos a un valor OpenType dado. Esta propiedad permite utilizar estos nombres de fácil uso (según se defina en {{cssxref("@font-feature-values")}}) dentro de la hoja de estilos.

+Las reglas-at definen nombres, para un tipo determinado de glifos alternativos (`stylistic`, `styleset`, `character-variant`, `swash`, `ornament` o `annotation`), asociándolos a un valor OpenType dado. Esta propiedad permite utilizar estos nombres de fácil uso (según se defina en {{cssxref("@font-feature-values")}}) dentro de la hoja de estilos.
 
-
{{cssinfo}}

+{{cssinfo}}
 
-
Sintaxis

+## Sintaxis
 
-
font-variant-alternates: normal;
+```css
+font-variant-alternates: normal;
 font-variant-alternates: historical-forms;
 font-variant-alternates: stylistic(user-defined-ident);
 font-variant-alternates: styleset(user-defined-ident);
@@ -33,75 +34,65 @@ font-variant-alternates: swash(ident1) annotation(ident2);
 font-variant-alternates: initial;
 font-variant-alternates: inherit;
 font-variant-alternates: unset;
-

-
-
Valores

-
-

- 
normal

- 
Se deshabilita el uso de glifos alternos.

- 
historical-forms

- 
Se habilita la muestra de formas históricas , es decir, glifos que eran usados comúnmente en el pasado, pero no en la actualidad. Corresponde al valor de OpenType hist.

- 
stylistic()

- 
Esta función habilita la muestra de alternos estilísticos. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType salt, como salt 2.

- 
styleset()

- 
Esta función habilita el uso de un conjunto de alternos estilísticos para caracteres. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType ssXY, como ss02.

- 
character-variant()

- 
Esta función habilita el uso de un conjunto de alternos estilísticos para caracteres. Es muy similar a styleset(), aunque la variante aquí no crea glifos coherentes a un set de caracteres; los caracteres individuales tendrán estilos indipendientes, no necesariamente coherentes. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType cvXY, como cv02.

- 
swash()

- 
Esta función habilita la muestra de glifos de tipografía swash. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde a los valores de OpenType swsh y cswh, como swsh 2 y cswh 2.

- 
ornaments()

- 
Esta función habilita la muestra de ornamentas, que son florones y otros glifos de estilo dingbat. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType ornm, como ornm 2.
- 
Nota: para manteneer la semántica de la fuente, se invita a los diseñadores de fuentes a incluir ornamentas qoe no coincidan con caracteres zingbat de Unicode como variantes de ornamenta al caracter de viñeta (U+2022). Las fuentes bien diseñadas lo harán, aunque muchas otras fuentes no.

- 

- 
annotation()

- 
Esta función habilita la muestra de anotaciones, como dígitos circulares o caracteres invertidos. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType nalt, como nalt 2.

-

-
-
Sintaxis formal

+```
+
+### Valores
+
+- `normal`
+  - : Se deshabilita el uso de glifos alternos.
+- `historical-forms`
+  - : Se habilita la muestra de formas históricas , es decir, glifos que eran usados comúnmente en el pasado, pero no en la actualidad. Corresponde al valor de OpenType `hist`.
+- `stylistic()`
+  - : Esta función habilita la muestra de alternos estilísticos. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType `salt`, como `salt 2`.
+- `styleset()`
+  - : Esta función habilita el uso de un conjunto de alternos estilísticos para caracteres. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType `ssXY`, como `ss02`.
+- `character-variant()`
+  - : Esta función habilita el uso de un conjunto de alternos estilísticos para caracteres. Es muy similar a `styleset()`, aunque la variante aquí no crea glifos coherentes a un set de caracteres; los caracteres individuales tendrán estilos indipendientes, no necesariamente coherentes. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType `cvXY`, como `cv02`.
+- `swash()`
+  - : Esta función habilita la muestra de glifos de tipografía [swash](http://en.wikipedia.org/wiki/Swash_%28typography%29). El parámetro es un nombre específico de fuente mapeado a un número. Corresponde a los valores de OpenType `swsh` y `cswh`, como `swsh 2` y `cswh 2`.
+- `ornaments()`
+
+  - : Esta función habilita la muestra de ornamentas, que son [florones](http://en.wikipedia.org/wiki/Fleuron_%28typography%29) y otros glifos de estilo dingbat. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType `ornm`, como `ornm 2`.
+
+    > **Nota:**para manteneer la semántica de la fuente, se invita a los diseñadores de fuentes a incluir ornamentas qoe no coincidan con caracteres zingbat de Unicode como variantes de ornamenta al caracter de viñeta (U+2022). Las fuentes bien diseñadas lo harán, aunque muchas otras fuentes no.
+
+- `annotation()`
+  - : Esta función habilita la muestra de anotaciones, como dígitos circulares o caracteres invertidos. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType `nalt`, como `nalt 2`.
+
+### Sintaxis formal
 
 {{csssyntax}}
 
-
Ejemplo

+## Ejemplo
 
-
HTML

+### HTML
 
-
<p>Firefox rocks!</p>
-<p class="variant">Firefox rocks!</p>
-

+```html
+
Firefox rocks!

+
Firefox rocks!

+```
 
-
CSS

+### CSS
 
-
p.variant {
+```css
+p.variant {
   font-family: Leitura Display Swashes;
   font-variant-alternates: swash(2);
-}

-
-
Resultado

-
-
Nota: se necesita la fuente Open Type Leitura Display Swashes instalada para que este ejemplo funcione

-
-
{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant-alternates') }}

-
-
Especificaciones

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Fonts', '#propdef-font-variant-alternates', 'font-variant-alternates')}}{{Spec2('CSS3 Fonts')}}Definición inicial

-
-
Compatibilidad de navegadores

+}
+```
+
+### Resultado
+
+**Nota:** se necesita la fuente Open Type [Leitura Display Swashes](http://ufonts.com/download/leituradisplay-swashes-opentype/470776.html) instalada para que este ejemplo funcione
+
+{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant-alternates') }}
+
+## Especificaciones
+
+| Especificación                                                                                                           | Estatus                          | Comentarios        |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------ |
+| {{SpecName('CSS3 Fonts', '#propdef-font-variant-alternates', 'font-variant-alternates')}} | {{Spec2('CSS3 Fonts')}} | Definición inicial |
+
+## Compatibilidad de navegadores
 
 {{Compat("css.properties.font-variant-alternates")}}
diff --git a/files/es/web/css/font-variant/index.md b/files/es/web/css/font-variant/index.md
index f6ae23e46810fe..61891a0e383b61 100644
--- a/files/es/web/css/font-variant/index.md
+++ b/files/es/web/css/font-variant/index.md
@@ -3,43 +3,40 @@ title: font-variant
 slug: Web/CSS/font-variant
 tags:
   - CSS
-  - 'CSS:Referencias'
+  - CSS:Referencias
   - Todas_las_Categorías
 translation_of: Web/CSS/font-variant
 ---
-
{{CSSRef}}

+{{CSSRef}}
 
-
Resumen

+## Resumen
 
-
La propiedad font-variant selecciona entre los aspectos normal y small-caps para la {{ Cssxref("font-family", "familia de fuente") }} determinado.

+La propiedad `font-variant` selecciona entre los aspectos `normal` y `small-caps` para la {{ Cssxref("font-family", "familia de fuente") }} determinado.
 
-
{{cssinfo}}

+{{cssinfo}}
 
-
Sintaxis

+## Sintaxis
 
-font-variant: {{ mediawiki.external('normal | small-caps') }} ;
+`font-variant:` {{ mediawiki.external('normal | small-caps') }} ;
 
-
Valores

+### Valores
 
-

- 
normal

- 
Especifica un aspecto de letra normal.

-

+- normal
+  - : Especifica un aspecto de letra normal.
 
-

- 
small-caps

- 
Especifica un tipo de letra que está declarado como tipo de letra small-caps. Si no hay un tipo de letra small-caps disponible, Mozilla simulará un tipo de letra small-caps, por ejemplo tomando un tipo de letra normal y reemplazando las letras en minúsculas por caracteres en mayúsculas escalados.

-

+
 
-
Ejemplos

+- small-caps
+  - : Especifica un tipo de letra que está declarado como tipo de letra small-caps. Si no hay un tipo de letra small-caps disponible, Mozilla simulará un tipo de letra small-caps, por ejemplo tomando un tipo de letra normal y reemplazando las letras en minúsculas por caracteres en mayúsculas escalados.
 
-
h1 { font-variant: small-caps }
+## Ejemplos
+
+```
+h1 { font-variant: small-caps }
 p { font-variant: small-caps}
-

+```
 
-
Especificaciones

+## Especificaciones
 
-
+- [Fuentes en CSS 2 (en)](http://www.w3.org/TR/CSS2/fonts.html#propdef-font-variant)
+- [Fuentes en CSS 3 (en)](http://www.w3.org/TR/css3-fonts/#font-variant)
diff --git a/files/es/web/css/font-weight/index.md b/files/es/web/css/font-weight/index.md
index bdf332b7e5c924..22f97e41283c01 100644
--- a/files/es/web/css/font-weight/index.md
+++ b/files/es/web/css/font-weight/index.md
@@ -8,17 +8,18 @@ tags:
   - Tipos de letra de CSS
 translation_of: Web/CSS/font-weight
 ---
-
{{CSSRef}}

+{{CSSRef}}
 
-
Resumen

+## Resumen
 
-
La propiedad font-weight de CSS especifica el peso o grueso de la letra. Algunos tipos de letra sólo están disponibles en normal y bold.

+La propiedad **`font-weight`** de [CSS](/es/docs/CSS "CSS") especifica el peso o grueso de la letra. Algunos tipos de letra sólo están disponibles en `normal` y `bold`.
 
-
{{cssinfo}}

+{{cssinfo}}
 
-
Sintaxis

+## Sintaxis
 
-
font-weight: normal;
+```css
+font-weight: normal;
 font-weight: bold;
 
 /* Relativo al padre */
@@ -39,43 +40,43 @@ font-weight: 900;
 font-weight: inherit;
 font-weight: initial;
 font-weight: unset;
-

+```
 
-
Valores

+### Valores
 
-

- 
normal 

- 
Peso/grueso normal de la fuente. Igual que 400.

- 
bold 

- 
Grueso ancho (negrita). Igual que 700.

- 
lighter 

- 
Corresponde a un tipo de fuente menos grueso que el tipo del elemento padre (dentro de los valores disponibles).

- 
bolder 

- 
Corresponde a un tipo de fuente más grueso que el tipo del elemento padre (dentro de los valores disponibles).

- 
100, 200, 300, 400, 500, 600, 700, 800, 900 

- 
Pesos numéricos para los tipos de fuente que nos permiten más flexibilidad que normal - bold. Si el peso especificado no existe en el tipo de fuente escogido, un valor entre 600 y 900 se presentará con el valor más próximo disponible para dar una letra más oscura. De igual forma, un valor entre 100 y 500 se presentará con el valor más próximo disponible para dar una letra más clara. Esto significa que para los tipos de letra que sólo dispongan de normal y bold, cualquier valor entre 100 y 500 será normal y entre 600 y 900, será bold.

-

+- normal
+  - : Peso/grueso normal de la fuente. Igual que 400.
+- bold
+  - : Grueso ancho (_negrita_). Igual que 700.
+- lighter
+  - : Corresponde a un tipo de fuente menos grueso que el tipo del elemento padre (dentro de los valores disponibles).
+- bolder
+  - : Corresponde a un tipo de fuente más grueso que el tipo del elemento padre (dentro de los valores disponibles).
+- 100, 200, 300, 400, 500, 600, 700, 800, 900
+  - : Pesos numéricos para los tipos de fuente que nos permiten más flexibilidad que `normal - bold`. Si el peso especificado no existe en el tipo de fuente escogido, un valor entre 600 y 900 se presentará con el valor más próximo disponible para dar una letra más oscura. De igual forma, un valor entre 100 y 500 se presentará con el valor más próximo disponible para dar una letra más clara. Esto significa que para los tipos de letra que sólo dispongan de normal y bold, cualquier valor entre 100 y 500 será normal y entre 600 y 900, será bold.
 
-
Ejemplos

+## Ejemplos
 
-
HTML

+### HTML
 
-
<p>
+```html
+

   Alice was beginning to get very tired of sitting by her sister on the
   bank, and of having nothing to do: once or twice she had peeped into the
   book her sister was reading, but it had no pictures or conversations in
   it, 'and what is the use of a book,' thought Alice 'without pictures or
   conversations?'
-</p>
+

 
-<div>I'm heavy<br/>
-  <span>I'm lighter</span>
-</div>
-

+
I'm heavy

+  I'm lighter
+

+```
 
-
CSS

+### CSS
 
-
/* Poner texto del párrafo en negrita. */
+```css
+/* Poner texto del párrafo en negrita. */
 p {
   font-weight: bold;
 }
@@ -90,46 +91,22 @@ div {
    to be one step lighter than the parent. */
 span {
   font-weight: lighter;
-}

-
-
Resultado

-
-
{{EmbedLiveSample("Examples","400","300")}}

-
-
Especificaciones

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
EspecificaciónEstadoComentario
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}Sin cambio
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}{{Spec2('CSS3 Transitions')}}Define font-weight como animable.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}Sin cambio
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}Definición inicial

-
-
Compatibilidad entre navegadores

+}
+```
+
+### Resultado
+
+{{EmbedLiveSample("Examples","400","300")}}
+
+## Especificaciones
+
+| Especificación                                                                                   | Estado                                   | Comentario                          |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------- |
+| {{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}             | {{Spec2('CSS3 Fonts')}}         | Sin cambio                          |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}         | {{Spec2('CSS3 Transitions')}} | Define `font-weight` como animable. |
+| {{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}} | {{Spec2('CSS2.1')}}                 | Sin cambio                          |
+| {{SpecName('CSS1', '#font-weight', 'font-weight')}}                             | {{Spec2('CSS1')}}                 | Definición inicial                  |
+
+## Compatibilidad entre navegadores
 
 {{Compat("css.properties.font-weight")}}
diff --git a/files/es/web/css/font/index.md b/files/es/web/css/font/index.md
index ed5ea625a534fc..59d21dc3f423e9 100644
--- a/files/es/web/css/font/index.md
+++ b/files/es/web/css/font/index.md
@@ -3,121 +3,105 @@ title: font
 slug: Web/CSS/font
 tags:
   - CSS
-  - 'CSS:Referencias'
+  - CSS:Referencias
   - Todas_las_Categorías
 translation_of: Web/CSS/font
 ---
-
{{CSSRef}}

-
-
Resumen

-
-
La propiedad {{ Cssxref("font") }} permite establecer de una sola vez los valores para todas las propiedades: {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} y {{ Cssxref("font-family") }} en una hoja de estilo.

-
-
{{cssinfo}}

-
-
Sintaxis

-
-
font: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>

-
-
font: caption | icon | menu | message-box | small-caption | status-bar | -moz-window | -moz-document | -moz-workspace | -moz-desktop | -moz-info | -moz-dialog | -moz-button | -moz-pull-down-menu | -moz-list | -moz-field

-
-
font: {{ Cssxref("inherit") }}

-
-
Valores

-
-
La propiedad {{ Cssxref("font") }} establece los valores individuales tal como se especifica y a las otras su valor inicial.

-
-
Ver las propiedades individuales: {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }} y {{ Cssxref("font-family") }}.

-
-
También se pueden especificar los tipos de letra del sistema usando la propiedad {{ Cssxref("font") }},en lugar de tener que especificar cada propiedad individualmente:

-
-

- 
caption 

- 
el tipo de letra para elementos de control (por ejemplo: botones, cajas de selección, etc.).

- 
icon 

- 
el tipo de letra usado para etiquetar iconos.

- 
menu 

- 
el tipo de letra usado en menús (por ejemplo: barra de menú o menús desplegables).

- 
message-box 

- 
el tipo de letra usado en cajas de diálogo.

- 
small-caption 

- 
el tipo de letra usado para etiquetar pequeños controles (small control).

- 
status-bar 

- 
el tipo de letra usado en la barra de estado de la ventana.

- 
-moz-window 

- 
Empty

- 
-moz-document 

- 
Empty

- 
-moz-workspace 

- 
Empty

- 
-moz-desktop 

- 
Empty

- 
-moz-info 

- 
Empty

- 
-moz-dialog 

- 
Empty

- 
-moz-button 

- 
Empty

- 
-moz-pull-down-menu 

- 
Empty

- 
-moz-list 

- 
Empty

- 
-moz-field 

- 
Empty

-

-
-
Ejemplos

-
-
Ver El Ejemplo Vivo

-
-
/* Ajusta el tamaño de letra a 12pt y el alto de línea a 14pt. La familia tipográfica es sans-serif */
+{{CSSRef}}
+
+## Resumen
+
+La propiedad {{ Cssxref("font") }} permite establecer de una sola vez los valores para todas las propiedades: {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} y {{ Cssxref("font-family") }} en una hoja de estilo.
+
+{{cssinfo}}
+
+## Sintaxis
+
+`font:` \[ <[font-style](es/CSS/font-style)> || <[font-variant](es/CSS/font-variant)> || <[font-weight](es/CSS/font-weight)> ]? <[font-size](es/CSS/font-size)> \[ / <[line-height](es/CSS/line-height)> ]? <[font-family](es/CSS/font-family)>
+
+`font:` `caption` | `icon` | `menu` | `message-box` | `small-caption` | `status-bar` | `-moz-window` | `-moz-document` | `-moz-workspace` | `-moz-desktop` | `-moz-info` | `-moz-dialog` | `-moz-button` | `-moz-pull-down-menu` | `-moz-list` | `-moz-field`
+
+`font:` {{ Cssxref("inherit") }}
+
+### Valores
+
+La propiedad {{ Cssxref("font") }} establece los valores individuales tal como se especifica y a las otras su valor inicial.
+
+Ver las propiedades individuales: {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }} y {{ Cssxref("font-family") }}.
+
+También se pueden especificar los tipos de letra del sistema usando la propiedad {{ Cssxref("font") }},_en lugar_ de tener que especificar cada propiedad individualmente:
+
+- caption
+  - : el tipo de letra para elementos de control (por ejemplo: botones, cajas de selección, etc.).
+- icon
+  - : el tipo de letra usado para etiquetar iconos.
+- menu
+  - : el tipo de letra usado en menús (por ejemplo: barra de menú o menús desplegables).
+- message-box
+  - : el tipo de letra usado en cajas de diálogo.
+- small-caption
+  - : el tipo de letra usado para etiquetar pequeños controles (small control).
+- status-bar
+  - : el tipo de letra usado en la barra de estado de la ventana.
+- \-moz-window
+  - : Empty
+- \-moz-document
+  - : Empty
+- \-moz-workspace
+  - : Empty
+- \-moz-desktop
+  - : Empty
+- \-moz-info
+  - : Empty
+- \-moz-dialog
+  - : Empty
+- \-moz-button
+  - : Empty
+- \-moz-pull-down-menu
+  - : Empty
+- \-moz-list
+  - : Empty
+- \-moz-field
+  - : Empty
+
+## Ejemplos
+
+[Ver El Ejemplo Vivo](/samples/cssref/font.html)
+
+```
+/* Ajusta el tamaño de letra a 12pt y el alto de línea a 14pt. La familia tipográfica es sans-serif */
 p { font: 12pt/14pt sans-serif }
-

+```
 
-
/* Ajusta el tamaño de letra al 80% del elemento padre o al tamaño por defecto (si no hay elemento padre) y la familia tipográfica a sans-serif */
+```
+/* Ajusta el tamaño de letra al 80% del elemento padre o al tamaño por defecto (si no hay elemento padre) y la familia tipográfica a sans-serif */
 p { font: 80% sans-serif }
-

+```
 
-
/* Ajusta el peso tipográfico a '''bold''' (negrita), el estilo de letra a ''italic'' (cursiva), el tamaño de letra a large (grande) y la familia a serif. */
+```
+/* Ajusta el peso tipográfico a '''bold''' (negrita), el estilo de letra a ''italic'' (cursiva), el tamaño de letra a large (grande) y la familia a serif. */
 p { font: bold italic large serif }
-

-
-
Notas

-
-
Las partes {{ Cssxref("font-size") }} y {{ Cssxref("font-family") }} de {{ Cssxref("font") }} son obligatorias. Omitirlas causa un error de sintaxis y la declaración CSS será completamente ignorada.

-
-
Si no se establece un valor concreto, las propiedades tomarán el valor por defecto: normal. Las propiedades que se pueden omitir son: ({{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }} y {{ Cssxref("line-height") }}).

-
-
La propiedad {{ Cssxref("font-size-adjust") }} también se establece a su valor inicial (none) cuando se usa la propiedad general {{ Cssxref("font") }}.

-
-
Especificaciones

-
-
    
- 
  • CSS 1
    • 
- 
  • CSS 2 (para {{ Cssxref("font-size-adjust") }})
    • 
- 
  • CSS 2.1
    • 
- 
  • css3-ui (para los nuevos valores de fuentes de sistema])
    • 
-

-
-
Compatibilidades

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

+```
+
+## Notas
+
+Las partes {{ Cssxref("font-size") }} y {{ Cssxref("font-family") }} de {{ Cssxref("font") }} son obligatorias. Omitirlas causa un error de sintaxis y la declaración CSS será completamente ignorada.
+
+Si no se establece un valor concreto, las propiedades tomarán el valor por defecto: `normal`. Las propiedades que se pueden omitir son: ({{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }} y {{ Cssxref("line-height") }}).
+
+La propiedad {{ Cssxref("font-size-adjust") }} también se establece a su valor inicial (`none`) cuando se usa la propiedad general {{ Cssxref("font") }}.
+
+## Especificaciones
+
+- [CSS 1](http://www.w3.org/TR/CSS1#font)
+- [CSS 2](http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font) (para {{ Cssxref("font-size-adjust") }})
+- [CSS 2.1](http://www.w3.org/TR/CSS21/fonts.html#propdef-font)
+- [css3-ui](http://www.w3.org/TR/css3-ui/#font) (para los nuevos valores de fuentes de sistema])
+
+## Compatibilidades
+
+| Navegador         | Versión mínima |
+| ----------------- | -------------- |
+| Internet Explorer | 3              |
+| Netscape          | 4              |
+| Opera             | 3.5            |
diff --git a/files/es/web/css/frequency/index.md b/files/es/web/css/frequency/index.md
index d6958b08884b64..151a579c86f2ff 100644
--- a/files/es/web/css/frequency/index.md
+++ b/files/es/web/css/frequency/index.md
@@ -10,104 +10,44 @@ tags:
   - Web
 translation_of: Web/CSS/frequency
 ---
-
{{CSSRef}}

+{{CSSRef}}
 
-
Resumen

+## Resumen
 
-
El tipo de dato CSS <frequency> denota una dimensión en frecuencia, como el tono de una voz hablando. Consisste en un valor {{cssxref("<number>")}} seguido inmediatamente por la unidad. Como en cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.

+El tipo de dato [CSS](/es/docs/Web/CSS "CSS") `` denota una dimensión en frecuencia, como el tono de una voz hablando. Consisste en un valor {{cssxref("<number>")}} seguido inmediatamente por la unidad. Como en cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.
 
-
Las siguientes unidades deben ser usadas:

+Las siguientes unidades deben ser usadas:
 
-
    
- 
  • Hz, que representa una frecuencia en Hertz. Ejemplos: 0Hz, 1500Hz, 10000Hz.
    • 
- 
  • kHz, que representa una frecuencia en kilohertz. Ejemplos: 0kHz, 1.5kHz, 10kHz.
    • 
-

+- [`Hz`](), que representa una frecuencia en Hertz. Ejemplos: `0Hz`, `1500Hz`, `10000Hz`.
+- [`kHz`](), que representa una frecuencia en kilohertz. Ejemplos: `0kHz`, `1.5kHz`, `10kHz`.
 
-
Aunque todas las unidades representen la misma frecuencia para el valor 0, la unidad no debe ser omitida en ese caso, puesto que no es un valor {{cssxref("length")}}: 0, no es válido, y no representa 0Hz, 0kHz. Aunque las unidades sean insensibles a mayúsculas en CSS, es buena práctica usar una H mayúscula para Hz y kHz, como indica el SI, siendo Hertz un apellido.

+Aunque todas las unidades representen la misma frecuencia para el valor `0`, la unidad no debe ser omitida en ese caso, puesto que no es un valor {{cssxref("length")}}: `0`, no es válido, y no representa `0Hz`, `0kHz`. Aunque las unidades sean insensibles a mayúsculas en CSS, es buena práctica usar una H mayúscula para `Hz` y `kHz`, como indica el [SI](https://es.wikipedia.org/wiki/Sistema_Internacional_de_Unidades), siendo [Hertz](http://en.wikipedia.org/wiki/Heinrich_Hertz) un apellido.
 
-
Ejemplos

+## Ejemplos
 
-
- 
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
Valores de frecuencia permitidos
CódigoSignificado
12HzEntero positivo.
-456kHzEntero negativo.
4.3HzNo entero.
14KhZLa unidad es insensible al uso de mayúsculas, aunque no se recomienda una representación que no esté acorde al SI.
+0HzCero, con un símbolo + y la unidad.
-0kHzCero, con un símbolo - y la unidad (Aunque no sea común, es un valor permitido).

+| Código    | Significado                                                                                                        |
+| --------- | ------------------------------------------------------------------------------------------------------------------ |
+| `12Hz`    | Entero positivo.                                                                                                   |
+| `-456kHz` | Entero negativo.                                                                                                   |
+| `4.3Hz`   | No entero.                                                                                                         |
+| `14KhZ`   | La unidad es insensible al uso de mayúsculas, aunque no se recomienda una representación que no esté acorde al SI. |
+| `+0Hz`    | Cero, con un símbolo `+ y la unidad`.                                                                              |
+| `-0kHz`   | Cero, con un símbolo `-` y la unidad (Aunque no sea común, es un valor permitido).                                 |
 
-
- 
-  
-   
-   
-  
- 
- 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
-
CódigoSignificado
Valores de frecuencia no permitidos
12.0Éste es un tipo {{cssxref("<number>")}}, no un tipo <frequency>, debe tener una unidad.
7 HzNo se permite espacio entre el número {{cssxref("<number>")}} y la unidad.
0El valor cero puede ser escrito sin unidad solo para tipo {{cssxref("<length>")}}, no para <frequency>.

+| Código | Significado                                                                                                               |
+| ------ | ------------------------------------------------------------------------------------------------------------------------- |
+| `12.0` | Éste es un tipo {{cssxref("<number>")}}, no un tipo \, debe tener una unidad.                 |
+| `7 Hz` | No se permite espacio entre el número {{cssxref("<number>")}} y la unidad.                               |
+| `0`    | El valor cero puede ser escrito sin unidad solo para tipo {{cssxref("<length>")}}, no para \. |
 
-
Especificaciones

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

+| Especificación                                                                       | Estatus                          | Comentarios        |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------ |
+| {{SpecName('CSS3 Values', '#frequency', '<frequency>')}} | {{Spec2('CSS3 Values')}} | Definición inicial |
 
-
Este tipo de dato fue introducido inicialmente en CSS Nivel 2 para el ya obsoleto grupo de merios aural, donde era usado para definir el tono de la voz. Dicho grupo fue descontinuado desde entonces, pero el tipo de datos <frequency> ha sido reintroducido en CSS3, aunque ninguna propiedad CSS lo usa por el momento.

+Este tipo de dato fue introducido inicialmente en [CSS Nivel 2](http://www.w3.org/TR/CSS2/) para el ya obsoleto [grupo de merios aural](/en/CSS/Aural "aural"), donde era usado para definir el tono de la voz. Dicho grupo fue descontinuado desde entonces, pero el tipo de datos `` ha sido reintroducido en CSS3, aunque ninguna propiedad CSS lo usa por el momento.
 
-
Compatibilidad de navegadores

+## Compatibilidad de navegadores
 
 {{Compat("css.types.frequency")}}

From b95c3e7e51114c17e5037336e71d89f25abab7ff Mon Sep 17 00:00:00 2001
From: Alexander 
Date: Thu, 20 Oct 2022 12:47:31 -0500
Subject: [PATCH 4/9] css/c-f linting with 8181 .markdownlint-cli2.jsonc

---
 files/es/web/css/angle/index.md               |    2 +-
 files/es/web/css/background-image/index.md    |    1 -
 files/es/web/css/calc/index.md                |    2 +-
 files/es/web/css/clear/index.md               |    2 +-
 files/es/web/css/color_value/index.md         |    8 +-
 files/es/web/css/column-gap/index.md          |   66 +-
 files/es/web/css/css_animations/tips/index.md |   10 +-
 .../using_css_animations/index.md             |    6 +-
 .../border-image_generator/index.md           | 3484 +++++------
 .../border-radius_generator/index.md          | 2160 +++----
 .../using_multiple_backgrounds/index.md       |    2 +-
 .../index.md                                  |    2 +-
 .../css/css_colors/color_picker_tool/index.md | 5244 ++++++++---------
 .../using_multi-column_layouts/index.md       |    2 +-
 .../index.md                                  |    8 +-
 files/es/web/css/css_flow_layout/index.md     |    4 +-
 .../index.md                                  |   72 +-
 .../basic_concepts_of_grid_layout/index.md    |   72 +-
 .../box_alignment_in_css_grid_layout/index.md |   72 +-
 files/es/web/css/css_grid_layout/index.md     |   72 +-
 .../index.md                                  |   72 +-
 .../relationship_of_grid_layout/index.md      |   74 +-
 .../understanding_z_index/index.md            |   14 +-
 .../stacking_and_float/index.md               |   18 +-
 .../stacking_without_z-index/index.md         |    6 +-
 .../the_stacking_context/index.md             |    2 +-
 .../using_css_transitions/index.md            |    6 +-
 files/es/web/css/cursor/index.md              |    6 +-
 files/es/web/css/display/index.md             |    2 +-
 files/es/web/css/flex-direction/index.md      |    2 +-
 files/es/web/css/flex-shrink/index.md         |    2 +-
 files/es/web/css/flex/index.md                |   26 +-
 files/es/web/css/float/index.md               |    2 +-
 33 files changed, 5761 insertions(+), 5762 deletions(-)

diff --git a/files/es/web/css/angle/index.md b/files/es/web/css/angle/index.md
index 81ae4a10baee2c..a238f244a8abdf 100644
--- a/files/es/web/css/angle/index.md
+++ b/files/es/web/css/angle/index.md
@@ -28,7 +28,7 @@ Aun cuando todas las unidades representan lo mismo para el valor `0`, la unidad
 | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
 | ![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. |
+| ![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
 
diff --git a/files/es/web/css/background-image/index.md b/files/es/web/css/background-image/index.md
index 2560e20df9fd46..d87a98c8d2d0fb 100644
--- a/files/es/web/css/background-image/index.md
+++ b/files/es/web/css/background-image/index.md
@@ -133,4 +133,3 @@ div {
   - {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}
   - {{cssxref("image/paint", "paint()")}}
   - {{cssxref("url", "url()")}}
-
diff --git a/files/es/web/css/calc/index.md b/files/es/web/css/calc/index.md
index 6c9545266d11e4..25b4b8c54234f8 100644
--- a/files/es/web/css/calc/index.md
+++ b/files/es/web/css/calc/index.md
@@ -71,7 +71,7 @@ Los operandos en la expresión pueden ser valores tanto positivos como negativos
 
 ### Entradas de formulario que se ajustan automáticamente al ancho de su contenedor
 
-Otro caso de uso para` calc()` es asegurar que los campos de un formulario llenan el espacio disponible sin pasarse de los límites de su contenedor mientras mantienen el margen apropiado.
+Otro caso de uso para`calc()` es asegurar que los campos de un formulario llenan el espacio disponible sin pasarse de los límites de su contenedor mientras mantienen el margen apropiado.
 
 Echémosle un vistazo al CSS:
 
diff --git a/files/es/web/css/clear/index.md b/files/es/web/css/clear/index.md
index 80b1fbd63257c0..082116184d6cfe 100644
--- a/files/es/web/css/clear/index.md
+++ b/files/es/web/css/clear/index.md
@@ -8,7 +8,7 @@ translation_of: Web/CSS/clear
 ---
 {{CSSRef}}
 
-La propiedad [CSS](/es/docs/CSS) **`clear `**especifica si un elemento puede estar al lado de elementos [flotantes](/es/docs/CSS/float) que lo preceden o si debe ser movido (cleared) debajo de ellos. La propiedad `clear` aplica a ambos elementos flotantes y no flotantes.
+La propiedad [CSS](/es/docs/CSS) **`clear`**especifica si un elemento puede estar al lado de elementos [flotantes](/es/docs/CSS/float) que lo preceden o si debe ser movido (cleared) debajo de ellos. La propiedad `clear` aplica a ambos elementos flotantes y no flotantes.
 
 Cuando es aplicado a bloques no flotantes, mueve el [border edge](/es/docs/CSS/box_model) del elemento hacia abajo hasta que este debajo del [margin edge](/es/docs/CSS/box_model) de todos los floats relevantes. Este movimiento (cuando acontece) causa que [margin collapsing](/es/docs/CSS/margin_collapsing) no ocurra.
 
diff --git a/files/es/web/css/color_value/index.md b/files/es/web/css/color_value/index.md
index fc8982712a8b50..c7123264005bf5 100644
--- a/files/es/web/css/color_value/index.md
+++ b/files/es/web/css/color_value/index.md
@@ -14,11 +14,11 @@ translation_of: Web/CSS/color_value
 
 ## Resumen
 
-`El tipo de datos `[CSS](/es/docs/Web/CSS)` ` denota un color en el [sRGB color space](http://en.wikipedia.org/wiki/SRGB). Un color puede ser descrito de cualquiera de las siguiente maneras:
+`El tipo de datos`[CSS](/es/docs/Web/CSS)`` denota un color en el [sRGB color space](http://en.wikipedia.org/wiki/SRGB). Un color puede ser descrito de cualquiera de las siguiente maneras:
 
 - Usando una _palabra clave_.
 - Usando el sistema [RGB cubic-coordinate](http://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation) (usando #-hexadecimal o las notaciones funcionales `rgb()` y `rgba()` )
-- Usando el sistema [HSL cylindrical-coordinate](http://en.wikipedia.org/wiki/HSL_and_HSV) (usando las notaciones funcionales `hsl()` y `hsla() `)
+- Usando el sistema [HSL cylindrical-coordinate](http://en.wikipedia.org/wiki/HSL_and_HSV) (usando las notaciones funcionales `hsl()` y `hsla()`)
 
 Hay que destacar que la lista de valores de color aceptados ha ido creciendo conforme la especificación evolucionaba, para acabar con la lista de colores de CSS3.
 
@@ -30,7 +30,7 @@ Aunque los valores de colores en CSS son definidos de manera precisa existe la p
 
 ## Interpolación
 
-Los valores del tipo de datos CSS `` pueden ser interpolados para lograr animaciones o para crear valores `. `En este caso son interpolados en cada uno de sus componentes rojo, verde y azul, conteniendo, cada uno de ellos, un número decimal con coma flotante. Debe tenerse en cuenta que la interpolación del color sucede en el [alpha-premultiplied sRGBA color space](http://www.gimp.org/docs/plug-in/appendix-alpha.html) para evitar que aparezcan grises inesperados. En las animaciones, la velocidad de la interpolación viene determinada por la [timing function](/es/docs/Web/CSS/timing-function) asociada con la animación.
+Los valores del tipo de datos CSS `` pueden ser interpolados para lograr animaciones o para crear valores `.`En este caso son interpolados en cada uno de sus componentes rojo, verde y azul, conteniendo, cada uno de ellos, un número decimal con coma flotante. Debe tenerse en cuenta que la interpolación del color sucede en el [alpha-premultiplied sRGBA color space](http://www.gimp.org/docs/plug-in/appendix-alpha.html) para evitar que aparezcan grises inesperados. En las animaciones, la velocidad de la interpolación viene determinada por la [timing function](/es/docs/Web/CSS/timing-function) asociada con la animación.
 
 ## Valores
 
@@ -964,7 +964,7 @@ La palaba `transparent` representa un color totalmente transparente, es decir, e
 > **Nota:** **Nota histórica**
 > La palabra clave `transparent` no fue un color en CSS hasta CSS Nivel 2 (Revisión 1). Podía ser usada en lugar de un valor \ regular en dos propiedades CSS: {{Cssxref("background")}} y {{Cssxref("border")}}. En esencia fue añadida para permitir sobreescribir valores sólidos heredados.
 >
-> Con el soporte de la opacidad que nos proporcionan los [alpha channels](http://en.wikipedia.org/wiki/Alpha_compositing), `transparent fue redefinido como un color verdadero más en `CSS Nivel 3 permitiendo su use en cualquier sitio donde de requiera un valor`` , como la propiedad {{Cssxref("color")}}.
+> Con el soporte de la opacidad que nos proporcionan los [alpha channels](http://en.wikipedia.org/wiki/Alpha_compositing), `transparent fue redefinido como un color verdadero más en`CSS Nivel 3 permitiendo su use en cualquier sitio donde de requiera un valor`` , como la propiedad {{Cssxref("color")}}.
 
 ### `Palabra clave currentColor`
 
diff --git a/files/es/web/css/column-gap/index.md b/files/es/web/css/column-gap/index.md
index 15073afc19da97..b3b2c950ec50de 100644
--- a/files/es/web/css/column-gap/index.md
+++ b/files/es/web/css/column-gap/index.md
@@ -83,34 +83,34 @@ El efecto es como si las {{glossary("grid lines")}} afectadas adquieren una anch
 - Propiedades CSS relacionadas: {{cssxref("grid-row-gap")}}, {{cssxref("grid-gap")}}
 - Guía sobre CSS Grid Layout: _[Conceptos básicos sobre CSS Grid Layout - Gutters](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters)_
 
-1.  [**CSS**](/es/docs/Web/CSS)
-2.  **[Referencia CSS](/es/docs/Web/CSS/Reference)**
-3.  [Diseño CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout)
-4.  **Guías**
-
-    1.  [Conceptos básicos sobre Diseño CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
-    2.  [Relación con otros métodos de diseño](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
-    3.  [Posicionamiento basado en línea](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-    4.  [Grid template areas](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
-    5.  [Layout using named grid lines](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
-    6.  [Auto-placement in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
-    7.  [Box alignment in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
-    8.  [Grids, logical values and writing modes](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
-    9.  [CSS Grid Layout and Accessibility](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
+1. [**CSS**](/es/docs/Web/CSS)
+2. **[Referencia CSS](/es/docs/Web/CSS/Reference)**
+3. [Diseño CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout)
+4. **Guías**
+
+    1. [Conceptos básicos sobre Diseño CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
+    2. [Relación con otros métodos de diseño](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
+    3. [Posicionamiento basado en línea](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+    4. [Grid template areas](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
+    5. [Layout using named grid lines](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
+    6. [Auto-placement in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
+    7. [Box alignment in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
+    8. [Grids, logical values and writing modes](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
+    9. [CSS Grid Layout and Accessibility](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
     10. [CSS Grid Layout and Progressive Enhancement](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
     11. [Realizing common layouts using grids](/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
 
-5.  **Propiedades**
-
-    1.  [grid](/es/docs/Web/CSS/grid)
-    2.  [grid-area](/es/docs/Web/CSS/grid-area)
-    3.  [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
-    4.  [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
-    5.  [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
-    6.  [grid-column](/es/docs/Web/CSS/grid-column)
-    7.  [grid-column-end](/es/docs/Web/CSS/grid-column-end)
-    8.  [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
-    9.  [grid-column-start](/es/docs/Web/CSS/grid-column-start)
+5. **Propiedades**
+
+    1. [grid](/es/docs/Web/CSS/grid)
+    2. [grid-area](/es/docs/Web/CSS/grid-area)
+    3. [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
+    4. [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
+    5. [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
+    6. [grid-column](/es/docs/Web/CSS/grid-column)
+    7. [grid-column-end](/es/docs/Web/CSS/grid-column-end)
+    8. [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
+    9. [grid-column-start](/es/docs/Web/CSS/grid-column-start)
     10. [grid-gap](/es/docs/Web/CSS/grid-gap)
     11. [grid-row](/es/docs/Web/CSS/grid-row)
     12. [grid-row-end](/es/docs/Web/CSS/grid-row-end)
@@ -121,12 +121,12 @@ El efecto es como si las {{glossary("grid lines")}} afectadas adquieren una anch
     17. [grid-template-colunms](/es/docs/Web/CSS/grid-template-columns)
     18. [grid-template-rows](/es/docs/Web/CSS/grid-template-rows)
 
-6.  **Glosario**
+6. **Glosario**
 
-    1.  [Grid lines](/es/docs/Glossary/Grid_lines)
-    2.  [Grid tracks](/es/docs/Glossary/Grid_tracks)
-    3.  [Grid cell](/es/docs/Glossary/Grid_cell)
-    4.  [Grid areas](/es/docs/Glossary/Grid_areas)
-    5.  [Gutters](/es/docs/Glossary/Gutters)
-    6.  [Grid row](/es/docs/Glossary/Grid_rows)
-    7.  [Grid column](/es/docs/Glossary/Grid_column)
+    1. [Grid lines](/es/docs/Glossary/Grid_lines)
+    2. [Grid tracks](/es/docs/Glossary/Grid_tracks)
+    3. [Grid cell](/es/docs/Glossary/Grid_cell)
+    4. [Grid areas](/es/docs/Glossary/Grid_areas)
+    5. [Gutters](/es/docs/Glossary/Gutters)
+    6. [Grid row](/es/docs/Glossary/Grid_rows)
+    7. [Grid column](/es/docs/Glossary/Grid_column)
diff --git a/files/es/web/css/css_animations/tips/index.md b/files/es/web/css/css_animations/tips/index.md
index 82ab2b9c2706eb..68a1f5fb2c5789 100644
--- a/files/es/web/css/css_animations/tips/index.md
+++ b/files/es/web/css/css_animations/tips/index.md
@@ -82,9 +82,9 @@ Esto se ve raro, ¿cierto? Esto se debe a que la única forma de volver a reprod
 
 Esto es lo que sucede cuando la función `play()` es llamada:
 
-1.  La lista de clases CSS de caja se restablece a `"box"`. Esto tiene el efecto de remover cualquier otra clase recurrente aplicada a la caja, incluida la clase `"changing"` que controla la animación. En otras palabras eliminaremos el efecto de animación de la caja. Sin embargo, los cambios en la lista de clases no tienen efecto hasta que se recalcula completamente el estilo y se ha producido una actualización para reflejar el cambio.
-2.  Para estar seguros que los estilos son recalculados, nosotros usamos {{domxref("window.requestAnimationFrame()")}}, especifinado un callback. Nuestro callback se ejecuta justo antes del 'repaint' del documento. El problema para nosotros es que debido a que es antes del repaint, ¡El recalculo del estilo aún no ha suciedo! Por lo tanto...
-3.  Nuestro callback habilmente llama a `requestAnimationFrame()` ¡por segunda vez!. En este momento el callback se compila antes del siguiente repaint, después de que se haya producido el recalculo del estilo. El callback añade la clase `"changing"` de nuevo en la caja, para que el repaint inicie la animación una vez más.
+1. La lista de clases CSS de caja se restablece a `"box"`. Esto tiene el efecto de remover cualquier otra clase recurrente aplicada a la caja, incluida la clase `"changing"` que controla la animación. En otras palabras eliminaremos el efecto de animación de la caja. Sin embargo, los cambios en la lista de clases no tienen efecto hasta que se recalcula completamente el estilo y se ha producido una actualización para reflejar el cambio.
+2. Para estar seguros que los estilos son recalculados, nosotros usamos {{domxref("window.requestAnimationFrame()")}}, especifinado un callback. Nuestro callback se ejecuta justo antes del 'repaint' del documento. El problema para nosotros es que debido a que es antes del repaint, ¡El recalculo del estilo aún no ha suciedo! Por lo tanto...
+3. Nuestro callback habilmente llama a `requestAnimationFrame()` ¡por segunda vez!. En este momento el callback se compila antes del siguiente repaint, después de que se haya producido el recalculo del estilo. El callback añade la clase `"changing"` de nuevo en la caja, para que el repaint inicie la animación una vez más.
 
 Por supuesto, también necesitamos agregar un controlador de eventos a nuestro botón "Run" para que en verdad haga algo
 
@@ -100,8 +100,8 @@ document.querySelector(".runButton").addEventListener("click", play, false);
 
 Simplemente removemos {{cssxref("animation-name")}} aplicado al elemento que hace que eso salte o corte a su siguiente estado.Si, en cambio, desea que la animación se complete y luego se detenga, debe probar un enfoque diferente. Los principales trucos son:
 
-1.  Haga que su animación sea lo más autónoma posible. Esto significa que no se debe confiar en`animation-direction: alternate`. En su lugar, debe escribir explícitamente una animación de fotogramas clave que pase por la animación completa en una repetición hacia adelante.
-2.  Use JavaScript y borre la animación que se esta utilizando cuando se activa el evento `animationiteration`.
+1. Haga que su animación sea lo más autónoma posible. Esto significa que no se debe confiar en`animation-direction: alternate`. En su lugar, debe escribir explícitamente una animación de fotogramas clave que pase por la animación completa en una repetición hacia adelante.
+2. Use JavaScript y borre la animación que se esta utilizando cuando se activa el evento `animationiteration`.
 
 El siguiente demo muestra como puedes lograr las técnicas JavaScript mencionandas anteriormente:
 
diff --git a/files/es/web/css/css_animations/using_css_animations/index.md b/files/es/web/css/css_animations/using_css_animations/index.md
index 1a58dcca564de8..7692fda039fb53 100644
--- a/files/es/web/css/css_animations/using_css_animations/index.md
+++ b/files/es/web/css/css_animations/using_css_animations/index.md
@@ -17,9 +17,9 @@ original_slug: Web/CSS/CSS_Animations/Usando_animaciones_CSS
 
 Las animaciones CSS tienen tres ventajas principales sobre las técnicas tradicionales de animación basada en scripts:
 
-1.  Son muy fáciles de usar para animaciones sencillas, puedes hacerlo incluso sin tener conocimientos de Javascript.
-2.  La animación se muestra correctamente, incluso en equipos poco potentes. Animaciones simples realizadas en Javascript pueden verse mal (a menos que estén muy bien hechas). El motor de renderizado puede usar técnicas de optimización como el "frame-skipping" u otras técnicas para que la ejecución de la animación se vea tan suave como sea posible.
-3.  Al ser el navegador quien controle la secuencia de la animación, permitimos que optimice el rendimiento y eficiencia de la misma, por ejemplo, reduciendo la frecuencia de actualización de la animación ejecutándola en pestañas que no estén visibles.
+1. Son muy fáciles de usar para animaciones sencillas, puedes hacerlo incluso sin tener conocimientos de Javascript.
+2. La animación se muestra correctamente, incluso en equipos poco potentes. Animaciones simples realizadas en Javascript pueden verse mal (a menos que estén muy bien hechas). El motor de renderizado puede usar técnicas de optimización como el "frame-skipping" u otras técnicas para que la ejecución de la animación se vea tan suave como sea posible.
+3. Al ser el navegador quien controle la secuencia de la animación, permitimos que optimice el rendimiento y eficiencia de la misma, por ejemplo, reduciendo la frecuencia de actualización de la animación ejecutándola en pestañas que no estén visibles.
 
 ## Configurando la animación
 
diff --git a/files/es/web/css/css_backgrounds_and_borders/border-image_generator/index.md b/files/es/web/css/css_backgrounds_and_borders/border-image_generator/index.md
index 4dc9835939e736..eb51eac5329665 100644
--- a/files/es/web/css/css_backgrounds_and_borders/border-image_generator/index.md
+++ b/files/es/web/css/css_backgrounds_and_borders/border-image_generator/index.md
@@ -267,51 +267,51 @@ round
  * ========================================================================== */
 
 .span_12 {
-	width: 100%;
+ width: 100%;
 }
 
 .span_11 {
-	width: 91.46%;
+ width: 91.46%;
 }
 
 .span_10 {
-	width: 83%;
+ width: 83%;
 }
 
 .span_9 {
-	width: 74.54%;
+ width: 74.54%;
 }
 
 .span_8 {
-	width: 66.08%;
+ width: 66.08%;
 }
 
 .span_7 {
-	width: 57.62%;
+ width: 57.62%;
 }
 
 .span_6 {
-	width: 49.16%;
+ width: 49.16%;
 }
 
 .span_5 {
-	width: 40.7%;
+ width: 40.7%;
 }
 
 .span_4 {
-	width: 32.24%;
+ width: 32.24%;
 }
 
 .span_3 {
-	width: 23.78%;
+ width: 23.78%;
 }
 
 .span_2 {
-	width: 15.32%;
+ width: 15.32%;
 }
 
 .span_1 {
-	width: 6.86%;
+ width: 6.86%;
 }
 
 
@@ -319,9 +319,9 @@ round
  * ========================================================================== */
 
 .section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
+ clear: both;
+ padding: 0px;
+ margin: 0px;
 }
 
 /*  GROUPING
@@ -345,13 +345,13 @@ round
  * ========================================================================== */
 
 .col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
+ display: block;
+ float:left;
+ margin: 1% 0 1% 1.6%;
 }
 
 .col:first-child {
-	margin-left: 0;
+ margin-left: 0;
 } /* all browsers except IE6 and lower */
 
 
@@ -361,68 +361,68 @@ round
  */
 
 .ui-input-slider {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
+ height: 20px;
+ font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+ -moz-user-select: none;
+ user-select: none;
 }
 
 .ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
+ float: left;
+ height: 100%;
+ line-height: 100%;
 }
 
 /* Input Slider */
 
 .ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
+ margin: 0;
+ padding: 0;
+ width: 50px;
+ text-align: center;
 
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 }
 
 .ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
+ width: 90px;
+ padding: 0px 10px 0px 0px;
+ text-align: right;
+ text-transform: lowercase;
 }
 
 .ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+ width: 16px;
+ cursor: pointer;
+ background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
 }
 
 .ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+ background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
 }
 
 .ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
+ width: 90px;
+ padding: 0 10px 0 0;
+ text-align: right;
+ text-transform: lowercase;
 }
 
 .ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
+ width: 25px;
+ background-color: #2C9FC9;
+ border-radius: 5px;
+ color: #FFF;
+ font-weight: bold;
+ line-height: 14px;
+ text-align: center;
 }
 
 .ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
+ background-color: #379B4A;
+ cursor: pointer;
 }
 
 /*************************************************************************************/
@@ -435,107 +435,107 @@ round
 /* Dropdown */
 
 .ui-dropdown {
-	height: 2em;
-	width: 120px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 12px;
+ height: 2em;
+ width: 120px;
+ font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+ font-size: 12px;
 
-	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
-	background-position: right center;
-	background-repeat: no-repeat;
-	background-color: #359740;
+ background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+ background-position: right center;
+ background-repeat: no-repeat;
+ background-color: #359740;
 
-	position: relative;
+ position: relative;
 
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
 }
 
 .ui-dropdown:hover {
-	cursor: pointer;
-	background-color: #208B20;
+ cursor: pointer;
+ background-color: #208B20;
 }
 
 /* Dropdown Select Button */
 
 .ui-dropdown-select {
-	height: inherit;
-	padding: 0 0.75em;
-	color: #FFF;
-	line-height: 2em;
+ height: inherit;
+ padding: 0 0.75em;
+ color: #FFF;
+ line-height: 2em;
 }
 
 /* Dropdown List */
 
 .ui-dropdown-list {
-	width: 100%;
-	height: 150px;
-	max-height: 150px;
-	margin: 0;
-	padding: 0 0.3em;
+ width: 100%;
+ height: 150px;
+ max-height: 150px;
+ margin: 0;
+ padding: 0 0.3em;
 
-	border: 3px solid #3490D2;
-	border-color: #208B20;
-	background: #666;
-	background-color: #EEF1F5;
-	color: #000;
+ border: 3px solid #3490D2;
+ border-color: #208B20;
+ background: #666;
+ background-color: #EEF1F5;
+ color: #000;
 
-	position: absolute;
-	top: 2em;
-	left: 0;
-	z-index: 100;
+ position: absolute;
+ top: 2em;
+ left: 0;
+ z-index: 100;
 
-	overflow: hidden;
-	transition: all 0.3s;
+ overflow: hidden;
+ transition: all 0.3s;
 
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 }
 
 .ui-dropdown-list:hover {
-	overflow: auto;
+ overflow: auto;
 }
 
 .ui-dropdown-list[data-hidden='true'] {
-	height: 0 !important;
-	opacity: 0;
-	visibility: hidden;
+ height: 0 !important;
+ opacity: 0;
+ visibility: hidden;
 }
 
 .ui-dropdown[data-position='left'] .ui-dropdown-list {
-	left: -100%;
-	top: 0;
+ left: -100%;
+ top: 0;
 }
 
 .ui-dropdown[data-position='right'] .ui-dropdown-list {
-	left: 100%;
-	top: 0;
+ left: 100%;
+ top: 0;
 }
 
 .ui-dropdown-list > div {
-	width: 100%;
-	height: 1.6em;
-	margin: 0.3em 0;
-	padding: 0.3em;
-	line-height: 1em;
+ width: 100%;
+ height: 1.6em;
+ margin: 0.3em 0;
+ padding: 0.3em;
+ line-height: 1em;
 
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 }
 
 .ui-dropdown-list > div:hover {
-	background: #3490D2;
-	color:#FFF;
-	border-radius: 2px;
-	cursor: pointer;
+ background: #3490D2;
+ color:#FFF;
+ border-radius: 2px;
+ cursor: pointer;
 }
 
 
@@ -549,57 +549,57 @@ round
 /* Checkbox */
 
 .ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
+ text-align: center;
+ font-size: 16px;
+ font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+ line-height: 1.5em;
+ color: #FFF;
 
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
 }
 
 .ui-checkbox > input {
- 	display: none;
+  display: none;
 }
 
 .ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
+ font-size: 12px;
+ padding: 0.333em 1.666em 0.5em;
+ height: 1em;
+ line-height: 1em;
 
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
+ background-color: #888;
+ background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+ background-position: center center;
+ background-repeat: no-repeat;
 
-	color: #FFF;
-	border-radius: 2px;
-	font-weight: bold;
-	float: left;
+ color: #FFF;
+ border-radius: 2px;
+ font-weight: bold;
+ float: left;
 }
 
 .ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
+ padding-left: 34px;
+ background-position: center left 10px;
 }
 
 .ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
+ padding-right: 34px;
+ padding-left: 1.666em;
+ background-position: center right 10px;
 }
 
 .ui-checkbox > label:hover {
-	cursor: pointer;
+ cursor: pointer;
 }
 
 .ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
+ background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+ background-color: #379B4A;
 }
 
 /*************************************************************************************/
@@ -610,47 +610,47 @@ round
  */
 
 body {
-	width: 100%;
-	margin: 0 auto;
-	padding: 0 0 20px 0;
+ width: 100%;
+ margin: 0 auto;
+ padding: 0 0 20px 0;
 
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+ font-family: "Segoe UI", Arial, Helvetica, sans-serif;
 
-	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
-	border: 1px solid #EEE;
+ /*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+ border: 1px solid #EEE;
 
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
 }
 
 body[data-move='X'] {
-	cursor: w-resize !important;
+ cursor: w-resize !important;
 }
 
 body[data-move='Y'] {
-	cursor: s-resize !important;
+ cursor: s-resize !important;
 }
 
 #container {
-	width: 100%;
+ width: 100%;
 
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 }
 
 [data-draggable='true']:hover {
-	cursor: move;
+ cursor: move;
 }
 
 [data-draggable='true']:hover > * {
-	cursor: default;
+ cursor: default;
 }
 
 
@@ -663,119 +663,119 @@ body[data-move='Y'] {
  */
 
 #gallery {
-	box-shadow: 0 0 3px 0 #BABABA;
+ box-shadow: 0 0 3px 0 #BABABA;
 }
 
 #image-gallery {
-	width: 600px;
-	height: 100px;
-	margin: 0 auto;
-	transition: margin 0.4s;
+ width: 600px;
+ height: 100px;
+ margin: 0 auto;
+ transition: margin 0.4s;
 }
 
 #image-gallery .image {
-	height: 80px;
-	float: left;
-	margin: 10px;
-	opacity: 0.5;
-	background-color: #FFF;
-	box-shadow: 0px 0px 3px 1px #BABABA;
+ height: 80px;
+ float: left;
+ margin: 10px;
+ opacity: 0.5;
+ background-color: #FFF;
+ box-shadow: 0px 0px 3px 1px #BABABA;
 }
 
 #image-gallery .image[selected="true"] {
-	box-shadow: 0px 0px 3px 1px #3BBA52;
-	opacity: 1;
+ box-shadow: 0px 0px 3px 1px #3BBA52;
+ opacity: 1;
 }
 
 #image-gallery .image:hover {
-	cursor: pointer;
-	box-shadow: 0px 0px 3px 1px #30ACE5;
-	opacity: 1;
+ cursor: pointer;
+ box-shadow: 0px 0px 3px 1px #30ACE5;
+ opacity: 1;
 }
 
 #image-gallery[data-collapsed='true'] {
-	margin-top: -100px;
+ margin-top: -100px;
 }
 
 /* Load Menu */
 
 #load-actions {
-	margin: 10px 0;
+ margin: 10px 0;
 }
 
 #toggle-gallery {
-	width: 30px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
+ width: 30px;
+ height: 25px;
+ margin: 10px;
+ color: #FFF;
 
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-	background-repeat: no-repeat;
-	background-position: top 4px center;
-	background-color: #888888 !important;
+ background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+ background-repeat: no-repeat;
+ background-position: top 4px center;
+ background-color: #888888 !important;
 
-	border-radius: 2px;
-	float: left;
+ border-radius: 2px;
+ float: left;
 }
 
 #toggle-gallery:hover {
-	cursor: pointer;
+ cursor: pointer;
 }
 
 #toggle-gallery[data-action='show'] {
-	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
-	background-color: #888888 !important;
+ background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+ background-color: #888888 !important;
 }
 
 #toggle-gallery[data-action='hide'] {
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+ background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
 }
 
 .button {
-	width: 100px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-	text-align: center;
-	font-size: 12px;
-	line-height: 25px;
-	background-color: #379B4A;
-	border-radius: 2px;
-	float: left;
+ width: 100px;
+ height: 25px;
+ margin: 10px;
+ color: #FFF;
+ text-align: center;
+ font-size: 12px;
+ line-height: 25px;
+ background-color: #379B4A;
+ border-radius: 2px;
+ float: left;
 }
 
 .button:hover {
-	cursor: pointer;
-	background-color: #3380C4;
+ cursor: pointer;
+ background-color: #3380C4;
 }
 
 #load-image {
-	float: left;
+ float: left;
 }
 
 #load-remote {
-	width: 30px;
-	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
-	background-repeat: no-repeat;
-	background-position: center center;
+ width: 30px;
+ background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+ background-repeat: no-repeat;
+ background-position: center center;
 }
 
 #remote-url {
-	width: 200px;
-	height: 23px;
-	margin: 10px;
-	padding: 0 5px;
-	border: 1px solid #379B4A;
-	border-radius: 2px;
-	float: left;
+ width: 200px;
+ height: 23px;
+ margin: 10px;
+ padding: 0 5px;
+ border: 1px solid #379B4A;
+ border-radius: 2px;
+ float: left;
 
-	transition: width 0.5s;
+ transition: width 0.5s;
 }
 
 #remote-url:focus {
-	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
-	border-color: rgba(55, 155, 74, 0.5);
-	width: 450px;
+ box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+ border-color: rgba(55, 155, 74, 0.5);
+ width: 450px;
 }
 
 /*
@@ -783,168 +783,168 @@ body[data-move='Y'] {
  */
 
 #preview_section {
-	position: relative;
-	min-height: 400px;
+ position: relative;
+ min-height: 400px;
 }
 
 /* Image Control */
 
 #subject {
-	width: 300px;
-	height: 300px;
-	background-repeat: no-repeat;
-	background-size: 100%;
-	background-color: #FFF;
-	border: 1px solid #CCC;
+ width: 300px;
+ height: 300px;
+ background-repeat: no-repeat;
+ background-size: 100%;
+ background-color: #FFF;
+ border: 1px solid #CCC;
 
-	position: absolute;
-	z-index: 10;
-	top: 15%;
-	left: 10%;
+ position: absolute;
+ z-index: 10;
+ top: 15%;
+ left: 10%;
 
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition-property: width, height;
-	transition-duration: 0.1s;
+ box-shadow: 0 0 3px 0 #BABABA;
+ transition-property: width, height;
+ transition-duration: 0.1s;
 }
 
 #subject .guideline {
-	background-color: rgba(255, 255, 255, 0.7);
-	border: 1px solid rgba(0, 0, 0, 0.3);
-	position: absolute;
+ background-color: rgba(255, 255, 255, 0.7);
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ position: absolute;
 }
 
 #subject .guideline:hover {
-	background-color: #F00;
+ background-color: #F00;
 }
 
 #subject .guideline[data-active] {
-	background-color: #F00;
-	z-index: 10;
+ background-color: #F00;
+ z-index: 10;
 }
 
 #subject .guideline[data-axis='X'] {
-	width: 1px;
-	height: 100%;
-	top: -1px;
+ width: 1px;
+ height: 100%;
+ top: -1px;
 }
 
 #subject .guideline[data-axis='Y'] {
-	width: 100%;
-	height: 1px;
-	left: -1px;
+ width: 100%;
+ height: 1px;
+ left: -1px;
 }
 
 #subject .guideline[data-axis='X']:hover {
-	cursor: w-resize;
+ cursor: w-resize;
 }
 
 #subject .guideline[data-axis='Y']:hover {
-	cursor: s-resize;
+ cursor: s-resize;
 }
 
 
 #subject .relative {
-	position: relative;
-	font-size: 12px;
+ position: relative;
+ font-size: 12px;
 }
 
 #subject .tooltip, #subject .tooltip2 {
-	width: 40px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 12px;
-	text-align: center;
+ width: 40px;
+ height: 20px;
+ line-height: 20px;
+ font-size: 12px;
+ text-align: center;
 
-	position: absolute;
-	opacity: 0.5;
-	transition: opacity 0.25s;
+ position: absolute;
+ opacity: 0.5;
+ transition: opacity 0.25s;
 }
 
 #subject .tooltip {
-	background: #EEE;
-	border-radius: 2px;
-	border: 1px solid #CCC;
+ background: #EEE;
+ border-radius: 2px;
+ border: 1px solid #CCC;
 }
 
 #subject .tooltip2{
-	color: #555;
+ color: #555;
 }
 
 #subject [data-active] > * {
-	opacity: 1;
+ opacity: 1;
 }
 
 #subject .tooltip[data-info='top'] {
-	top: -10px;
-	right: -50px;
+ top: -10px;
+ right: -50px;
 }
 
 #subject .tooltip[data-info='right'] {
-	bottom: -30px;
-	right: -20px;
+ bottom: -30px;
+ right: -20px;
 }
 
 #subject .tooltip[data-info='bottom'] {
-	top: -10px;
-	left: -50px;
+ top: -10px;
+ left: -50px;
 }
 
 #subject .tooltip[data-info='left'] {
-	top: -30px;
-	right: -20px;
+ top: -30px;
+ right: -20px;
 }
 
 #subject .tooltip2[data-info='top'] {
-	top: -10px;
-	left: -50px;
+ top: -10px;
+ left: -50px;
 }
 
 #subject .tooltip2[data-info='right'] {
-	top: -30px;
-	right: -20px;
+ top: -30px;
+ right: -20px;
 }
 
 #subject .tooltip2[data-info='bottom'] {
-	top: -10px;
-	right: -50px;
+ top: -10px;
+ right: -50px;
 }
 
 #subject .tooltip2[data-info='left'] {
-	bottom: -30px;
-	right: -20px;
+ bottom: -30px;
+ right: -20px;
 }
 
 /* Preview */
 
 #preview {
-	width: 30%;
-	height: 50%;
-	background-color: #FFF;
-	text-align: center;
-	overflow: hidden;
-	position: absolute;
-	z-index: 10;
+ width: 30%;
+ height: 50%;
+ background-color: #FFF;
+ text-align: center;
+ overflow: hidden;
+ position: absolute;
+ z-index: 10;
 
-	left: 60%;
-	top: 15%;
+ left: 60%;
+ top: 15%;
 
-	border-radius: 2px;
-	border-image-width: 20px;
-	border-image-repeat: round;
-	box-shadow: 0 0 3px 0 #BABABA;
+ border-radius: 2px;
+ border-image-width: 20px;
+ border-image-repeat: round;
+ box-shadow: 0 0 3px 0 #BABABA;
 }
 
 #preview .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
+ width: 10px;
+ height: 10px;
+ background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+ position: absolute;
+ bottom: 0;
+ right: 0;
 }
 
 #preview .resize-handle:hover {
-	cursor: nw-resize;
+ cursor: nw-resize;
 }
 
 
@@ -953,42 +953,42 @@ body[data-move='Y'] {
  */
 
 #general-controls {
-	padding: 10px 30px;
-	background-color: #FFF;
-	opacity: 0.95;
-	color: #888;
-	/*border-radius: 2px;*/
-	box-shadow: 0 0 3px 0 #BABABA;
+ padding: 10px 30px;
+ background-color: #FFF;
+ opacity: 0.95;
+ color: #888;
+ /*border-radius: 2px;*/
+ box-shadow: 0 0 3px 0 #BABABA;
 }
 
 #general-controls .property {
-	width: 130px;
-	float: left;
+ width: 130px;
+ float: left;
 }
 
 #general-controls .name {
-	height: 20px;
-	margin: 0 10px 0 0;
-	line-height: 100%;
-	text-align: right;
-	float: left;
+ height: 20px;
+ margin: 0 10px 0 0;
+ line-height: 100%;
+ text-align: right;
+ float: left;
 }
 
 #general-controls .right {
-	width: 200px;
-	float: right;
+ width: 200px;
+ float: right;
 }
 
 #general-controls .ui-checkbox label {
-	height: 10px;
+ height: 10px;
 }
 
 #general-controls .separator {
-	height: 40px;
-	width: 1px;
-	margin: -10px 15px;
-	background-color: #EEE;
-	float: left;
+ height: 40px;
+ width: 1px;
+ margin: -10px 15px;
+ background-color: #EEE;
+ float: left;
 }
 
 /*
@@ -996,110 +996,110 @@ body[data-move='Y'] {
  */
 
 #controls {
-	color: #444;
-	margin: 10px 0 0 0;
+ color: #444;
+ margin: 10px 0 0 0;
 }
 
 #controls .category {
-	height: 190px;
-	min-width: 260px;
-	margin: 10px;
-	padding: 10px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	float: left;
+ height: 190px;
+ min-width: 260px;
+ margin: 10px;
+ padding: 10px;
+ border: 1px solid #CCC;
+ border-radius: 3px;
+ float: left;
 
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
+ box-shadow: 0 0 3px 0 #BABABA;
+ transition: all 0.25s;
 
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 }
 
 @media (min-width: 880px) {
-	#controls .category {
-		width: 30%;
-		margin-left: 1.66%;
-		margin-right: 1.66%;
-	}
+ #controls .category {
+  width: 30%;
+  margin-left: 1.66%;
+  margin-right: 1.66%;
+ }
 }
 
 @media (max-width: 879px) {
-	#controls .category {
-		width: 37%;
-		margin-left: 6.5%;
-		margin-right: 6.5%;
-	}
+ #controls .category {
+  width: 37%;
+  margin-left: 6.5%;
+  margin-right: 6.5%;
+ }
 }
 
 #controls .category .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
+ width: 100%;
+ height: 30px;
+ margin: 0 0 10px 0;
+ line-height: 25px;
 
-	text-align: center;
-	color: #AAA;
+ text-align: center;
+ color: #AAA;
 }
 
 #controls .category:hover .title {
-	color: #777;
+ color: #777;
 }
 
 #controls .category > .group {
-	border: 1px solid #CCC;
-	border-radius: 2px;
+ border: 1px solid #CCC;
+ border-radius: 2px;
 }
 
 
 /* property */
 
 #controls .property {
-	width: 250px;
-	height: 20px;
-	margin: 5px auto;
+ width: 250px;
+ height: 20px;
+ margin: 5px auto;
 }
 
 #controls .property .ui-input-slider {
-	margin: 0;
-	float: left;
+ margin: 0;
+ float: left;
 }
 
 #controls .property .ui-input-slider-info {
-	width: 60px;
+ width: 60px;
 }
 
 #controls .property .ui-input-slider-left {
-	transition: opacity 0.15s;
+ transition: opacity 0.15s;
     opacity: 0;
 }
 
 #controls .property .ui-input-slider-right {
-	transition: opacity 0.15s;
+ transition: opacity 0.15s;
     opacity: 0;
 }
 
 #controls .property .name {
-	width: 60px;
-	height: 20px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	line-height: 100%;
-	float: left;
+ width: 60px;
+ height: 20px;
+ padding: 0px 10px 0px 0px;
+ text-align: right;
+ line-height: 100%;
+ float: left;
 }
 
 #controls .property .config {
-	width: 20px;
-	height: 20px;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
-	opacity: 0.5;
+ width: 20px;
+ height: 20px;
+ float: left;
+ background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+ opacity: 0.5;
 }
 
 #controls .property .config:hover {
-	cursor: pointer;
-	opacity: 1;
+ cursor: pointer;
+ opacity: 1;
 }
 
 #controls .ui-input-slider:hover .ui-input-slider-right {
@@ -1111,153 +1111,153 @@ body[data-move='Y'] {
 }
 
 #controls .property .ui-dropdown {
-	margin: 0 10px;
-	float: left;
+ margin: 0 10px;
+ float: left;
 }
 
 
 #controls .property .ui-checkbox {
-	margin: 0 0 0 16px;
-	float: left;
+ margin: 0 0 0 16px;
+ float: left;
 }
 
 #controls .property .ui-checkbox label {
-	height: 0.85em;
-	width: 10px;
+ height: 0.85em;
+ width: 10px;
 }
 
 /* dropdowns */
 #controls .ui-dropdown {
-	width: 50px;
-	height: 1.7em;
-	border-radius: 2px;
+ width: 50px;
+ height: 1.7em;
+ border-radius: 2px;
 }
 
 #controls .ui-dropdown-select {
-	line-height: 1.6em;
+ line-height: 1.6em;
 }
 
 #controls .ui-dropdown-list {
-	top: 20px;
+ top: 20px;
 }
 
 #controls .ui-dropdown-list {
-	border-width: 1px;
-	text-align: center;
+ border-width: 1px;
+ text-align: center;
 }
 
 #controls .ui-dropdown-list:hover {
-	overflow: hidden;
+ overflow: hidden;
 }
 
 #controls .border-repeat {
-	margin: 0 0 0 16px !important;
-	width: 80px;
+ margin: 0 0 0 16px !important;
+ width: 80px;
 }
 
 #controls .border-repeat .ui-dropdown-list {
-	height: 6.2em;
-	border-width: 1px;
-	text-align: center;
+ height: 6.2em;
+ border-width: 1px;
+ text-align: center;
 }
 
 /* border-image-slice */
 
 
 #border-slice-control .ui-dropdown-list {
-	height: 4.3em;
+ height: 4.3em;
 }
 
 /* border-image-width */
 
 #border-width-control .ui-dropdown-list {
-	height: 6.2em;
+ height: 6.2em;
 }
 
 /* border-image-outset */
 
 #border-outset-control .ui-dropdown-list {
-	height: 4.3em;
+ height: 4.3em;
 }
 
 #aditional-properties .property {
-	width: 200px;
+ width: 200px;
 }
 
 #aditional-properties .ui-input-slider > input {
-	width: 80px !important;
+ width: 80px !important;
 }
 
 /* unit settings panel */
 
 #unit-settings {
-	padding: 10px;
-	position: absolute;
+ padding: 10px;
+ position: absolute;
 
-	background: #FFF;
+ background: #FFF;
 
-	font-size: 12px;
-	border-radius: 3px;
-	border: 1px solid #CCC;
-	text-align: center;
-	color: #555;
+ font-size: 12px;
+ border-radius: 3px;
+ border: 1px solid #CCC;
+ text-align: center;
+ color: #555;
 
-	position: absolute;
-	z-index: 1000;
+ position: absolute;
+ z-index: 1000;
 
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
+ box-shadow: 0 0 3px 0 #BABABA;
+ transition: all 0.25s;
 }
 
 #unit-settings .title {
-	width: 100%;
-	margin: -5px auto 0;
+ width: 100%;
+ margin: -5px auto 0;
 
-	color: #666;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 25px;
-	border-bottom: 1px solid #E5E5E5;
+ color: #666;
+ font-size: 14px;
+ font-weight: bold;
+ line-height: 25px;
+ border-bottom: 1px solid #E5E5E5;
 }
 
 #unit-settings .ui-input-slider {
-	margin: 10px 0 0 0;
+ margin: 10px 0 0 0;
 }
 
 #unit-settings .ui-input-slider-info {
-	width: 50px;
-	line-height: 1.5em;
+ width: 50px;
+ line-height: 1.5em;
 }
 
 #unit-settings input {
-	font-size: 12px;
-	width: 40px !important;
+ font-size: 12px;
+ width: 40px !important;
 }
 
 #unit-settings .close {
-	width: 16px;
-	height: 16px;
-	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
-	background-size: 75%;
+ width: 16px;
+ height: 16px;
+ background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+ background-size: 75%;
 
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	opacity: 0.5;
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ opacity: 0.5;
 }
 
 #unit-settings .close:hover {
-	cursor: pointer;
-	opacity: 1;
+ cursor: pointer;
+ opacity: 1;
 }
 
 #unit-settings[data-active='true'] {
-	opacity: 1;
+ opacity: 1;
 }
 
 #unit-settings[data-active='false'] {
-	opacity: 0;
-	top: -100px !important;
+ opacity: 0;
+ top: -100px !important;
 }
 
 /*
@@ -1265,63 +1265,63 @@ body[data-move='Y'] {
  */
 
 #output {
-	padding: 10px;
-	border: 2px dashed #888 !important;
-	box-shadow: none !important;
-	border-radius: 3px;
-	overflow: hidden;
+ padding: 10px;
+ border: 2px dashed #888 !important;
+ box-shadow: none !important;
+ border-radius: 3px;
+ overflow: hidden;
 
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
+ -moz-user-select: text;
+ -webkit-user-select: text;
+ -ms-user-select: text;
+ user-select: text;
 }
 
 
 @media (min-width: 880px) {
-	#output {
-		width: 63.33% !important;
-	}
+ #output {
+  width: 63.33% !important;
+ }
 }
 
 @media (max-width: 879px) {
-	#output {
-		width: 87% !important;
-	}
+ #output {
+  width: 87% !important;
+ }
 }
 
 
 #output .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
+ width: 100%;
+ height: 30px;
+ margin: 0 0 10px 0;
+ line-height: 25px;
 
-	text-align: center;
-	color: #AAA;
+ text-align: center;
+ color: #AAA;
 }
 
 #output .css-property {
-	width: 100%;
-	margin: 0;
-	color: #555;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
+ width: 100%;
+ margin: 0;
+ color: #555;
+ font-size: 14px;
+ line-height: 18px;
+ float: left;
 }
 
 #output .css-property .name {
-	width: 30%;
-	font-weight: bold;
-	text-align: right;
-	float: left;
+ width: 30%;
+ font-weight: bold;
+ text-align: right;
+ float: left;
 }
 
 #output .css-property .value {
-	width: 65%;
-	padding: 0 2.5%;
-	word-break: break-all;
-	float: left;
+ width: 65%;
+ padding: 0 2.5%;
+ word-break: break-all;
+ float: left;
 }
 ```
 
@@ -1334,260 +1334,260 @@ body[data-move='Y'] {
 
 var InputSliderManager = (function InputSliderManager() {
 
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		return input;
-	};
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-
-			document.addEventListener("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		};
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		};
-
-		return slider;
-	};
-
-	var InputSlider = function(node) {
-		var min		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision >= 0 ? precision : 0;
-		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			return;
-
-		notify.call(slider);
-	};
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	};
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	};
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	};
-
-	var setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value > 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
+ var subscribers = {};
+ var sliders = [];
+
+ var InputComponent = function InputComponent(obj) {
+  var input = document.createElement('input');
+  input.setAttribute('type', 'text');
+  input.style.width = 50 + obj.precision * 10 + 'px';
+
+  input.addEventListener('click', function(e) {
+   this.select();
+  });
+
+  input.addEventListener('change', function(e) {
+   var value = parseFloat(e.target.value);
+
+   if (isNaN(value) === true)
+    setValue(obj.topic, obj.value);
+   else
+    setValue(obj.topic, value);
+  });
+
+  return input;
+ };
+
+ var SliderComponent = function SliderComponent(obj, sign) {
+  var slider = document.createElement('div');
+  var startX = null;
+  var start_value = 0;
+
+  slider.addEventListener("click", function(e) {
+   document.removeEventListener("mousemove", sliderMotion);
+   setValue(obj.topic, obj.value + obj.step * sign);
+  });
+
+  slider.addEventListener("mousedown", function(e) {
+   startX = e.clientX;
+   start_value = obj.value;
+   document.body.style.cursor = "e-resize";
+
+   document.addEventListener("mouseup", slideEnd);
+   document.addEventListener("mousemove", sliderMotion);
+  });
+
+  var slideEnd = function slideEnd(e) {
+   document.removeEventListener("mousemove", sliderMotion);
+   document.body.style.cursor = "auto";
+   slider.style.cursor = "pointer";
+  };
+
+  var sliderMotion = function sliderMotion(e) {
+   slider.style.cursor = "e-resize";
+   var delta = (e.clientX - startX) / obj.sensivity | 0;
+   var value = delta * obj.step + start_value;
+   setValue(obj.topic, value);
+  };
+
+  return slider;
+ };
+
+ var InputSlider = function(node) {
+  var min  = parseFloat(node.getAttribute('data-min'));
+  var max  = parseFloat(node.getAttribute('data-max'));
+  var step = parseFloat(node.getAttribute('data-step'));
+  var value = parseFloat(node.getAttribute('data-value'));
+  var topic = node.getAttribute('data-topic');
+  var unit = node.getAttribute('data-unit');
+  var name  = node.getAttribute('data-info');
+  var sensivity = node.getAttribute('data-sensivity') | 0;
+  var precision = node.getAttribute('data-precision') | 0;
+
+  this.min = isNaN(min) ? 0 : min;
+  this.max = isNaN(max) ? 100 : max;
+  this.precision = precision >= 0 ? precision : 0;
+  this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+  this.topic = topic;
+  this.node = node;
+  this.unit = unit === null ? '' : unit;
+  this.sensivity = sensivity > 0 ? sensivity : 5;
+  value = isNaN(value) ? this.min : value;
+
+  var input = new InputComponent(this);
+  var slider_left  = new SliderComponent(this, -1);
+  var slider_right = new SliderComponent(this,  1);
+
+  slider_left.className = 'ui-input-slider-left';
+  slider_right.className = 'ui-input-slider-right';
+
+  if (name) {
+   var info = document.createElement('span');
+   info.className = 'ui-input-slider-info';
+   info.textContent = name;
+   node.appendChild(info);
+  }
+
+  node.appendChild(slider_left);
+  node.appendChild(input);
+  node.appendChild(slider_right);
+
+  this.input = input;
+  sliders[topic] = this;
+  setValue(topic, value);
+ };
+
+ InputSlider.prototype.setInputValue = function setInputValue() {
+  this.input.value = this.value.toFixed(this.precision) + this.unit;
+ };
+
+ var setValue = function setValue(topic, value, send_notify) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  value = parseFloat(value.toFixed(slider.precision));
+
+  if (value > slider.max) value = slider.max;
+  if (value < slider.min) value = slider.min;
+
+  slider.value = value;
+  slider.node.setAttribute('data-value', value);
+
+  slider.setInputValue();
+
+  if (send_notify === false)
+   return;
+
+  notify.call(slider);
+ };
+
+ var setMax = function setMax(topic, value) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  slider.max = value;
+  setValue(topic, slider.value);
+ };
+
+ var setMin = function setMin(topic, value) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  slider.min = value;
+  setValue(topic, slider.value);
+ };
+
+ var setUnit = function setUnit(topic, unit) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  slider.unit = unit;
+  setValue(topic, slider.value);
+ };
+
+ var setStep = function setStep(topic, value) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  slider.step = parseFloat(value);
+  setValue(topic, slider.value);
+ };
+
+ var setPrecision = function setPrecision(topic, value) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  value = value | 0;
+  slider.precision = value;
+
+  var step = parseFloat(slider.step.toFixed(value));
+  if (step === 0)
+   slider.step = 1 / Math.pow(10, value);
+
+  setValue(topic, slider.value);
+ };
+
+ var setSensivity = function setSensivity(topic, value) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  value = value | 0;
+
+  slider.sensivity = value > 0 ? value : 5;
+ };
+
+ var getNode =  function getNode(topic) {
+  return sliders[topic].node;
+ };
+
+ var getPrecision =  function getPrecision(topic) {
+  return sliders[topic].precision;
+ };
+
+ var getStep =  function getStep(topic) {
+  return sliders[topic].step;
+ };
+
+ var subscribe = function subscribe(topic, callback) {
+  if (subscribers[topic] === undefined)
+   subscribers[topic] = [];
+  subscribers[topic].push(callback);
+ };
+
+ var unsubscribe = function unsubscribe(topic, callback) {
+  subscribers[topic].indexOf(callback);
+  subscribers[topic].splice(index, 1);
+ };
+
+ var notify = function notify() {
+  if (subscribers[this.topic] === undefined)
+   return;
+  for (var i = 0; i < subscribers[this.topic].length; i++)
+   subscribers[this.topic][i](this.value);
+ };
+
+ var createSlider = function createSlider(topic, label) {
+  var slider = document.createElement('div');
+  slider.className = 'ui-input-slider';
+  slider.setAttribute('data-topic', topic);
+
+  if (label !== undefined)
+   slider.setAttribute('data-info', label);
+
+  new InputSlider(slider);
+  return slider;
+ };
+
+ var init = function init() {
+  var elem = document.querySelectorAll('.ui-input-slider');
+  var size = elem.length;
+  for (var i = 0; i < size; i++)
+   new InputSlider(elem[i]);
+ };
+
+ return {
+  init : init,
+  setMax : setMax,
+  setMin : setMin,
+  setUnit : setUnit,
+  setStep : setStep,
+  getNode : getNode,
+  getStep : getStep,
+  setValue : setValue,
+  subscribe : subscribe,
+  unsubscribe : unsubscribe,
+  setPrecision : setPrecision,
+  setSensivity : setSensivity,
+  getPrecision : getPrecision,
+  createSlider : createSlider,
+ };
 
 })();
 
@@ -1598,176 +1598,176 @@ var InputSliderManager = (function InputSliderManager() {
 
 var DropDownManager = (function DropdownManager() {
 
-	var subscribers = {};
-	var dropdowns = [];
-	var active = null;
+ var subscribers = {};
+ var dropdowns = [];
+ var active = null;
 
-	var visbility = ["hidden", "visible"];
+ var visbility = ["hidden", "visible"];
 
 
-	var DropDown = function DropDown(node) {
-		var topic = node.getAttribute('data-topic');
-		var label = node.getAttribute('data-label');
-		var selected = node.getAttribute('data-selected') | 0;
+ var DropDown = function DropDown(node) {
+  var topic = node.getAttribute('data-topic');
+  var label = node.getAttribute('data-label');
+  var selected = node.getAttribute('data-selected') | 0;
 
-		var select = document.createElement('div');
-		var list = document.createElement('div');
-		var uval = 0;
-		var option = null;
-		var option_value = null;
+  var select = document.createElement('div');
+  var list = document.createElement('div');
+  var uval = 0;
+  var option = null;
+  var option_value = null;
 
-		list.className = 'ui-dropdown-list';
-		select.className = 'ui-dropdown-select';
+  list.className = 'ui-dropdown-list';
+  select.className = 'ui-dropdown-select';
 
-		while (node.firstElementChild !== null) {
-			option = node.firstElementChild;
-			option_value = option.getAttribute('data-value');
+  while (node.firstElementChild !== null) {
+   option = node.firstElementChild;
+   option_value = option.getAttribute('data-value');
 
-			if (option_value === null)
-				option.setAttribute('data-value', uval);
+   if (option_value === null)
+    option.setAttribute('data-value', uval);
 
-			list.appendChild(node.firstElementChild);
-			uval++;
-		}
+   list.appendChild(node.firstElementChild);
+   uval++;
+  }
 
-		node.appendChild(select);
-		node.appendChild(list);
+  node.appendChild(select);
+  node.appendChild(list);
 
-		select.onclick = this.toggle.bind(this);
-		list.onclick = this.updateValue.bind(this);
-		document.addEventListener('click', clickOut);
+  select.onclick = this.toggle.bind(this);
+  list.onclick = this.updateValue.bind(this);
+  document.addEventListener('click', clickOut);
 
-		this.state = 0;
-		this.time = 0;
-		this.dropmenu = list;
-		this.select = select;
-		this.toggle(false);
-		this.value = {};
-		this.topic = topic;
+  this.state = 0;
+  this.time = 0;
+  this.dropmenu = list;
+  this.select = select;
+  this.toggle(false);
+  this.value = {};
+  this.topic = topic;
 
-		if (label)
-			select.textContent = label;
-		else
-			this.setNodeValue(list.children[selected]);
+  if (label)
+   select.textContent = label;
+  else
+   this.setNodeValue(list.children[selected]);
 
-		dropdowns[topic] = this;
+  dropdowns[topic] = this;
 
-	};
+ };
 
-	DropDown.prototype.toggle = function toggle(state) {
-		if (typeof(state) === 'boolean')
-			this.state = state === false ? 0 : 1;
-		else
-			this.state = 1 ^ this.state;
+ DropDown.prototype.toggle = function toggle(state) {
+  if (typeof(state) === 'boolean')
+   this.state = state === false ? 0 : 1;
+  else
+   this.state = 1 ^ this.state;
 
-		if (active !== this) {
-			if (active)
-				active.toggle(false);
-			active = this;
-		}
+  if (active !== this) {
+   if (active)
+    active.toggle(false);
+   active = this;
+  }
 
-		if (this.state === 0)
-			this.dropmenu.setAttribute('data-hidden', 'true');
-		else
-			this.dropmenu.removeAttribute('data-hidden');
+  if (this.state === 0)
+   this.dropmenu.setAttribute('data-hidden', 'true');
+  else
+   this.dropmenu.removeAttribute('data-hidden');
 
-	};
+ };
 
-	var clickOut = function clickOut(e) {
-		if (active.state === 0 ||
-			e.target === active.dropmenu ||
-			e.target === active.select)
-			return;
+ var clickOut = function clickOut(e) {
+  if (active.state === 0 ||
+   e.target === active.dropmenu ||
+   e.target === active.select)
+   return;
 
-		active.toggle(false);
-	};
+  active.toggle(false);
+ };
 
-	DropDown.prototype.updateValue = function updateValue(e) {
+ DropDown.prototype.updateValue = function updateValue(e) {
 
-		if (Date.now() - this.time < 500)
-			return;
+  if (Date.now() - this.time < 500)
+   return;
 
-		if (e.target.className !== "ui-dropdown-list") {
-			this.setNodeValue(e.target);
-			this.toggle(false);
-		}
+  if (e.target.className !== "ui-dropdown-list") {
+   this.setNodeValue(e.target);
+   this.toggle(false);
+  }
 
-		this.time = Date.now();
-	};
+  this.time = Date.now();
+ };
 
-	DropDown.prototype.setNodeValue = function setNodeValue(node) {
-		this.value['name'] = node.textContent;
-		this.value['value'] = node.getAttribute('data-value');
+ DropDown.prototype.setNodeValue = function setNodeValue(node) {
+  this.value['name'] = node.textContent;
+  this.value['value'] = node.getAttribute('data-value');
 
-		this.select.textContent = node.textContent;
-		this.select.setAttribute('data-value', this.value['value']);
+  this.select.textContent = node.textContent;
+  this.select.setAttribute('data-value', this.value['value']);
 
-		notify.call(this);
-	};
+  notify.call(this);
+ };
 
-	var createDropDown = function createDropDown(topic, options) {
+ var createDropDown = function createDropDown(topic, options) {
 
-		var dropdown = document.createElement('div');
-		dropdown.setAttribute('data-topic', topic);
-		dropdown.className = 'ui-dropdown';
+  var dropdown = document.createElement('div');
+  dropdown.setAttribute('data-topic', topic);
+  dropdown.className = 'ui-dropdown';
 
-		for (var i in options) {
-			var x = document.createElement('div');
-			x.setAttribute('data-value', i);
-			x.textContent = options[i];
-			dropdown.appendChild(x);
-		}
+  for (var i in options) {
+   var x = document.createElement('div');
+   x.setAttribute('data-value', i);
+   x.textContent = options[i];
+   dropdown.appendChild(x);
+  }
 
-		new DropDown(dropdown);
+  new DropDown(dropdown);
 
-		return dropdown;
-	};
+  return dropdown;
+ };
 
-	var setValue = function setValue(topic, index) {
-		if (dropdowns[topic] === undefined ||
-			index >= dropdowns[topic].dropmenu.children.length)
-			return;
+ var setValue = function setValue(topic, index) {
+  if (dropdowns[topic] === undefined ||
+   index >= dropdowns[topic].dropmenu.children.length)
+   return;
 
-		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
-	};
+  dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+ };
 
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
+ var subscribe = function subscribe(topic, callback) {
+  if (subscribers[topic] === undefined)
+   subscribers[topic] = [];
+  subscribers[topic].push(callback);
+ };
 
-	var unsubscribe = function unsubscribe(topic, callback) {
-		var index = subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
+ var unsubscribe = function unsubscribe(topic, callback) {
+  var index = subscribers[topic].indexOf(callback);
+  subscribers[topic].splice(index, 1);
+ };
 
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
+ var notify = function notify() {
+  if (subscribers[this.topic] === undefined)
+   return;
 
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	};
+  for (var i in subscribers[this.topic]) {
+   subscribers[this.topic][i](this.value);
+  }
+ };
 
-	var init = function init() {
-		var elem, size;
+ var init = function init() {
+  var elem, size;
 
-		elem = document.querySelectorAll('.ui-dropdown');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			new DropDown(elem[i]);
+  elem = document.querySelectorAll('.ui-dropdown');
+  size = elem.length;
+  for (var i = 0; i < size; i++)
+   new DropDown(elem[i]);
 
-	};
+ };
 
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		createDropDown : createDropDown
-	};
+ return {
+  init : init,
+  setValue : setValue,
+  subscribe : subscribe,
+  unsubscribe : unsubscribe,
+  createDropDown : createDropDown
+ };
 
 })();
 
@@ -1778,953 +1778,953 @@ var DropDownManager = (function DropdownManager() {
 
 var ButtonManager = (function CheckBoxManager() {
 
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	};
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	};
-
-	var setValue = function setValue(topic, value) {
-		var obj = buttons[topic];
-		if (obj === undefined)
-			return;
-
-		obj.checkbox.checked = value;
-		notify.call(obj);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	};
+ var subscribers = [];
+ var buttons = [];
+
+ var CheckBox = function CheckBox(node) {
+  var topic = node.getAttribute('data-topic');
+  var state = node.getAttribute('data-state');
+  var name = node.getAttribute('data-label');
+  var align = node.getAttribute('data-text-on');
+
+  state = (state === "true");
+
+  var checkbox = document.createElement("input");
+  var label = document.createElement("label");
+
+  var id = 'checkbox-' + topic;
+  checkbox.id = id;
+  checkbox.setAttribute('type', 'checkbox');
+  checkbox.checked = state;
+
+  label.setAttribute('for', id);
+  if (name) {
+   label.className = 'text';
+   if (align)
+    label.className += ' ' + align;
+   label.textContent = name;
+  }
+
+  node.appendChild(checkbox);
+  node.appendChild(label);
+
+  this.node = node;
+  this.topic = topic;
+  this.checkbox = checkbox;
+
+  checkbox.addEventListener('change', function(e) {
+   notify.call(this);
+  }.bind(this));
+
+  buttons[topic] = this;
+ };
+
+ var getNode =  function getNode(topic) {
+  return buttons[topic].node;
+ };
+
+ var setValue = function setValue(topic, value) {
+  var obj = buttons[topic];
+  if (obj === undefined)
+   return;
+
+  obj.checkbox.checked = value;
+  notify.call(obj);
+ };
+
+ var subscribe = function subscribe(topic, callback) {
+  if (subscribers[topic] === undefined)
+   subscribers[topic] = [];
+
+  subscribers[topic].push(callback);
+ };
+
+ var unsubscribe = function unsubscribe(topic, callback) {
+  subscribers[topic].indexOf(callback);
+  subscribers[topic].splice(index, 1);
+ };
+
+ var notify = function notify() {
+  if (subscribers[this.topic] === undefined)
+   return;
+  for (var i = 0; i < subscribers[this.topic].length; i++)
+   subscribers[this.topic][i](this.checkbox.checked);
+ };
+
+ var init = function init() {
+  var elem = document.querySelectorAll('.ui-checkbox');
+  var size = elem.length;
+  for (var i = 0; i < size; i++)
+   new CheckBox(elem[i]);
+ };
+
+ return {
+  init : init,
+  setValue : setValue,
+  subscribe : subscribe,
+  unsubscribe : unsubscribe
+ };
 
 })();
 
 window.addEventListener("load", function() {
-	BorderImage.init();
+ BorderImage.init();
 });
 
 var BorderImage = (function BorderImage() {
 
-	var getElemById = document.getElementById.bind(document);
+ var getElemById = document.getElementById.bind(document);
 
-	var subject;
-	var preview;
-	var guidelines = [];
-	var positions = ['top', 'right', 'bottom', 'left'];
+ var subject;
+ var preview;
+ var guidelines = [];
+ var positions = ['top', 'right', 'bottom', 'left'];
 
-	var makeDraggable = function makeDraggable(elem) {
+ var makeDraggable = function makeDraggable(elem) {
 
-		var offsetTop;
-		var offsetLeft;
+  var offsetTop;
+  var offsetLeft;
 
-		elem.setAttribute('data-draggable', 'true');
+  elem.setAttribute('data-draggable', 'true');
 
-		var dragStart = function dragStart(e) {
-			if (e.target.getAttribute('data-draggable') !== 'true' ||
-				e.target !== elem || e.button !== 0)
-				return;
+  var dragStart = function dragStart(e) {
+   if (e.target.getAttribute('data-draggable') !== 'true' ||
+    e.target !== elem || e.button !== 0)
+    return;
 
-			offsetLeft = e.clientX - elem.offsetLeft;
-			offsetTop = e.clientY - elem.offsetTop;
+   offsetLeft = e.clientX - elem.offsetLeft;
+   offsetTop = e.clientY - elem.offsetTop;
 
-			document.addEventListener('mousemove', mouseDrag);
-			document.addEventListener('mouseup', dragEnd);
-		};
+   document.addEventListener('mousemove', mouseDrag);
+   document.addEventListener('mouseup', dragEnd);
+  };
 
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
+  var dragEnd = function dragEnd(e) {
+   if (e.button !== 0)
+    return;
 
-			document.removeEventListener('mousemove', mouseDrag);
-			document.removeEventListener('mouseup', dragEnd);
-		};
+   document.removeEventListener('mousemove', mouseDrag);
+   document.removeEventListener('mouseup', dragEnd);
+  };
 
-		var mouseDrag = function mouseDrag(e) {
+  var mouseDrag = function mouseDrag(e) {
 
-			elem.style.left = e.clientX - offsetLeft + 'px';
-			elem.style.top = e.clientY - offsetTop + 'px';
-		};
+   elem.style.left = e.clientX - offsetLeft + 'px';
+   elem.style.top = e.clientY - offsetTop + 'px';
+  };
 
-		elem.addEventListener('mousedown', dragStart, false);
-	};
+  elem.addEventListener('mousedown', dragStart, false);
+ };
 
-	var PreviewControl = function PreviewControl() {
+ var PreviewControl = function PreviewControl() {
 
-		var dragging = false;
-		var valueX = null;
-		var valueY = null;
+  var dragging = false;
+  var valueX = null;
+  var valueY = null;
 
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
+  var dragStart = function dragStart(e) {
+   if (e.button !== 0)
+    return;
 
-			valueX = e.clientX - preview.clientWidth;
-			valueY = e.clientY - preview.clientHeight;
-			dragging = true;
+   valueX = e.clientX - preview.clientWidth;
+   valueY = e.clientY - preview.clientHeight;
+   dragging = true;
 
-			document.addEventListener('mousemove', mouseDrag);
-		};
+   document.addEventListener('mousemove', mouseDrag);
+  };
 
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0 || dragging === false)
-				return;
+  var dragEnd = function dragEnd(e) {
+   if (e.button !== 0 || dragging === false)
+    return;
 
-			document.removeEventListener('mousemove', mouseDrag);
-			dragging = false;
-		};
+   document.removeEventListener('mousemove', mouseDrag);
+   dragging = false;
+  };
 
-		var mouseDrag = function mouseDrag(e) {
-			InputSliderManager.setValue('preview-width', e.clientX - valueX);
-			InputSliderManager.setValue('preview-height', e.clientY - valueY);
-		};
+  var mouseDrag = function mouseDrag(e) {
+   InputSliderManager.setValue('preview-width', e.clientX - valueX);
+   InputSliderManager.setValue('preview-height', e.clientY - valueY);
+  };
 
-		var init = function init() {
+  var init = function init() {
 
-			makeDraggable(preview);
-			makeDraggable(subject);
+   makeDraggable(preview);
+   makeDraggable(subject);
 
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
+   var handle = document.createElement('div');
+   handle.className = 'resize-handle';
 
-			handle.addEventListener('mousedown', dragStart);
-			document.addEventListener('mouseup', dragEnd);
+   handle.addEventListener('mousedown', dragStart);
+   document.addEventListener('mouseup', dragEnd);
 
-			preview.appendChild(handle);
+   preview.appendChild(handle);
 
-		};
+  };
 
-		return {
-			init: init
-		};
+  return {
+   init: init
+  };
 
-	}();
+ }();
 
-	var ImageReader = (function ImageReader() {
+ var ImageReader = (function ImageReader() {
 
-		var fReader = new FileReader();
-		var browse = document.createElement('input');
+  var fReader = new FileReader();
+  var browse = document.createElement('input');
 
-		var loadImage = function loadImage(e) {
-			if (browse.files.length === 0)
-				return;
+  var loadImage = function loadImage(e) {
+   if (browse.files.length === 0)
+    return;
 
-			var file = browse.files[0];
+   var file = browse.files[0];
 
-			if (file.type.slice(0, 5) !== 'image')
-				return;
+   if (file.type.slice(0, 5) !== 'image')
+    return;
 
-			fReader.readAsDataURL(file);
+   fReader.readAsDataURL(file);
 
-			return false;
-		};
+   return false;
+  };
 
-		fReader.onload = function(e) {
-			ImageControl.loadRemoteImage(e.target.result);
-		};
+  fReader.onload = function(e) {
+   ImageControl.loadRemoteImage(e.target.result);
+  };
 
-		var load = function load() {
-			browse.click();
-		};
+  var load = function load() {
+   browse.click();
+  };
 
-		browse.setAttribute('type', 'file');
-		browse.style.display = 'none';
-		browse.onchange = loadImage;
+  browse.setAttribute('type', 'file');
+  browse.style.display = 'none';
+  browse.onchange = loadImage;
 
-		return {
-			load: load
-		};
+  return {
+   load: load
+  };
 
-	})();
+ })();
 
-	var ImageControl = (function ImageControl() {
+ var ImageControl = (function ImageControl() {
 
-		var scale = 0.5;
-		var imgSource = new Image();
-		var imgState = null;
-		var selected = null;
+  var scale = 0.5;
+  var imgSource = new Image();
+  var imgState = null;
+  var selected = null;
 
 
-		var topics = ['slice', 'width', 'outset'];
-		var properties = {};
-		properties['border1'] = {
-			fill			: false,
+  var topics = ['slice', 'width', 'outset'];
+  var properties = {};
+  properties['border1'] = {
+   fill   : false,
 
-			slice_values	: [27, 27, 27, 27],
-			width_values	: [20, 20, 20, 20],
-			outset_values	: [0, 0, 0, 0],
+   slice_values : [27, 27, 27, 27],
+   width_values : [20, 20, 20, 20],
+   outset_values : [0, 0, 0, 0],
 
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
+   slice_units  : [0, 0, 0, 0],
+   width_units  : [0, 0, 0, 0],
+   outset_units : [0, 0, 0, 0],
 
-			repeat			: [1, 1],
-			size			: [300, 200],
-			preview_area	: 400
-		};
+   repeat   : [1, 1],
+   size   : [300, 200],
+   preview_area : 400
+  };
 
-		properties['border2'] = {
-			fill			: false,
+  properties['border2'] = {
+   fill   : false,
 
-			slice_values	: [33, 33, 33, 33],
-			width_values	: [1.5, 1.5, 1.5, 1.5],
-			outset_values	: [0, 0, 0, 0],
+   slice_values : [33, 33, 33, 33],
+   width_values : [1.5, 1.5, 1.5, 1.5],
+   outset_values : [0, 0, 0, 0],
 
-			slice_units		: [1, 1, 1, 1],
-			width_units		: [2, 2, 2, 2],
-			outset_units	: [0, 0, 0, 0],
+   slice_units  : [1, 1, 1, 1],
+   width_units  : [2, 2, 2, 2],
+   outset_units : [0, 0, 0, 0],
 
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
+   repeat   : [2, 2],
+   size   : [300, 200],
+   preview_area : 400
+  };
 
-		properties['border3'] = {
-			fill			: true,
+  properties['border3'] = {
+   fill   : true,
 
-			slice_values	: [15, 15, 15, 15],
-			width_values	: [10, 10, 10, 10],
-			outset_values	: [0, 0, 0, 0],
+   slice_values : [15, 15, 15, 15],
+   width_values : [10, 10, 10, 10],
+   outset_values : [0, 0, 0, 0],
 
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
+   slice_units  : [0, 0, 0, 0],
+   width_units  : [0, 0, 0, 0],
+   outset_units : [0, 0, 0, 0],
 
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border4'] = {
-			fill			: false,
+   repeat   : [2, 2],
+   size   : [300, 200],
+   preview_area : 400
+  };
+
+  properties['border4'] = {
+   fill   : false,
 
-			slice_values	: [13, 13, 13, 13],
-			width_values	: [13, 13, 13, 13],
-			outset_values	: [13, 13, 13, 13],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border5'] = {
-			fill			: false,
-
-			slice_values	: [0, 12, 0, 12],
-			width_values	: [0, 12, 0, 12],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400,
-		};
-
-		properties['border6'] = {
-			fill			: false,
-
-			slice_values	: [42, 42, 42, 42],
-			width_values	: [42, 42, 42, 42],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [350, 350],
-			preview_area	: 500,
-		};
-
-
-		var loadLocalImage = function loadLocalImage(source) {
-			var location = "images/" + source;
-			imgSource.src = location;
-		};
-
-		var loadRemoteImage = function loadRemoteImage(source) {
-			imgSource.src = source;
-			if (selected)
-				selected.removeAttribute('selected');
-			Tool.setOutputCSS('source', 'url("' + source + '")');
-		};
-
-		var pickImage = function pickImage(e) {
-			if (e.target.className === 'image') {
-				selected = e.target;
-				selected.setAttribute('selected', 'true');
-				loadRemoteImage(e.target.src);
-				imgState = e.target.getAttribute('data-stateID');
-			}
-		};
-
-		var loadImageState = function loadImageState(stateID) {
-			if (properties[stateID] === undefined)
-				return;
-
-			var prop = properties[stateID];
-			var topic;
-			var unit_array;
-			var value_array;
-
-			for (var i in topics) {
-				for (var j=0; j<4; j++) {
-					topic = topics[i] + '-' + positions[j];
-					unit_array = topics[i] + '_units';
-					value_array = topics[i] + '_values';
-					InputSliderManager.setValue(topic, prop[value_array][j]);
-					DropDownManager.setValue(topic, prop[unit_array][j]);
-				}
-			}
-
-			ButtonManager.setValue('slice-fill', prop['fill']);
-			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-			InputSliderManager.setValue('preview-width', prop['size'][0]);
-			InputSliderManager.setValue('preview-height', prop['size'][1]);
-			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-		};
-
-		var update = function update() {
-			scale =  Math.min(300, (30000 / this.width) | 0);
-			setScale(scale);
-			InputSliderManager.setValue('scale', scale, false);
-
-			subject.style.backgroundImage = 'url("' + this.src + '")';
-			preview.style.borderImageSource = 'url("' + this.src + '")';
-
-			guidelines['slice-top'].setMax(this.height);
-			guidelines['slice-right'].setMax(this.width);
-			guidelines['slice-bottom'].setMax(this.height);
-			guidelines['slice-left'].setMax(this.width);
-
-			if (imgState)
-				loadImageState(imgState);
-		};
-
-		var setScale = function setScale(value) {
-			scale = value;
-			var w = imgSource.width * scale / 100 | 0;
-			var h = imgSource.height * scale / 100 | 0;
-			subject.style.width = w + 'px';
-			subject.style.height = h + 'px';
-
-			for (var i = 0; i < positions.length; i++)
-				guidelines['slice-' + positions[i]].updateGuidelinePos();
-		};
-
-		var getScale = function getScale() {
-			return scale/100;
-		};
-
-		var toggleGallery = function toggleGallery() {
-			var gallery = getElemById('image-gallery');
-			var button  = getElemById('toggle-gallery');
-			var state = 1;
-			button.addEventListener('click', function() {
-				state = 1 ^ state;
-				if (state === 0) {
-					gallery.setAttribute('data-collapsed', 'true');
-					button.setAttribute('data-action', 'show');
-				}
-				else {
-					gallery.removeAttribute('data-collapsed');
-					button.setAttribute('data-action', 'hide');
-				}
-			});
-		};
-
-		var init = function init() {
-			var gallery = getElemById('image-gallery');
-			var browse = getElemById('load-image');
-			var remote = getElemById('remote-url');
-			var load_remote = getElemById('load-remote');
-
-			remote.addEventListener('change', function(){
-				loadRemoteImage(this.value);
-			});
-
-			load_remote.addEventListener('click', function(){
-				loadRemoteImage(remote.value);
-			});
-
-			browse.addEventListener('click', ImageReader.load);
-			gallery.addEventListener('click', pickImage);
-			imgSource.addEventListener('load', update);
-
-			InputSliderManager.subscribe('scale', setScale);
-			InputSliderManager.setValue('scale', scale);
-			imgState = 'border1';
-			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-			toggleGallery();
-		};
-
-		return {
-			init: init,
-			getScale : getScale,
-			loadRemoteImage: loadRemoteImage
-		};
-
-	})();
-
-	var GuideLine = function GuideLine(node) {
-		var topic = node.getAttribute('data-topic');
-		var axis = node.getAttribute('data-axis');
-
-		this.node = node;
-		this.topic = topic;
-		this.axis = axis;
-		this.info = topic.split('-')[1];
-
-		this.position = 0;
-		this.value = 0;
-		this.unit = 0;
-		this.max = 0;
-		this.pos = positions.indexOf(this.info);
-
-		guidelines[topic] = this;
-
-		var relative_container = document.createElement('div');
-		var tooltip = document.createElement('div');
-		var tooltip2 = document.createElement('div');
-
-		tooltip.className = 'tooltip';
-		tooltip.setAttribute('data-info', this.info);
-
-		tooltip2.className = 'tooltip2';
-		tooltip2.textContent = this.info;
-		tooltip2.setAttribute('data-info', this.info);
-
-		this.tooltip = tooltip;
-
-		relative_container.appendChild(tooltip);
-		relative_container.appendChild(tooltip2);
-		node.appendChild(relative_container);
-
-		var startX = 0;
-		var startY = 0;
-		var start = 0;
-
-		var startDrag = function startDrag(e) {
-			startX = e.clientX;
-			startY = e.clientY;
-			start = guidelines[topic].position;
-			document.body.setAttribute('data-move', axis);
-			relative_container.setAttribute('data-active', '');
-			node.setAttribute('data-active', '');
-
-			document.addEventListener('mousemove', updateGuideline);
-			document.addEventListener('mouseup', endDrag);
-		};
-
-		var endDrag = function endDrag() {
-			document.body.removeAttribute('data-move');
-			relative_container.removeAttribute('data-active');
-			node.removeAttribute('data-active');
-
-			document.removeEventListener('mousemove', updateGuideline);
-		};
-
-		var updateGuideline = function updateGuideline(e) {
-			var value;
-			if (topic === 'slice-top')
-				value = e.clientY - startY + start;
-
-			if (topic === 'slice-right')
-				value = startX - e.clientX + start;
-
-			if (topic === 'slice-bottom')
-				value = startY - e.clientY + start;
-
-			if (topic === 'slice-left')
-				value = e.clientX - startX + start;
-
-			if (this.unit === 0)
-				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-			else {
-				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-			}
-
-		}.bind(this);
-
-		node.addEventListener("mousedown", startDrag);
-
-		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-		InputSliderManager.setValue(topic, this.position);
-	};
-
-
-	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-		if (this.unit === 0)
-			this.position = this.value * ImageControl.getScale() | 0;
-		else
-			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-		this.node.style[this.info] = this.position + 'px';
-	};
-
-	GuideLine.prototype.setPosition = function setPosition(value) {
-		this.value = value;
-		this.tooltip.textContent = value;
-		this.updateGuidelinePos();
-		Tool.setBorderSlice(this.pos, value);
-	};
-
-	GuideLine.prototype.setMax = function setMax(max) {
-		this.max = max;
-		this.updateLimit();
-	};
-
-	GuideLine.prototype.updateLimit = function updateLimit() {
-		if (this.unit === 1)
-			InputSliderManager.setMax(this.topic, 100);
-		else
-			InputSliderManager.setMax(this.topic, this.max);
-	};
-
-	GuideLine.prototype.setUnit = function setUnit(type) {
-		if (type === '%')	this.unit = 1;
-		if (type === '')	this.unit = 0;
-		this.updateLimit();
-	};
-
-	/*
-	 * Unit panel
-	 */
-	var UnitPanel = (function UnitPanel () {
-
-		var panel;
-		var title;
-		var precision;
-		var step;
-		var unit_topic = null; // settings are made for this topic
-		var step_option = [1, 0.1, 0.01];
-
-		var updatePrecision = function updatePrecision(value) {
-			InputSliderManager.setPrecision('unit-step', value);
-			InputSliderManager.setStep('unit-step', step_option[value]);
-			InputSliderManager.setMin('unit-step', step_option[value]);
-
-			if (unit_topic)
-				InputSliderManager.setPrecision(unit_topic, value);
-		};
-
-		var updateUnitSettings = function updateUnitSettings(value) {
-			if (unit_topic)
-				InputSliderManager.setStep(unit_topic, value);
-		};
-
-		var show = function show(e) {
-			var topic = e.target.getAttribute('data-topic');
-			var precision = InputSliderManager.getPrecision(topic);
-			var step = InputSliderManager.getStep(topic);
-
-			unit_topic = topic;
-			title.textContent = topic;
-
-			panel.setAttribute('data-active', 'true');
-			panel.style.top = e.target.offsetTop - 40 + 'px';
-			panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-			InputSliderManager.setValue('unit-precision', precision);
-			InputSliderManager.setValue('unit-step', step);
-		};
-
-		var init = function init() {
-			panel = document.createElement('div');
-			title = document.createElement('div');
-			var close = document.createElement('div');
-
-			step = InputSliderManager.createSlider('unit-step', 'step');
-			precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-			InputSliderManager.setStep('unit-precision', 1);
-			InputSliderManager.setMax('unit-precision', 2);
-			InputSliderManager.setValue('unit-precision', 2);
-			InputSliderManager.setSensivity('unit-precision', 20);
-
-			InputSliderManager.setValue('unit-step', 1);
-			InputSliderManager.setStep('unit-step', 0.01);
-			InputSliderManager.setPrecision('unit-step', 2);
-
-			InputSliderManager.subscribe('unit-precision', updatePrecision);
-			InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-			close.addEventListener('click', function () {
-				panel.setAttribute('data-active', 'false');
-			});
-
-			title.textContent = 'Properties';
-			title.className = 'title';
-			close.className = 'close';
-			panel.id = 'unit-settings';
-			panel.setAttribute('data-active', 'false');
-			panel.appendChild(title);
-			panel.appendChild(precision);
-			panel.appendChild(step);
-			panel.appendChild(close);
-			document.body.appendChild(panel);
-		};
-
-		return {
-			init : init,
-			show : show
-		};
-
-	})();
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview_area;
-		var dropdown_unit_options = [
-			{ '' : '--', '%' : '%'},
-			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
-			{ 'px' : 'px', 'em' : 'em'},
-		];
-
-		var border_slice = [];
-		var border_width = [];
-		var border_outset = [];
-
-		var border_slice_values = [];
-		var border_width_values = [];
-		var border_outset_values = [];
-
-		var border_slice_units = ['', '', '', ''];
-		var border_width_units = ['px', 'px', 'px', 'px'];
-		var border_outset_units = ['px', 'px', 'px', 'px'];
-
-		var border_fill = false;
-		var border_repeat = ['round', 'round'];
-		var CSS_code = {
-			'source' : null,
-			'slice' : null,
-			'width' : null,
-			'outset' : null,
-			'repeat' : null
-		};
-
-		var setBorderSlice = function setBorderSlice(positionID, value) {
-			border_slice[positionID] = value + border_slice_units[positionID];
-			updateBorderSlice();
-		};
-
-		var updateBorderSlice = function updateBorderSlice() {
-			var value = border_slice.join(' ');
-			if (border_fill === true)
-				value += ' fill';
-
-			preview.style.borderImageSlice = value;
-			setOutputCSS('slice', value);
-		};
-
-		var setBorderFill = function setBorderFill(value) {
-			border_fill = value;
-			var bimgslice = border_slice.join(' ');;
-			if (value === true)
-				bimgslice += ' fill';
-
-			preview.style.borderImageSlice = bimgslice;
-		};
-
-		var updateBorderWidth = function updateBorderWidth() {
-			var value = border_width.join(' ');
-			preview.style.borderImageWidth = value;
-			setOutputCSS('width', value);
-		};
-
-		var updateBorderOutset = function updateBorderOutset() {
-			var value = border_outset.join(' ');
-			preview.style.borderImageOutset = border_outset.join(' ');
-			setOutputCSS('outset', value);
-		};
-
-		var setBorderRepeat = function setBorderRepeat(obj) {
-			border_repeat[obj.value] = obj.name;
-			var value = border_repeat.join(' ');
-			preview.style.borderImageRepeat = value;
-			setOutputCSS('repeat', value);
-		};
-
-		var setOutputCSS = function setOutputCSS(topic, value) {
-			CSS_code[topic].textContent = value + ';';
-		};
-
-		var setPreviewFontSize = function setPreviewFontSize(value) {
-			preview.style.fontSize = value + 'px';
-		};
-
-		var setPreviewWidth = function setPreviewWidth(value) {
-			preview.style.width = value + 'px';
-		};
-
-		var setPreviewHeight = function setPreviewHeight(value) {
-			preview.style.height = value + 'px';
-		};
-
-		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-			preview_area.style.height = value + 'px';
-		};
-
-		var updateDragOption = function updateDragOption(value) {
-			if (value === true)
-				subject.setAttribute('data-draggable', 'true');
-			else
-				subject.removeAttribute('data-draggable');
-		};
-
-		var createProperty = function createProperty(topic, labelID, optionsID) {
-
-			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-			InputSliderManager.setSensivity(topic, 3);
-			InputSliderManager.setPrecision(topic, 1);
-
-			var property = document.createElement('div');
-			var config = document.createElement('div');
-
-			property.className = 'property';
-			config.className = 'config';
-			config.setAttribute('data-topic', topic);
-			config.addEventListener('click', UnitPanel.show);
-
-			property.appendChild(slider);
-			property.appendChild(dropdown);
-			property.appendChild(config);
-
-			return property;
-		};
-
-		var initBorderSliceControls = function initBorderSliceControls() {
-			var container = getElemById('border-slice-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_slice_values[id] = value;
-					border_slice[id] = value + border_slice_units[id];
-					updateBorderSlice();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					guidelines[topic].setUnit(obj.value);
-					border_slice_units[id] = obj.value;
-					border_slice[id] = border_slice_values[id] + obj.value;
-					updateBorderSlice();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'slice-' + positions[i];
-				var property = createProperty(topic, i, 0);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-
-			container.appendChild(container.children[1]);
-
-		};
-
-		var initBorderWidthControls = function initBorderWidthControls() {
-			var container = getElemById('border-width-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_width_values[id] = value;
-					border_width[id] = value + border_width_units[id];
-					updateBorderWidth();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					if (obj.value === '%')
-						InputSliderManager.setMax(topic, 100);
-					else
-						InputSliderManager.setMax(topic, 1000);
-
-					border_width_units[id] = obj.value;
-					border_width[id] = border_width_values[id] + obj.value;
-					updateBorderWidth();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'width-' + positions[i];
-				var property = createProperty(topic, i, 1);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var initBorderOutsetControls = function initBorderOutsetControls() {
-
-			var container = getElemById('border-outset-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_outset_values[id] = value;
-					border_outset[id] = value + border_outset_units[id];
-					updateBorderOutset();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					border_outset_units[id] = obj.value;
-					border_outset[id] = border_outset_values[id] + obj.value;
-					updateBorderOutset();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'outset-' + positions[i];
-				var property = createProperty(topic, i, 2);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var init = function init() {
-
-			var gallery =
-			subject = getElemById('subject');
-			preview = getElemById("preview");
-			preview_area = getElemById("preview_section");
-
-
-			CSS_code['source'] = getElemById("out-border-source");
-			CSS_code['slice'] = getElemById("out-border-slice");
-			CSS_code['width'] = getElemById("out-border-width");
-			CSS_code['outset'] = getElemById("out-border-outset");
-			CSS_code['repeat'] = getElemById("out-border-repeat");
-
-			initBorderSliceControls();
-			initBorderWidthControls();
-			initBorderOutsetControls();
-
-			var elem = document.querySelectorAll('.guideline');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				new GuideLine(elem[i]);
-
-			PreviewControl.init();
-
-			ButtonManager.subscribe('slice-fill',setBorderFill);
-			ButtonManager.subscribe('drag-subject', updateDragOption);
-			ButtonManager.setValue('drag-subject', false);
-
-			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-			InputSliderManager.subscribe('preview-width', setPreviewWidth);
-			InputSliderManager.subscribe('preview-height', setPreviewHeight);
-			InputSliderManager.subscribe('font-size', setPreviewFontSize);
-			InputSliderManager.setValue('preview-width', 300);
-			InputSliderManager.setValue('preview-height', 200);
-		};
-
-		return {
-			init: init,
-			setOutputCSS: setOutputCSS,
-			setBorderSlice: setBorderSlice
-		};
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		InputSliderManager.init();
-		DropDownManager.init();
-		ButtonManager.init();
-		UnitPanel.init();
-		Tool.init();
-		ImageControl.init();
-	};
-
-	return {
-		init : init
-	};
+   slice_values : [13, 13, 13, 13],
+   width_values : [13, 13, 13, 13],
+   outset_values : [13, 13, 13, 13],
+
+   slice_units  : [0, 0, 0, 0],
+   width_units  : [0, 0, 0, 0],
+   outset_units : [0, 0, 0, 0],
+
+   repeat   : [0, 0],
+   size   : [300, 200],
+   preview_area : 400
+  };
+
+  properties['border5'] = {
+   fill   : false,
+
+   slice_values : [0, 12, 0, 12],
+   width_values : [0, 12, 0, 12],
+   outset_values : [0, 0, 0, 0],
+
+   slice_units  : [0, 0, 0, 0],
+   width_units  : [0, 0, 0, 0],
+   outset_units : [0, 0, 0, 0],
+
+   repeat   : [0, 0],
+   size   : [300, 200],
+   preview_area : 400,
+  };
+
+  properties['border6'] = {
+   fill   : false,
+
+   slice_values : [42, 42, 42, 42],
+   width_values : [42, 42, 42, 42],
+   outset_values : [0, 0, 0, 0],
+
+   slice_units  : [0, 0, 0, 0],
+   width_units  : [0, 0, 0, 0],
+   outset_units : [0, 0, 0, 0],
+
+   repeat   : [2, 2],
+   size   : [350, 350],
+   preview_area : 500,
+  };
+
+
+  var loadLocalImage = function loadLocalImage(source) {
+   var location = "images/" + source;
+   imgSource.src = location;
+  };
+
+  var loadRemoteImage = function loadRemoteImage(source) {
+   imgSource.src = source;
+   if (selected)
+    selected.removeAttribute('selected');
+   Tool.setOutputCSS('source', 'url("' + source + '")');
+  };
+
+  var pickImage = function pickImage(e) {
+   if (e.target.className === 'image') {
+    selected = e.target;
+    selected.setAttribute('selected', 'true');
+    loadRemoteImage(e.target.src);
+    imgState = e.target.getAttribute('data-stateID');
+   }
+  };
+
+  var loadImageState = function loadImageState(stateID) {
+   if (properties[stateID] === undefined)
+    return;
+
+   var prop = properties[stateID];
+   var topic;
+   var unit_array;
+   var value_array;
+
+   for (var i in topics) {
+    for (var j=0; j<4; j++) {
+     topic = topics[i] + '-' + positions[j];
+     unit_array = topics[i] + '_units';
+     value_array = topics[i] + '_values';
+     InputSliderManager.setValue(topic, prop[value_array][j]);
+     DropDownManager.setValue(topic, prop[unit_array][j]);
+    }
+   }
+
+   ButtonManager.setValue('slice-fill', prop['fill']);
+   DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+   DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+   InputSliderManager.setValue('preview-width', prop['size'][0]);
+   InputSliderManager.setValue('preview-height', prop['size'][1]);
+   InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+  };
+
+  var update = function update() {
+   scale =  Math.min(300, (30000 / this.width) | 0);
+   setScale(scale);
+   InputSliderManager.setValue('scale', scale, false);
+
+   subject.style.backgroundImage = 'url("' + this.src + '")';
+   preview.style.borderImageSource = 'url("' + this.src + '")';
+
+   guidelines['slice-top'].setMax(this.height);
+   guidelines['slice-right'].setMax(this.width);
+   guidelines['slice-bottom'].setMax(this.height);
+   guidelines['slice-left'].setMax(this.width);
+
+   if (imgState)
+    loadImageState(imgState);
+  };
+
+  var setScale = function setScale(value) {
+   scale = value;
+   var w = imgSource.width * scale / 100 | 0;
+   var h = imgSource.height * scale / 100 | 0;
+   subject.style.width = w + 'px';
+   subject.style.height = h + 'px';
+
+   for (var i = 0; i < positions.length; i++)
+    guidelines['slice-' + positions[i]].updateGuidelinePos();
+  };
+
+  var getScale = function getScale() {
+   return scale/100;
+  };
+
+  var toggleGallery = function toggleGallery() {
+   var gallery = getElemById('image-gallery');
+   var button  = getElemById('toggle-gallery');
+   var state = 1;
+   button.addEventListener('click', function() {
+    state = 1 ^ state;
+    if (state === 0) {
+     gallery.setAttribute('data-collapsed', 'true');
+     button.setAttribute('data-action', 'show');
+    }
+    else {
+     gallery.removeAttribute('data-collapsed');
+     button.setAttribute('data-action', 'hide');
+    }
+   });
+  };
+
+  var init = function init() {
+   var gallery = getElemById('image-gallery');
+   var browse = getElemById('load-image');
+   var remote = getElemById('remote-url');
+   var load_remote = getElemById('load-remote');
+
+   remote.addEventListener('change', function(){
+    loadRemoteImage(this.value);
+   });
+
+   load_remote.addEventListener('click', function(){
+    loadRemoteImage(remote.value);
+   });
+
+   browse.addEventListener('click', ImageReader.load);
+   gallery.addEventListener('click', pickImage);
+   imgSource.addEventListener('load', update);
+
+   InputSliderManager.subscribe('scale', setScale);
+   InputSliderManager.setValue('scale', scale);
+   imgState = 'border1';
+   loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+   toggleGallery();
+  };
+
+  return {
+   init: init,
+   getScale : getScale,
+   loadRemoteImage: loadRemoteImage
+  };
+
+ })();
+
+ var GuideLine = function GuideLine(node) {
+  var topic = node.getAttribute('data-topic');
+  var axis = node.getAttribute('data-axis');
+
+  this.node = node;
+  this.topic = topic;
+  this.axis = axis;
+  this.info = topic.split('-')[1];
+
+  this.position = 0;
+  this.value = 0;
+  this.unit = 0;
+  this.max = 0;
+  this.pos = positions.indexOf(this.info);
+
+  guidelines[topic] = this;
+
+  var relative_container = document.createElement('div');
+  var tooltip = document.createElement('div');
+  var tooltip2 = document.createElement('div');
+
+  tooltip.className = 'tooltip';
+  tooltip.setAttribute('data-info', this.info);
+
+  tooltip2.className = 'tooltip2';
+  tooltip2.textContent = this.info;
+  tooltip2.setAttribute('data-info', this.info);
+
+  this.tooltip = tooltip;
+
+  relative_container.appendChild(tooltip);
+  relative_container.appendChild(tooltip2);
+  node.appendChild(relative_container);
+
+  var startX = 0;
+  var startY = 0;
+  var start = 0;
+
+  var startDrag = function startDrag(e) {
+   startX = e.clientX;
+   startY = e.clientY;
+   start = guidelines[topic].position;
+   document.body.setAttribute('data-move', axis);
+   relative_container.setAttribute('data-active', '');
+   node.setAttribute('data-active', '');
+
+   document.addEventListener('mousemove', updateGuideline);
+   document.addEventListener('mouseup', endDrag);
+  };
+
+  var endDrag = function endDrag() {
+   document.body.removeAttribute('data-move');
+   relative_container.removeAttribute('data-active');
+   node.removeAttribute('data-active');
+
+   document.removeEventListener('mousemove', updateGuideline);
+  };
+
+  var updateGuideline = function updateGuideline(e) {
+   var value;
+   if (topic === 'slice-top')
+    value = e.clientY - startY + start;
+
+   if (topic === 'slice-right')
+    value = startX - e.clientX + start;
+
+   if (topic === 'slice-bottom')
+    value = startY - e.clientY + start;
+
+   if (topic === 'slice-left')
+    value = e.clientX - startX + start;
+
+   if (this.unit === 0)
+    InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+   else {
+    InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+   }
+
+  }.bind(this);
+
+  node.addEventListener("mousedown", startDrag);
+
+  InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+  InputSliderManager.setValue(topic, this.position);
+ };
+
+
+ GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+  if (this.unit === 0)
+   this.position = this.value * ImageControl.getScale() | 0;
+  else
+   this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+  this.node.style[this.info] = this.position + 'px';
+ };
+
+ GuideLine.prototype.setPosition = function setPosition(value) {
+  this.value = value;
+  this.tooltip.textContent = value;
+  this.updateGuidelinePos();
+  Tool.setBorderSlice(this.pos, value);
+ };
+
+ GuideLine.prototype.setMax = function setMax(max) {
+  this.max = max;
+  this.updateLimit();
+ };
+
+ GuideLine.prototype.updateLimit = function updateLimit() {
+  if (this.unit === 1)
+   InputSliderManager.setMax(this.topic, 100);
+  else
+   InputSliderManager.setMax(this.topic, this.max);
+ };
+
+ GuideLine.prototype.setUnit = function setUnit(type) {
+  if (type === '%') this.unit = 1;
+  if (type === '') this.unit = 0;
+  this.updateLimit();
+ };
+
+ /*
+  * Unit panel
+  */
+ var UnitPanel = (function UnitPanel () {
+
+  var panel;
+  var title;
+  var precision;
+  var step;
+  var unit_topic = null; // settings are made for this topic
+  var step_option = [1, 0.1, 0.01];
+
+  var updatePrecision = function updatePrecision(value) {
+   InputSliderManager.setPrecision('unit-step', value);
+   InputSliderManager.setStep('unit-step', step_option[value]);
+   InputSliderManager.setMin('unit-step', step_option[value]);
+
+   if (unit_topic)
+    InputSliderManager.setPrecision(unit_topic, value);
+  };
+
+  var updateUnitSettings = function updateUnitSettings(value) {
+   if (unit_topic)
+    InputSliderManager.setStep(unit_topic, value);
+  };
+
+  var show = function show(e) {
+   var topic = e.target.getAttribute('data-topic');
+   var precision = InputSliderManager.getPrecision(topic);
+   var step = InputSliderManager.getStep(topic);
+
+   unit_topic = topic;
+   title.textContent = topic;
+
+   panel.setAttribute('data-active', 'true');
+   panel.style.top = e.target.offsetTop - 40 + 'px';
+   panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+   InputSliderManager.setValue('unit-precision', precision);
+   InputSliderManager.setValue('unit-step', step);
+  };
+
+  var init = function init() {
+   panel = document.createElement('div');
+   title = document.createElement('div');
+   var close = document.createElement('div');
+
+   step = InputSliderManager.createSlider('unit-step', 'step');
+   precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+   InputSliderManager.setStep('unit-precision', 1);
+   InputSliderManager.setMax('unit-precision', 2);
+   InputSliderManager.setValue('unit-precision', 2);
+   InputSliderManager.setSensivity('unit-precision', 20);
+
+   InputSliderManager.setValue('unit-step', 1);
+   InputSliderManager.setStep('unit-step', 0.01);
+   InputSliderManager.setPrecision('unit-step', 2);
+
+   InputSliderManager.subscribe('unit-precision', updatePrecision);
+   InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+   close.addEventListener('click', function () {
+    panel.setAttribute('data-active', 'false');
+   });
+
+   title.textContent = 'Properties';
+   title.className = 'title';
+   close.className = 'close';
+   panel.id = 'unit-settings';
+   panel.setAttribute('data-active', 'false');
+   panel.appendChild(title);
+   panel.appendChild(precision);
+   panel.appendChild(step);
+   panel.appendChild(close);
+   document.body.appendChild(panel);
+  };
+
+  return {
+   init : init,
+   show : show
+  };
+
+ })();
+
+ /**
+  * Tool Manager
+  */
+ var Tool = (function Tool() {
+  var preview_area;
+  var dropdown_unit_options = [
+   { '' : '--', '%' : '%'},
+   { 'px' : 'px', '%' : '%', 'em' : 'em'},
+   { 'px' : 'px', 'em' : 'em'},
+  ];
+
+  var border_slice = [];
+  var border_width = [];
+  var border_outset = [];
+
+  var border_slice_values = [];
+  var border_width_values = [];
+  var border_outset_values = [];
+
+  var border_slice_units = ['', '', '', ''];
+  var border_width_units = ['px', 'px', 'px', 'px'];
+  var border_outset_units = ['px', 'px', 'px', 'px'];
+
+  var border_fill = false;
+  var border_repeat = ['round', 'round'];
+  var CSS_code = {
+   'source' : null,
+   'slice' : null,
+   'width' : null,
+   'outset' : null,
+   'repeat' : null
+  };
+
+  var setBorderSlice = function setBorderSlice(positionID, value) {
+   border_slice[positionID] = value + border_slice_units[positionID];
+   updateBorderSlice();
+  };
+
+  var updateBorderSlice = function updateBorderSlice() {
+   var value = border_slice.join(' ');
+   if (border_fill === true)
+    value += ' fill';
+
+   preview.style.borderImageSlice = value;
+   setOutputCSS('slice', value);
+  };
+
+  var setBorderFill = function setBorderFill(value) {
+   border_fill = value;
+   var bimgslice = border_slice.join(' ');;
+   if (value === true)
+    bimgslice += ' fill';
+
+   preview.style.borderImageSlice = bimgslice;
+  };
+
+  var updateBorderWidth = function updateBorderWidth() {
+   var value = border_width.join(' ');
+   preview.style.borderImageWidth = value;
+   setOutputCSS('width', value);
+  };
+
+  var updateBorderOutset = function updateBorderOutset() {
+   var value = border_outset.join(' ');
+   preview.style.borderImageOutset = border_outset.join(' ');
+   setOutputCSS('outset', value);
+  };
+
+  var setBorderRepeat = function setBorderRepeat(obj) {
+   border_repeat[obj.value] = obj.name;
+   var value = border_repeat.join(' ');
+   preview.style.borderImageRepeat = value;
+   setOutputCSS('repeat', value);
+  };
+
+  var setOutputCSS = function setOutputCSS(topic, value) {
+   CSS_code[topic].textContent = value + ';';
+  };
+
+  var setPreviewFontSize = function setPreviewFontSize(value) {
+   preview.style.fontSize = value + 'px';
+  };
+
+  var setPreviewWidth = function setPreviewWidth(value) {
+   preview.style.width = value + 'px';
+  };
+
+  var setPreviewHeight = function setPreviewHeight(value) {
+   preview.style.height = value + 'px';
+  };
+
+  var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+   preview_area.style.height = value + 'px';
+  };
+
+  var updateDragOption = function updateDragOption(value) {
+   if (value === true)
+    subject.setAttribute('data-draggable', 'true');
+   else
+    subject.removeAttribute('data-draggable');
+  };
+
+  var createProperty = function createProperty(topic, labelID, optionsID) {
+
+   var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+   var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+   InputSliderManager.setSensivity(topic, 3);
+   InputSliderManager.setPrecision(topic, 1);
+
+   var property = document.createElement('div');
+   var config = document.createElement('div');
+
+   property.className = 'property';
+   config.className = 'config';
+   config.setAttribute('data-topic', topic);
+   config.addEventListener('click', UnitPanel.show);
+
+   property.appendChild(slider);
+   property.appendChild(dropdown);
+   property.appendChild(config);
+
+   return property;
+  };
+
+  var initBorderSliceControls = function initBorderSliceControls() {
+   var container = getElemById('border-slice-control');
+
+   var listenForChanges = function listenForChanges(topic, id) {
+    InputSliderManager.subscribe(topic, function(value) {
+     border_slice_values[id] = value;
+     border_slice[id] = value + border_slice_units[id];
+     updateBorderSlice();
+    });
+
+    DropDownManager.subscribe(topic, function(obj) {
+     guidelines[topic].setUnit(obj.value);
+     border_slice_units[id] = obj.value;
+     border_slice[id] = border_slice_values[id] + obj.value;
+     updateBorderSlice();
+    });
+   };
+
+   for (var i = 0; i < positions.length; i++) {
+    var topic = 'slice-' + positions[i];
+    var property = createProperty(topic, i, 0);
+    listenForChanges(topic, i);
+
+    container.appendChild(property);
+   }
+
+   container.appendChild(container.children[1]);
+
+  };
+
+  var initBorderWidthControls = function initBorderWidthControls() {
+   var container = getElemById('border-width-control');
+
+   var listenForChanges = function listenForChanges(topic, id) {
+    InputSliderManager.subscribe(topic, function(value) {
+     border_width_values[id] = value;
+     border_width[id] = value + border_width_units[id];
+     updateBorderWidth();
+    });
+
+    DropDownManager.subscribe(topic, function(obj) {
+     if (obj.value === '%')
+      InputSliderManager.setMax(topic, 100);
+     else
+      InputSliderManager.setMax(topic, 1000);
+
+     border_width_units[id] = obj.value;
+     border_width[id] = border_width_values[id] + obj.value;
+     updateBorderWidth();
+    });
+   };
+
+   for (var i = 0; i < positions.length; i++) {
+    var topic = 'width-' + positions[i];
+    var property = createProperty(topic, i, 1);
+    InputSliderManager.setMax(topic, 1000);
+    listenForChanges(topic, i);
+
+    container.appendChild(property);
+   }
+  };
+
+  var initBorderOutsetControls = function initBorderOutsetControls() {
+
+   var container = getElemById('border-outset-control');
+
+   var listenForChanges = function listenForChanges(topic, id) {
+    InputSliderManager.subscribe(topic, function(value) {
+     border_outset_values[id] = value;
+     border_outset[id] = value + border_outset_units[id];
+     updateBorderOutset();
+    });
+
+    DropDownManager.subscribe(topic, function(obj) {
+     border_outset_units[id] = obj.value;
+     border_outset[id] = border_outset_values[id] + obj.value;
+     updateBorderOutset();
+    });
+   };
+
+   for (var i = 0; i < positions.length; i++) {
+    var topic = 'outset-' + positions[i];
+    var property = createProperty(topic, i, 2);
+    InputSliderManager.setMax(topic, 1000);
+    listenForChanges(topic, i);
+
+    container.appendChild(property);
+   }
+  };
+
+  var init = function init() {
+
+   var gallery =
+   subject = getElemById('subject');
+   preview = getElemById("preview");
+   preview_area = getElemById("preview_section");
+
+
+   CSS_code['source'] = getElemById("out-border-source");
+   CSS_code['slice'] = getElemById("out-border-slice");
+   CSS_code['width'] = getElemById("out-border-width");
+   CSS_code['outset'] = getElemById("out-border-outset");
+   CSS_code['repeat'] = getElemById("out-border-repeat");
+
+   initBorderSliceControls();
+   initBorderWidthControls();
+   initBorderOutsetControls();
+
+   var elem = document.querySelectorAll('.guideline');
+   var size = elem.length;
+   for (var i = 0; i < size; i++)
+    new GuideLine(elem[i]);
+
+   PreviewControl.init();
+
+   ButtonManager.subscribe('slice-fill',setBorderFill);
+   ButtonManager.subscribe('drag-subject', updateDragOption);
+   ButtonManager.setValue('drag-subject', false);
+
+   DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+   DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+   InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+   InputSliderManager.subscribe('preview-width', setPreviewWidth);
+   InputSliderManager.subscribe('preview-height', setPreviewHeight);
+   InputSliderManager.subscribe('font-size', setPreviewFontSize);
+   InputSliderManager.setValue('preview-width', 300);
+   InputSliderManager.setValue('preview-height', 200);
+  };
+
+  return {
+   init: init,
+   setOutputCSS: setOutputCSS,
+   setBorderSlice: setBorderSlice
+  };
+
+ })();
+
+ /**
+  * Init Tool
+  */
+ var init = function init() {
+  InputSliderManager.init();
+  DropDownManager.init();
+  ButtonManager.init();
+  UnitPanel.init();
+  Tool.init();
+  ImageControl.init();
+ };
+
+ return {
+  init : init
+ };
 
 })();
 ```
diff --git a/files/es/web/css/css_backgrounds_and_borders/border-radius_generator/index.md b/files/es/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
index dad1b55f47a3f9..333dec305e1434 100644
--- a/files/es/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
+++ b/files/es/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
@@ -103,51 +103,51 @@ Esta herramienta puede ser usada para generar efectos de {{cssxref("border-radiu
  * ========================================================================== */
 
 .span_12 {
-	width: 100%;
+ width: 100%;
 }
 
 .span_11 {
-	width: 91.46%;
+ width: 91.46%;
 }
 
 .span_10 {
-	width: 83%;
+ width: 83%;
 }
 
 .span_9 {
-	width: 74.54%;
+ width: 74.54%;
 }
 
 .span_8 {
-	width: 66.08%;
+ width: 66.08%;
 }
 
 .span_7 {
-	width: 57.62%;
+ width: 57.62%;
 }
 
 .span_6 {
-	width: 49.16%;
+ width: 49.16%;
 }
 
 .span_5 {
-	width: 40.7%;
+ width: 40.7%;
 }
 
 .span_4 {
-	width: 32.24%;
+ width: 32.24%;
 }
 
 .span_3 {
-	width: 23.78%;
+ width: 23.78%;
 }
 
 .span_2 {
-	width: 15.32%;
+ width: 15.32%;
 }
 
 .span_1 {
-	width: 6.86%;
+ width: 6.86%;
 }
 
 
@@ -157,9 +157,9 @@ Esta herramienta puede ser usada para generar efectos de {{cssxref("border-radiu
  * ========================================================================== */
 
 .section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
+ clear: both;
+ padding: 0px;
+ margin: 0px;
 }
 
 /*  GROUPING
@@ -183,13 +183,13 @@ Esta herramienta puede ser usada para generar efectos de {{cssxref("border-radiu
  * ========================================================================== */
 
 .col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
+ display: block;
+ float:left;
+ margin: 1% 0 1% 1.6%;
 }
 
 .col:first-child {
-	margin-left: 0;
+ margin-left: 0;
 } /* all browsers except IE6 and lower */
 
 
@@ -198,69 +198,69 @@ Esta herramienta puede ser usada para generar efectos de {{cssxref("border-radiu
  */
 
 .ui-input-slider-container {
-	height: 20px;
-	margin: 10px 0;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
+ height: 20px;
+ margin: 10px 0;
+ font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+ -moz-user-select: none;
+ user-select: none;
 }
 
 .ui-input-slider-container * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
+ float: left;
+ height: 100%;
+ line-height: 100%;
 }
 
 /* Input Slider */
 
 .ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
+ margin: 0;
+ padding: 0;
+ width: 50px;
+ text-align: center;
 
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 }
 
 .ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
+ width: 90px;
+ padding: 0px 10px 0px 0px;
+ text-align: right;
+ text-transform: lowercase;
 }
 
 .ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+ width: 16px;
+ cursor: pointer;
+ background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
 }
 
 .ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+ background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
 }
 
 .ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
+ width: 90px;
+ padding: 0 10px 0 0;
+ text-align: right;
+ text-transform: lowercase;
 }
 
 .ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
+ width: 25px;
+ background-color: #2C9FC9;
+ border-radius: 5px;
+ color: #FFF;
+ font-weight: bold;
+ line-height: 14px;
+ text-align: center;
 }
 
 .ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
+ background-color: #379B4A;
+ cursor: pointer;
 }
 
 /*
@@ -270,81 +270,81 @@ Esta herramienta puede ser usada para generar efectos de {{cssxref("border-radiu
 /* Checkbox */
 
 .ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
+ text-align: center;
+ font-size: 16px;
+ font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+ line-height: 1.5em;
+ color: #FFF;
 
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
 }
 
 .ui-checkbox > input {
- 	display: none;
+  display: none;
 }
 
 .ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
+ font-size: 12px;
+ padding: 0.333em 1.666em 0.5em;
+ height: 1em;
+ line-height: 1em;
 
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
+ background-color: #888;
+ background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+ background-position: center center;
+ background-repeat: no-repeat;
 
-	color: #FFF;
-	border-radius: 3px;
-	font-weight: bold;
-	float: left;
+ color: #FFF;
+ border-radius: 3px;
+ font-weight: bold;
+ float: left;
 }
 
 .ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
+ padding-left: 34px;
+ background-position: center left 10px;
 }
 
 .ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
+ padding-right: 34px;
+ padding-left: 1.666em;
+ background-position: center right 10px;
 }
 
 .ui-checkbox > label:hover {
-	cursor: pointer;
+ cursor: pointer;
 }
 
 .ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
+ background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+ background-color: #379B4A;
 }
 
 body {
-	max-width: 1000px;
-	margin: 0 auto;
+ max-width: 1000px;
+ margin: 0 auto;
 
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+ font-family: "Segoe UI", Arial, Helvetica, sans-serif;
 
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
 }
 
 #container {
-	width: 100%;
+ width: 100%;
 
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 }
 
 /******************************************************************************/
@@ -354,234 +354,234 @@ body {
  */
 
 #preview {
-	height: 500px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-	overflow: hidden;
-	position: relative;
+ height: 500px;
+ border: 1px solid #CCC;
+ border-radius: 3px;
+ text-align: center;
+ overflow: hidden;
+ position: relative;
 }
 
 #preview .content {
-	width: 100%;
-	height: 100%;
-	display: block;
+ width: 100%;
+ height: 100%;
+ display: block;
 }
 
 #preview input {
-	color: #333;
-	border: 1px solid #CCC;
-	border-radius: 3px;
+ color: #333;
+ border: 1px solid #CCC;
+ border-radius: 3px;
 }
 
 #subject {
-	width: 400px;
-	height: 150px;
-	margin: 0 auto;
-	border: 3px solid #C60;
-	background: #FFF;
-	position: relative;
+ width: 400px;
+ height: 150px;
+ margin: 0 auto;
+ border: 3px solid #C60;
+ background: #FFF;
+ position: relative;
 }
 
 .radius {
-	width: 50%;
-	height: 50%;
-	border: 1px solid #CCC;
-	display: none;
-	position: absolute;
-	z-index: 1;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ width: 50%;
+ height: 50%;
+ border: 1px solid #CCC;
+ display: none;
+ position: absolute;
+ z-index: 1;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 }
 
 .handle {
-	width: 16px;
-	height: 16px;
-	position: absolute;
-	z-index: 2;
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ z-index: 2;
 }
 
 .handle-top-left {
-	top: -12px;
-	left: -12px;
-	cursor: se-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+ top: -12px;
+ left: -12px;
+ cursor: se-resize;
+ background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
 }
 
 .handle-top-right {
-	top: -12px;
-	right: -12px;
-	cursor: sw-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+ top: -12px;
+ right: -12px;
+ cursor: sw-resize;
+ background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
 }
 
 .handle-bottom-right {
-	bottom: -12px;
-	right: -12px;
-	cursor: nw-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+ bottom: -12px;
+ right: -12px;
+ cursor: nw-resize;
+ background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
 }
 
 .handle-bottom-left {
-	bottom: -12px;
-	left: -12px;
-	cursor: ne-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+ bottom: -12px;
+ left: -12px;
+ cursor: ne-resize;
+ background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
 }
 
 
 .radius-container {
-	position: absolute;
-	display : block;
-	z-index: 1;
+ position: absolute;
+ display : block;
+ z-index: 1;
 
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 }
 
 
 /* TOP LEFT */
 #top-left {
-	top: 0;
-	left: 0;
+ top: 0;
+ left: 0;
 }
 
 #top-left .radius {
-	border-top-left-radius: 100%;
-	top: 0;
-	left: 0;
+ border-top-left-radius: 100%;
+ top: 0;
+ left: 0;
 }
 
 /* TOP RIGHT */
 #top-right {
-	top: 0;
-	right: 0;
+ top: 0;
+ right: 0;
 }
 
 #top-right .radius {
-	border-top-right-radius: 100%;
-	top: 0;
-	right: 0;
+ border-top-right-radius: 100%;
+ top: 0;
+ right: 0;
 }
 
 /* BOTTOM RIGHT */
 #bottom-right {
-	bottom: 0;
-	right: 0;
+ bottom: 0;
+ right: 0;
 }
 
 #bottom-right .radius {
-	border-bottom-right-radius: 100%;
-	bottom: 0;
-	right: 0;
+ border-bottom-right-radius: 100%;
+ bottom: 0;
+ right: 0;
 }
 
 /* BOTTOM lEFT */
 #bottom-left {
-	bottom: 0;
-	left: 0;
+ bottom: 0;
+ left: 0;
 }
 
 #bottom-left .radius {
-	border-bottom-left-radius: 100%;
-	bottom: 0;
+ border-bottom-left-radius: 100%;
+ bottom: 0;
 }
 
 /* INPUT SLIDERS */
 
 #preview .ui-input-slider {
-	margin: 10px;
-	position: absolute;
-	z-index: 10;
+ margin: 10px;
+ position: absolute;
+ z-index: 10;
 }
 
 #radius-ui-sliders {
-	width: 100%;
-	height: 100%;
-	min-height: 75px;
-	min-width: 150px;
-	padding: 20px 50px;
-	top: -20px;
-	left: -50px;
-	position: relative;
+ width: 100%;
+ height: 100%;
+ min-height: 75px;
+ min-width: 150px;
+ padding: 20px 50px;
+ top: -20px;
+ left: -50px;
+ position: relative;
 }
 
 #tlr {
-	top: -30px;
-	left: -50px;
-	display: none;
+ top: -30px;
+ left: -50px;
+ display: none;
 }
 
 #tlw {
-	top: -30px;
-	left: 30px;
+ top: -30px;
+ left: 30px;
 }
 
 #tlh {
-	top: 20px;
-	left: -50px;
+ top: 20px;
+ left: -50px;
 }
 
 #trr {
-	top: -30px;
-	right: -50px;
-	display: none;
+ top: -30px;
+ right: -50px;
+ display: none;
 }
 
 #trw {
-	top: -30px;
-	right: 30px;
+ top: -30px;
+ right: 30px;
 }
 
 #trh {
-	top: 20px;
-	right: -50px;
+ top: 20px;
+ right: -50px;
 }
 
 #brr {
-	bottom: -30px;
-	right: -50px;
-	display: none;
+ bottom: -30px;
+ right: -50px;
+ display: none;
 }
 
 #brw {
-	bottom: -30px;
-	right: 30px;
+ bottom: -30px;
+ right: 30px;
 }
 
 #brh {
-	bottom: 20px;
-	right: -50px;
+ bottom: 20px;
+ right: -50px;
 }
 
 #blr {
-	bottom: -30px;
-	left: -50px;
-	display: none;
+ bottom: -30px;
+ left: -50px;
+ display: none;
 }
 
 #blw {
-	bottom: -30px;
-	left: 30px;
+ bottom: -30px;
+ left: 30px;
 }
 
 #blh {
-	bottom: 20px;
-	left: -50px;
+ bottom: 20px;
+ left: -50px;
 }
 
 #preview .ui-input-slider-left, #preview .ui-input-slider-right {
-	visibility: hidden;
+ visibility: hidden;
 }
 
 #preview .ui-input-slider-container:hover .ui-input-slider-left {
-	visibility: visible;
+ visibility: visible;
 }
 
 #preview .ui-input-slider-container:hover .ui-input-slider-right {
-	visibility: visible;
+ visibility: visible;
 }
 
 /*
@@ -589,135 +589,135 @@ body {
  */
 
 #unit-selection {
-	width: 200px;
-	height: 75px;
-	margin: 30px 30px 0 0;
-	padding: 30px;
-	border: 3px solid #555;
-	border-radius: 10px;
-	position: relative;
-	float: right;
+ width: 200px;
+ height: 75px;
+ margin: 30px 30px 0 0;
+ padding: 30px;
+ border: 3px solid #555;
+ border-radius: 10px;
+ position: relative;
+ float: right;
 }
 
 #unit-selection .info {
-	height: 20%;
-	width: 100%;
-	line-height: 20%;
-	font-size: 20px;
-	text-align: center;
-	position: relative;
-	top: 40%;
+ height: 20%;
+ width: 100%;
+ line-height: 20%;
+ font-size: 20px;
+ text-align: center;
+ position: relative;
+ top: 40%;
 }
 
 #unit-selection .dropdown {
-	width: 50px;
-	height: 20px;
-	margin: 10px;
-	padding: 0;
-	border-radius: 3px;
-	position: absolute;
-	overflow: hidden;
+ width: 50px;
+ height: 20px;
+ margin: 10px;
+ padding: 0;
+ border-radius: 3px;
+ position: absolute;
+ overflow: hidden;
 }
 
 #unit-selection select {
-	width: 50px;
-	height: 20px;
-	marign: 0;
-	padding: 0 0 0 10px;
-	background: #555;
-	border: 1px solid #555;
-	border: none;
-	color: #FFF;
-	float: left;
+ width: 50px;
+ height: 20px;
+ marign: 0;
+ padding: 0 0 0 10px;
+ background: #555;
+ border: 1px solid #555;
+ border: none;
+ color: #FFF;
+ float: left;
 }
 
 #unit-selection select option {
-	background: #FFF;
-	color: #333;
+ background: #FFF;
+ color: #333;
 }
 
 #unit-selection select:hover {
-	cursor: pointer;
+ cursor: pointer;
 }
 
 #unit-selection .dropdown:before {
-	content: "";
-	width: 18px;
-	height: 20px;
-	display: block;
-	background-color: #555;
-	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	top: 0px;
-	right: 0px;
-	position: absolute;
-	z-index: 1;
-	pointer-events: none;
+ content: "";
+ width: 18px;
+ height: 20px;
+ display: block;
+ background-color: #555;
+ background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+ background-position: center center;
+ background-repeat: no-repeat;
+ top: 0px;
+ right: 0px;
+ position: absolute;
+ z-index: 1;
+ pointer-events: none;
 }
 
 #unit-selection .unit-top-left {
-	top: 0;
-	left: 0;
-	display: none;
+ top: 0;
+ left: 0;
+ display: none;
 }
 
 #unit-selection .unit-top-left-w {
-	top: -22px;
-	left: 30px;
+ top: -22px;
+ left: 30px;
 }
 
 #unit-selection .unit-top-left-h {
-	top: 20px;
-	left: -37px;
+ top: 20px;
+ left: -37px;
 }
 
 #unit-selection .unit-top-right {
-	top: 0;
-	right: 0;
-	display: none;
+ top: 0;
+ right: 0;
+ display: none;
 }
 
 #unit-selection .unit-top-right-w {
-	top: -22px;
-	right: 30px;
+ top: -22px;
+ right: 30px;
 }
 
 #unit-selection .unit-top-right-h {
-	top: 20px;
-	right: -37px;
+ top: 20px;
+ right: -37px;
 }
 
 #unit-selection .unit-bottom-right {
-	bottom: 0;
-	right: 0;
-	display: none;
+ bottom: 0;
+ right: 0;
+ display: none;
 }
 
 #unit-selection .unit-bottom-right-w {
-	bottom: -22px;
-	right: 30px;
+ bottom: -22px;
+ right: 30px;
 }
 
 #unit-selection .unit-bottom-right-h {
-	bottom: 20px;
-	right: -37px;
+ bottom: 20px;
+ right: -37px;
 }
 
 #unit-selection .unit-bottom-left {
-	bottom: 0;
-	left: 0;
-	display: none;
+ bottom: 0;
+ left: 0;
+ display: none;
 }
 
 #unit-selection .unit-bottom-left-w {
-	bottom: -22px;
-	left: 30px;
+ bottom: -22px;
+ left: 30px;
 }
 
 #unit-selection .unit-bottom-left-h {
-	bottom: 20px;
-	left: -37px;
+ bottom: 20px;
+ left: -37px;
 }
 
 /******************************************************************************/
@@ -725,55 +725,55 @@ body {
 
 
 #radius-lock {
-	width: 200px;
-	height: 75px;
-	margin: 30px 0 0 30px;
-	padding: 30px;
-	border: 3px solid #555;
-	border-radius: 10px;
-	position: relative;
-	float: left;
+ width: 200px;
+ height: 75px;
+ margin: 30px 0 0 30px;
+ padding: 30px;
+ border: 3px solid #555;
+ border-radius: 10px;
+ position: relative;
+ float: left;
 }
 
 #radius-lock .ui-checkbox {
-	color: #FFF;
-	position: absolute;
+ color: #FFF;
+ position: absolute;
 }
 
 #radius-lock .ui-checkbox > label {
-	height: 20px;
-	width: 34px;
-	padding: 0;
+ height: 20px;
+ width: 34px;
+ padding: 0;
 }
 
 #radius-lock .info {
-	height: 20%;
-	width: 100%;
-	line-height: 20%;
-	font-size: 20px;
-	text-align: center;
-	position: relative;
-	top: 40%;
+ height: 20%;
+ width: 100%;
+ line-height: 20%;
+ font-size: 20px;
+ text-align: center;
+ position: relative;
+ top: 40%;
 }
 
 #radius-lock [data-topic="top-left"] {
-	top: 10px;
-	left: 10px;
+ top: 10px;
+ left: 10px;
 }
 
 #radius-lock [data-topic="top-right"] {
-	top: 10px;
-	right: 10px;
+ top: 10px;
+ right: 10px;
 }
 
 #radius-lock [data-topic="bottom-right"] {
-	bottom: 10px;
-	right: 10px;
+ bottom: 10px;
+ right: 10px;
 }
 
 #radius-lock [data-topic="bottom-left"] {
-	bottom: 10px;
-	left: 10px;
+ bottom: 10px;
+ left: 10px;
 }
 
 /**
@@ -781,32 +781,32 @@ body {
  */
 
 #dimensions {
-	width: 200px;
-	color: #444;
-	float:left;
+ width: 200px;
+ color: #444;
+ float:left;
 }
 
 #dimensions input {
-	background: #555;
-	color: #FFF;
-	border: none;
-	border-radius: 3px;
+ background: #555;
+ color: #FFF;
+ border: none;
+ border-radius: 3px;
 }
 
 #output {
-	width: 500px;
-	padding: 10px 0;
-	margin: 10px 0;
-	color: #555;
-	text-align: center;
-	border: 1px dashed #999;
-	border-radius: 3px;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-
-	float: right;
+ width: 500px;
+ padding: 10px 0;
+ margin: 10px 0;
+ color: #555;
+ text-align: center;
+ border: 1px dashed #999;
+ border-radius: 3px;
+ -moz-user-select: text;
+ -webkit-user-select: text;
+ -ms-user-select: text;
+ user-select: text;
+
+ float: right;
 }
 ```
 
@@ -820,191 +820,191 @@ body {
 
 var InputSliderManager = (function InputSliderManager() {
 
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseInt(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		subscribe(obj.topic, function(value) {
-			input.value = value + obj.unit;
-		});
-
-		return input;
-	}
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		document.addEventListener("mouseup", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		});
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		}
-
-		return slider;
-	}
-
-	var InputSlider = function(node) {
-		var min		= node.getAttribute('data-min') | 0;
-		var max		= node.getAttribute('data-max') | 0;
-		var step	= node.getAttribute('data-step') | 0;
-		var value	= node.getAttribute('data-value') | 0;
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-
-		this.min = min;
-		this.max = max > 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-		node.className = 'ui-input-slider ui-input-slider-container';
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	}
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		if (send_notify !== undefined && send_notify === false) {
-			slider.input.value = value + slider.unit;
-			return;
-		}
-
-		notify.call(slider);
-	}
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	}
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	}
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	}
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	}
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		getNode : getNode,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
+ var subscribers = {};
+ var sliders = [];
+
+ var InputComponent = function InputComponent(obj) {
+  var input = document.createElement('input');
+  input.setAttribute('type', 'text');
+
+  input.addEventListener('click', function(e) {
+   this.select();
+  });
+
+  input.addEventListener('change', function(e) {
+   var value = parseInt(e.target.value);
+
+   if (isNaN(value) === true)
+    setValue(obj.topic, obj.value);
+   else
+    setValue(obj.topic, value);
+  });
+
+  subscribe(obj.topic, function(value) {
+   input.value = value + obj.unit;
+  });
+
+  return input;
+ }
+
+ var SliderComponent = function SliderComponent(obj, sign) {
+  var slider = document.createElement('div');
+  var startX = null;
+  var start_value = 0;
+
+  slider.addEventListener("click", function(e) {
+   setValue(obj.topic, obj.value + obj.step * sign);
+  });
+
+  slider.addEventListener("mousedown", function(e) {
+   startX = e.clientX;
+   start_value = obj.value;
+   document.body.style.cursor = "e-resize";
+   document.addEventListener("mousemove", sliderMotion);
+  });
+
+  document.addEventListener("mouseup", function(e) {
+   document.removeEventListener("mousemove", sliderMotion);
+   document.body.style.cursor = "auto";
+   slider.style.cursor = "pointer";
+  });
+
+  var sliderMotion = function sliderMotion(e) {
+   slider.style.cursor = "e-resize";
+   var delta = (e.clientX - startX) / obj.sensivity | 0;
+   var value = delta * obj.step + start_value;
+   setValue(obj.topic, value);
+  }
+
+  return slider;
+ }
+
+ var InputSlider = function(node) {
+  var min  = node.getAttribute('data-min') | 0;
+  var max  = node.getAttribute('data-max') | 0;
+  var step = node.getAttribute('data-step') | 0;
+  var value = node.getAttribute('data-value') | 0;
+  var topic = node.getAttribute('data-topic');
+  var unit = node.getAttribute('data-unit');
+  var name  = node.getAttribute('data-info');
+  var sensivity = node.getAttribute('data-sensivity') | 0;
+
+  this.min = min;
+  this.max = max > 0 ? max : 100;
+  this.step = step === 0 ? 1 : step;
+  this.topic = topic;
+  this.node = node;
+  this.unit = unit;
+  this.sensivity = sensivity > 0 ? sensivity : 5;
+
+  var input = new InputComponent(this);
+  var slider_left  = new SliderComponent(this, -1);
+  var slider_right = new SliderComponent(this,  1);
+
+  slider_left.className = 'ui-input-slider-left';
+  slider_right.className = 'ui-input-slider-right';
+
+  if (name) {
+   var info = document.createElement('span');
+   info.className = 'ui-input-slider-info';
+   info.textContent = name;
+   node.appendChild(info);
+  }
+
+  node.appendChild(slider_left);
+  node.appendChild(input);
+  node.appendChild(slider_right);
+  node.className = 'ui-input-slider ui-input-slider-container';
+
+  this.input = input;
+  sliders[topic] = this;
+  setValue(topic, value);
+ }
+
+ var setValue = function setValue(topic, value, send_notify) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  if (value > slider.max) value = slider.max;
+  if (value < slider.min) value = slider.min;
+
+  slider.value = value;
+  slider.node.setAttribute('data-value', value);
+
+  if (send_notify !== undefined && send_notify === false) {
+   slider.input.value = value + slider.unit;
+   return;
+  }
+
+  notify.call(slider);
+ }
+
+ var setMax = function setMax(topic, value) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  slider.max = value;
+  setValue(topic, slider.value);
+ }
+
+ var setMin = function setMin(topic, value) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  slider.min = value;
+  setValue(topic, slider.value);
+ }
+
+ var setUnit = function setUnit(topic, unit) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  slider.unit = unit;
+  setValue(topic, slider.value);
+ }
+
+ var getNode =  function getNode(topic) {
+  return sliders[topic].node;
+ }
+
+ var subscribe = function subscribe(topic, callback) {
+  if (subscribers[topic] === undefined)
+   subscribers[topic] = [];
+  subscribers[topic].push(callback);
+ }
+
+ var unsubscribe = function unsubscribe(topic, callback) {
+  subscribers[topic].indexOf(callback);
+  subscribers[topic].splice(index, 1);
+ }
+
+ var notify = function notify() {
+  for (var i in subscribers[this.topic]) {
+   subscribers[this.topic][i](this.value);
+  }
+ }
+
+ var init = function init() {
+  var elem = document.querySelectorAll('.ui-input-slider');
+  var size = elem.length;
+  for (var i = 0; i < size; i++)
+   new InputSlider(elem[i]);
+ }
+
+ return {
+  init : init,
+  setMax : setMax,
+  setMin : setMin,
+  setUnit : setUnit,
+  getNode : getNode,
+  setValue : setValue,
+  subscribe : subscribe,
+  unsubscribe : unsubscribe
+ }
 
 })();
 
@@ -1014,574 +1014,574 @@ var InputSliderManager = (function InputSliderManager() {
 
 var ButtonManager = (function CheckBoxManager() {
 
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	}
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	}
-
-	var setValue = function setValue(topic, value) {
-		try {
-			buttons[topic].checkbox.checked = value;
-		}
-		catch(error) {
-			console.log(error);
-		}
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
+ var subscribers = [];
+ var buttons = [];
+
+ var CheckBox = function CheckBox(node) {
+  var topic = node.getAttribute('data-topic');
+  var state = node.getAttribute('data-state');
+  var name = node.getAttribute('data-label');
+  var align = node.getAttribute('data-text-on');
+
+  state = (state === "true");
+
+  var checkbox = document.createElement("input");
+  var label = document.createElement("label");
+
+  var id = 'checkbox-' + topic;
+  checkbox.id = id;
+  checkbox.setAttribute('type', 'checkbox');
+  checkbox.checked = state;
+
+  label.setAttribute('for', id);
+  if (name) {
+   label.className = 'text';
+   if (align)
+    label.className += ' ' + align;
+   label.textContent = name;
+  }
+
+  node.appendChild(checkbox);
+  node.appendChild(label);
+
+  this.node = node;
+  this.topic = topic;
+  this.checkbox = checkbox;
+
+  checkbox.addEventListener('change', function(e) {
+   notify.call(this);
+  }.bind(this));
+
+  buttons[topic] = this;
+ }
+
+ var getNode =  function getNode(topic) {
+  return buttons[topic].node;
+ }
+
+ var setValue = function setValue(topic, value) {
+  try {
+   buttons[topic].checkbox.checked = value;
+  }
+  catch(error) {
+   console.log(error);
+  }
+ }
+
+ var subscribe = function subscribe(topic, callback) {
+  if (subscribers[topic] === undefined)
+   subscribers[topic] = [];
+
+  subscribers[topic].push(callback);
+ }
+
+ var unsubscribe = function unsubscribe(topic, callback) {
+  subscribers[topic].indexOf(callback);
+  subscribers[topic].splice(index, 1);
+ }
+
+ var notify = function notify() {
+  for (var i = 0; i < subscribers[this.topic].length; i++)
+   subscribers[this.topic][i](this.checkbox.checked);
+ }
+
+ var init = function init() {
+  var elem = document.querySelectorAll('.ui-checkbox');
+  var size = elem.length;
+  for (var i = 0; i < size; i++)
+   new CheckBox(elem[i]);
+ }
+
+ return {
+  init : init,
+  setValue : setValue,
+  subscribe : subscribe,
+  unsubscribe : unsubscribe
+ }
 
 })();
 
 
 window.addEventListener("load", function() {
-	BorderRadius.init();
+ BorderRadius.init();
 });
 
 var BorderRadius = (function BorderRadius() {
 
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	/**
-	 * Shadow dragging
-	 */
-	var PreviewMouseTracking = (function Drag() {
-		var active = false;
-		var lastX = 0;
-		var lastY = 0;
-		var subscribers = [];
-
-		var init = function init(id) {
-			var elem = getElemById(id);
-			elem.addEventListener('mousedown', dragStart, false);
-			document.addEventListener('mouseup', dragEnd, false);
-		}
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			active = true;
-			lastX = e.clientX;
-			lastY = e.clientY;
-			document.addEventListener('mousemove', mouseDrag, false);
-		}
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			if (active === true) {
-				active = false;
-				document.removeEventListener('mousemove', mouseDrag, false);
-			}
-		}
-
-		var mouseDrag = function mouseDrag(e) {
-			notify(e.clientX - lastX, e.clientY - lastY);
-			lastX = e.clientX;
-			lastY = e.clientY;
-		}
-
-		var subscribe = function subscribe(callback) {
-			subscribers.push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			var index = subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(deltaX, deltaY) {
-			for (var i in subscribers)
-				subscribers[i](deltaX, deltaY);
-		}
-
-		return {
-			init : init,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	var subject;
-	var units = ['px', '%'];
-	var output = null;
-
-	var UnitSelector = function UnitSelector(topic) {
-
-		this.container = document.createElement("div");
-		this.select = document.createElement("select");
-		for (var i in units) {
-			var option = document.createElement("option");
-			option.value = i;
-			option.textContent = units[i];
-			this.select.appendChild(option);
-		}
-
-		this.container.className = 'dropdown ' + 'unit-' + topic;
-		this.container.appendChild(this.select);
-	}
-
-	UnitSelector.prototype.setValue = function setValue(value) {
-		this.salect.value = value;
-	}
-
-
-	var RadiusContainer = function RadiusContainer(node) {
-		var radius = document.createElement('div');
-		var handle = document.createElement('div');
-		var x = node.getAttribute('data-x');
-		var y = node.getAttribute('data-y');
-		var active = false;
-
-		this.id = node.id;
-		this.node = node;
-		this.radius = radius;
-		this.handle = handle;
-		this.width = 100;
-		this.height = 50;
-		this.size = 0;
-		this.rounded = false;
-
-		this.unitX = 0;
-		this.unitY = 0;
-		this.unitR = 0;
-
-		this.maxW = 100;
-		this.maxH = 100;
-		this.maxR = 100;
-
-		this.topic = y + '-' + x;
-
-		var sliderW = InputSliderManager.getNode(this.topic + '-w');
-		var sliderH = InputSliderManager.getNode(this.topic + '-h');
-		var sliderR = InputSliderManager.getNode(this.topic);
-
-		this.setUnitX(this.unitX);
-		this.setUnitY(this.unitY);
-		this.setUnitR(this.unitR);
-
-		this.updateWidth();
-		this.updateHeight();
-		this.updateRadius();
-
-		if (x === 'left')	this.resizeX =  1;
-		if (x === 'right')	this.resizeX = -1;
-		if (y === 'top')	this.resizeY =  1;
-		if (y === 'bottom')	this.resizeY = -1;
-
-		radius.className = 'radius';
-
-		var unit_selector = document.getElementById("unit-selection");
-		var unitW = new UnitSelector(this.topic + '-w');
-		var unitH = new UnitSelector(this.topic + '-h');
-		var unitR = new UnitSelector(this.topic);
-
-		unit_selector.appendChild(unitW.container);
-		unit_selector.appendChild(unitH.container);
-		unit_selector.appendChild(unitR.container);
-		node.appendChild(radius);
-		subject.appendChild(handle);
-
-		unitW.select.addEventListener('change', function(e) {
-			this.setUnitX(e.target.value | 0);
-		}.bind(this));
-
-		unitH.select.addEventListener('change', function(e) {
-			this.setUnitY(e.target.value | 0);
-		}.bind(this));
-
-		unitR.select.addEventListener('change', function(e) {
-			this.setUnitR(e.target.value | 0);
-		}.bind(this));
-
-		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
-
-		handle.addEventListener("mousedown", function(e) {
-			active = true;
-			this.radius.style.display = 'block';
-			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
-		}.bind(this));
-
-		document.addEventListener("mouseup", function(e) {
-			this.radius.style.display = 'none';
-			if (active === true)
-				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
-		}.bind(this));
-
-		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
-		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
-		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
-
-		ButtonManager.subscribe(this.topic, function(value) {
-			this.rounded = value;
-			if (value === true) {
-				unitW.container.style.display = 'none';
-				unitH.container.style.display = 'none';
-				unitR.container.style.display = 'block';
-				sliderW.style.display = 'none';
-				sliderH.style.display = 'none';
-				sliderR.style.display = 'block';
-				this.setUnitR(this.unitR);
-				this.updateRadius();
-			}
-
-			if (value === false) {
-				unitW.container.style.display = 'block';
-				unitH.container.style.display = 'block';
-				unitR.container.style.display = 'none';
-				sliderW.style.display = 'block';
-				sliderH.style.display = 'block';
-				sliderR.style.display = 'none';
-				this.setUnitX(this.unitX);
-				this.setUnitY(this.unitY);
-				this.updateWidth();
-				this.updateHeight();
-			}
-
-			this.updateBorderRadius();
-
-		}.bind(this));
-
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.updateWidth = function updateWidth() {
-		this.node.style.width = this.width + units[this.unitX];
-		var value = Math.round(this.width / 2);
-		InputSliderManager.setValue(this.topic + '-w', value, false);
-	}
-
-	RadiusContainer.prototype.updateHeight = function updateHeight() {
-		this.node.style.height = this.height + units[this.unitY];
-		var value = Math.round(this.height / 2);
-		InputSliderManager.setValue(this.topic + '-h', value, false);
-	}
-
-	RadiusContainer.prototype.updateRadius = function updateRadius() {
-		var value = Math.round(this.size / 2);
-		this.node.style.width = this.size + units[this.unitR];
-		this.node.style.height = this.size + units[this.unitR];
-		InputSliderManager.setValue(this.topic, value, false);
-	}
-
-	RadiusContainer.prototype.setWidth = function setWidth(value) {
-		this.radius.style.display = 'block';
-		this.width = 2 * value;
-		this.node.style.width = this.width + units[this.unitX];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setHeight = function setHeight(value) {
-		this.radius.style.display = 'block';
-		this.height = 2 * value;
-		this.node.style.height = this.height + units[this.unitY];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setRadius = function setRadius(value) {
-		this.radius.style.display = 'block';
-		this.size = 2 * value;
-		this.node.style.width = this.size + units[this.unitR];
-		this.node.style.height = this.size + units[this.unitR];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
-		this.unitX = value;
-		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
-		if (this.unitX === 1) this.maxW = 200;
-		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
-		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
-	}
-
-	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
-		this.unitY = value;
-		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
-		if (this.unitY === 1) this.maxH = 200;
-		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
-		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
-	}
-
-	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
-		this.unitR = value;
-
-		if (this.unitR === 0)
-			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
-
-		if (this.unitR === 1)
-			this.maxR = 200;
-
-		InputSliderManager.setUnit(this.topic, units[this.unitR]);
-		InputSliderManager.setMax(this.topic, this.maxR / 2);
-	}
-
-	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
-		if (this.rounded) {
-			this.setUnitR(this.unitR);
-			return;
-		}
-
-		if (unit === 0)
-			this.setUnitX(this.unitX);
-
-		if (unit === 1)
-			this.setUnitY(this.unitY);
-	}
-
-	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
-
-		if (this.rounded === true) {
-			var unit = units[this.unitR];
-			var value = Math.round(this.size / 2);
-			return value + unit;
-		}
-
-		var unitX = units[this.unitX];
-		var unitY = units[this.unitY];
-		var valueX = Math.round(this.width / 2);
-		var valueY = Math.round(this.height / 2);
-
-		if (valueX === valueY && this.unitX === this.unitY)
-			return valueX + unitX;
-
-		return valueX + unitX + ' ' + valueY + unitY;
-	}
-
-	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
-		var radius = this.composeBorderRadius();
-		var corner = 0;
-
-		if (this.topic === 'top-left') {
-			subject.style.borderTopLeftRadius = radius;
-			corner = 0;
-		}
-
-		if (this.topic === 'top-right') {
-			subject.style.borderTopRightRadius = radius;
-			corner = 1;
-		}
-
-		if (this.topic === 'bottom-right') {
-			subject.style.borderBottomRightRadius = radius;
-			corner = 2;
-		}
-
-		if (this.topic === 'bottom-left') {
-			subject.style.borderBottomLeftRadius = radius;
-			corner = 3;
-		}
-
-		Tool.updateOutput(corner, radius);
-	}
-
-	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
-
-		if (this.rounded === true) {
-			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
-			if (this.size < 0)	this.size = 0;
-			if (this.size > this.maxR)	this.size = this.maxR;
-			this.updateRadius();
-			this.updateBorderRadius();
-			return;
-		}
-
-		if (deltaX) {
-			this.width += this.resizeX * deltaX;
-			if (this.width < 0)	this.width = 0;
-			if (this.width > this.maxW)	this.width = this.maxW;
-			this.updateWidth();
-		}
-
-		if (deltaY) {
-			this.height += this.resizeY * deltaY;
-			if (this.height < 0) this.height = 0;
-			if (this.height > this.maxH)	this.height = this.maxH;
-			this.updateHeight();
-		}
-
-		if (deltaX || deltaY)
-			this.updateBorderRadius();
-	}
-
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview;
-		var preview_ui;
-		var radius_containers = [];
-		var border_width = 3;
-		var borders1 = [null, null, null, null];
-		var borders2 = [0, 0, 0, 0];
-
-		var updateUIWidth = function updateUIWidth(value) {
-			var pwidth = subject.parentElement.clientWidth;
-			var left = (pwidth - value) / 2;
-			subject.style.width = value + "px";
-
-			for (var i = 0; i < 4; i++)
-				radius_containers[i].updateUnits(0);
-		}
-
-		var updateUIHeight = function updateUIHeight(value) {
-			var pheight = subject.parentElement.clientHeight;
-			var top = (pheight - value) / 2;
-			subject.style.height = value + "px";
-			subject.style.top = top - border_width + "px";
-
-			for (var i = 0; i < 4; i++)
-				radius_containers[i].updateUnits(1);
-		}
-
-		var updatePreviewUIWidth = function updatePreviewUIWidth() {
-			var p = subject.parentElement.clientWidth;
-			var v = preview_ui.clientWidth;
-			console.log(p, v, (p - v ) / 2);
-			preview_ui.style.left = (p - v) / 2 + "px" ;
-		}
-
-		var updatePreviewUIHeight = function updatePreviewUIHeight() {
-			var p = subject.parentElement.clientHeight;
-			var v = preview_ui.clientHeight;
-			console.log(p, v, (p - v ) / 2);
-			preview_ui.style.top = (p - v) / 2 + "px" ;
-		}
-
-		var updateOutput = function updateOutput(corner, radius) {
-			var values = radius.split(" ");
-
-			borders1[corner] = values[0];
-			borders2[corner] = values[0];
-
-			if (values.length === 2)
-				borders2[corner] = values[1];
-
-			var border_1_value = borders1.join(" ");
-			var border_2_value = borders2.join(" ");
-			var border_radius = 'border-radius: ' + border_1_value;
-
-			if (border_2_value !== border_1_value)
-				border_radius += ' / ' + border_2_value;
-
-			border_radius += ';';
-			output.textContent = border_radius;
-		}
-
-		var init = function init() {
-			preview = getElemById("preview");
-			subject = getElemById("subject");
-			output = getElemById("output");
-			preview_ui = getElemById("radius-ui-sliders");
-
-			var elem = document.querySelectorAll('.radius-container');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				radius_containers[i] = new RadiusContainer(elem[i]);
-
-			InputSliderManager.subscribe("width", updateUIWidth);
-			InputSliderManager.subscribe("height", updateUIHeight);
-
-			InputSliderManager.setValue("width", subject.clientWidth);
-			InputSliderManager.setValue("height", subject.clientHeight);
-		}
-
-		return {
-			init : init,
-			updateOutput : updateOutput
-		}
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		ButtonManager.init();
-		InputSliderManager.init();
-		PreviewMouseTracking.init("preview");
-		Tool.init();
-	}
-
-	return {
-		init : init
-	}
+ function getElemById(id) {
+  return document.getElementById(id);
+ }
+
+ /**
+  * Shadow dragging
+  */
+ var PreviewMouseTracking = (function Drag() {
+  var active = false;
+  var lastX = 0;
+  var lastY = 0;
+  var subscribers = [];
+
+  var init = function init(id) {
+   var elem = getElemById(id);
+   elem.addEventListener('mousedown', dragStart, false);
+   document.addEventListener('mouseup', dragEnd, false);
+  }
+
+  var dragStart = function dragStart(e) {
+   if (e.button !== 0)
+    return;
+
+   active = true;
+   lastX = e.clientX;
+   lastY = e.clientY;
+   document.addEventListener('mousemove', mouseDrag, false);
+  }
+
+  var dragEnd = function dragEnd(e) {
+   if (e.button !== 0)
+    return;
+
+   if (active === true) {
+    active = false;
+    document.removeEventListener('mousemove', mouseDrag, false);
+   }
+  }
+
+  var mouseDrag = function mouseDrag(e) {
+   notify(e.clientX - lastX, e.clientY - lastY);
+   lastX = e.clientX;
+   lastY = e.clientY;
+  }
+
+  var subscribe = function subscribe(callback) {
+   subscribers.push(callback);
+  }
+
+  var unsubscribe = function unsubscribe(callback) {
+   var index = subscribers.indexOf(callback);
+   subscribers.splice(index, 1);
+  }
+
+  var notify = function notify(deltaX, deltaY) {
+   for (var i in subscribers)
+    subscribers[i](deltaX, deltaY);
+  }
+
+  return {
+   init : init,
+   subscribe : subscribe,
+   unsubscribe : unsubscribe
+  }
+
+ })();
+
+ var subject;
+ var units = ['px', '%'];
+ var output = null;
+
+ var UnitSelector = function UnitSelector(topic) {
+
+  this.container = document.createElement("div");
+  this.select = document.createElement("select");
+  for (var i in units) {
+   var option = document.createElement("option");
+   option.value = i;
+   option.textContent = units[i];
+   this.select.appendChild(option);
+  }
+
+  this.container.className = 'dropdown ' + 'unit-' + topic;
+  this.container.appendChild(this.select);
+ }
+
+ UnitSelector.prototype.setValue = function setValue(value) {
+  this.salect.value = value;
+ }
+
+
+ var RadiusContainer = function RadiusContainer(node) {
+  var radius = document.createElement('div');
+  var handle = document.createElement('div');
+  var x = node.getAttribute('data-x');
+  var y = node.getAttribute('data-y');
+  var active = false;
+
+  this.id = node.id;
+  this.node = node;
+  this.radius = radius;
+  this.handle = handle;
+  this.width = 100;
+  this.height = 50;
+  this.size = 0;
+  this.rounded = false;
+
+  this.unitX = 0;
+  this.unitY = 0;
+  this.unitR = 0;
+
+  this.maxW = 100;
+  this.maxH = 100;
+  this.maxR = 100;
+
+  this.topic = y + '-' + x;
+
+  var sliderW = InputSliderManager.getNode(this.topic + '-w');
+  var sliderH = InputSliderManager.getNode(this.topic + '-h');
+  var sliderR = InputSliderManager.getNode(this.topic);
+
+  this.setUnitX(this.unitX);
+  this.setUnitY(this.unitY);
+  this.setUnitR(this.unitR);
+
+  this.updateWidth();
+  this.updateHeight();
+  this.updateRadius();
+
+  if (x === 'left') this.resizeX =  1;
+  if (x === 'right') this.resizeX = -1;
+  if (y === 'top') this.resizeY =  1;
+  if (y === 'bottom') this.resizeY = -1;
+
+  radius.className = 'radius';
+
+  var unit_selector = document.getElementById("unit-selection");
+  var unitW = new UnitSelector(this.topic + '-w');
+  var unitH = new UnitSelector(this.topic + '-h');
+  var unitR = new UnitSelector(this.topic);
+
+  unit_selector.appendChild(unitW.container);
+  unit_selector.appendChild(unitH.container);
+  unit_selector.appendChild(unitR.container);
+  node.appendChild(radius);
+  subject.appendChild(handle);
+
+  unitW.select.addEventListener('change', function(e) {
+   this.setUnitX(e.target.value | 0);
+  }.bind(this));
+
+  unitH.select.addEventListener('change', function(e) {
+   this.setUnitY(e.target.value | 0);
+  }.bind(this));
+
+  unitR.select.addEventListener('change', function(e) {
+   this.setUnitR(e.target.value | 0);
+  }.bind(this));
+
+  if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+  if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+  if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+  if (x === 'left' && y == 'bottom')  handle.className = 'handle handle-bottom-left';
+
+  handle.addEventListener("mousedown", function(e) {
+   active = true;
+   this.radius.style.display = 'block';
+   PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+  }.bind(this));
+
+  document.addEventListener("mouseup", function(e) {
+   this.radius.style.display = 'none';
+   if (active === true)
+    PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+  }.bind(this));
+
+  InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+  InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+  InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+  ButtonManager.subscribe(this.topic, function(value) {
+   this.rounded = value;
+   if (value === true) {
+    unitW.container.style.display = 'none';
+    unitH.container.style.display = 'none';
+    unitR.container.style.display = 'block';
+    sliderW.style.display = 'none';
+    sliderH.style.display = 'none';
+    sliderR.style.display = 'block';
+    this.setUnitR(this.unitR);
+    this.updateRadius();
+   }
+
+   if (value === false) {
+    unitW.container.style.display = 'block';
+    unitH.container.style.display = 'block';
+    unitR.container.style.display = 'none';
+    sliderW.style.display = 'block';
+    sliderH.style.display = 'block';
+    sliderR.style.display = 'none';
+    this.setUnitX(this.unitX);
+    this.setUnitY(this.unitY);
+    this.updateWidth();
+    this.updateHeight();
+   }
+
+   this.updateBorderRadius();
+
+  }.bind(this));
+
+  this.updateBorderRadius();
+ }
+
+ RadiusContainer.prototype.updateWidth = function updateWidth() {
+  this.node.style.width = this.width + units[this.unitX];
+  var value = Math.round(this.width / 2);
+  InputSliderManager.setValue(this.topic + '-w', value, false);
+ }
+
+ RadiusContainer.prototype.updateHeight = function updateHeight() {
+  this.node.style.height = this.height + units[this.unitY];
+  var value = Math.round(this.height / 2);
+  InputSliderManager.setValue(this.topic + '-h', value, false);
+ }
+
+ RadiusContainer.prototype.updateRadius = function updateRadius() {
+  var value = Math.round(this.size / 2);
+  this.node.style.width = this.size + units[this.unitR];
+  this.node.style.height = this.size + units[this.unitR];
+  InputSliderManager.setValue(this.topic, value, false);
+ }
+
+ RadiusContainer.prototype.setWidth = function setWidth(value) {
+  this.radius.style.display = 'block';
+  this.width = 2 * value;
+  this.node.style.width = this.width + units[this.unitX];
+  this.updateBorderRadius();
+ }
+
+ RadiusContainer.prototype.setHeight = function setHeight(value) {
+  this.radius.style.display = 'block';
+  this.height = 2 * value;
+  this.node.style.height = this.height + units[this.unitY];
+  this.updateBorderRadius();
+ }
+
+ RadiusContainer.prototype.setRadius = function setRadius(value) {
+  this.radius.style.display = 'block';
+  this.size = 2 * value;
+  this.node.style.width = this.size + units[this.unitR];
+  this.node.style.height = this.size + units[this.unitR];
+  this.updateBorderRadius();
+ }
+
+ RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+  this.unitX = value;
+  if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+  if (this.unitX === 1) this.maxW = 200;
+  InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+  InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+ }
+
+ RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+  this.unitY = value;
+  if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+  if (this.unitY === 1) this.maxH = 200;
+  InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+  InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+ }
+
+ RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+  this.unitR = value;
+
+  if (this.unitR === 0)
+   this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+  if (this.unitR === 1)
+   this.maxR = 200;
+
+  InputSliderManager.setUnit(this.topic, units[this.unitR]);
+  InputSliderManager.setMax(this.topic, this.maxR / 2);
+ }
+
+ RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+  if (this.rounded) {
+   this.setUnitR(this.unitR);
+   return;
+  }
+
+  if (unit === 0)
+   this.setUnitX(this.unitX);
+
+  if (unit === 1)
+   this.setUnitY(this.unitY);
+ }
+
+ RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+  if (this.rounded === true) {
+   var unit = units[this.unitR];
+   var value = Math.round(this.size / 2);
+   return value + unit;
+  }
+
+  var unitX = units[this.unitX];
+  var unitY = units[this.unitY];
+  var valueX = Math.round(this.width / 2);
+  var valueY = Math.round(this.height / 2);
+
+  if (valueX === valueY && this.unitX === this.unitY)
+   return valueX + unitX;
+
+  return valueX + unitX + ' ' + valueY + unitY;
+ }
+
+ RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+  var radius = this.composeBorderRadius();
+  var corner = 0;
+
+  if (this.topic === 'top-left') {
+   subject.style.borderTopLeftRadius = radius;
+   corner = 0;
+  }
+
+  if (this.topic === 'top-right') {
+   subject.style.borderTopRightRadius = radius;
+   corner = 1;
+  }
+
+  if (this.topic === 'bottom-right') {
+   subject.style.borderBottomRightRadius = radius;
+   corner = 2;
+  }
+
+  if (this.topic === 'bottom-left') {
+   subject.style.borderBottomLeftRadius = radius;
+   corner = 3;
+  }
+
+  Tool.updateOutput(corner, radius);
+ }
+
+ RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+  if (this.rounded === true) {
+   this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+   if (this.size < 0) this.size = 0;
+   if (this.size > this.maxR) this.size = this.maxR;
+   this.updateRadius();
+   this.updateBorderRadius();
+   return;
+  }
+
+  if (deltaX) {
+   this.width += this.resizeX * deltaX;
+   if (this.width < 0) this.width = 0;
+   if (this.width > this.maxW) this.width = this.maxW;
+   this.updateWidth();
+  }
+
+  if (deltaY) {
+   this.height += this.resizeY * deltaY;
+   if (this.height < 0) this.height = 0;
+   if (this.height > this.maxH) this.height = this.maxH;
+   this.updateHeight();
+  }
+
+  if (deltaX || deltaY)
+   this.updateBorderRadius();
+ }
+
+
+ /**
+  * Tool Manager
+  */
+ var Tool = (function Tool() {
+  var preview;
+  var preview_ui;
+  var radius_containers = [];
+  var border_width = 3;
+  var borders1 = [null, null, null, null];
+  var borders2 = [0, 0, 0, 0];
+
+  var updateUIWidth = function updateUIWidth(value) {
+   var pwidth = subject.parentElement.clientWidth;
+   var left = (pwidth - value) / 2;
+   subject.style.width = value + "px";
+
+   for (var i = 0; i < 4; i++)
+    radius_containers[i].updateUnits(0);
+  }
+
+  var updateUIHeight = function updateUIHeight(value) {
+   var pheight = subject.parentElement.clientHeight;
+   var top = (pheight - value) / 2;
+   subject.style.height = value + "px";
+   subject.style.top = top - border_width + "px";
+
+   for (var i = 0; i < 4; i++)
+    radius_containers[i].updateUnits(1);
+  }
+
+  var updatePreviewUIWidth = function updatePreviewUIWidth() {
+   var p = subject.parentElement.clientWidth;
+   var v = preview_ui.clientWidth;
+   console.log(p, v, (p - v ) / 2);
+   preview_ui.style.left = (p - v) / 2 + "px" ;
+  }
+
+  var updatePreviewUIHeight = function updatePreviewUIHeight() {
+   var p = subject.parentElement.clientHeight;
+   var v = preview_ui.clientHeight;
+   console.log(p, v, (p - v ) / 2);
+   preview_ui.style.top = (p - v) / 2 + "px" ;
+  }
+
+  var updateOutput = function updateOutput(corner, radius) {
+   var values = radius.split(" ");
+
+   borders1[corner] = values[0];
+   borders2[corner] = values[0];
+
+   if (values.length === 2)
+    borders2[corner] = values[1];
+
+   var border_1_value = borders1.join(" ");
+   var border_2_value = borders2.join(" ");
+   var border_radius = 'border-radius: ' + border_1_value;
+
+   if (border_2_value !== border_1_value)
+    border_radius += ' / ' + border_2_value;
+
+   border_radius += ';';
+   output.textContent = border_radius;
+  }
+
+  var init = function init() {
+   preview = getElemById("preview");
+   subject = getElemById("subject");
+   output = getElemById("output");
+   preview_ui = getElemById("radius-ui-sliders");
+
+   var elem = document.querySelectorAll('.radius-container');
+   var size = elem.length;
+   for (var i = 0; i < size; i++)
+    radius_containers[i] = new RadiusContainer(elem[i]);
+
+   InputSliderManager.subscribe("width", updateUIWidth);
+   InputSliderManager.subscribe("height", updateUIHeight);
+
+   InputSliderManager.setValue("width", subject.clientWidth);
+   InputSliderManager.setValue("height", subject.clientHeight);
+  }
+
+  return {
+   init : init,
+   updateOutput : updateOutput
+  }
+
+ })();
+
+ /**
+  * Init Tool
+  */
+ var init = function init() {
+  ButtonManager.init();
+  InputSliderManager.init();
+  PreviewMouseTracking.init("preview");
+  Tool.init();
+ }
+
+ return {
+  init : init
+ }
 
 })();
 ```
diff --git a/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
index 604c63ccc28fd9..fd5ec3b7078067 100644
--- a/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
+++ b/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
@@ -23,7 +23,7 @@ Especificar fondos múltiples es fácil:
 }
 ```
 
-Puedes hacerlo con la propiedad atajo {{ cssxref("background") }} y con las propiedades individuales, excepto {{ cssxref("background-color") }}. Es decir, las siguientes propiedades pueden ser especificadas como lista, una por cada fondo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},` `{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.
+Puedes hacerlo con la propiedad atajo {{ cssxref("background") }} y con las propiedades individuales, excepto {{ cssxref("background-color") }}. Es decir, las siguientes propiedades pueden ser especificadas como lista, una por cada fondo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},``{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.
 
 ## Ejemplo
 
diff --git a/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.md b/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.md
index 5f591e4474cc5d..1efdcd9add8239 100644
--- a/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.md
+++ b/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.md
@@ -27,7 +27,7 @@ El espesor del relleno está determinado por las propiedades {{cssxref("padding-
 
 El **área del borde**, delimitada por el límite del borde, extiende el área de relleno para incluir los bordes del elemento. Sus dimensiones son el _ancho de la caja del borde_ y la _altura de la caja del borde_.
 
-El espesor de los bordes está determinado por las propiedades {{cssxref("border-width")}} y la propiedad abreviada {{cssxref("border")}}. Si la propiedad {{cssxref("box-sizing")}} se establece en `border-box`, el tamaño del área del borde se puede definir explícitamente con las propiedades {{cssxref("width")}}, {{cssxref("min- width")}}, {{cssxref("max-width")}}, {{cssxref("height")}}, {{cssxref("min-height")}}, y {{cssxref("max-height")}}.
+El espesor de los bordes está determinado por las propiedades {{cssxref("border-width")}} y la propiedad abreviada {{cssxref("border")}}. Si la propiedad {{cssxref("box-sizing")}} se establece en `border-box`, el tamaño del área del borde se puede definir explícitamente con las propiedades {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{cssxref("height")}}, {{cssxref("min-height")}}, y {{cssxref("max-height")}}.
 
 El **área del margen**, delimitada por el límite del margen, extiende el área del borde para incluir un área vacía utilizada para separar el elemento de sus vecinos. Sus dimensiones son el _ancho de la caja del margen_ y la _altura de la caja del margen_.
 
diff --git a/files/es/web/css/css_colors/color_picker_tool/index.md b/files/es/web/css/css_colors/color_picker_tool/index.md
index 51ee24ab9fa4d1..5da01c6ad8dd24 100644
--- a/files/es/web/css/css_colors/color_picker_tool/index.md
+++ b/files/es/web/css/css_colors/color_picker_tool/index.md
@@ -40,257 +40,257 @@ original_slug: Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color
  */
 
 .ui-color-picker {
-	width: 420px;
-	margin: 0;
-	border: 1px solid #DDD;
-	background-color: #FFF;
-	display: table;
+ width: 420px;
+ margin: 0;
+ border: 1px solid #DDD;
+ background-color: #FFF;
+ display: table;
 
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
 }
 
 .ui-color-picker .picking-area {
-	width: 198px;
-	height: 198px;
-	margin: 5px;
-	border: 1px solid #DDD;
-	position: relative;
-	float: left;
-	display: table;
+ width: 198px;
+ height: 198px;
+ margin: 5px;
+ border: 1px solid #DDD;
+ position: relative;
+ float: left;
+ display: table;
 }
 
 .ui-color-picker .picking-area:hover {
-	cursor: default;
+ cursor: default;
 }
 
 /* HSV format - Hue-Saturation-Value(Brightness) */
 .ui-color-picker .picking-area {
-	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+ background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
 
-	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+ background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+    -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+ background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+    -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+ background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+    -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+ background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+    -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
 
-	background-color: #F00;
+ background-color: #F00;
 }
 
 /* HSL format - Hue-Saturation-Lightness */
 .ui-color-picker[data-mode='HSL'] .picking-area {
-	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background-color: #F00;
+ background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+         hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+    -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+ background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+         hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+    -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+ background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+         hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+    -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+ background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+         hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+    -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+ background-color: #F00;
 }
 
 .ui-color-picker .picker {
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-	border: 1px solid #FFF;
-	position: absolute;
-	top: 45%;
-	left: 45%;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ border: 1px solid #FFF;
+ position: absolute;
+ top: 45%;
+ left: 45%;
 }
 
 .ui-color-picker .picker:before {
-	width: 8px;
-	height: 8px;
-	content: "";
-	position: absolute;
-	border: 1px solid #999;
-	border-radius: 50%;
+ width: 8px;
+ height: 8px;
+ content: "";
+ position: absolute;
+ border: 1px solid #999;
+ border-radius: 50%;
 }
 
 .ui-color-picker .hue,
 .ui-color-picker .alpha {
-	width: 198px;
-	height: 28px;
-	margin: 5px;
-	border: 1px solid #FFF;
-	float: left;
+ width: 198px;
+ height: 28px;
+ margin: 5px;
+ border: 1px solid #FFF;
+ float: left;
 }
 
 .ui-color-picker .hue {
-	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
-	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
+ background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+ background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+    #00F 66.66%, #F0F 83.33%, #F00 100%);
+ background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+    #00F 66.66%, #F0F 83.33%, #F00 100%);
+ background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+    #00F 66.66%, #F0F 83.33%, #F00 100%);
+ background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+    #00F 66.66%, #F0F 83.33%, #F00 100%);
 }
 
 .ui-color-picker .alpha {
-	border: 1px solid #CCC;
-	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+ border: 1px solid #CCC;
+ background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
 }
 
 .ui-color-picker .alpha-mask {
-	width: 100%;
-	height: 100%;
-	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+ width: 100%;
+ height: 100%;
+ background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
 }
 
 .ui-color-picker .slider-picker {
-	width: 2px;
-	height: 100%;
-	border: 1px solid #777;
-	background-color: #FFF;
-	position: relative;
-	top: -1px;
+ width: 2px;
+ height: 100%;
+ border: 1px solid #777;
+ background-color: #FFF;
+ position: relative;
+ top: -1px;
 }
 
 /* input HSV and RGB */
 
 .ui-color-picker .info {
-	width: 200px;
-	margin: 5px;
-	float: left;
+ width: 200px;
+ margin: 5px;
+ float: left;
 }
 
 .ui-color-picker .info * {
-	float: left;
+ float: left;
 }
 
 .ui-color-picker .input {
-	width: 64px;
-	margin: 5px 2px;
-	float: left;
+ width: 64px;
+ margin: 5px 2px;
+ float: left;
 }
 
 .ui-color-picker .input .name {
-	height: 20px;
-	width: 30px;
-	text-align: center;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
+ height: 20px;
+ width: 30px;
+ text-align: center;
+ font-size: 14px;
+ line-height: 18px;
+ float: left;
 }
 
 .ui-color-picker .input input {
-	width: 30px;
-	height: 18px;
-	margin: 0;
-	padding: 0;
-	border: 1px solid #DDD;
-	text-align: center;
-	float: right;
+ width: 30px;
+ height: 18px;
+ margin: 0;
+ padding: 0;
+ border: 1px solid #DDD;
+ text-align: center;
+ float: right;
 
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
+ -moz-user-select: text;
+ -webkit-user-select: text;
+ -ms-user-select: text;
 }
 
 .ui-color-picker .input[data-topic="lightness"] {
-	display: none;
+ display: none;
 }
 
 .ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
-	display: none;
+ display: none;
 }
 
 .ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
-	display: block;
+ display: block;
 }
 
 .ui-color-picker .input[data-topic="alpha"] {
-	margin-top: 10px;
-	width: 93px;
+ margin-top: 10px;
+ width: 93px;
 }
 
 .ui-color-picker .input[data-topic="alpha"] > .name {
-	width: 60px;
+ width: 60px;
 }
 
 .ui-color-picker .input[data-topic="alpha"] > input {
-	float: right;
+ float: right;
 }
 
 .ui-color-picker .input[data-topic="hexa"] {
-	width: auto;
-	float: right;
-	margin: 6px 8px 0 0;
+ width: auto;
+ float: right;
+ margin: 6px 8px 0 0;
 }
 
 .ui-color-picker .input[data-topic="hexa"] > .name {
-	display: none;
+ display: none;
 }
 
 .ui-color-picker .input[data-topic="hexa"] > input {
-	width: 90px;
-	height: 24px;
-	padding: 2px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ width: 90px;
+ height: 24px;
+ padding: 2px 0;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 }
 
 /* Preview color */
 .ui-color-picker .preview {
-	width: 95px;
-	height: 53px;
-	margin: 5px;
-	margin-top: 10px;
-	border: 1px solid #DDD;
-	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-	float: left;
-	position: relative;
+ width: 95px;
+ height: 53px;
+ margin: 5px;
+ margin-top: 10px;
+ border: 1px solid #DDD;
+ background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+ float: left;
+ position: relative;
 }
 
 .ui-color-picker .preview:before {
-	height: 100%;
-	width: 50%;
-	left: 50%;
-	top: 0;
-	content: "";
-	background: #FFF;
-	position: absolute;
-	z-index: 1;
+ height: 100%;
+ width: 50%;
+ left: 50%;
+ top: 0;
+ content: "";
+ background: #FFF;
+ position: absolute;
+ z-index: 1;
 }
 
 .ui-color-picker .preview-color {
-	width: 100%;
-	height: 100%;
-	background-color: rgba(255, 0, 0, 0.5);
-	position: absolute;
-	z-index: 1;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(255, 0, 0, 0.5);
+ position: absolute;
+ z-index: 1;
 }
 
 .ui-color-picker .switch_mode {
-	width: 10px;
-	height: 20px;
-	position: relative;
-	border-radius: 5px 0 0 5px;
-	border: 1px solid #DDD;
-	background-color: #EEE;
-	left: -12px;
-	top: -1px;
-	z-index: 1;
-	transition: all 0.5s;
+ width: 10px;
+ height: 20px;
+ position: relative;
+ border-radius: 5px 0 0 5px;
+ border: 1px solid #DDD;
+ background-color: #EEE;
+ left: -12px;
+ top: -1px;
+ z-index: 1;
+ transition: all 0.5s;
 }
 
 .ui-color-picker .switch_mode:hover {
-	background-color: #CCC;
-	cursor: pointer;
+ background-color: #CCC;
+ cursor: pointer;
 }
 
 /*
@@ -298,68 +298,68 @@ original_slug: Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color
  */
 
 .ui-input-slider {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
+ height: 20px;
+ font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+ -moz-user-select: none;
+ user-select: none;
 }
 
 .ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
+ float: left;
+ height: 100%;
+ line-height: 100%;
 }
 
 /* Input Slider */
 
 .ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
+ margin: 0;
+ padding: 0;
+ width: 50px;
+ text-align: center;
 
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 }
 
 .ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
+ width: 90px;
+ padding: 0px 10px 0px 0px;
+ text-align: right;
+ text-transform: lowercase;
 }
 
 .ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+ width: 16px;
+ cursor: pointer;
+ background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
 }
 
 .ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+ background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
 }
 
 .ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
+ width: 90px;
+ padding: 0 10px 0 0;
+ text-align: right;
+ text-transform: lowercase;
 }
 
 .ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
+ width: 25px;
+ background-color: #2C9FC9;
+ border-radius: 5px;
+ color: #FFF;
+ font-weight: bold;
+ line-height: 14px;
+ text-align: center;
 }
 
 .ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
+ background-color: #379B4A;
+ cursor: pointer;
 }
 
 /*
@@ -367,21 +367,21 @@ original_slug: Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color
  */
 
 body {
-	max-width: 1000px;
-	margin: 0 auto;
+ max-width: 1000px;
+ margin: 0 auto;
 
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+ font-family: "Segoe UI", Arial, Helvetica, sans-serif;
 
-	box-shadow: 0 0 5px 0 #999;
+ box-shadow: 0 0 5px 0 #999;
 
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
 
 }
 
@@ -389,73 +389,73 @@ body {
  * Resize Handle
  */
 .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
+ width: 10px;
+ height: 10px;
+ background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+ position: absolute;
+ bottom: 0;
+ right: 0;
 }
 
 [data-resize='both']:hover {
-	cursor: nw-resize !important;
+ cursor: nw-resize !important;
 }
 
 [data-resize='width']:hover {
-	cursor: w-resize !important;
+ cursor: w-resize !important;
 }
 
 [data-resize='height']:hover {
-	cursor: n-resize !important;
+ cursor: n-resize !important;
 }
 
 [data-hidden='true'] {
-	display: none;
+ display: none;
 }
 
 [data-collapsed='true'] {
-	height: 0 !important;
+ height: 0 !important;
 }
 
 .block {
-	display: table;
+ display: table;
 }
 
 
 /**
- * 	Container
+ *  Container
  */
 #container {
-	width: 100%;
+ width: 100%;
 
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 
-	display: table;
+ display: table;
 }
 
 /**
- * 	Picker Zone
+ *  Picker Zone
  */
 
 #picker {
-	padding: 10px;
-	width: 980px;
+ padding: 10px;
+ width: 980px;
 }
 
 .ui-color-picker {
-	padding: 3px 5px;
-	float: left;
-	border-color: #FFF;
+ padding: 3px 5px;
+ float: left;
+ border-color: #FFF;
 }
 
 .ui-color-picker .switch_mode {
-	display: none;
+ display: none;
 }
 
 .ui-color-picker .preview-color:hover {
-	cursor: move;
+ cursor: move;
 }
 
 /**
@@ -463,403 +463,403 @@ body {
  */
 
 #picker-samples {
-	width: 375px;
-	height: 114px;
-	max-height: 218px;
-	margin: 0 10px 0 30px;
-	overflow: hidden;
-	position: relative;
-	float: left;
+ width: 375px;
+ height: 114px;
+ max-height: 218px;
+ margin: 0 10px 0 30px;
+ overflow: hidden;
+ position: relative;
+ float: left;
 
-	transition: all 0.2s;
+ transition: all 0.2s;
 }
 
 #picker-samples .sample {
-	width: 40px;
-	height: 40px;
-	margin: 5px;
-	border: 1px solid #DDD;
-	position: absolute;
-	float: left;
-	transition: all 0.2s;
+ width: 40px;
+ height: 40px;
+ margin: 5px;
+ border: 1px solid #DDD;
+ position: absolute;
+ float: left;
+ transition: all 0.2s;
 }
 
 #picker-samples .sample:hover {
-	cursor: pointer;
-	border-color: #BBB;
-	transform: scale(1.15);
-	border-radius: 3px;
+ cursor: pointer;
+ border-color: #BBB;
+ transform: scale(1.15);
+ border-radius: 3px;
 }
 
 #picker-samples .sample[data-active='true'] {
-	border-color: #999;
+ border-color: #999;
 }
 
 #picker-samples .sample[data-active='true']:after {
-	content: "";
-	position: absolute;
-	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-	width: 100%;
-	height: 12px;
-	top: -12px;
-	z-index: 2;
+ content: "";
+ position: absolute;
+ background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+ width: 100%;
+ height: 12px;
+ top: -12px;
+ z-index: 2;
 }
 
 #picker-samples #add-icon {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	box-shadow: inset 0px 0px 2px 0px #DDD;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ box-shadow: inset 0px 0px 2px 0px #DDD;
 }
 
 #picker-samples #add-icon:hover {
-	cursor: pointer;
-	border-color: #DDD;
-	box-shadow: inset 0px 0px 5px 0px #CCC;
+ cursor: pointer;
+ border-color: #DDD;
+ box-shadow: inset 0px 0px 5px 0px #CCC;
 }
 
 #picker-samples #add-icon:before,
 #picker-samples #add-icon:after {
-	content: "";
-	position: absolute;
-	background-color: #EEE;
-	box-shadow: 0 0 1px 0 #EEE;
+ content: "";
+ position: absolute;
+ background-color: #EEE;
+ box-shadow: 0 0 1px 0 #EEE;
 }
 
 #picker-samples #add-icon:before {
-	width: 70%;
-	height: 16%;
-	top: 42%;
-	left: 15%;
+ width: 70%;
+ height: 16%;
+ top: 42%;
+ left: 15%;
 }
 
 #picker-samples #add-icon:after {
-	width: 16%;
-	height: 70%;
-	top: 15%;
-	left: 42%;
+ width: 16%;
+ height: 70%;
+ top: 15%;
+ left: 42%;
 }
 
 #picker-samples #add-icon:hover:before,
 #picker-samples #add-icon:hover:after {
-	background-color: #DDD;
-	box-shadow: 0 0 1px 0 #DDD;
+ background-color: #DDD;
+ box-shadow: 0 0 1px 0 #DDD;
 }
 
 /**
- * 	Controls
+ *  Controls
  */
 
 #controls {
-	width: 110px;
-	padding: 10px;
-	float: right;
+ width: 110px;
+ padding: 10px;
+ float: right;
 }
 
 #controls #picker-switch {
-	text-align: center;
-	float: left;
+ text-align: center;
+ float: left;
 }
 
 #controls .icon {
-	width: 48px;
-	height: 48px;
-	margin: 10px 0;
-	background-repeat: no-repeat;
-	background-position: center;
-	border: 1px solid #DDD;
-	display: table;
-	float: left;
+ width: 48px;
+ height: 48px;
+ margin: 10px 0;
+ background-repeat: no-repeat;
+ background-position: center;
+ border: 1px solid #DDD;
+ display: table;
+ float: left;
 }
 
 #controls .icon:hover {
-	cursor: pointer;
+ cursor: pointer;
 }
 
 #controls .picker-icon {
-	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+ background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
 }
 
 #controls #void-sample {
-	margin-right: 10px;
-	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
-	background-position: center left;
+ margin-right: 10px;
+ background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+ background-position: center left;
 }
 
 #controls #void-sample[data-active='true'] {
-	border-color: #CCC;
-	background-position: center right;
+ border-color: #CCC;
+ background-position: center right;
 }
 
 #controls .switch {
-	width: 106px;
-	padding: 1px;
-	border: 1px solid #CCC;
-	font-size: 14px;
-	text-align: center;
-	line-height: 24px;
-	overflow: hidden;
-	float: left;
+ width: 106px;
+ padding: 1px;
+ border: 1px solid #CCC;
+ font-size: 14px;
+ text-align: center;
+ line-height: 24px;
+ overflow: hidden;
+ float: left;
 }
 
 #controls .switch:hover {
-	cursor: pointer;
+ cursor: pointer;
 }
 
 #controls .switch > * {
-	width: 50%;
-	padding: 2px 0;
-	background-color: #EEE;
-	float: left;
+ width: 50%;
+ padding: 2px 0;
+ background-color: #EEE;
+ float: left;
 }
 
 #controls .switch [data-active='true'] {
-	color: #FFF;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-color: #777;
+ color: #FFF;
+ background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+ background-color: #777;
 }
 
 /**
- * 	Trash Can
+ *  Trash Can
  */
 
 #delete {
-	width: 100%;
-	height: 94px;
-	background-color: #DDD;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
+ width: 100%;
+ height: 94px;
+ background-color: #DDD;
+ background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+ background-repeat: repeat;
 
-	text-align: center;
-	color: #777;
+ text-align: center;
+ color: #777;
 
-	position: relative;
-	float: right;
+ position: relative;
+ float: right;
 }
 
 #delete #trash-can {
-	width: 80%;
-	height: 80%;
-	border: 2px dashed #FFF;
-	border-radius: 5px;
-	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+ width: 80%;
+ height: 80%;
+ border: 2px dashed #FFF;
+ border-radius: 5px;
+ background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
 
-	position: absolute;
-	top: 10%;
-	left: 10%;
+ position: absolute;
+ top: 10%;
+ left: 10%;
 
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 
-	transition: all 0.2s;
+ transition: all 0.2s;
 }
 
 #delete[drag-state='enter'] {
-	background-color: #999;
+ background-color: #999;
 }
 
 /**
- * 	Color Theme
+ *  Color Theme
  */
 
 #color-theme {
-	margin: 0 8px 0 0;
-	border: 1px solid #EEE;
-	display: inline-block;
-	float: right;
+ margin: 0 8px 0 0;
+ border: 1px solid #EEE;
+ display: inline-block;
+ float: right;
 }
 
 #color-theme .box {
-	width: 80px;
-	height: 92px;
-	float: left;
+ width: 80px;
+ height: 92px;
+ float: left;
 }
 
 /**
  * Color info box
  */
 #color-info {
-	width: 360px;
-	float: left;
+ width: 360px;
+ float: left;
 }
 
 #color-info .title {
-	width: 100%;
-	padding: 15px;
-	font-size: 18px;
-	text-align: center;
-	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
-	background-repeat:no-repeat;
-	background-position: center left 30%;
+ width: 100%;
+ padding: 15px;
+ font-size: 18px;
+ text-align: center;
+ background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+ background-repeat:no-repeat;
+ background-position: center left 30%;
 }
 
 #color-info .copy-container {
-	position: absolute;
-	top: -100%;
+ position: absolute;
+ top: -100%;
 }
 
 #color-info .property {
-	min-width: 280px;
-	height: 30px;
-	margin: 10px 0;
-	text-align: center;
-	line-height: 30px;
+ min-width: 280px;
+ height: 30px;
+ margin: 10px 0;
+ text-align: center;
+ line-height: 30px;
 }
 
 #color-info .property > * {
-	float: left;
+ float: left;
 }
 
 #color-info .property .type {
-	width: 60px;
-	height: 100%;
-	padding: 0 16px 0 0;
-	text-align: right;
+ width: 60px;
+ height: 100%;
+ padding: 0 16px 0 0;
+ text-align: right;
 }
 
 #color-info .property .value {
-	width: 200px;
-	height: 100%;
-	padding: 0 10px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 16px;
-	color: #777;
-	text-align: center;
-	background-color: #FFF;
-	border: none;
+ width: 200px;
+ height: 100%;
+ padding: 0 10px;
+ font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+ font-size: 16px;
+ color: #777;
+ text-align: center;
+ background-color: #FFF;
+ border: none;
 }
 
 #color-info .property .value:hover {
-	color: #37994A;
+ color: #37994A;
 }
 
 #color-info .property .value:hover + .copy {
-	background-position: center right;
+ background-position: center right;
 }
 
 #color-info .property .copy {
-	width: 24px;
-	height: 100%;
-	padding: 0 5px;
-	background-color: #FFF;
-	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
-	background-repeat: no-repeat;
-	background-position: center left;
-	border-left: 1px solid #EEE;
-	text-align: right;
-	float: left;
+ width: 24px;
+ height: 100%;
+ padding: 0 5px;
+ background-color: #FFF;
+ background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+ background-repeat: no-repeat;
+ background-position: center left;
+ border-left: 1px solid #EEE;
+ text-align: right;
+ float: left;
 }
 
 #color-info .property .copy:hover {
-	background-position: center right;
+ background-position: center right;
 }
 
 
 /**
- * 	Color Palette
+ *  Color Palette
  */
 
 #palette {
-	width: 1000px;
-	padding: 10px 0;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-	background-color: #EEE;
-	color: #777;
+ width: 1000px;
+ padding: 10px 0;
+ background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+ background-repeat: repeat;
+ background-color: #EEE;
+ color: #777;
 
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
 }
 
 #color-palette {
-	width: 640px;
-	font-family: Arial, Helvetica, sans-serif;
-	color: #777;
-	float: left;
+ width: 640px;
+ font-family: Arial, Helvetica, sans-serif;
+ color: #777;
+ float: left;
 }
 
 #color-palette .container {
-	width: 100%;
-	height: 50px;
-	line-height: 50px;
-	overflow: hidden;
-	float: left;
-	transition: all 0.5s;
+ width: 100%;
+ height: 50px;
+ line-height: 50px;
+ overflow: hidden;
+ float: left;
+ transition: all 0.5s;
 }
 
 #color-palette .container > * {
-	float: left;
+ float: left;
 }
 
 #color-palette .title {
-	width: 100px;
-	padding: 0 10px;
-	text-align: right;
-	line-height: inherit;
+ width: 100px;
+ padding: 0 10px;
+ text-align: right;
+ line-height: inherit;
 }
 
 #color-palette .palette {
-	width: 456px;
-	height: 38px;
-	margin: 3px;
-	padding: 3px;
-	display: table;
-	background-color: #FFF;
+ width: 456px;
+ height: 38px;
+ margin: 3px;
+ padding: 3px;
+ display: table;
+ background-color: #FFF;
 }
 
 #color-palette .palette .sample {
-	width: 30px;
-	height: 30px;
-	margin: 3px;
-	position: relative;
-	border: 1px solid #DDD;
-	float: left;
-	transition: all 0.2s;
+ width: 30px;
+ height: 30px;
+ margin: 3px;
+ position: relative;
+ border: 1px solid #DDD;
+ float: left;
+ transition: all 0.2s;
 }
 
 #color-palette .palette .sample:hover {
-	cursor: pointer;
-	border-color: #BBB;
-	transform: scale(1.15);
-	border-radius: 3px;
+ cursor: pointer;
+ border-color: #BBB;
+ transform: scale(1.15);
+ border-radius: 3px;
 }
 
 #color-palette .controls {
 }
 
 #color-palette .controls > * {
-	float: left;
+ float: left;
 }
 
 #color-palette .controls > *:hover {
-	cursor: pointer;
+ cursor: pointer;
 }
 
 #color-palette .controls .lock {
-	width: 24px;
-	height: 24px;
-	margin: 10px;
-	padding: 3px;
-	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
-	background-repeat: no-repeat;
-	background-position: bottom right;
+ width: 24px;
+ height: 24px;
+ margin: 10px;
+ padding: 3px;
+ background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+ background-repeat: no-repeat;
+ background-position: bottom right;
 }
 
 #color-palette .controls .lock:hover {
-	/*background-image: url('images/unlocked-hover.png');*/
-	background-position: bottom left;
+ /*background-image: url('images/unlocked-hover.png');*/
+ background-position: bottom left;
 }
 
 #color-palette .controls .lock[locked-state='true'] {
-	/*background-image: url('images/locked.png');*/
-	background-position: top left ;
+ /*background-image: url('images/locked.png');*/
+ background-position: top left ;
 }
 
 #color-palette .controls .lock[locked-state='true']:hover {
-	/*background-image: url('images/lock-hover.png');*/
-	background-position: top right;
+ /*background-image: url('images/lock-hover.png');*/
+ background-position: top right;
 }
 
 /**
@@ -867,117 +867,117 @@ body {
  */
 
 #canvas {
-	width: 100%;
-	height: 300px;
-	min-height: 250px;
-	border-top: 1px solid #DDD;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-	position: relative;
-	float: left;
+ width: 100%;
+ height: 300px;
+ min-height: 250px;
+ border-top: 1px solid #DDD;
+ background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+ background-repeat: repeat;
+ position: relative;
+ float: left;
 }
 
 #canvas[data-tutorial='drop'] {
-	text-align: center;
-	font-size: 30px;
-	color: #777;
+ text-align: center;
+ font-size: 30px;
+ color: #777;
 }
 
 #canvas[data-tutorial='drop']:before {
-	content: "Drop colors here to compare";
-	width: 40%;
-	padding: 30px 9% 70px 11%;
+ content: "Drop colors here to compare";
+ width: 40%;
+ padding: 30px 9% 70px 11%;
 
-	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
-	background-repeat: no-repeat;
-	background-position: left 35px top 60%;
+ background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+ background-repeat: no-repeat;
+ background-position: left 35px top 60%;
 
-	text-align: right;
+ text-align: right;
 
-	border: 3px dashed rgb(221, 221, 221);
-	border-radius: 15px;
+ border: 3px dashed rgb(221, 221, 221);
+ border-radius: 15px;
 
-	position: absolute;
-	top: 50px;
-	left: 20%;
+ position: absolute;
+ top: 50px;
+ left: 20%;
 }
 
 #canvas[data-tutorial='drop']:after {
-	content: "adjust, change or modify";
-	width: 40%;
-	font-size: 24px;
-	position: absolute;
-	top: 130px;
-	left: 32%;
-	z-index: 2;
+ content: "adjust, change or modify";
+ width: 40%;
+ font-size: 24px;
+ position: absolute;
+ top: 130px;
+ left: 32%;
+ z-index: 2;
 }
 
 #canvas [data-tutorial='dblclick'] {
-	background-color: #999 !important;
+ background-color: #999 !important;
 }
 
 #canvas [data-tutorial='dblclick']:before {
-	content: "double click to activate";
-	width: 80px;
-	color: #FFF;
-	position: absolute;
-	top: 10%;
-	left: 20%;
-	z-index: 2;
+ content: "double click to activate";
+ width: 80px;
+ color: #FFF;
+ position: absolute;
+ top: 10%;
+ left: 20%;
+ z-index: 2;
 }
 
 #canvas .sample {
-	width: 100px;
-	height: 100px;
-	min-width: 20px;
-	min-height: 20px;
-	position: absolute;
-	border: 1px solid rgba(255, 255, 255, 0.3);
+ width: 100px;
+ height: 100px;
+ min-width: 20px;
+ min-height: 20px;
+ position: absolute;
+ border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 #canvas .sample:hover {
-	cursor: move;
+ cursor: move;
 }
 
 #canvas .sample[data-active='true']:after {
-	content: "";
-	position: absolute;
-	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-	width: 100%;
-	height: 12px;
-	top: -12px;
-	z-index: 2;
+ content: "";
+ position: absolute;
+ background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+ width: 100%;
+ height: 12px;
+ top: -12px;
+ z-index: 2;
 }
 
 #canvas .sample:hover > * {
-	cursor: pointer;
-	display: block !important;
+ cursor: pointer;
+ display: block !important;
 }
 
 #canvas .sample .resize-handle {
-	display: none;
+ display: none;
 }
 
 #canvas .sample .pick {
-	width: 10px;
-	height: 10px;
-	margin: 5px;
-	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
-	position: absolute;
-	top: 0;
-	left: 0;
-	display: none;
+ width: 10px;
+ height: 10px;
+ margin: 5px;
+ background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: none;
 }
 
 #canvas .sample .delete {
-	width: 10px;
-	height: 10px;
-	margin: 5px;
-	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0;
-	display: none;
+ width: 10px;
+ height: 10px;
+ margin: 5px;
+ background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: none;
 }
 
 
@@ -986,53 +986,53 @@ body {
  */
 
 #canvas .toggle-bg {
-	width: 16px;
-	height: 16px;
-	margin: 5px;
-	background: url("images/canvas-controls.png") center left no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0;
+ width: 16px;
+ height: 16px;
+ margin: 5px;
+ background: url("images/canvas-controls.png") center left no-repeat;
+ position: absolute;
+ top: 0;
+ right: 0;
 }
 
 #canvas .toggle-bg:hover {
-	cursor: pointer;
+ cursor: pointer;
 }
 
 #canvas[data-bg='true'] {
-	background: none;
+ background: none;
 }
 
 #canvas[data-bg='true'] .toggle-bg {
-	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+ background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
 }
 
 #zindex {
-	height: 20px;
-	margin: 5px;
-	font-size: 16px;
-	position: absolute;
-	opacity: 0;
-	top: -10000px;
-	left: 0;
-	color: #777;
-	float: left;
-	transition: opacity 1s;
+ height: 20px;
+ margin: 5px;
+ font-size: 16px;
+ position: absolute;
+ opacity: 0;
+ top: -10000px;
+ left: 0;
+ color: #777;
+ float: left;
+ transition: opacity 1s;
 }
 
 #zindex input {
-	border: 1px solid #DDD;
-	font-size: 16px;
-	color: #777;
+ border: 1px solid #DDD;
+ font-size: 16px;
+ color: #777;
 }
 
 #zindex .ui-input-slider-info {
-	width: 60px;
+ width: 60px;
 }
 
 #zindex[data-active='true'] {
-	top: 0;
-	opacity: 1;
+ top: 0;
+ opacity: 1;
 }
 ```
 
@@ -1041,904 +1041,904 @@ body {
 
 var UIColorPicker = (function UIColorPicker() {
 
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	var subscribers = [];
-	var pickers = [];
-
-	/**
-	 * RGBA Color class
-	 *
-	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
-	 * @param hue			0-360
-	 * @param saturation	0-100
-	 * @param value 		0-100
-	 * @param lightness		0-100
-	 */
-
-	function Color(color) {
-
-		if(color instanceof Color === true) {
-			this.copy(color);
-			return;
-		}
-
-		this.r = 0;
-		this.g = 0;
-		this.b = 0;
-		this.a = 1;
-		this.hue = 0;
-		this.saturation = 0;
-		this.value = 0;
-		this.lightness = 0;
-		this.format = 'HSV';
-	}
-
-	function RGBColor(r, g, b) {
-		var color = new Color();
-		color.setRGBA(r, g, b, 1);
-		return color;
-	}
-
-	function RGBAColor(r, g, b, a) {
-		var color = new Color();
-		color.setRGBA(r, g, b, a);
-		return color;
-	}
-
-	function HSVColor(h, s, v) {
-		var color = new Color();
-		color.setHSV(h, s, v);
-		return color;
-	}
-
-	function HSVAColor(h, s, v, a) {
-		var color = new Color();
-		color.setHSV(h, s, v);
-		color.a = a;
-		return color;
-	}
-
-	function HSLColor(h, s, l) {
-		var color = new Color();
-		color.setHSL(h, s, l);
-		return color;
-	}
-
-	function HSLAColor(h, s, l, a) {
-		var color = new Color();
-		color.setHSL(h, s, l);
-		color.a = a;
-		return color;
-	}
-
-	Color.prototype.copy = function copy(obj) {
-		if(obj instanceof Color !== true) {
-			console.log('Typeof parameter not Color');
-			return;
-		}
-
-		this.r = obj.r;
-		this.g = obj.g;
-		this.b = obj.b;
-		this.a = obj.a;
-		this.hue = obj.hue;
-		this.saturation = obj.saturation;
-		this.value = obj.value;
-		this.format = '' + obj.format;
-		this.lightness = obj.lightness;
-	};
-
-	Color.prototype.setFormat = function setFormat(format) {
-		if (format === 'HSV')
-			this.format = 'HSV';
-		if (format === 'HSL')
-			this.format = 'HSL';
-	};
-
-	/*========== Methods to set Color Properties ==========*/
-
-	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
-		return (typeof(value) === 'number' && isNaN(value) === false &&
-			value >= 0 && value <= 255);
-	};
-
-	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-		if (this.isValidRGBValue(red) === false ||
-			this.isValidRGBValue(green) === false ||
-			this.isValidRGBValue(blue) === false)
-			return;
-
-			this.r = red | 0;
-			this.g = green | 0;
-			this.b = blue | 0;
-
-		if (this.isValidRGBValue(alpha) === true)
-			this.a = alpha | 0;
-	};
-
-	Color.prototype.setByName = function setByName(name, value) {
-		if (name === 'r' || name === 'g' || name === 'b') {
-			if(this.isValidRGBValue(value) === false)
-				return;
-
-			this[name] = value;
-			this.updateHSX();
-		}
-	};
-
-	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.value = value;
-		this.HSVtoRGB();
-	};
-
-	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.lightness = lightness;
-		this.HSLtoRGB();
-	};
-
-	Color.prototype.setHue = function setHue(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 359)
-			return;
-		this.hue = value;
-		this.updateRGB();
-	};
-
-	Color.prototype.setSaturation = function setSaturation(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.saturation = value;
-		this.updateRGB();
-	};
-
-	Color.prototype.setValue = function setValue(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.value = value;
-		this.HSVtoRGB();
-	};
-
-	Color.prototype.setLightness = function setLightness(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.lightness = value;
-		this.HSLtoRGB();
-	};
-
-	Color.prototype.setHexa = function setHexa(value) {
-		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
-
-		if (valid !== true)
-			return;
-
-		if (value[0] === '#')
-			value = value.slice(1, value.length);
-
-		if (value.length === 3)
-			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
-
-		this.r = parseInt(value.substr(0, 2), 16);
-		this.g = parseInt(value.substr(2, 2), 16);
-		this.b = parseInt(value.substr(4, 2), 16);
-
-		this.alpha	= 1;
-		this.RGBtoHSV();
-	};
-
-	/*========== Conversion Methods ==========*/
-
-	Color.prototype.convertToHSL = function convertToHSL() {
-		if (this.format === 'HSL')
-			return;
-
-		this.setFormat('HSL');
-		this.RGBtoHSL();
-	};
-
-	Color.prototype.convertToHSV = function convertToHSV() {
-		if (this.format === 'HSV')
-			return;
-
-		this.setFormat('HSV');
-		this.RGBtoHSV();
-	};
-
-	/*========== Update Methods ==========*/
-
-	Color.prototype.updateRGB = function updateRGB() {
-		if (this.format === 'HSV') {
-			this.HSVtoRGB();
-			return;
-		}
-
-		if (this.format === 'HSL') {
-			this.HSLtoRGB();
-			return;
-		}
-	};
-
-	Color.prototype.updateHSX = function updateHSX() {
-		if (this.format === 'HSV') {
-			this.RGBtoHSV();
-			return;
-		}
-
-		if (this.format === 'HSL') {
-			this.RGBtoHSL();
-			return;
-		}
-	};
-
-	Color.prototype.HSVtoRGB = function HSVtoRGB() {
-		var sat = this.saturation / 100;
-		var value = this.value / 100;
-		var C = sat * value;
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = value - C;
-		var precision = 255;
-
-		C = (C + m) * precision | 0;
-		X = (X + m) * precision | 0;
-		m = m * precision | 0;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	};
-
-	Color.prototype.HSLtoRGB = function HSLtoRGB() {
-		var sat = this.saturation / 100;
-		var light = this.lightness / 100;
-		var C = sat * (1 - Math.abs(2 * light - 1));
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = light - C/2;
-		var precision = 255;
-
-		C = (C + m) * precision | 0;
-		X = (X + m) * precision | 0;
-		m = m * precision | 0;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	};
-
-	Color.prototype.RGBtoHSV = function RGBtoHSV() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / cmax;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.value = (cmax * 100) | 0;
-	};
-
-	Color.prototype.RGBtoHSL = function RGBtoHSL() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-		var lightness = (cmax + cmin) / 2;
-		var X = (1 - Math.abs(2 * lightness - 1));
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / X;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.lightness = (lightness * 100) | 0;
-	};
-
-	/*========== Get Methods ==========*/
-
-	Color.prototype.getHexa = function getHexa() {
-		var r = this.r.toString(16);
-		var g = this.g.toString(16);
-		var b = this.b.toString(16);
-		if (this.r < 16) r = '0' + r;
-		if (this.g < 16) g = '0' + g;
-		if (this.b < 16) b = '0' + b;
-		var value = '#' + r + g + b;
-		return value.toUpperCase();
-	};
-
-	Color.prototype.getRGBA = function getRGBA() {
-
-		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
-		var a = '';
-		var v = '';
-		var x = parseFloat(this.a);
-		if (x !== 1) {
-			a = 'a';
-			v = ', ' + x;
-		}
-
-		var value = 'rgb' + a + rgb + v + ')';
-		return value;
-	};
-
-	Color.prototype.getHSLA = function getHSLA() {
-		if (this.format === 'HSV') {
-			var color = new Color(this);
-			color.setFormat('HSL');
-			color.updateHSX();
-			return color.getHSLA();
-		}
-
-		var a = '';
-		var v = '';
-		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
-		var x = parseFloat(this.a);
-		if (x !== 1) {
-			a = 'a';
-			v = ', ' + x;
-		}
-
-		var value = 'hsl' + a + hsl + v + ')';
-		return value;
-	};
-
-	Color.prototype.getColor = function getColor() {
-		if (this.a | 0 === 1)
-			return this.getHexa();
-		return this.getRGBA();
-	};
-
-	/*=======================================================================*/
-	/*=======================================================================*/
-
-	/*========== Capture Mouse Movement ==========*/
-
-	var setMouseTracking = function setMouseTracking(elem, callback) {
-		elem.addEventListener('mousedown', function(e) {
-			callback(e);
-			document.addEventListener('mousemove', callback);
-		});
-
-		document.addEventListener('mouseup', function(e) {
-			document.removeEventListener('mousemove', callback);
-		});
-	};
-
-	/*====================*/
-	// Color Picker Class
-	/*====================*/
-
-	function ColorPicker(node) {
-		this.color = new Color();
-		this.node = node;
-		this.subscribers = [];
-
-		var type = this.node.getAttribute('data-mode');
-		var topic = this.node.getAttribute('data-topic');
-
-		this.topic = topic;
-		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
-		this.color.setFormat(this.picker_mode);
-
-		this.createPickingArea();
-		this.createHueArea();
-
-		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
-		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
-		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
-		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
-
-		this.createAlphaArea();
-
-		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
-		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
-		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
-
-		this.createPreviewBox();
-		this.createChangeModeButton();
-
-		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
-		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
-
-		this.setColor(this.color);
-		pickers[topic] = this;
-	}
-
-	/*************************************************************************/
-	//				Function for generating the color-picker
-	/*************************************************************************/
-
-	ColorPicker.prototype.createPickingArea = function createPickingArea() {
-		var area = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'picking-area';
-		picker.className = 'picker';
-
-		this.picking_area = area;
-		this.color_picker = picker;
-		setMouseTracking(area, this.updateColor.bind(this));
-
-		area.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createHueArea = function createHueArea() {
-		var area = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'hue';
-		picker.className ='slider-picker';
-
-		this.hue_area = area;
-		this.hue_picker = picker;
-		setMouseTracking(area, this.updateHueSlider.bind(this));
-
-		area.appendChild(picker);
-		this.node.appendChild(area);
-	};
+ function getElemById(id) {
+  return document.getElementById(id);
+ }
+
+ var subscribers = [];
+ var pickers = [];
+
+ /**
+  * RGBA Color class
+  *
+  * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+  * @param hue   0-360
+  * @param saturation 0-100
+  * @param value   0-100
+  * @param lightness  0-100
+  */
+
+ function Color(color) {
+
+  if(color instanceof Color === true) {
+   this.copy(color);
+   return;
+  }
+
+  this.r = 0;
+  this.g = 0;
+  this.b = 0;
+  this.a = 1;
+  this.hue = 0;
+  this.saturation = 0;
+  this.value = 0;
+  this.lightness = 0;
+  this.format = 'HSV';
+ }
+
+ function RGBColor(r, g, b) {
+  var color = new Color();
+  color.setRGBA(r, g, b, 1);
+  return color;
+ }
+
+ function RGBAColor(r, g, b, a) {
+  var color = new Color();
+  color.setRGBA(r, g, b, a);
+  return color;
+ }
+
+ function HSVColor(h, s, v) {
+  var color = new Color();
+  color.setHSV(h, s, v);
+  return color;
+ }
+
+ function HSVAColor(h, s, v, a) {
+  var color = new Color();
+  color.setHSV(h, s, v);
+  color.a = a;
+  return color;
+ }
+
+ function HSLColor(h, s, l) {
+  var color = new Color();
+  color.setHSL(h, s, l);
+  return color;
+ }
+
+ function HSLAColor(h, s, l, a) {
+  var color = new Color();
+  color.setHSL(h, s, l);
+  color.a = a;
+  return color;
+ }
+
+ Color.prototype.copy = function copy(obj) {
+  if(obj instanceof Color !== true) {
+   console.log('Typeof parameter not Color');
+   return;
+  }
+
+  this.r = obj.r;
+  this.g = obj.g;
+  this.b = obj.b;
+  this.a = obj.a;
+  this.hue = obj.hue;
+  this.saturation = obj.saturation;
+  this.value = obj.value;
+  this.format = '' + obj.format;
+  this.lightness = obj.lightness;
+ };
+
+ Color.prototype.setFormat = function setFormat(format) {
+  if (format === 'HSV')
+   this.format = 'HSV';
+  if (format === 'HSL')
+   this.format = 'HSL';
+ };
+
+ /*========== Methods to set Color Properties ==========*/
+
+ Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+  return (typeof(value) === 'number' && isNaN(value) === false &&
+   value >= 0 && value <= 255);
+ };
+
+ Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+  if (this.isValidRGBValue(red) === false ||
+   this.isValidRGBValue(green) === false ||
+   this.isValidRGBValue(blue) === false)
+   return;
+
+   this.r = red | 0;
+   this.g = green | 0;
+   this.b = blue | 0;
+
+  if (this.isValidRGBValue(alpha) === true)
+   this.a = alpha | 0;
+ };
+
+ Color.prototype.setByName = function setByName(name, value) {
+  if (name === 'r' || name === 'g' || name === 'b') {
+   if(this.isValidRGBValue(value) === false)
+    return;
+
+   this[name] = value;
+   this.updateHSX();
+  }
+ };
+
+ Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+  this.hue = hue;
+  this.saturation = saturation;
+  this.value = value;
+  this.HSVtoRGB();
+ };
+
+ Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+  this.hue = hue;
+  this.saturation = saturation;
+  this.lightness = lightness;
+  this.HSLtoRGB();
+ };
+
+ Color.prototype.setHue = function setHue(value) {
+  if (typeof(value) !== 'number' || isNaN(value) === true ||
+   value < 0 || value > 359)
+   return;
+  this.hue = value;
+  this.updateRGB();
+ };
+
+ Color.prototype.setSaturation = function setSaturation(value) {
+  if (typeof(value) !== 'number' || isNaN(value) === true ||
+   value < 0 || value > 100)
+   return;
+  this.saturation = value;
+  this.updateRGB();
+ };
+
+ Color.prototype.setValue = function setValue(value) {
+  if (typeof(value) !== 'number' || isNaN(value) === true ||
+   value < 0 || value > 100)
+   return;
+  this.value = value;
+  this.HSVtoRGB();
+ };
+
+ Color.prototype.setLightness = function setLightness(value) {
+  if (typeof(value) !== 'number' || isNaN(value) === true ||
+   value < 0 || value > 100)
+   return;
+  this.lightness = value;
+  this.HSLtoRGB();
+ };
+
+ Color.prototype.setHexa = function setHexa(value) {
+  var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+  if (valid !== true)
+   return;
+
+  if (value[0] === '#')
+   value = value.slice(1, value.length);
+
+  if (value.length === 3)
+   value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+  this.r = parseInt(value.substr(0, 2), 16);
+  this.g = parseInt(value.substr(2, 2), 16);
+  this.b = parseInt(value.substr(4, 2), 16);
+
+  this.alpha = 1;
+  this.RGBtoHSV();
+ };
+
+ /*========== Conversion Methods ==========*/
+
+ Color.prototype.convertToHSL = function convertToHSL() {
+  if (this.format === 'HSL')
+   return;
+
+  this.setFormat('HSL');
+  this.RGBtoHSL();
+ };
+
+ Color.prototype.convertToHSV = function convertToHSV() {
+  if (this.format === 'HSV')
+   return;
+
+  this.setFormat('HSV');
+  this.RGBtoHSV();
+ };
+
+ /*========== Update Methods ==========*/
+
+ Color.prototype.updateRGB = function updateRGB() {
+  if (this.format === 'HSV') {
+   this.HSVtoRGB();
+   return;
+  }
+
+  if (this.format === 'HSL') {
+   this.HSLtoRGB();
+   return;
+  }
+ };
+
+ Color.prototype.updateHSX = function updateHSX() {
+  if (this.format === 'HSV') {
+   this.RGBtoHSV();
+   return;
+  }
+
+  if (this.format === 'HSL') {
+   this.RGBtoHSL();
+   return;
+  }
+ };
+
+ Color.prototype.HSVtoRGB = function HSVtoRGB() {
+  var sat = this.saturation / 100;
+  var value = this.value / 100;
+  var C = sat * value;
+  var H = this.hue / 60;
+  var X = C * (1 - Math.abs(H % 2 - 1));
+  var m = value - C;
+  var precision = 255;
+
+  C = (C + m) * precision | 0;
+  X = (X + m) * precision | 0;
+  m = m * precision | 0;
+
+  if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; }
+  if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; }
+  if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; }
+  if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; }
+  if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; }
+  if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; }
+ };
+
+ Color.prototype.HSLtoRGB = function HSLtoRGB() {
+  var sat = this.saturation / 100;
+  var light = this.lightness / 100;
+  var C = sat * (1 - Math.abs(2 * light - 1));
+  var H = this.hue / 60;
+  var X = C * (1 - Math.abs(H % 2 - 1));
+  var m = light - C/2;
+  var precision = 255;
+
+  C = (C + m) * precision | 0;
+  X = (X + m) * precision | 0;
+  m = m * precision | 0;
+
+  if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; }
+  if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; }
+  if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; }
+  if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; }
+  if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; }
+  if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; }
+ };
+
+ Color.prototype.RGBtoHSV = function RGBtoHSV() {
+  var red  = this.r / 255;
+  var green = this.g / 255;
+  var blue = this.b / 255;
+
+  var cmax = Math.max(red, green, blue);
+  var cmin = Math.min(red, green, blue);
+  var delta = cmax - cmin;
+  var hue = 0;
+  var saturation = 0;
+
+  if (delta) {
+   if (cmax === red ) { hue = ((green - blue) / delta); }
+   if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+   if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+   if (cmax) saturation = delta / cmax;
+  }
+
+  this.hue = 60 * hue | 0;
+  if (this.hue < 0) this.hue += 360;
+  this.saturation = (saturation * 100) | 0;
+  this.value = (cmax * 100) | 0;
+ };
+
+ Color.prototype.RGBtoHSL = function RGBtoHSL() {
+  var red  = this.r / 255;
+  var green = this.g / 255;
+  var blue = this.b / 255;
+
+  var cmax = Math.max(red, green, blue);
+  var cmin = Math.min(red, green, blue);
+  var delta = cmax - cmin;
+  var hue = 0;
+  var saturation = 0;
+  var lightness = (cmax + cmin) / 2;
+  var X = (1 - Math.abs(2 * lightness - 1));
+
+  if (delta) {
+   if (cmax === red ) { hue = ((green - blue) / delta); }
+   if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+   if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+   if (cmax) saturation = delta / X;
+  }
+
+  this.hue = 60 * hue | 0;
+  if (this.hue < 0) this.hue += 360;
+  this.saturation = (saturation * 100) | 0;
+  this.lightness = (lightness * 100) | 0;
+ };
+
+ /*========== Get Methods ==========*/
+
+ Color.prototype.getHexa = function getHexa() {
+  var r = this.r.toString(16);
+  var g = this.g.toString(16);
+  var b = this.b.toString(16);
+  if (this.r < 16) r = '0' + r;
+  if (this.g < 16) g = '0' + g;
+  if (this.b < 16) b = '0' + b;
+  var value = '#' + r + g + b;
+  return value.toUpperCase();
+ };
+
+ Color.prototype.getRGBA = function getRGBA() {
+
+  var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+  var a = '';
+  var v = '';
+  var x = parseFloat(this.a);
+  if (x !== 1) {
+   a = 'a';
+   v = ', ' + x;
+  }
+
+  var value = 'rgb' + a + rgb + v + ')';
+  return value;
+ };
+
+ Color.prototype.getHSLA = function getHSLA() {
+  if (this.format === 'HSV') {
+   var color = new Color(this);
+   color.setFormat('HSL');
+   color.updateHSX();
+   return color.getHSLA();
+  }
+
+  var a = '';
+  var v = '';
+  var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+  var x = parseFloat(this.a);
+  if (x !== 1) {
+   a = 'a';
+   v = ', ' + x;
+  }
+
+  var value = 'hsl' + a + hsl + v + ')';
+  return value;
+ };
+
+ Color.prototype.getColor = function getColor() {
+  if (this.a | 0 === 1)
+   return this.getHexa();
+  return this.getRGBA();
+ };
+
+ /*=======================================================================*/
+ /*=======================================================================*/
+
+ /*========== Capture Mouse Movement ==========*/
+
+ var setMouseTracking = function setMouseTracking(elem, callback) {
+  elem.addEventListener('mousedown', function(e) {
+   callback(e);
+   document.addEventListener('mousemove', callback);
+  });
+
+  document.addEventListener('mouseup', function(e) {
+   document.removeEventListener('mousemove', callback);
+  });
+ };
+
+ /*====================*/
+ // Color Picker Class
+ /*====================*/
+
+ function ColorPicker(node) {
+  this.color = new Color();
+  this.node = node;
+  this.subscribers = [];
+
+  var type = this.node.getAttribute('data-mode');
+  var topic = this.node.getAttribute('data-topic');
+
+  this.topic = topic;
+  this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+  this.color.setFormat(this.picker_mode);
+
+  this.createPickingArea();
+  this.createHueArea();
+
+  this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+  this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+  this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+  this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+  this.createAlphaArea();
+
+  this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+  this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+  this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+  this.createPreviewBox();
+  this.createChangeModeButton();
+
+  this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+  this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+  this.setColor(this.color);
+  pickers[topic] = this;
+ }
+
+ /*************************************************************************/
+ //    Function for generating the color-picker
+ /*************************************************************************/
+
+ ColorPicker.prototype.createPickingArea = function createPickingArea() {
+  var area = document.createElement('div');
+  var picker = document.createElement('div');
+
+  area.className = 'picking-area';
+  picker.className = 'picker';
+
+  this.picking_area = area;
+  this.color_picker = picker;
+  setMouseTracking(area, this.updateColor.bind(this));
+
+  area.appendChild(picker);
+  this.node.appendChild(area);
+ };
+
+ ColorPicker.prototype.createHueArea = function createHueArea() {
+  var area = document.createElement('div');
+  var picker = document.createElement('div');
+
+  area.className = 'hue';
+  picker.className ='slider-picker';
+
+  this.hue_area = area;
+  this.hue_picker = picker;
+  setMouseTracking(area, this.updateHueSlider.bind(this));
+
+  area.appendChild(picker);
+  this.node.appendChild(area);
+ };
 
-	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
-		var area = document.createElement('div');
-		var mask = document.createElement('div');
-		var picker = document.createElement('div');
+ ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+  var area = document.createElement('div');
+  var mask = document.createElement('div');
+  var picker = document.createElement('div');
 
-		area.className = 'alpha';
-		mask.className = 'alpha-mask';
-		picker.className = 'slider-picker';
+  area.className = 'alpha';
+  mask.className = 'alpha-mask';
+  picker.className = 'slider-picker';
 
-		this.alpha_area = area;
-		this.alpha_mask = mask;
-		this.alpha_picker = picker;
-		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+  this.alpha_area = area;
+  this.alpha_mask = mask;
+  this.alpha_picker = picker;
+  setMouseTracking(area, this.updateAlphaSlider.bind(this));
 
-		area.appendChild(mask);
-		mask.appendChild(picker);
-		this.node.appendChild(area);
-	};
+  area.appendChild(mask);
+  mask.appendChild(picker);
+  this.node.appendChild(area);
+ };
 
-	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
-		var preview_box = document.createElement('div');
-		var preview_color = document.createElement('div');
+ ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+  var preview_box = document.createElement('div');
+  var preview_color = document.createElement('div');
 
-		preview_box.className = 'preview';
-		preview_color.className = 'preview-color';
+  preview_box.className = 'preview';
+  preview_color.className = 'preview-color';
 
-		this.preview_color = preview_color;
+  this.preview_color = preview_color;
 
-		preview_box.appendChild(preview_color);
-		this.node.appendChild(preview_box);
-	};
+  preview_box.appendChild(preview_color);
+  this.node.appendChild(preview_box);
+ };
 
-	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
-		var wrapper = document.createElement('div');
-		var input = document.createElement('input');
-		var info = document.createElement('span');
+ ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+  var wrapper = document.createElement('div');
+  var input = document.createElement('input');
+  var info = document.createElement('span');
 
-		wrapper.className = 'input';
-		wrapper.setAttribute('data-topic', topic);
-		info.textContent = title;
-		info.className = 'name';
-		input.setAttribute('type', 'text');
+  wrapper.className = 'input';
+  wrapper.setAttribute('data-topic', topic);
+  info.textContent = title;
+  info.className = 'name';
+  input.setAttribute('type', 'text');
 
-		wrapper.appendChild(info);
-		wrapper.appendChild(input);
-		this.node.appendChild(wrapper);
+  wrapper.appendChild(info);
+  wrapper.appendChild(input);
+  this.node.appendChild(wrapper);
 
-		input.addEventListener('change', onChangeFunc);
-		input.addEventListener('click', function() {
-			this.select();
-		});
+  input.addEventListener('change', onChangeFunc);
+  input.addEventListener('click', function() {
+   this.select();
+  });
 
-		this.subscribe(topic, function(value) {
-			input.value = value;
-		});
-	};
+  this.subscribe(topic, function(value) {
+   input.value = value;
+  });
+ };
 
-	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+ ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
 
-		var button = document.createElement('div');
-		button.className = 'switch_mode';
-		button.addEventListener('click', function() {
-			if (this.picker_mode === 'HSV')
-				this.setPickerMode('HSL');
-			else
-				this.setPickerMode('HSV');
+  var button = document.createElement('div');
+  button.className = 'switch_mode';
+  button.addEventListener('click', function() {
+   if (this.picker_mode === 'HSV')
+    this.setPickerMode('HSL');
+   else
+    this.setPickerMode('HSV');
 
-		}.bind(this));
+  }.bind(this));
 
-		this.node.appendChild(button);
-	};
+  this.node.appendChild(button);
+ };
 
-	/*************************************************************************/
-	//					Updates properties of UI elements
-	/*************************************************************************/
+ /*************************************************************************/
+ //     Updates properties of UI elements
+ /*************************************************************************/
 
-	ColorPicker.prototype.updateColor = function updateColor(e) {
-		var x = e.pageX - this.picking_area.offsetLeft;
-		var y = e.pageY - this.picking_area.offsetTop;
-		var picker_offset = 5;
+ ColorPicker.prototype.updateColor = function updateColor(e) {
+  var x = e.pageX - this.picking_area.offsetLeft;
+  var y = e.pageY - this.picking_area.offsetTop;
+  var picker_offset = 5;
 
-		// width and height should be the same
-		var size = this.picking_area.clientWidth;
+  // width and height should be the same
+  var size = this.picking_area.clientWidth;
 
-		if (x > size) x = size;
-		if (y > size) y = size;
-		if (x < 0) x = 0;
-		if (y < 0) y = 0;
+  if (x > size) x = size;
+  if (y > size) y = size;
+  if (x < 0) x = 0;
+  if (y < 0) y = 0;
 
-		var value = 100 - (y * 100 / size) | 0;
-		var saturation = x * 100 / size | 0;
+  var value = 100 - (y * 100 / size) | 0;
+  var saturation = x * 100 / size | 0;
 
-		if (this.picker_mode === 'HSV')
-			this.color.setHSV(this.color.hue, saturation, value);
-		if (this.picker_mode === 'HSL')
-			this.color.setHSL(this.color.hue, saturation, value);
+  if (this.picker_mode === 'HSV')
+   this.color.setHSV(this.color.hue, saturation, value);
+  if (this.picker_mode === 'HSL')
+   this.color.setHSL(this.color.hue, saturation, value);
 
-		this.color_picker.style.left = x - picker_offset + 'px';
-		this.color_picker.style.top = y - picker_offset + 'px';
+  this.color_picker.style.left = x - picker_offset + 'px';
+  this.color_picker.style.top = y - picker_offset + 'px';
 
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
+  this.updateAlphaGradient();
+  this.updatePreviewColor();
 
-		this.notify('value', value);
-		this.notify('lightness', value);
-		this.notify('saturation', saturation);
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
-		var x = e.pageX - this.hue_area.offsetLeft;
-		var width = this.hue_area.clientWidth;
+  this.notify('value', value);
+  this.notify('lightness', value);
+  this.notify('saturation', saturation);
+
+  this.notify('red', this.color.r);
+  this.notify('green', this.color.g);
+  this.notify('blue', this.color.b);
+  this.notify('hexa', this.color.getHexa());
+
+  notify(this.topic, this.color);
+ };
+
+ ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+  var x = e.pageX - this.hue_area.offsetLeft;
+  var width = this.hue_area.clientWidth;
 
-		if (x < 0) x = 0;
-		if (x > width) x = width;
-
-		// TODO 360 => 359
-		var hue = ((359 * x) / width) | 0;
-		// if (hue === 360) hue = 359;
-
-		this.updateSliderPosition(this.hue_picker, x);
-		this.setHue(hue);
-	};
-
-	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
-		var x = e.pageX - this.alpha_area.offsetLeft;
-		var width = this.alpha_area.clientWidth;
-
-		if (x < 0) x = 0;
-		if (x > width) x = width;
-
-		this.color.a = (x / width).toFixed(2);
-
-		this.updateSliderPosition(this.alpha_picker, x);
-		this.updatePreviewColor();
-
-		this.notify('alpha', this.color.a);
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.setHue = function setHue(value) {
-		this.color.setHue(value);
-
-		this.updatePickerBackground();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-		this.notify('hue', this.color.hue);
-
-		notify(this.topic, this.color);
-	};
-
-	// Updates when one of Saturation/Value/Lightness changes
-	ColorPicker.prototype.updateSLV = function updateSLV() {
-		this.updatePickerPosition();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-
-		notify(this.topic, this.color);
-	};
-
-	/*************************************************************************/
-	//				Update positions of various UI elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
-		var size = this.picking_area.clientWidth;
-		var value = 0;
-		var offset = 5;
-
-		if (this.picker_mode === 'HSV')
-			value = this.color.value;
-		if (this.picker_mode === 'HSL')
-			value = this.color.lightness;
-
-		var x = (this.color.saturation * size / 100) | 0;
-		var y = size - (value * size / 100) | 0;
-
-		this.color_picker.style.left = x - offset + 'px';
-		this.color_picker.style.top = y - offset + 'px';
-	};
-
-	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
-		elem.style.left = Math.max(pos - 3, -2) + 'px';
-	};
-
-	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
-		var size = this.hue_area.clientWidth;
-		var offset = 1;
-		var pos = (this.color.hue * size / 360 ) | 0;
-		this.hue_picker.style.left = pos - offset + 'px';
-	};
-
-	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
-		var size = this.alpha_area.clientWidth;
-		var offset = 1;
-		var pos = (this.color.a * size) | 0;
-		this.alpha_picker.style.left = pos - offset + 'px';
-	};
-
-	/*************************************************************************/
-	//						Update background colors
-	/*************************************************************************/
-
-	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
-		var nc = new Color(this.color);
-		nc.setHSV(nc.hue, 100, 100);
-		this.picking_area.style.backgroundColor = nc.getHexa();
-	};
-
-	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
-		this.alpha_mask.style.backgroundColor = this.color.getHexa();
-	};
-
-	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
-		this.preview_color.style.backgroundColor = this.color.getColor();
-	};
-
-	/*************************************************************************/
-	//						Update input elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
-		var value = parseInt(e.target.value);
-		this.setHue(value);
-		this.updateHuePicker();
-	};
-
-	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
-		var value = parseInt(e.target.value);
-		this.color.setSaturation(value);
-		e.target.value = this.color.saturation;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
-		var value = parseInt(e.target.value);
-		this.color.setValue(value);
-		e.target.value = this.color.value;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
-		var value = parseInt(e.target.value);
-		this.color.setLightness(value);
-		e.target.value = this.color.lightness;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('r', value);
-		e.target.value = this.color.r;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('g', value);
-		e.target.value = this.color.g;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('b', value);
-		e.target.value = this.color.b;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
-		var value = parseFloat(e.target.value);
-
-		if (typeof value === 'number' && isNaN(value) === false &&
-			value >= 0 && value <= 1)
-			this.color.a = value.toFixed(2);
-
-		e.target.value = this.color.a;
-		this.updateAlphaPicker();
-	};
-
-	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
-		var value = e.target.value;
-		this.color.setHexa(value);
-		this.setColor(this.color);
-	};
-
-	/*************************************************************************/
-	//							Internal Pub/Sub
-	/*************************************************************************/
-
-	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
-		this.subscribers[topic] = callback;
-	};
-
-	ColorPicker.prototype.notify = function notify(topic, value) {
-		if (this.subscribers[topic])
-			this.subscribers[topic](value);
-	};
-
-	/*************************************************************************/
-	//							Set Picker Properties
-	/*************************************************************************/
-
-	ColorPicker.prototype.setColor = function setColor(color) {
-		if(color instanceof Color !== true) {
-			console.log('Typeof parameter not Color');
-			return;
-		}
-
-		if (color.format !== this.picker_mode) {
-			color.setFormat(this.picker_mode);
-			color.updateHSX();
-		}
-
-		this.color.copy(color);
-		this.updateHuePicker();
-		this.updatePickerPosition();
-		this.updatePickerBackground();
-		this.updateAlphaPicker();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-
-		this.notify('hue', this.color.hue);
-		this.notify('saturation', this.color.saturation);
-		this.notify('value', this.color.value);
-		this.notify('lightness', this.color.lightness);
-
-		this.notify('alpha', this.color.a);
-		this.notify('hexa', this.color.getHexa());
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
-		if (mode !== 'HSV' && mode !== 'HSL')
-			return;
-
-		this.picker_mode = mode;
-		this.node.setAttribute('data-mode', this.picker_mode);
-		this.setColor(this.color);
-	};
-
-	/*************************************************************************/
-	//								UNUSED
-	/*************************************************************************/
-
-	var setPickerMode = function setPickerMode(topic, mode) {
-		if (pickers[topic])
-			pickers[topic].setPickerMode(mode);
-	};
-
-	var setColor = function setColor(topic, color) {
-		if (pickers[topic])
-			pickers[topic].setColor(color);
-	};
-
-	var getColor = function getColor(topic) {
-		if (pickers[topic])
-			return new Color(pickers[topic].color);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(callback) {
-		subscribers.indexOf(callback);
-		subscribers.splice(index, 1);
-	};
-
-	var notify = function notify(topic, value) {
-		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
-			return;
-
-		var color = new Color(value);
-		for (var i in subscribers[topic])
-			subscribers[topic][i](color);
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-color-picker');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new ColorPicker(elem[i]);
-	};
-
-	return {
-		init : init,
-		Color : Color,
-		RGBColor : RGBColor,
-		RGBAColor : RGBAColor,
-		HSVColor : HSVColor,
-		HSVAColor : HSVAColor,
-		HSLColor : HSLColor,
-		HSLAColor : HSLAColor,
-		setColor : setColor,
-		getColor : getColor,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPickerMode : setPickerMode
-	};
+  if (x < 0) x = 0;
+  if (x > width) x = width;
+
+  // TODO 360 => 359
+  var hue = ((359 * x) / width) | 0;
+  // if (hue === 360) hue = 359;
+
+  this.updateSliderPosition(this.hue_picker, x);
+  this.setHue(hue);
+ };
+
+ ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+  var x = e.pageX - this.alpha_area.offsetLeft;
+  var width = this.alpha_area.clientWidth;
+
+  if (x < 0) x = 0;
+  if (x > width) x = width;
+
+  this.color.a = (x / width).toFixed(2);
+
+  this.updateSliderPosition(this.alpha_picker, x);
+  this.updatePreviewColor();
+
+  this.notify('alpha', this.color.a);
+  notify(this.topic, this.color);
+ };
+
+ ColorPicker.prototype.setHue = function setHue(value) {
+  this.color.setHue(value);
+
+  this.updatePickerBackground();
+  this.updateAlphaGradient();
+  this.updatePreviewColor();
+
+  this.notify('red', this.color.r);
+  this.notify('green', this.color.g);
+  this.notify('blue', this.color.b);
+  this.notify('hexa', this.color.getHexa());
+  this.notify('hue', this.color.hue);
+
+  notify(this.topic, this.color);
+ };
+
+ // Updates when one of Saturation/Value/Lightness changes
+ ColorPicker.prototype.updateSLV = function updateSLV() {
+  this.updatePickerPosition();
+  this.updateAlphaGradient();
+  this.updatePreviewColor();
+
+  this.notify('red', this.color.r);
+  this.notify('green', this.color.g);
+  this.notify('blue', this.color.b);
+  this.notify('hexa', this.color.getHexa());
+
+  notify(this.topic, this.color);
+ };
+
+ /*************************************************************************/
+ //    Update positions of various UI elements
+ /*************************************************************************/
+
+ ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+  var size = this.picking_area.clientWidth;
+  var value = 0;
+  var offset = 5;
+
+  if (this.picker_mode === 'HSV')
+   value = this.color.value;
+  if (this.picker_mode === 'HSL')
+   value = this.color.lightness;
+
+  var x = (this.color.saturation * size / 100) | 0;
+  var y = size - (value * size / 100) | 0;
+
+  this.color_picker.style.left = x - offset + 'px';
+  this.color_picker.style.top = y - offset + 'px';
+ };
+
+ ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+  elem.style.left = Math.max(pos - 3, -2) + 'px';
+ };
+
+ ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+  var size = this.hue_area.clientWidth;
+  var offset = 1;
+  var pos = (this.color.hue * size / 360 ) | 0;
+  this.hue_picker.style.left = pos - offset + 'px';
+ };
+
+ ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+  var size = this.alpha_area.clientWidth;
+  var offset = 1;
+  var pos = (this.color.a * size) | 0;
+  this.alpha_picker.style.left = pos - offset + 'px';
+ };
+
+ /*************************************************************************/
+ //      Update background colors
+ /*************************************************************************/
+
+ ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+  var nc = new Color(this.color);
+  nc.setHSV(nc.hue, 100, 100);
+  this.picking_area.style.backgroundColor = nc.getHexa();
+ };
+
+ ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+  this.alpha_mask.style.backgroundColor = this.color.getHexa();
+ };
+
+ ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+  this.preview_color.style.backgroundColor = this.color.getColor();
+ };
+
+ /*************************************************************************/
+ //      Update input elements
+ /*************************************************************************/
+
+ ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+  var value = parseInt(e.target.value);
+  this.setHue(value);
+  this.updateHuePicker();
+ };
+
+ ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+  var value = parseInt(e.target.value);
+  this.color.setSaturation(value);
+  e.target.value = this.color.saturation;
+  this.updateSLV();
+ };
+
+ ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+  var value = parseInt(e.target.value);
+  this.color.setValue(value);
+  e.target.value = this.color.value;
+  this.updateSLV();
+ };
+
+ ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+  var value = parseInt(e.target.value);
+  this.color.setLightness(value);
+  e.target.value = this.color.lightness;
+  this.updateSLV();
+ };
+
+ ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+  var value = parseInt(e.target.value);
+  this.color.setByName('r', value);
+  e.target.value = this.color.r;
+  this.setColor(this.color);
+ };
+
+ ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+  var value = parseInt(e.target.value);
+  this.color.setByName('g', value);
+  e.target.value = this.color.g;
+  this.setColor(this.color);
+ };
+
+ ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+  var value = parseInt(e.target.value);
+  this.color.setByName('b', value);
+  e.target.value = this.color.b;
+  this.setColor(this.color);
+ };
+
+ ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+  var value = parseFloat(e.target.value);
+
+  if (typeof value === 'number' && isNaN(value) === false &&
+   value >= 0 && value <= 1)
+   this.color.a = value.toFixed(2);
+
+  e.target.value = this.color.a;
+  this.updateAlphaPicker();
+ };
+
+ ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+  var value = e.target.value;
+  this.color.setHexa(value);
+  this.setColor(this.color);
+ };
+
+ /*************************************************************************/
+ //       Internal Pub/Sub
+ /*************************************************************************/
+
+ ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+  this.subscribers[topic] = callback;
+ };
+
+ ColorPicker.prototype.notify = function notify(topic, value) {
+  if (this.subscribers[topic])
+   this.subscribers[topic](value);
+ };
+
+ /*************************************************************************/
+ //       Set Picker Properties
+ /*************************************************************************/
+
+ ColorPicker.prototype.setColor = function setColor(color) {
+  if(color instanceof Color !== true) {
+   console.log('Typeof parameter not Color');
+   return;
+  }
+
+  if (color.format !== this.picker_mode) {
+   color.setFormat(this.picker_mode);
+   color.updateHSX();
+  }
+
+  this.color.copy(color);
+  this.updateHuePicker();
+  this.updatePickerPosition();
+  this.updatePickerBackground();
+  this.updateAlphaPicker();
+  this.updateAlphaGradient();
+  this.updatePreviewColor();
+
+  this.notify('red', this.color.r);
+  this.notify('green', this.color.g);
+  this.notify('blue', this.color.b);
+
+  this.notify('hue', this.color.hue);
+  this.notify('saturation', this.color.saturation);
+  this.notify('value', this.color.value);
+  this.notify('lightness', this.color.lightness);
+
+  this.notify('alpha', this.color.a);
+  this.notify('hexa', this.color.getHexa());
+  notify(this.topic, this.color);
+ };
+
+ ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+  if (mode !== 'HSV' && mode !== 'HSL')
+   return;
+
+  this.picker_mode = mode;
+  this.node.setAttribute('data-mode', this.picker_mode);
+  this.setColor(this.color);
+ };
+
+ /*************************************************************************/
+ //        UNUSED
+ /*************************************************************************/
+
+ var setPickerMode = function setPickerMode(topic, mode) {
+  if (pickers[topic])
+   pickers[topic].setPickerMode(mode);
+ };
+
+ var setColor = function setColor(topic, color) {
+  if (pickers[topic])
+   pickers[topic].setColor(color);
+ };
+
+ var getColor = function getColor(topic) {
+  if (pickers[topic])
+   return new Color(pickers[topic].color);
+ };
+
+ var subscribe = function subscribe(topic, callback) {
+  if (subscribers[topic] === undefined)
+   subscribers[topic] = [];
+
+  subscribers[topic].push(callback);
+ };
+
+ var unsubscribe = function unsubscribe(callback) {
+  subscribers.indexOf(callback);
+  subscribers.splice(index, 1);
+ };
+
+ var notify = function notify(topic, value) {
+  if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+   return;
+
+  var color = new Color(value);
+  for (var i in subscribers[topic])
+   subscribers[topic][i](color);
+ };
+
+ var init = function init() {
+  var elem = document.querySelectorAll('.ui-color-picker');
+  var size = elem.length;
+  for (var i = 0; i < size; i++)
+   new ColorPicker(elem[i]);
+ };
+
+ return {
+  init : init,
+  Color : Color,
+  RGBColor : RGBColor,
+  RGBAColor : RGBAColor,
+  HSVColor : HSVColor,
+  HSVAColor : HSVAColor,
+  HSLColor : HSLColor,
+  HSLAColor : HSLAColor,
+  setColor : setColor,
+  getColor : getColor,
+  subscribe : subscribe,
+  unsubscribe : unsubscribe,
+  setPickerMode : setPickerMode
+ };
 
 })();
 
@@ -1950,260 +1950,260 @@ var UIColorPicker = (function UIColorPicker() {
 
 var InputSliderManager = (function InputSliderManager() {
 
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		return input;
-	};
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-
-			document.addEventListener("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		};
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		};
-
-		return slider;
-	};
-
-	var InputSlider = function(node) {
-		var min		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision >= 0 ? precision : 0;
-		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			return;
-
-		notify.call(slider);
-	};
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	};
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	};
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	};
-
-	var setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value > 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
+ var subscribers = {};
+ var sliders = [];
+
+ var InputComponent = function InputComponent(obj) {
+  var input = document.createElement('input');
+  input.setAttribute('type', 'text');
+  input.style.width = 50 + obj.precision * 10 + 'px';
+
+  input.addEventListener('click', function(e) {
+   this.select();
+  });
+
+  input.addEventListener('change', function(e) {
+   var value = parseFloat(e.target.value);
+
+   if (isNaN(value) === true)
+    setValue(obj.topic, obj.value);
+   else
+    setValue(obj.topic, value);
+  });
+
+  return input;
+ };
+
+ var SliderComponent = function SliderComponent(obj, sign) {
+  var slider = document.createElement('div');
+  var startX = null;
+  var start_value = 0;
+
+  slider.addEventListener("click", function(e) {
+   document.removeEventListener("mousemove", sliderMotion);
+   setValue(obj.topic, obj.value + obj.step * sign);
+  });
+
+  slider.addEventListener("mousedown", function(e) {
+   startX = e.clientX;
+   start_value = obj.value;
+   document.body.style.cursor = "e-resize";
+
+   document.addEventListener("mouseup", slideEnd);
+   document.addEventListener("mousemove", sliderMotion);
+  });
+
+  var slideEnd = function slideEnd(e) {
+   document.removeEventListener("mousemove", sliderMotion);
+   document.body.style.cursor = "auto";
+   slider.style.cursor = "pointer";
+  };
+
+  var sliderMotion = function sliderMotion(e) {
+   slider.style.cursor = "e-resize";
+   var delta = (e.clientX - startX) / obj.sensivity | 0;
+   var value = delta * obj.step + start_value;
+   setValue(obj.topic, value);
+  };
+
+  return slider;
+ };
+
+ var InputSlider = function(node) {
+  var min  = parseFloat(node.getAttribute('data-min'));
+  var max  = parseFloat(node.getAttribute('data-max'));
+  var step = parseFloat(node.getAttribute('data-step'));
+  var value = parseFloat(node.getAttribute('data-value'));
+  var topic = node.getAttribute('data-topic');
+  var unit = node.getAttribute('data-unit');
+  var name  = node.getAttribute('data-info');
+  var sensivity = node.getAttribute('data-sensivity') | 0;
+  var precision = node.getAttribute('data-precision') | 0;
+
+  this.min = isNaN(min) ? 0 : min;
+  this.max = isNaN(max) ? 100 : max;
+  this.precision = precision >= 0 ? precision : 0;
+  this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+  this.topic = topic;
+  this.node = node;
+  this.unit = unit === null ? '' : unit;
+  this.sensivity = sensivity > 0 ? sensivity : 5;
+  value = isNaN(value) ? this.min : value;
+
+  var input = new InputComponent(this);
+  var slider_left  = new SliderComponent(this, -1);
+  var slider_right = new SliderComponent(this,  1);
+
+  slider_left.className = 'ui-input-slider-left';
+  slider_right.className = 'ui-input-slider-right';
+
+  if (name) {
+   var info = document.createElement('span');
+   info.className = 'ui-input-slider-info';
+   info.textContent = name;
+   node.appendChild(info);
+  }
+
+  node.appendChild(slider_left);
+  node.appendChild(input);
+  node.appendChild(slider_right);
+
+  this.input = input;
+  sliders[topic] = this;
+  setValue(topic, value);
+ };
+
+ InputSlider.prototype.setInputValue = function setInputValue() {
+  this.input.value = this.value.toFixed(this.precision) + this.unit;
+ };
+
+ var setValue = function setValue(topic, value, send_notify) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  value = parseFloat(value.toFixed(slider.precision));
+
+  if (value > slider.max) value = slider.max;
+  if (value < slider.min) value = slider.min;
+
+  slider.value = value;
+  slider.node.setAttribute('data-value', value);
+
+  slider.setInputValue();
+
+  if (send_notify === false)
+   return;
+
+  notify.call(slider);
+ };
+
+ var setMax = function setMax(topic, value) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  slider.max = value;
+  setValue(topic, slider.value);
+ };
+
+ var setMin = function setMin(topic, value) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  slider.min = value;
+  setValue(topic, slider.value);
+ };
+
+ var setUnit = function setUnit(topic, unit) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  slider.unit = unit;
+  setValue(topic, slider.value);
+ };
+
+ var setStep = function setStep(topic, value) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  slider.step = parseFloat(value);
+  setValue(topic, slider.value);
+ };
+
+ var setPrecision = function setPrecision(topic, value) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  value = value | 0;
+  slider.precision = value;
+
+  var step = parseFloat(slider.step.toFixed(value));
+  if (step === 0)
+   slider.step = 1 / Math.pow(10, value);
+
+  setValue(topic, slider.value);
+ };
+
+ var setSensivity = function setSensivity(topic, value) {
+  var slider = sliders[topic];
+  if (slider === undefined)
+   return;
+
+  value = value | 0;
+
+  slider.sensivity = value > 0 ? value : 5;
+ };
+
+ var getNode =  function getNode(topic) {
+  return sliders[topic].node;
+ };
+
+ var getPrecision =  function getPrecision(topic) {
+  return sliders[topic].precision;
+ };
+
+ var getStep =  function getStep(topic) {
+  return sliders[topic].step;
+ };
+
+ var subscribe = function subscribe(topic, callback) {
+  if (subscribers[topic] === undefined)
+   subscribers[topic] = [];
+  subscribers[topic].push(callback);
+ };
+
+ var unsubscribe = function unsubscribe(topic, callback) {
+  subscribers[topic].indexOf(callback);
+  subscribers[topic].splice(index, 1);
+ };
+
+ var notify = function notify() {
+  if (subscribers[this.topic] === undefined)
+   return;
+  for (var i = 0; i < subscribers[this.topic].length; i++)
+   subscribers[this.topic][i](this.value);
+ };
+
+ var createSlider = function createSlider(topic, label) {
+  var slider = document.createElement('div');
+  slider.className = 'ui-input-slider';
+  slider.setAttribute('data-topic', topic);
+
+  if (label !== undefined)
+   slider.setAttribute('data-info', label);
+
+  new InputSlider(slider);
+  return slider;
+ };
+
+ var init = function init() {
+  var elem = document.querySelectorAll('.ui-input-slider');
+  var size = elem.length;
+  for (var i = 0; i < size; i++)
+   new InputSlider(elem[i]);
+ };
+
+ return {
+  init : init,
+  setMax : setMax,
+  setMin : setMin,
+  setUnit : setUnit,
+  setStep : setStep,
+  getNode : getNode,
+  getStep : getStep,
+  setValue : setValue,
+  subscribe : subscribe,
+  unsubscribe : unsubscribe,
+  setPrecision : setPrecision,
+  setSensivity : setSensivity,
+  getPrecision : getPrecision,
+  createSlider : createSlider,
+ };
 
 })();
 
@@ -2211,991 +2211,991 @@ var InputSliderManager = (function InputSliderManager() {
 'use strict';
 
 window.addEventListener("load", function() {
-	ColorPickerTool.init();
+ ColorPickerTool.init();
 });
 
 var ColorPickerTool = (function ColorPickerTool() {
 
-	/*========== Get DOM Element By ID ==========*/
+ /*========== Get DOM Element By ID ==========*/
 
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
+ function getElemById(id) {
+  return document.getElementById(id);
+ }
 
-	function allowDropEvent(e) {
-		e.preventDefault();
-	}
+ function allowDropEvent(e) {
+  e.preventDefault();
+ }
 
-	/*========== Make an element resizable relative to it's parent ==========*/
+ /*========== Make an element resizable relative to it's parent ==========*/
 
-	var UIComponent = (function UIComponent() {
+ var UIComponent = (function UIComponent() {
 
-		function makeResizable(elem, axis) {
-			var valueX = 0;
-			var valueY = 0;
-			var action = 0;
+  function makeResizable(elem, axis) {
+   var valueX = 0;
+   var valueY = 0;
+   var action = 0;
 
-			var resizeStart = function resizeStart(e) {
-				e.stopPropagation();
-				e.preventDefault();
-				if (e.button !== 0)
-					return;
+   var resizeStart = function resizeStart(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    if (e.button !== 0)
+     return;
 
-				valueX = e.clientX - elem.clientWidth;
-				valueY = e.clientY - elem.clientHeight;
+    valueX = e.clientX - elem.clientWidth;
+    valueY = e.clientY - elem.clientHeight;
 
-				document.body.setAttribute('data-resize', axis);
-				document.addEventListener('mousemove', mouseMove);
-				document.addEventListener('mouseup', resizeEnd);
-			};
+    document.body.setAttribute('data-resize', axis);
+    document.addEventListener('mousemove', mouseMove);
+    document.addEventListener('mouseup', resizeEnd);
+   };
 
-			var mouseMove = function mouseMove(e) {
-				if (action >= 0)
-					elem.style.width = e.clientX - valueX + 'px';
-				if (action <= 0)
-					elem.style.height = e.clientY - valueY + 'px';
-			};
+   var mouseMove = function mouseMove(e) {
+    if (action >= 0)
+     elem.style.width = e.clientX - valueX + 'px';
+    if (action <= 0)
+     elem.style.height = e.clientY - valueY + 'px';
+   };
 
-			var resizeEnd = function resizeEnd(e) {
-				if (e.button !== 0)
-					return;
+   var resizeEnd = function resizeEnd(e) {
+    if (e.button !== 0)
+     return;
 
-				document.body.removeAttribute('data-resize', axis);
-				document.removeEventListener('mousemove', mouseMove);
-				document.removeEventListener('mouseup', resizeEnd);
-			};
+    document.body.removeAttribute('data-resize', axis);
+    document.removeEventListener('mousemove', mouseMove);
+    document.removeEventListener('mouseup', resizeEnd);
+   };
 
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
+   var handle = document.createElement('div');
+   handle.className = 'resize-handle';
 
-			if (axis === 'width') action = 1;
-			else if (axis === 'height') action = -1;
-			else axis = 'both';
+   if (axis === 'width') action = 1;
+   else if (axis === 'height') action = -1;
+   else axis = 'both';
 
-			handle.className = 'resize-handle';
-			handle.setAttribute('data-resize', axis);
-			handle.addEventListener('mousedown', resizeStart);
-			elem.appendChild(handle);
-		};
+   handle.className = 'resize-handle';
+   handle.setAttribute('data-resize', axis);
+   handle.addEventListener('mousedown', resizeStart);
+   elem.appendChild(handle);
+  };
 
-		/*========== Make an element draggable relative to it's parent ==========*/
+  /*========== Make an element draggable relative to it's parent ==========*/
 
-		var makeDraggable = function makeDraggable(elem, endFunction) {
+  var makeDraggable = function makeDraggable(elem, endFunction) {
 
-			var offsetTop;
-			var offsetLeft;
+   var offsetTop;
+   var offsetLeft;
 
-			elem.setAttribute('data-draggable', 'true');
+   elem.setAttribute('data-draggable', 'true');
 
-			var dragStart = function dragStart(e) {
-				e.preventDefault();
-				e.stopPropagation();
+   var dragStart = function dragStart(e) {
+    e.preventDefault();
+    e.stopPropagation();
 
-				if (e.target.getAttribute('data-draggable') !== 'true' ||
-					e.target !== elem || e.button !== 0)
-					return;
-
-				offsetLeft = e.clientX - elem.offsetLeft;
-				offsetTop = e.clientY - elem.offsetTop;
-
-				document.addEventListener('mousemove', mouseDrag);
-				document.addEventListener('mouseup', dragEnd);
-			};
-
-			var dragEnd = function dragEnd(e) {
-				if (e.button !== 0)
-					return;
-
-				document.removeEventListener('mousemove', mouseDrag);
-				document.removeEventListener('mouseup', dragEnd);
-			};
-
-			var mouseDrag = function mouseDrag(e) {
-				elem.style.left = e.clientX - offsetLeft + 'px';
-				elem.style.top = e.clientY - offsetTop + 'px';
-			};
-
-			elem.addEventListener('mousedown', dragStart, false);
-		};
-
-		return {
-			makeResizable : makeResizable,
-			makeDraggable : makeDraggable
-		};
-
-	})();
-
-	/*========== Color Class ==========*/
-
-	var Color = UIColorPicker.Color;
-	var HSLColor = UIColorPicker.HSLColor;
-
-	/**
-	 * ColorPalette
-	 */
-	var ColorPalette = (function ColorPalette() {
-
-		var samples = [];
-		var color_palette;
-		var complementary;
-
-		var hideNode = function(node) {
-			node.setAttribute('data-hidden', 'true');
-		};
-
-		var ColorSample = function ColorSample(id) {
-			var node = document.createElement('div');
-			node.className = 'sample';
-
-			this.uid = samples.length;
-			this.node = node;
-			this.color = new Color();
-
-			node.setAttribute('sample-id', this.uid);
-			node.setAttribute('draggable', 'true');
-			node.addEventListener('dragstart', this.dragStart.bind(this));
-			node.addEventListener('click', this.pickColor.bind(this));
-
-			samples.push(this);
-		};
-
-		ColorSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		ColorSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
-			this.color.copy(color);
-			var hue = (steps * degree + this.color.hue) % 360;
-			if (hue < 0) hue += 360;
-			this.color.setHue(hue);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
-			var saturation = color.saturation + value * steps;
-			if (saturation <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setSaturation(saturation);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
-			var lightness = color.lightness + value * steps;
-			if (lightness <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setLightness(lightness);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
-			var brightness = color.value + value * steps;
-			if (brightness <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setValue(brightness);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
-			var alpha = parseFloat(color.a) + value * steps;
-			if (alpha <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.a = parseFloat(alpha.toFixed(2));
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.pickColor = function pickColor() {
-			UIColorPicker.setColor('picker', this.color);
-		};
-
-		ColorSample.prototype.dragStart = function dragStart(e) {
-			e.dataTransfer.setData('sampleID', this.uid);
-			e.dataTransfer.setData('location', 'palette-samples');
-		};
-
-		var Palette = function Palette(text, size) {
-			this.samples = [];
-			this.locked = false;
-
-			var palette = document.createElement('div');
-			var title = document.createElement('div');
-			var controls = document.createElement('div');
-			var container = document.createElement('div');
-			var lock = document.createElement('div');
-
-			container.className = 'container';
-			title.className = 'title';
-			palette.className = 'palette';
-			controls.className = 'controls';
-			lock.className = 'lock';
-			title.textContent = text;
-
-			controls.appendChild(lock);
-			container.appendChild(title);
-			container.appendChild(controls);
-			container.appendChild(palette);
-
-			lock.addEventListener('click', function () {
-				this.locked = !this.locked;
-				lock.setAttribute('locked-state', this.locked);
-			}.bind(this));
-
-			for(var i = 0; i < size; i++) {
-				var sample = new ColorSample();
-				this.samples.push(sample);
-				palette.appendChild(sample.node);
-			}
-
-			this.container = container;
-			this.title = title;
-		};
-
-		var createHuePalette = function createHuePalette() {
-			var palette = new Palette('Hue', 12);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 12; i++) {
-					palette.samples[i].updateHue(color, 30, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var createSaturationPalette = function createSaturationPalette() {
-			var palette = new Palette('Saturation', 11);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 11; i++) {
-					palette.samples[i].updateSaturation(color, -10, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		/* Brightness or Lightness - depends on the picker mode */
-		var createVLPalette = function createSaturationPalette() {
-			var palette = new Palette('Lightness', 11);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				if(color.format === 'HSL') {
-					palette.title.textContent = 'Lightness';
-					for(var i = 0; i < 11; i++)
-						palette.samples[i].updateLightness(color, -10, i);
-				}
-				else {
-					palette.title.textContent = 'Value';
-					for(var i = 0; i < 11; i++)
-						palette.samples[i].updateBrightness(color, -10, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var isBlankPalette = function isBlankPalette(container, value) {
-			if (value === 0) {
-				container.setAttribute('data-collapsed', 'true');
-				return true;
-			}
-
-			container.removeAttribute('data-collapsed');
-			return false;
-		};
-
-		var createAlphaPalette = function createAlphaPalette() {
-			var palette = new Palette('Alpha', 10);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 10; i++) {
-					palette.samples[i].updateAlpha(color, -0.1, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined && samples[id]!== null)
-				return new Color(samples[id].color);
-		};
-
-		var init = function init() {
-			color_palette = getElemById('color-palette');
-
-			createHuePalette();
-			createSaturationPalette();
-			createVLPalette();
-			createAlphaPalette();
-
-		};
-
-		return {
-			init : init,
-			getSampleColor : getSampleColor
-		};
-
-	})();
-
-	/**
-	 * ColorInfo
-	 */
-	var ColorInfo = (function ColorInfo() {
-
-		var info_box;
-		var select;
-		var RGBA;
-		var HEXA;
-		var HSLA;
-
-		var updateInfo = function updateInfo(color) {
-			if (color.a | 0 === 1) {
-				RGBA.info.textContent = 'RGB';
-				HSLA.info.textContent = 'HSL';
-			}
-			else {
-				RGBA.info.textContent = 'RGBA';
-				HSLA.info.textContent = 'HSLA';
-			}
-
-			RGBA.value.value = color.getRGBA();
-			HSLA.value.value = color.getHSLA();
-			HEXA.value.value = color.getHexa();
-		};
-
-		var InfoProperty = function InfoProperty(info) {
-
-			var node = document.createElement('div');
-			var title = document.createElement('div');
-			var value = document.createElement('input');
-			var copy = document.createElement('div');
-
-			node.className = 'property';
-			title.className = 'type';
-			value.className = 'value';
-			copy.className = 'copy';
-
-			title.textContent = info;
-			value.setAttribute('type', 'text');
-
-			copy.addEventListener('click', function() {
-				value.select();
-			});
-
-			node.appendChild(title);
-			node.appendChild(value);
-			node.appendChild(copy);
-
-			this.node = node;
-			this.value = value;
-			this.info = title;
-
-			info_box.appendChild(node);
-		};
-
-		var init = function init() {
-
-			info_box = getElemById('color-info');
-
-			RGBA = new InfoProperty('RGBA');
-			HSLA = new InfoProperty('HSLA');
-			HEXA = new InfoProperty('HEXA');
-
-			UIColorPicker.subscribe('picker', updateInfo);
-
-		};
-
-		return {
-			init: init
-		};
-
-	})();
-
-	/**
-	 * ColorPicker Samples
-	 */
-	var ColorPickerSamples = (function ColorPickerSamples() {
-
-		var samples = [];
-		var nr_samples = 0;
-		var active = null;
-		var container = null;
-		var	samples_per_line = 10;
-		var trash_can = null;
-		var base_color = new HSLColor(0, 50, 100);
-		var add_btn;
-		var add_btn_pos;
-
-		var ColorSample = function ColorSample() {
-			var node = document.createElement('div');
-			node.className = 'sample';
-
-			this.uid = samples.length;
-			this.index = nr_samples++;
-			this.node = node;
-			this.color = new Color(base_color);
-
-			node.setAttribute('sample-id', this.uid);
-			node.setAttribute('draggable', 'true');
-
-			node.addEventListener('dragstart', this.dragStart.bind(this));
-			node.addEventListener('dragover' , allowDropEvent);
-			node.addEventListener('drop'     , this.dragDrop.bind(this));
-
-			this.updatePosition(this.index);
-			this.updateBgColor();
-			samples.push(this);
-		};
-
-		ColorSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		ColorSample.prototype.updatePosition = function updatePosition(index) {
-			this.index = index;
-			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
-			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
-			this.node.style.top  = this.posY + 'px';
-			this.node.style.left = this.posX + 'px';
-		};
-
-		ColorSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.activate = function activate() {
-			UIColorPicker.setColor('picker', this.color);
-			this.node.setAttribute('data-active', 'true');
-		};
-
-		ColorSample.prototype.deactivate = function deactivate() {
-			this.node.removeAttribute('data-active');
-		};
-
-		ColorSample.prototype.dragStart = function dragStart(e) {
-			e.dataTransfer.setData('sampleID', this.uid);
-			e.dataTransfer.setData('location', 'picker-samples');
-		};
-
-		ColorSample.prototype.dragDrop = function dragDrop(e) {
-			e.stopPropagation();
-			this.color = Tool.getSampleColorFrom(e);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.deleteSample = function deleteSample() {
-			container.removeChild(this.node);
-			samples[this.uid] = null;
-			nr_samples--;
-		};
-
-		var updateUI = function updateUI() {
-			updateContainerProp();
-
-			var index = 0;
-			var nr = samples.length;
-			for (var i=0; i < nr; i++)
-				if (samples[i] !== null) {
-					samples[i].updatePosition(index);
-					index++;
-				}
-
-			AddSampleButton.updatePosition(index);
-		};
-
-		var deleteSample = function deleteSample(e) {
-			trash_can.parentElement.setAttribute('drag-state', 'none');
-
-			var location = e.dataTransfer.getData('location');
-			if (location !== 'picker-samples')
-				return;
-
-			var sampleID = e.dataTransfer.getData('sampleID');
-			samples[sampleID].deleteSample();
-			console.log(samples);
-
-			updateUI();
-		};
-
-		var createDropSample = function createDropSample() {
-			var sample = document.createElement('div');
-			sample.id = 'drop-effect-sample';
-			sample.className = 'sample';
-			container.appendChild(sample);
-		};
-
-		var setActivateSample = function setActivateSample(e) {
-			if (e.target.className !== 'sample')
-				return;
-
-			unsetActiveSample(active);
-			Tool.unsetVoidSample();
-			CanvasSamples.unsetActiveSample();
-			active = samples[e.target.getAttribute('sample-id')];
-			active.activate();
-		};
-
-		var unsetActiveSample = function unsetActiveSample() {
-			if (active)
-				active.deactivate();
-			active = null;
-		};
-
-		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined && samples[id]!== null)
-				return new Color(samples[id].color);
-		};
-
-		var updateContainerProp = function updateContainerProp() {
-			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
-			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
-			container.style.height = height + 10 + 'px';
-		};
-
-		var AddSampleButton = (function AddSampleButton() {
-			var node;
-			var _index = 0;
-			var _posX;
-			var _posY;
-
-			var updatePosition = function updatePosition(index) {
-				_index = index;
-				_posY = 5 + ((index / samples_per_line) | 0) * 52;
-				_posX = 5 + ((index % samples_per_line) | 0) * 52;
-
-				node.style.top  = _posY + 'px';
-				node.style.left = _posX + 'px';
-			};
-
-			var addButtonClick = function addButtonClick() {
-				var sample = new ColorSample();
-				container.appendChild(sample.node);
-				updatePosition(_index + 1);
-				updateUI();
-			};
-
-			var init = function init() {
-				node = document.createElement('div');
-				var icon = document.createElement('div');
-
-				node.className = 'sample';
-				icon.id = 'add-icon';
-				node.appendChild(icon);
-				node.addEventListener('click', addButtonClick);
-
-				updatePosition(0);
-				container.appendChild(node);
-			};
-
-			return {
-				init : init,
-				updatePosition : updatePosition
-			};
-		})();
-
-		var init = function init() {
-			container = getElemById('picker-samples');
-			trash_can = getElemById('trash-can');
-
-			AddSampleButton.init();
-
-			for (var i=0; i<16; i++) {
-				var sample = new ColorSample();
-				container.appendChild(sample.node);
-			}
-
-			AddSampleButton.updatePosition(samples.length);
-			updateUI();
-
-			active = samples[0];
-			active.activate();
-
-			container.addEventListener('click', setActivateSample);
-
-			trash_can.addEventListener('dragover', allowDropEvent);
-			trash_can.addEventListener('dragenter', function() {
-				this.parentElement.setAttribute('drag-state', 'enter');
-			});
-			trash_can.addEventListener('dragleave', function(e) {
-				this.parentElement.setAttribute('drag-state', 'none');
-			});
-			trash_can.addEventListener('drop', deleteSample);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (active)
-					active.updateColor(color);
-			});
-
-		};
-
-		return {
-			init : init,
-			getSampleColor : getSampleColor,
-			unsetActiveSample : unsetActiveSample
-		};
-
-	})();
-
-	/**
-	 * Canvas Samples
-	 */
-	var CanvasSamples = (function CanvasSamples() {
-
-		var active = null;
-		var canvas = null;
-		var samples = [];
-		var zindex = null;
-		var tutorial = true;
-
-		var CanvasSample = function CanvasSample(color, posX, posY) {
-
-			var node = document.createElement('div');
-			var pick = document.createElement('div');
-			var delete_btn = document.createElement('div');
-			node.className = 'sample';
-			pick.className = 'pick';
-			delete_btn.className = 'delete';
-
-			this.uid = samples.length;
-			this.node = node;
-			this.color = color;
-			this.updateBgColor();
-			this.zIndex = 1;
-
-			node.style.top = posY - 50 + 'px';
-			node.style.left = posX - 50 + 'px';
-			node.setAttribute('sample-id', this.uid);
-
-			node.appendChild(pick);
-			node.appendChild(delete_btn);
-
-			var activate = function activate() {
-				setActiveSample(this);
-			}.bind(this);
-
-			node.addEventListener('dblclick', activate);
-			pick.addEventListener('click', activate);
-			delete_btn.addEventListener('click', this.deleteSample.bind(this));
-
-			UIComponent.makeDraggable(node);
-			UIComponent.makeResizable(node);
-
-			samples.push(this);
-			canvas.appendChild(node);
-			return this;
-		};
-
-		CanvasSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		CanvasSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
-			this.zIndex = value;
-			this.node.style.zIndex = value;
-		};
-
-		CanvasSample.prototype.activate = function activate() {
-			this.node.setAttribute('data-active', 'true');
-			zindex.setAttribute('data-active', 'true');
-
-			UIColorPicker.setColor('picker', this.color);
-			InputSliderManager.setValue('z-index', this.zIndex);
-		};
-
-		CanvasSample.prototype.deactivate = function deactivate() {
-			this.node.removeAttribute('data-active');
-			zindex.removeAttribute('data-active');
-		};
-
-		CanvasSample.prototype.deleteSample = function deleteSample() {
-			if (active === this)
-				unsetActiveSample();
-			canvas.removeChild(this.node);
-			samples[this.uid] = null;
-		};
-
-		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
-			this.node.style.top = posY - this.startY + 'px';
-			this.node.style.left = posX - this.startX + 'px';
-		};
-
-		var canvasDropEvent = function canvasDropEvent(e) {
-			var color = Tool.getSampleColorFrom(e);
-
-			if (color) {
-				var offsetX = e.pageX - canvas.offsetLeft;
-				var offsetY = e.pageY - canvas.offsetTop;
-				var sample = new CanvasSample(color, offsetX, offsetY);
-				if (tutorial) {
-					tutorial = false;
-					canvas.removeAttribute('data-tutorial');
-					var info = new CanvasSample(new Color(), 100, 100);
-					info.node.setAttribute('data-tutorial', 'dblclick');
-				}
-			}
-
-		};
-
-		var setActiveSample = function setActiveSample(sample) {
-			ColorPickerSamples.unsetActiveSample();
-			Tool.unsetVoidSample();
-			unsetActiveSample();
-			active = sample;
-			active.activate();
-		};
-
-		var unsetActiveSample = function unsetActiveSample() {
-			if (active)
-				active.deactivate();
-			active = null;
-		};
-
-		var createToggleBgButton = function createToggleBgButton() {
-			var button = document.createElement('div');
-			var state = false;
-			button.className = 'toggle-bg';
-			canvas.appendChild(button);
-
-			button.addEventListener('click', function() {
-				console.log(state);
-				state = !state;
-				canvas.setAttribute('data-bg', state);
-			});
-		};
-
-		var init = function init() {
-			canvas = getElemById('canvas');
-			zindex = getElemById('zindex');
-
-			canvas.addEventListener('dragover', allowDropEvent);
-			canvas.addEventListener('drop', canvasDropEvent);
-
-			createToggleBgButton();
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (active)	active.updateColor(color);
-			});
-
-			InputSliderManager.subscribe('z-index', function (value) {
-				if (active)	active.updateZIndex(value);
-			});
-
-			UIComponent.makeResizable(canvas, 'height');
-		};
-
-		return {
-			init : init,
-			unsetActiveSample : unsetActiveSample
-		};
-
-	})();
-
-	var StateButton = function StateButton(node, state) {
-		this.state = false;
-		this.callback = null;
-
-		node.addEventListener('click', function() {
-			this.state = !this.state;
-			if (typeof this.callback === "function")
-				this.callback(this.state);
-		}.bind(this));
-	};
-
-	StateButton.prototype.set = function set() {
-		this.state = true;
-		if (typeof this.callback === "function")
-			this.callback(this.state);
-	};
-
-	StateButton.prototype.unset = function unset() {
-		this.state = false;
-		if (typeof this.callback === "function")
-			this.callback(this.state);
-	};
-
-	StateButton.prototype.subscribe = function subscribe(func) {
-		this.callback = func;
-	};
-
-
-	/**
-	 * Tool
-	 */
-	var Tool = (function Tool() {
-
-		var samples = [];
-		var controls = null;
-		var void_sw;
-
-		var createPickerModeSwitch = function createPickerModeSwitch() {
-			var parent = getElemById('controls');
-			var icon = document.createElement('div');
-			var button = document.createElement('div');
-			var hsv = document.createElement('div');
-			var hsl = document.createElement('div');
-			var active = null;
-
-			icon.className = 'icon picker-icon';
-			button.className = 'switch';
-			button.appendChild(hsv);
-			button.appendChild(hsl);
-
-			hsv.textContent = 'HSV';
-			hsl.textContent = 'HSL';
-
-			active = hsl;
-			active.setAttribute('data-active', 'true');
-
-			function switchPickingModeTo(elem) {
-				active.removeAttribute('data-active');
-				active = elem;
-				active.setAttribute('data-active', 'true');
-				UIColorPicker.setPickerMode('picker', active.textContent);
-			};
-
-			var picker_sw = new StateButton(icon);
-			picker_sw.subscribe(function() {
-				if (active === hsv)
-					switchPickingModeTo(hsl);
-				else
-					switchPickingModeTo(hsv);
-			});
-
-			hsv.addEventListener('click', function() {
-				switchPickingModeTo(hsv);
-			});
-			hsl.addEventListener('click', function() {
-				switchPickingModeTo(hsl);
-			});
-
-			parent.appendChild(icon);
-			parent.appendChild(button);
-		};
-
-		var setPickerDragAndDrop = function setPickerDragAndDrop() {
-			var preview = document.querySelector('#picker .preview-color');
-			var picking_area = document.querySelector('#picker .picking-area');
-
-			preview.setAttribute('draggable', 'true');
-			preview.addEventListener('drop', drop);
-			preview.addEventListener('dragstart', dragStart);
-			preview.addEventListener('dragover', allowDropEvent);
-
-			picking_area.addEventListener('drop', drop);
-			picking_area.addEventListener('dragover', allowDropEvent);
-
-			function drop(e) {
-				var color = getSampleColorFrom(e);
-				UIColorPicker.setColor('picker', color);
-			};
-
-			function dragStart(e) {
-				e.dataTransfer.setData('sampleID', 'picker');
-				e.dataTransfer.setData('location', 'picker');
-			};
-		};
-
-		var getSampleColorFrom = function getSampleColorFrom(e) {
-			var sampleID = e.dataTransfer.getData('sampleID');
-			var location = e.dataTransfer.getData('location');
-
-			if (location === 'picker')
-				return UIColorPicker.getColor(sampleID);
-			if (location === 'picker-samples')
-				return ColorPickerSamples.getSampleColor(sampleID);
-			if (location === 'palette-samples')
-				return ColorPalette.getSampleColor(sampleID);
-		};
-
-		var setVoidSwitch = function setVoidSwitch() {
-			var void_sample = getElemById('void-sample');
-			void_sw = new StateButton(void_sample);
-			void_sw.subscribe( function (state) {
-				void_sample.setAttribute('data-active', state);
-				if (state === true) {
-					ColorPickerSamples.unsetActiveSample();
-					CanvasSamples.unsetActiveSample();
-				}
-			});
-		};
-
-		var unsetVoidSample = function unsetVoidSample() {
-			void_sw.unset();
-		};
-
-		var init = function init() {
-			controls = getElemById('controls');
-
-			var color = new Color();
-			color.setHSL(0, 51, 51);
-			UIColorPicker.setColor('picker', color);
-
-			setPickerDragAndDrop();
-			createPickerModeSwitch();
-			setVoidSwitch();
-		};
-
-		return {
-			init : init,
-			unsetVoidSample : unsetVoidSample,
-			getSampleColorFrom : getSampleColorFrom
-		};
-
-	})();
-
-	var init = function init() {
-		UIColorPicker.init();
-		InputSliderManager.init();
-		ColorInfo.init();
-		ColorPalette.init();
-		ColorPickerSamples.init();
-		CanvasSamples.init();
-		Tool.init();
-	};
-
-	return {
-		init : init
-	};
+    if (e.target.getAttribute('data-draggable') !== 'true' ||
+     e.target !== elem || e.button !== 0)
+     return;
+
+    offsetLeft = e.clientX - elem.offsetLeft;
+    offsetTop = e.clientY - elem.offsetTop;
+
+    document.addEventListener('mousemove', mouseDrag);
+    document.addEventListener('mouseup', dragEnd);
+   };
+
+   var dragEnd = function dragEnd(e) {
+    if (e.button !== 0)
+     return;
+
+    document.removeEventListener('mousemove', mouseDrag);
+    document.removeEventListener('mouseup', dragEnd);
+   };
+
+   var mouseDrag = function mouseDrag(e) {
+    elem.style.left = e.clientX - offsetLeft + 'px';
+    elem.style.top = e.clientY - offsetTop + 'px';
+   };
+
+   elem.addEventListener('mousedown', dragStart, false);
+  };
+
+  return {
+   makeResizable : makeResizable,
+   makeDraggable : makeDraggable
+  };
+
+ })();
+
+ /*========== Color Class ==========*/
+
+ var Color = UIColorPicker.Color;
+ var HSLColor = UIColorPicker.HSLColor;
+
+ /**
+  * ColorPalette
+  */
+ var ColorPalette = (function ColorPalette() {
+
+  var samples = [];
+  var color_palette;
+  var complementary;
+
+  var hideNode = function(node) {
+   node.setAttribute('data-hidden', 'true');
+  };
+
+  var ColorSample = function ColorSample(id) {
+   var node = document.createElement('div');
+   node.className = 'sample';
+
+   this.uid = samples.length;
+   this.node = node;
+   this.color = new Color();
+
+   node.setAttribute('sample-id', this.uid);
+   node.setAttribute('draggable', 'true');
+   node.addEventListener('dragstart', this.dragStart.bind(this));
+   node.addEventListener('click', this.pickColor.bind(this));
+
+   samples.push(this);
+  };
+
+  ColorSample.prototype.updateBgColor = function updateBgColor() {
+   this.node.style.backgroundColor = this.color.getColor();
+  };
+
+  ColorSample.prototype.updateColor = function updateColor(color) {
+   this.color.copy(color);
+   this.updateBgColor();
+  };
+
+  ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+   this.color.copy(color);
+   var hue = (steps * degree + this.color.hue) % 360;
+   if (hue < 0) hue += 360;
+   this.color.setHue(hue);
+   this.updateBgColor();
+  };
+
+  ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+   var saturation = color.saturation + value * steps;
+   if (saturation <= 0) {
+    this.node.setAttribute('data-hidden', 'true');
+    return;
+   }
+
+   this.node.removeAttribute('data-hidden');
+   this.color.copy(color);
+   this.color.setSaturation(saturation);
+   this.updateBgColor();
+  };
+
+  ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+   var lightness = color.lightness + value * steps;
+   if (lightness <= 0) {
+    this.node.setAttribute('data-hidden', 'true');
+    return;
+   }
+   this.node.removeAttribute('data-hidden');
+   this.color.copy(color);
+   this.color.setLightness(lightness);
+   this.updateBgColor();
+  };
+
+  ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+   var brightness = color.value + value * steps;
+   if (brightness <= 0) {
+    this.node.setAttribute('data-hidden', 'true');
+    return;
+   }
+   this.node.removeAttribute('data-hidden');
+   this.color.copy(color);
+   this.color.setValue(brightness);
+   this.updateBgColor();
+  };
+
+  ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+   var alpha = parseFloat(color.a) + value * steps;
+   if (alpha <= 0) {
+    this.node.setAttribute('data-hidden', 'true');
+    return;
+   }
+   this.node.removeAttribute('data-hidden');
+   this.color.copy(color);
+   this.color.a = parseFloat(alpha.toFixed(2));
+   this.updateBgColor();
+  };
+
+  ColorSample.prototype.pickColor = function pickColor() {
+   UIColorPicker.setColor('picker', this.color);
+  };
+
+  ColorSample.prototype.dragStart = function dragStart(e) {
+   e.dataTransfer.setData('sampleID', this.uid);
+   e.dataTransfer.setData('location', 'palette-samples');
+  };
+
+  var Palette = function Palette(text, size) {
+   this.samples = [];
+   this.locked = false;
+
+   var palette = document.createElement('div');
+   var title = document.createElement('div');
+   var controls = document.createElement('div');
+   var container = document.createElement('div');
+   var lock = document.createElement('div');
+
+   container.className = 'container';
+   title.className = 'title';
+   palette.className = 'palette';
+   controls.className = 'controls';
+   lock.className = 'lock';
+   title.textContent = text;
+
+   controls.appendChild(lock);
+   container.appendChild(title);
+   container.appendChild(controls);
+   container.appendChild(palette);
+
+   lock.addEventListener('click', function () {
+    this.locked = !this.locked;
+    lock.setAttribute('locked-state', this.locked);
+   }.bind(this));
+
+   for(var i = 0; i < size; i++) {
+    var sample = new ColorSample();
+    this.samples.push(sample);
+    palette.appendChild(sample.node);
+   }
+
+   this.container = container;
+   this.title = title;
+  };
+
+  var createHuePalette = function createHuePalette() {
+   var palette = new Palette('Hue', 12);
+
+   UIColorPicker.subscribe('picker', function(color) {
+    if (palette.locked === true)
+     return;
+
+    for(var i = 0; i < 12; i++) {
+     palette.samples[i].updateHue(color, 30, i);
+    }
+   });
+
+   color_palette.appendChild(palette.container);
+  };
+
+  var createSaturationPalette = function createSaturationPalette() {
+   var palette = new Palette('Saturation', 11);
+
+   UIColorPicker.subscribe('picker', function(color) {
+    if (palette.locked === true)
+     return;
+
+    for(var i = 0; i < 11; i++) {
+     palette.samples[i].updateSaturation(color, -10, i);
+    }
+   });
+
+   color_palette.appendChild(palette.container);
+  };
+
+  /* Brightness or Lightness - depends on the picker mode */
+  var createVLPalette = function createSaturationPalette() {
+   var palette = new Palette('Lightness', 11);
+
+   UIColorPicker.subscribe('picker', function(color) {
+    if (palette.locked === true)
+     return;
+
+    if(color.format === 'HSL') {
+     palette.title.textContent = 'Lightness';
+     for(var i = 0; i < 11; i++)
+      palette.samples[i].updateLightness(color, -10, i);
+    }
+    else {
+     palette.title.textContent = 'Value';
+     for(var i = 0; i < 11; i++)
+      palette.samples[i].updateBrightness(color, -10, i);
+    }
+   });
+
+   color_palette.appendChild(palette.container);
+  };
+
+  var isBlankPalette = function isBlankPalette(container, value) {
+   if (value === 0) {
+    container.setAttribute('data-collapsed', 'true');
+    return true;
+   }
+
+   container.removeAttribute('data-collapsed');
+   return false;
+  };
+
+  var createAlphaPalette = function createAlphaPalette() {
+   var palette = new Palette('Alpha', 10);
+
+   UIColorPicker.subscribe('picker', function(color) {
+    if (palette.locked === true)
+     return;
+
+    for(var i = 0; i < 10; i++) {
+     palette.samples[i].updateAlpha(color, -0.1, i);
+    }
+   });
+
+   color_palette.appendChild(palette.container);
+  };
+
+  var getSampleColor = function getSampleColor(id) {
+   if (samples[id] !== undefined && samples[id]!== null)
+    return new Color(samples[id].color);
+  };
+
+  var init = function init() {
+   color_palette = getElemById('color-palette');
+
+   createHuePalette();
+   createSaturationPalette();
+   createVLPalette();
+   createAlphaPalette();
+
+  };
+
+  return {
+   init : init,
+   getSampleColor : getSampleColor
+  };
+
+ })();
+
+ /**
+  * ColorInfo
+  */
+ var ColorInfo = (function ColorInfo() {
+
+  var info_box;
+  var select;
+  var RGBA;
+  var HEXA;
+  var HSLA;
+
+  var updateInfo = function updateInfo(color) {
+   if (color.a | 0 === 1) {
+    RGBA.info.textContent = 'RGB';
+    HSLA.info.textContent = 'HSL';
+   }
+   else {
+    RGBA.info.textContent = 'RGBA';
+    HSLA.info.textContent = 'HSLA';
+   }
+
+   RGBA.value.value = color.getRGBA();
+   HSLA.value.value = color.getHSLA();
+   HEXA.value.value = color.getHexa();
+  };
+
+  var InfoProperty = function InfoProperty(info) {
+
+   var node = document.createElement('div');
+   var title = document.createElement('div');
+   var value = document.createElement('input');
+   var copy = document.createElement('div');
+
+   node.className = 'property';
+   title.className = 'type';
+   value.className = 'value';
+   copy.className = 'copy';
+
+   title.textContent = info;
+   value.setAttribute('type', 'text');
+
+   copy.addEventListener('click', function() {
+    value.select();
+   });
+
+   node.appendChild(title);
+   node.appendChild(value);
+   node.appendChild(copy);
+
+   this.node = node;
+   this.value = value;
+   this.info = title;
+
+   info_box.appendChild(node);
+  };
+
+  var init = function init() {
+
+   info_box = getElemById('color-info');
+
+   RGBA = new InfoProperty('RGBA');
+   HSLA = new InfoProperty('HSLA');
+   HEXA = new InfoProperty('HEXA');
+
+   UIColorPicker.subscribe('picker', updateInfo);
+
+  };
+
+  return {
+   init: init
+  };
+
+ })();
+
+ /**
+  * ColorPicker Samples
+  */
+ var ColorPickerSamples = (function ColorPickerSamples() {
+
+  var samples = [];
+  var nr_samples = 0;
+  var active = null;
+  var container = null;
+  var samples_per_line = 10;
+  var trash_can = null;
+  var base_color = new HSLColor(0, 50, 100);
+  var add_btn;
+  var add_btn_pos;
+
+  var ColorSample = function ColorSample() {
+   var node = document.createElement('div');
+   node.className = 'sample';
+
+   this.uid = samples.length;
+   this.index = nr_samples++;
+   this.node = node;
+   this.color = new Color(base_color);
+
+   node.setAttribute('sample-id', this.uid);
+   node.setAttribute('draggable', 'true');
+
+   node.addEventListener('dragstart', this.dragStart.bind(this));
+   node.addEventListener('dragover' , allowDropEvent);
+   node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+   this.updatePosition(this.index);
+   this.updateBgColor();
+   samples.push(this);
+  };
+
+  ColorSample.prototype.updateBgColor = function updateBgColor() {
+   this.node.style.backgroundColor = this.color.getColor();
+  };
+
+  ColorSample.prototype.updatePosition = function updatePosition(index) {
+   this.index = index;
+   this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+   this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+   this.node.style.top  = this.posY + 'px';
+   this.node.style.left = this.posX + 'px';
+  };
+
+  ColorSample.prototype.updateColor = function updateColor(color) {
+   this.color.copy(color);
+   this.updateBgColor();
+  };
+
+  ColorSample.prototype.activate = function activate() {
+   UIColorPicker.setColor('picker', this.color);
+   this.node.setAttribute('data-active', 'true');
+  };
+
+  ColorSample.prototype.deactivate = function deactivate() {
+   this.node.removeAttribute('data-active');
+  };
+
+  ColorSample.prototype.dragStart = function dragStart(e) {
+   e.dataTransfer.setData('sampleID', this.uid);
+   e.dataTransfer.setData('location', 'picker-samples');
+  };
+
+  ColorSample.prototype.dragDrop = function dragDrop(e) {
+   e.stopPropagation();
+   this.color = Tool.getSampleColorFrom(e);
+   this.updateBgColor();
+  };
+
+  ColorSample.prototype.deleteSample = function deleteSample() {
+   container.removeChild(this.node);
+   samples[this.uid] = null;
+   nr_samples--;
+  };
+
+  var updateUI = function updateUI() {
+   updateContainerProp();
+
+   var index = 0;
+   var nr = samples.length;
+   for (var i=0; i < nr; i++)
+    if (samples[i] !== null) {
+     samples[i].updatePosition(index);
+     index++;
+    }
+
+   AddSampleButton.updatePosition(index);
+  };
+
+  var deleteSample = function deleteSample(e) {
+   trash_can.parentElement.setAttribute('drag-state', 'none');
+
+   var location = e.dataTransfer.getData('location');
+   if (location !== 'picker-samples')
+    return;
+
+   var sampleID = e.dataTransfer.getData('sampleID');
+   samples[sampleID].deleteSample();
+   console.log(samples);
+
+   updateUI();
+  };
+
+  var createDropSample = function createDropSample() {
+   var sample = document.createElement('div');
+   sample.id = 'drop-effect-sample';
+   sample.className = 'sample';
+   container.appendChild(sample);
+  };
+
+  var setActivateSample = function setActivateSample(e) {
+   if (e.target.className !== 'sample')
+    return;
+
+   unsetActiveSample(active);
+   Tool.unsetVoidSample();
+   CanvasSamples.unsetActiveSample();
+   active = samples[e.target.getAttribute('sample-id')];
+   active.activate();
+  };
+
+  var unsetActiveSample = function unsetActiveSample() {
+   if (active)
+    active.deactivate();
+   active = null;
+  };
+
+  var getSampleColor = function getSampleColor(id) {
+   if (samples[id] !== undefined && samples[id]!== null)
+    return new Color(samples[id].color);
+  };
+
+  var updateContainerProp = function updateContainerProp() {
+   samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+   var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+   container.style.height = height + 10 + 'px';
+  };
+
+  var AddSampleButton = (function AddSampleButton() {
+   var node;
+   var _index = 0;
+   var _posX;
+   var _posY;
+
+   var updatePosition = function updatePosition(index) {
+    _index = index;
+    _posY = 5 + ((index / samples_per_line) | 0) * 52;
+    _posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+    node.style.top  = _posY + 'px';
+    node.style.left = _posX + 'px';
+   };
+
+   var addButtonClick = function addButtonClick() {
+    var sample = new ColorSample();
+    container.appendChild(sample.node);
+    updatePosition(_index + 1);
+    updateUI();
+   };
+
+   var init = function init() {
+    node = document.createElement('div');
+    var icon = document.createElement('div');
+
+    node.className = 'sample';
+    icon.id = 'add-icon';
+    node.appendChild(icon);
+    node.addEventListener('click', addButtonClick);
+
+    updatePosition(0);
+    container.appendChild(node);
+   };
+
+   return {
+    init : init,
+    updatePosition : updatePosition
+   };
+  })();
+
+  var init = function init() {
+   container = getElemById('picker-samples');
+   trash_can = getElemById('trash-can');
+
+   AddSampleButton.init();
+
+   for (var i=0; i<16; i++) {
+    var sample = new ColorSample();
+    container.appendChild(sample.node);
+   }
+
+   AddSampleButton.updatePosition(samples.length);
+   updateUI();
+
+   active = samples[0];
+   active.activate();
+
+   container.addEventListener('click', setActivateSample);
+
+   trash_can.addEventListener('dragover', allowDropEvent);
+   trash_can.addEventListener('dragenter', function() {
+    this.parentElement.setAttribute('drag-state', 'enter');
+   });
+   trash_can.addEventListener('dragleave', function(e) {
+    this.parentElement.setAttribute('drag-state', 'none');
+   });
+   trash_can.addEventListener('drop', deleteSample);
+
+   UIColorPicker.subscribe('picker', function(color) {
+    if (active)
+     active.updateColor(color);
+   });
+
+  };
+
+  return {
+   init : init,
+   getSampleColor : getSampleColor,
+   unsetActiveSample : unsetActiveSample
+  };
+
+ })();
+
+ /**
+  * Canvas Samples
+  */
+ var CanvasSamples = (function CanvasSamples() {
+
+  var active = null;
+  var canvas = null;
+  var samples = [];
+  var zindex = null;
+  var tutorial = true;
+
+  var CanvasSample = function CanvasSample(color, posX, posY) {
+
+   var node = document.createElement('div');
+   var pick = document.createElement('div');
+   var delete_btn = document.createElement('div');
+   node.className = 'sample';
+   pick.className = 'pick';
+   delete_btn.className = 'delete';
+
+   this.uid = samples.length;
+   this.node = node;
+   this.color = color;
+   this.updateBgColor();
+   this.zIndex = 1;
+
+   node.style.top = posY - 50 + 'px';
+   node.style.left = posX - 50 + 'px';
+   node.setAttribute('sample-id', this.uid);
+
+   node.appendChild(pick);
+   node.appendChild(delete_btn);
+
+   var activate = function activate() {
+    setActiveSample(this);
+   }.bind(this);
+
+   node.addEventListener('dblclick', activate);
+   pick.addEventListener('click', activate);
+   delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+   UIComponent.makeDraggable(node);
+   UIComponent.makeResizable(node);
+
+   samples.push(this);
+   canvas.appendChild(node);
+   return this;
+  };
+
+  CanvasSample.prototype.updateBgColor = function updateBgColor() {
+   this.node.style.backgroundColor = this.color.getColor();
+  };
+
+  CanvasSample.prototype.updateColor = function updateColor(color) {
+   this.color.copy(color);
+   this.updateBgColor();
+  };
+
+  CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+   this.zIndex = value;
+   this.node.style.zIndex = value;
+  };
+
+  CanvasSample.prototype.activate = function activate() {
+   this.node.setAttribute('data-active', 'true');
+   zindex.setAttribute('data-active', 'true');
+
+   UIColorPicker.setColor('picker', this.color);
+   InputSliderManager.setValue('z-index', this.zIndex);
+  };
+
+  CanvasSample.prototype.deactivate = function deactivate() {
+   this.node.removeAttribute('data-active');
+   zindex.removeAttribute('data-active');
+  };
+
+  CanvasSample.prototype.deleteSample = function deleteSample() {
+   if (active === this)
+    unsetActiveSample();
+   canvas.removeChild(this.node);
+   samples[this.uid] = null;
+  };
+
+  CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+   this.node.style.top = posY - this.startY + 'px';
+   this.node.style.left = posX - this.startX + 'px';
+  };
+
+  var canvasDropEvent = function canvasDropEvent(e) {
+   var color = Tool.getSampleColorFrom(e);
+
+   if (color) {
+    var offsetX = e.pageX - canvas.offsetLeft;
+    var offsetY = e.pageY - canvas.offsetTop;
+    var sample = new CanvasSample(color, offsetX, offsetY);
+    if (tutorial) {
+     tutorial = false;
+     canvas.removeAttribute('data-tutorial');
+     var info = new CanvasSample(new Color(), 100, 100);
+     info.node.setAttribute('data-tutorial', 'dblclick');
+    }
+   }
+
+  };
+
+  var setActiveSample = function setActiveSample(sample) {
+   ColorPickerSamples.unsetActiveSample();
+   Tool.unsetVoidSample();
+   unsetActiveSample();
+   active = sample;
+   active.activate();
+  };
+
+  var unsetActiveSample = function unsetActiveSample() {
+   if (active)
+    active.deactivate();
+   active = null;
+  };
+
+  var createToggleBgButton = function createToggleBgButton() {
+   var button = document.createElement('div');
+   var state = false;
+   button.className = 'toggle-bg';
+   canvas.appendChild(button);
+
+   button.addEventListener('click', function() {
+    console.log(state);
+    state = !state;
+    canvas.setAttribute('data-bg', state);
+   });
+  };
+
+  var init = function init() {
+   canvas = getElemById('canvas');
+   zindex = getElemById('zindex');
+
+   canvas.addEventListener('dragover', allowDropEvent);
+   canvas.addEventListener('drop', canvasDropEvent);
+
+   createToggleBgButton();
+
+   UIColorPicker.subscribe('picker', function(color) {
+    if (active) active.updateColor(color);
+   });
+
+   InputSliderManager.subscribe('z-index', function (value) {
+    if (active) active.updateZIndex(value);
+   });
+
+   UIComponent.makeResizable(canvas, 'height');
+  };
+
+  return {
+   init : init,
+   unsetActiveSample : unsetActiveSample
+  };
+
+ })();
+
+ var StateButton = function StateButton(node, state) {
+  this.state = false;
+  this.callback = null;
+
+  node.addEventListener('click', function() {
+   this.state = !this.state;
+   if (typeof this.callback === "function")
+    this.callback(this.state);
+  }.bind(this));
+ };
+
+ StateButton.prototype.set = function set() {
+  this.state = true;
+  if (typeof this.callback === "function")
+   this.callback(this.state);
+ };
+
+ StateButton.prototype.unset = function unset() {
+  this.state = false;
+  if (typeof this.callback === "function")
+   this.callback(this.state);
+ };
+
+ StateButton.prototype.subscribe = function subscribe(func) {
+  this.callback = func;
+ };
+
+
+ /**
+  * Tool
+  */
+ var Tool = (function Tool() {
+
+  var samples = [];
+  var controls = null;
+  var void_sw;
+
+  var createPickerModeSwitch = function createPickerModeSwitch() {
+   var parent = getElemById('controls');
+   var icon = document.createElement('div');
+   var button = document.createElement('div');
+   var hsv = document.createElement('div');
+   var hsl = document.createElement('div');
+   var active = null;
+
+   icon.className = 'icon picker-icon';
+   button.className = 'switch';
+   button.appendChild(hsv);
+   button.appendChild(hsl);
+
+   hsv.textContent = 'HSV';
+   hsl.textContent = 'HSL';
+
+   active = hsl;
+   active.setAttribute('data-active', 'true');
+
+   function switchPickingModeTo(elem) {
+    active.removeAttribute('data-active');
+    active = elem;
+    active.setAttribute('data-active', 'true');
+    UIColorPicker.setPickerMode('picker', active.textContent);
+   };
+
+   var picker_sw = new StateButton(icon);
+   picker_sw.subscribe(function() {
+    if (active === hsv)
+     switchPickingModeTo(hsl);
+    else
+     switchPickingModeTo(hsv);
+   });
+
+   hsv.addEventListener('click', function() {
+    switchPickingModeTo(hsv);
+   });
+   hsl.addEventListener('click', function() {
+    switchPickingModeTo(hsl);
+   });
+
+   parent.appendChild(icon);
+   parent.appendChild(button);
+  };
+
+  var setPickerDragAndDrop = function setPickerDragAndDrop() {
+   var preview = document.querySelector('#picker .preview-color');
+   var picking_area = document.querySelector('#picker .picking-area');
+
+   preview.setAttribute('draggable', 'true');
+   preview.addEventListener('drop', drop);
+   preview.addEventListener('dragstart', dragStart);
+   preview.addEventListener('dragover', allowDropEvent);
+
+   picking_area.addEventListener('drop', drop);
+   picking_area.addEventListener('dragover', allowDropEvent);
+
+   function drop(e) {
+    var color = getSampleColorFrom(e);
+    UIColorPicker.setColor('picker', color);
+   };
+
+   function dragStart(e) {
+    e.dataTransfer.setData('sampleID', 'picker');
+    e.dataTransfer.setData('location', 'picker');
+   };
+  };
+
+  var getSampleColorFrom = function getSampleColorFrom(e) {
+   var sampleID = e.dataTransfer.getData('sampleID');
+   var location = e.dataTransfer.getData('location');
+
+   if (location === 'picker')
+    return UIColorPicker.getColor(sampleID);
+   if (location === 'picker-samples')
+    return ColorPickerSamples.getSampleColor(sampleID);
+   if (location === 'palette-samples')
+    return ColorPalette.getSampleColor(sampleID);
+  };
+
+  var setVoidSwitch = function setVoidSwitch() {
+   var void_sample = getElemById('void-sample');
+   void_sw = new StateButton(void_sample);
+   void_sw.subscribe( function (state) {
+    void_sample.setAttribute('data-active', state);
+    if (state === true) {
+     ColorPickerSamples.unsetActiveSample();
+     CanvasSamples.unsetActiveSample();
+    }
+   });
+  };
+
+  var unsetVoidSample = function unsetVoidSample() {
+   void_sw.unset();
+  };
+
+  var init = function init() {
+   controls = getElemById('controls');
+
+   var color = new Color();
+   color.setHSL(0, 51, 51);
+   UIColorPicker.setColor('picker', color);
+
+   setPickerDragAndDrop();
+   createPickerModeSwitch();
+   setVoidSwitch();
+  };
+
+  return {
+   init : init,
+   unsetVoidSample : unsetVoidSample,
+   getSampleColorFrom : getSampleColorFrom
+  };
+
+ })();
+
+ var init = function init() {
+  UIColorPicker.init();
+  InputSliderManager.init();
+  ColorInfo.init();
+  ColorPalette.init();
+  ColorPickerSamples.init();
+  CanvasSamples.init();
+  Tool.init();
+ };
+
+ return {
+  init : init
+ };
 
 })();
 ```
diff --git a/files/es/web/css/css_columns/using_multi-column_layouts/index.md b/files/es/web/css/css_columns/using_multi-column_layouts/index.md
index 4759894c6bd6a4..a8245853946f31 100644
--- a/files/es/web/css/css_columns/using_multi-column_layouts/index.md
+++ b/files/es/web/css/css_columns/using_multi-column_layouts/index.md
@@ -13,7 +13,7 @@ Cuando leemos un texto, las líneas muy largas resultan incómodas. Si son demas
 
 [El borrador de CSS-3](http://www.w3.org/TR/css3-multicol/) propone algunas nuevas propiedades para dar respuesta a esta necesidad. En Firefox 1.5 y superior hemos implementado algunas de estas propiedades para comportarnos según lo descrito en el borrador de CSS-3 (con una excepción explicada abajo)
 
-[El blog de Robert O'Callahan ](http://weblogs.mozillazine.org/roc/)usa columnas CSS, pruébalo con Firefox 1.5
+[El blog de Robert O'Callahan](http://weblogs.mozillazine.org/roc/)usa columnas CSS, pruébalo con Firefox 1.5
 
 ### Usar Columnas
 
diff --git a/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md b/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
index dde84bda7ab51f..d324ecb0b29cbe 100644
--- a/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
+++ b/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
@@ -68,9 +68,9 @@ En el ejemplo en vivo a continuación, el valor de `align-items` is `stretch`. P
 
 ### Alineando un item individual con align-self
 
-La propiedad align-items establece la propiedad align-self en todos los elementos flexibles como un grupo. Esto significa que puede declarar explícitamente la propiedad `align-self `para apuntar a un solo elemento. La propiedad` align-self `acepta todos los mismos valores que `align-items`, además del valor `auto`, que restablecerá el valor a lo que esté definido en el contenedor flex o flexible..
+La propiedad align-items establece la propiedad align-self en todos los elementos flexibles como un grupo. Esto significa que puede declarar explícitamente la propiedad `align-self`para apuntar a un solo elemento. La propiedad`align-self`acepta todos los mismos valores que `align-items`, además del valor `auto`, que restablecerá el valor a lo que esté definido en el contenedor flex o flexible..
 
-En este siguiente ejemplo en vivo, el contenedor flex tiene el elemento de alineación:` flex-start`, lo que significa que todos los elementos están alineados con el inicio del eje transversal. En este caso se dirige al primer elemento utilizando un selector `first-child`, y se configuró con la propiedad: `strecth`; otro elemento ha sido alineado, utilizando su clase `selected `y dando valor a la propiedad `align-self: center`. Puede cambiar el valor de a`lign-items` o cambiar los valores de `align-self` en los elementos individuales para ver cómo funciona esto.
+En este siguiente ejemplo en vivo, el contenedor flex tiene el elemento de alineación:`flex-start`, lo que significa que todos los elementos están alineados con el inicio del eje transversal. En este caso se dirige al primer elemento utilizando un selector `first-child`, y se configuró con la propiedad: `strecth`; otro elemento ha sido alineado, utilizando su clase `selected`y dando valor a la propiedad `align-self: center`. Puede cambiar el valor de a`lign-items` o cambiar los valores de `align-self` en los elementos individuales para ver cómo funciona esto.
 
 {{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}}
 
@@ -84,7 +84,7 @@ Si cambiamos nuestra `flex-direction` a columna, `align-items` y `align-self` va
 
 ![Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis.](https://mdn.mozillademos.org/files/15631/align5.png)
 
-Puede probarlo con el siguiente ejemplo, que tiene un contenedor flexible, con `flex-direction: column `, y que de lo contrario seria exactamente igual al ejemplo anterior. .
+Puede probarlo con el siguiente ejemplo, que tiene un contenedor flexible, con `flex-direction: column`, y que de lo contrario seria exactamente igual al ejemplo anterior. .
 
 {{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}
 
@@ -122,7 +122,7 @@ Revise la [documentacion para `justify-content` en MDN](/es/docs/Web/CSS/justify
 
 Ahora que hemos visto como funciona la alineacion en el eje transversal, podemos echar una mirada al eje principal. Aquí solo tendremos una propiedad disponible disponible — `justify-content`. Esto se debe a que solo podemos trabajar con los items como grupos en el eje principal. Con `justify-content` controlamos que sucede con el espacion disponible, en caso de que haya más espacio del que se necesita para mostrar los items
 
-En nuestro ejemplo inicial con `display: flex` en el contenedor, los items se muestran como una fila y todos se alinean al inicio del contenedor. Esto se debe a que el valor inicial de `justify-content `es `flex-star`t. Cualquier espacio disponible se coloca al final de los elementos.
+En nuestro ejemplo inicial con `display: flex` en el contenedor, los items se muestran como una fila y todos se alinean al inicio del contenedor. Esto se debe a que el valor inicial de `justify-content`es `flex-star`t. Cualquier espacio disponible se coloca al final de los elementos.
 
 ![Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.](https://mdn.mozillademos.org/files/15632/align6.png)
 
diff --git a/files/es/web/css/css_flow_layout/index.md b/files/es/web/css/css_flow_layout/index.md
index 9328058ef57943..d26ebdceb004ed 100644
--- a/files/es/web/css/css_flow_layout/index.md
+++ b/files/es/web/css/css_flow_layout/index.md
@@ -31,5 +31,5 @@ The first sentence also includes a span element with a blue background. This is
 
 - {{Glossary("Block/CSS", "Block (CSS)")}}
 
-1.  [**CSS**](/es/docs/Web/CSS)
-2.  [**CSS Reference**](/es/docs/Web/CSS/Reference)
+1. [**CSS**](/es/docs/Web/CSS)
+2. [**CSS Reference**](/es/docs/Web/CSS/Reference)
diff --git a/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md
index 639f2204e575c0..c6d8f1ade78134 100644
--- a/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md
+++ b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md
@@ -542,34 +542,34 @@ Hay un par de cosas que a menudo surgen como preguntas. Actualmente no podemos h
 
 Puede ser que se te ocurran tus propios casos de uso para la colocación automática o cualquier otra parte del diseño de la cuadrícula. Si lo hace, créelos como problemas o agréguelos a un problema existente que podría resolver su caso de uso. Esto ayudará a mejorar las futuras versiones de la especificación.
 
-1.  [**CSS**](/es/docs/Web/CSS)
-2.  [**CSS Reference**](/es/docs/Web/CSS/Reference)
-3.  [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
-4.  **Guides**
-
-    1.  [Basics concepts of grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
-    2.  [Relationship to other layout methods](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
-    3.  [Line-based placement](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-    4.  [Grid template areas](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
-    5.  [Layout using named grid lines](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
-    6.  [Auto-placement in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
-    7.  [Box alignment in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
-    8.  [Grids, logical values and writing modes](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
-    9.  [CSS Grid Layout and Accessibility](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
+1. [**CSS**](/es/docs/Web/CSS)
+2. [**CSS Reference**](/es/docs/Web/CSS/Reference)
+3. [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
+4. **Guides**
+
+    1. [Basics concepts of grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
+    2. [Relationship to other layout methods](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
+    3. [Line-based placement](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+    4. [Grid template areas](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
+    5. [Layout using named grid lines](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
+    6. [Auto-placement in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
+    7. [Box alignment in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
+    8. [Grids, logical values and writing modes](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
+    9. [CSS Grid Layout and Accessibility](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
     10. [CSS Grid Layout and Progressive Enhancement](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
     11. [Realizing common layouts using grids](/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
 
-5.  **Properties**
-
-    1.  [grid](/es/docs/Web/CSS/grid)
-    2.  [grid-area](/es/docs/Web/CSS/grid-area)
-    3.  [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
-    4.  [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
-    5.  [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
-    6.  [grid-column](/es/docs/Web/CSS/grid-column)
-    7.  [grid-column-end](/es/docs/Web/CSS/grid-column-end)
-    8.  [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
-    9.  [grid-column-start](/es/docs/Web/CSS/grid-column-start)
+5. **Properties**
+
+    1. [grid](/es/docs/Web/CSS/grid)
+    2. [grid-area](/es/docs/Web/CSS/grid-area)
+    3. [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
+    4. [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
+    5. [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
+    6. [grid-column](/es/docs/Web/CSS/grid-column)
+    7. [grid-column-end](/es/docs/Web/CSS/grid-column-end)
+    8. [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
+    9. [grid-column-start](/es/docs/Web/CSS/grid-column-start)
     10. [grid-gap](/es/docs/Web/CSS/grid-gap)
     11. [grid-row](/es/docs/Web/CSS/grid-row)
     12. [grid-row-end](/es/docs/Web/CSS/grid-row-end)
@@ -580,14 +580,14 @@ Puede ser que se te ocurran tus propios casos de uso para la colocación automá
     17. [grid-template-columns](/es/docs/Web/CSS/grid-template-columns)
     18. [grid-template-rows](/es/docs/Web/CSS/grid-template-rows)
 
-6.  **Glossary**
-
-    1.  [Grid](/es/docs/Glossary/Grid)
-    2.  [Grid lines](/es/docs/Glossary/Grid_lines)
-    3.  [Grid tracks](/es/docs/Glossary/Grid_tracks)
-    4.  [Grid cell](/es/docs/Glossary/Grid_cell)
-    5.  [Grid areas](/es/docs/Glossary/Grid_areas)
-    6.  [Gutters](/es/docs/Glossary/Gutters)
-    7.  [Grid Axis](/es/docs/Glossary/Grid_Axis)
-    8.  [Grid row](/es/docs/Glossary/Grid_rows)
-    9.  [Grid column](/es/docs/Glossary/Grid_column)
+6. **Glossary**
+
+    1. [Grid](/es/docs/Glossary/Grid)
+    2. [Grid lines](/es/docs/Glossary/Grid_lines)
+    3. [Grid tracks](/es/docs/Glossary/Grid_tracks)
+    4. [Grid cell](/es/docs/Glossary/Grid_cell)
+    5. [Grid areas](/es/docs/Glossary/Grid_areas)
+    6. [Gutters](/es/docs/Glossary/Gutters)
+    7. [Grid Axis](/es/docs/Glossary/Grid_Axis)
+    8. [Grid row](/es/docs/Glossary/Grid_rows)
+    9. [Grid column](/es/docs/Glossary/Grid_column)
diff --git a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
index 6599c9bfdc8f39..d4a43013f8f993 100644
--- a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
+++ b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
@@ -657,34 +657,34 @@ Podemos controlar el orden en el que los artículos se apilan utilizando la prop
 
 En este artículo hemos tenido una mirada muy rápida a través de la Especificación de Grid Layout. Juegue un poco con los ejemplos de código, y luego pase a [la siguiente parte de esta guía donde realmente nos vamos a adentrar en detalle dentro de CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout).
 
-1.  [**CSS**](/es/docs/Web/CSS)
-2.  [**CSS Reference**](/es/docs/Web/CSS/Reference)
-3.  [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
-4.  **Guías**
-
-    1.  [Conceptos básicos del posicionamiento con cuadrículas](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
-    2.  [Relación con otros métodos de posicionamiento](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
-    3.  [Posicionamiento basado en líneas](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-    4.  [Áreas de una plantilla de cuadrícula](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
-    5.  [Posicionamiento usando líneas de cuadrícula con nombres](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
-    6.  [Posicionamiento automático en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
-    7.  [Alineación de cajas en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
-    8.  [cuadrículas, valores lógicos y modos de escritura](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
-    9.  [CSS Grid Layout y Accesibilidad](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
+1. [**CSS**](/es/docs/Web/CSS)
+2. [**CSS Reference**](/es/docs/Web/CSS/Reference)
+3. [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
+4. **Guías**
+
+    1. [Conceptos básicos del posicionamiento con cuadrículas](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
+    2. [Relación con otros métodos de posicionamiento](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
+    3. [Posicionamiento basado en líneas](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+    4. [Áreas de una plantilla de cuadrícula](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
+    5. [Posicionamiento usando líneas de cuadrícula con nombres](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
+    6. [Posicionamiento automático en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
+    7. [Alineación de cajas en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
+    8. [cuadrículas, valores lógicos y modos de escritura](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
+    9. [CSS Grid Layout y Accesibilidad](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
     10. [CSS Grid Layout y Mejora Progresiva](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
     11. [Layouts comunes utilizando CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
 
-5.  **Properties**
-
-    1.  [grid](/es/docs/Web/CSS/grid)
-    2.  [grid-area](/es/docs/Web/CSS/grid-area)
-    3.  [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
-    4.  [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
-    5.  [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
-    6.  [grid-column](/es/docs/Web/CSS/grid-column)
-    7.  [grid-column-end](/es/docs/Web/CSS/grid-column-end)
-    8.  [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
-    9.  [grid-column-start](/es/docs/Web/CSS/grid-column-start)
+5. **Properties**
+
+    1. [grid](/es/docs/Web/CSS/grid)
+    2. [grid-area](/es/docs/Web/CSS/grid-area)
+    3. [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
+    4. [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
+    5. [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
+    6. [grid-column](/es/docs/Web/CSS/grid-column)
+    7. [grid-column-end](/es/docs/Web/CSS/grid-column-end)
+    8. [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
+    9. [grid-column-start](/es/docs/Web/CSS/grid-column-start)
     10. [grid-gap](/es/docs/Web/CSS/grid-gap)
     11. [grid-row](/es/docs/Web/CSS/grid-row)
     12. [grid-row-end](/es/docs/Web/CSS/grid-row-end)
@@ -695,14 +695,14 @@ En este artículo hemos tenido una mirada muy rápida a través de la Especifica
     17. [grid-template-columns](/es/docs/Web/CSS/grid-template-columns)
     18. [grid-template-rows](/es/docs/Web/CSS/grid-template-rows)
 
-6.  **Glossary**
-
-    1.  [cuadrícula](/es/docs/Glossary/Grid)
-    2.  [Líneas de cuadrícula](/es/docs/Glossary/Grid_lines)
-    3.  [Pistas de cuadrícula](/es/docs/Glossary/Grid_tracks)
-    4.  [Celda de cuadrícula](/es/docs/Glossary/Grid_cell)
-    5.  [Áreas de cuadrícula](/es/docs/Glossary/Grid_areas)
-    6.  [Canaletas](/es/docs/Glossary/Gutters)
-    7.  [Ejes de cuadrícula](/es/docs/Glossary/Grid_Axis)
-    8.  [Fila de cuadrícula](/es/docs/Glossary/Grid_rows)
-    9.  [Columna de cuadrícula](/es/docs/Glossary/Grid_column)
+6. **Glossary**
+
+    1. [cuadrícula](/es/docs/Glossary/Grid)
+    2. [Líneas de cuadrícula](/es/docs/Glossary/Grid_lines)
+    3. [Pistas de cuadrícula](/es/docs/Glossary/Grid_tracks)
+    4. [Celda de cuadrícula](/es/docs/Glossary/Grid_cell)
+    5. [Áreas de cuadrícula](/es/docs/Glossary/Grid_areas)
+    6. [Canaletas](/es/docs/Glossary/Gutters)
+    7. [Ejes de cuadrícula](/es/docs/Glossary/Grid_Axis)
+    8. [Fila de cuadrícula](/es/docs/Glossary/Grid_rows)
+    9. [Columna de cuadrícula](/es/docs/Glossary/Grid_column)
diff --git a/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md b/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md
index ffb5ff1a8ec578..e223193ce26da8 100644
--- a/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md
+++ b/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md
@@ -629,34 +629,34 @@ CSS Grid Layout, and the Box Alignment specification are designed to work with w
 
 Setting auto margins, using `margin-right` or `margin-left` however, or absolutely positioning items using the `top`, `right`, `bottom` and `left` offsets would not honor writing modes. In the next guide, we will look further into this interaction between CSS grid layout, box alignment and writing modes. This will be important to understand, if you develop sites that are then displayed in multiple languages, or if you want to mix languages or writing modes in a design.
 
-1.  [**CSS**](/es/docs/Web/CSS)
-2.  [**CSS Reference**](/es/docs/Web/CSS/Reference)
-3.  [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
-4.  **Guides**
-
-    1.  [Basics concepts of grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
-    2.  [Relationship to other layout methods](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
-    3.  [Line-based placement](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-    4.  [Grid template areas](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
-    5.  [Layout using named grid lines](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
-    6.  [Auto-placement in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
-    7.  [Box alignment in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
-    8.  [Grids, logical values and writing modes](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
-    9.  [CSS Grid Layout and Accessibility](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
+1. [**CSS**](/es/docs/Web/CSS)
+2. [**CSS Reference**](/es/docs/Web/CSS/Reference)
+3. [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
+4. **Guides**
+
+    1. [Basics concepts of grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
+    2. [Relationship to other layout methods](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
+    3. [Line-based placement](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+    4. [Grid template areas](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
+    5. [Layout using named grid lines](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
+    6. [Auto-placement in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
+    7. [Box alignment in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
+    8. [Grids, logical values and writing modes](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
+    9. [CSS Grid Layout and Accessibility](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
     10. [CSS Grid Layout and Progressive Enhancement](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
     11. [Realizing common layouts using grids](/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
 
-5.  **Properties**
-
-    1.  [grid](/es/docs/Web/CSS/grid)
-    2.  [grid-area](/es/docs/Web/CSS/grid-area)
-    3.  [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
-    4.  [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
-    5.  [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
-    6.  [grid-column](/es/docs/Web/CSS/grid-column)
-    7.  [grid-column-end](/es/docs/Web/CSS/grid-column-end)
-    8.  [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
-    9.  [grid-column-start](/es/docs/Web/CSS/grid-column-start)
+5. **Properties**
+
+    1. [grid](/es/docs/Web/CSS/grid)
+    2. [grid-area](/es/docs/Web/CSS/grid-area)
+    3. [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
+    4. [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
+    5. [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
+    6. [grid-column](/es/docs/Web/CSS/grid-column)
+    7. [grid-column-end](/es/docs/Web/CSS/grid-column-end)
+    8. [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
+    9. [grid-column-start](/es/docs/Web/CSS/grid-column-start)
     10. [grid-gap](/es/docs/Web/CSS/grid-gap)
     11. [grid-row](/es/docs/Web/CSS/grid-row)
     12. [grid-row-end](/es/docs/Web/CSS/grid-row-end)
@@ -667,14 +667,14 @@ Setting auto margins, using `margin-right` or `margin-left` however, or absolute
     17. [grid-template-columns](/es/docs/Web/CSS/grid-template-columns)
     18. [grid-template-rows](/es/docs/Web/CSS/grid-template-rows)
 
-6.  **Glossary**
-
-    1.  [Grid](/es/docs/Glossary/Grid)
-    2.  [Grid lines](/es/docs/Glossary/Grid_lines)
-    3.  [Grid tracks](/es/docs/Glossary/Grid_tracks)
-    4.  [Grid cell](/es/docs/Glossary/Grid_cell)
-    5.  [Grid areas](/es/docs/Glossary/Grid_areas)
-    6.  [Gutters](/es/docs/Glossary/Gutters)
-    7.  [Grid Axis](/es/docs/Glossary/Grid_Axis)
-    8.  [Grid row](/es/docs/Glossary/Grid_rows)
-    9.  [Grid column](/es/docs/Glossary/Grid_column)
+6. **Glossary**
+
+    1. [Grid](/es/docs/Glossary/Grid)
+    2. [Grid lines](/es/docs/Glossary/Grid_lines)
+    3. [Grid tracks](/es/docs/Glossary/Grid_tracks)
+    4. [Grid cell](/es/docs/Glossary/Grid_cell)
+    5. [Grid areas](/es/docs/Glossary/Grid_areas)
+    6. [Gutters](/es/docs/Glossary/Gutters)
+    7. [Grid Axis](/es/docs/Glossary/Grid_Axis)
+    8. [Grid row](/es/docs/Glossary/Grid_rows)
+    9. [Grid column](/es/docs/Glossary/Grid_column)
diff --git a/files/es/web/css/css_grid_layout/index.md b/files/es/web/css/css_grid_layout/index.md
index 220c20c8150aea..5aab26ba965098 100644
--- a/files/es/web/css/css_grid_layout/index.md
+++ b/files/es/web/css/css_grid_layout/index.md
@@ -152,34 +152,34 @@ El siguiente ejemplo muestra un grid de tres columnas con filas nuevas creadas c
 | {{ SpecName("CSS Grid 2") }} | {{ Spec2("CSS Grid 2") }} | Added [subgrids](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid). |
 | {{ SpecName('CSS3 Grid') }} | {{ Spec2('CSS3 Grid') }} | Initial definition.                                                                       |
 
-1.  [**CSS**](/es/docs/Web/CSS)
-2.  [**CSS Reference**](/es/docs/Web/CSS/Reference)
-3.  [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
-4.  **Guías**
-
-    1.  [Basics concepts of grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
-    2.  [Relationship to other layout methods](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
-    3.  [Line-based placement](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-    4.  [Grid template areas](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
-    5.  [Layout using named grid lines](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
-    6.  [Auto-placement in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
-    7.  [Box alignment in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
-    8.  [Grids, logical values and writing modes](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
-    9.  [CSS Grid Layout and Accessibility](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
+1. [**CSS**](/es/docs/Web/CSS)
+2. [**CSS Reference**](/es/docs/Web/CSS/Reference)
+3. [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
+4. **Guías**
+
+    1. [Basics concepts of grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
+    2. [Relationship to other layout methods](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
+    3. [Line-based placement](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+    4. [Grid template areas](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
+    5. [Layout using named grid lines](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
+    6. [Auto-placement in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
+    7. [Box alignment in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
+    8. [Grids, logical values and writing modes](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
+    9. [CSS Grid Layout and Accessibility](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
     10. [CSS Grid Layout and Progressive Enhancement](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
     11. [Realizing common layouts using grids](/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
 
-5.  **Propiedades**
-
-    1.  [grid](/es/docs/Web/CSS/grid)
-    2.  [grid-area](/es/docs/Web/CSS/grid-area)
-    3.  [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
-    4.  [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
-    5.  [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
-    6.  [grid-column](/es/docs/Web/CSS/grid-column)
-    7.  [grid-column-end](/es/docs/Web/CSS/grid-column-end)
-    8.  [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
-    9.  [grid-column-start](/es/docs/Web/CSS/grid-column-start)
+5. **Propiedades**
+
+    1. [grid](/es/docs/Web/CSS/grid)
+    2. [grid-area](/es/docs/Web/CSS/grid-area)
+    3. [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
+    4. [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
+    5. [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
+    6. [grid-column](/es/docs/Web/CSS/grid-column)
+    7. [grid-column-end](/es/docs/Web/CSS/grid-column-end)
+    8. [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
+    9. [grid-column-start](/es/docs/Web/CSS/grid-column-start)
     10. [grid-gap](/es/docs/Web/CSS/grid-gap)
     11. [grid-row](/es/docs/Web/CSS/grid-row)
     12. [grid-row-end](/es/docs/Web/CSS/grid-row-end)
@@ -190,14 +190,14 @@ El siguiente ejemplo muestra un grid de tres columnas con filas nuevas creadas c
     17. [grid-template-columns](/es/docs/Web/CSS/grid-template-columns)
     18. [grid-template-rows](/es/docs/Web/CSS/grid-template-rows)
 
-6.  **Glosario**
-
-    1.  [Grid](/es/docs/Glossary/Grid)
-    2.  [Grid lines](/es/docs/Glossary/Grid_lines)
-    3.  [Grid tracks](/es/docs/Glossary/Grid_tracks)
-    4.  [Grid cell](/es/docs/Glossary/Grid_cell)
-    5.  [Grid areas](/es/docs/Glossary/Grid_areas)
-    6.  [Gutters](/es/docs/Glossary/Gutters)
-    7.  [Grid Axis](/es/docs/Glossary/Grid_Axis)
-    8.  [Grid row](/es/docs/Glossary/Grid_rows)
-    9.  [Grid column](/es/docs/Glossary/Grid_column)
+6. **Glosario**
+
+    1. [Grid](/es/docs/Glossary/Grid)
+    2. [Grid lines](/es/docs/Glossary/Grid_lines)
+    3. [Grid tracks](/es/docs/Glossary/Grid_tracks)
+    4. [Grid cell](/es/docs/Glossary/Grid_cell)
+    5. [Grid areas](/es/docs/Glossary/Grid_areas)
+    6. [Gutters](/es/docs/Glossary/Gutters)
+    7. [Grid Axis](/es/docs/Glossary/Grid_Axis)
+    8. [Grid row](/es/docs/Glossary/Grid_rows)
+    9. [Grid column](/es/docs/Glossary/Grid_column)
diff --git a/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md
index 5b76aa84389350..4dd32d95b26639 100644
--- a/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md
+++ b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md
@@ -539,34 +539,34 @@ La mejor manera de aprender a usar el diseño de la cuadrícula es continuar con
 - Para inspirarte mira [_Layout Labs_ de Jen Simmons](http://labs.jensimmons.com/), ella ha estado creando diseños basados en una variedad de fuentes.
 - ara obtener patrones de diseño comunes adicionales, consulta _[Grid by Example](http://gridbyexample.com)_, donde hay muchos ejemplos> de diseño de cuadrícula y también algunos patrones de interfaz de usuario más grandes y diseños de página completa.
 
-1.  [**CSS**](/es/docs/Web/CSS)
-2.  [**CSS Reference**](/es/docs/Web/CSS/Reference)
-3.  [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
-4.  **Guías**
-
-    1.  [Conceptos básicos del posicionamiento con rejillas](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
-    2.  [Relación con otros métodos de posicionamiento](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
-    3.  [Posicionamiento basado en líneas](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-    4.  [Áreas de una plantilla de rejilla](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
-    5.  [Posicionamiento usando líneas de rejilla con nombres](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
-    6.  [Posicionamiento automático en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
-    7.  [Alineación de cajas en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
-    8.  [Rejillas, valores lógicos y modos de escritura](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
-    9.  [CSS Grid Layout y Accesibilidad](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
+1. [**CSS**](/es/docs/Web/CSS)
+2. [**CSS Reference**](/es/docs/Web/CSS/Reference)
+3. [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
+4. **Guías**
+
+    1. [Conceptos básicos del posicionamiento con rejillas](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
+    2. [Relación con otros métodos de posicionamiento](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
+    3. [Posicionamiento basado en líneas](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+    4. [Áreas de una plantilla de rejilla](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
+    5. [Posicionamiento usando líneas de rejilla con nombres](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
+    6. [Posicionamiento automático en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
+    7. [Alineación de cajas en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
+    8. [Rejillas, valores lógicos y modos de escritura](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
+    9. [CSS Grid Layout y Accesibilidad](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
     10. [CSS Grid Layout y Mejora Progresiva](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
     11. [Layouts comunes utilizando CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
 
-5.  **Properties**
-
-    1.  [grid](/es/docs/Web/CSS/grid)
-    2.  [grid-area](/es/docs/Web/CSS/grid-area)
-    3.  [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
-    4.  [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
-    5.  [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
-    6.  [grid-column](/es/docs/Web/CSS/grid-column)
-    7.  [grid-column-end](/es/docs/Web/CSS/grid-column-end)
-    8.  [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
-    9.  [grid-column-start](/es/docs/Web/CSS/grid-column-start)
+5. **Properties**
+
+    1. [grid](/es/docs/Web/CSS/grid)
+    2. [grid-area](/es/docs/Web/CSS/grid-area)
+    3. [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
+    4. [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
+    5. [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
+    6. [grid-column](/es/docs/Web/CSS/grid-column)
+    7. [grid-column-end](/es/docs/Web/CSS/grid-column-end)
+    8. [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
+    9. [grid-column-start](/es/docs/Web/CSS/grid-column-start)
     10. [grid-gap](/es/docs/Web/CSS/grid-gap)
     11. [grid-row](/es/docs/Web/CSS/grid-row)
     12. [grid-row-end](/es/docs/Web/CSS/grid-row-end)
@@ -577,14 +577,14 @@ La mejor manera de aprender a usar el diseño de la cuadrícula es continuar con
     17. [grid-template-columns](/es/docs/Web/CSS/grid-template-columns)
     18. [grid-template-rows](/es/docs/Web/CSS/grid-template-rows)
 
-6.  **Glossary**
-
-    1.  [Rejilla](/es/docs/Glossary/Grid)
-    2.  [Líneas de rejilla](/es/docs/Glossary/Grid_lines)
-    3.  [Pistas de rejilla](/es/docs/Glossary/Grid_tracks)
-    4.  [Celda de rejilla](/es/docs/Glossary/Grid_cell)
-    5.  [Áreas de rejilla](/es/docs/Glossary/Grid_areas)
-    6.  [Canaletas](/es/docs/Glossary/Gutters)
-    7.  [Ejes de rejilla](/es/docs/Glossary/Grid_Axis)
-    8.  [Fila de rejilla](/es/docs/Glossary/Grid_rows)
-    9.  [Columna de rejilla](/es/docs/Glossary/Grid_column)
+6. **Glossary**
+
+    1. [Rejilla](/es/docs/Glossary/Grid)
+    2. [Líneas de rejilla](/es/docs/Glossary/Grid_lines)
+    3. [Pistas de rejilla](/es/docs/Glossary/Grid_tracks)
+    4. [Celda de rejilla](/es/docs/Glossary/Grid_cell)
+    5. [Áreas de rejilla](/es/docs/Glossary/Grid_areas)
+    6. [Canaletas](/es/docs/Glossary/Gutters)
+    7. [Ejes de rejilla](/es/docs/Glossary/Grid_Axis)
+    8. [Fila de rejilla](/es/docs/Glossary/Grid_rows)
+    9. [Columna de rejilla](/es/docs/Glossary/Grid_column)
diff --git a/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.md b/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.md
index 7e3f7034c3d478..a13d879c467574 100644
--- a/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.md
+++ b/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.md
@@ -374,7 +374,7 @@ En el ejemplo de abajo tengo un wrapper que contiene cuatro ítems hijos, el ít
 
 {{ EmbedLiveSample('grid_container_como_bloque_contenedor', '500', '330') }}
 
-Puedes ver que el ítem está ocupando el área de la línea 2 a la 4 de la cuadrícula y que empieza después de la línea 1. Luego se desplaza en esa área usando las propiedades `top `y `left`. Sin embargo, se ha sacado del flujo, como ocurre con los objetos en posición absoluta, por lo que las reglas de auto-placement colocan los objetos en ese mismo espacio. El ítem tampoco causa que sea generada la fila adicional para que se extienda a la línea 3.
+Puedes ver que el ítem está ocupando el área de la línea 2 a la 4 de la cuadrícula y que empieza después de la línea 1. Luego se desplaza en esa área usando las propiedades `top`y `left`. Sin embargo, se ha sacado del flujo, como ocurre con los objetos en posición absoluta, por lo que las reglas de auto-placement colocan los objetos en ese mismo espacio. El ítem tampoco causa que sea generada la fila adicional para que se extienda a la línea 3.
 
 Si eliminamos `position:` `absolute` de las reglas de `.box3` podemos ver cómo se mostraría sin el posicionamiento.
 
@@ -569,34 +569,34 @@ Esta puede ser una forma de anidar elementos en la rejilla para que actúen como
 
 Como puedes ver en esta guía, CSS Grid Layout es sólo una parte de tu kit de herramientas. No tengas miedo de mezclarlo con otros métodos de maquetación, para conseguir los diferentes efectos que necesitas.
 
-1.  [**CSS**](/es/docs/Web/CSS)
-2.  [**CSS Reference**](/es/docs/Web/CSS/Reference)
-3.  [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
-4.  **Guías**
-
-    1.  [Conceptos básicos del posicionamiento con rejillas](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
-    2.  [Relación con otros métodos de posicionamiento](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
-    3.  [Posicionamiento basado en líneas](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-    4.  [Áreas de una plantilla de rejilla](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
-    5.  [Posicionamiento usando líneas de rejilla con nombres](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
-    6.  [Posicionamiento automático en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
-    7.  [Alineación de cajas en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
-    8.  [Rejillas, valores lógicos y modos de escritura](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
-    9.  [CSS Grid Layout y Accesibilidad](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
+1. [**CSS**](/es/docs/Web/CSS)
+2. [**CSS Reference**](/es/docs/Web/CSS/Reference)
+3. [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
+4. **Guías**
+
+    1. [Conceptos básicos del posicionamiento con rejillas](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
+    2. [Relación con otros métodos de posicionamiento](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
+    3. [Posicionamiento basado en líneas](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+    4. [Áreas de una plantilla de rejilla](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
+    5. [Posicionamiento usando líneas de rejilla con nombres](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
+    6. [Posicionamiento automático en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
+    7. [Alineación de cajas en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
+    8. [Rejillas, valores lógicos y modos de escritura](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
+    9. [CSS Grid Layout y Accesibilidad](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
     10. [CSS Grid Layout y Mejora Progresiva](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
     11. [Layouts comunes utilizando CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
 
-5.  **Properties**
-
-    1.  [grid](/es/docs/Web/CSS/grid)
-    2.  [grid-area](/es/docs/Web/CSS/grid-area)
-    3.  [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
-    4.  [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
-    5.  [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
-    6.  [grid-column](/es/docs/Web/CSS/grid-column)
-    7.  [grid-column-end](/es/docs/Web/CSS/grid-column-end)
-    8.  [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
-    9.  [grid-column-start](/es/docs/Web/CSS/grid-column-start)
+5. **Properties**
+
+    1. [grid](/es/docs/Web/CSS/grid)
+    2. [grid-area](/es/docs/Web/CSS/grid-area)
+    3. [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
+    4. [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
+    5. [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
+    6. [grid-column](/es/docs/Web/CSS/grid-column)
+    7. [grid-column-end](/es/docs/Web/CSS/grid-column-end)
+    8. [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
+    9. [grid-column-start](/es/docs/Web/CSS/grid-column-start)
     10. [grid-gap](/es/docs/Web/CSS/grid-gap)
     11. [grid-row](/es/docs/Web/CSS/grid-row)
     12. [grid-row-end](/es/docs/Web/CSS/grid-row-end)
@@ -607,14 +607,14 @@ Como puedes ver en esta guía, CSS Grid Layout es sólo una parte de tu kit de h
     17. [grid-template-columns](/es/docs/Web/CSS/grid-template-columns)
     18. [grid-template-rows](/es/docs/Web/CSS/grid-template-rows)
 
-6.  **Glossary**
-
-    1.  [Rejilla](/es/docs/Glossary/Grid)
-    2.  [Líneas de rejilla](/es/docs/Glossary/Grid_lines)
-    3.  [Pistas de rejilla](/es/docs/Glossary/Grid_tracks)
-    4.  [Celda de rejilla](/es/docs/Glossary/Grid_cell)
-    5.  [Áreas de rejilla](/es/docs/Glossary/Grid_areas)
-    6.  [Canaletas](/es/docs/Glossary/Gutters)
-    7.  [Ejes de rejilla](/es/docs/Glossary/Grid_Axis)
-    8.  [Fila de rejilla](/es/docs/Glossary/Grid_rows)
-    9.  [Columna de rejilla](/es/docs/Glossary/Grid_column)
+6. **Glossary**
+
+    1. [Rejilla](/es/docs/Glossary/Grid)
+    2. [Líneas de rejilla](/es/docs/Glossary/Grid_lines)
+    3. [Pistas de rejilla](/es/docs/Glossary/Grid_tracks)
+    4. [Celda de rejilla](/es/docs/Glossary/Grid_cell)
+    5. [Áreas de rejilla](/es/docs/Glossary/Grid_areas)
+    6. [Canaletas](/es/docs/Glossary/Gutters)
+    7. [Ejes de rejilla](/es/docs/Glossary/Grid_Axis)
+    8. [Fila de rejilla](/es/docs/Glossary/Grid_rows)
+    9. [Columna de rejilla](/es/docs/Glossary/Grid_column)
diff --git a/files/es/web/css/css_positioning/understanding_z_index/index.md b/files/es/web/css/css_positioning/understanding_z_index/index.md
index 308cfdecc5c595..0b078fd5e25880 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/index.md
@@ -23,13 +23,13 @@ Usar z-index parece extremadamente fácil: una sola propiedad, asigna un número
 
 Este artículo va a intentar explicar esas reglas, de una forma más simple y con varios ejemplos.
 
-1.  [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index "  javichito Apilando sin z-index") : Reglas de apilamiento por defecto
-2.  [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float "Apilamiento y float") : Cómo son manejados los elementos flotantes
-3.  [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index") : Usando z-index para cambiar el apilamiento por defecto
-4.  [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento "El contexto de apilamiento") : Notas sobre el contexto de apilamiento
-5.  [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento "Ejemplo 1 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en el último nivel
-6.  [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento "Ejemplo 2 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en todos los niveles
-7.  [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento "Ejemplo 3 del contexto de apilamiento") : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
+1. [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index "  javichito Apilando sin z-index") : Reglas de apilamiento por defecto
+2. [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float "Apilamiento y float") : Cómo son manejados los elementos flotantes
+3. [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index") : Usando z-index para cambiar el apilamiento por defecto
+4. [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento "El contexto de apilamiento") : Notas sobre el contexto de apilamiento
+5. [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento "Ejemplo 1 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en el último nivel
+6. [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento "Ejemplo 2 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en todos los niveles
+7. [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento "Ejemplo 3 del contexto de apilamiento") : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
 
 _Nota del autor: Gracias a Wladimir Palant y Rod Whiteley por la revisión._
 
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md b/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md
index 8a368063d2f9dc..3c4d7573d514c8 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md
@@ -17,20 +17,20 @@ original_slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float
 
 Para los bloques flotantes el orden de apilamiento es un poco diferente. Los bloques flotantes son colocados entre bloques no posicionados y bloques posicionados:
 
-1.  Fondo y bordes del elemento raiz
-2.  Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
-3.  Bloques flotantes
-4.  Elementos posicionados descendentemente , en orden de aparición (en HTML)
+1. Fondo y bordes del elemento raiz
+2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
+3. Bloques flotantes
+4. Elementos posicionados descendentemente , en orden de aparición (en HTML)
 
 En realidad, como puedes ver en el siguiente ejemplo, el fondo y el borde del bloque no posicionado (DIV #4) no son afectados por los bloques flotantes, mientras que el contenido si es afectado. Esto ocurre de acuerdo al comportamiento flotante stándar de CSS.
 
 Este comportamiento puede ser explicado con una versión mejorada de la lista previa:
 
-1.  Fondo y bordes del elemento raiz
-2.  Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
-3.  Bloques flotantes
-4.  Descendientes en línea en el flujo normal
-5.  Elementos posicionados descendentemente , en orden de aparición (en HTML)
+1. Fondo y bordes del elemento raiz
+2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
+3. Bloques flotantes
+4. Descendientes en línea en el flujo normal
+5. Elementos posicionados descendentemente , en orden de aparición (en HTML)
 
 > **Nota:** En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.)
 
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md
index 2d3f5389dfff95..c03516639e5ebf 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md
@@ -10,9 +10,9 @@ original_slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-in
 
 Cuando ningún elemento tiene z-index, los elementos son apilados en este orden (de abajo hacia arriba):
 
-1.  El fondo y los bordes del elemento raiz
-2.  Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
-3.  Elementos posicionados descendentemente, en orden de aparición (en HTML)
+1. El fondo y los bordes del elemento raiz
+2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
+3. Elementos posicionados descendentemente, en orden de aparición (en HTML)
 
 En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son apropiadamente dimensionados y posicionados para ilustrar las reglas de apilamiento.
 
diff --git a/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md
index d11e60c6aff6c4..1f815e6e514a22 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md
@@ -24,7 +24,7 @@ Un contexto de apilamiento es formado, en cualquier lugar del documento, por cua
 - elementos con un valor {{cssxref("perspective")}} distinto de "none",
 - elementos con un valor {{cssxref("isolation")}} igual a "isolate",
 - `position: fixed`
-- especifican cualquier atributo superior en `{{cssxref("will-change")}} incluso si no especificas valores para estos atributos directamente `(Mira [este post](http://dev.opera.com/articles/css-will-change-property/))
+- especifican cualquier atributo superior en `{{cssxref("will-change")}} incluso si no especificas valores para estos atributos directamente`(Mira [este post](http://dev.opera.com/articles/css-will-change-property/))
 - elementos con un valor {{cssxref("-webkit-overflow-scrolling")}} igual a "touch"
 
 Dentro de un contexto de apilamiento, los elementos hijos son apilados de acuerdo a las mismas reglas previamente explicadas. Es importante entender que los valores z-index de los contextos de apilamiento de los hijos solo tienen sentido en el contexto del padre. Los contextos de apilamiento son tratados atómicamente como una sola unidad en el contexto de apilamiento del padre.
diff --git a/files/es/web/css/css_transitions/using_css_transitions/index.md b/files/es/web/css/css_transitions/using_css_transitions/index.md
index 58fb574c7ddbb7..f31d9c702cfc33 100644
--- a/files/es/web/css/css_transitions/using_css_transitions/index.md
+++ b/files/es/web/css/css_transitions/using_css_transitions/index.md
@@ -12,7 +12,7 @@ original_slug: Web/CSS/Transiciones_de_CSS
 
 Las transiciones CSS, parte del borrador de la especificación CSS3, proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.
 
-> **Nota:** como la especificación de las transiciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko. Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo, la propiedad de transición se especificaría como `-moz-transition`, `-webkit-transition `y `-o-transition`.
+> **Nota:** como la especificación de las transiciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko. Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo, la propiedad de transición se especificaría como `-moz-transition`, `-webkit-transition`y `-o-transition`.
 
 ## Las propiedades de transición CSS
 
@@ -379,7 +379,7 @@ Una vez que hemos establecido los extremos de la secuencia de animación, lo que
 
 > **Nota:** una vez que [la compatibilidad para las animaciones](http://dev.w3.org/csswg/css3-animations/) CSS esté disponible, el código JavaScript no será necesario para lograr este efecto.
 
-En primer lugar, la función` runDemo()` que se llama cuando el documento se carga para inicializar la secuencia de animación:
+En primer lugar, la función`runDemo()` que se llama cuando el documento se carga para inicializar la secuencia de animación:
 
 ```
 function runDemo() {
@@ -392,7 +392,7 @@ function runDemo() {
 }
 ```
 
-Es bastante sencillo: llama a la función` updateTranslation()` que definiremos enseguida, cuyo trabajo es establecer la clase para el elemento que estamos animando según la dirección en la que queramos que viaje. A continuación configura un proceso de escucha de evento para observar el evento "transitionend" que se envía cuando se completa una transición; esto nos permite saber cuándo es el momento para cambiar la clase del elemento para revertir la dirección de la animación.
+Es bastante sencillo: llama a la función`updateTranslation()` que definiremos enseguida, cuyo trabajo es establecer la clase para el elemento que estamos animando según la dirección en la que queramos que viaje. A continuación configura un proceso de escucha de evento para observar el evento "transitionend" que se envía cuando se completa una transición; esto nos permite saber cuándo es el momento para cambiar la clase del elemento para revertir la dirección de la animación.
 
 La función `updateTransition()` tiene este aspecto:
 
diff --git a/files/es/web/css/cursor/index.md b/files/es/web/css/cursor/index.md
index 68fd5a259aed9d..19df210a23a9df 100644
--- a/files/es/web/css/cursor/index.md
+++ b/files/es/web/css/cursor/index.md
@@ -11,7 +11,7 @@ translation_of: Web/CSS/cursor
 
 La propiedad [CSS:cursor](es/CSS/cursor) especifica el tipo de cursor que se mostrara cuando este se encuentre sobre un elemento.
 
-- [CSS:Valor_inicial](es/CSS/Valor_inicial):` CSS:auto`
+- [CSS:Valor_inicial](es/CSS/Valor_inicial):`CSS:auto`
 - Se aplica a: todos los elementos
 - [CSS:inheritance](es/CSS/inheritance): Si
 - Porcentaje: N/A
@@ -224,10 +224,10 @@ Inline:
 External:
 
 .pointer {
-	cursor: pointer;
+ cursor: pointer;
 }
 .move {
-	cursor: move;
+ cursor: move;
 }
 ```
 
diff --git a/files/es/web/css/display/index.md b/files/es/web/css/display/index.md
index 27110b4c750a85..149cf3bb28c51c 100644
--- a/files/es/web/css/display/index.md
+++ b/files/es/web/css/display/index.md
@@ -172,7 +172,7 @@ En la actualidad, es mejor especificar `display` utilizando una sola palabra cla
 
 ### `display: none;`
 
-Al utilizar un valor de `none `en la propiedad `display `el elemento se elimina del [árbol de accesibilidad](/es/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs). El efecto de esto será que este elemento y sus hijos no serán anunciados a los lectores de pantalla utilizados por no videntes.
+Al utilizar un valor de `none`en la propiedad `display`el elemento se elimina del [árbol de accesibilidad](/es/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs). El efecto de esto será que este elemento y sus hijos no serán anunciados a los lectores de pantalla utilizados por no videntes.
 
 Si deseas ocultar el elemento solo de forma visible, pero que los lectores de accesibilidad lo sigan anunciando, puedes utilizar [un método alternativo con una combinación de propiedades de CSS](https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link).
 
diff --git a/files/es/web/css/flex-direction/index.md b/files/es/web/css/flex-direction/index.md
index 0b117597625b37..85ef4a42fb6c3f 100644
--- a/files/es/web/css/flex-direction/index.md
+++ b/files/es/web/css/flex-direction/index.md
@@ -15,7 +15,7 @@ La propiedad CSS **`flex-direction`** especifica cómo colocar los objetos flexi
 
 {{EmbedInteractiveExample("pages/css/flex-direction.html")}}
 
-Tenga en cuenta que el valor de `row `y `row-reverse` se verán afectados por la direccionalidad del contenedor flexible. Si su atributo `dir `es `ltr`, `row` representa el eje horizontal orientado de izquierda a derecha, y `row-reverse` desde la derecha hacia la izquierda; si el atributo `dir `es `rtl`, `row `representa el eje orientado de derecha a izquierda, y `row-reverse` de izquierda a derecha.
+Tenga en cuenta que el valor de `row`y `row-reverse` se verán afectados por la direccionalidad del contenedor flexible. Si su atributo `dir`es `ltr`, `row` representa el eje horizontal orientado de izquierda a derecha, y `row-reverse` desde la derecha hacia la izquierda; si el atributo `dir`es `rtl`, `row`representa el eje orientado de derecha a izquierda, y `row-reverse` de izquierda a derecha.
 
 ## Sintaxis
 
diff --git a/files/es/web/css/flex-shrink/index.md b/files/es/web/css/flex-shrink/index.md
index 6df09114c55c42..d224af6729fe5f 100644
--- a/files/es/web/css/flex-shrink/index.md
+++ b/files/es/web/css/flex-shrink/index.md
@@ -94,7 +94,7 @@ html,body {
 
 ## Sintaxis
 
-La propiedad `flex-shrink` se especifica como un único [``](#).
+La propiedad `flex-shrink` se especifica como un único [``](#number).
 
 ### Valores
 
diff --git a/files/es/web/css/flex/index.md b/files/es/web/css/flex/index.md
index e275f86b603f33..629a78cd566645 100644
--- a/files/es/web/css/flex/index.md
+++ b/files/es/web/css/flex/index.md
@@ -62,19 +62,19 @@ flex: unset;
 
 ```css
 #flex-container {
-	display: -webkit-flex;
-	display: flex;
-	-webkit-flex-direction: row;
-	flex-direction: row;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ flex-direction: row;
 }
 
 #flex-container > .flex-item {
-	-webkit-flex: auto;
-	flex: auto;
+ -webkit-flex: auto;
+ flex: auto;
 }
 
 #flex-container > .raw-item {
-	width: 5rem;
+ width: 5rem;
 }
 ```
 
@@ -89,23 +89,23 @@ flex: unset;
 var flex = document.getElementById("flex");
 var raw = document.getElementById("raw");
 flex.addEventListener("click", function() {
-	raw.style.display = raw.style.display == "none" ? "block" : "none";
+ raw.style.display = raw.style.display == "none" ? "block" : "none";
 });
 ```
 
 ```css hidden
 #flex-container {
-	width: 100%;
-	font-family: Consolas, Arial, sans-serif;
+ width: 100%;
+ font-family: Consolas, Arial, sans-serif;
 }
 
 #flex-container > div {
-	border: 1px solid #f00;
-	padding: 1rem;
+ border: 1px solid #f00;
+ padding: 1rem;
 }
 
 #flex-container > .raw-item {
-	border: 1px solid #000;
+ border: 1px solid #000;
 }
 ```
 
diff --git a/files/es/web/css/float/index.md b/files/es/web/css/float/index.md
index f19525ff89563e..d421b5f9558946 100644
--- a/files/es/web/css/float/index.md
+++ b/files/es/web/css/float/index.md
@@ -96,7 +96,7 @@ Como se ha mencionado más arriba, cuando un elemento flota, es removido del flu
 
 En este ejemplo, hay tres cuadrados de color. Dos flotan hacia la izquierda, y uno hacia la derecha. Nota cómo el segundo cuadrado de la izquierda se coloca a la derecha del primero. Si agregamos cuadrados adicionales se continuarían apilando hacia la derecha, hasta que hayan llenado la caja contenedora, y luego rellenarían la siguiente línea.
 
-Un elemento flotante es al menos tan alto como su elemento hijo flotante más alto. En el ejemplo se le da al elemento padre `width: 100% `y la propiedad de flotante para asegurar que es lo suficientemente alto para encajar con sus hijos flotantes, y asegurar que ocupa el ancho -width- del padre de modo de no tener que limpiar su pariente adyacente.
+Un elemento flotante es al menos tan alto como su elemento hijo flotante más alto. En el ejemplo se le da al elemento padre `width: 100%`y la propiedad de flotante para asegurar que es lo suficientemente alto para encajar con sus hijos flotantes, y asegurar que ocupa el ancho -width- del padre de modo de no tener que limpiar su pariente adyacente.
 
 **HTML**
 

From 45eeb7559c9bcf4ae24949b0d04cfb0f8b63cbcd Mon Sep 17 00:00:00 2001
From: Alexander 
Date: Thu, 20 Oct 2022 12:48:37 -0500
Subject: [PATCH 5/9] css/c-f drop the url title attributes

---
 files/es/web/css/calc/index.md                |  2 +-
 .../using_css_animations/index.md             |  2 +-
 .../using_multiple_backgrounds/index.md       |  6 +++---
 .../index.md                                  |  2 +-
 .../basic_concepts_of_grid_layout/index.md    |  2 +-
 .../css_images/using_css_gradients/index.md   |  6 +++---
 .../adding_z-index/index.md                   | 20 +++++++++----------
 .../understanding_z_index/index.md            | 14 ++++++-------
 .../stacking_and_float/index.md               | 12 +++++------
 .../stacking_context_example_1/index.md       | 14 ++++++-------
 .../stacking_context_example_2/index.md       | 14 ++++++-------
 .../stacking_context_example_3/index.md       | 14 ++++++-------
 .../stacking_without_z-index/index.md         | 14 ++++++-------
 .../the_stacking_context/index.md             | 16 +++++++--------
 .../index.md                                  |  4 ++--
 .../using_css_transforms/index.md             |  2 +-
 .../using_css_transitions/index.md            |  2 +-
 .../es/web/css/descendant_combinator/index.md |  2 +-
 files/es/web/css/filter/index.md              |  6 +++---
 files/es/web/css/flex-flow/index.md           |  4 ++--
 files/es/web/css/flex-shrink/index.md         |  2 +-
 files/es/web/css/flex-wrap/index.md           |  6 +++---
 files/es/web/css/flex/index.md                |  2 +-
 files/es/web/css/float/index.md               |  2 +-
 files/es/web/css/font-weight/index.md         |  2 +-
 files/es/web/css/frequency/index.md           |  4 ++--
 26 files changed, 88 insertions(+), 88 deletions(-)

diff --git a/files/es/web/css/calc/index.md b/files/es/web/css/calc/index.md
index 25b4b8c54234f8..c08818f8cc490d 100644
--- a/files/es/web/css/calc/index.md
+++ b/files/es/web/css/calc/index.md
@@ -116,4 +116,4 @@ El formulario usa 1/6 del ancho disponible. Para asegurar que los campos de entr
 
 ## Ver también
 
-- [Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog](https://hacks.mozilla.org/2010/06/css3-calc/ "Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog")
+- [Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog](https://hacks.mozilla.org/2010/06/css3-calc/)
diff --git a/files/es/web/css/css_animations/using_css_animations/index.md b/files/es/web/css/css_animations/using_css_animations/index.md
index 7692fda039fb53..74915d045582ce 100644
--- a/files/es/web/css/css_animations/using_css_animations/index.md
+++ b/files/es/web/css/css_animations/using_css_animations/index.md
@@ -365,5 +365,5 @@ Solo nos falta mostrar el código HTML necesario para mostrar el ejemplo en la p
 ## Te puede interesar también
 
 - {{ domxref("AnimationEvent", "AnimationEvent") }}
-- [Detecting CSS animation support](/es/docs/CSS/CSS_animations/Detecting_CSS_animation_support "en/CSS/CSS animations/Detecting CSS animation support")
+- [Detecting CSS animation support](/es/docs/CSS/CSS_animations/Detecting_CSS_animation_support)
 - [Using CSS transitions](/es/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
diff --git a/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
index fd5ec3b7078067..99e9ff75686ca5 100644
--- a/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
+++ b/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
@@ -13,7 +13,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
 ---
 {{CSSRef}}
 
-Con [CSS3](/es/docs/Web/CSS/CSS3 "CSS3"), puedes aplicar **múltiple fondos** a los elementos. Estos se presentan uno encima del otro, poniendo el primer fondo definido hasta arriba, y el último, hasta abajo. Sólo el último fondo puede incluir color de fondo.
+Con [CSS3](/es/docs/Web/CSS/CSS3), puedes aplicar **múltiple fondos** a los elementos. Estos se presentan uno encima del otro, poniendo el primer fondo definido hasta arriba, y el último, hasta abajo. Sólo el último fondo puede incluir color de fondo.
 
 Especificar fondos múltiples es fácil:
 
@@ -27,7 +27,7 @@ Puedes hacerlo con la propiedad atajo {{ cssxref("background") }} y con las prop
 
 ## Ejemplo
 
-En este ejemplo, tres fondos son apilados: el logo de Firefox, un [gradiente lineal](/es/docs/Web/CSS/linear-gradient "en/CSS/-moz-linear-gradient"), y una imagen de burbujas:
+En este ejemplo, tres fondos son apilados: el logo de Firefox, un [gradiente lineal](/es/docs/Web/CSS/linear-gradient), y una imagen de burbujas:
 
 ### HTML
 
@@ -58,4 +58,4 @@ Como puedes ver aquí, el logo de Firefox (primero enlistado) está hasta arriba
 
 ## Véase también
 
-- [Usando gradientes con CSS](/es/docs/CSS/Using_CSS_gradients "en/Using gradients")
+- [Usando gradientes con CSS](/es/docs/CSS/Using_CSS_gradients)
diff --git a/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.md b/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.md
index 1efdcd9add8239..b1a32134d6eed7 100644
--- a/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.md
+++ b/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.md
@@ -31,7 +31,7 @@ El espesor de los bordes está determinado por las propiedades {{cssxref("border
 
 El **área del margen**, delimitada por el límite del margen, extiende el área del borde para incluir un área vacía utilizada para separar el elemento de sus vecinos. Sus dimensiones son el _ancho de la caja del margen_ y la _altura de la caja del margen_.
 
-El tamaño del área del margen está determinado por las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref ("margin-bottom")}}, { {cssxref("margin-left")}}, y la propiedad abreviada {{cssxref ("margin")}}. Cuando se produce el [colapso del margen](/en/CSS/margin_collapsing "en/CSS/margin_collapsing"), el área del margen no está claramente definida ya que los márgenes se comparten entre las cajas.
+El tamaño del área del margen está determinado por las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref ("margin-bottom")}}, { {cssxref("margin-left")}}, y la propiedad abreviada {{cssxref ("margin")}}. Cuando se produce el [colapso del margen](/en/CSS/margin_collapsing), el área del margen no está claramente definida ya que los márgenes se comparten entre las cajas.
 
 Finalmente, ten en cuenta que para elementos en línea no reemplazados, la cantidad de espacio ocupado (la contribución a la altura de la línea) está determinada por la propiedad {{cssxref ('line-height')}}, aunque los bordes y el relleno todavía se muestran alrededor del contenido.
 
diff --git a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
index d4a43013f8f993..946ea6f24ec0ec 100644
--- a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
+++ b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
@@ -517,7 +517,7 @@ Si establezco `box1` a `display: grid` puedo darle una definición de vía y tam
 
 {{ EmbedLiveSample('anidamiento', '600', '340') }}
 
-En este caso, la cuadrícula anidada no tiene ninguna relación con el padre. Como usted puede ver en el ejemplo, no ha heredado la [`grid-gap`](/es/docs/Web/CSS/grid-gap "La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor  considera contribuir !") del elemento padre y las líneas de la cuadrícula anidada no se alinean con las líneas de la cuadrícula padre.
+En este caso, la cuadrícula anidada no tiene ninguna relación con el padre. Como usted puede ver en el ejemplo, no ha heredado la [`grid-gap`](/es/docs/Web/CSS/grid-gap) del elemento padre y las líneas de la cuadrícula anidada no se alinean con las líneas de la cuadrícula padre.
 
 ### Subgrid
 
diff --git a/files/es/web/css/css_images/using_css_gradients/index.md b/files/es/web/css/css_images/using_css_gradients/index.md
index fbb66b7420ffaa..aa4ca5e7039924 100644
--- a/files/es/web/css/css_images/using_css_gradients/index.md
+++ b/files/es/web/css/css_images/using_css_gradients/index.md
@@ -4,7 +4,7 @@ slug: Web/CSS/CSS_Images/Using_CSS_gradients
 translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
 original_slug: CSS/Using_CSS_gradients
 ---
-[CSS3](/es/docs/CSS/CSS3 "CSS3") posee soporte para nuevos tipos de _gradientes_ en las propiedades CSS. Usarlos en un segundo plano, permite mostrar transiciones suaves entre dos o más colores especificados, evitando así el uso de imágenes para estos efectos, lo que reduce el tiempo de descarga y el uso de ancho de banda. Además, debido a que el gradiente es generado por el navegador, los objetos degradados se ven mejor cuando se hace un acercamiento, y el ajuste de diseño es mucho más flexible.
+[CSS3](/es/docs/CSS/CSS3) posee soporte para nuevos tipos de _gradientes_ en las propiedades CSS. Usarlos en un segundo plano, permite mostrar transiciones suaves entre dos o más colores especificados, evitando así el uso de imágenes para estos efectos, lo que reduce el tiempo de descarga y el uso de ancho de banda. Además, debido a que el gradiente es generado por el navegador, los objetos degradados se ven mejor cuando se hace un acercamiento, y el ajuste de diseño es mucho más flexible.
 
 Los navegadores soportan dos tipos de gradientes: _lineal_, definido con la función _linear-gradient_, y _radial_, definido con _radial-gradient_.
 
@@ -172,7 +172,7 @@ background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
 
 ### Size
 
-This is one of the areas in which radial gradients differ from linear gradients. You can provide a size value that specifies the point that defines the size of the circle or ellipse. See [this description of the size constants](/es/docs/CSS/radial-gradient#Size_constants "en-US/docs/CSS/-moz-radial-gradient#Size constants") for specifics.
+This is one of the areas in which radial gradients differ from linear gradients. You can provide a size value that specifies the point that defines the size of the circle or ellipse. See [this description of the size constants](/es/docs/CSS/radial-gradient#Size_constants) for specifics.
 
 #### Example: closest-side for ellipses
 
@@ -230,7 +230,7 @@ background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10p
 
 Another example using the {{ cssxref("repeating-linear-gradient") }} property.
 
-[![repeat_background_gradient_checked.png](/@api/deki/files/6192/=repeat_background_gradient_checked.png?size=thumb)](/@api/deki/files/6192/=repeat_background_gradient_checked.png "repeat_background_gradient_checked.png")
+[![repeat_background_gradient_checked.png](/@api/deki/files/6192/=repeat_background_gradient_checked.png?size=thumb)](/@api/deki/files/6192/=repeat_background_gradient_checked.png)
 
 ```css
 background-color: #000;
diff --git a/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.md b/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.md
index 84c9716836d826..a7dcfa5495c8ca 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.md
@@ -4,15 +4,15 @@ slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
 translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
 original_slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index
 ---
-« [CSS](/es/CSS "CSS") « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index "Understanding CSS z-index")
+« [CSS](/es/CSS) « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index)
 
 ### Agregando {{ cssxref("z-index") }}
 
-El primer ejemplo, [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index "  javichito Apilando sin z-index"), explica cómo es organizado el apilamiento por defecto. Si quieres especificar un orden diferente de apilamiento, debes posicionar un elemento y usar la propiedad z-index.
+El primer ejemplo, [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index), explica cómo es organizado el apilamiento por defecto. Si quieres especificar un orden diferente de apilamiento, debes posicionar un elemento y usar la propiedad z-index.
 
 Esta propiedad es asignada con un valor entero (positivo o negativo), el cuál representa la posición del elemento en el eje-Z. Si no estás familiarizado con el eje-Z, imagina que la página tiene muchas capas una encima de la otra. Cada capa es numerada. Una capa con un número mayor es renderizada encima de las capas con números menores.
 
-> **Advertencia:** **Precaución:** z-index solo tiene efecto si un elemento es [posicionado](/es/CSS/position "position").
+> **Advertencia:** **Precaución:** z-index solo tiene efecto si un elemento es [posicionado](/es/CSS/position).
 
 - _bottom: el más lejano al observador_
 - ...
@@ -29,7 +29,7 @@ Esta propiedad es asignada con un valor entero (positivo o negativo), el cuál r
 > **Nota:** **Notas:**
 >
 > - Cuando la propiedad z-index no ha sido especificada, los elementos son renderizados en la capa de renderizado por defecto 0 (cero).
-> - Si varios elementos comparten el mismo valor z-index (_i.e._ están situados en la misma capa), las reglas de apilamiento explicadas en la sección [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index "  javichito Apilando sin z-index") son aplicadas.
+> - Si varios elementos comparten el mismo valor z-index (_i.e._ están situados en la misma capa), las reglas de apilamiento explicadas en la sección [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index) son aplicadas.
 
 En el siguiente ejempo, el orden de apilamiento de las capas es organizado usando z-index. El z-index del DIV#5 no hace efecto ya que este no es un elemento posicionado.
 
@@ -151,12 +151,12 @@ En el siguiente ejempo, el orden de apilamiento de las capas es organizado usand
 
 ### También puedes ver
 
-- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index "  javichito Apilando sin z-index") : Reglas de apilamiento por defecto
-- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float "Apilamiento y float") : Cómo son manejados los elementos flotantes
-- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento "El contexto de apilamiento") : Notas sobre el contexto de apilamiento
-- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento "Ejemplo 1 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en el último nivel
-- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento "Ejemplo 2 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en todos los niveles
-- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento "Ejemplo 3 del contexto de apilamiento") : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
+- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index) : Reglas de apilamiento por defecto
+- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float) : Cómo son manejados los elementos flotantes
+- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento) : Notas sobre el contexto de apilamiento
+- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento) : Jerarquía HTML de 2 niveles, z-index en el último nivel
+- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento) : Jerarquía HTML de 2 niveles, z-index en todos los niveles
+- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento) : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
 
 ### Información del documento original
 
diff --git a/files/es/web/css/css_positioning/understanding_z_index/index.md b/files/es/web/css/css_positioning/understanding_z_index/index.md
index 0b078fd5e25880..16cfe220344d88 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/index.md
@@ -23,13 +23,13 @@ Usar z-index parece extremadamente fácil: una sola propiedad, asigna un número
 
 Este artículo va a intentar explicar esas reglas, de una forma más simple y con varios ejemplos.
 
-1. [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index "  javichito Apilando sin z-index") : Reglas de apilamiento por defecto
-2. [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float "Apilamiento y float") : Cómo son manejados los elementos flotantes
-3. [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index") : Usando z-index para cambiar el apilamiento por defecto
-4. [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento "El contexto de apilamiento") : Notas sobre el contexto de apilamiento
-5. [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento "Ejemplo 1 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en el último nivel
-6. [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento "Ejemplo 2 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en todos los niveles
-7. [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento "Ejemplo 3 del contexto de apilamiento") : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
+1. [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index) : Reglas de apilamiento por defecto
+2. [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float) : Cómo son manejados los elementos flotantes
+3. [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index) : Usando z-index para cambiar el apilamiento por defecto
+4. [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento) : Notas sobre el contexto de apilamiento
+5. [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento) : Jerarquía HTML de 2 niveles, z-index en el último nivel
+6. [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento) : Jerarquía HTML de 2 niveles, z-index en todos los niveles
+7. [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento) : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
 
 _Nota del autor: Gracias a Wladimir Palant y Rod Whiteley por la revisión._
 
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md b/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md
index 3c4d7573d514c8..ccaac20cf744b5 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md
@@ -120,12 +120,12 @@ b {
 
 ### También puedes ver
 
-- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index "  javichito Apilando sin z-index") : Reglas de apilamiento por defecto
-- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index") : Usando z-index para cambiar el apilamiento por defecto
-- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento "El contexto de apilamiento") : Notas sobre el contexto de apilamiento
-- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento "Ejemplo 1 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en el último nivel
-- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento "Ejemplo 2 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en todos los niveles
-- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento "Ejemplo 3 del contexto de apilamiento") : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
+- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index) : Reglas de apilamiento por defecto
+- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index) : Usando z-index para cambiar el apilamiento por defecto
+- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento) : Notas sobre el contexto de apilamiento
+- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento) : Jerarquía HTML de 2 niveles, z-index en el último nivel
+- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento) : Jerarquía HTML de 2 niveles, z-index en todos los niveles
+- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento) : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
 
 ### Información del documento original
 
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md
index b80bb6ef23ba3f..e09af070bec166 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md
@@ -5,7 +5,7 @@ translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_e
 original_slug: >-
   Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento
 ---
-« [CSS](/es/CSS "CSS") « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index "Understanding CSS z-index")
+« [CSS](/es/CSS) « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index)
 
 ### Ejemplo 1 del contexto de apilamiento
 
@@ -112,12 +112,12 @@ En términos de contextos de apilamiento, el DIV #1 y el DIV #3 son simplemente
 
 ### También puedes ver
 
-- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index "  javichito Apilando sin z-index") : Reglas de apilamiento por defecto
-- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float "Apilamiento y float") : Cómo son manejados los elementos flotantes
-- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index") : Usando z-index para cambiar el apilamiento por defecto
-- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento "El contexto de apilamiento") : Notas sobre el contexto de apilamiento
-- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento "Ejemplo 2 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en todos los niveles
-- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento "Ejemplo 3 del contexto de apilamiento") : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
+- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index) : Reglas de apilamiento por defecto
+- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float) : Cómo son manejados los elementos flotantes
+- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index) : Usando z-index para cambiar el apilamiento por defecto
+- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento) : Notas sobre el contexto de apilamiento
+- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento) : Jerarquía HTML de 2 niveles, z-index en todos los niveles
+- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento) : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
 
 ### Información del documento original
 
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md
index deadaa6a7dc812..6e22f0f6fa675f 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md
@@ -5,7 +5,7 @@ translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_e
 original_slug: >-
   Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento
 ---
-« [CSS](/es/CSS "CSS") « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index "Understanding CSS z-index")
+« [CSS](/es/CSS) « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index)
 
 ### Ejemplo 2 del contexto de apilamiento
 
@@ -113,12 +113,12 @@ span.bold { font-weight: bold; }
 
 ### También puedes ver
 
-- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index "  javichito Apilando sin z-index") : Reglas de apilamiento por defecto
-- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float "Apilamiento y float") : Cómo son manejados los elementos flotantes
-- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index") : Usando z-index para cambiar el apilamiento por defecto
-- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento "El contexto de apilamiento") : Notas sobre el contexto de apilamiento
-- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento "Ejemplo 1 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en el último nivel
-- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento "Ejemplo 3 del contexto de apilamiento") : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
+- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index) : Reglas de apilamiento por defecto
+- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float) : Cómo son manejados los elementos flotantes
+- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index) : Usando z-index para cambiar el apilamiento por defecto
+- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento) : Notas sobre el contexto de apilamiento
+- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento) : Jerarquía HTML de 2 niveles, z-index en el último nivel
+- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento) : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
 
 ### Información del documento original
 
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md
index 77366c20ed15e9..bd4e26d100d6ad 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md
@@ -5,7 +5,7 @@ translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_e
 original_slug: >-
   Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento
 ---
-« [CSS](/en/CSS "CSS") « [Understanding CSS z-index](/en/CSS/Understanding_z-index "Understanding CSS z-index")
+« [CSS](/en/CSS) « [Understanding CSS z-index](/en/CSS/Understanding_z-index)
 
 ### Ejemplo 3 del contexto de apilamiento
 
@@ -159,12 +159,12 @@ div.lev3 {
 
 ### También puedes ver
 
-- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index "  javichito Apilando sin z-index") : Reglas de apilamiento por defecto
-- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float "Apilamiento y float") : Cómo son manejados los elementos flotantes
-- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index") : Usando z-index para cambiar el apilamiento por defecto
-- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento "El contexto de apilamiento") : Notas sobre el contexto de apilamiento
-- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento "Ejemplo 1 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en el último nivel
-- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento "Ejemplo 2 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en todos los niveles
+- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index) : Reglas de apilamiento por defecto
+- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float) : Cómo son manejados los elementos flotantes
+- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index) : Usando z-index para cambiar el apilamiento por defecto
+- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento) : Notas sobre el contexto de apilamiento
+- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento) : Jerarquía HTML de 2 niveles, z-index en el último nivel
+- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento) : Jerarquía HTML de 2 niveles, z-index en todos los niveles
 
 ### Información del documento original
 
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md
index c03516639e5ebf..70a8d2e31e8eac 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md
@@ -4,7 +4,7 @@ slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
 translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
 original_slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index
 ---
-« [CSS](/es/CSS "CSS") « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index "Understanding CSS z-index")
+« [CSS](/es/CSS) « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index)
 
 ### Apilando sin z-index
 
@@ -112,12 +112,12 @@ En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son ap
 
 ### También puedes ver
 
-- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float "Apilamiento y float") : Cómo son manejados los elementos flotantes
-- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index") : Usando z-index para cambiar el apilamiento por defecto
-- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento "El contexto de apilamiento") : Notas sobre el contexto de apilamiento
-- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento "Ejemplo 1 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en el último nivel
-- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento "Ejemplo 2 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en todos los niveles
-- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento "Ejemplo 3 del contexto de apilamiento") : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
+- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float) : Cómo son manejados los elementos flotantes
+- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index) : Usando z-index para cambiar el apilamiento por defecto
+- [El contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento) : Notas sobre el contexto de apilamiento
+- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento) : Jerarquía HTML de 2 niveles, z-index en el último nivel
+- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento) : Jerarquía HTML de 2 niveles, z-index en todos los niveles
+- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento) : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
 
 ### Información del documento original
 
diff --git a/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md
index 1f815e6e514a22..ee56574e10334a 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md
@@ -6,11 +6,11 @@ original_slug: Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilam
 ---
 El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.
 
-« [CSS](/es/CSS "CSS") « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index "Understanding CSS z-index")
+« [CSS](/es/CSS) « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index)
 
 ## El contexto de apilamiento
 
-En el ejemplo previo, [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index"), el orden de renderizado de ciertos DIVs es influenciado por sus valores z-index. Esto ocurre debido a que estos DIVs tienen propiedades especiales que causan que formen un contexto de apilamiento.
+En el ejemplo previo, [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index), el orden de renderizado de ciertos DIVs es influenciado por sus valores z-index. Esto ocurre debido a que estos DIVs tienen propiedades especiales que causan que formen un contexto de apilamiento.
 
 Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemento que
 
@@ -194,12 +194,12 @@ h1 {
 
 ### También puedes ver
 
-- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index "  javichito Apilando sin z-index") : Reglas de apilamiento por defecto
-- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float "Apilamiento y float") : Cómo son manejados los elementos flotantes
-- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index "Agregando z-index") : Usando z-index para cambiar el apilamiento por defecto
-- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento "Ejemplo 1 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en el último nivel
-- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento "Ejemplo 2 del contexto de apilamiento") : Jerarquía HTML de 2 niveles, z-index en todos los niveles
-- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento "Ejemplo 3 del contexto de apilamiento") : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
+- [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index) : Reglas de apilamiento por defecto
+- [Apilamiento y float](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float) : Cómo son manejados los elementos flotantes
+- [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index) : Usando z-index para cambiar el apilamiento por defecto
+- [Ejemplo 1 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento) : Jerarquía HTML de 2 niveles, z-index en el último nivel
+- [Ejemplo 2 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento) : Jerarquía HTML de 2 niveles, z-index en todos los niveles
+- [Ejemplo 3 del contexto de apilamiento](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento) : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
 
 ### Información del documento original
 
diff --git a/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md b/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md
index 8a248dc20dd3fa..1e3d4942b48fc0 100644
--- a/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md
+++ b/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md
@@ -10,7 +10,7 @@ original_slug: Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selector
 ---
 When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience. {{CSSRef}}
 
-Como ayuda para identificar el destino de un enlace que apunta a una parte específica de un documento, los [Selectores CSS3](http://www.w3.org/TR/css3-selectors/#target-pseudo) incluyen la [pseudo-clase](/en/CSS/Pseudo-classes "Pseudo-classes") {{ Cssxref(":target") }}.
+Como ayuda para identificar el destino de un enlace que apunta a una parte específica de un documento, los [Selectores CSS3](http://www.w3.org/TR/css3-selectors/#target-pseudo) incluyen la [pseudo-clase](/en/CSS/Pseudo-classes) {{ Cssxref(":target") }}.
 
 ### Seleccionando un objetivo (target)
 
@@ -58,7 +58,7 @@ En los casos en los que un identificador de fragmento apunte a una porción del
 ### Enlaces relacionados
 
 - [Selectores CSS3 #target-pseudo](http://www.w3.org/TR/css3-selectors/#target-pseudo)
-- [Referencia CSS :target](/es/CSS/:target "En/CSS/:target")
+- [Referencia CSS :target](/es/CSS/:target)
 
 ### Información del Documento Original
 
diff --git a/files/es/web/css/css_transforms/using_css_transforms/index.md b/files/es/web/css/css_transforms/using_css_transforms/index.md
index 823f780d2e27f7..8176cdf9a1f024 100644
--- a/files/es/web/css/css_transforms/using_css_transforms/index.md
+++ b/files/es/web/css/css_transforms/using_css_transforms/index.md
@@ -74,4 +74,4 @@ Una vez has hecho esto, ya puedes trabajar con los elementos en el espacio 3D.
 
 ## See also
 
-- [Using deviceorientation in 3D Transforms](/en/Using_Deviceorientation_In_3D_Transforms "Using Deviceorientation In 3D Transforms")
+- [Using deviceorientation in 3D Transforms](/en/Using_Deviceorientation_In_3D_Transforms)
diff --git a/files/es/web/css/css_transitions/using_css_transitions/index.md b/files/es/web/css/css_transitions/using_css_transitions/index.md
index f31d9c702cfc33..be061b78bfb234 100644
--- a/files/es/web/css/css_transitions/using_css_transitions/index.md
+++ b/files/es/web/css/css_transitions/using_css_transitions/index.md
@@ -326,7 +326,7 @@ Lo único que hay que observar aquí es que establecemos la clase para nuestra c
 
 #### La CSS
 
-Para crear nuestro efecto de animación, usamos dos clases de CSS, "slideRight" y "slideLeft". Si deseas ver el código completo de CSS, puedes mirar el archivo [`transitions.css`](/samples/cssref/transitions/sample1/transitions.css "https://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css") en su totalidad. A continuación se muestran sólo los trozos relevantes:
+Para crear nuestro efecto de animación, usamos dos clases de CSS, "slideRight" y "slideLeft". Si deseas ver el código completo de CSS, puedes mirar el archivo [`transitions.css`](/samples/cssref/transitions/sample1/transitions.css) en su totalidad. A continuación se muestran sólo los trozos relevantes:
 
 ```
 .slideRight {
diff --git a/files/es/web/css/descendant_combinator/index.md b/files/es/web/css/descendant_combinator/index.md
index 281625fb73ee2b..d6ee7f8a403a13 100644
--- a/files/es/web/css/descendant_combinator/index.md
+++ b/files/es/web/css/descendant_combinator/index.md
@@ -7,7 +7,7 @@ translation_of: Web/CSS/Descendant_combinator
 
 ## Sumario
 
-El `␣` combinador (que se supone que representan un espacio, o mejor dicho uno o más espacios en blanco) combina dos selectores tales que el selector combinado incluye sólo los elementos que coinciden con el segundo selector para los que hay un elemento ancestro que coincide con el primer selector. Los selectores descendientes son similares a [selectores hijos](https://developer.mozilla.org/en/CSS/Child_selectors "selectores es / CSS / Niños") , pero que no requieren que la relación entre los elementos coincidentes ser estrictamente entre padres e hijos.
+El `␣` combinador (que se supone que representan un espacio, o mejor dicho uno o más espacios en blanco) combina dos selectores tales que el selector combinado incluye sólo los elementos que coinciden con el segundo selector para los que hay un elemento ancestro que coincide con el primer selector. Los selectores descendientes son similares a [selectores hijos](https://developer.mozilla.org/en/CSS/Child_selectors) , pero que no requieren que la relación entre los elementos coincidentes ser estrictamente entre padres e hijos.
 
 ## Sintaxis
 
diff --git a/files/es/web/css/filter/index.md b/files/es/web/css/filter/index.md
index 315ac00be671d8..0fdbd019315e4b 100644
--- a/files/es/web/css/filter/index.md
+++ b/files/es/web/css/filter/index.md
@@ -16,7 +16,7 @@ translation_of: Web/CSS/filter
 
 La propiedad CSS **`filter`** dota de efectos gráficos como el desenfoque o cambio de color en la representación antes de que se muestre el elemento. Los filtros se utilizan comúnmente para ajustar la representación de imágenes, fondos o bordes.
 
-Hay varias funciones Incluidas en el estándar CSS que logran efectos predefinidos. También puede hacer referencia a un filtro especificado en SVG con una URL a un [filtro de un elemento SVG](/es/docs/Web/SVG/Element/filter "/en/SVG/Element/filter").
+Hay varias funciones Incluidas en el estándar CSS que logran efectos predefinidos. También puede hacer referencia a un filtro especificado en SVG con una URL a un [filtro de un elemento SVG](/es/docs/Web/SVG/Element/filter).
 
 > **Nota:** Versiones anteriores (4.0 hasta 9.0) del navegador Internet Explorer de Windows admiten una propiedad ["filter"]() no incluida en el estándar que ha quedado en desuso.
 
@@ -1135,7 +1135,7 @@ table.standard-table td {
 
 ## Véase también
 
-- [Aplicando efectos de SVG a contenido HTML](/es/docs/Applying_SVG_effects_to_HTML_content "En/Applying SVG effects to HTML content")
+- [Aplicando efectos de SVG a contenido HTML](/es/docs/Applying_SVG_effects_to_HTML_content)
 - La propiedad {{ Cssxref("mask") }}
-- [SVG](/es/docs/SVG "En/SVG")
+- [SVG](/es/docs/SVG)
 - [Entendiendo los filtros CSS](http://www.html5rocks.com/en/tutorials/filters/understanding-css/), artículo en inglés de HTML5Rocks!
diff --git a/files/es/web/css/flex-flow/index.md b/files/es/web/css/flex-flow/index.md
index c3b76e6f39fe83..d962e3200fc322 100644
--- a/files/es/web/css/flex-flow/index.md
+++ b/files/es/web/css/flex-flow/index.md
@@ -12,7 +12,7 @@ translation_of: Web/CSS/flex-flow
 
 ## Resumen
 
-La propiedad [CSS](/es/docs/CSS "CSS") **`flex-flow`** es una propiedad atajo para las propiedades individuales `flex-direction` y `flex-wrap`.
+La propiedad [CSS](/es/docs/CSS) **`flex-flow`** es una propiedad atajo para las propiedades individuales `flex-direction` y `flex-wrap`.
 
 {{cssinfo}}
 
@@ -45,7 +45,7 @@ flex-flow: unset;
 
 ### Valores
 
-Ve [`flex-direction`](/es/docs/CSS/flex-direction "en-US/docs/CSS/flex-direction") y [`flex-wrap`](/es/docs/CSS/flex-wrap "flex-wrap") para más detalles de los valores.
+Ve [`flex-direction`](/es/docs/CSS/flex-direction) y [`flex-wrap`](/es/docs/CSS/flex-wrap) para más detalles de los valores.
 
 ### Sintaxis formal
 
diff --git a/files/es/web/css/flex-shrink/index.md b/files/es/web/css/flex-shrink/index.md
index d224af6729fe5f..d795bba3f22bec 100644
--- a/files/es/web/css/flex-shrink/index.md
+++ b/files/es/web/css/flex-shrink/index.md
@@ -5,7 +5,7 @@ translation_of: Web/CSS/flex-shrink
 ---
 {{CSSRef}}
 
-La propiedad [CSS](/es/docs/CSS "CSS") **`flex-shrink`** especifica el factor de contracción de un flex item. Los flex items se encogerán para llenar el contenedor de acuerdo a su número `flex-shrink` , cuando el tamaño por defecto de los flex items sea mayor al de su contenedor flex container.
+La propiedad [CSS](/es/docs/CSS) **`flex-shrink`** especifica el factor de contracción de un flex item. Los flex items se encogerán para llenar el contenedor de acuerdo a su número `flex-shrink` , cuando el tamaño por defecto de los flex items sea mayor al de su contenedor flex container.
 
 ```css
 flex-shrink: 2;
diff --git a/files/es/web/css/flex-wrap/index.md b/files/es/web/css/flex-wrap/index.md
index 5b73f6446c2ae3..b76db4af71b9c1 100644
--- a/files/es/web/css/flex-wrap/index.md
+++ b/files/es/web/css/flex-wrap/index.md
@@ -7,11 +7,11 @@ translation_of: Web/CSS/flex-wrap
 
 ## Resumen
 
-La propiedad **`flex-wrap`** de [CSS](/es/docs/CSS "CSS") especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas. Si la cobertura (wrap) está permitida, esta propiedad también te permite controlar la dirección en la cual serán apilados los elementos.
+La propiedad **`flex-wrap`** de [CSS](/es/docs/CSS) especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas. Si la cobertura (wrap) está permitida, esta propiedad también te permite controlar la dirección en la cual serán apilados los elementos.
 
 {{cssinfo}}
 
-Ver [Usando cajas flexibles CSS](/es/docs/Web/Guide/CSS/Cajas_flexibles "/en/CSS/Using_CSS_flexible_boxes") para conocer más propiedades e información.
+Ver [Usando cajas flexibles CSS](/es/docs/Web/Guide/CSS/Cajas_flexibles) para conocer más propiedades e información.
 
 ## Sintaxis
 
@@ -58,4 +58,4 @@ element {
 
 ## Ver también
 
-- [Usando cajas flexibles CSS](/es/docs/Web/Guide/CSS/Cajas_flexibles "/en-US/docs/CSS/Using_CSS_flexible_boxes")
+- [Usando cajas flexibles CSS](/es/docs/Web/Guide/CSS/Cajas_flexibles)
diff --git a/files/es/web/css/flex/index.md b/files/es/web/css/flex/index.md
index 629a78cd566645..57f17b0352ab66 100644
--- a/files/es/web/css/flex/index.md
+++ b/files/es/web/css/flex/index.md
@@ -50,7 +50,7 @@ flex: unset;
 - `<'flex-shrink'>`
   - : Define el [`flex-shrink`](/en-US/docs/Web/CSS/flex-shrink) del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.
 - `<'flex-basis'>`
-  - : Define el [`flex-basis`](/es/docs/CSS/flex-basis "CSS/flex-basis") del elemento flexible. Se acepta cualquier valor válido para las propiedades `width` y `height` . Un tamaño preferente de 0 debe tener una unidad para evitar ser interpretado como flexible. El valor predeterminado es 0% cuando se omite.
+  - : Define el [`flex-basis`](/es/docs/CSS/flex-basis) del elemento flexible. Se acepta cualquier valor válido para las propiedades `width` y `height` . Un tamaño preferente de 0 debe tener una unidad para evitar ser interpretado como flexible. El valor predeterminado es 0% cuando se omite.
 - `none`
   - : Esta palabra clave se computa a `0 0 auto`.
 
diff --git a/files/es/web/css/float/index.md b/files/es/web/css/float/index.md
index d421b5f9558946..a6438ea8f3f719 100644
--- a/files/es/web/css/float/index.md
+++ b/files/es/web/css/float/index.md
@@ -39,7 +39,7 @@ Como `float` implica el uso del layout de bloques, este modifica el valor calcul
 | inline-grid            | grid                |
 | otros                  | sin cambios         |
 
-Nota: Al referirse a una propiedad desde JavaScript como un miembro del objeto [element.style](/es/DOM/element#element.style "es/DOM/element#element.style"), hay que tener en cuenta que los navegadores modernos soportan `float` pero en navegadores más antiguos hay que escribir la propiedad como `cssFloat`, otros navegadores como Internet Explorer 8 y anteriores utilizan `styleFloat`. Fue una excepción a la regla, que el nombre del miembro DOM sea el nombre _camel-case_ (styleFloat) del nombre CSS (style-float) separado por guión (debido al hecho que "float" es una palabra reservada en JavaScript, es necesario escapar "class" como "className" y escapar "for" de la etiqueta como "htmlFor" ).
+Nota: Al referirse a una propiedad desde JavaScript como un miembro del objeto [element.style](/es/DOM/element#element.style), hay que tener en cuenta que los navegadores modernos soportan `float` pero en navegadores más antiguos hay que escribir la propiedad como `cssFloat`, otros navegadores como Internet Explorer 8 y anteriores utilizan `styleFloat`. Fue una excepción a la regla, que el nombre del miembro DOM sea el nombre _camel-case_ (styleFloat) del nombre CSS (style-float) separado por guión (debido al hecho que "float" es una palabra reservada en JavaScript, es necesario escapar "class" como "className" y escapar "for" de la etiqueta como "htmlFor" ).
 
 ## Sintáxis
 
diff --git a/files/es/web/css/font-weight/index.md b/files/es/web/css/font-weight/index.md
index 22f97e41283c01..30dcd2972129b1 100644
--- a/files/es/web/css/font-weight/index.md
+++ b/files/es/web/css/font-weight/index.md
@@ -12,7 +12,7 @@ translation_of: Web/CSS/font-weight
 
 ## Resumen
 
-La propiedad **`font-weight`** de [CSS](/es/docs/CSS "CSS") especifica el peso o grueso de la letra. Algunos tipos de letra sólo están disponibles en `normal` y `bold`.
+La propiedad **`font-weight`** de [CSS](/es/docs/CSS) especifica el peso o grueso de la letra. Algunos tipos de letra sólo están disponibles en `normal` y `bold`.
 
 {{cssinfo}}
 
diff --git a/files/es/web/css/frequency/index.md b/files/es/web/css/frequency/index.md
index 151a579c86f2ff..5662bcf3cc6ef2 100644
--- a/files/es/web/css/frequency/index.md
+++ b/files/es/web/css/frequency/index.md
@@ -14,7 +14,7 @@ translation_of: Web/CSS/frequency
 
 ## Resumen
 
-El tipo de dato [CSS](/es/docs/Web/CSS "CSS") `` denota una dimensión en frecuencia, como el tono de una voz hablando. Consisste en un valor {{cssxref("<number>")}} seguido inmediatamente por la unidad. Como en cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.
+El tipo de dato [CSS](/es/docs/Web/CSS) `` denota una dimensión en frecuencia, como el tono de una voz hablando. Consisste en un valor {{cssxref("<number>")}} seguido inmediatamente por la unidad. Como en cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.
 
 Las siguientes unidades deben ser usadas:
 
@@ -46,7 +46,7 @@ Aunque todas las unidades representen la misma frecuencia para el valor `0`, la
 | ------------------------------------------------------------------------------------ | -------------------------------- | ------------------ |
 | {{SpecName('CSS3 Values', '#frequency', '<frequency>')}} | {{Spec2('CSS3 Values')}} | Definición inicial |
 
-Este tipo de dato fue introducido inicialmente en [CSS Nivel 2](http://www.w3.org/TR/CSS2/) para el ya obsoleto [grupo de merios aural](/en/CSS/Aural "aural"), donde era usado para definir el tono de la voz. Dicho grupo fue descontinuado desde entonces, pero el tipo de datos `` ha sido reintroducido en CSS3, aunque ninguna propiedad CSS lo usa por el momento.
+Este tipo de dato fue introducido inicialmente en [CSS Nivel 2](http://www.w3.org/TR/CSS2/) para el ya obsoleto [grupo de merios aural](/en/CSS/Aural), donde era usado para definir el tono de la voz. Dicho grupo fue descontinuado desde entonces, pero el tipo de datos `` ha sido reintroducido en CSS3, aunque ninguna propiedad CSS lo usa por el momento.
 
 ## Compatibilidad de navegadores
 

From 30dfc9b0f39c6b5483b62e8d6ad035124c72724e Mon Sep 17 00:00:00 2001
From: Alexander 
Date: Thu, 20 Oct 2022 12:58:24 -0500
Subject: [PATCH 6/9] fix files/es/web/css/computed_value/index.md

---
 files/es/web/css/computed_value/index.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/files/es/web/css/computed_value/index.md b/files/es/web/css/computed_value/index.md
index 50afcfa5a04a6d..1a9a5313f7a0ff 100644
--- a/files/es/web/css/computed_value/index.md
+++ b/files/es/web/css/computed_value/index.md
@@ -30,5 +30,3 @@ La API DOM [getComputedStyle](es/DOM/window.getComputedStyle) devuelve [used val
 ### Ver también
 
 [specified value](es/CSS/specified_value), [used value](es/CSS/used_value), [actual value](es/CSS/actual_value)
-
-{{ languages( { "en": "en/CSS/computed\_value", "fr": "fr/CSS/Valeur\_calcul\u00e9e", "ja": "ja/CSS/computed\_value", "pl": "pl/CSS/warto\u015b\u0107\_wyliczona" } ) }}

From a4bf7103461cdad34ae5ba5b203c6a775ffd5aee Mon Sep 17 00:00:00 2001
From: Alexander 
Date: Thu, 20 Oct 2022 13:10:12 -0500
Subject: [PATCH 7/9] Fix removing languages macro

---
 files/es/web/css/content/index.md                                | 1 -
 files/es/web/css/css_columns/using_multi-column_layouts/index.md | 1 -
 .../understanding_z_index/adding_z-index/index.md                | 1 -
 files/es/web/css/cursor/index.md                                 | 1 -
 files/es/web/css/direction/index.md                              | 1 -
 5 files changed, 5 deletions(-)

diff --git a/files/es/web/css/content/index.md b/files/es/web/css/content/index.md
index ba16785c547f15..0a5cffb3b4b8bf 100644
--- a/files/es/web/css/content/index.md
+++ b/files/es/web/css/content/index.md
@@ -63,4 +63,3 @@ Categorías
 
 Interwiki Languages
 
-{{ languages( { "en": "en/CSS/content" } ) }}
diff --git a/files/es/web/css/css_columns/using_multi-column_layouts/index.md b/files/es/web/css/css_columns/using_multi-column_layouts/index.md
index a8245853946f31..993e8198f3919f 100644
--- a/files/es/web/css/css_columns/using_multi-column_layouts/index.md
+++ b/files/es/web/css/css_columns/using_multi-column_layouts/index.md
@@ -94,4 +94,3 @@ Categorías
 
 interwiki links
 
-{{ languages( { "en": "en/CSS3\_Columns", "fr": "fr/Colonnes\_CSS3", "it": "it/Le\_Colonne\_nei\_CSS3", "ja": "ja/CSS3\_Columns", "ko": "ko/CSS3\_Columns", "pl": "pl/Kolumny\_CSS3" } ) }}
diff --git a/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.md b/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.md
index a7dcfa5495c8ca..5ee4928bc9586f 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.md
@@ -164,4 +164,3 @@ En el siguiente ejempo, el orden de apilamiento de las capas es organizado usand
 - Este artículo es una traducción al inglés de un artículo que escribí en italiano para [YappY](http://www.yappy.it). He dado el derecho de compartir el contenido bajo [Creative Commons: Attribution-Sharealike license](http://creativecommons.org/licenses/by-sa/2.0/)
 - Last Updated Date: November 3rd, 2014
 
-{{ languages( { "fr": "fr/CSS/Comprendre\_z-index/Ajout\_de\_z-index" } ) }}
diff --git a/files/es/web/css/cursor/index.md b/files/es/web/css/cursor/index.md
index 19df210a23a9df..34838737f48178 100644
--- a/files/es/web/css/cursor/index.md
+++ b/files/es/web/css/cursor/index.md
@@ -254,4 +254,3 @@ While this property works on older browsers, not all values are fully supported.
 
 ### See also
 
-{{ languages( { "fr": "fr/CSS/cursor", "pl": "pl/CSS/cursor", "en": "en/CSS/cursor" } ) }}
diff --git a/files/es/web/css/direction/index.md b/files/es/web/css/direction/index.md
index bababcbe56e47b..ddc7ebe86a9859 100644
--- a/files/es/web/css/direction/index.md
+++ b/files/es/web/css/direction/index.md
@@ -63,4 +63,3 @@ Categorías
 
 Interwiki Languages
 
-{{ languages( { "fr": "fr/CSS/direction", "pl": "pl/CSS/direction", "en": "en/CSS/direction" } ) }}

From abe1b8bc4011152cf675242f13c87a0eebd07097 Mon Sep 17 00:00:00 2001
From: Alexander 
Date: Thu, 20 Oct 2022 17:41:54 -0500
Subject: [PATCH 8/9] Apply suggestions from code review

---
 files/es/web/css/calc/index.md                |    2 +-
 files/es/web/css/clear/index.md               |    6 +-
 files/es/web/css/color/index.md               |    4 +-
 files/es/web/css/column-gap/index.md          |  106 +-
 .../using_css_animations/index.md             |    2 +-
 .../border-image_generator/index.md           | 2723 +----------------
 .../css/css_colors/color_picker_tool/index.md |   15 +-
 .../index.md                                  |    4 +-
 .../index.md                                  |  115 +-
 .../basic_concepts_of_grid_layout/index.md    |  117 +-
 files/es/web/css/css_grid_layout/index.md     |  112 +-
 .../index.md                                  |  108 +-
 .../relationship_of_grid_layout/index.md      |  110 +-
 .../stacking_context_example_1/index.md       |    2 -
 .../stacking_context_example_2/index.md       |    2 -
 .../stacking_context_example_3/index.md       |    2 -
 .../stacking_without_z-index/index.md         |    2 -
 .../the_stacking_context/index.md             |    4 +-
 files/es/web/css/css_selectors/index.md       |   24 +-
 .../using_css_transitions/index.md            |    4 +-
 files/es/web/css/flex-shrink/index.md         |    6 +-
 files/es/web/css/float/index.md               |    6 +-
 .../web/css/font-variant-alternates/index.md  |    2 +-
 files/es/web/css/font/index.md                |   40 +-
 files/es/web/css/frequency/index.md           |    4 +
 25 files changed, 450 insertions(+), 3072 deletions(-)

diff --git a/files/es/web/css/calc/index.md b/files/es/web/css/calc/index.md
index c08818f8cc490d..8d45c9e1575247 100644
--- a/files/es/web/css/calc/index.md
+++ b/files/es/web/css/calc/index.md
@@ -25,7 +25,7 @@ calc(expresión)
 
 ### Expresiones
 
-{{todo("mod,min,max : http://hacks.mozilla.org/2010/06/css3-calc/")}}La expresión puede ser una combinación de los siguientes operadores:
+La expresión puede ser una combinación de los siguientes operadores:
 
 - **+**
   - : Suma
diff --git a/files/es/web/css/clear/index.md b/files/es/web/css/clear/index.md
index 082116184d6cfe..5fc62c71af2c25 100644
--- a/files/es/web/css/clear/index.md
+++ b/files/es/web/css/clear/index.md
@@ -8,7 +8,7 @@ translation_of: Web/CSS/clear
 ---
 {{CSSRef}}
 
-La propiedad [CSS](/es/docs/CSS) **`clear`**especifica si un elemento puede estar al lado de elementos [flotantes](/es/docs/CSS/float) que lo preceden o si debe ser movido (cleared) debajo de ellos. La propiedad `clear` aplica a ambos elementos flotantes y no flotantes.
+La propiedad [CSS](/es/docs/CSS) **`clear`** especifica si un elemento puede estar al lado de elementos [flotantes](/es/docs/CSS/float) que lo preceden o si debe ser movido (cleared) debajo de ellos. La propiedad `clear` aplica a ambos elementos flotantes y no flotantes.
 
 Cuando es aplicado a bloques no flotantes, mueve el [border edge](/es/docs/CSS/box_model) del elemento hacia abajo hasta que este debajo del [margin edge](/es/docs/CSS/box_model) de todos los floats relevantes. Este movimiento (cuando acontece) causa que [margin collapsing](/es/docs/CSS/margin_collapsing) no ocurra.
 
@@ -16,7 +16,7 @@ Cuando se aplica a elementos flotantes, mueve el [margin edge](/es/docs/CSS/box_
 
 Los floats que son relevantes para ser limpiados (cleared) son los primeros floats dentro del mismo [contexto de formato de bloque](/es/docs/Web/Guide/CSS/Block_formatting_context).
 
-> **Nota:**Si deseas que un elemento contenga todos los elementos flotantes dentro, puedes hacer dos cosas, o bien flotar el contenedor también o usar `clear` en un [pseudo-element](/es/docs/Web/CSS/Pseudo-elements) {{cssxref("::after")}}.
+> **Nota:** Si deseas que un elemento contenga todos los elementos flotantes dentro, puedes hacer dos cosas, o bien flotar el contenedor también o usar `clear` en un [pseudo-element](/es/docs/Web/CSS/Pseudo-elements) {{cssxref("::after")}}.
 >
 > ```css
 > #container::after {
@@ -62,7 +62,7 @@ clear: inherit;
 
 ## Ejemplo
 
-> **Nota:**El div con clase 'wrapper' añade un borde para una mejor visibilidad de la utilidad de la propiedad clear
+> **Nota:** El div con clase 'wrapper' añade un borde para una mejor visibilidad de la utilidad de la propiedad clear
 
 ### clear: left
 
diff --git a/files/es/web/css/color/index.md b/files/es/web/css/color/index.md
index 53f316820de58a..20b4ef789debd9 100644
--- a/files/es/web/css/color/index.md
+++ b/files/es/web/css/color/index.md
@@ -22,6 +22,8 @@ La propiedad de CSS **`color`** selecciona el [valor de color](/es/docs/Web/CSS/
 
 Para obtener una descripción general del uso del color en HTML, consulte [Aplicando color a los elementos HTML mediante CSS](/es/docs/Web/HTML/Applying_color).
 
+#### Ejemplo
+
 ```css
 /* Valores de palabras clave */
 color: currentcolor;
@@ -169,7 +171,7 @@ p:first-child {
 .c17 { color: hsla(30 100% 50% / 0.6); }
 ```
 
-{{EmbedLiveSample("color", "100%", 630, "", "", "example-outcome-frame")}}
+{{EmbedLiveSample("", "100%", 630, "", "", "")}}
 
 {{cssinfo}}
 
diff --git a/files/es/web/css/column-gap/index.md b/files/es/web/css/column-gap/index.md
index b3b2c950ec50de..ad4f70dadf2caa 100644
--- a/files/es/web/css/column-gap/index.md
+++ b/files/es/web/css/column-gap/index.md
@@ -40,7 +40,7 @@ El efecto es como si las {{glossary("grid lines")}} afectadas adquieren una anch
 
 ## Ejemplo
 
-### HTML
+HTML
 
 ```html
 

@@ -50,7 +50,7 @@ El efecto es como si las {{glossary("grid lines")}} afectadas adquieren una anch
 

 ```
 
-### CSS
+CSS
 
 ```css
 #grid {
@@ -83,50 +83,58 @@ El efecto es como si las {{glossary("grid lines")}} afectadas adquieren una anch
 - Propiedades CSS relacionadas: {{cssxref("grid-row-gap")}}, {{cssxref("grid-gap")}}
 - Guía sobre CSS Grid Layout: _[Conceptos básicos sobre CSS Grid Layout - Gutters](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters)_
 
-1. [**CSS**](/es/docs/Web/CSS)
-2. **[Referencia CSS](/es/docs/Web/CSS/Reference)**
-3. [Diseño CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout)
-4. **Guías**
-
-    1. [Conceptos básicos sobre Diseño CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
-    2. [Relación con otros métodos de diseño](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
-    3. [Posicionamiento basado en línea](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-    4. [Grid template areas](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
-    5. [Layout using named grid lines](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
-    6. [Auto-placement in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
-    7. [Box alignment in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
-    8. [Grids, logical values and writing modes](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
-    9. [CSS Grid Layout and Accessibility](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
-    10. [CSS Grid Layout and Progressive Enhancement](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
-    11. [Realizing common layouts using grids](/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
-
-5. **Propiedades**
-
-    1. [grid](/es/docs/Web/CSS/grid)
-    2. [grid-area](/es/docs/Web/CSS/grid-area)
-    3. [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
-    4. [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
-    5. [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
-    6. [grid-column](/es/docs/Web/CSS/grid-column)
-    7. [grid-column-end](/es/docs/Web/CSS/grid-column-end)
-    8. [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
-    9. [grid-column-start](/es/docs/Web/CSS/grid-column-start)
-    10. [grid-gap](/es/docs/Web/CSS/grid-gap)
-    11. [grid-row](/es/docs/Web/CSS/grid-row)
-    12. [grid-row-end](/es/docs/Web/CSS/grid-row-end)
-    13. [grid-row-gap](/es/docs/Web/CSS/grid-row-gap)
-    14. [grid-row-start](/es/docs/Web/CSS/grid-row-start)
-    15. [grid-template](/es/docs/Web/CSS/grid-template)
-    16. [grid-template-areas](/es/docs/Web/CSS/grid-template-areas)
-    17. [grid-template-colunms](/es/docs/Web/CSS/grid-template-columns)
-    18. [grid-template-rows](/es/docs/Web/CSS/grid-template-rows)
-
-6. **Glosario**
-
-    1. [Grid lines](/es/docs/Glossary/Grid_lines)
-    2. [Grid tracks](/es/docs/Glossary/Grid_tracks)
-    3. [Grid cell](/es/docs/Glossary/Grid_cell)
-    4. [Grid areas](/es/docs/Glossary/Grid_areas)
-    5. [Gutters](/es/docs/Glossary/Gutters)
-    6. [Grid row](/es/docs/Glossary/Grid_rows)
-    7. [Grid column](/es/docs/Glossary/Grid_column)
+
diff --git a/files/es/web/css/css_animations/using_css_animations/index.md b/files/es/web/css/css_animations/using_css_animations/index.md
index 74915d045582ce..c44a54083fe536 100644
--- a/files/es/web/css/css_animations/using_css_animations/index.md
+++ b/files/es/web/css/css_animations/using_css_animations/index.md
@@ -232,7 +232,7 @@ p {
 }
 ```
 
-> **Nota:**Puedes encontrar más detalles en la página de referencia {{cssxref("animation")}}
+> **Nota:** Puedes encontrar más detalles en la página de referencia {{cssxref("animation")}}
 
 ### Estableciendo multiples valores de propiedades animation
 
diff --git a/files/es/web/css/css_backgrounds_and_borders/border-image_generator/index.md b/files/es/web/css/css_backgrounds_and_borders/border-image_generator/index.md
index eb51eac5329665..a8034e43d3f5a8 100644
--- a/files/es/web/css/css_backgrounds_and_borders/border-image_generator/index.md
+++ b/files/es/web/css/css_backgrounds_and_borders/border-image_generator/index.md
@@ -7,2726 +7,7 @@ tags:
 translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
 original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
 ---
-Esta herramienta permite generar valores para CSS3 {{cssxref("border-image")}}
-
-```html hidden
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Upload image
-
-
-
-
-
-
-
-
-
-
-
- Control Box
-
-
-
-
-
-
-scale
-
-
-
-
-
-
-
-
-
-
-
-
-draggable
-
-
-
-
-
-
-
-
-section height
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- border-image-slice
-
-
-
-
-fill
-
-
-
-
-
-
-
-
-
-
-
-
- border-image-width
-
-
-
-
-
-
-
-
- border-image-outset
-
-
-
-
-
-
-
-
- aditional-properties
-
-
-
-
- repeat-x
-
-
-
-
-repeat
-
-
-stretch
-
-
-round
-
-
-
-
-
-
-
-
- repeat-y
-
-
-
-
-repeat
-
-
-stretch
-
-
-round
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- CSS Code
-
-
-
-                     border-image-slice:
-
-
-
-
-
-                     border-image-width:
-
-
-
-
-
-                     border-image-outset:
-
-
-
-
-
-                     border-image-repeat:
-
-
-
-
-
-                     border-image-source:
-
-
-
-
-
-
-
-
-
-```
-
-```css hidden
-/*  GRID OF TWELVE
- * ========================================================================== */
-
-.span_12 {
- width: 100%;
-}
-
-.span_11 {
- width: 91.46%;
-}
-
-.span_10 {
- width: 83%;
-}
-
-.span_9 {
- width: 74.54%;
-}
-
-.span_8 {
- width: 66.08%;
-}
-
-.span_7 {
- width: 57.62%;
-}
-
-.span_6 {
- width: 49.16%;
-}
-
-.span_5 {
- width: 40.7%;
-}
-
-.span_4 {
- width: 32.24%;
-}
-
-.span_3 {
- width: 23.78%;
-}
-
-.span_2 {
- width: 15.32%;
-}
-
-.span_1 {
- width: 6.86%;
-}
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
- clear: both;
- padding: 0px;
- margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
- display: block;
- float:left;
- margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
- margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
- height: 20px;
- font-family: "Segoe UI", Arial, Helvetica, sans-serif;
- -moz-user-select: none;
- user-select: none;
-}
-
-.ui-input-slider * {
- float: left;
- height: 100%;
- line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
- margin: 0;
- padding: 0;
- width: 50px;
- text-align: center;
-
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.ui-input-slider-info {
- width: 90px;
- padding: 0px 10px 0px 0px;
- text-align: right;
- text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
- width: 16px;
- cursor: pointer;
- background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
- background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
- width: 90px;
- padding: 0 10px 0 0;
- text-align: right;
- text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
- width: 25px;
- background-color: #2C9FC9;
- border-radius: 5px;
- color: #FFF;
- font-weight: bold;
- line-height: 14px;
- text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
- background-color: #379B4A;
- cursor: pointer;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI DropDown
- */
-
-/* Dropdown */
-
-.ui-dropdown {
- height: 2em;
- width: 120px;
- font-family: "Segoe UI", Arial, Helvetica, sans-serif;
- font-size: 12px;
-
- background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
- background-position: right center;
- background-repeat: no-repeat;
- background-color: #359740;
-
- position: relative;
-
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.ui-dropdown:hover {
- cursor: pointer;
- background-color: #208B20;
-}
-
-/* Dropdown Select Button */
-
-.ui-dropdown-select {
- height: inherit;
- padding: 0 0.75em;
- color: #FFF;
- line-height: 2em;
-}
-
-/* Dropdown List */
-
-.ui-dropdown-list {
- width: 100%;
- height: 150px;
- max-height: 150px;
- margin: 0;
- padding: 0 0.3em;
-
- border: 3px solid #3490D2;
- border-color: #208B20;
- background: #666;
- background-color: #EEF1F5;
- color: #000;
-
- position: absolute;
- top: 2em;
- left: 0;
- z-index: 100;
-
- overflow: hidden;
- transition: all 0.3s;
-
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.ui-dropdown-list:hover {
- overflow: auto;
-}
-
-.ui-dropdown-list[data-hidden='true'] {
- height: 0 !important;
- opacity: 0;
- visibility: hidden;
-}
-
-.ui-dropdown[data-position='left'] .ui-dropdown-list {
- left: -100%;
- top: 0;
-}
-
-.ui-dropdown[data-position='right'] .ui-dropdown-list {
- left: 100%;
- top: 0;
-}
-
-.ui-dropdown-list > div {
- width: 100%;
- height: 1.6em;
- margin: 0.3em 0;
- padding: 0.3em;
- line-height: 1em;
-
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.ui-dropdown-list > div:hover {
- background: #3490D2;
- color:#FFF;
- border-radius: 2px;
- cursor: pointer;
-}
-
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI Button
- */
-
-/* Checkbox */
-
-.ui-checkbox {
- text-align: center;
- font-size: 16px;
- font-family: "Segoe UI", Arial, Helvetica, sans-serif;
- line-height: 1.5em;
- color: #FFF;
-
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.ui-checkbox > input {
-  display: none;
-}
-
-.ui-checkbox > label {
- font-size: 12px;
- padding: 0.333em 1.666em 0.5em;
- height: 1em;
- line-height: 1em;
-
- background-color: #888;
- background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
- background-position: center center;
- background-repeat: no-repeat;
-
- color: #FFF;
- border-radius: 2px;
- font-weight: bold;
- float: left;
-}
-
-.ui-checkbox .text {
- padding-left: 34px;
- background-position: center left 10px;
-}
-
-.ui-checkbox .left {
- padding-right: 34px;
- padding-left: 1.666em;
- background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
- cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
- background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
- background-color: #379B4A;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * BORDER IMAGE GENERATOR TOOL
- */
-
-body {
- width: 100%;
- margin: 0 auto;
- padding: 0 0 20px 0;
-
- font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
- /*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
- border: 1px solid #EEE;
-
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-body[data-move='X'] {
- cursor: w-resize !important;
-}
-
-body[data-move='Y'] {
- cursor: s-resize !important;
-}
-
-#container {
- width: 100%;
-
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-[data-draggable='true']:hover {
- cursor: move;
-}
-
-[data-draggable='true']:hover > * {
- cursor: default;
-}
-
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/*
- * Border Image Picker
- */
-
-#gallery {
- box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#image-gallery {
- width: 600px;
- height: 100px;
- margin: 0 auto;
- transition: margin 0.4s;
-}
-
-#image-gallery .image {
- height: 80px;
- float: left;
- margin: 10px;
- opacity: 0.5;
- background-color: #FFF;
- box-shadow: 0px 0px 3px 1px #BABABA;
-}
-
-#image-gallery .image[selected="true"] {
- box-shadow: 0px 0px 3px 1px #3BBA52;
- opacity: 1;
-}
-
-#image-gallery .image:hover {
- cursor: pointer;
- box-shadow: 0px 0px 3px 1px #30ACE5;
- opacity: 1;
-}
-
-#image-gallery[data-collapsed='true'] {
- margin-top: -100px;
-}
-
-/* Load Menu */
-
-#load-actions {
- margin: 10px 0;
-}
-
-#toggle-gallery {
- width: 30px;
- height: 25px;
- margin: 10px;
- color: #FFF;
-
- background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
- background-repeat: no-repeat;
- background-position: top 4px center;
- background-color: #888888 !important;
-
- border-radius: 2px;
- float: left;
-}
-
-#toggle-gallery:hover {
- cursor: pointer;
-}
-
-#toggle-gallery[data-action='show'] {
- background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
- background-color: #888888 !important;
-}
-
-#toggle-gallery[data-action='hide'] {
- background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-}
-
-.button {
- width: 100px;
- height: 25px;
- margin: 10px;
- color: #FFF;
- text-align: center;
- font-size: 12px;
- line-height: 25px;
- background-color: #379B4A;
- border-radius: 2px;
- float: left;
-}
-
-.button:hover {
- cursor: pointer;
- background-color: #3380C4;
-}
-
-#load-image {
- float: left;
-}
-
-#load-remote {
- width: 30px;
- background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
- background-repeat: no-repeat;
- background-position: center center;
-}
-
-#remote-url {
- width: 200px;
- height: 23px;
- margin: 10px;
- padding: 0 5px;
- border: 1px solid #379B4A;
- border-radius: 2px;
- float: left;
-
- transition: width 0.5s;
-}
-
-#remote-url:focus {
- box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
- border-color: rgba(55, 155, 74, 0.5);
- width: 450px;
-}
-
-/*
- * Visible Area
- */
-
-#preview_section {
- position: relative;
- min-height: 400px;
-}
-
-/* Image Control */
-
-#subject {
- width: 300px;
- height: 300px;
- background-repeat: no-repeat;
- background-size: 100%;
- background-color: #FFF;
- border: 1px solid #CCC;
-
- position: absolute;
- z-index: 10;
- top: 15%;
- left: 10%;
-
- box-shadow: 0 0 3px 0 #BABABA;
- transition-property: width, height;
- transition-duration: 0.1s;
-}
-
-#subject .guideline {
- background-color: rgba(255, 255, 255, 0.7);
- border: 1px solid rgba(0, 0, 0, 0.3);
- position: absolute;
-}
-
-#subject .guideline:hover {
- background-color: #F00;
-}
-
-#subject .guideline[data-active] {
- background-color: #F00;
- z-index: 10;
-}
-
-#subject .guideline[data-axis='X'] {
- width: 1px;
- height: 100%;
- top: -1px;
-}
-
-#subject .guideline[data-axis='Y'] {
- width: 100%;
- height: 1px;
- left: -1px;
-}
-
-#subject .guideline[data-axis='X']:hover {
- cursor: w-resize;
-}
-
-#subject .guideline[data-axis='Y']:hover {
- cursor: s-resize;
-}
-
-
-#subject .relative {
- position: relative;
- font-size: 12px;
-}
-
-#subject .tooltip, #subject .tooltip2 {
- width: 40px;
- height: 20px;
- line-height: 20px;
- font-size: 12px;
- text-align: center;
-
- position: absolute;
- opacity: 0.5;
- transition: opacity 0.25s;
-}
-
-#subject .tooltip {
- background: #EEE;
- border-radius: 2px;
- border: 1px solid #CCC;
-}
-
-#subject .tooltip2{
- color: #555;
-}
-
-#subject [data-active] > * {
- opacity: 1;
-}
-
-#subject .tooltip[data-info='top'] {
- top: -10px;
- right: -50px;
-}
-
-#subject .tooltip[data-info='right'] {
- bottom: -30px;
- right: -20px;
-}
-
-#subject .tooltip[data-info='bottom'] {
- top: -10px;
- left: -50px;
-}
-
-#subject .tooltip[data-info='left'] {
- top: -30px;
- right: -20px;
-}
-
-#subject .tooltip2[data-info='top'] {
- top: -10px;
- left: -50px;
-}
-
-#subject .tooltip2[data-info='right'] {
- top: -30px;
- right: -20px;
-}
-
-#subject .tooltip2[data-info='bottom'] {
- top: -10px;
- right: -50px;
-}
-
-#subject .tooltip2[data-info='left'] {
- bottom: -30px;
- right: -20px;
-}
-
-/* Preview */
-
-#preview {
- width: 30%;
- height: 50%;
- background-color: #FFF;
- text-align: center;
- overflow: hidden;
- position: absolute;
- z-index: 10;
-
- left: 60%;
- top: 15%;
-
- border-radius: 2px;
- border-image-width: 20px;
- border-image-repeat: round;
- box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#preview .resize-handle {
- width: 10px;
- height: 10px;
- background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
- position: absolute;
- bottom: 0;
- right: 0;
-}
-
-#preview .resize-handle:hover {
- cursor: nw-resize;
-}
-
-
-/*
- * General controls MENU
- */
-
-#general-controls {
- padding: 10px 30px;
- background-color: #FFF;
- opacity: 0.95;
- color: #888;
- /*border-radius: 2px;*/
- box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#general-controls .property {
- width: 130px;
- float: left;
-}
-
-#general-controls .name {
- height: 20px;
- margin: 0 10px 0 0;
- line-height: 100%;
- text-align: right;
- float: left;
-}
-
-#general-controls .right {
- width: 200px;
- float: right;
-}
-
-#general-controls .ui-checkbox label {
- height: 10px;
-}
-
-#general-controls .separator {
- height: 40px;
- width: 1px;
- margin: -10px 15px;
- background-color: #EEE;
- float: left;
-}
-
-/*
- * Controls
- */
-
-#controls {
- color: #444;
- margin: 10px 0 0 0;
-}
-
-#controls .category {
- height: 190px;
- min-width: 260px;
- margin: 10px;
- padding: 10px;
- border: 1px solid #CCC;
- border-radius: 3px;
- float: left;
-
- box-shadow: 0 0 3px 0 #BABABA;
- transition: all 0.25s;
-
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-@media (min-width: 880px) {
- #controls .category {
-  width: 30%;
-  margin-left: 1.66%;
-  margin-right: 1.66%;
- }
-}
-
-@media (max-width: 879px) {
- #controls .category {
-  width: 37%;
-  margin-left: 6.5%;
-  margin-right: 6.5%;
- }
-}
-
-#controls .category .title {
- width: 100%;
- height: 30px;
- margin: 0 0 10px 0;
- line-height: 25px;
-
- text-align: center;
- color: #AAA;
-}
-
-#controls .category:hover .title {
- color: #777;
-}
-
-#controls .category > .group {
- border: 1px solid #CCC;
- border-radius: 2px;
-}
-
-
-/* property */
-
-#controls .property {
- width: 250px;
- height: 20px;
- margin: 5px auto;
-}
-
-#controls .property .ui-input-slider {
- margin: 0;
- float: left;
-}
-
-#controls .property .ui-input-slider-info {
- width: 60px;
-}
-
-#controls .property .ui-input-slider-left {
- transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .ui-input-slider-right {
- transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .name {
- width: 60px;
- height: 20px;
- padding: 0px 10px 0px 0px;
- text-align: right;
- line-height: 100%;
- float: left;
-}
-
-#controls .property .config {
- width: 20px;
- height: 20px;
- float: left;
- background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
- opacity: 0.5;
-}
-
-#controls .property .config:hover {
- cursor: pointer;
- opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-right {
-    opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-left {
-    opacity: 1;
-}
-
-#controls .property .ui-dropdown {
- margin: 0 10px;
- float: left;
-}
-
-
-#controls .property .ui-checkbox {
- margin: 0 0 0 16px;
- float: left;
-}
-
-#controls .property .ui-checkbox label {
- height: 0.85em;
- width: 10px;
-}
-
-/* dropdowns */
-#controls .ui-dropdown {
- width: 50px;
- height: 1.7em;
- border-radius: 2px;
-}
-
-#controls .ui-dropdown-select {
- line-height: 1.6em;
-}
-
-#controls .ui-dropdown-list {
- top: 20px;
-}
-
-#controls .ui-dropdown-list {
- border-width: 1px;
- text-align: center;
-}
-
-#controls .ui-dropdown-list:hover {
- overflow: hidden;
-}
-
-#controls .border-repeat {
- margin: 0 0 0 16px !important;
- width: 80px;
-}
-
-#controls .border-repeat .ui-dropdown-list {
- height: 6.2em;
- border-width: 1px;
- text-align: center;
-}
-
-/* border-image-slice */
-
-
-#border-slice-control .ui-dropdown-list {
- height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
- height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
- height: 4.3em;
-}
-
-#aditional-properties .property {
- width: 200px;
-}
-
-#aditional-properties .ui-input-slider > input {
- width: 80px !important;
-}
-
-/* unit settings panel */
-
-#unit-settings {
- padding: 10px;
- position: absolute;
-
- background: #FFF;
-
- font-size: 12px;
- border-radius: 3px;
- border: 1px solid #CCC;
- text-align: center;
- color: #555;
-
- position: absolute;
- z-index: 1000;
-
- box-shadow: 0 0 3px 0 #BABABA;
- transition: all 0.25s;
-}
-
-#unit-settings .title {
- width: 100%;
- margin: -5px auto 0;
-
- color: #666;
- font-size: 14px;
- font-weight: bold;
- line-height: 25px;
- border-bottom: 1px solid #E5E5E5;
-}
-
-#unit-settings .ui-input-slider {
- margin: 10px 0 0 0;
-}
-
-#unit-settings .ui-input-slider-info {
- width: 50px;
- line-height: 1.5em;
-}
-
-#unit-settings input {
- font-size: 12px;
- width: 40px !important;
-}
-
-#unit-settings .close {
- width: 16px;
- height: 16px;
- background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
- background-size: 75%;
-
- position: absolute;
- top: 4px;
- right: 4px;
- opacity: 0.5;
-}
-
-#unit-settings .close:hover {
- cursor: pointer;
- opacity: 1;
-}
-
-#unit-settings[data-active='true'] {
- opacity: 1;
-}
-
-#unit-settings[data-active='false'] {
- opacity: 0;
- top: -100px !important;
-}
-
-/*
- * CSS Output Code
- */
-
-#output {
- padding: 10px;
- border: 2px dashed #888 !important;
- box-shadow: none !important;
- border-radius: 3px;
- overflow: hidden;
-
- -moz-user-select: text;
- -webkit-user-select: text;
- -ms-user-select: text;
- user-select: text;
-}
-
-
-@media (min-width: 880px) {
- #output {
-  width: 63.33% !important;
- }
-}
-
-@media (max-width: 879px) {
- #output {
-  width: 87% !important;
- }
-}
-
-
-#output .title {
- width: 100%;
- height: 30px;
- margin: 0 0 10px 0;
- line-height: 25px;
-
- text-align: center;
- color: #AAA;
-}
-
-#output .css-property {
- width: 100%;
- margin: 0;
- color: #555;
- font-size: 14px;
- line-height: 18px;
- float: left;
-}
-
-#output .css-property .name {
- width: 30%;
- font-weight: bold;
- text-align: right;
- float: left;
-}
-
-#output .css-property .value {
- width: 65%;
- padding: 0 2.5%;
- word-break: break-all;
- float: left;
-}
-```
-
-```js hidden
-'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
- var subscribers = {};
- var sliders = [];
-
- var InputComponent = function InputComponent(obj) {
-  var input = document.createElement('input');
-  input.setAttribute('type', 'text');
-  input.style.width = 50 + obj.precision * 10 + 'px';
-
-  input.addEventListener('click', function(e) {
-   this.select();
-  });
-
-  input.addEventListener('change', function(e) {
-   var value = parseFloat(e.target.value);
-
-   if (isNaN(value) === true)
-    setValue(obj.topic, obj.value);
-   else
-    setValue(obj.topic, value);
-  });
-
-  return input;
- };
-
- var SliderComponent = function SliderComponent(obj, sign) {
-  var slider = document.createElement('div');
-  var startX = null;
-  var start_value = 0;
-
-  slider.addEventListener("click", function(e) {
-   document.removeEventListener("mousemove", sliderMotion);
-   setValue(obj.topic, obj.value + obj.step * sign);
-  });
-
-  slider.addEventListener("mousedown", function(e) {
-   startX = e.clientX;
-   start_value = obj.value;
-   document.body.style.cursor = "e-resize";
-
-   document.addEventListener("mouseup", slideEnd);
-   document.addEventListener("mousemove", sliderMotion);
-  });
-
-  var slideEnd = function slideEnd(e) {
-   document.removeEventListener("mousemove", sliderMotion);
-   document.body.style.cursor = "auto";
-   slider.style.cursor = "pointer";
-  };
-
-  var sliderMotion = function sliderMotion(e) {
-   slider.style.cursor = "e-resize";
-   var delta = (e.clientX - startX) / obj.sensivity | 0;
-   var value = delta * obj.step + start_value;
-   setValue(obj.topic, value);
-  };
-
-  return slider;
- };
-
- var InputSlider = function(node) {
-  var min  = parseFloat(node.getAttribute('data-min'));
-  var max  = parseFloat(node.getAttribute('data-max'));
-  var step = parseFloat(node.getAttribute('data-step'));
-  var value = parseFloat(node.getAttribute('data-value'));
-  var topic = node.getAttribute('data-topic');
-  var unit = node.getAttribute('data-unit');
-  var name  = node.getAttribute('data-info');
-  var sensivity = node.getAttribute('data-sensivity') | 0;
-  var precision = node.getAttribute('data-precision') | 0;
-
-  this.min = isNaN(min) ? 0 : min;
-  this.max = isNaN(max) ? 100 : max;
-  this.precision = precision >= 0 ? precision : 0;
-  this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-  this.topic = topic;
-  this.node = node;
-  this.unit = unit === null ? '' : unit;
-  this.sensivity = sensivity > 0 ? sensivity : 5;
-  value = isNaN(value) ? this.min : value;
-
-  var input = new InputComponent(this);
-  var slider_left  = new SliderComponent(this, -1);
-  var slider_right = new SliderComponent(this,  1);
-
-  slider_left.className = 'ui-input-slider-left';
-  slider_right.className = 'ui-input-slider-right';
-
-  if (name) {
-   var info = document.createElement('span');
-   info.className = 'ui-input-slider-info';
-   info.textContent = name;
-   node.appendChild(info);
-  }
-
-  node.appendChild(slider_left);
-  node.appendChild(input);
-  node.appendChild(slider_right);
-
-  this.input = input;
-  sliders[topic] = this;
-  setValue(topic, value);
- };
-
- InputSlider.prototype.setInputValue = function setInputValue() {
-  this.input.value = this.value.toFixed(this.precision) + this.unit;
- };
-
- var setValue = function setValue(topic, value, send_notify) {
-  var slider = sliders[topic];
-  if (slider === undefined)
-   return;
-
-  value = parseFloat(value.toFixed(slider.precision));
-
-  if (value > slider.max) value = slider.max;
-  if (value < slider.min) value = slider.min;
-
-  slider.value = value;
-  slider.node.setAttribute('data-value', value);
-
-  slider.setInputValue();
-
-  if (send_notify === false)
-   return;
-
-  notify.call(slider);
- };
-
- var setMax = function setMax(topic, value) {
-  var slider = sliders[topic];
-  if (slider === undefined)
-   return;
-
-  slider.max = value;
-  setValue(topic, slider.value);
- };
-
- var setMin = function setMin(topic, value) {
-  var slider = sliders[topic];
-  if (slider === undefined)
-   return;
-
-  slider.min = value;
-  setValue(topic, slider.value);
- };
-
- var setUnit = function setUnit(topic, unit) {
-  var slider = sliders[topic];
-  if (slider === undefined)
-   return;
-
-  slider.unit = unit;
-  setValue(topic, slider.value);
- };
-
- var setStep = function setStep(topic, value) {
-  var slider = sliders[topic];
-  if (slider === undefined)
-   return;
-
-  slider.step = parseFloat(value);
-  setValue(topic, slider.value);
- };
-
- var setPrecision = function setPrecision(topic, value) {
-  var slider = sliders[topic];
-  if (slider === undefined)
-   return;
-
-  value = value | 0;
-  slider.precision = value;
-
-  var step = parseFloat(slider.step.toFixed(value));
-  if (step === 0)
-   slider.step = 1 / Math.pow(10, value);
-
-  setValue(topic, slider.value);
- };
-
- var setSensivity = function setSensivity(topic, value) {
-  var slider = sliders[topic];
-  if (slider === undefined)
-   return;
-
-  value = value | 0;
-
-  slider.sensivity = value > 0 ? value : 5;
- };
-
- var getNode =  function getNode(topic) {
-  return sliders[topic].node;
- };
-
- var getPrecision =  function getPrecision(topic) {
-  return sliders[topic].precision;
- };
-
- var getStep =  function getStep(topic) {
-  return sliders[topic].step;
- };
-
- var subscribe = function subscribe(topic, callback) {
-  if (subscribers[topic] === undefined)
-   subscribers[topic] = [];
-  subscribers[topic].push(callback);
- };
-
- var unsubscribe = function unsubscribe(topic, callback) {
-  subscribers[topic].indexOf(callback);
-  subscribers[topic].splice(index, 1);
- };
-
- var notify = function notify() {
-  if (subscribers[this.topic] === undefined)
-   return;
-  for (var i = 0; i < subscribers[this.topic].length; i++)
-   subscribers[this.topic][i](this.value);
- };
-
- var createSlider = function createSlider(topic, label) {
-  var slider = document.createElement('div');
-  slider.className = 'ui-input-slider';
-  slider.setAttribute('data-topic', topic);
-
-  if (label !== undefined)
-   slider.setAttribute('data-info', label);
-
-  new InputSlider(slider);
-  return slider;
- };
-
- var init = function init() {
-  var elem = document.querySelectorAll('.ui-input-slider');
-  var size = elem.length;
-  for (var i = 0; i < size; i++)
-   new InputSlider(elem[i]);
- };
-
- return {
-  init : init,
-  setMax : setMax,
-  setMin : setMin,
-  setUnit : setUnit,
-  setStep : setStep,
-  getNode : getNode,
-  getStep : getStep,
-  setValue : setValue,
-  subscribe : subscribe,
-  unsubscribe : unsubscribe,
-  setPrecision : setPrecision,
-  setSensivity : setSensivity,
-  getPrecision : getPrecision,
-  createSlider : createSlider,
- };
-
-})();
-
-
-/**
- * UI-DropDown Select
- */
-
-var DropDownManager = (function DropdownManager() {
-
- var subscribers = {};
- var dropdowns = [];
- var active = null;
-
- var visbility = ["hidden", "visible"];
-
-
- var DropDown = function DropDown(node) {
-  var topic = node.getAttribute('data-topic');
-  var label = node.getAttribute('data-label');
-  var selected = node.getAttribute('data-selected') | 0;
-
-  var select = document.createElement('div');
-  var list = document.createElement('div');
-  var uval = 0;
-  var option = null;
-  var option_value = null;
-
-  list.className = 'ui-dropdown-list';
-  select.className = 'ui-dropdown-select';
-
-  while (node.firstElementChild !== null) {
-   option = node.firstElementChild;
-   option_value = option.getAttribute('data-value');
-
-   if (option_value === null)
-    option.setAttribute('data-value', uval);
-
-   list.appendChild(node.firstElementChild);
-   uval++;
-  }
-
-  node.appendChild(select);
-  node.appendChild(list);
-
-  select.onclick = this.toggle.bind(this);
-  list.onclick = this.updateValue.bind(this);
-  document.addEventListener('click', clickOut);
 
-  this.state = 0;
-  this.time = 0;
-  this.dropmenu = list;
-  this.select = select;
-  this.toggle(false);
-  this.value = {};
-  this.topic = topic;
-
-  if (label)
-   select.textContent = label;
-  else
-   this.setNodeValue(list.children[selected]);
-
-  dropdowns[topic] = this;
-
- };
-
- DropDown.prototype.toggle = function toggle(state) {
-  if (typeof(state) === 'boolean')
-   this.state = state === false ? 0 : 1;
-  else
-   this.state = 1 ^ this.state;
-
-  if (active !== this) {
-   if (active)
-    active.toggle(false);
-   active = this;
-  }
-
-  if (this.state === 0)
-   this.dropmenu.setAttribute('data-hidden', 'true');
-  else
-   this.dropmenu.removeAttribute('data-hidden');
-
- };
-
- var clickOut = function clickOut(e) {
-  if (active.state === 0 ||
-   e.target === active.dropmenu ||
-   e.target === active.select)
-   return;
-
-  active.toggle(false);
- };
-
- DropDown.prototype.updateValue = function updateValue(e) {
-
-  if (Date.now() - this.time < 500)
-   return;
-
-  if (e.target.className !== "ui-dropdown-list") {
-   this.setNodeValue(e.target);
-   this.toggle(false);
-  }
-
-  this.time = Date.now();
- };
-
- DropDown.prototype.setNodeValue = function setNodeValue(node) {
-  this.value['name'] = node.textContent;
-  this.value['value'] = node.getAttribute('data-value');
-
-  this.select.textContent = node.textContent;
-  this.select.setAttribute('data-value', this.value['value']);
-
-  notify.call(this);
- };
-
- var createDropDown = function createDropDown(topic, options) {
-
-  var dropdown = document.createElement('div');
-  dropdown.setAttribute('data-topic', topic);
-  dropdown.className = 'ui-dropdown';
-
-  for (var i in options) {
-   var x = document.createElement('div');
-   x.setAttribute('data-value', i);
-   x.textContent = options[i];
-   dropdown.appendChild(x);
-  }
-
-  new DropDown(dropdown);
-
-  return dropdown;
- };
-
- var setValue = function setValue(topic, index) {
-  if (dropdowns[topic] === undefined ||
-   index >= dropdowns[topic].dropmenu.children.length)
-   return;
-
-  dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
- };
-
- var subscribe = function subscribe(topic, callback) {
-  if (subscribers[topic] === undefined)
-   subscribers[topic] = [];
-  subscribers[topic].push(callback);
- };
-
- var unsubscribe = function unsubscribe(topic, callback) {
-  var index = subscribers[topic].indexOf(callback);
-  subscribers[topic].splice(index, 1);
- };
-
- var notify = function notify() {
-  if (subscribers[this.topic] === undefined)
-   return;
-
-  for (var i in subscribers[this.topic]) {
-   subscribers[this.topic][i](this.value);
-  }
- };
-
- var init = function init() {
-  var elem, size;
-
-  elem = document.querySelectorAll('.ui-dropdown');
-  size = elem.length;
-  for (var i = 0; i < size; i++)
-   new DropDown(elem[i]);
-
- };
-
- return {
-  init : init,
-  setValue : setValue,
-  subscribe : subscribe,
-  unsubscribe : unsubscribe,
-  createDropDown : createDropDown
- };
-
-})();
-
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
- var subscribers = [];
- var buttons = [];
-
- var CheckBox = function CheckBox(node) {
-  var topic = node.getAttribute('data-topic');
-  var state = node.getAttribute('data-state');
-  var name = node.getAttribute('data-label');
-  var align = node.getAttribute('data-text-on');
-
-  state = (state === "true");
-
-  var checkbox = document.createElement("input");
-  var label = document.createElement("label");
-
-  var id = 'checkbox-' + topic;
-  checkbox.id = id;
-  checkbox.setAttribute('type', 'checkbox');
-  checkbox.checked = state;
-
-  label.setAttribute('for', id);
-  if (name) {
-   label.className = 'text';
-   if (align)
-    label.className += ' ' + align;
-   label.textContent = name;
-  }
-
-  node.appendChild(checkbox);
-  node.appendChild(label);
-
-  this.node = node;
-  this.topic = topic;
-  this.checkbox = checkbox;
-
-  checkbox.addEventListener('change', function(e) {
-   notify.call(this);
-  }.bind(this));
-
-  buttons[topic] = this;
- };
-
- var getNode =  function getNode(topic) {
-  return buttons[topic].node;
- };
-
- var setValue = function setValue(topic, value) {
-  var obj = buttons[topic];
-  if (obj === undefined)
-   return;
-
-  obj.checkbox.checked = value;
-  notify.call(obj);
- };
-
- var subscribe = function subscribe(topic, callback) {
-  if (subscribers[topic] === undefined)
-   subscribers[topic] = [];
-
-  subscribers[topic].push(callback);
- };
-
- var unsubscribe = function unsubscribe(topic, callback) {
-  subscribers[topic].indexOf(callback);
-  subscribers[topic].splice(index, 1);
- };
-
- var notify = function notify() {
-  if (subscribers[this.topic] === undefined)
-   return;
-  for (var i = 0; i < subscribers[this.topic].length; i++)
-   subscribers[this.topic][i](this.checkbox.checked);
- };
-
- var init = function init() {
-  var elem = document.querySelectorAll('.ui-checkbox');
-  var size = elem.length;
-  for (var i = 0; i < size; i++)
-   new CheckBox(elem[i]);
- };
-
- return {
-  init : init,
-  setValue : setValue,
-  subscribe : subscribe,
-  unsubscribe : unsubscribe
- };
-
-})();
-
-window.addEventListener("load", function() {
- BorderImage.init();
-});
-
-var BorderImage = (function BorderImage() {
-
- var getElemById = document.getElementById.bind(document);
-
- var subject;
- var preview;
- var guidelines = [];
- var positions = ['top', 'right', 'bottom', 'left'];
-
- var makeDraggable = function makeDraggable(elem) {
-
-  var offsetTop;
-  var offsetLeft;
-
-  elem.setAttribute('data-draggable', 'true');
-
-  var dragStart = function dragStart(e) {
-   if (e.target.getAttribute('data-draggable') !== 'true' ||
-    e.target !== elem || e.button !== 0)
-    return;
-
-   offsetLeft = e.clientX - elem.offsetLeft;
-   offsetTop = e.clientY - elem.offsetTop;
-
-   document.addEventListener('mousemove', mouseDrag);
-   document.addEventListener('mouseup', dragEnd);
-  };
-
-  var dragEnd = function dragEnd(e) {
-   if (e.button !== 0)
-    return;
-
-   document.removeEventListener('mousemove', mouseDrag);
-   document.removeEventListener('mouseup', dragEnd);
-  };
-
-  var mouseDrag = function mouseDrag(e) {
-
-   elem.style.left = e.clientX - offsetLeft + 'px';
-   elem.style.top = e.clientY - offsetTop + 'px';
-  };
-
-  elem.addEventListener('mousedown', dragStart, false);
- };
-
- var PreviewControl = function PreviewControl() {
-
-  var dragging = false;
-  var valueX = null;
-  var valueY = null;
-
-  var dragStart = function dragStart(e) {
-   if (e.button !== 0)
-    return;
-
-   valueX = e.clientX - preview.clientWidth;
-   valueY = e.clientY - preview.clientHeight;
-   dragging = true;
-
-   document.addEventListener('mousemove', mouseDrag);
-  };
-
-  var dragEnd = function dragEnd(e) {
-   if (e.button !== 0 || dragging === false)
-    return;
-
-   document.removeEventListener('mousemove', mouseDrag);
-   dragging = false;
-  };
-
-  var mouseDrag = function mouseDrag(e) {
-   InputSliderManager.setValue('preview-width', e.clientX - valueX);
-   InputSliderManager.setValue('preview-height', e.clientY - valueY);
-  };
-
-  var init = function init() {
-
-   makeDraggable(preview);
-   makeDraggable(subject);
-
-   var handle = document.createElement('div');
-   handle.className = 'resize-handle';
-
-   handle.addEventListener('mousedown', dragStart);
-   document.addEventListener('mouseup', dragEnd);
-
-   preview.appendChild(handle);
-
-  };
-
-  return {
-   init: init
-  };
-
- }();
-
- var ImageReader = (function ImageReader() {
-
-  var fReader = new FileReader();
-  var browse = document.createElement('input');
-
-  var loadImage = function loadImage(e) {
-   if (browse.files.length === 0)
-    return;
-
-   var file = browse.files[0];
-
-   if (file.type.slice(0, 5) !== 'image')
-    return;
-
-   fReader.readAsDataURL(file);
-
-   return false;
-  };
-
-  fReader.onload = function(e) {
-   ImageControl.loadRemoteImage(e.target.result);
-  };
-
-  var load = function load() {
-   browse.click();
-  };
-
-  browse.setAttribute('type', 'file');
-  browse.style.display = 'none';
-  browse.onchange = loadImage;
-
-  return {
-   load: load
-  };
-
- })();
-
- var ImageControl = (function ImageControl() {
-
-  var scale = 0.5;
-  var imgSource = new Image();
-  var imgState = null;
-  var selected = null;
-
-
-  var topics = ['slice', 'width', 'outset'];
-  var properties = {};
-  properties['border1'] = {
-   fill   : false,
-
-   slice_values : [27, 27, 27, 27],
-   width_values : [20, 20, 20, 20],
-   outset_values : [0, 0, 0, 0],
-
-   slice_units  : [0, 0, 0, 0],
-   width_units  : [0, 0, 0, 0],
-   outset_units : [0, 0, 0, 0],
-
-   repeat   : [1, 1],
-   size   : [300, 200],
-   preview_area : 400
-  };
-
-  properties['border2'] = {
-   fill   : false,
-
-   slice_values : [33, 33, 33, 33],
-   width_values : [1.5, 1.5, 1.5, 1.5],
-   outset_values : [0, 0, 0, 0],
-
-   slice_units  : [1, 1, 1, 1],
-   width_units  : [2, 2, 2, 2],
-   outset_units : [0, 0, 0, 0],
-
-   repeat   : [2, 2],
-   size   : [300, 200],
-   preview_area : 400
-  };
-
-  properties['border3'] = {
-   fill   : true,
-
-   slice_values : [15, 15, 15, 15],
-   width_values : [10, 10, 10, 10],
-   outset_values : [0, 0, 0, 0],
-
-   slice_units  : [0, 0, 0, 0],
-   width_units  : [0, 0, 0, 0],
-   outset_units : [0, 0, 0, 0],
-
-   repeat   : [2, 2],
-   size   : [300, 200],
-   preview_area : 400
-  };
-
-  properties['border4'] = {
-   fill   : false,
-
-   slice_values : [13, 13, 13, 13],
-   width_values : [13, 13, 13, 13],
-   outset_values : [13, 13, 13, 13],
-
-   slice_units  : [0, 0, 0, 0],
-   width_units  : [0, 0, 0, 0],
-   outset_units : [0, 0, 0, 0],
-
-   repeat   : [0, 0],
-   size   : [300, 200],
-   preview_area : 400
-  };
-
-  properties['border5'] = {
-   fill   : false,
-
-   slice_values : [0, 12, 0, 12],
-   width_values : [0, 12, 0, 12],
-   outset_values : [0, 0, 0, 0],
-
-   slice_units  : [0, 0, 0, 0],
-   width_units  : [0, 0, 0, 0],
-   outset_units : [0, 0, 0, 0],
-
-   repeat   : [0, 0],
-   size   : [300, 200],
-   preview_area : 400,
-  };
-
-  properties['border6'] = {
-   fill   : false,
-
-   slice_values : [42, 42, 42, 42],
-   width_values : [42, 42, 42, 42],
-   outset_values : [0, 0, 0, 0],
-
-   slice_units  : [0, 0, 0, 0],
-   width_units  : [0, 0, 0, 0],
-   outset_units : [0, 0, 0, 0],
-
-   repeat   : [2, 2],
-   size   : [350, 350],
-   preview_area : 500,
-  };
-
-
-  var loadLocalImage = function loadLocalImage(source) {
-   var location = "images/" + source;
-   imgSource.src = location;
-  };
-
-  var loadRemoteImage = function loadRemoteImage(source) {
-   imgSource.src = source;
-   if (selected)
-    selected.removeAttribute('selected');
-   Tool.setOutputCSS('source', 'url("' + source + '")');
-  };
-
-  var pickImage = function pickImage(e) {
-   if (e.target.className === 'image') {
-    selected = e.target;
-    selected.setAttribute('selected', 'true');
-    loadRemoteImage(e.target.src);
-    imgState = e.target.getAttribute('data-stateID');
-   }
-  };
-
-  var loadImageState = function loadImageState(stateID) {
-   if (properties[stateID] === undefined)
-    return;
-
-   var prop = properties[stateID];
-   var topic;
-   var unit_array;
-   var value_array;
-
-   for (var i in topics) {
-    for (var j=0; j<4; j++) {
-     topic = topics[i] + '-' + positions[j];
-     unit_array = topics[i] + '_units';
-     value_array = topics[i] + '_values';
-     InputSliderManager.setValue(topic, prop[value_array][j]);
-     DropDownManager.setValue(topic, prop[unit_array][j]);
-    }
-   }
-
-   ButtonManager.setValue('slice-fill', prop['fill']);
-   DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-   DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-   InputSliderManager.setValue('preview-width', prop['size'][0]);
-   InputSliderManager.setValue('preview-height', prop['size'][1]);
-   InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-  };
-
-  var update = function update() {
-   scale =  Math.min(300, (30000 / this.width) | 0);
-   setScale(scale);
-   InputSliderManager.setValue('scale', scale, false);
-
-   subject.style.backgroundImage = 'url("' + this.src + '")';
-   preview.style.borderImageSource = 'url("' + this.src + '")';
-
-   guidelines['slice-top'].setMax(this.height);
-   guidelines['slice-right'].setMax(this.width);
-   guidelines['slice-bottom'].setMax(this.height);
-   guidelines['slice-left'].setMax(this.width);
-
-   if (imgState)
-    loadImageState(imgState);
-  };
-
-  var setScale = function setScale(value) {
-   scale = value;
-   var w = imgSource.width * scale / 100 | 0;
-   var h = imgSource.height * scale / 100 | 0;
-   subject.style.width = w + 'px';
-   subject.style.height = h + 'px';
-
-   for (var i = 0; i < positions.length; i++)
-    guidelines['slice-' + positions[i]].updateGuidelinePos();
-  };
-
-  var getScale = function getScale() {
-   return scale/100;
-  };
-
-  var toggleGallery = function toggleGallery() {
-   var gallery = getElemById('image-gallery');
-   var button  = getElemById('toggle-gallery');
-   var state = 1;
-   button.addEventListener('click', function() {
-    state = 1 ^ state;
-    if (state === 0) {
-     gallery.setAttribute('data-collapsed', 'true');
-     button.setAttribute('data-action', 'show');
-    }
-    else {
-     gallery.removeAttribute('data-collapsed');
-     button.setAttribute('data-action', 'hide');
-    }
-   });
-  };
-
-  var init = function init() {
-   var gallery = getElemById('image-gallery');
-   var browse = getElemById('load-image');
-   var remote = getElemById('remote-url');
-   var load_remote = getElemById('load-remote');
-
-   remote.addEventListener('change', function(){
-    loadRemoteImage(this.value);
-   });
-
-   load_remote.addEventListener('click', function(){
-    loadRemoteImage(remote.value);
-   });
-
-   browse.addEventListener('click', ImageReader.load);
-   gallery.addEventListener('click', pickImage);
-   imgSource.addEventListener('load', update);
-
-   InputSliderManager.subscribe('scale', setScale);
-   InputSliderManager.setValue('scale', scale);
-   imgState = 'border1';
-   loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-   toggleGallery();
-  };
-
-  return {
-   init: init,
-   getScale : getScale,
-   loadRemoteImage: loadRemoteImage
-  };
-
- })();
-
- var GuideLine = function GuideLine(node) {
-  var topic = node.getAttribute('data-topic');
-  var axis = node.getAttribute('data-axis');
-
-  this.node = node;
-  this.topic = topic;
-  this.axis = axis;
-  this.info = topic.split('-')[1];
-
-  this.position = 0;
-  this.value = 0;
-  this.unit = 0;
-  this.max = 0;
-  this.pos = positions.indexOf(this.info);
-
-  guidelines[topic] = this;
-
-  var relative_container = document.createElement('div');
-  var tooltip = document.createElement('div');
-  var tooltip2 = document.createElement('div');
-
-  tooltip.className = 'tooltip';
-  tooltip.setAttribute('data-info', this.info);
-
-  tooltip2.className = 'tooltip2';
-  tooltip2.textContent = this.info;
-  tooltip2.setAttribute('data-info', this.info);
-
-  this.tooltip = tooltip;
-
-  relative_container.appendChild(tooltip);
-  relative_container.appendChild(tooltip2);
-  node.appendChild(relative_container);
-
-  var startX = 0;
-  var startY = 0;
-  var start = 0;
-
-  var startDrag = function startDrag(e) {
-   startX = e.clientX;
-   startY = e.clientY;
-   start = guidelines[topic].position;
-   document.body.setAttribute('data-move', axis);
-   relative_container.setAttribute('data-active', '');
-   node.setAttribute('data-active', '');
-
-   document.addEventListener('mousemove', updateGuideline);
-   document.addEventListener('mouseup', endDrag);
-  };
-
-  var endDrag = function endDrag() {
-   document.body.removeAttribute('data-move');
-   relative_container.removeAttribute('data-active');
-   node.removeAttribute('data-active');
-
-   document.removeEventListener('mousemove', updateGuideline);
-  };
-
-  var updateGuideline = function updateGuideline(e) {
-   var value;
-   if (topic === 'slice-top')
-    value = e.clientY - startY + start;
-
-   if (topic === 'slice-right')
-    value = startX - e.clientX + start;
-
-   if (topic === 'slice-bottom')
-    value = startY - e.clientY + start;
-
-   if (topic === 'slice-left')
-    value = e.clientX - startX + start;
-
-   if (this.unit === 0)
-    InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-   else {
-    InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-   }
-
-  }.bind(this);
-
-  node.addEventListener("mousedown", startDrag);
-
-  InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-  InputSliderManager.setValue(topic, this.position);
- };
-
-
- GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-  if (this.unit === 0)
-   this.position = this.value * ImageControl.getScale() | 0;
-  else
-   this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-  this.node.style[this.info] = this.position + 'px';
- };
-
- GuideLine.prototype.setPosition = function setPosition(value) {
-  this.value = value;
-  this.tooltip.textContent = value;
-  this.updateGuidelinePos();
-  Tool.setBorderSlice(this.pos, value);
- };
-
- GuideLine.prototype.setMax = function setMax(max) {
-  this.max = max;
-  this.updateLimit();
- };
-
- GuideLine.prototype.updateLimit = function updateLimit() {
-  if (this.unit === 1)
-   InputSliderManager.setMax(this.topic, 100);
-  else
-   InputSliderManager.setMax(this.topic, this.max);
- };
-
- GuideLine.prototype.setUnit = function setUnit(type) {
-  if (type === '%') this.unit = 1;
-  if (type === '') this.unit = 0;
-  this.updateLimit();
- };
-
- /*
-  * Unit panel
-  */
- var UnitPanel = (function UnitPanel () {
-
-  var panel;
-  var title;
-  var precision;
-  var step;
-  var unit_topic = null; // settings are made for this topic
-  var step_option = [1, 0.1, 0.01];
-
-  var updatePrecision = function updatePrecision(value) {
-   InputSliderManager.setPrecision('unit-step', value);
-   InputSliderManager.setStep('unit-step', step_option[value]);
-   InputSliderManager.setMin('unit-step', step_option[value]);
-
-   if (unit_topic)
-    InputSliderManager.setPrecision(unit_topic, value);
-  };
-
-  var updateUnitSettings = function updateUnitSettings(value) {
-   if (unit_topic)
-    InputSliderManager.setStep(unit_topic, value);
-  };
-
-  var show = function show(e) {
-   var topic = e.target.getAttribute('data-topic');
-   var precision = InputSliderManager.getPrecision(topic);
-   var step = InputSliderManager.getStep(topic);
-
-   unit_topic = topic;
-   title.textContent = topic;
-
-   panel.setAttribute('data-active', 'true');
-   panel.style.top = e.target.offsetTop - 40 + 'px';
-   panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-   InputSliderManager.setValue('unit-precision', precision);
-   InputSliderManager.setValue('unit-step', step);
-  };
-
-  var init = function init() {
-   panel = document.createElement('div');
-   title = document.createElement('div');
-   var close = document.createElement('div');
-
-   step = InputSliderManager.createSlider('unit-step', 'step');
-   precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-   InputSliderManager.setStep('unit-precision', 1);
-   InputSliderManager.setMax('unit-precision', 2);
-   InputSliderManager.setValue('unit-precision', 2);
-   InputSliderManager.setSensivity('unit-precision', 20);
-
-   InputSliderManager.setValue('unit-step', 1);
-   InputSliderManager.setStep('unit-step', 0.01);
-   InputSliderManager.setPrecision('unit-step', 2);
-
-   InputSliderManager.subscribe('unit-precision', updatePrecision);
-   InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-   close.addEventListener('click', function () {
-    panel.setAttribute('data-active', 'false');
-   });
-
-   title.textContent = 'Properties';
-   title.className = 'title';
-   close.className = 'close';
-   panel.id = 'unit-settings';
-   panel.setAttribute('data-active', 'false');
-   panel.appendChild(title);
-   panel.appendChild(precision);
-   panel.appendChild(step);
-   panel.appendChild(close);
-   document.body.appendChild(panel);
-  };
-
-  return {
-   init : init,
-   show : show
-  };
-
- })();
-
- /**
-  * Tool Manager
-  */
- var Tool = (function Tool() {
-  var preview_area;
-  var dropdown_unit_options = [
-   { '' : '--', '%' : '%'},
-   { 'px' : 'px', '%' : '%', 'em' : 'em'},
-   { 'px' : 'px', 'em' : 'em'},
-  ];
-
-  var border_slice = [];
-  var border_width = [];
-  var border_outset = [];
-
-  var border_slice_values = [];
-  var border_width_values = [];
-  var border_outset_values = [];
-
-  var border_slice_units = ['', '', '', ''];
-  var border_width_units = ['px', 'px', 'px', 'px'];
-  var border_outset_units = ['px', 'px', 'px', 'px'];
-
-  var border_fill = false;
-  var border_repeat = ['round', 'round'];
-  var CSS_code = {
-   'source' : null,
-   'slice' : null,
-   'width' : null,
-   'outset' : null,
-   'repeat' : null
-  };
-
-  var setBorderSlice = function setBorderSlice(positionID, value) {
-   border_slice[positionID] = value + border_slice_units[positionID];
-   updateBorderSlice();
-  };
-
-  var updateBorderSlice = function updateBorderSlice() {
-   var value = border_slice.join(' ');
-   if (border_fill === true)
-    value += ' fill';
-
-   preview.style.borderImageSlice = value;
-   setOutputCSS('slice', value);
-  };
-
-  var setBorderFill = function setBorderFill(value) {
-   border_fill = value;
-   var bimgslice = border_slice.join(' ');;
-   if (value === true)
-    bimgslice += ' fill';
-
-   preview.style.borderImageSlice = bimgslice;
-  };
-
-  var updateBorderWidth = function updateBorderWidth() {
-   var value = border_width.join(' ');
-   preview.style.borderImageWidth = value;
-   setOutputCSS('width', value);
-  };
-
-  var updateBorderOutset = function updateBorderOutset() {
-   var value = border_outset.join(' ');
-   preview.style.borderImageOutset = border_outset.join(' ');
-   setOutputCSS('outset', value);
-  };
-
-  var setBorderRepeat = function setBorderRepeat(obj) {
-   border_repeat[obj.value] = obj.name;
-   var value = border_repeat.join(' ');
-   preview.style.borderImageRepeat = value;
-   setOutputCSS('repeat', value);
-  };
-
-  var setOutputCSS = function setOutputCSS(topic, value) {
-   CSS_code[topic].textContent = value + ';';
-  };
-
-  var setPreviewFontSize = function setPreviewFontSize(value) {
-   preview.style.fontSize = value + 'px';
-  };
-
-  var setPreviewWidth = function setPreviewWidth(value) {
-   preview.style.width = value + 'px';
-  };
-
-  var setPreviewHeight = function setPreviewHeight(value) {
-   preview.style.height = value + 'px';
-  };
-
-  var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-   preview_area.style.height = value + 'px';
-  };
-
-  var updateDragOption = function updateDragOption(value) {
-   if (value === true)
-    subject.setAttribute('data-draggable', 'true');
-   else
-    subject.removeAttribute('data-draggable');
-  };
-
-  var createProperty = function createProperty(topic, labelID, optionsID) {
-
-   var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-   var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-   InputSliderManager.setSensivity(topic, 3);
-   InputSliderManager.setPrecision(topic, 1);
-
-   var property = document.createElement('div');
-   var config = document.createElement('div');
-
-   property.className = 'property';
-   config.className = 'config';
-   config.setAttribute('data-topic', topic);
-   config.addEventListener('click', UnitPanel.show);
-
-   property.appendChild(slider);
-   property.appendChild(dropdown);
-   property.appendChild(config);
-
-   return property;
-  };
-
-  var initBorderSliceControls = function initBorderSliceControls() {
-   var container = getElemById('border-slice-control');
-
-   var listenForChanges = function listenForChanges(topic, id) {
-    InputSliderManager.subscribe(topic, function(value) {
-     border_slice_values[id] = value;
-     border_slice[id] = value + border_slice_units[id];
-     updateBorderSlice();
-    });
-
-    DropDownManager.subscribe(topic, function(obj) {
-     guidelines[topic].setUnit(obj.value);
-     border_slice_units[id] = obj.value;
-     border_slice[id] = border_slice_values[id] + obj.value;
-     updateBorderSlice();
-    });
-   };
-
-   for (var i = 0; i < positions.length; i++) {
-    var topic = 'slice-' + positions[i];
-    var property = createProperty(topic, i, 0);
-    listenForChanges(topic, i);
-
-    container.appendChild(property);
-   }
-
-   container.appendChild(container.children[1]);
-
-  };
-
-  var initBorderWidthControls = function initBorderWidthControls() {
-   var container = getElemById('border-width-control');
-
-   var listenForChanges = function listenForChanges(topic, id) {
-    InputSliderManager.subscribe(topic, function(value) {
-     border_width_values[id] = value;
-     border_width[id] = value + border_width_units[id];
-     updateBorderWidth();
-    });
-
-    DropDownManager.subscribe(topic, function(obj) {
-     if (obj.value === '%')
-      InputSliderManager.setMax(topic, 100);
-     else
-      InputSliderManager.setMax(topic, 1000);
-
-     border_width_units[id] = obj.value;
-     border_width[id] = border_width_values[id] + obj.value;
-     updateBorderWidth();
-    });
-   };
-
-   for (var i = 0; i < positions.length; i++) {
-    var topic = 'width-' + positions[i];
-    var property = createProperty(topic, i, 1);
-    InputSliderManager.setMax(topic, 1000);
-    listenForChanges(topic, i);
-
-    container.appendChild(property);
-   }
-  };
-
-  var initBorderOutsetControls = function initBorderOutsetControls() {
-
-   var container = getElemById('border-outset-control');
-
-   var listenForChanges = function listenForChanges(topic, id) {
-    InputSliderManager.subscribe(topic, function(value) {
-     border_outset_values[id] = value;
-     border_outset[id] = value + border_outset_units[id];
-     updateBorderOutset();
-    });
-
-    DropDownManager.subscribe(topic, function(obj) {
-     border_outset_units[id] = obj.value;
-     border_outset[id] = border_outset_values[id] + obj.value;
-     updateBorderOutset();
-    });
-   };
-
-   for (var i = 0; i < positions.length; i++) {
-    var topic = 'outset-' + positions[i];
-    var property = createProperty(topic, i, 2);
-    InputSliderManager.setMax(topic, 1000);
-    listenForChanges(topic, i);
-
-    container.appendChild(property);
-   }
-  };
-
-  var init = function init() {
-
-   var gallery =
-   subject = getElemById('subject');
-   preview = getElemById("preview");
-   preview_area = getElemById("preview_section");
-
-
-   CSS_code['source'] = getElemById("out-border-source");
-   CSS_code['slice'] = getElemById("out-border-slice");
-   CSS_code['width'] = getElemById("out-border-width");
-   CSS_code['outset'] = getElemById("out-border-outset");
-   CSS_code['repeat'] = getElemById("out-border-repeat");
-
-   initBorderSliceControls();
-   initBorderWidthControls();
-   initBorderOutsetControls();
-
-   var elem = document.querySelectorAll('.guideline');
-   var size = elem.length;
-   for (var i = 0; i < size; i++)
-    new GuideLine(elem[i]);
-
-   PreviewControl.init();
-
-   ButtonManager.subscribe('slice-fill',setBorderFill);
-   ButtonManager.subscribe('drag-subject', updateDragOption);
-   ButtonManager.setValue('drag-subject', false);
-
-   DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-   DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-   InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-   InputSliderManager.subscribe('preview-width', setPreviewWidth);
-   InputSliderManager.subscribe('preview-height', setPreviewHeight);
-   InputSliderManager.subscribe('font-size', setPreviewFontSize);
-   InputSliderManager.setValue('preview-width', 300);
-   InputSliderManager.setValue('preview-height', 200);
-  };
-
-  return {
-   init: init,
-   setOutputCSS: setOutputCSS,
-   setBorderSlice: setBorderSlice
-  };
-
- })();
-
- /**
-  * Init Tool
-  */
- var init = function init() {
-  InputSliderManager.init();
-  DropDownManager.init();
-  ButtonManager.init();
-  UnitPanel.init();
-  Tool.init();
-  ImageControl.init();
- };
-
- return {
-  init : init
- };
-
-})();
-```
+Esta herramienta permite generar valores para CSS3 {{cssxref("border-image")}}
 
-{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}
+{{EmbedGHLiveSample("css-examples/tools/border-image-generator/", '100%', 1200)}}
diff --git a/files/es/web/css/css_colors/color_picker_tool/index.md b/files/es/web/css/css_colors/color_picker_tool/index.md
index 5da01c6ad8dd24..db5e20fe49b8a2 100644
--- a/files/es/web/css/css_colors/color_picker_tool/index.md
+++ b/files/es/web/css/css_colors/color_picker_tool/index.md
@@ -7,6 +7,15 @@ tags:
 translation_of: Web/CSS/CSS_Colors/Color_picker_tool
 original_slug: Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color
 ---
+
+{{CSSRef}}
+
+Esta herramienta facilita crear, ajustar, y experimentar con colores personalizados para uso web. Además permite facilmente convertir entre varios formatos de color soportados por CSS, incluyendo: HEXA, RGB y HSL. También soporta el control de alpha en los formatos RGB (rgba) y HSL (hsla).
+
+Cada color se presenta en los 3 formatos estándar de CSS mientras se ajusta; además, basada en el color actual, se genera una paleta para HSL y HSV, así como para alpha. El recuadro "eyedropper" se puede cambiar entre los formatos HSL y HSC.
+
+#### Herramienta
+
 ```html hidden
     

         

@@ -3200,10 +3209,4 @@ var ColorPickerTool = (function ColorPickerTool() {
 })();
 ```
 
-{{CSSRef}}
-
-Esta herramienta facilita crear, ajustar, y experimentar con colores personalizados para uso web. Además permite facilmente convertir entre varios formatos de color soportados por CSS, incluyendo: HEXA, RGB y HSL. También soporta el control de alpha en los formatos RGB (rgba) y HSL (hsla).
-
-Cada color se presenta en los 3 formatos estándar de CSS mientras se ajusta; además, basada en el color actual, se genera una paleta para HSL y HSV, así como para alpha. El recuadro "eyedropper" se puede cambiar entre los formatos HSL y HSC.
-
 {{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}
diff --git a/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md b/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md
index 0dcc01c9d73188..7a1abfdb361ed2 100644
--- a/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md
+++ b/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md
@@ -69,7 +69,7 @@ Eliminar `display: flex` para ver el comportamiento de reserva. Verá un espacio
 
 {{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}
 
-### display: table-\_\_
+### display: table-
 
 Las propiedades de visualización de la tabla CSS son potencialmente muy útiles como respaldo, debido al hecho de que permiten patrones de diseño como columnas de altura completa y centrado vertical y funcionan hasta Internet Explorer 8.
 
@@ -77,7 +77,7 @@ Si usa `display: table-cell` en un elemento en su HTML, toma el estilo de una ce
 
 Si luego declara `display: flex` en el elemento principal, estos cuadros anónimos no se crean y, por lo tanto, su elemento sigue siendo un elemento secundario directo y puede convertirse en un elemento flexible, perdiendo cualquiera de las funciones de visualización de la tabla.
 
-> “Nota: algunos valores de visualización normalmente desencadenan la creación de cuadros anónimos alrededor del cuadro original. Si dicha caja es un elemento flexible, primero se bloquea y, por lo tanto, no se creará una caja anónima. Por ejemplo, dos elementos flexibles contiguos con pantalla: table-cell se convertirán en dos pantallas separadas: elementos flexibles de bloque, en lugar de estar envueltos en una sola tabla anónima. "- [4. Elementos Flexibles](https://www.w3.org/TR/css-flexbox-1/#flex-items)
+> **Nota:** algunos valores de visualización normalmente desencadenan la creación de cuadros anónimos alrededor del cuadro original. Si dicha caja es un elemento flexible, primero se bloquea y, por lo tanto, no se creará una caja anónima. Por ejemplo, dos elementos flexibles contiguos con pantalla: table-cell se convertirán en dos pantallas separadas: elementos flexibles de bloque, en lugar de estar envueltos en una sola tabla anónima. "- [4. Elementos Flexibles](https://www.w3.org/TR/css-flexbox-1/#flex-items)
 
 {{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}
 
diff --git a/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md
index c6d8f1ade78134..627551fc80a924 100644
--- a/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md
+++ b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md
@@ -5,6 +5,8 @@ translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout
 ---
 Además de la capacidad de colocar elementos con precisión en una cuadrícula creada, la especificación de diseño de cuadrícula CSS contiene reglas que controlan lo que sucede cuando crea una cuadrícula y no coloca algunos o todos los elementos secundarios. Puede ver la colocación automática en acción de la manera más simple creando una cuadrícula en un conjunto de elementos. Si no proporciona información de ubicación a los elementos, se colocarán en la cuadrícula, uno en cada celda de la cuadrícula.
 
+#### Ejemplo
+
 ```css hidden
 * {box-sizing: border-box;}
 
@@ -92,6 +94,9 @@ Sin embargo, puede controlar el tamaño de estas filas con la propiedad `grid-au
 
 {{ EmbedLiveSample('placement_2', '500', '330') }}
 
+#### Usando `minmax()`
+
+
 Puede usar [`minmax()`](/es/docs/Web/CSS/minmax) en su valor para [`grid-auto-rows`](/es/docs/Web/CSS/grid-auto-rows) permite la creación de filas de un tamaño mínimo pero luego crecer para ajustarse al contenido si es más alto.
 
 ```css hidden
@@ -139,6 +144,8 @@ Puede usar [`minmax()`](/es/docs/Web/CSS/minmax) en su valor para [`grid-auto-ro
 
 {{ EmbedLiveSample('placement_3', '500', '330') }}
 
+#### Usando una lista de pistas
+
 También puede pasar una lista de pistas, esto se repetirá. La siguiente lista de pistas creará una pista de fila implícita inicial como 100 píxeles y una segunda como `200px` píxeles. Esto continuará mientras se agregue contenido a la cuadrícula implícita. **Las listas de seguimiento no son compatibles con Firefox.**
 
 ```css hidden
@@ -489,6 +496,8 @@ La colocación automática es útil siempre que tenga una colección de artícul
 
 {{ EmbedLiveSample('placement_9', '500', '1300') }}
 
+#### Ejemplo con listas de definición
+
 La colocación automática también puede ayudarlo a diseñar elementos de interfaz que tengan un orden lógico. Un ejemplo es la lista de definiciones en el siguiente ejemplo. Las listas de definición son un desafío interesante para el estilo, ya que son planas, no hay nada que envuelva los grupos de elementos `dt` y `dd` . En mi ejemplo, estoy permitiendo la colocación automática para colocar los elementos, sin embargo, tengo clases que comienzan un `dt` en la columna 1, y `dd` en la columna 2, esto garantiza que los términos vayan de un lado y las definiciones del otro, sin importar cuántos de cada uno que tenemos.
 
 ```css hidden
@@ -542,52 +551,60 @@ Hay un par de cosas que a menudo surgen como preguntas. Actualmente no podemos h
 
 Puede ser que se te ocurran tus propios casos de uso para la colocación automática o cualquier otra parte del diseño de la cuadrícula. Si lo hace, créelos como problemas o agréguelos a un problema existente que podría resolver su caso de uso. Esto ayudará a mejorar las futuras versiones de la especificación.
 
-1. [**CSS**](/es/docs/Web/CSS)
-2. [**CSS Reference**](/es/docs/Web/CSS/Reference)
-3. [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
-4. **Guides**
-
-    1. [Basics concepts of grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
-    2. [Relationship to other layout methods](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
-    3. [Line-based placement](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-    4. [Grid template areas](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
-    5. [Layout using named grid lines](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
-    6. [Auto-placement in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
-    7. [Box alignment in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
-    8. [Grids, logical values and writing modes](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
-    9. [CSS Grid Layout and Accessibility](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
-    10. [CSS Grid Layout and Progressive Enhancement](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
-    11. [Realizing common layouts using grids](/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
-
-5. **Properties**
-
-    1. [grid](/es/docs/Web/CSS/grid)
-    2. [grid-area](/es/docs/Web/CSS/grid-area)
-    3. [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
-    4. [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
-    5. [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
-    6. [grid-column](/es/docs/Web/CSS/grid-column)
-    7. [grid-column-end](/es/docs/Web/CSS/grid-column-end)
-    8. [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
-    9. [grid-column-start](/es/docs/Web/CSS/grid-column-start)
-    10. [grid-gap](/es/docs/Web/CSS/grid-gap)
-    11. [grid-row](/es/docs/Web/CSS/grid-row)
-    12. [grid-row-end](/es/docs/Web/CSS/grid-row-end)
-    13. [grid-row-gap](/es/docs/Web/CSS/grid-row-gap)
-    14. [grid-row-start](/es/docs/Web/CSS/grid-row-start)
-    15. [grid-template](/es/docs/Web/CSS/grid-template)
-    16. [grid-template-areas](/es/docs/Web/CSS/grid-template-areas)
-    17. [grid-template-columns](/es/docs/Web/CSS/grid-template-columns)
-    18. [grid-template-rows](/es/docs/Web/CSS/grid-template-rows)
-
-6. **Glossary**
-
-    1. [Grid](/es/docs/Glossary/Grid)
-    2. [Grid lines](/es/docs/Glossary/Grid_lines)
-    3. [Grid tracks](/es/docs/Glossary/Grid_tracks)
-    4. [Grid cell](/es/docs/Glossary/Grid_cell)
-    5. [Grid areas](/es/docs/Glossary/Grid_areas)
-    6. [Gutters](/es/docs/Glossary/Gutters)
-    7. [Grid Axis](/es/docs/Glossary/Grid_Axis)
-    8. [Grid row](/es/docs/Glossary/Grid_rows)
-    9. [Grid column](/es/docs/Glossary/Grid_column)
+
diff --git a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
index 946ea6f24ec0ec..2ba0e68b1b15f2 100644
--- a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
+++ b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md
@@ -243,7 +243,15 @@ También puede definir un tamaño para el conjunto de vías creadas en la cuadr
 
 En el siguiente ejemplo usamos `grid-auto-rows` para asegurar que las vías creadas en la cuadrícula implícita tengan 200 píxeles de alto.
 
-\
 \
One\
 \
Two\
 \
Three\
 \
Four\
 \
Five\
 \

+```html
+

+ 
One

+ 
Two

+ 
Three

+ 
Four

+ 
Five

+

+```
 
 ```css
 .wrapper {
@@ -657,52 +665,61 @@ Podemos controlar el orden en el que los artículos se apilan utilizando la prop
 
 En este artículo hemos tenido una mirada muy rápida a través de la Especificación de Grid Layout. Juegue un poco con los ejemplos de código, y luego pase a [la siguiente parte de esta guía donde realmente nos vamos a adentrar en detalle dentro de CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout).
 
-1. [**CSS**](/es/docs/Web/CSS)
-2. [**CSS Reference**](/es/docs/Web/CSS/Reference)
-3. [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
-4. **Guías**
-
-    1. [Conceptos básicos del posicionamiento con cuadrículas](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
-    2. [Relación con otros métodos de posicionamiento](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
-    3. [Posicionamiento basado en líneas](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-    4. [Áreas de una plantilla de cuadrícula](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
-    5. [Posicionamiento usando líneas de cuadrícula con nombres](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
-    6. [Posicionamiento automático en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
-    7. [Alineación de cajas en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
-    8. [cuadrículas, valores lógicos y modos de escritura](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
-    9. [CSS Grid Layout y Accesibilidad](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
-    10. [CSS Grid Layout y Mejora Progresiva](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
-    11. [Layouts comunes utilizando CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
-
-5. **Properties**
-
-    1. [grid](/es/docs/Web/CSS/grid)
-    2. [grid-area](/es/docs/Web/CSS/grid-area)
-    3. [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
-    4. [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
-    5. [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
-    6. [grid-column](/es/docs/Web/CSS/grid-column)
-    7. [grid-column-end](/es/docs/Web/CSS/grid-column-end)
-    8. [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
-    9. [grid-column-start](/es/docs/Web/CSS/grid-column-start)
-    10. [grid-gap](/es/docs/Web/CSS/grid-gap)
-    11. [grid-row](/es/docs/Web/CSS/grid-row)
-    12. [grid-row-end](/es/docs/Web/CSS/grid-row-end)
-    13. [grid-row-gap](/es/docs/Web/CSS/grid-row-gap)
-    14. [grid-row-start](/es/docs/Web/CSS/grid-row-start)
-    15. [grid-template](/es/docs/Web/CSS/grid-template)
-    16. [grid-template-areas](/es/docs/Web/CSS/grid-template-areas)
-    17. [grid-template-columns](/es/docs/Web/CSS/grid-template-columns)
-    18. [grid-template-rows](/es/docs/Web/CSS/grid-template-rows)
-
-6. **Glossary**
-
-    1. [cuadrícula](/es/docs/Glossary/Grid)
-    2. [Líneas de cuadrícula](/es/docs/Glossary/Grid_lines)
-    3. [Pistas de cuadrícula](/es/docs/Glossary/Grid_tracks)
-    4. [Celda de cuadrícula](/es/docs/Glossary/Grid_cell)
-    5. [Áreas de cuadrícula](/es/docs/Glossary/Grid_areas)
-    6. [Canaletas](/es/docs/Glossary/Gutters)
-    7. [Ejes de cuadrícula](/es/docs/Glossary/Grid_Axis)
-    8. [Fila de cuadrícula](/es/docs/Glossary/Grid_rows)
-    9. [Columna de cuadrícula](/es/docs/Glossary/Grid_column)
+
+

diff --git a/files/es/web/css/css_grid_layout/index.md b/files/es/web/css/css_grid_layout/index.md
index 5aab26ba965098..cc899e831c2980 100644
--- a/files/es/web/css/css_grid_layout/index.md
+++ b/files/es/web/css/css_grid_layout/index.md
@@ -27,7 +27,7 @@ El siguiente ejemplo muestra un grid de tres columnas con filas nuevas creadas c
 }
 ```
 
-### HTML
+HTML
 
 ```html
 

@@ -40,7 +40,7 @@ El siguiente ejemplo muestra un grid de tres columnas con filas nuevas creadas c
 

 ```
 
-### CSS
+CSS
 
 ```css
 .wrapper {
@@ -152,52 +152,62 @@ El siguiente ejemplo muestra un grid de tres columnas con filas nuevas creadas c
 | {{ SpecName("CSS Grid 2") }} | {{ Spec2("CSS Grid 2") }} | Added [subgrids](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid). |
 | {{ SpecName('CSS3 Grid') }} | {{ Spec2('CSS3 Grid') }} | Initial definition.                                                                       |
 
-1. [**CSS**](/es/docs/Web/CSS)
-2. [**CSS Reference**](/es/docs/Web/CSS/Reference)
-3. [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
-4. **Guías**
-
-    1. [Basics concepts of grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
-    2. [Relationship to other layout methods](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
-    3. [Line-based placement](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-    4. [Grid template areas](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
-    5. [Layout using named grid lines](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
-    6. [Auto-placement in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
-    7. [Box alignment in grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
-    8. [Grids, logical values and writing modes](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
-    9. [CSS Grid Layout and Accessibility](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
-    10. [CSS Grid Layout and Progressive Enhancement](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
-    11. [Realizing common layouts using grids](/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
-
-5. **Propiedades**
-
-    1. [grid](/es/docs/Web/CSS/grid)
-    2. [grid-area](/es/docs/Web/CSS/grid-area)
-    3. [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
-    4. [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
-    5. [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
-    6. [grid-column](/es/docs/Web/CSS/grid-column)
-    7. [grid-column-end](/es/docs/Web/CSS/grid-column-end)
-    8. [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
-    9. [grid-column-start](/es/docs/Web/CSS/grid-column-start)
-    10. [grid-gap](/es/docs/Web/CSS/grid-gap)
-    11. [grid-row](/es/docs/Web/CSS/grid-row)
-    12. [grid-row-end](/es/docs/Web/CSS/grid-row-end)
-    13. [grid-row-gap](/es/docs/Web/CSS/grid-row-gap)
-    14. [grid-row-start](/es/docs/Web/CSS/grid-row-start)
-    15. [grid-template](/es/docs/Web/CSS/grid-template)
-    16. [grid-template-areas](/es/docs/Web/CSS/grid-template-areas)
-    17. [grid-template-columns](/es/docs/Web/CSS/grid-template-columns)
-    18. [grid-template-rows](/es/docs/Web/CSS/grid-template-rows)
-
-6. **Glosario**
-
-    1. [Grid](/es/docs/Glossary/Grid)
-    2. [Grid lines](/es/docs/Glossary/Grid_lines)
-    3. [Grid tracks](/es/docs/Glossary/Grid_tracks)
-    4. [Grid cell](/es/docs/Glossary/Grid_cell)
-    5. [Grid areas](/es/docs/Glossary/Grid_areas)
-    6. [Gutters](/es/docs/Glossary/Gutters)
-    7. [Grid Axis](/es/docs/Glossary/Grid_Axis)
-    8. [Grid row](/es/docs/Glossary/Grid_rows)
-    9. [Grid column](/es/docs/Glossary/Grid_column)
+
diff --git a/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md
index 4dd32d95b26639..fec98c83d582e0 100644
--- a/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md
+++ b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md
@@ -443,6 +443,8 @@ Todo esto se ve bastante completo ahora, sin embargo, a veces tenemos unas carta
 
 ![The layout has gaps as there is not space to layout a two track item.](https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png)
 
+#### Usando `grid-auto-flow: dense`
+
 Puedo hacer que una rejilla rellene esos huecos ajustando {{cssxref("grid-auto-flow")}}`: dense` en el grid container. Sin embargo, presta atención al hacer esto, ya que saca los elementos de su orden lógico de origen. Sólo deberías hacerlo si tus ítems no tienen un orden establecido - y en ese caso tener en cuenta características de [accesibilidad](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility#Visual_not_logical_re-ordering): el tabulador seguirá el orden de la fuente y no de la visualización reordenada.
 
 ```html hidden
@@ -539,52 +541,60 @@ La mejor manera de aprender a usar el diseño de la cuadrícula es continuar con
 - Para inspirarte mira [_Layout Labs_ de Jen Simmons](http://labs.jensimmons.com/), ella ha estado creando diseños basados en una variedad de fuentes.
 - ara obtener patrones de diseño comunes adicionales, consulta _[Grid by Example](http://gridbyexample.com)_, donde hay muchos ejemplos> de diseño de cuadrícula y también algunos patrones de interfaz de usuario más grandes y diseños de página completa.
 
-1. [**CSS**](/es/docs/Web/CSS)
-2. [**CSS Reference**](/es/docs/Web/CSS/Reference)
-3. [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
-4. **Guías**
-
-    1. [Conceptos básicos del posicionamiento con rejillas](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
-    2. [Relación con otros métodos de posicionamiento](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
-    3. [Posicionamiento basado en líneas](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-    4. [Áreas de una plantilla de rejilla](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
-    5. [Posicionamiento usando líneas de rejilla con nombres](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
-    6. [Posicionamiento automático en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
-    7. [Alineación de cajas en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
-    8. [Rejillas, valores lógicos y modos de escritura](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
-    9. [CSS Grid Layout y Accesibilidad](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
-    10. [CSS Grid Layout y Mejora Progresiva](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
-    11. [Layouts comunes utilizando CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
-
-5. **Properties**
-
-    1. [grid](/es/docs/Web/CSS/grid)
-    2. [grid-area](/es/docs/Web/CSS/grid-area)
-    3. [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
-    4. [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
-    5. [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
-    6. [grid-column](/es/docs/Web/CSS/grid-column)
-    7. [grid-column-end](/es/docs/Web/CSS/grid-column-end)
-    8. [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
-    9. [grid-column-start](/es/docs/Web/CSS/grid-column-start)
-    10. [grid-gap](/es/docs/Web/CSS/grid-gap)
-    11. [grid-row](/es/docs/Web/CSS/grid-row)
-    12. [grid-row-end](/es/docs/Web/CSS/grid-row-end)
-    13. [grid-row-gap](/es/docs/Web/CSS/grid-row-gap)
-    14. [grid-row-start](/es/docs/Web/CSS/grid-row-start)
-    15. [grid-template](/es/docs/Web/CSS/grid-template)
-    16. [grid-template-areas](/es/docs/Web/CSS/grid-template-areas)
-    17. [grid-template-columns](/es/docs/Web/CSS/grid-template-columns)
-    18. [grid-template-rows](/es/docs/Web/CSS/grid-template-rows)
-
-6. **Glossary**
-
-    1. [Rejilla](/es/docs/Glossary/Grid)
-    2. [Líneas de rejilla](/es/docs/Glossary/Grid_lines)
-    3. [Pistas de rejilla](/es/docs/Glossary/Grid_tracks)
-    4. [Celda de rejilla](/es/docs/Glossary/Grid_cell)
-    5. [Áreas de rejilla](/es/docs/Glossary/Grid_areas)
-    6. [Canaletas](/es/docs/Glossary/Gutters)
-    7. [Ejes de rejilla](/es/docs/Glossary/Grid_Axis)
-    8. [Fila de rejilla](/es/docs/Glossary/Grid_rows)
-    9. [Columna de rejilla](/es/docs/Glossary/Grid_column)
+
diff --git a/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.md b/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.md
index a13d879c467574..357a7738272965 100644
--- a/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.md
+++ b/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.md
@@ -75,7 +75,7 @@ La pregunta típica entonces es cómo conseguir que estos ítems se alineen. Aqu
 
 En el siguiente ejemplo construyo el mismo diseño usando Grid. Esta vez tenemos tres pistas de columna de `1fr`. No necesitamos establecer nada sobre los ítems mismos, ellos se colocarán uno dentro de cada celda de la cuadrícula creada. Como se puede ver, se mantienen en una cuadrícula estricta, alineados en filas y columnas. Con cinco ítems, tenemos un hueco al final de la fila dos.
 
-```css
+```css hidden
 * {box-sizing: border-box;}
 
 .wrapper {
@@ -510,6 +510,8 @@ Si configuras un ítem como `display:` `contents` la caja que normalmente crear
 
 {{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}
 
+#### Usado `display: contents`
+
 Si ahora añado `display:` `contents` a las reglas del box1, la caja de ese ítem desaparece y los subítems se convierten en grid ítems y se despliegan usando las reglas de auto-placement.
 
 ```css hidden
@@ -569,52 +571,60 @@ Esta puede ser una forma de anidar elementos en la rejilla para que actúen como
 
 Como puedes ver en esta guía, CSS Grid Layout es sólo una parte de tu kit de herramientas. No tengas miedo de mezclarlo con otros métodos de maquetación, para conseguir los diferentes efectos que necesitas.
 
-1. [**CSS**](/es/docs/Web/CSS)
-2. [**CSS Reference**](/es/docs/Web/CSS/Reference)
-3. [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
-4. **Guías**
-
-    1. [Conceptos básicos del posicionamiento con rejillas](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
-    2. [Relación con otros métodos de posicionamiento](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
-    3. [Posicionamiento basado en líneas](/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
-    4. [Áreas de una plantilla de rejilla](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
-    5. [Posicionamiento usando líneas de rejilla con nombres](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
-    6. [Posicionamiento automático en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
-    7. [Alineación de cajas en grid layout](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
-    8. [Rejillas, valores lógicos y modos de escritura](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
-    9. [CSS Grid Layout y Accesibilidad](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
-    10. [CSS Grid Layout y Mejora Progresiva](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
-    11. [Layouts comunes utilizando CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
-
-5. **Properties**
-
-    1. [grid](/es/docs/Web/CSS/grid)
-    2. [grid-area](/es/docs/Web/CSS/grid-area)
-    3. [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
-    4. [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
-    5. [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
-    6. [grid-column](/es/docs/Web/CSS/grid-column)
-    7. [grid-column-end](/es/docs/Web/CSS/grid-column-end)
-    8. [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
-    9. [grid-column-start](/es/docs/Web/CSS/grid-column-start)
-    10. [grid-gap](/es/docs/Web/CSS/grid-gap)
-    11. [grid-row](/es/docs/Web/CSS/grid-row)
-    12. [grid-row-end](/es/docs/Web/CSS/grid-row-end)
-    13. [grid-row-gap](/es/docs/Web/CSS/grid-row-gap)
-    14. [grid-row-start](/es/docs/Web/CSS/grid-row-start)
-    15. [grid-template](/es/docs/Web/CSS/grid-template)
-    16. [grid-template-areas](/es/docs/Web/CSS/grid-template-areas)
-    17. [grid-template-columns](/es/docs/Web/CSS/grid-template-columns)
-    18. [grid-template-rows](/es/docs/Web/CSS/grid-template-rows)
-
-6. **Glossary**
-
-    1. [Rejilla](/es/docs/Glossary/Grid)
-    2. [Líneas de rejilla](/es/docs/Glossary/Grid_lines)
-    3. [Pistas de rejilla](/es/docs/Glossary/Grid_tracks)
-    4. [Celda de rejilla](/es/docs/Glossary/Grid_cell)
-    5. [Áreas de rejilla](/es/docs/Glossary/Grid_areas)
-    6. [Canaletas](/es/docs/Glossary/Gutters)
-    7. [Ejes de rejilla](/es/docs/Glossary/Grid_Axis)
-    8. [Fila de rejilla](/es/docs/Glossary/Grid_rows)
-    9. [Columna de rejilla](/es/docs/Glossary/Grid_column)
+
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md
index e09af070bec166..ae7aaeb46e508f 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md
@@ -7,8 +7,6 @@ original_slug: >-
 ---
 « [CSS](/es/CSS) « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index)
 
-### Ejemplo 1 del contexto de apilamiento
-
 Empecemos con un ejemplo básico. En el contexto de apilamiento raíz tenemos dos DIVs (DIV #1 and DIV #3), ambos con posición relativa, pero sin propiedad z-index. Dentro del DIV #1 se encuentra el DIV #2 de posición absoluta, mientras que en el DIV #3 se encuentra el DIV #4 con posición absoluta, ambos sin propiedad z-index.
 
 El único contexto de apilamiento es el contexto raíz. Sin la propiedad z-index, los elementos son apilados por orden de ocurrencia.
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md
index 6e22f0f6fa675f..0e2b403b42c65f 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md
@@ -7,8 +7,6 @@ original_slug: >-
 ---
 « [CSS](/es/CSS) « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index)
 
-### Ejemplo 2 del contexto de apilamiento
-
 Este es un ejemplo muy simple, pero es la clave para entender el concepto de _contexto de apilamiento._ Tenemos los mismos 4 DIVs del ejemplo previo, pero ahora las propiedades z-index son asignadas en ambos niveles de la jerarquía.
 
 {{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md
index bd4e26d100d6ad..80437880f42240 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md
@@ -7,8 +7,6 @@ original_slug: >-
 ---
 « [CSS](/en/CSS) « [Understanding CSS z-index](/en/CSS/Understanding_z-index)
 
-### Ejemplo 3 del contexto de apilamiento
-
 Este último ejemplo muestra los problemas que surgen cuando se combinan varios elementos posicionados en una jerarquía HTML multi nivel y cuando los valores z-index son asignados usando selectores de clase.
 
 Tomemos como ejemplo un menú jerárquico de tres niveles formado por varios DIVs posicionados. DIVs de segundo y tercer nivel aparecen cuando se pone el cursor encima o se hace clic en sus padres. Usualmente este tipo de menú es generado mediante un script del lado del cliente o del lado del servidor, así que las reglas de estilos son asignadas con un selector de clase en lugar de un selector de id.
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md
index 70a8d2e31e8eac..b1a19716fd2e94 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md
@@ -6,8 +6,6 @@ original_slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-in
 ---
 « [CSS](/es/CSS) « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index)
 
-### Apilando sin z-index
-
 Cuando ningún elemento tiene z-index, los elementos son apilados en este orden (de abajo hacia arriba):
 
 1. El fondo y los bordes del elemento raiz
diff --git a/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md
index ee56574e10334a..ba190d83c72f33 100644
--- a/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md
+++ b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md
@@ -4,11 +4,9 @@ slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
 translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
 original_slug: Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento
 ---
-El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.
-
 « [CSS](/es/CSS) « [ENTENDIENDO LA PROPIEDAD CSS Z-INDEX](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index)
 
-## El contexto de apilamiento
+El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.
 
 En el ejemplo previo, [Agregando z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index), el orden de renderizado de ciertos DIVs es influenciado por sus valores z-index. Esto ocurre debido a que estos DIVs tienen propiedades especiales que causan que formen un contexto de apilamiento.
 
diff --git a/files/es/web/css/css_selectors/index.md b/files/es/web/css/css_selectors/index.md
index 68f23c54e1f967..b81f4f4435bc8f 100644
--- a/files/es/web/css/css_selectors/index.md
+++ b/files/es/web/css/css_selectors/index.md
@@ -18,44 +18,66 @@ Los **selectores** definen sobre qué elementos se aplicará un conjunto de regl
 
 - [Selector de tipo](/es/docs/Web/CSS/Type_selectors)
   - : Selecciona todos los elementos que coinciden con el nombre del elemento especificado.
+  
     **Sintaxis:** `eltname`
+    
     **Ejemplo:** `input` se aplicará a cualquier elemento {{HTMLElement('input')}}.
 - [Selector de clase](/es/docs/Web/CSS/Class_selectors)
   - : Selecciona todos los elementos que tienen el atributo de `class` especificado.
+  
     **Sintaxis:** `.classname`
+    
     **Ejemplo:** `.index` seleccionará cualquier elemento que tenga la clase "_index_".
 - [Selector de ID](/es/docs/Web/CSS/ID_selectors)
   - : Selecciona un elemento basándose en el valor de su atributo `id`. Solo puede haber un elemento con un determinado ID dentro de un documento.
+  
     **Sintaxis:** `#idname`
+    
     **Ejemplo:** `#toc` se aplicará a cualquier elemento que tenga el ID "_toc_".
 - [Selector universal](/es/docs/Web/CSS/Universal_selectors)
   - : Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres.
+  
     **Sintaxis:** `* ns|* *|*`
+    
     **Ejemplo:** `*` se aplicará a todos los elementos del documento.
 - [Selector de atributo](/es/docs/Web/CSS/Attribute_selectors)
   - : Selecciona elementos basándose en el valor de un determinado atributo.
+  
     **Sintaxis:** `[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]`
+    
     **Ejemplo:** `[autoplay]` seleccionará todos los elementos que tengan el atributo "autoplay" establecido (a cualquier valor).
 
 ## Combinadores
 
 - [Combinador de hermanos adyacentes](/es/docs/Web/CSS/Selectores_hermanos_adyacentes)
   - : El combinador `+` selecciona hermanos adyacentes. Esto quiere decir que el segundo elemento sigue directamente al primero y ambos comparten el mismo elemento padre.
+  
     **Sintaxis:** `A + B`
+    
     **Ejemplo:** La regla `h2 + p` se aplicará a todos los elementos {{HTMLElement('p')}} que siguen directamente a un elemento {{HTMLElement('h2')}}.
 - [Combinador general de hermanos](/es/docs/Web/CSS/Selectores_hermanos_generales)
   - : El combinador `~` selecciona hermanos. Esto quiere decir que el segundo elemento sigue al primero (no necesariamente de forma inmediata) y ambos comparten el mismo elemento padre.
+  
     **Sintaxis:** `A ~ B`
+    
     **Ejemplo:** La regla `p ~ span` se aplicará a todos los elementos {{HTMLElement('span')}} que siguen un elemento {{HTMLElement('p')}}.
 - [Combinador de hijo](/es/docs/Web/CSS/Child_selectors)
   - : El combinador `>` selecciona los elementos que son hijos directos del primer elemento.
+  
     **Sintaxis:** `A > B`
+    
     **Ejemplo:** La regla `ul > li` se aplicará a todos los elementos {{HTMLElement('li')}} que son hijos directos de un elemento {{HTMLElement('ul')}}.
 - [Combinador de descendientes](/es/docs/Web/CSS/Descendant_selectors)
-  - : El combinador ``(espacio) selecciona los elementos que son descendientes del primer elemento. **Sintaxis:** `A B`**Ejemplo:** La regla`div span` se aplicará a todos los elementos {{HTMLElement('span')}} que están dentro de un elemento {{HTMLElement('div')}}.
+  - : El combinador `(espacio)` selecciona los elementos que son descendientes del primer elemento. 
+  
+  **Sintaxis:** `A B`
+  
+  **Ejemplo:** La regla`div span` se aplicará a todos los elementos {{HTMLElement('span')}} que están dentro de un elemento {{HTMLElement('div')}}.
 - [Combinador de column](/es/docs/Web/CSS/Column_combinator)a {{Experimental_Inline}}
   - : El combinador `||` selecciona los elementos especificados pertenecientes a una columna.
+  
     **Sintaxis:** `A || B`
+    
     **Ejemplo:** `col || td` seleccionará todos los elementos {{HTMLElement("td")}} que pertenezcan al ámbito de {{HTMLElement("col")}}.
 
 ## Pseudoclases
diff --git a/files/es/web/css/css_transitions/using_css_transitions/index.md b/files/es/web/css/css_transitions/using_css_transitions/index.md
index be061b78bfb234..d52a88b7841906 100644
--- a/files/es/web/css/css_transitions/using_css_transitions/index.md
+++ b/files/es/web/css/css_transitions/using_css_transitions/index.md
@@ -298,9 +298,11 @@ En lugar de describir el efecto con todo detalle, puedes echar un [vistazo a la
 
 En este ejemplo, una pequeña caja con texto dentro se mueve hacia atrás y hacia delante a través de la pantalla y los colores de fondo y del texto se difuminan entre dos valores mientras tiene lugar la animación.
 
+```html hidden
+
 ```
 
-```
+{{EmbedLiveSample}}
 
 Antes de que miremos los fragmentos de código, tal vez desees [echar un vistazo a la demo en vivo](http://developer.mozilla.org/samples/cssref/transitions/sample1/) (suponiendo que tu navegador admita transiciones). También puedes echar un [vistazo directamente a la CSS](http://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css) que usa.
 
diff --git a/files/es/web/css/flex-shrink/index.md b/files/es/web/css/flex-shrink/index.md
index d795bba3f22bec..d595dfaf75c29d 100644
--- a/files/es/web/css/flex-shrink/index.md
+++ b/files/es/web/css/flex-shrink/index.md
@@ -7,6 +7,8 @@ translation_of: Web/CSS/flex-shrink
 
 La propiedad [CSS](/es/docs/CSS) **`flex-shrink`** especifica el factor de contracción de un flex item. Los flex items se encogerán para llenar el contenedor de acuerdo a su número `flex-shrink` , cuando el tamaño por defecto de los flex items sea mayor al de su contenedor flex container.
 
+#### Ejemplo
+
 ```css
 flex-shrink: 2;
 flex-shrink: 0.6;
@@ -88,7 +90,7 @@ html,body {
 .large { flex-shrink: 3; }
 ```
 
-{{EmbedLiveSample("flex-shrink", "100%", 280, "", "", "example-outcome-frame")}}
+{{EmbedLiveSample("", "100%", 280, "", "", "")}}
 
 {{cssinfo}}
 
@@ -98,7 +100,7 @@ La propiedad `flex-shrink` se especifica como un único [``](#number).
 
 ### Valores
 
-- `
+- ``
   - : Véase{{cssxref("<number>")}}. Los valores negativos no son válidos
 
 ### Sintaxi formal
diff --git a/files/es/web/css/float/index.md b/files/es/web/css/float/index.md
index a6438ea8f3f719..e2af3a3015e0a1 100644
--- a/files/es/web/css/float/index.md
+++ b/files/es/web/css/float/index.md
@@ -100,7 +100,7 @@ Un elemento flotante es al menos tan alto como su elemento hijo flotante más al
 
 **HTML**
 
-```
+```html
 

   
1

   
2

@@ -115,7 +115,7 @@ Un elemento flotante es al menos tan alto como su elemento hijo flotante más al
 
 **CSS**
 
-```
+```css
 section {
   border: 1px solid blue;
   width: 100%;
@@ -141,7 +141,7 @@ div {
 
 **RESULTADO:**
 
-{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}
+{{EmbedLiveSample('','400','180')}}
 
 ### Limpiando (clearing) flotantes:
 
diff --git a/files/es/web/css/font-variant-alternates/index.md b/files/es/web/css/font-variant-alternates/index.md
index c8b3d27351bfdf..d1ebe09945355d 100644
--- a/files/es/web/css/font-variant-alternates/index.md
+++ b/files/es/web/css/font-variant-alternates/index.md
@@ -54,7 +54,7 @@ font-variant-alternates: unset;
 
   - : Esta función habilita la muestra de ornamentas, que son [florones](http://en.wikipedia.org/wiki/Fleuron_%28typography%29) y otros glifos de estilo dingbat. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType `ornm`, como `ornm 2`.
 
-    > **Nota:**para manteneer la semántica de la fuente, se invita a los diseñadores de fuentes a incluir ornamentas qoe no coincidan con caracteres zingbat de Unicode como variantes de ornamenta al caracter de viñeta (U+2022). Las fuentes bien diseñadas lo harán, aunque muchas otras fuentes no.
+    > **Nota:** para manteneer la semántica de la fuente, se invita a los diseñadores de fuentes a incluir ornamentas qoe no coincidan con caracteres zingbat de Unicode como variantes de ornamenta al caracter de viñeta (U+2022). Las fuentes bien diseñadas lo harán, aunque muchas otras fuentes no.
 
 - `annotation()`
   - : Esta función habilita la muestra de anotaciones, como dígitos circulares o caracteres invertidos. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType `nalt`, como `nalt 2`.
diff --git a/files/es/web/css/font/index.md b/files/es/web/css/font/index.md
index 59d21dc3f423e9..0cf9a52978a9f5 100644
--- a/files/es/web/css/font/index.md
+++ b/files/es/web/css/font/index.md
@@ -43,26 +43,26 @@ También se pueden especificar los tipos de letra del sistema usando la propieda
   - : el tipo de letra usado para etiquetar pequeños controles (small control).
 - status-bar
   - : el tipo de letra usado en la barra de estado de la ventana.
-- \-moz-window
-  - : Empty
-- \-moz-document
-  - : Empty
-- \-moz-workspace
-  - : Empty
-- \-moz-desktop
-  - : Empty
-- \-moz-info
-  - : Empty
-- \-moz-dialog
-  - : Empty
-- \-moz-button
-  - : Empty
-- \-moz-pull-down-menu
-  - : Empty
-- \-moz-list
-  - : Empty
-- \-moz-field
-  - : Empty
+-moz-window
+
+  \-moz-document
+
+  \-moz-workspace
+
+  \-moz-desktop
+
+  \-moz-info
+
+  \-moz-dialog
+
+  \-moz-button
+
+  \-moz-pull-down-menu
+
+  \-moz-list
+
+  \-moz-field
+
 
 ## Ejemplos
 
diff --git a/files/es/web/css/frequency/index.md b/files/es/web/css/frequency/index.md
index 5662bcf3cc6ef2..89f6bf55bb3e74 100644
--- a/files/es/web/css/frequency/index.md
+++ b/files/es/web/css/frequency/index.md
@@ -25,6 +25,8 @@ Aunque todas las unidades representen la misma frecuencia para el valor `0`, la
 
 ## Ejemplos
 
+**Valores de frecuencia permitidos**
+
 | Código    | Significado                                                                                                        |
 | --------- | ------------------------------------------------------------------------------------------------------------------ |
 | `12Hz`    | Entero positivo.                                                                                                   |
@@ -34,6 +36,8 @@ Aunque todas las unidades representen la misma frecuencia para el valor `0`, la
 | `+0Hz`    | Cero, con un símbolo `+ y la unidad`.                                                                              |
 | `-0kHz`   | Cero, con un símbolo `-` y la unidad (Aunque no sea común, es un valor permitido).                                 |
 
+**Valores de frecuencia no permitidos**
+
 | Código | Significado                                                                                                               |
 | ------ | ------------------------------------------------------------------------------------------------------------------------- |
 | `12.0` | Éste es un tipo {{cssxref("<number>")}}, no un tipo \, debe tener una unidad.                 |

From 7c6ac4779c995cf42cbb18a62af9147814bb2e77 Mon Sep 17 00:00:00 2001
From: Alexander 
Date: Thu, 20 Oct 2022 17:49:36 -0500
Subject: [PATCH 9/9] Apply suggestions from code review

---
 .../border-radius_generator/index.md                            | 2 ++
 .../using_multiple_backgrounds/index.md                         | 2 +-
 files/es/web/css/flex-basis/index.md                            | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/files/es/web/css/css_backgrounds_and_borders/border-radius_generator/index.md b/files/es/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
index 333dec305e1434..4d717a985bddc9 100644
--- a/files/es/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
+++ b/files/es/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
@@ -8,6 +8,8 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
 ---
 Esta herramienta puede ser usada para generar efectos de {{cssxref("border-radius")}} de CSS3.
 
+#### Herramienta
+
 ```html hidden
 

     

diff --git a/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
index 99e9ff75686ca5..0e7c862f2b00ff 100644
--- a/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
+++ b/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
@@ -48,7 +48,7 @@ En este ejemplo, tres fondos son apilados: el logo de Firefox, un [gradiente lin
 }
 ```
 
-## Resultado
+### Resultado
 
 (Si la imagen no aparece en CodePen, intenta con el botón TIdy en la sección de CSS)
 
diff --git a/files/es/web/css/flex-basis/index.md b/files/es/web/css/flex-basis/index.md
index 0d2ef45881b3e0..fd0f9444e9aeec 100644
--- a/files/es/web/css/flex-basis/index.md
+++ b/files/es/web/css/flex-basis/index.md
@@ -46,7 +46,7 @@ flex-basis: unset;
 
   - : Indica el dimensionamiento automático, basado en el contenido del elemento flexible.
 
-    > **Nota:**Tenga en cuenta que éste valor no fue presentado en el lanzamiento inicial del Diseño de Caja Flexible, así que no será soportado por algunas implementaciones antiguas. El efecto equivalente puede tenerlo usando `auto` junto con un tamaño principal ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) o [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) en auto.
+    > **Nota:** Tenga en cuenta que éste valor no fue presentado en el lanzamiento inicial del Diseño de Caja Flexible, así que no será soportado por algunas implementaciones antiguas. El efecto equivalente puede tenerlo usando `auto` junto con un tamaño principal ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) o [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) en auto.
 
     > **Nota:** Breve historia
     >