diff options
Diffstat (limited to 'files/es/web/css')
580 files changed, 88108 insertions, 0 deletions
diff --git a/files/es/web/css/--_star_/index.html b/files/es/web/css/--_star_/index.html new file mode 100644 index 0000000000..06106e8c7d --- /dev/null +++ b/files/es/web/css/--_star_/index.html @@ -0,0 +1,106 @@ +--- +title: 'Propiedades personalizadas (--*): variables CSS' +slug: Web/CSS/--* +translation_of: Web/CSS/--* +--- +<div>{{CSSRef}}</div> + +<p class="summary"><span class="seoSummary">Los nombres de las propiedades que tiene el prefijo <code>--</code>, como <code>--ejemplo-nombre</code>, representan las <em>propiedades personalizadas </em>que contienen un valor que puede ser usado en otras declaraciones usando la función {{cssxref("var")}}.</span></p> + +<p>Las propiedades personalizadas tienen como alcance los elementos en los que se declaran y participan en la cascada: el valor de dicha propiedad personalizada es el de la declaración decidida por el algoritmo en cascada.</p> + +<p>{{CSSInfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">--somekeyword: left; +--somecolor: #0000ff; +--somecomplexvalue: 3px 6px rgb(20, 32, 54); +</pre> + +<dl> + <dt><code><declaración-valor></code></dt> + <dd>Este valor coincide con cualquier secuencia de uno o más tokens, siempre que la secuencia no contenga un token no permitido.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Los nombres de las propiedades personalizadas distinguen entre mayúsculas y minúsculas — <code>--mi-color</code> se tratará como una propiedad personalizada separada de <code>--Mi-color</code>.</p> +</div> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p id="firstParagraph">Este párrafo debe tener un fondo azul y un texto amarillo.</p> +<p id="secondParagraph">Este párrafo debe tener un fondo amarillo y un texto azul.</p> +<div id="container"> + <p id="thirdParagraph">Este párrafo debe tener un fondo verde y un texto amarillo.</p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[2,3] notranslate">:root { + --first-color: #488cff; + --second-color: #ffff8c; +} + +#firstParagraph { + background-color: var(--first-color); + color: var(--second-color); +} + +#secondParagraph { + background-color: var(--second-color); + color: var(--first-color); +} + +#container { + --first-color: #48ff32; +} + +#thirdParagraph { + background-color: var(--first-color); + color: var(--second-color); +} + +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Example', 500, 130)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Variables", "#defining-variables", "--*")}}</td> + <td>{{Spec2("CSS3 Variables")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.properties.custom-property")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Using_CSS_variables">Usando variables CSS</a></li> + <li><span class="seoSummary">La función {{cssxref("var")}}</span></li> +</ul> diff --git a/files/es/web/css/-moz-binding/index.html b/files/es/web/css/-moz-binding/index.html new file mode 100644 index 0000000000..0280bb44b8 --- /dev/null +++ b/files/es/web/css/-moz-binding/index.html @@ -0,0 +1,110 @@ +--- +title: '-moz-binding' +slug: Web/CSS/-moz-binding +tags: + - CSS + - No estándar(2) + - Referencia CSS + - XBL +translation_of: Archive/Web/CSS/-moz-binding +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <code>-moz-binding</code> CSS es usada por las aplicaciones basadas en Mozilla para adjuntar una asociación o enlace <a href="/en-US/docs/XBL">XBL</a> a un elemento del DOM</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* <uri> value */ +-moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox); + +/* Global values */ +-moz-binding: inherited; +-moz-binding: initial; +-moz-binding: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><uri></dt> + <dd>La URI del enlace XBL (incluyendo el identificador de fragmento).</dd> + <dt><code>none</code></dt> + <dd>No se aplica ninguna asociación o enlace XBL al elemento.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: css">.exampleone { + -moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#radiobutton); +}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores.">Compatibilidad con los distintos navegadores.</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li><a href="/en-US/docs/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment">XBL Reference: Binding Attachment and Detachment</a></li> + <li><a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/Introduction_to_XBL">XUL Tutorial: Introduction to XBL</a></li> +</ul> diff --git a/files/es/web/css/-moz-border-bottom-colors/index.html b/files/es/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..75dea0131a --- /dev/null +++ b/files/es/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,136 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>En la aplicaciones de Mozilla como Firefox la propiedad CSS {{cssxref("-moz-border-bottom-colors")}} establece una lista de colores para el borde inferior.</p> + +<p>Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado</p> + +<p>{{cssinfo}}</p> + +<p>No se aplica</p> + +<ol> + <li>Si {{Cssxref("border-style")}} es <code>dashed</code> o <code>dotted</code>.</li> + <li>En tablas con <code>border-collapse: collapse</code>.</li> +</ol> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Valor de <color> único */ +-moz-border-bottom-colors: #f0f0f0; + +/* Valores de <color> múltiples */ +-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000; + +/* Valores globales */ +-moz-border-bottom-colors: inherit; +-moz-border-bottom-colors: initial; +-moz-border-bottom-colors: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>Acepta una lista de colores separados por espacios en blanco.</p> + +<dl> + <dt><color></dt> + <dd>Especifica el color de una línea de pixels para el borde inferiror. <code>transparent</code> (transparente) es un color válido. Ver valores de {{cssxref("<color>")}} para ver las posibles unidades.</dd> + <dt>none</dt> + <dd>Valor por defecto, si se establece no se muestra ningún color ni se usa {{cssxref("border-color")}}</dd> +</dl> + +<h3 id="Síntaxis_formal">Síntaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush:html"><div id="example">Ejemplo</div> +</pre> + +<pre class="brush:css">#example { + padding: 20px; + background-color: gray; + border: 10px solid black; + -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; + -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; +} +</pre> + +<p>{{EmbedLiveSample("Example", 120, 90)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Esta propiedad no forma parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref("border-color")}}</li> + <li>{{Cssxref("-moz-border-right-colors")}}</li> + <li>{{Cssxref("-moz-border-top-colors")}}</li> + <li>{{Cssxref("-moz-border-left-colors")}}</li> +</ul> diff --git a/files/es/web/css/-moz-border-left-colors/index.html b/files/es/web/css/-moz-border-left-colors/index.html new file mode 100644 index 0000000000..81eb29d51f --- /dev/null +++ b/files/es/web/css/-moz-border-left-colors/index.html @@ -0,0 +1,144 @@ +--- +title: '-moz-border-left-colors' +slug: Web/CSS/-moz-border-left-colors +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Archive/Web/CSS/-moz-border-left-colors +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>En aplicaciones de Mozilla, como Firefox, la propiedad CSS {{cssxref("-moz-border-left-colors")}} aplica una lista de colores al borde derecho.</p> + +<p>Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado.</p> + +<p> </p> + +<p>{{cssinfo}}</p> + +<p> </p> + +<p>No se aplica</p> + +<ol> + <li>Si {{Cssxref("border-style")}} es <code>dashed</code> o <code>dotted</code>.</li> + <li>A tablas con <code>border-collapse: collapse</code>.</li> +</ol> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Valor de <color> único */ +-moz-border-left-colors: #f0f0f0; + +/* Valor de <color> único */ +-moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000; + +/* Valores globales */ +-moz-border-left-colors: inherit; +-moz-border-left-colors: initial; +-moz-border-left-colors: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>Acepta una lista de colores separados por espacios en blanco.</p> + +<dl> + <dt><color></dt> + <dd>Especifica el color de una línea de pixels para el borde inferiror. <code>transparent</code> (transparente) es un color válido. Ver valores de {{cssxref("<color>")}} para ver las posibles unidades.</dd> + <dt>none</dt> + <dd>Valor por defecto, si se establece no se muestra ningún color ni se usa {{cssxref("border-color")}}<code>.</code></dd> +</dl> + +<p> </p> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<p> </p> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush:html"><div id="example">Ejemplo</div> +</pre> + +<pre class="brush:css">#example { + padding: 20px; + background-color: gray; + border: 10px solid black; + -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; + -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; +} +</pre> + +<p>{{EmbedLiveSample("Example", 120, 90)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Esta propiedad no forma parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref("border-color")}}</li> + <li>{{Cssxref("-moz-border-right-colors")}}</li> + <li>{{Cssxref("-moz-border-bottom-colors")}}</li> + <li>{{Cssxref("-moz-border-top-colors")}}</li> +</ul> diff --git a/files/es/web/css/-moz-border-right-colors/index.html b/files/es/web/css/-moz-border-right-colors/index.html new file mode 100644 index 0000000000..5939baf82f --- /dev/null +++ b/files/es/web/css/-moz-border-right-colors/index.html @@ -0,0 +1,136 @@ +--- +title: '-moz-border-right-colors' +slug: Web/CSS/-moz-border-right-colors +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Archive/Web/CSS/-moz-border-right-colors +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>En la aplicaciones de Mozilla como Firefox la propiedad CSS {{cssxref("-moz-border-right-colors")}} establece una lista de colores para el borde derecho.</p> + +<p>Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado</p> + +<p>{{cssinfo}}</p> + +<p>No se aplica</p> + +<ol> + <li>Si {{Cssxref("border-style")}} es <code>dashed</code> o <code>dotted</code>.</li> + <li>a tablas con <code>border-collapse: collapse</code>.</li> +</ol> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Valor de <color> único */ +-moz-border-right-colors: #f0f0f0; + +/* Valor de <color> múltiple */ +-moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000; + +/* Valores gloables */ +-moz-border-right-colors: inherit; +-moz-border-right-colors: initial; +-moz-border-right-colors: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>Acepta una lista de colores separados por espacios en blanco.</p> + +<dl> + <dt><color></dt> + <dd>Especifica el color de una línea de pixels para el borde inferiror. <code>transparent</code> (transparente) es un color válido. Ver valores de {{cssxref("<color>")}} para ver las posibles unidades.</dd> + <dt>none</dt> + <dd>Valor por defecto, si se establece no se muestra ningún color ni se usa {{cssxref("border-color")}}</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush:html"><div id="example">Ejemplo</div> +</pre> + +<pre class="brush:css">#example { + padding: 20px; + background-color: gray; + border: 10px solid black; + -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; + -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; +} +</pre> + +<p>{{EmbedLiveSample("Example", 120, 90)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Esta propiedad no forma parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores.">Compatibilidad con los distintos navegadores.</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref("border-color")}}</li> + <li>{{Cssxref("-moz-border-top-colors")}}</li> + <li>{{Cssxref("-moz-border-bottom-colors")}}</li> + <li>{{Cssxref("-moz-border-left-colors")}}</li> +</ul> diff --git a/files/es/web/css/-moz-border-top-colors/index.html b/files/es/web/css/-moz-border-top-colors/index.html new file mode 100644 index 0000000000..2db9dffac6 --- /dev/null +++ b/files/es/web/css/-moz-border-top-colors/index.html @@ -0,0 +1,140 @@ +--- +title: '-moz-border-top-colors' +slug: Web/CSS/-moz-border-top-colors +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Archive/Web/CSS/-moz-border-top-colors +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>En la aplicaciones de Mozilla como Firefox la propiedad CSS {{cssxref("-moz-border-top-colors")}} establece una lista de colores para el borde inferior.</p> + +<p>Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado</p> + +<p>{{cssinfo}}</p> + +<p>No se aplica</p> + +<ol> + <li>Si {{Cssxref("border-style")}} es <code>dashed</code> o <code>dotted</code>.</li> + <li>En tablas con <code>border-collapse: collapse</code>.</li> +</ol> + +<p> </p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<p> </p> + +<pre class="brush:css">/* Valores de <color> único */ +-moz-border-top-colors: #f0f0f0; + +/* Valores de color <color> múltiple */ +-moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000; + +/* Valores gloables */ +-moz-border-top-colors: inherit; +-moz-border-top-colors: initial; +-moz-border-top-colors: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>Acepta una lista de colores separados por espacios en blanco.</p> + +<dl> + <dt><color></dt> + <dd>Especifica el color de una línea de pixels para el borde inferiror. <code>transparent</code> (transparente) es un color válido. Ver valores de {{cssxref("<color>")}} para ver las posibles unidades.</dd> + <dt>none</dt> + <dd>Valor por defecto, si se establece no se muestra ningún color ni se usa {{cssxref("border-color")}}</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush:html"><div id="example">Ejemplo</div> +</pre> + +<pre class="brush:css">#example { + padding: 20px; + background-color: gray; + border: 10px solid black; + -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; + -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; +} +</pre> + +<p>{{EmbedLiveSample("Example", 120, 90)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Esta propiedad no forma parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref("border-color")}}</li> + <li>{{Cssxref("-moz-border-right-colors")}}</li> + <li>{{Cssxref("-moz-border-bottom-colors")}}</li> + <li>{{Cssxref("-moz-border-left-colors")}}</li> +</ul> diff --git a/files/es/web/css/-moz-box-flex/index.html b/files/es/web/css/-moz-box-flex/index.html new file mode 100644 index 0000000000..c7491aea2d --- /dev/null +++ b/files/es/web/css/-moz-box-flex/index.html @@ -0,0 +1,155 @@ +--- +title: '-moz-box-flex' +slug: Web/CSS/-moz-box-flex +tags: + - CSS + - No estándar(2) + - Referencia CSS +translation_of: Web/CSS/box-flex +--- +<div>{{CSSRef}}{{warning("Esta propiedad es para controlar parte del modelo de caja XUL. No coincide ni con el antiguo borrador del módulo CSS para el diseño de caja flexibles '<code>box-flex</code>' (que se basa en esta propiedad) ni con el comportamiento de '<code>-webkit-box-flex</code>' (que se basa en esos borradores).")}}</div> + +<p>Ver <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Flexbox</a> para más información acerca de qué usar en vez de esta propiedad.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Las propiedades <a href="/en-US/docs/Web/CSS">CSS</a><code>-moz-box-flex</code> y <code>-webkit-box-flex</code> especifican cómo una <code>-moz-box</code> o <code>-webkit-box</code> crecen para rellenar la caja que los contienen, en la dirección del diseño o esquema (layout) de la caja contenedora.Ver <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Flexbox</a> para más información sobre las propiedades de los elementos flexbox.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Valores <number> */ +-moz-box-flex: 0; +-moz-box-flex: 3; +-webkit-box-flex: 0; +-webkit-box-flex: 3; + +/* Valores gloables */ +-moz-box-flex: inherit; +-moz-box-flex: initial; +-moz-box-flex: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>0</dt> + <dd>La caja no crece.</dd> + <dt>> 0</dt> + <dd>La caja crece para rellenar un proporción del espacio disponible..</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Ejemplo de -moz-box-flex</title> + <style> + div.example { + display: -moz-box; + display: -webkit-box; + border: 1px solid black; + width: 100%; + } + div.example > p:nth-child(1) { + -moz-box-flex: 1; /* Mozilla */ + -webkit-box-flex: 1; /* WebKit */ + border: 1px solid black; + } + div.example > p:nth-child(2) { + -moz-box-flex: 0; /* Mozilla */ + -webkit-box-flex: 0; /* WebKit */ + border: 1px solid black; + } + </style> + </head> + <body> + <div class="example"> + <p>Creceré para rellenar un espacio extra</p> + <p>No creceré</p> + </div> + </body> +</html> +</pre> + +<h2 id="Notas">Notas</h2> + +<p>La caja contenedora asigna el espacio extra disponible de manera proporcional al valor flex de cada uno de los elementos que contiene.</p> + +<p>Los elementos dentro del contenedor que tienen 0 flex no crecen.</p> + +<p>Si śolo uno de los elementos tiene un valor distinto de cero ocupará todo el espacio disponible.</p> + +<p>Los elementos que tienen el mismo valor para flex crecen en la misma cantidad en términos absolutos.</p> + +<p>Si el valor flex se ha establecido usando el atributo flex del elemento, entonces el estilo es ignorado.</p> + +<p>Para hacer que los elementos XUL dentro de una caja contenedora tengan el mismo tamaño, fijaremos el atributo <code>equalsize </code>de la caja contenedora a <code>always</code>. Este atributo no tiene correspondencia con ninguna propiedad CSS.</p> + +<p>Un truco para hacer que todos los elementos dentro una caja contenedora tengan el mismo tamaño es darles un tamaño fijo,(por ejemplo <code>height: 0</code>), y el mismo valor box-flex mayor que cero a todos (por ejemplo <code>-moz-box-flex: 1</code>).</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Esta propiedad es una extensión no estándar. Había una <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">old draft of the CSS3 Flexbox specification</a> que definía una propiedad<code>box-flex</code> , pero ese borrador nunca ha sido sustituido.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<p>{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}</p> diff --git a/files/es/web/css/-moz-box-ordinal-group/index.html b/files/es/web/css/-moz-box-ordinal-group/index.html new file mode 100644 index 0000000000..7969d3e525 --- /dev/null +++ b/files/es/web/css/-moz-box-ordinal-group/index.html @@ -0,0 +1,66 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - 'CSS: Extensiones Mozilla' + - Caja Flexible + - No estandar + - Referencia CSS +translation_of: Web/CSS/box-ordinal-group +--- +<p>{{CSSRef}}<br> + {{warning("Esta propiedad pertenece al borrador original del diseño o esquema de la caja CSS flexible, y ha sido reemplazada en borradores posteriores.")}}</p> + +<p>Ver <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes" title="/en/CSS/Flexible_boxes">Flexbox</a> para más información sobre qué usar en sustitución de esta propiedad.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Indica el grupo ordinal al que pertenece el elemento. Aquellos elementos con un grupo ordinal menor son mostrados antes que aquellos con un grupo ordinal mayor.</p> + +<h2 id="Valores">Valores</h2> + +<p>Los valores deben ser enteros positivos (mayores de cero). El valor por defecto para esta propiedad es 1.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><style type="text/css"> + #Flexbox { + display: -ms-box; + display: -moz-box; + display: -webkit-box; + } + + #text1 { + background: red; + -ms-box-ordinal-group: 4; + -moz-box-ordinal-group: 4; + -webkit-box-ordinal-group: 4; + } + + #text2 { + background: green; + -ms-box-ordinal-group: 3; + -moz-box-ordinal-group: 3; + -webkit-box-ordinal-group: 3; + } + + #text3 { + background: blue; + -ms-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + -webkit-box-ordinal-group: 2; + } + + #text4 { + background: orange; + } +</style> + +<div id="Flexbox"> + <div id="text1">text 1</div> + <div id="text2">text 2</div> + <div id="text3">text 3</div> + <div id="text4">text 4</div> +</div> +</pre> diff --git a/files/es/web/css/-moz-box-pack/index.html b/files/es/web/css/-moz-box-pack/index.html new file mode 100644 index 0000000000..118d60287a --- /dev/null +++ b/files/es/web/css/-moz-box-pack/index.html @@ -0,0 +1,184 @@ +--- +title: '-moz-box-pack' +slug: Web/CSS/-moz-box-pack +tags: + - CSS + - Diseño + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/box-pack +--- +<div>{{CSSRef}}{{warning("Esta propiedad es parte del módulo estándar original para el diseño de las cajas CSS Flexible que fue sustituida por un nuevo estándar.")}}</div> + +<p>Ver <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Flexbox</a> para más información.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Las propiedades <a href="/en-US/docs/Web/CSS">CSS </a><code>-moz-box-pack</code> y <code>-webkit-box-pack</code> especifican cómo una <code>-moz-box</code> o un <code>-webkit-box</code> empaquetan o disponen su contenido en la dirección de su diseño o esquema. El efecto de esto sólo es visible si hay expacio extra en la caja. Ver <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Flexible_box_properties">Flexbox</a> para más información sobre las propiedades de los elementos flexbox.</p> + +<p>La dirección del esquema o diseño (layout) depende de la orientación del elemento: vertical o horizontal.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Valores de palabras clave */ +-moz-box-pack: start; +-moz-box-pack: center; +-moz-box-pack: end; +-moz-box-pack: justify; + +/* Valores gloables */ +-moz-box-pack: inherit; +-moz-box-pack: initial; +-moz-box-pack: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>start</code></dt> + <dd>La caja empaqueta o muestra el contenido al principio dejando el espacio libre que hubiera al final.</dd> + <dt><code>center</code></dt> + <dd>La caja empaqueta o muestra el contenido en el centro dejando el espacio libre que hubiera dividido de igual manera entre el inicio y el final.</dd> + <dt><code>end</code></dt> + <dd>La caja empaqueta o muestra el contenido al final dejando el espacio libre que hubiera al principio.</dd> + <dt><code>justify</code></dt> + <dd>El espacio se divide de igual manera entre los diferentes hijos sin dejar nada del espacio libre ni antes del primer hijo ni después del último. Si sólo hay un hijo el comportamiento es como si fuera <code>start</code>.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">div.example { + border-style: solid; + + display: -moz-box; /* Mozilla */ + display: -webkit-box; /* WebKit */ + + /* Hace esta caja más alta que los hijos para que haya hueco suficiente + para el empaquetado en la caja */ + height: 300px; + /* Hace la caja lo suficientemente ancha para mostrar los contenidos + centrados horizontalmente */ + width: 300px; + + /* Los hijos deberían estar orientados verticalmente */ + -moz-box-orient: vertical; /* Mozilla */ + -webkit-box-orient: vertical; /* WebKit */ + + /* Alínea los hijos con el centro horizontal de la caja */ + -moz-box-align: center; /* Mozilla */ + -webkit-box-align: center; /* WebKit */ + + /* Dispone a los hijos en el fondo de la caja */ + -moz-box-pack: end; /* Mozilla */ + -webkit-box-pack: end; /* WebKit */ +} + +div.example p { + /* hace los hijos más estrechos que el padra para que + haya espacio suficiente para el box-align */ + width: 200px; +} +</pre> + +<pre class="brush: html"><div class="example"> + <p>Será el segundo empezando desde el fondo de div.example y centrado horizontalmente.</p> + <p>Estaré en el fondo de div.example y centrado horizontalmente.</p> +</div> +</pre> + +<p>{{EmbedLiveSample('Examples', 310, 310)}}</p> + +<h2 id="Notas">Notas</h2> + +<p>EL borde de la caja que será tomado como <em>start</em> para el empqeutado dependerá de la orientación y dirección de la caja:</p> + +<table class="standard-table" style="text-align: center;"> + <tbody> + <tr> + <th> </th> + <th><strong>Normal</strong></th> + <th><strong>Reverse</strong></th> + </tr> + <tr> + <th style="text-align: right;"><strong>Horizontal</strong></th> + <td>left</td> + <td>right</td> + </tr> + <tr> + <th style="text-align: right;"><strong>Vertical</strong></th> + <td>top</td> + <td>bottom</td> + </tr> + </tbody> +</table> + +<p>El borde opuesto a start será el considerado como <em>end</em>.</p> + +<p>Si el empaquetado se establece usando el atributo <code>pack</code> del elemento el estilo es ignorado.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Esta propiedad es no estándar aunque una propiedad similar apareción en <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">draft of CSS3 Flexbox</a>, que a su vez ha sido sustituida para nuevas versiones de la especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<p>{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}</p> diff --git a/files/es/web/css/-moz-cell/index.html b/files/es/web/css/-moz-cell/index.html new file mode 100644 index 0000000000..b1c5e8aa32 --- /dev/null +++ b/files/es/web/css/-moz-cell/index.html @@ -0,0 +1,10 @@ +--- +title: '-moz-cell' +slug: Web/CSS/-moz-cell +tags: + - CSS +translation_of: Web/CSS/cursor +--- +<div>{{CSSRef}}{{obsolete_header}}</div> + +<p><em>¡No uses este valor!Don't use this value! </em> Usa el valor {{cssxref("cursor#cell","cell")}} en su lugar.</p> diff --git a/files/es/web/css/-moz-context-properties/index.html b/files/es/web/css/-moz-context-properties/index.html new file mode 100644 index 0000000000..2a9f0d3137 --- /dev/null +++ b/files/es/web/css/-moz-context-properties/index.html @@ -0,0 +1,79 @@ +--- +title: '-moz-context-properties' +slug: Web/CSS/-moz-context-properties +translation_of: Web/CSS/-moz-context-properties +--- +<div>{{CSSRef}}{{Non-standard_header}} +<div class="note"> +<p><strong>Note</strong>: Este recurso esta disponible desde Firefox 55, pero solamente es compatible con imagenes SVG cargadas via <code>chrome://</code> o <code>resource://</code> URLs. Para experimentar con la caracteristica SVG en la web, es necesario poner <code>svg.context-properties.content.enabled</code> en <code>true</code>.</p> +</div> +</div> + +<p>Si mencionas una imagen SVG en una pagina web({{htmlelement("img")}} como elemento o como fondo de pagina), la imagen SVG puede coordinarse con el elemento incrustado(su contexto) para que la imagen adopte las propiedades puestas en el elemento incrustado. Para hacer esto, el elemento incrustado necesita listar las propiedades que deben estar disponibles para la imagen listadolas como valores de la propiedad<strong><code>-moz-context-properties</code></strong>, y la imagen necesita optar a usar esas propiedades utilizando valores tales como el valor de <code>context-fill</code>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* Keyword values */ +-moz-context-properties: fill; +-moz-context-properties: fill, stroke; + +/* Global values */ +-moz-context-properties: inherit; +-moz-context-properties: initial; +-moz-context-properties: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>fill</code></dt> + <dd>Expone el valor de <code>fill</code> determinado en la imagen del SVG.</dd> + <dt><code>stroke</code></dt> + <dd>Expone el valor de <code>stroke</code> determinado en la imagen del SVG..</dd> + <dt><code>fill-opacity</code></dt> + <dd>Expone el valor de<code>fill-opacity</code> determinado en la imagen del SVG.</dd> + <dt><code>stroke-opacity</code></dt> + <dd>Expone el valor de <code>stoke-opacity</code> determinado en la imagen del SVG.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>En este ejemplo tenemos un SVG sencillo utilizando un elemento <code><img></code>.</p> + +<p>Primero necesitas especificar en el elemento incrustado las propiedades cuyos valores quieres exponer al SVG, utilizando la propiedad <code>-moz-context-properties</code>. Por ejemplo:</p> + +<pre class="brush: css">.img1 { + width: 100px; + height: 100px; + -moz-context-properties: fill, stroke; + fill: lime; + stroke: purple; +}</pre> + +<p>Ahora que has hecho eso la imagen SVG puede utlizar los valores de {{cssxref("fill")}} y {{cssxref("stroke")}} , por ejemplo:</p> + +<pre class="brush: html"><img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> + <rect width='100%' height='100%' stroke-width='30px' + fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>"></pre> + +<p>Aqui hemos puesto que la imagen <code>src</code> sea una URL de datos que contiene una imagen SVG simple; el <code><rect></code>de dentro ha sido hecho para coger sus valores de <code>fill</code> y <code>stroke</code> de {{cssxref("fill")}} y {{cssxref("stroke")}} puestos en el elemento <code><img></code>poniendo <code>context-fill</code>/<code>context-stroke</code> en sus valores asi como un color para rellenar(rojo) que sera utilizado en caso que el SVG es cargado independientemente en una ventana superior(donde no tendra contexto para dar los valores ). Tener en cuenta que si un colore es directamente puesto en el SVG, pero el color del contexto tambien es especificado, el color del contexto sobreescribe el color directo.</p> + +<div class="note"> +<p><strong>Note</strong>: Puedes en contrar un <a href="https://mdn.github.io/css-examples/moz-context-properties/">ejemplo de ejecucion en Github</a>.</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Esta propiedad no esta definida en ningun estándar de CSS</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.-moz-context-properties")}}</p> diff --git a/files/es/web/css/-moz-float-edge/index.html b/files/es/web/css/-moz-float-edge/index.html new file mode 100644 index 0000000000..9454e77fc9 --- /dev/null +++ b/files/es/web/css/-moz-float-edge/index.html @@ -0,0 +1,78 @@ +--- +title: '-moz-float-edge' +slug: Web/CSS/-moz-float-edge +tags: + - CSS + - 'CSS: Extensión Mozilla' + - Diseño + - No estandar + - Propiedad CSS +translation_of: Web/CSS/-moz-float-edge +--- +<div> {{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/en-US/docs/Web/CSS">CSS</a> no estándar <strong><code>-moz-float-edge</code></strong> especifica si las propiedades altura y anchura del elemento incluyen el margen, el borde o el espesor del padding (relleno)</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Palabras clave valor */ +-moz-float-edge: border-box; +-moz-float-edge: content-box; +-moz-float-edge: margin-box; +-moz-float-edge: padding-box; + +/* Valores globales */ +-moz-float-edge: inherit; +-moz-float-edge: initial; +-moz-float-edge: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>border-box</code></dt> + <dd>La altura y anchura incluyen el contenido, el padding (relleno) y el bordee, pero no el margin.</dd> + <dt><code>content-box</code></dt> + <dd>La altura y anchura incluyen el contenido, pero no el padding (relleno),borde ni el margen.</dd> + <dt><code>margin-box</code></dt> + <dd>La altura y anchura incluyen el contenido, el padding (relleno), el borde y el margen.</dd> + <dt><code>padding-box</code></dt> + <dd>La altura y anchura incluyen el contenido, y el padding (relleno), pero no el borde ni el margen.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example"> </h2> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="html prettyprint"><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"box"</span><span class="tag">></span><span class="pln"> </span> +<span class="pln"> </span><span class="tag"><p></span><span class="pln">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><span class="tag"></p></span><span class="pln"> +</span><span class="tag"></div></span></pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">.box { + display: <span class="highVAL">block</span>; + height: 5px; + margin: 0.5em auto 0.5em auto; + color: gray; + -moz-float-edge: margin-box; + box-sizing: border-box; +} </pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/-moz-float-edge') }}</p> + +<h2 id="Ver_además">Ver además</h2> + +<p>{{bug(432891)}}</p> diff --git a/files/es/web/css/-moz-font-language-override/index.html b/files/es/web/css/-moz-font-language-override/index.html new file mode 100644 index 0000000000..5d035a4cd3 --- /dev/null +++ b/files/es/web/css/-moz-font-language-override/index.html @@ -0,0 +1,6 @@ +--- +title: '-moz-font-language-override' +slug: Web/CSS/-moz-font-language-override +translation_of: Web/CSS/font-language-override +--- +<p>* , html, body, div, p { font-Zawgyi-One ! important; }</p> diff --git a/files/es/web/css/-moz-force-broken-image-icon/index.html b/files/es/web/css/-moz-force-broken-image-icon/index.html new file mode 100644 index 0000000000..67f407e77b --- /dev/null +++ b/files/es/web/css/-moz-force-broken-image-icon/index.html @@ -0,0 +1,56 @@ +--- +title: '-moz-force-broken-image-icon' +slug: Web/CSS/-moz-force-broken-image-icon +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: Web/CSS/-moz-force-broken-image-icon +--- +<div>{{Non-standard_header}}{{ CSSRef() }}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p><code>-moz-force-broken-image-icon</code> es una propiedad CSS extendida. El valor <code>1</code> fuerza un icono de imagen no encontrada aunque la imagen tenga el atributo <code>alt</code>. Cuando el valor es <code>0</code> la imagen actuará normalmente y solo mostrará el atributo <code>alt</code>.</p> + +<div class="note"><strong>Nota:</strong> Aunque el valor sea <code>1</code> el atributo <code>alt</code> se seguirá mostrando. Más información debajo.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox">-moz-force-broken-image-icon: <integer>;</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd> </dd> +</dl> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<pre class="brush:css;">img { + -moz-force-broken-image-icon: 1; + height:100px; + width:100px; +}</pre> + +<pre class="brush:html;"><img src='/enlace/roto/imagen.png' alt='Imagen con enlace roto'></pre> + +<p>{{ EmbedLiveSample('Examples','125','125','/files/4619/broken%20image%20link.png') }}</p> + +<div class="note"><strong>Nota:</strong> A no ser que la imagen tenga una altura y ancho especificados, el icono de imagen rota no se mostrará, pero el atributo alt no se mostrará si el valor de <code>-moz-force-broken-image-icon</code> es <code>1</code>.</div> + +<h2 id="Notes" name="Notes">Notas</h2> + +<ul> + <li>Esta propiedad solo funcionará en los navegadores basados en Gecko</li> + <li>No se recomienda el uso de esta propiedad. Se debería usar un atributo alt adecuado.</li> +</ul> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{ Bug(58646) }}</li> +</ul> diff --git a/files/es/web/css/-moz-image-rect/index.html b/files/es/web/css/-moz-image-rect/index.html new file mode 100644 index 0000000000..5d6b6f1e69 --- /dev/null +++ b/files/es/web/css/-moz-image-rect/index.html @@ -0,0 +1,143 @@ +--- +title: '-moz-image-rect' +slug: Web/CSS/-moz-image-rect +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-moz-image-rect +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>Este valor para la propiedad <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("background-image")}} te permite usar una parte de una imagen de gran tamaño como fondo. Esto permitirá, por ejemplo, usar diferentes partes de una imagen grande como si fueran una sóla imagen grande usada como fondo de diferentes partes de tú contenido.</p> + +<p>Funciona de manera similar a la propiedad {{cssxref("-moz-image-region")}} , que se usa junto con la propiedad{{cssxref("list-style-image")}} para utilizar partes de imágnes como iconos de listas. Sin embargo puede ser usado para cualquier fondo CSS.</p> + +<p>La síntaxis para el rectánigulo es similar a la de la función <a href="/en-US/docs/Web/CSS/shape#Syntax"><code>rect()</code></a> y genera un tipo CSS {{cssxref("<shape>")}} . Los cuatro valores son relativos a la esquina superior izquierda de la imagen.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox">-moz-image-rect({{cssxref("<uri>")}}, <em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>);</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>{{cssxref("<uri>")}}</dt> + <dd>La URI de la imagen de la que se cogera una parte.</dd> + <dt><code>top</code></dt> + <dd>El borde superior, especificado como {{cssxref("<length>")}}, de la subimagen dentro de la imagen seleccionada.</dd> + <dt><code>right</code></dt> + <dd>El borde derecho, especificado como {{cssxref("<length>")}}, de la subimagen dentro de la imagen seleccionada.</dd> + <dt><code>bottom</code></dt> + <dd>El borde inferior, especificado como {{cssxref("<length>")}}, de la subimagen dentro de la imagen seleccionada.</dd> + <dt><code>left</code></dt> + <dd>El borde izquierdo, especificado como {{cssxref("<length>")}}, de la subimagen dentro de la imagen seleccionada.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Este ejemplo carga una imagen y la usa en cuatro segmento para dibujar el logo de Firefox en cuatro bloques {{HTMLElement("div")}} blocks. Si hacemos click en el contenedor los cuatro segmentos rotarán cmabiando los valores de la propiedad {{cssxref("background-image")}} entre estos cuatro bloques {{HTMLElement("div")}}.</p> + +<h3 id="CSS">CSS</h3> + +<p>El CSS define un estilo para el contenedor y, posteriormente los estilos para las cuatro cajas que comprenden la imagen completa.</p> + +<p>Para el contenedor:</p> + +<pre class="brush: css">#container { + width:267px; + height:272px; + top:100px; + left:100px; + position:absolute; + font-size:16px; + text-shadow:white 0px 0px 6px; + text-align:center; +}</pre> + +<p>posteriormente las cuatro caja se defines las cajas que especifican los segmentos de la imagen. La vamos a ver una por una.</p> + +<pre class="brush: css">#box1 { + background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%); + width:133px; + height:136px; + position:absolute; +} +</pre> + +<p>Esta es la esquina superior izquierda de la imagen. Define un rectángulo que contiene el cuartil superior izquierda de la imagen <code>firefox.jpg</code>.</p> + +<pre class="brush: css">#box2 { + background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%); + width:133px; + height:136px; + position:absolute; +} +</pre> + +<p>Esto define la esquina superior derecha:</p> + +<p>Las otras dos siguen un patrón similar:</p> + +<pre class="brush: css">#box3 { + background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%); + width:133px; + height:136px; + position:absolute; +} +#box4 { + background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%); + width:133px; + height:136px; + position:absolute; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<p>Es bastante simple:</p> + +<pre class="brush: html"><div id="container" onclick="rotate()"> + <div id="box1" style="left:0px;top:0px;">Top left</div> + <div id="box2" style="left:133px;top:0px;">Top right</div> + <div id="box3" style="left:0px;top:136px;">Bottom left</div> + <div id="box4" style="left:133px;top:136px;">Bottom right</div> +</div> +</pre> + +<p>Sitúa los 4 segmentos de una imagen en un caja de 2x2 celdas. Estos cuatro elementos están dentro de un bloque {{HTMLElement("div")}} más grande cuya función es recibir eventos click y mandarlos al código JavaScript.</p> + +<h3 id="El_codigo_javaScript">El codigo javaScript</h3> + +<p>Gestiona el evento click cuando el contenedor recibe un click de ratón</p> + +<pre class="brush:js">function rotate() { + var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image"); + + // Una vez hemos guardado la última, empezamos a rotar. + + for (var i=1; i<=4; i++) { + var curId = "box" + i; + + // Permuta las imágenes de fondo. + + var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image"); + document.getElementById(curId).style.backgroundImage = prevStyle; + prevStyle = curStyle; + } +}</pre> + +<p>Usa {{domxref("window.getComputedStyle()")}} para establecer el estilo de cada elemento, cambiándolo al elemento posterior. Destacar que, una vez se empieza se guarda una copia del estilo de la última caja ya que será sobreescrito por el tercer elemento. Simplemente copiando los valores de la propiedad {{cssxref("background-image")}} de un elemento al siguiente, cuando hacemos click de ratón, conseguiremos el efecto deseado.</p> + +<h3 id="Como_queda">Como queda</h3> + +<p>{{EmbedLiveSample("Example","400","400")}}</p> + +<h3 id="Bugs">Bugs</h3> + +<ul> + <li>{{WebkitBug(32177)}}</li> +</ul> diff --git a/files/es/web/css/-moz-image-region/index.html b/files/es/web/css/-moz-image-region/index.html new file mode 100644 index 0000000000..4b8ff97c95 --- /dev/null +++ b/files/es/web/css/-moz-image-region/index.html @@ -0,0 +1,37 @@ +--- +title: '-moz-image-region' +slug: Web/CSS/-moz-image-region +tags: + - CSS + - No estandar + - Referencia + - Referencia CSS +translation_of: Web/CSS/-moz-image-region +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p><em>Para sistemas que funcionan con cualquier fondo ver {{ Cssxref("-moz-image-rect") }}.</em></p> + +<h2 id="Resumen">Resumen</h2> + +<p>Para cierto elementos y pseudo-elementos XUL que usan una imagen para la propiedad {{cssxref("list-style-image")}}, esta propiedad especifica la parte de una imagen que es usada en lugar en vez de la imagen completa. Esto permite a los elementos usar diferentes partes de la misma imagen para mejorar el rendimiento.</p> + +<p>La síntaxis es similar a la síntaxis de la propiedad {{cssxref("clip")}}. Los 4 valors son relativos la esquina superior izquierda de la imagen.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush:css">#example-button { + /* muestra sólo el área 4x4 desde la esquina izquierda de esta imagen */ + list-style-image: url("chrome://example/skin/example.png"); + -moz-image-region: rect(0px, 4px, 4px, 0px); +} +#example-button:hover { + /* muestra sólo el área 4x4 a la derecha del primero para cuando pongamos el ratón sobre el botón */ + -moz-image-region: rect(0px, 8px, 4px, 4px); +}</pre> diff --git a/files/es/web/css/-moz-orient/index.html b/files/es/web/css/-moz-orient/index.html new file mode 100644 index 0000000000..171a8e47ef --- /dev/null +++ b/files/es/web/css/-moz-orient/index.html @@ -0,0 +1,156 @@ +--- +title: '-moz-orient' +slug: Web/CSS/-moz-orient +translation_of: Web/CSS/-moz-orient +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>The <code>-moz-orient</code> <a href="/en-US/docs/Web/CSS">CSS</a> especifica la orientación del elemento al que se aplica.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>inline</code></dt> + <dd>El elemento se representa en la misma dirección que el eje del texto : horizontal para los modos de escritura horizontales , verticalmente para los modos de escritura vertical .</dd> + <dt><code>block</code></dt> + <dd>El elemento se representa de forma ortogonal al eje del texto : verticalmente para los modos de escritura horizontal , horizontal para los modos de escritura vertical .</dd> + <dt><code>horizontal</code></dt> + <dd>El elemento se representa horizontalmente.</dd> + <dt><code>vertical</code></dt> + <dd>El elemento se representa verticalmente.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + The following progress meter + is horizontal (the default): +</p> +<progress max="100" value="75"></progress> + +<p> + The following progress meter + is vertical: +</p> +<progress class="vert" max="100" value="75"></progress></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.vert { + -moz-orient: vertical; + width: 16px; + height: 150px; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Examples","200","360")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Aunque <a href="https://lists.w3.org/Archives/Public/www-style/2014Jun/0396.html">somete</a> al W3C , con retroalimentación positiva inicial , esta propiedad no es todavía parte de ninguna especificación ; Actualmente , esto es una extensión de Mozilla-specific (that is, <code>-moz-orient</code>).</p> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>apoyo básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>auto</code> valor</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("21.0")}}<sup>[2]</sup><br> + {{CompatNo}}{{CompatGeckoDesktop(40)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><br> + línea y el valor de bloqueo</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(40)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteísticas</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>apoyo básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("6.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>auto</code> valor</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("21.0")}}<sup>[2]</sup><br> + {{CompatNo}}{{CompatGeckoDesktop(40)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>línea y el valor de bloqueo</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(40)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<p>[1] In Gecko 6.0 {{geckoRelease("6.0")}}, error causado por verticales{{HTMLElement("progress")}} elementos para el procesamiento con las dimensiones de una barra horizontal. Esto se soluciona en Gecko 7.0 { { geckoRelease ( " 7.0 " ) } } .</p> + +<p>[2] El valor auto era equivalente a la horizontal.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{cssxref("box-orient")}}</li> +</ul> diff --git a/files/es/web/css/-moz-outline-radius-bottomleft/index.html b/files/es/web/css/-moz-outline-radius-bottomleft/index.html new file mode 100644 index 0000000000..b5103d501e --- /dev/null +++ b/files/es/web/css/-moz-outline-radius-bottomleft/index.html @@ -0,0 +1,19 @@ +--- +title: '-moz-outline-radius-bottomleft' +slug: Web/CSS/-moz-outline-radius-bottomleft +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-moz-outline-radius-bottomleft +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Summary">Summary</h2> + +<p>La propiedad <a href="/en-US/docs/Web/CSS">CSS </a><code>-moz-outline-radius-bottomleft</code> establece, en aplicaciones Mozilla, el redondeado de la esquina inferior izquierda de un contorno.</p> + +<p>{{cssinfo}}</p> + +<p>Ver la propiedad {{cssxref("-moz-outline-radius")}} para más información.</p> diff --git a/files/es/web/css/-moz-outline-radius-bottomright/index.html b/files/es/web/css/-moz-outline-radius-bottomright/index.html new file mode 100644 index 0000000000..3d40fde4ce --- /dev/null +++ b/files/es/web/css/-moz-outline-radius-bottomright/index.html @@ -0,0 +1,21 @@ +--- +title: '-moz-outline-radius-bottomright' +slug: Web/CSS/-moz-outline-radius-bottomright +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-moz-outline-radius-bottomright +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Summary">Summary</h2> + +<p>La propiedad <a href="/en-US/docs/Web/CSS">CSS </a><code>-moz-outline-radius-bottomright</code> establece, en aplicaciones Mozilla, el redondeado de la esquina inferior derecha de un contorno.</p> + +<p> + </p><p>{{cssinfo}}</p> +<p></p> + +<p>Ver la propiedad {{cssxref("-moz-outline-radius")}} para más información.</p> diff --git a/files/es/web/css/-moz-outline-radius-topleft/index.html b/files/es/web/css/-moz-outline-radius-topleft/index.html new file mode 100644 index 0000000000..045ff93826 --- /dev/null +++ b/files/es/web/css/-moz-outline-radius-topleft/index.html @@ -0,0 +1,19 @@ +--- +title: '-moz-outline-radius-topleft' +slug: Web/CSS/-moz-outline-radius-topleft +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-moz-outline-radius-topleft +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/en-US/docs/Web/CSS">CSS </a><code>-moz-outline-radius-topleft</code> establece, en aplicaciones Mozilla, el redondeado de la esquina superior izquierda de un contorno.</p> + +<p>{{cssinfo}}</p> + +<p>Ver la propiedad {{cssxref("-moz-outline-radius")}} para más información.</p> diff --git a/files/es/web/css/-moz-outline-radius-topright/index.html b/files/es/web/css/-moz-outline-radius-topright/index.html new file mode 100644 index 0000000000..cabb6e97a1 --- /dev/null +++ b/files/es/web/css/-moz-outline-radius-topright/index.html @@ -0,0 +1,19 @@ +--- +title: '-moz-outline-radius-topright' +slug: Web/CSS/-moz-outline-radius-topright +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-moz-outline-radius-topright +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/en-US/docs/Web/CSS">CSS </a><code>-moz-outline-radius-topright</code> establece, en aplicaciones Mozilla, el redondeado de la esquina superior derecha de un contorno.</p> + +<p>{{cssinfo}}</p> + +<p>Ver la propiedad {{cssxref("-moz-outline-radius")}} para más información.</p> diff --git a/files/es/web/css/-moz-outline-radius/index.html b/files/es/web/css/-moz-outline-radius/index.html new file mode 100644 index 0000000000..01370818bb --- /dev/null +++ b/files/es/web/css/-moz-outline-radius/index.html @@ -0,0 +1,158 @@ +--- +title: '-moz-outline-radius' +slug: Web/CSS/-moz-outline-radius +tags: + - CSS + - No estándar(2) + - Referencia CSS +translation_of: Web/CSS/-moz-outline-radius +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>En aplicaciones de Mozilla como Firefox, la propiedad CSS <code>-moz-outline-radius</code> puede ser usada para a los contornos de esquinas redondeadas. Un {{cssxref("outline")}} es una línea que es dibujada alrededor de los elementos, fuera del límite del borde, para hacer que el elemento destaque.</p> + +<p><code>-moz-outline-radius</code> es un atajo para establecer las cuatro propiedades{{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} y {{cssxref("-moz-outline-radius-bottomleft")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Un valor */ +-moz-outline-radius: 25px; + +/* Dos valores */ +-moz-outline-radius: 25px 1em; + +/* Tres valores */ +-moz-outline-radius: 25px 1em 12%; + +/* Cuator valores */ +-moz-outline-radius: 25px 1em 12% 4mm; + +/* valores globales */ +-moz-outline-radius: inherit; +-moz-outline-radius: initial; +-moz-outline-radius: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<div class="note">Los contornos elípticos y los valores <code><porcentaje></code> se expresan de acuerdo a la síntaxis descrita en {{cssxref("border-radius")}}.</div> + +<p>Uno, dos,tres o cuatro valores <code><outline-radius></code> , representan uno de los siguientes casos:</p> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>Ver {{cssxref("<length>")}} para ver los posibles valores.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Un {{cssxref("<percentage>")}}; ver {{cssxref("border-radius")}} para más detalles.</dd> +</dl> + +<ul> + <li>Si se establece un único valor se aplica a las cuatro esquinas-</li> + <li>Si se establecen dos valores, el primero se aplica a la esquina superior-izquierda e inferior-derecha y el segundo a las esquinas superior-derecha e inferior-izquierda</li> + <li>Si se establecen tres valores el primero se aplica a la esquina superior-izquierda, el segundo a las esquinas superior-derecha e inferior-izquierda y el tercero a la esquina inferior-derecha.</li> + <li>Si se establecen cautro valores el primero se aplica a la esquina superior-izquierda, el segundo a la esquina superior-derecha, el tercero la esquina inferior-derecha y el cuarto a la esquina inferior-izquierda.</li> +</ul> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><style> +p { +border: 1px solid black; <code class="language-css"><span class="property token"> +outline</span><span class="punctuation token">:</span> dotted red<span class="punctuation token">;</span> <span class="property token">-moz-outline-radius</span><span class="punctuation token">:</span> <span class="number token">12%</span> <span class="number token">1</span>em <span class="number token">25</span>px<span class="punctuation token">;</span></code> +} +</style> </head> + +<body> <p>La propiedad outline-style usando <code class="language-css"><span class="property token">-moz-outline-radius</span></code></p> </body> + +<head> <style> +p1 { +border: 1px solid black; <code class="language-css"><span class="property token">outline</span><span class="punctuation token">:</span> dotted red<span class="punctuation token">; </span></code><code class="language-css"><span class="property token"> +-moz-outline-radius-topleft</span><span class="punctuation token">:</span> <span class="number token">12%</span><span class="punctuation token">;</span> <span class="property token"> +-moz-outline-radius-topright</span><span class="punctuation token">:</span> <span class="number token">1</span>em<span class="punctuation token">;</span> <span class="property token"> +-moz-outline-radius-bottomright</span><span class="punctuation token">:</span> <span class="number token">35</span>px<span class="punctuation token">;</span> <span class="property token"> +-moz-outline-radius-bottomleft</span><span class="punctuation token">:</span> <span class="number token">1</span>em<span class="punctuation token">;</span></code> } +</style> </head> + +<body> <p1>La propiedad outline-style usando un <code class="language-css"><span class="property token">-moz-outline-radius-xxx más complicado</span></code></p1> </body> +</pre> + +<h3 id="Result"><strong>Result</strong></h3> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/-moz-outline-radius') }}</p> + +<h2 id="Notas">Notas</h2> + +<ul> + <li><code>Las esquinas con radio dotted</code> o <code>dashed</code> se muestran como solid, {{bug("382721")}}</li> + <li>Existe la posibilidad de que futuras versiones del motor Gecko/Firefox eliminen esta propiedad completamente. Ver {{bug("593717")}}.</li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Esta propiedad no se define es ningún estándar CSS.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("1.8")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/-moz-stack-sizing/index.html b/files/es/web/css/-moz-stack-sizing/index.html new file mode 100644 index 0000000000..639c05d4a5 --- /dev/null +++ b/files/es/web/css/-moz-stack-sizing/index.html @@ -0,0 +1,57 @@ +--- +title: '-moz-stack-sizing' +slug: Web/CSS/-moz-stack-sizing +tags: + - CSS + - No estandar + - Referencia CSS + - XUL +translation_of: Archive/Web/CSS/-moz-stack-sizing +--- +<p>{{Non-standard_header}}{{CSSRef}} {{gecko_minversion_header("1.9.1")}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p><code>-moz-stack-sizing</code> es una propiedad de CSS extendido. Normalmente, una {{XULElem("stack")}} cambiará su tamaño para que todos los elementos hijo sean completamente visibles. Por ejemplo, al mover un hijo de la pila lo suficientemente a la derecha anchará la plia para que el hijo permanezca visible.</p> + +<p>Si quieres evitar que la pila cambie de tamaño automáticamente puedes establecer <code>-moz-stack-sizing</code> a <code>ignore</code> en el hijo. La propiedad no se estable en la misma pila si no que se establece en los hijos de la pila. Esto permite ignorar a ciertos elementos hijos pero no a otros.</p> + +<p class="note"><strong>Nota:</strong> En versiones anteriores de Gecko era posible solucionar el problema estableciendo un valor negativo muy grande como margen derecho e inferior para la pila y de igual manera unos márgenes inferior y derecho con grandes valores positivos para los hijos cuyo tamaño no quería ignorar. (El problema no afecta los hijos que se muevan en la parte inferior o izquierda de la pila.)</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Palabras clave de los valores */ +-moz-stack-sizing: stretch-to-fit; +-moz-stack-sizing: ignore; + +/* valores gloables */ +-moz-stack-sizing: inherit; +-moz-stack-sizing: initial; +-moz-stack-sizing: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>stretch-to-fit</dt> + <dd>El hijo influirá en el tamaño de la pila.</dd> + <dt>ignore</dt> + <dd>La pila no tendrá en cuenta el hijo al calcular su tamaño..</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush:css">.mainsheet { + -moz-stack-sizing: ignore; +} +</pre> + +<h2 id="Ver_además">Ver además</h2> + +<p>{{bug("346189")}}</p> diff --git a/files/es/web/css/-moz-text-blink/index.html b/files/es/web/css/-moz-text-blink/index.html new file mode 100644 index 0000000000..95f6961609 --- /dev/null +++ b/files/es/web/css/-moz-text-blink/index.html @@ -0,0 +1,95 @@ +--- +title: '-moz-text-blink' +slug: Web/CSS/-moz-text-blink +tags: + - CSS + - 'CSS:Entensiones de Mozilla' + - Referencia CSS +translation_of: Archive/Web/CSS/-moz-text-blink +--- +<div>{{CSSRef}} {{non-standard_header}}{{deprecated_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La extensión de Mozilla no estándar <code>-moz-text-blink</code> especifica si se establece el modo parpadeo.</p> + +<div class="note"> +<p>Firefox, que era el único de entre los navegadores más conocidos que lo soportaba, dejó de soportarla a partir de la versión 26. Esta propiedad no es soportadoa por ningún navegador en la actualizad.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>none</dt> + <dd>No produce parpadeo</dd> + <dt>blink</dt> + <dd>El texto parpade. Destacar que el hecho de que el texto no parpadee es una técnica para satisfacer <a href="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text" rel="external nofollow" title="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">checkpoint 3.3 of WAI-UAAG</a>.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush:css">.example { + -moz-text-blink: blink; +}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Esta propiedad fue definida en un <a href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-blink">antiguo borrador de la especificación CSS 3 </a>. La versiones nuevas eliminaron esta definición.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatGeckoDesktop("6.0")}}<br> + Removed in {{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatGeckoMobile("6.0")}}<br> + Removed in {{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/-moz-user-focus/index.html b/files/es/web/css/-moz-user-focus/index.html new file mode 100644 index 0000000000..f945c3e64b --- /dev/null +++ b/files/es/web/css/-moz-user-focus/index.html @@ -0,0 +1,113 @@ +--- +title: '-moz-user-focus' +slug: Web/CSS/-moz-user-focus +tags: + - CSS + - 'CSS:Extensiones Mozilla' + - Referencia CSS +translation_of: Web/CSS/-moz-user-focus +--- +<div>{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS </a><code>-moz-user-focus</code>se usa para indicar si el elemento puedo obtener el foco.</p> + +<p>Al poner el valor de esta propiedad a <code>ignore</code>, deshabilitas el hecho de que el elemento pueda obtener el foco lo que significa que el usuario no podrá activar el elemento. Se saltará el elemento es un secuncia de tabuladores.</p> + +<p>{{cssinfo}}</p> + +<div class="note"><strong>Nota:</strong> Esta propiedad no funciona con los elementos XUL {{XULElem("textbox")}} , porque el <code>textbox</code> en sí mismo nunca tomará el foco. En su lugar , XBL crea un elemento HTML {{HTMLElement("input")}} anónimo dentro del <code>textbox</code>, y es ese elemento el que recibe el foco. Se puede evitar que el <code>textbox</code> obtenga el foco de teclado estableciendo su índice de tabulación a <code>-1</code>, y que obtenga el foco del ratón evitando la acción por defecto para los eventos <code>mousedown</code>.</div> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Palabras clave de valores */ +-moz-user-focus: normal; +-moz-user-focus: ignore; + +/* Valores gloables */ +-moz-user-focus: inherit; +-moz-user-focus: initial; +-moz-user-focus: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>ignore</code></dt> + <dd>El elemento no aceptará el foco y será saltado en el orden de tabulación.</dd> + <dt><code>normal</code></dt> + <dd>El elemento puedeo aceptar el foco del teclado.</dd> + <dt><code>select-after</code></dt> + <dd>?</dd> + <dt><code>select-before</code></dt> + <dd>?</dd> + <dt><code>select-menu</code></dt> + <dd>?</dd> + <dt><code>select-same</code></dt> + <dd>?</dd> + <dt><code>select-all</code></dt> + <dd>?</dd> + <dt><code>none</code></dt> + <dd>?</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Esta propiedad no es parte de ninguna especificación. Una propiedad similar <code>user-focus</code> fue propuesta en <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">borradores previos de la especificación CSS 3 UI</a> pero finalmente fué rechazada por el grupo de trabajo.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/-moz-user-input/index.html b/files/es/web/css/-moz-user-input/index.html new file mode 100644 index 0000000000..f94b13f1b3 --- /dev/null +++ b/files/es/web/css/-moz-user-input/index.html @@ -0,0 +1,64 @@ +--- +title: '-moz-user-input' +slug: Web/CSS/-moz-user-input +tags: + - CSS + - No estandar + - Referencia CSS +translation_of: Web/CSS/-moz-user-input +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>En las aplicaciones Mozilla , <code>-moz-user-input</code> determina si un elemento aceptará entrada por parte del usuario. <code>user-focus, </code>una propiedad similar fue propuesta en <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">primeros borradores de un predecesor de la especificación CSS3 UI</a> pero fue rechazada posteriormente por el grupo de trabajo..</p> + +<p>{{cssinfo}}</p> + +<p><code>-moz-user-input</code> fue was one of the proposals leading to the proposed CSS 3 {{cssxref("user-input")}} property, which has not yet reached Candidate Recommendation (call for implementations).</p> + +<p>Para elementos que normalmente son receptores de entrada por parte del usuario, como {{HTMLElement("textarea")}}, el valor inicial de <code>-moz-user-input</code> es <code>enabled</code>.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Palabras clave valor */ +-moz-user-input: none; +-moz-user-input: enabled; +-moz-user-input: disabled; + +/* Valores gloables */ +-moz-user-input: inherit; +-moz-user-input: initial; +-moz-user-input: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>none</dt> + <dd>El elemento no responde a la entrada de datos por parte del usuario y no estará {{Cssxref(":active")}}.</dd> + <dt>enabled</dt> + <dd>El elemento acepta entrada por parte del usuario. Para cajas de texto es el comportamiento por defecto.</dd> + <dt>disabled</dt> + <dd>El elemento no acepta datos del usuario. Sin embargo, no es lo mismo que establecer {{XULAttr("disabled")}} a true, en ese caso el elemento es dibujado normalmente.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush:css">input.example { + /* the user will be able to select the text, but not change it. */ + -moz-user-input: disabled; +} +</pre> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref("-moz-user-focus")}}</li> + <li>{{cssxref("-moz-user-modify")}}</li> + <li>{{cssxref("-moz-user-select")}}</li> +</ul> diff --git a/files/es/web/css/-moz-user-modify/index.html b/files/es/web/css/-moz-user-modify/index.html new file mode 100644 index 0000000000..21b9593d93 --- /dev/null +++ b/files/es/web/css/-moz-user-modify/index.html @@ -0,0 +1,132 @@ +--- +title: '-moz-user-modify' +slug: Web/CSS/-moz-user-modify +tags: + - CSS + - No estándar(2) + - Referencia CSS +translation_of: Web/CSS/user-modify +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <code>-moz-user-modify</code> determina si el contenido de un elemento puede ser editado por el usuario. Se relaciona con el atributo {{htmlattrxref("contenteditable")}} . <code>user-focus</code> , que es una propiedad similar, fue propuesta como parte de los <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">borradores iniciales de un predecesor de la especificación CSS3 UI</a> ,pero fue rechazada por el grupo de trabajo.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Palabras clave valor */ +-moz-user-modify: read-only; +-moz-user-modify: read-write; +-moz-user-modify: write-only; + +/* Valores globales */ +-moz-user-modify: inherit; +-moz-user-modify: initial; +-moz-user-modify: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>read-only</dt> + <dd>Valor por defecto. El contenido sólo se puede leer.</dd> + <dt>read-write</dt> + <dd>El usuario puede leer y escribir contenidos.</dd> + <dt>write-only</dt> + <dd>El usuario puede editar el contenido pero no leerlo.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">.readwrite { + -moz-user-modify: read-write; + -webkit-user-modify: read-write; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><div class="readwrite">El usuario puede cambiar este texto.</div> +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", 300, 30)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p><code>user-modify</code> en <a class="external" href="http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-modify" lang="en">una versión inicial de la especificación CSS 3 UI</a> (Borrador de trabajo Febrero del 2000, Working Draft February 2000 que ya ha sido reeemplazado por <em>CSS 3 UI</em>)</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}} {{property_prefix("-moz")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>3.0 {{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] También soporta: <code>-webkit-user-modify: read-write-plaintext-only</code> (Se perderá el texto enriquecido).<br> + Esta propiedad se llamó <code>-khtml-user-modify</code> en Safari 2.0.</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref("-moz-user-focus")}}</li> + <li>{{cssxref("-moz-user-input")}}</li> + <li>{{cssxref("-moz-user-select")}}</li> +</ul> diff --git a/files/es/web/css/-moz-window-shadow/index.html b/files/es/web/css/-moz-window-shadow/index.html new file mode 100644 index 0000000000..fb2d15bdf0 --- /dev/null +++ b/files/es/web/css/-moz-window-shadow/index.html @@ -0,0 +1,52 @@ +--- +title: '-moz-window-shadow' +slug: Web/CSS/-moz-window-shadow +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia + - XUL +translation_of: Archive/Web/CSS/-moz-window-shadow +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS </a><code>-moz-window-shadow</code> especifica si una ventana tendrá sombra. Sólo funciona en Mac OS X.</p> + +<div class="note"> +<p>Esta propiedad no estándar y a partir de Firefox 44 no puede ser usada más en sitios Web.</p> +</div> + +<p>{{cssinfo}}</p> + +<p>Firefox 3 añadió el soporte para ventanas transparentes en Mac OS X. Sin embargo, para este tipo de ventanas, se quitaron las sombras y no había manera de habilitarlas.</p> + +<p>En Firefox 3.5 cambiamos el comportamiento por defecto; todas las ventanas tienen ahora sombra. Introducimos la propiedad CSS <code>-moz-window-shadow</code> para proporcionar una manera de quitar las sombras no deseadas.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>default</dt> + <dd>La ventana tendrá sombra con el estilo por defecto de la ventana.</dd> + <dt>menu {{gecko_minversion_inline("2.0")}}</dt> + <dd>La ventana tendrá el estilo de sombra que es apropiado para los menús.</dd> + <dt>tooltip {{gecko_minversion_inline("2.0")}}</dt> + <dd>La ventana tendrá el estilo de sombra que es apropiado para las herramientas.</dd> + <dt>sheet {{gecko_minversion_inline("2.0")}}</dt> + <dd>La ventana tendrá el estilo de sombra que es apropiado para las ventanas de datos</dd> + <dt>none</dt> + <dd>La ventana no tendrá sombra.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush:css">.KUI-panel { + -moz-window-shadow: none; +} +</pre> diff --git a/files/es/web/css/-ms-accelerator/index.html b/files/es/web/css/-ms-accelerator/index.html new file mode 100644 index 0000000000..33f1a38f9e --- /dev/null +++ b/files/es/web/css/-ms-accelerator/index.html @@ -0,0 +1,75 @@ +--- +title: '-ms-accelerator' +slug: Web/CSS/-ms-accelerator +tags: + - CSS + - Non-standard + - Propiedad CSS + - Referencia +translation_of: Archive/Web/CSS/-ms-accelerator +--- +<div>{{CSSRef}}</div> + +<div>{{non-standard_header}}</div> + +<p>La propiedad CSS <strong><code>-ms-accelerator</code></strong> es una <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">esxtensión Microsoft</a> que establece o recupera una cadena que indica si el objeto representa un método abreviado de teclado.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="brush: css">/* El objeto no es un atajo de teclado (por defecto) */ +-ms-accelerator: false +/* El objeto es un atajo de teclado */ +-ms-accelerator: true +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>false</code></dt> + <dd> + <p>El objeto no es un atajo de teclado</p> + </dd> + <dt><code>true</code></dt> + <dd> + <p>El objeto es un atajo de teclado</p> + </dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<p>Este ejemplo usa el atributo <code>-ms-accelerator</code> en un elemento {{HTMLElement("u")}} para especificar que la "N" en el elemento {{HTMLElement("label")}} es un atajo de teclado. Cuando la opción de "Ocultar los indicadores de navegación del teclado hasta que use la tecla Alt" está habilitada en las propiedades de pantalla del usuario la "N" no estará subrayada hasta que el usuario presione la tecla <kbd>Alt</kbd> . Cuando <kbd>Alt</kbd> + <kbd>N</kbd> son presionadas,el elemento {{HTMLElement("input")}} que define un atributo {{htmlattrxref("accessKey","input")}} valor de atributo de "N" recibe el foco.</p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + <head> + <title>Acelerador</title> + </head> + <body> + <label for="oName"><u style="-ms-accelerator: true; accelerator: true">N</u>ame: </label> + <input type="text" + id="oName" + size="25" + accesskey="N" + value="Your name here" /> + </body> +</html><strong> +</strong></pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<h2 id="Remarks" name="Remarks">Observaciones</h2> + +<p>Esta propiedad está soportada por Windows 2000 y versiones posteriores. permite a los usuarios ocultar los indicadores de navegación para los elementos del menú y los controles hasta que se presiona la tecla <kbd>Alt</kbd></p> + +<p>Una clave de acceso es un solo carácter que se utiliza como método abreviado de teclado para seleccionar un objeto. El usuario presiona la tecla <kbd>Alt</kbd> y la mantiene presionada mientras presiona el carácter para mover el enfoque de entrada al objeto e invocar el evento predeterminado asociado con el objeto.</p> + +<p>En Internet Explorer 8 (IE8) el atributo <code>-ms-accelerator</code> es una extensión de CSS, y se puede usar como un sinónimo para <code>accelerator</code><strong> </strong>en el modo estándar de IE8.</p> diff --git a/files/es/web/css/-ms-overflow-style/index.html b/files/es/web/css/-ms-overflow-style/index.html new file mode 100644 index 0000000000..8e2295067a --- /dev/null +++ b/files/es/web/css/-ms-overflow-style/index.html @@ -0,0 +1,40 @@ +--- +title: '-ms-overflow-style' +slug: Web/CSS/-ms-overflow-style +tags: + - CSS + - No estándar(2) + - Propiedad + - Propiedad CSS + - Referencia + - Referencia CSS +translation_of: Archive/Web/CSS/-ms-overflow-style +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p><strong><code>-ms-overflow-style</code></strong> es una propiedad CSS propietaria, específica de Internet Explorer y Microsoft Edge, que controla el compartamiento de la barra de desplazamiento (scroll) cuando el contenido de un elemento se desborda.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt><code>auto</code></dt> + <dd>Valor inicial. Lo mismo que <code>inherit</code>.</dd> + <dt><code>none</code></dt> + <dd>La barras de desplazamiento (Scrollbars) no son nuncas mostradas, aunque se puede hacer el scroll sobre el elemento si el contenido lo desoborda.</dd> + <dt><code>scrollbar</code></dt> + <dd>Las barras de desplazamiento(sroll) "Tradicionales" se muestran si el contenido desborda el elemento. Estas barras no se auto ocultan ni se solapan con el contenido del elemento. Por consiguente, las dimensiones del aréa de contenido son reducidas en una cantidad igual al tamaño de las barras de desplazamiento.</dd> + <dt><code>-ms-autohiding-scrollbar</code></dt> + <dd>Se muestran barras de desplazamiento que se auto ocultan si el contenido desborda el elemento. Estas barras se muestran mientras se hace el desplzamiento o scroll y brevemente después de realizar el desplazamiento y cuando la interacción ha terminado se ocultan. Mientras estén visibles se supeponen al contenido del elemento..</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Especificciones">Especificciones</h2> + +<p>No es parte de ninguna especificación. Microsoft tiene una <a href="https://msdn.microsoft.com/es/library/windows/apps/hh441298.aspx">descripción suya en MSDN.</a></p> diff --git a/files/es/web/css/-webkit-border-before/index.html b/files/es/web/css/-webkit-border-before/index.html new file mode 100644 index 0000000000..444337ac10 --- /dev/null +++ b/files/es/web/css/-webkit-border-before/index.html @@ -0,0 +1,137 @@ +--- +title: '-webkit-border-before' +slug: Web/CSS/-webkit-border-before +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-webkit-border-before +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS </a><strong><code>-webkit-border-before</code></strong> es una propiedad que permite configurar los valores de la propiedad borde para el bloque lógico de inicio en un sólo sitio de la hoja de estilos. <code>-webkit-border-before</code> se puede usar para establecer los valores para más de uno de: {{cssxref("-webkit-border-before-width")}}, {{cssxref("-webkit-border-before-style")}}, y {{cssxref("-webkit-border-before-color")}}. Se mapea a un borde físico dependiendo del modo de escritura del elemento, la direccionalidad y la orientación del texto. Se corresonde con la propiedad {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos en {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<p>Se relaciona con {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-start")}}, y {{cssxref("-webkit-border-end")}}, que definen los otros bordes del elemento.</p> + +<p>Esta propiedad se prevee que será incluida en el estándar como {{cssxref("border-block-start")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Valores para el borde */ +-webkit-border-before: 1px; +-webkit-border-before: 2px dotted; +-webkit-border-before: medium dashed blue; + +/* Valores globales */ +-webkit-border-before: inherit; +-webkit-border-before: initial; +-webkit-border-before: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>Uno o más de los siguiente valores, dando igual el orden en el que se especifiquen:</p> + +<dl> + <dt><code><'border-width'></code></dt> + <dd>Ver {{cssxref("border-width")}}</dd> + <dt><code><'border-style'></code></dt> + <dd>Ver {{cssxref("border-style")}}</dd> + <dt><code><'color'></code></dt> + <dd>Ver {{cssxref("color")}}</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Texto de ejemplo</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + -webkit-border-before: 5px dashed blue; +}</pre> + +<p>{{EmbedLiveSample("Example", 140, 140)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación aunque está relacionada con la propiedad {{cssxref("border-block-start")}}.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores.">Compatibilidad con los distintos navegadores.</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref("border-block-start")}}</li> + <li>Las propiedad físicas mapeadas: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, y{{cssxref("border-left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/-webkit-box-reflect/index.html b/files/es/web/css/-webkit-box-reflect/index.html new file mode 100644 index 0000000000..ca3fde311e --- /dev/null +++ b/files/es/web/css/-webkit-box-reflect/index.html @@ -0,0 +1,116 @@ +--- +title: '-webkit-box-reflect' +slug: Web/CSS/-webkit-box-reflect +tags: + - CSS + - No estándar(2) + - Propiedad + - Referencia +translation_of: Web/CSS/-webkit-box-reflect +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p><code>La propiedad </code><a href="/es/docs/Web/CSS">CSS </a><code>-webkit-box-reflect</code> peermite reflejar el contenido del elemento en una dirección específica.</p> + +<div class="warning"><strong>Nota:</strong> Esta característica <strong>no está pensada para ser usada en páginas Web</strong> .Para conseguir reflexión en la Web, la forma estándar es usando la función CSS {{cssxref("element", "element()")}} .</div> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Valores para la dirección */ +-webkit-box-reflect: above; +-webkit-box-reflect: below; +-webkit-box-reflect: left; +-webkit-box-reflect: right; + +/* Valor del desplazamiento */ +-webkit-box-reflect: below 10px; + +/* Valor de máscara */ +-webkit-box-reflect: below 0 linear-gradient(transparent, white); + +/* Valores globales */ +-webkit-box-reflect: inherit; +-webkit-box-reflect: initial; +-webkit-box-reflect: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>above</code><em>, </em><code>below</code><em>, </em><code>right</code><em>, </em><code>left</code></dt> + <dd>Son palabras clave que indican en qué dirección se realiza la reflexión.</dd> + <dt><code><length></code></dt> + <dd>Indica el tamaño de la reflexión.</dd> + <dt><code><image></code></dt> + <dd>Describe la máscara que se aplicará a la reflexión.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Esta propiedad no está entre los objetivos de la especificación estándar y no será parte de CSS. La manera estándar para conseguir reflexión en CSS es el uso de la función {{cssxref("element", "element()")}}.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("4.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("15.0")}}</td> + <td>{{CompatSafari("4.0")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatAndroid("2.1")}}</td> + <td>{{CompatNo}}</td> + <td>22.0 {{CompatVersionUnknown}}</td> + <td>3.2 {{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>La <a class="external" href="http://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16" title="http://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16">documentación</a> de Apple.</li> + <li>La <a href="https://www.webkit.org/blog/182/css-reflections/">especificación </a> de Webkit.</li> + <li>El artículo de Lea Verou sobre reflexión usando <a class="external" href="http://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/" title="http://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/">característica CSS que están en el estándar</a>.</li> +</ul> diff --git a/files/es/web/css/-webkit-mask-attachment/index.html b/files/es/web/css/-webkit-mask-attachment/index.html new file mode 100644 index 0000000000..50309f5376 --- /dev/null +++ b/files/es/web/css/-webkit-mask-attachment/index.html @@ -0,0 +1,95 @@ +--- +title: '-webkit-mask-attachment' +slug: Web/CSS/-webkit-mask-attachment +tags: + - CSS + - Diseño + - Referencia + - Web +translation_of: Web/CSS/-webkit-mask-attachment +--- +<p>{{ CSSRef() }}</p> + +<p>{{ Non-standard_header() }}</p> + +<p id="Summary">Si se ha especificado una {{ Cssxref("-webkit-mask-image") }} , <code>-webkit-mask-attachment</code> determina si la posición de la imagen de la máscara es fija dentro de la ventana (viewport) , o se desplaza a lo largo del bloque que la contiene.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt>scroll</dt> + <dd>Si se ha especifiacod <code>scroll</code> , la imagen de máscara se desplaza dentro de la ventana (viewport) junto con el bloque que contiene la máscara de imagen.</dd> + <dt>fixed</dt> + <dd>Si se ha especificado el valor <code>fixed</code> , la imagen de máscara no se desplaza junto con el elemento que la contienen, en vez de eso permanece es una posición fija dentro de la ventana (viewport).</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">body { + -webkit-mask-image: url('images/mask.png'); + -webkit-mask-attachment: fixed; +} +</pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad con los distintos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatNo() }} [1]</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Se ha dejado de dar soporte desde Chrome 24.</p> + +<h2 id="Ver_además">Ver además</h2> + +<p>{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-clip") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}</p> diff --git a/files/es/web/css/-webkit-mask-box-image/index.html b/files/es/web/css/-webkit-mask-box-image/index.html new file mode 100644 index 0000000000..6ba9930377 --- /dev/null +++ b/files/es/web/css/-webkit-mask-box-image/index.html @@ -0,0 +1,130 @@ +--- +title: '-webkit-mask-box-image' +slug: Web/CSS/-webkit-mask-box-image +tags: + - CSS + - Diseño + - Referencia + - Web +translation_of: Web/CSS/-webkit-mask-box-image +--- +<p>{{ CSSRef() }}</p> + +<p>{{ Non-standard_header() }}</p> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p><code>-webkit-mask-box-image</code> establece la imagen de máscara para la caja del borde de un elemento.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: none</li> + <li>Se aplica a : Todos los elementos</li> + <li>{{ Xref_cssinherited() }}: no</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: tal y como se especfica</li> +</ul> + +<h2 id="Syntax" name="Syntax">Síntaxis</h2> + +<pre class="eval">-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] +</pre> + +<p>Where:</p> + +<dl> + <dt><mask-box-image></dt> + <dd><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">{{cssxref("<uri>")}} | <gradient> | none</code></dd> + <dt><top> <right> <bottom> <left></dt> + <dd><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;"><length> | <percentage></code></dd> + <dt><x-repeat> <y-repeat></dt> + <dd><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">repeat | stretch | round</code></dd> +</dl> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><uri></dt> + <dd>La localización del recurso imagen que será usada como imagen de máscara..</dd> + <dt style="font-style: normal; font-weight: bold;"><gradient></dt> + <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">La función <span style="font-family: courier new;">-webkit-gradient</span> que se usará como imagen de máscara.</dd> + <dt>none</dt> + <dd>Para especificar que la caja del borde no va a tener imagen de máscara.</dd> +</dl> + +<dl> + <dt><length></dt> + <dd>El tamaño del desplazamiento de la imagen de máscara. Ver {{cssxref("<length>")}} para posibles unidades.</dd> + <dt><percentage></dt> + <dd>El desplazamiento de la imagen de máscara tiene un valor que se corresponde con un porcentaje de la dimensiones (altura y anchura) del tamaño de la caja del borde.</dd> + <dt style="font-style: normal; font-weight: bold;">repeat</dt> + <dd>La imagen de máscara se repite tanta veces como sean necesarios para cubrir la caja. Puede incluir una imagen parcial si no existe una división exacta con el tamaño de la caja.</dd> + <dt>stretch</dt> + <dd>La imagen de máscara se encoge para contener la caja del borde exactamente.</dd> + <dt>round</dt> + <dd> Se encoge y repite de tal manera que no existan partes de la imagen de máscara al final de la caja.</dd> +</dl> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<pre class="brush: css">.exampleone { + -webkit-mask-box-image: url('mask.png'); +} + +.exampletwo { + -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round; +} +</pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad con los distintos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>2.1</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<p>{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-clip") }},{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}</p> diff --git a/files/es/web/css/-webkit-mask-clip/index.html b/files/es/web/css/-webkit-mask-clip/index.html new file mode 100644 index 0000000000..02a522733f --- /dev/null +++ b/files/es/web/css/-webkit-mask-clip/index.html @@ -0,0 +1,101 @@ +--- +title: '-webkit-mask-clip' +slug: Web/CSS/-webkit-mask-clip +tags: + - CSS +translation_of: Web/CSS/mask-clip +--- +<p>{{ CSSRef() }}</p> + +<p>{{ Non-standard_header() }}</p> + +<p>Si se especificado {{ Cssxref("-webkit-mask-image") }} , <code style="font-size: 14px; font-style: normal; line-height: 1.5;">-webkit-mask-clip</code> determina el comportamiento de recorte (clipping) de la imagen de máscara.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<p>donde:</p> + +<dl> + <dt><clip-style></dt> + <dd><code>border | padding | content | text</code></dd> +</dl> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt>border</dt> + <dd><code><font face="Open Sans, Arial, sans-serif">Si se ha especificado </font>border</code> , la máscara de imagen se extiende hasta el borde del elemento.</dd> + <dt>padding</dt> + <dd>Si se ha especificado <code>padding</code> , la imagen de máscara de extiendo hasta el padding (relleno) del elemento.</dd> + <dt>content</dt> + <dd>Si se ha espeficiado c<code>ontent</code> , la imagen de máscara se recorta al tamaño del contenido del elemento.</dd> + <dt>text</dt> + <dd>Si se ha especificado <code>text</code> , la imagen de máscara de recorta al tamaño del texto del elemento.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: css">div { + -webkit-mask-image: url('images/mask.png'); + -webkit-mask-clip: padding; +} +</pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad con los distintos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>2.1</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<p>{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}</p> diff --git a/files/es/web/css/-webkit-mask-composite/index.html b/files/es/web/css/-webkit-mask-composite/index.html new file mode 100644 index 0000000000..c8a3666fee --- /dev/null +++ b/files/es/web/css/-webkit-mask-composite/index.html @@ -0,0 +1,121 @@ +--- +title: '-webkit-mask-composite' +slug: Web/CSS/-webkit-mask-composite +tags: + - CSS +translation_of: Web/CSS/-webkit-mask-composite +--- +<p>{{ CSSRef() }}</p> + +<p>{{ Non-standard_header() }}</p> + +<p>La propiedad <code style="font-size: 14px; font-style: normal; line-height: 1.5;">-webkit-mask-composite</code> especifica la forma en la que múltiples imágenes de máscara son compuestas para ser aplicadas al mismo elemento. Son compuestas en el orden en el que son declaradas en la propiedad {{ Cssxref("-webkit-mask-image") }}.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: source-over</li> + <li>Se aplica a : todos los elementos</li> + <li>{{ Xref_cssinherited() }}: no</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: tal y como se especifica.</li> +</ul> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="eval">-webkit-mask-composite: <composite-style>[, <composite-style>]* +</pre> + +<p>Donde:</p> + +<dl> + <dt><composite-style></dt> + <dd><code>clear | copy | source-over | source-in | source-out | source-atop | destination-over | destination-in | destination-out | destination-atop | xor</code></dd> +</dl> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt>clear</dt> + <dd>Los píxeles coincidentes en la imagen origen y destino son borrados.</dd> + <dt>copy</dt> + <dd>La imagen de máscara origen reemplaza la imagen de máscara destino.</dd> + <dt>source-over</dt> + <dd>La imagen de máscara origen se dibuja sobre la imagen de máscara destino.</dd> + <dt>source-in</dt> + <dd>Los píxeles coincidentes en las imágenes de máscara origen y destino son reemplazados por los píxeles de la imagen origen; los demás son borrados.</dd> + <dt>source-out</dt> + <dd>Los píxeles coincidentes en las imágenes de máscara origen y destino son borrados; todos los demás píxeles de la imagen de máscara origen son dibujados.</dd> + <dt>source-atop</dt> + <dd>Se dibujan los píxeles de la imagen de máscara destino. Los de la imagen de máscara destino sólo son dibujados si están sobre una parte no transparente de la imagen de máscara destino. Esto provoca que la imagen de máscara origen no tengo efecto alguno.</dd> + <dt>destination-over</dt> + <dd>Se dibuja la imagen de máscara destino sobre la de origen.</dd> + <dt>destination-in</dt> + <dd>Los píxeles coincidentes en las imágenes de máscara origen y destino permanecen; los demás son borrados.</dd> + <dt>destination-out</dt> + <dd>Los píxeles coincidentes en las imágenes de máscara origen y destino se borran; se dibuja todos los demás píxeles de la imagen de máscara origen.</dd> + <dt>destination-atop</dt> + <dd>Se dibujan Los píxeles de la imagen de máscara origen. Los de la imagen de máscara destino sólo se dibujaran si coinciden con una parte no transparente de la imagen de máscara destino. Esto provoca que la imagen de máscara destino no tenga efecto.</dd> + <dt>xor</dt> + <dd>Los píxeles coincidentes en las imágenes de máscara origen y destino se convierten en totalmente transparentes y ambos con totalmente opacos.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">.example { + -webkit-mask-image: url(mask1.png), url('mask2.png'); + -webkit-mask-composite: xor, source-over; +} +</pre> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>2.1</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<p>{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-clip") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-image") }}</p> diff --git a/files/es/web/css/-webkit-mask-image/index.html b/files/es/web/css/-webkit-mask-image/index.html new file mode 100644 index 0000000000..17fc6d5e1e --- /dev/null +++ b/files/es/web/css/-webkit-mask-image/index.html @@ -0,0 +1,156 @@ +--- +title: '-webkit-mask-image' +slug: Web/CSS/-webkit-mask-image +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/mask-image +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p><code><font face="Open Sans, Arial, sans-serif">La propiedad CSS </font>-webkit-mask-image</code> establece la imagen de máscara para un elemento. Una imagen de máscara fija que partes del elemento serán visibles de acuerdo a la transparencia de la imagen de máscara.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">-webkit-mask-image: url(images/mymask.png); +-webkit-mask-image: url(images/foo.png), url(images/bar.png); +-webkit-mask-image: none; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><uri></dt> + <dd>La localización del recurso imagen que será utilizado como imagen de máscara.</dd> + <dt><gradient></dt> + <dd>La función <code>webkit-gradient</code> que será usada como imagen de máscara.</dd> + <dt>none</dt> + <dd>Usado para especificar si un elemento no tiene imagen de máscara.</dd> +</dl> + +<h3 id="Sintaxis_Formal">Sintaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">body { + -webkit-mask-image: url('images/mymask.png'); +} + +div { + -webkit-mask-image: url('images/foo.png'), url('images/bar.png'); +} + +p { + -webkit-mask-image: none; +} +</pre> + +<p>Si se especifican varias imágenes, la región visible que sale como resultado es la combinación de las regiones visibles de cada máscara individual.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores.">Compatibilidad con los distintos navegadores.</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + <tr> + <td>Múltiples imágenes de máscara</td> + <td>{{CompatNo}}</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + <tr> + <td>Gradientes</td> + <td>{{CompatNo}}</td> + <td>1.0{{property_prefix("-webkit")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>Máscaras SVG</td> + <td>{{CompatNo}}</td> + <td>8.0<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>iOS Safari</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Android Browser</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>3.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>2.1</td> + </tr> + <tr> + <td>Múltiples imágenes de máscara</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Gradientes</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>Máscaras SVG</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Desde la versión 1.9.1 {{geckoRelease("1.9.1")}} Gecko soporta <a href="/es/docs/Applying_SVG_effects_to_HTML_content#Example_Masking">Efectos de filtro SVG</a>, que se pueden usar para aplicar máscaras a contenido HTML.</p> + +<h2 id="Ver_además">Ver además</h2> + +<p>{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}},{{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}},{{cssxref("-webkit-mask-repeat")}}</p> diff --git a/files/es/web/css/-webkit-mask-origin/index.html b/files/es/web/css/-webkit-mask-origin/index.html new file mode 100644 index 0000000000..23b0f52dc7 --- /dev/null +++ b/files/es/web/css/-webkit-mask-origin/index.html @@ -0,0 +1,100 @@ +--- +title: '-webkit-mask-origin' +slug: Web/CSS/-webkit-mask-origin +tags: + - CSS + - Referencia +translation_of: Web/CSS/mask-origin +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <code>-webkit-mask-origin</code> determina el origen de una imagen de máscara. El valor de la propiedad {{cssxref("-webkit-mask-position")}} se interpreta en relación al valor de esta propiedad. No se aplica cuando <code>-webkit-mask-attachment</code> es <code>fixed</code>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt>padding</dt> + <dd>Valor por defecto. La posición de la imagen de máscara es relativa al padding (relleno). (Para cajas solas "<code>0 0</code>" es la esquina superior izquierda del límite del padding, "<code>100% 100%</code>" es la esquina inferior derecha.)</dd> + <dt>border</dt> + <dd>La posición de la imagen de máscara es relativa al borde.</dd> + <dt>content</dt> + <dd>La posición de la imagen de máscara es relativa al contenido.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">.example { + border: 10px double; + padding: 10px; + -webkit-mask-image: url('mask.png'); + + /* La imagen de máscara estará dentro del padding */ + -webkit-mask-origin: content; +} +</pre> + +<pre class="brush: css">div { + -webkit-mask-image: url('mask1.png'), url('mask2.png'); + -webkit-mask-origin: padding, content; +} +</pre> + +<h2 id="Compatibilidad_con_los_distintos_navegadores.">Compatibilidad con los distintos navegadores.</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básica</td> + <td>2.1</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<p>{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-clip")}}</p> diff --git a/files/es/web/css/-webkit-mask-position-x/index.html b/files/es/web/css/-webkit-mask-position-x/index.html new file mode 100644 index 0000000000..a2d712e337 --- /dev/null +++ b/files/es/web/css/-webkit-mask-position-x/index.html @@ -0,0 +1,132 @@ +--- +title: '-webkit-mask-position-x' +slug: Web/CSS/-webkit-mask-position-x +tags: + - CSS + - Máscaras CSS + - No estándar(2) + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-mask-position-x +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <code>-webkit-mask-position-x</code> CSS establece la posición horizontal inicial de una imagen de máscara.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush: css">/* Palabras Clave valores */ +-webkit-mask-position-x: left; +-webkit-mask-position-x: center; +-webkit-mask-position-x: right; + +/* <porcentaje> valores */ +-webkit-mask-position-x: 100%; +-webkit-mask-position-x: -50%; + +/* <longitud> valores */ +-webkit-mask-position-x: 50px; +-webkit-mask-position-x: -1cm; + +/* Múltiples valores */ +-webkit-mask-position-x: 50px, 25%, -3em; + +/* Valores globales */ +-webkit-mask-position-x: inherit; +-webkit-mask-position-x: initial; +-webkit-mask-position-x: unset; +</pre> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt><code><percentage></code></dt> + <dd>Un porcentaje que sirve para indicar, empezando por el lado izquierdo, la posición de la imagen en relación a la dimensión horizontal del área de la caja de relleno (padding). Un valor del 0% indica que el lado izquierdo de la imagen de máscara se alinea con el lado izquierdo de la caja. Un valor del 100% indica que que el lado derecho de la imagen se alinea con el lado derecho de la caja.</dd> + <dt><code><length></code></dt> + <dd>Una longitud indicando la posición del lado izquierdo de la imagen en relación con el lado izquierdo de la caja.</dd> + <dt><code><strong>left</strong></code></dt> + <dd>Equivalente a <code>0%</code>.</dd> + <dt><code><strong>center</strong></code></dt> + <dd>Equivalente a <code>50%</code>.</dd> + <dt><code><strong>right</strong></code></dt> + <dd>Equivalente a <code>100%</code>.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush:css">.exampleOne { + -webkit-mask-image: url(mask.png); + -webkit-mask-position-x: right; +} + +.exampleTwo { + -webkit-mask-image: url(mask.png); + -webkit-mask-position-x: 25%; +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No forma parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<p>{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-y")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}</p> diff --git a/files/es/web/css/-webkit-mask-position-y/index.html b/files/es/web/css/-webkit-mask-position-y/index.html new file mode 100644 index 0000000000..e68f3ac8e8 --- /dev/null +++ b/files/es/web/css/-webkit-mask-position-y/index.html @@ -0,0 +1,132 @@ +--- +title: '-webkit-mask-position-y' +slug: Web/CSS/-webkit-mask-position-y +tags: + - CSS + - Máscaras CSS + - No estándar(2) + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-mask-position-y +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <code>-webkit-mask-position-y</code> fija la posición inicial vertical de una imagen de máscara.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush: css">/* Palabras clave valores */ +-webkit-mask-position-y: top; +-webkit-mask-position-y: center; +-webkit-mask-position-y: bottom; + +/* valores <porcentaje> */ +-webkit-mask-position-y: 100%; +-webkit-mask-position-y: -50%; + +/* valores <longitud> */ +-webkit-mask-position-y: 50px; +-webkit-mask-position-y: -1cm; + +/* Valores Múltiples*/ +-webkit-mask-position-y: 50px, 25%, -3em; + +/* Valores globales */ +-webkit-mask-position-y: inherit; +-webkit-mask-position-y: initial; +-webkit-mask-position-y: unset; +</pre> + +<h2 id="Values">Values</h2> + +<dl> + <dt><code><percentage></code></dt> + <dd>Un porcentaje que sirve para indicar, empezando por el lado superior, la posición de la imagen en relación a la dimensión vertical del área de la caja de relleno (padding). Un valor del 0% indica que el lado superior de la imagen de máscara se alinea con el lado superior de la caja. Un valor del 100% indica que que el lado inferior de la imagen se alinea con el lado inferior de la caja.</dd> + <dt><code><length></code></dt> + <dd>Una longitud indicando la posición del lado superior de la imagen en relación con el lado superior de la cajade relleno (padding).</dd> + <dt><code><strong>top</strong></code></dt> + <dd>Equivalente a <code>0%</code>.</dd> + <dt><code><strong>bottom</strong></code></dt> + <dd>Equivalente a <code>100%</code>.</dd> + <dt><code><strong>center</strong></code></dt> + <dd>Equivalente a <code>50%</code>.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush:css">.exampleOne { + -webkit-mask-image: url(mask.png); + -webkit-mask-position-y: bottom; +} + +.exampleTwo { + -webkit-mask-image: url(mask.png); + -webkit-mask-position-y: 25%; +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Not part of any specification.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<p>{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-x")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}</p> diff --git a/files/es/web/css/-webkit-mask-position/index.html b/files/es/web/css/-webkit-mask-position/index.html new file mode 100644 index 0000000000..f2162ce36b --- /dev/null +++ b/files/es/web/css/-webkit-mask-position/index.html @@ -0,0 +1,118 @@ +--- +title: '-webkit-mask-position' +slug: Web/CSS/-webkit-mask-position +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/mask-position +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Sumario">Sumario</h2> + +<pre>la propiedad CSS -webkit-mask-position fija la posición inicial de una máscara de imagen.</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Valores">Valores</h2> + +<p> Acepta uno o dos valores. Se permiten valores negativos para {{cssxref("<percentage>")}} y {{cssxref("<length>")}}.</p> + +<ul> + <li>Si sólo se especifica un valor, el segundo valor se supone que es center.</li> + <li>El primer valor representa la posición horizontal y el segundo la posición vertical (si al menos un valor no es una palabra clave).</li> +</ul> + +<dl> + <dt><code><percentage></code></dt> + <dd>Con un par de valores 0% 0%, (es igual a 0 0) la esquina superior izquierda de la imagen se alinea con la esquina superior izquierda del borde del relleno del cuadro. Un valor par de 100% 100% coloca la esquina inferior derecha de la imagen en la esquina inferior derecha del zona del relleno. Con un par de valores de 14% 84%, el punto del 14% a lo largo y el 84% hacia abajo de la imagen son situados el punto del 14% a lo largo y el 84% del área del relleno.</dd> + <dt><code><length></code></dt> + <dd>Con un par de valores 2cm 1cm, la esquina superior izquierda de la imagen se coloca a 2cm a la derecha y 1cm por debajo de la esquina superior izquierda del área del relleno.</dd> + <dt><code><strong>top</strong></code></dt> + <dd>Equivalente al 0% para la posición vertical.</dd> + <dt><code><strong>right</strong></code></dt> + <dd>Equivalente al 100% para la posición horizontal.</dd> + <dt><code><strong>bottom</strong></code></dt> + <dd>Equivalente al 100% para la posición vertical.</dd> + <dt><code><strong>left</strong></code></dt> + <dd>Equivalente al 0% para la posición horizontal.</dd> + <dt><code><strong>center</strong></code></dt> + <dd>Equivalente al 50% para la posición horizontal si no se da otra forma, o 50% para la posición vertical si lo es.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush:css">.exampleOne { + -webkit-mask-image: url(mask.png); + -webkit-mask-position: bottom right; +} + +.exampleTwo { + -webkit-mask-image: url(mask.png); + -webkit-mask-position: 25%; +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No forma parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_nevegadores">Compatibilidad con los distintos nevegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_tambien">Ver tambien</h2> + +<p>{{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}</p> diff --git a/files/es/web/css/-webkit-mask-repeat-x/index.html b/files/es/web/css/-webkit-mask-repeat-x/index.html new file mode 100644 index 0000000000..5395782abd --- /dev/null +++ b/files/es/web/css/-webkit-mask-repeat-x/index.html @@ -0,0 +1,136 @@ +--- +title: '-webkit-mask-repeat-x' +slug: Web/CSS/-webkit-mask-repeat-x +tags: + - CSS + - Máscara CSS + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-mask-repeat-x +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <code>-webkit-mask-repeat-x</code> especifica si una imagen de máscara se repite(en mosaico) y cómo se lleva acabo esa repetición de manera horizontal.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Palabras Clave Valor */ +-webkit-mask-repeat-x: repeat; +-webkit-mask-repeat-x: no-repeat; +-webkit-mask-repeat-x: space; +-webkit-mask-repeat-x: round; + +/* Múltiples valores */ +-webkit-mask-repeat-x: repeat, no-repeat, space; + +/* Valores globales */ +-webkit-mask-repeat-x: inherit; +-webkit-mask-repeat-x: initial; +-webkit-mask-repeat-x: unset; +</pre> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt>repeat</dt> + <dd>La imagen de máscara se repite tanto horizontal como verticalmente.</dd> + <dt>no-repeat</dt> + <dd>La imagen de máscara no se repite; sólo se dibuja una copia de la misma. El resto del contenido del elemento al cual se le ha aplicado la máscara, no es mostrado.</dd> + <dt>space</dt> + <dd>La imagen se repite tanta veces como sea posible pero sin aplicarle ningún recorte. La primera y la última imagen estarán pegadas a ambos lados del elemento y el espacio restante se distribuye de igual manera entre las imágenes. Se ignora la propiedad {{cssxref("mask-position")}} a menos que únicamente se pueda mostrar una sóla imagen sin aplicar recortes. El único caso en el que se aplican recortes usando este valor es cuando no hay suficiente espacio para mostrar una sóla imagen.</dd> + <dt>round</dt> + <dd>Al aumentar el espacio la imágenes repetidas pueden estiarse (sin dejar huecos) hasta que sólo haya hueco para añadir una más. Al añadir la siguiente se encogen para permitir el hueco.Ejemplo: Una imagen con una achura original de 260px, repetida 3 veces, puede estirarse hasta que cada repetición tenga una anchura de 300px y, entonces, se añadirá otra que se encogerá hasta 225px.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">.exampleone { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat-x: repeat; +} + +.exampletwo { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat-x: no-repeat; +} +</pre> + +<h3 id="Soporte_para_múltiples_imágenes_de_máscara">Soporte para múltiples imágenes de máscara</h3> + +<p>Es posible especificar un <code><repeat-style></code> diferente para cada una de las imágenes de máscara. Los distintos valores deben separarme mediante el uso de comas:</p> + +<pre class="brush: css">.examplethree { + -webkit-mask-image: url('mask1.png'), url('mask2.png'); + -webkit-mask-repeat-x: repeat, space; +} +</pre> + +<p>Cada imagen se asocia con el correspondiente estilo de repetición, desde la primera hasta la última y siguiendo el orden que se ha establecido.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Pese a que la propiedad sí que es reconocida, no acepta ningun valor.</p> + +<h2 id="Ver_además">Ver además</h2> + +<p>{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-y")}}</p> diff --git a/files/es/web/css/-webkit-mask-repeat-y/index.html b/files/es/web/css/-webkit-mask-repeat-y/index.html new file mode 100644 index 0000000000..23f989db45 --- /dev/null +++ b/files/es/web/css/-webkit-mask-repeat-y/index.html @@ -0,0 +1,137 @@ +--- +title: '-webkit-mask-repeat-y' +slug: Web/CSS/-webkit-mask-repeat-y +tags: + - CSS + - Máscara CSS + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-mask-repeat-y +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <code>-webkit-mask-repeat-y</code> especifica si una imagen de máscara se repite(en mosaico) y cómo se lleva acabo esa repetición de manera vertical.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Palabras Clave Valor */ +-webkit-mask-repeat-y: repeat; +-webkit-mask-repeat-y: no-repeat; +-webkit-mask-repeat-y: space; +-webkit-mask-repeat-y: round; + +/* Múltiples valores */ +-webkit-mask-repeat-y: repeat, no-repeat, space; + +/* Valores globales */ +-webkit-mask-repeat-y: inherit; +-webkit-mask-repeat-y: initial; +-webkit-mask-repeat-y: unset; +</pre> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt>repeat</dt> + <dd>La imagen se repite verticalmente</dd> + <dt>no-repeat</dt> + <dd>La imagen de máscara no se repite verticalmente; sólo se dibuja una copia de la misma. El resto del contenido del elemento al cual se le ha aplicado la máscara, no es mostrado.</dd> + <dt>space</dt> + <dd>La imagen se repite tanta veces como sea posible pero sin aplicarle ningún recorte. La primera y la última imagen estarán pegadas al borde superior e inferior del elemento y el espacio restante se distribuye de igual manera entre las imágenes. Se ignora la propiedad {{cssxref("mask-position")}} a menos que únicamente se pueda mostrar una sóla imagen sin aplicar recortes. El único caso en el que se aplican recortes usando este valor es cuando no hay suficiente espacio para mostrar una sóla imagen.</dd> + <dt>round</dt> + <dd>Al aumentar el espacio vertical la imágenes repetidas pueden estiarse (sin dejar huecos) hasta que sólo haya hueco para añadir una más. Al añadir la siguiente se encogen para permitir el hueco.Ejemplo: Una imagen con una altura original de 260px, repetida 3 veces, puede estirarse hasta que cada repetición tenga una altura de 300px y, entonces, se añadirá otra que se encogerá hasta una altura 225px.</dd> + <dd>As the allowed vertical space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original height of 260px, repeated three times, might stretch until each repetition is 300px high, and then another image will be added. They will then compress to a height of 225px.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">.exampleone { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat-y: repeat; +} + +.exampletwo { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat-y: no-repeat; +} +</pre> + +<h3 id="Soporte_para_múltiples_imágenes_de_máscara">Soporte para múltiples imágenes de máscara</h3> + +<p>Es posible especificar un <code><repeat-style></code> diferente para cada una de las imágenes de máscara. Los distintos valores deben separarme mediante el uso de comas:</p> + +<pre class="brush: css">.examplethree { + -webkit-mask-image: url('mask1.png'), url('mask2.png'); + -webkit-mask-repeat-y: repeat, space; +} +</pre> + +<p>Cada imagen se asocia con el correspondiente estilo de repetición, desde la primera hasta la última y siguiendo el orden que se ha establecido.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Pese a que la propiedad sí que es reconocida, no acepta ningun valor.</p> + +<h2 id="Ver_además">Ver además</h2> + +<p>{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-x")}}</p> diff --git a/files/es/web/css/-webkit-mask-repeat/index.html b/files/es/web/css/-webkit-mask-repeat/index.html new file mode 100644 index 0000000000..50ff3bc603 --- /dev/null +++ b/files/es/web/css/-webkit-mask-repeat/index.html @@ -0,0 +1,132 @@ +--- +title: '-webkit-mask-repeat' +slug: Web/CSS/-webkit-mask-repeat +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia + - Web +translation_of: Web/CSS/mask-repeat +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p><code><font face="Open Sans, Arial, sans-serif">La propiedad </font>-webkit-mask-repeat</code> especifica si la imagen de máscara se repite (en mosaico) y cómo se repite.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Palabras clave de valor únicas */ +-webkit-mask-repeat: repeat; +-webkit-mask-repeat: repeat-x; +-webkit-mask-repeat: repeat-y; +-webkit-mask-repeat: no-repeat; + +/* Palabras clave de valor mútiple */ +-webkit-mask-repeat: repeat, repeat-x, no-repeat; + +/* Valores globlaes */ +-webkit-mask-repeat: inherit; +-webkit-mask-repeat: initial; +-webkit-mask-repeat: unset; +</pre> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt>repeat</dt> + <dd>La máscara de imagen se repite tanto vertical como horizontalmente.</dd> + <dt>repeat-x</dt> + <dd>La imagen de máscara de repite sólo horizontalmente.</dd> + <dt>repeat-y</dt> + <dd>La imagen de máscara de repite sólo verticalemente.</dd> + <dt>no-repeat</dt> + <dd>La máscara de imagen no se repite. Sólo se dibuja una copia suya. El resto del contenido del elemento con máscara no se muestra.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">.exampleone { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat: repeat-x; +} + +.exampletwo { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat: no-repeat; +} +</pre> + +<h3 id="Soporte_para_múltiples_imágenes_de_máscara">Soporte para múltiples imágenes de máscara</h3> + +<p>Se puede especificar, seperados por comas, un <code><repeat-style></code> para cada una de las imágenes de máscara:</p> + +<pre class="brush: css">.examplethree { + -webkit-mask-image: url('mask1.png'), url('mask2.png'); + -webkit-mask-repeat: repeat-x, repeat-y; +} +</pre> + +<p>Cada imagen se relaciona con el correspondiente estilo, desde la primera especificada hasta la última.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>2.1</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<p>{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}</p> diff --git a/files/es/web/css/-webkit-mask/index.html b/files/es/web/css/-webkit-mask/index.html new file mode 100644 index 0000000000..59b3a02370 --- /dev/null +++ b/files/es/web/css/-webkit-mask/index.html @@ -0,0 +1,124 @@ +--- +title: '-webkit-mask' +slug: Web/CSS/-webkit-mask +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/mask +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <code>-webkit-mask</code> es una manera corta de establecer, en un único sitio en una hoja de estilos, los valores individuales de máscara. <code>-webkit-mask </code> puede ser utilizado para fijar los valores en una o más de las siguiente propiedades: {{Cssxref("-webkit-mask-image")}}, {{Cssxref("-webkit-mask-repeat")}}, {{Cssxref("-webkit-mask-attachment")}}, {{Cssxref("-webkit-mask-position")}}, {{Cssxref("-webkit-mask-origin")}}, y {{Cssxref("-webkit-mask-clip")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Palabras clave valor */ +-webkit-mask: none; + +/* Valores de imágene */ +-webkit-mask: url(mask.png); /* Imagen de pixel usado coo máscara */ +-webkit-mask: url(masks.svg#star); /* Elemento dentro de un gráfico SVG usado como máscara */ +-webkit-mask: linear-gradient(transparent, black); /* Gradiente usado como máscara */ + +/* Valores combinados */ +-webkit-mask: url(masks.svg#star) 40px 20px; /* Elemento dentro de un gráfico SVG usado como máscara y posicionado 40px desde la parte superior y 20px a la izquierda */ +-webkit-mask: url(masks.svg#star) 0 0/50px 50px; /* Elemento dentro de un gráfico SVG usado como máscara con una anchura y altura de 50px */ +-webkit-mask: url(masks.svg#star) repeat-x; /* Elemento dentro de un gráfico SVG usado como una máscara que se repite horizontalmente */ +-webkit-mask: url(masks.svg#star) border; /* Elemento dentro de un gráfico SVG usado como una máscara que sobrepasa la caja que rodea el borde */ +-webkit-mask: url(masks.svg#star) text; /* Elemento dentro de un gráfico SVG usado como una máscara que recorta el texto que contiene */ + +/* Valores globales */ +-webkit-mask: inherit; +-webkit-mask: initial; +-webkit-mask: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>mask-image</dt> + <dd><em>Requierido</em>.Ver {{Cssxref("-webkit-mask-image")}}.</dd> + <dt>mask-repeat</dt> + <dd><em>Opcional</em>. Ver {{Cssxref("-webkit-mask-repeat")}}.</dd> + <dt>mask-attachment</dt> + <dd><em>Opcional</em> Ver {{Cssxref("-webkit-mask-attachment")}}.</dd> + <dt>mask-position</dt> + <dd><em>Opcional</em>. Ver {{Cssxref("-webkit-mask-position")}}.</dd> + <dt>mask-origin</dt> + <dd><em>Opcional</em>. Ver {{Cssxref("-webkit-mask-origin")}}.</dd> + <dt>mask-clip</dt> + <dd><em>Opcional</em> Ver {{Cssxref("-webkit-mask-clip")}}.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">.example { + -webkit-mask: url('mask.png') no-repeat fixed 20px 20px padding padding; +} +</pre> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>2.1</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}</li> +</ul> diff --git a/files/es/web/css/-webkit-overflow-scrolling/index.html b/files/es/web/css/-webkit-overflow-scrolling/index.html new file mode 100644 index 0000000000..61d96b749d --- /dev/null +++ b/files/es/web/css/-webkit-overflow-scrolling/index.html @@ -0,0 +1,85 @@ +--- +title: '-webkit-overflow-scrolling' +slug: Web/CSS/-webkit-overflow-scrolling +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-webkit-overflow-scrolling +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>La propiedad CSS <code>-webkit-overflow-scrolling</code> controla si los dispositivos táctiles usan el desplazamiento momentum o inercial (momentum-based scroll) para el elemento dado.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt><code>auto</code></dt> + <dd>Usa el desplazamiento (scroll) normal, donde el contenido deja inmediatamente de desplazarse cuando quitas el dedo de la pantalla.</dd> + <dt><code>touch</code></dt> + <dd>Use el desplazamiento momentum o inercial, donde el contenido sigue desplazándose después incluso de haber acabado el gesto de control y de haber quitado el dedo de la pantalla. La velocidad y duración de esta continuación es proporcional a cuán fuerte fue el gesto de desplazamiento o scroll. Además se crea un nuevo contexto de apilado (stacking context).</dd> +</dl> + +<h3 id="Sintaxis_Formal">Sintaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="scroll-touch"> + <p> + This paragraph has momentum scrolling + </p> +</div> +<div class="scroll-auto"> + <p> + This paragraph does not. + </p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 100%; + overflow: auto; +} + +p { + width: 200%; + background: #f5f9fa; + border: 2px solid #eaf2f4; + padding: 10px; +} + +.scroll-touch { + -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */ +} + +.scroll-auto { + -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */ +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Apple tiene una <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling">descripción en la Referencia CSS de Safari.</a></p> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{Compat("css.properties.-webkit-overflow-scrolling")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/">Artículo en CSS-Tricks con ejemplo</a></li> + <li><a href="https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/">Smashing Magazine- describiendo el efecto del scroll con rebote y cómo funciona en diferentes navegadores</a></li> +</ul> diff --git a/files/es/web/css/-webkit-print-color-adjust/index.html b/files/es/web/css/-webkit-print-color-adjust/index.html new file mode 100644 index 0000000000..67e3456e5a --- /dev/null +++ b/files/es/web/css/-webkit-print-color-adjust/index.html @@ -0,0 +1,102 @@ +--- +title: '-webkit-print-color-adjust' +slug: Web/CSS/-webkit-print-color-adjust +tags: + - CSS + - Diseño + - No estándar(2) + - Propiedad CSS + - Web +translation_of: Web/CSS/-webkit-print-color-adjust +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <code>-webkit-print-color-adjust</code> es una extensión CSS no estándar que puede ser usada para forzar la impresión de fondos e imágenes en navegadores basado en el motor WebKit.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox">-webkit-print-color-adjust: economy | exact +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>economy</code></dt> + <dd>Comportamiento normal. Los colores de fondo y las imágenes son sólo impresos si el usuario lo permite de manera explícita en el cuadro de diálogo de preferencias de impresión.</dd> + <dt><code>exact</code></dt> + <dd>Los colores de fondo y las imágenes del elemento en el que se aplica esta reglar son siempre impresos, la configuración de la impresora del usuario es ignorada.</dd> +</dl> + +<h2 id="Herencia">Herencia</h2> + +<p>Esta propiedad es <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance">heredada</a>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Aún no es parte de ninguna especificación aunque hay una <a href="http://wiki.csswg.org/ideas/print-backgrounds">propuesta en la wiki de CSSWG</a> para que sea estandarizada.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6.0<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Chrome no soporta la impresión de fondo del elemento {{HTMLElement("body")}}. Si se fija la propiedad a <code>exact</code> en el elemento body , sólo se aplicará a sus descendientes.</p> + +<p>Cuando se recortan las imágenes de fondo (por ejemplo cuando usamos sprites e imágenes de fondo), causado por el <a href="http://code.google.com/p/chromium/issues/detail?id=131054">Chromium bug 131054</a>, las imágenes aparecerán distorsionadas al ser impresas desde el navegador Chrome con <code>-webkit-print-color-adjust: exact</code>. Fondos de colores sólidos e imágenes de fondo que no sean recortadas (es decir que tengan menor anchura y altura que el elemento al que se aplican) serán impresas de manera correcta.</p> + +<p>[2] Safari no soporta la impresión de fondo del elemento {{HTMLElement("body")}}. Si se fija la propiedad a <code>exact</code> en el elemento body , sólo se aplicará a sus descendientes.</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>WebKit <a href="https://bugs.webkit.org/show_bug.cgi?id=64583">bug 64583</a>: "WIP: Añade la propiedad CSS para controlar la impresión de fondos de elementos individuales"</li> + <li>CSSWG wiki: <a href="http://wiki.csswg.org/ideas/print-backgrounds">print-backgrounds</a> - una propuesta para estandarizar esta propiedad</li> + <li>Módulo Color CSS Nivel 4: la propiedad <code><a href="https://drafts.csswg.org/css-color-4/#color-adjust">color-adjust</a> </code>una propuesta más nueva para estandarizar esta propiedad</li> +</ul> diff --git a/files/es/web/css/-webkit-tap-highlight-color/index.html b/files/es/web/css/-webkit-tap-highlight-color/index.html new file mode 100644 index 0000000000..065b35dac9 --- /dev/null +++ b/files/es/web/css/-webkit-tap-highlight-color/index.html @@ -0,0 +1,43 @@ +--- +title: '-webkit-tap-highlight-color' +slug: Web/CSS/-webkit-tap-highlight-color +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-tap-highlight-color +--- +<div>{{ CSSRef() }}</div> + +<p>{{ Non-standard_header() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p><strong><code>-webkit-tap-highlight-color</code></strong> es una propiedad CSS no estándar que fija el color que sirve para destacar un enlace cuando se golpea sobre él (normalmente con el dedo en dispositivos táctiles). Ese color destacado indica que se ha presionado correctamente e indica el elemento sobre el cuál se ha golpeado.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush: css">-webkit-tap-highlight-color: red; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>Un {{Cssxref("color value")}}.</p> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p><em>No es parte de ninguna especificación.</em> Apple tiene <a href="https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5">una descripción en la Guía Web de Contenidos sobre Safari</a>.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>Soportado por WebKit/Safari, Blink/Chrome, y <a href="https://msdn.microsoft.com/es//library/dn806275(v=vs.85).aspx">y algunas versiones de Internet Explorer y Microsoft Edge.</a></p> diff --git a/files/es/web/css/-webkit-text-fill-color/index.html b/files/es/web/css/-webkit-text-fill-color/index.html new file mode 100644 index 0000000000..6882843fd7 --- /dev/null +++ b/files/es/web/css/-webkit-text-fill-color/index.html @@ -0,0 +1,100 @@ +--- +title: '-webkit-text-fill-color' +slug: Web/CSS/-webkit-text-fill-color +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-text-fill-color +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS -<strong><code>webkit-text-fill-color</code></strong> especifica el <a href="/en-US/docs/Web/CSS/color_value">color</a> de relleno de las letras de un texto. Si la propiedad no está establecidad se usará el valor de la propiedad {{cssxref("color")}}.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Compat', '#the-webkit-text-fill-color', '-webkit-text-fill-color')}}</td> + <td>{{Spec2('Compat')}}</td> + <td>Estandarización estándar</td> + </tr> + <tr> + <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-fill-color" hreflang="en" lang="en">Referencia CSS Safari<br> + <small lang="es">'-webkit-text-fill-color' en ese documento.</small></a></td> + <td>Documentanción no oficial no estándar</td> + <td>Documentación inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Compatibilidad</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Compatibilidad</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Post del blog Surfin' Safari anunciando esta característica</a></li> + <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">Artículo de CSS-Tricks explicando esta característica</a></li> + <li>{{cssxref("-webkit-text-stroke-color")}}</li> + <li>{{cssxref("-webkit-text-stroke-width")}}</li> + <li>{{cssxref("-webkit-text-stroke")}}</li> +</ul> diff --git a/files/es/web/css/-webkit-text-stroke-color/index.html b/files/es/web/css/-webkit-text-stroke-color/index.html new file mode 100644 index 0000000000..ef5119cb4e --- /dev/null +++ b/files/es/web/css/-webkit-text-stroke-color/index.html @@ -0,0 +1,129 @@ +--- +title: '-webkit-text-stroke-color' +slug: Web/CSS/-webkit-text-stroke-color +tags: + - CSS + - No estándar(2) + - Propiedad CSS +translation_of: Web/CSS/-webkit-text-stroke-color +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>-webkit-text-stroke-color</code></strong> especifica el <a href="/es/docs/Web/CSS/color_value">color</a> del trazo de los caracteres de texto. Si no se fija se usa el valor de la propiedad {{cssxref("color")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* valores <color> */ +-webkit-text-stroke-color: red; +-webkit-text-stroke-color: #e08ab4; +-webkit-text-stroke-color: rgb(200, 100, 0); + +/* Valores gloables */ +-webkit-text-stroke-color: inherit; +-webkit-text-stroke-color: initial; +-webkit-text-stroke-color: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><color></code></dt> + <dd>El color del trazo.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}</td> + <td>{{Spec2('Compat')}}</td> + <td>Estandarización Inicial</td> + </tr> + <tr> + <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color" hreflang="en" lang="en">Referencia CSS de Safari CSS<br> + <small lang="en-US">'-webkit-text-stroke-color' en ese documento.</small></a></td> + <td>Documentación no estándar y no oficial.</td> + <td>Documentación Inicial</td> + </tr> + </tbody> +</table> + +<p>No es parte de ninguna especificación.</p> + +<p>Apple tiene <a href="">una descripción de <code>-webkit-text-stroke-color</code> en la referencia CSS de Safari</a>.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Post en el blog Surfin' Safari anunciando esta característica</a></li> + <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">Artículo en CSS-Tricks explicando esta característica</a></li> + <li>{{cssxref("-webkit-text-fill-color")}}</li> + <li>{{cssxref("-webkit-text-stroke-width")}}</li> + <li>{{cssxref("-webkit-text-stroke")}}</li> +</ul> diff --git a/files/es/web/css/-webkit-text-stroke-width/index.html b/files/es/web/css/-webkit-text-stroke-width/index.html new file mode 100644 index 0000000000..797dbea3f4 --- /dev/null +++ b/files/es/web/css/-webkit-text-stroke-width/index.html @@ -0,0 +1,118 @@ +--- +title: '-webkit-text-stroke-width' +slug: Web/CSS/-webkit-text-stroke-width +tags: + - CSS + - Experimental + - No estandar + - Referencia +translation_of: Web/CSS/-webkit-text-stroke-width +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS </a><strong><code>-webkit-text-stroke-width</code></strong> especifica la anchura del trazo de texto.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* TODO */ +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><line-width></code></dt> + <dd>La anchura del trazo.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}</td> + <td>{{Spec2('Compat')}}</td> + <td>Estandarización Inicial</td> + </tr> + <tr> + <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width" hreflang="en" lang="en">Referencia CSS de Safari<br> + <small lang="en-US">'-webkit-text-stroke-width' en ese documento.</small></a></td> + <td>Non-standard unofficial documentation</td> + <td>Documentación Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Post en el blog Surfin' Safari anunciando esa característica</a></li> + <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">Artículo en CSS-Tricks explicando esa característica</a></li> + <li>{{cssxref("-webkit-text-stroke-color")}}</li> + <li>{{cssxref("-webkit-text-stroke")}}</li> + <li>{{cssxref("-webkit-text-fill-color")}}</li> +</ul> diff --git a/files/es/web/css/-webkit-text-stroke/index.html b/files/es/web/css/-webkit-text-stroke/index.html new file mode 100644 index 0000000000..d9c1e26ae6 --- /dev/null +++ b/files/es/web/css/-webkit-text-stroke/index.html @@ -0,0 +1,142 @@ +--- +title: '-webkit-text-stroke' +slug: Web/CSS/-webkit-text-stroke +tags: + - CSS + - No estándar(2) + - Propiedad + - Referencia +translation_of: Web/CSS/-webkit-text-stroke +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS </a><strong><code>-webkit-text-stroke</code></strong> especifica la <a href="/es/docs/Web/CSS/length">anchura</a> y <a href="/es/docs/Web/CSS/color_value">color</a> del trazo para los caractéres de texto. Esta forma es una manera corta en relación con la forma larga que necesita usar las propiedades{{cssxref("-webkit-text-stroke-width")}} y {{cssxref("-webkit-text-stroke-color")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css notranslate">/* Valores anchura y color */ +-webkit-text-stroke: 4px navy; + +/* Valores globales */ +-webkit-text-stroke: inherit; +-webkit-text-stroke: initial; +-webkit-text-stroke: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length></code></dt> + <dd>La anchura del trazo.</dd> + <dt><code><color></code></dt> + <dd>El color del trazo.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p id="example">El trazo de este texto es rojo.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">#example { + font-size: 50px; + margin: 0; + -webkit-text-stroke: 2px red; +}</pre> + +<p>{{EmbedLiveSample("Example", 600, 60)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Compat', '#the-webkit-text-stroke', '-webkit-text-stroke')}}</td> + <td>{{Spec2('Compat')}}</td> + <td>Estandarización Inicial</td> + </tr> + <tr> + <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke" hreflang="en" lang="en">Referencia CSS Safari<br> + <small lang="en-US">'-webkit-text-stroke' en ese documento.</small></a></td> + <td>Documentación no oficial y no estándar</td> + <td>Documentación Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Post en el blog Surfin' Safari anunciando esta característica</a></li> + <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">Artículo en CSS-Tricks explicando esta característica</a></li> + <li>{{cssxref("-webkit-text-stroke-width")}}</li> + <li>{{cssxref("-webkit-text-stroke-color")}}</li> + <li>{{cssxref("-webkit-text-fill-color")}}</li> +</ul> diff --git a/files/es/web/css/-webkit-touch-callout/index.html b/files/es/web/css/-webkit-touch-callout/index.html new file mode 100644 index 0000000000..dbb8e830e7 --- /dev/null +++ b/files/es/web/css/-webkit-touch-callout/index.html @@ -0,0 +1,106 @@ +--- +title: '-webkit-touch-callout' +slug: Web/CSS/-webkit-touch-callout +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-touch-callout +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS </a><code>-webkit-touch-callout</code> controla la visualización de la llamada predeterminada que se muestra cuando se mantiene pulsado un objetivo táctil .</p> + +<p>Cuando se toca y se mantiene la presión en un objetivo en iPhone OS, Safari muestra un un cuadro con información sobre el enlace. Esta propiedad permite deshabilitar este comportamiento.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Palabras clave valor */ +-webkit-touch-callout: default; +-webkit-touch-callout: none; + +/* Valores globales */ +-webkit-touch-callout: initial; +-webkit-touch-callout: inherit; +-webkit-touch-callout: unset;</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>default</code></dt> + <dd>Se muestra el cuadro de información por defecto.</dd> + <dt><code>none</code></dt> + <dd>El cuadro está deshabilitado</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<pre class="brush: css">.example { + -webkit-touch-callout: none; +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<p>Apple tiene una <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">descripcón en la Referencia CSS de Safari</a>.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] La propiedad <code>-webkit-touch-callout</code> fue <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">implementada en iOS 2.0</a> y posteriormente añadida a WebKit ({{webkitbug(121507)}}).</p> diff --git a/files/es/web/css/@charset/index.html b/files/es/web/css/@charset/index.html new file mode 100644 index 0000000000..c45a05f3e8 --- /dev/null +++ b/files/es/web/css/@charset/index.html @@ -0,0 +1,123 @@ +--- +title: '@charset' +slug: Web/CSS/@charset +tags: + - Regla-at +translation_of: Web/CSS/@charset +--- +<div>{{ CSSRef }}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/en/CSS/At-rule" title="At-rule">regla-at</a> <strong><code>@charset</code></strong> de <a href="/en/CSS" title="CSS">CSS</a> especifica la codificación de caracteres usada en la hoja de estilos. Éste debe ser el primer elemento en la hoja de estilos, y no debe ser precedidad por ningun otro caracter; al no ser una <a href="/en/CSS/Syntax#nested_statements" title="en/CSS/Syntax#nested_statements">declaración anidada</a>, no puede ser usada dentro de <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">grupos de reglas-at condicionales</a>. Si se definen varias reglas-at <code>@charset</code>, solamente se usará la primera. La regla-at <code>@charset</code> no puede ser usada dentro de un atributo <code>style</code> style en un elemento HTML o dentro del elemento {{ HTMLElement("style") }} , ya que en estos casos se tomará en cuenta la codificación de la página HTML contenedora.</p> + +<p>Esta regla-at es útil cuando se usan caracteres fuera de la codificación ASCII en alguna propiedad CSS, como {{ cssxref("content") }}.</p> + +<p>Habiendo diferentes maneras de definir la codificación de caracteres en una hoja de estilos, el navegador intentará seguir este orden para identificarlo (deteniéndose en el primer paso que dé resultado):</p> + +<ol> + <li>El valor de la <a href="https://es.wikipedia.org/wiki/Marca_de_orden_de_bytes" title="http://en.wikipedia.org/wiki/Byte_order_mark">Marca de orden de bytes</a> al principio del archivo.</li> + <li>El valor dado por el atributo charset del encabezado HTTP <code>Content-Type:</code> o su equivalente en el protocolo usado para descargar la hoja de estilos.</li> + <li>La regla-at <code>@charset</code> de CSS.</li> + <li>Usar la codificación de caracteres definida en el documento de referencia: el atributo <code>charset</code> attribute del elemento {{ HTMLElement("link") }}. Este método es obsoleto para HTML5 y no debe ser usado.</li> + <li>Asumir que el documento es UTF-8.</li> +</ol> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre>@charset "UTF-8"; +@charset 'iso-8859-15'; +</pre> + +<p>donde:</p> + +<dl> + <dt style="margin: 0 40px;"><em>charset</em></dt> + <dd style="margin: 0 40px;">Es un valor {{cssxref("<string>")}} que denota la codificación de caracteres que será usada. Debe ser el nombre de una codificación de caracteres compatible con Web, definida en el <a href="http://www.iana.org/assignments/character-sets">registro IANA</a>. Si varios nombres están asociados a una codificación, solamente se usará el que está marcado como <em>principal</em>.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">@charset "UTF-8"; /* Establece la codificación de la hoja de estilos a Unicode UTF-8 */ +@charset 'iso-8859-15'; /* Establece la codificación de la hoja de estilos a Latin-9 (idiomas de Europa Occidental, con símbolo de euro) */ + @charset "UTF-8"; /* Inválido, hay un caracter (espacio) antes de la regla-at */ +@charset UTF-8; /* Inválido, sin comillas simples o dobles, el valor no es una cadena {{cssxref("<string>")}} de CSS */ +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS2.1', 'syndata.html#x57', '@charset') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>2.0</td> + <td>{{ CompatGeckoDesktop("1.8") }}<sup>[1]</sup></td> + <td>5.5<sup>[2]</sup></td> + <td>9</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>2.1</td> + <td>{{ CompatGeckoMobile("1.8") }}</td> + <td>5.5<sup>[2]</sup></td> + <td>10.0</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox 1.0 soporta sólo una sintaxis inválida donde la codificación de caracteres no se establece entre comillas sencillas o dobles.</p> + +<p>[2] De IE 5.5 a IE 7, IE también soporta la sintaxis inválida donde la codificación de caracteres no se establece entre comillas sencillas o dobles.</p> diff --git a/files/es/web/css/@counter-style/additive-symbols/index.html b/files/es/web/css/@counter-style/additive-symbols/index.html new file mode 100644 index 0000000000..9c91ff7f39 --- /dev/null +++ b/files/es/web/css/@counter-style/additive-symbols/index.html @@ -0,0 +1,129 @@ +--- +title: additive-symbols +slug: Web/CSS/@counter-style/additive-symbols +tags: + - Descriptor CSS + - Estilos de Contador CSS + - Referencia +translation_of: Web/CSS/@counter-style/additive-symbols +--- +<h2 id="Resumen">Resumen</h2> + +<p><span class="seoSummary">El descriptor additive-symbols es similar al descriptor {{cssxref('symbols')}}, y permite al usuario especificar símbolos que se usarán para representación de contadores cuando el valor del descriptor {{cssxref('system')}} es <em>additive</em>. El descriptor <code>additive-symbols</code> define lo que se conoce como tuplas aditivas, cada una de las cuales es un par que contiene un símbolo y su peso como entero no negativo.</span> El sistema aditivo es usado para construir sistemas de <a href="http://en.wikipedia.org/wiki/Sign-value_notation">numeración de valores de signos</a> como la numeración romana.</p> + +<p>Cuando el valor del descriptor es <em>cyclic</em>, <em>numeric</em>, <em>alphabetic</em>, <em>symbolic</em>, o <em>fixed</em>, se usa el descriptor <code>symbols</code>, en lugar de <code>additive-symbols</code> para especificar los símbolos de conteo.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">additive-symbols: 3 "0"; +additive-symbols: 3 "0", 2 "\2E\20"; +additive-symbols: 3 "0", 2 url(symbol.png); +</pre> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="html prettyprint" id="htmlOutput"><ul class="list"> + <li>One</li> + <li>Two</li> + <li>Three</li> + <li>Four</li> + <li>Five</li> +</ul></pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">@counter-style additive-symbols-example { + system: additive; + additive-symbols: I 1; +} +.list { + list-style: additive-symbols-example; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Example') }}</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}</td> + <td>{{Spec2('CSS3 Counter Styles')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(33)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(33)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li> + <li>{{cssxref("symbols", "symbols()")}}, la notación funcional para crear estilos de contador anónimos.</li> +</ul> diff --git a/files/es/web/css/@counter-style/index.html b/files/es/web/css/@counter-style/index.html new file mode 100644 index 0000000000..557c5b42a9 --- /dev/null +++ b/files/es/web/css/@counter-style/index.html @@ -0,0 +1,200 @@ +--- +title: '@counter-style' +slug: Web/CSS/@counter-style +tags: + - At-rule + - CSS + - NeedsTranslation + - Reference + - Styles + - TopicStub + - counter +translation_of: Web/CSS/@counter-style +--- +<p>{{CSSRef}}</p> + +<h2 id="Summary">Summary</h2> + +<p>The<strong> <code>@counter-style</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> lets authors define specific counter styles that are not part of the predefined set of styles. A <code>@counter-style</code> rule defines how to convert a counter value into a string representation.</p> + +<p>Initial version of CSS defined a set of useful counter styles. Although more styles were added to this set of predefined styles over the years, this restrictive way proved unable to fulfill the needs of worldwide typography. The <code>@counter-style</code> at-rule addresses this shortcoming in an open-ended manner, by allowing authors to define their own counter styles when the pre-defined styles aren't fitting their needs.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<h3 id="Descriptors">Descriptors</h3> + +<p>Each <code>@counter-style</code> is identified by a name and has a set of descriptors.</p> + +<dl> + <dt>{{cssxref("@counter-style/system", "system")}}</dt> + <dd>Specifies the algorithm to be used for converting the integer value of a counter to a string representation.</dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/negative", "negative")}}</dt> + <dd>Lets the author specify symbols to be appended or prepended to the counter representation if the value is negative.</dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/prefix", "prefix")}}</dt> + <dd>Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, so in the final representation of the counter, it comes before the negative sign.</dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/suffix", "suffix")}}</dt> + <dd>Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Prefixes come after the marker representation.</dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/range", "range")}}</dt> + <dd>Defines the range of values over which the conter style is applicable. If a counter style is used to represent a counter value outside of its ranges, the counter style will drop back to its fallback style.</dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/pad", "pad")}}</dt> + <dd>Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start start at 01 and go through 02, 03, 04 etc, then the pad descriptor is to be used. For representations larger than the specified pad value, the marker is constructed as normal.</dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/fallback", "fallback")}}</dt> + <dd>Specifies a system to fall back into if either the specified system is unable to construct the representation of or a counter value or if the counter value outside the specified range. If the specified fallback also fails to represent the value, then the fallback style's fallback is used, if one is specified. If there are either no fallback systems described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the decimal style.</dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/symbols", "symbols")}}</dt> + <dd>Specifies the symbols that are to be used for the marker representations. Symbols can contain string, images or custom identifiers. How the symbols are used to construct the marker representation is up to the algorithm specified in the system descriptor. For example, if the system specified is fixed, then each of the N symbols specified in the descriptor will be used to represent the first N counter symbols. Once the specified set of symbols have exhausted, the fallback style will be used for the rest of the list.<br> + <br> + The below @counter-style rule uses images instead of character symbols.<br> + + <pre class="brush: css">@counter-style winners-list { + system: fixed; + symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg); + suffix: " "; +}</pre> + </dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</dt> + <dd>While the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on <em>additive tuples</em> described in this descriptor. Each additive tuple consists of a counter symbol and a non negative integer weight. The additive tuples must be specified in the descending order of their weights.</dd> +</dl> + +<dl> + <dt>{{cssxref("@counter-style/speak-as", "speak-as")}}</dt> + <dd>Describes how to read out the counter style in speech synthesizers, such as screen readers. For example, the value of the marker symbol can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: css">@counter-style circled-alpha { + system: fixed; + symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ; + suffix: " "; +}</pre> + +<p>The above counter style rule can be applied to lists like this:</p> + +<pre class="brush: css">.items { + list-style: circled-alpha; +} +</pre> + +<p>Which will produce lists like this:</p> + +<p>Ⓐ One<br> + Ⓑ Two<br> + Ⓒ Three<br> + Ⓓ Four<br> + Ⓔ FIve<br> + ....<br> + ...<br> + Ⓨ Twenty Five<br> + Ⓩ Twenty Six</p> + +<p>27 Twenty Seven<br> + 28 Twenty Eight<br> + 29 Twenty Nine<br> + 30 Thirty</p> + +<p>Checkout more examples on the <a href="https://mdn.github.io/css-counter-style-demo/">demo page</a>.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}</td> + <td>{{Spec2('CSS3 Counter Styles')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(33)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(33)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li> + <li>{{cssxref("symbols", "symbols()")}}, the functional notation creating anonymous counter styles.</li> +</ul> diff --git a/files/es/web/css/@counter-style/symbols/index.html b/files/es/web/css/@counter-style/symbols/index.html new file mode 100644 index 0000000000..8a81c04645 --- /dev/null +++ b/files/es/web/css/@counter-style/symbols/index.html @@ -0,0 +1,144 @@ +--- +title: symbols +slug: Web/CSS/@counter-style/symbols +tags: + - Descriptor CSS + - Estilos de contadores CSS +translation_of: Web/CSS/@counter-style/symbols +--- +<h2 id="Summary">Summary</h2> + +<p><span class="seoSummary">El descriptor <code>symbols</code> es usado para definir los símbolos que usará un sistema de conteo específico para construir una representación de conteo. Un símbolo puede ser un texto, una imagen o un identificador.</span> El descriptor symbols debe ser especificado cuando el valor del descriptor {{cssxref('system')}} es <em>cyclic</em>, <em>numeric</em>, <em>alphabetic</em>, <em>symbolic</em>, o <em>fixed</em>. Cuando se usa el sistema <em>additive</em>, el descriptor {{cssxref('additive-symbols')}} es usado para especificar los símbolos.</p> + +<p>Los valores posibles para descriptor de símbolos incluyen:</p> + +<ul> + <li>Textos ({{cssxref("<string>")}}) - secuencia de caracteres definidos entre comillas sencillas o dobles. Se pueden usar diagonales invertidas (\) para escapar caracteres especiales. Por ejemplo, los caracteres Unicode pueden ser especificados en formato "\24B6".</li> + <li>Imágenes - Usando la función {{cssxref("<url>", "url()")}}</li> + <li>Identificadores</li> +</ul> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">symbols: A B C D E; +symbols: "\24B6" "\24B7" "\24B8" D E; +symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9"; +symbols: url('first.svg') url('second.svg') url('third.svg'); +symbols: indic-numbers; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><symbol></code></dt> + <dd>Representa u símbolo (<code><symbol></code>) usado dentro del sistema de conteo.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="list"> + <li>One</li> + <li>Two</li> + <li>Three</li> + <li>Four</li> + <li>Five</li> +</ul></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@counter-style symbols-example { + system: fixed; + symbols: A "1" "\24B7" D E; +} + +.list { + list-style: symbols-example; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/symbols') }}</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'symbols')}}</td> + <td>{{Spec2('CSS3 Counter Styles')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(33)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característic</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(33)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li> + <li>{{cssxref("symbols", "symbols()")}}, la notación funcional para crear estilos de contador anónimos.</li> +</ul> diff --git a/files/es/web/css/@document/index.html b/files/es/web/css/@document/index.html new file mode 100644 index 0000000000..250b5342c7 --- /dev/null +++ b/files/es/web/css/@document/index.html @@ -0,0 +1,82 @@ +--- +title: '@document' +slug: Web/CSS/@document +translation_of: Web/CSS/@document +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>The <strong><code>@document</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/At-rule">at-rule</a> restricts the style rules contained within it based on the URL of the document. It is designed primarily for user-defined style sheets, though it can be used on author-defined style sheets, too.</p> + +<pre class="brush: css no-line-numbers">@document url("https://www.example.com/") { + h1 { + color: green; + } +} +</pre> + +<ul> +</ul> + +<h2 id="Syntax">Syntax</h2> + + + +<p>Una regla @document puede especificar una o más funciones coincidentes. Si alguna de las funciones se aplica a una URL determinada, la regla tendrá efecto en esa URL. Las funciones disponibles son:</p> + +<ul> + <li><code>url()</code>, which matches an exact URL.</li> + <li><code>url-prefix()</code>, which matches if the document URL starts with the value provided.</li> + <li><code>domain()</code>, which matches if the document URL is on the domain provided (or a subdomain of it).</li> + <li><code>regexp()</code>, which matches if the document URL is matched by the <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a> provided. The expression must match the entire URL.</li> +</ul> + +<p>The values provided to the <code>url()</code>, <code>url-prefix()</code>, and <code>domain()</code> functions can be optionally enclosed by single or double quotes. The values provided to the <code>regexp()</code> function <em>must</em> be enclosed in quotes.</p> + +<p>Escaped values provided to the <code>regexp()</code> function must additionally be escaped from the CSS. For example, a <code>.</code> (period) matches any character in regular expressions. To match a literal period, you would first need to escape it using regular expression rules (to <code>\.</code>), then escape that string using CSS rules (to <code>\\.</code>).</p> + +<div class="note"> +<p><strong>Note</strong>: There is a -moz-prefixed version of this property — <code>@-moz-document</code>. This has been limited to use only in user and UA sheets in Firefox 59 in Nightly and Beta — an experiment designed to mitigate potential CSS injection attacks ({{bug(1035091)}}).</p> +</div> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@document url(http://www.w3.org/), + url-prefix(http://www.w3.org/Style/), + domain(mozilla.org), + regexp("https:.*") { + /* CSS rules here apply to: + - The page "http://www.w3.org/" + - Any page whose URL begins with "http://www.w3.org/Style/" + - Any page whose URL's host is "mozilla.org" + or ends with ".mozilla.org" + - Any page whose URL starts with "https:" */ + + /* Make the above-mentioned pages really ugly */ + body { + color: purple; + background: yellow; + } +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<p><a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document">Initially</a> in {{SpecName('CSS3 Conditional')}}, <code>@document</code> has been <a href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">postponed</a> to Level 4.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.at-rules.document")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Per-site user style sheet rules</a> on the www-style mailing list.</li> +</ul> diff --git a/files/es/web/css/@font-face/font-display/index.html b/files/es/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..f6dcaf0c03 --- /dev/null +++ b/files/es/web/css/@font-face/font-display/index.html @@ -0,0 +1,96 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +tags: + - '@font-face' + - CSS + - Descriptor CSS + - Experimental + - Fuentes CSS + - Referencia + - font-display + - web fonts +translation_of: Web/CSS/@font-face/font-display +--- +<div>{{CSSRef}}</div> + +<p>El descriptor <code>font-display</code> determina cómo se muestra una fuente basándose en cuándo está descargada y lista para usarse.</p> + +<h2 id="La_visualización_de_las_fuentes">La visualización de las fuentes</h2> + +<p>La visualización de la fuentes se basa en un temporizador que comienza en el momento en que el agente de usuario intenta utilizar una fuente descargada. El tiempo de visualización se divide en tres periodos dictan el comportamiento de renderizado de cualquier elemento que utilice la fuente.</p> + +<dl> + <dt>Tiempo de bloqueo de fuente</dt> + <dd>Si la fuente no está cargada, cualquier elemento que intente utilizarla debe mostrar una fuente alternativa <em>invisible</em>. Si la fuente se carga correctamente durante este período, se utiliza normalmente.</dd> + <dt>Tiempo de intercambio de fuente</dt> + <dd>Si la fuente no está cargada, cualquier elemento que intente usarla debe mostrar una fuente alternativa. Si la fuente se carga correctamente durante este período, se utiliza normalmente.</dd> + <dt>Tiempo de fallo de la fuente</dt> + <dd>Si la fuente no está cargada el agente de usuario lo trata como una descarga fallida y utiliza una fuente alternativa.</dd> +</dl> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css;">/* Valores */ +font-display: auto; +font-display: block; +font-display: swap; +font-display: fallback; +font-display: optional;</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>El agente de usuario define la estrategia de visualización de fuentes.</dd> + <dt><code>block</code></dt> + <dd>Establece un tiempo de bloqueo de la fuente corto y un periodo de intercambio infinito</dd> + <dt><code>swap</code></dt> + <dd>No establece tiempo de bloqueo para la fuente y un tiempo infinito de intercambio.</dd> + <dt><code>fallback</code></dt> + <dd>Establece un tiempo de bloqueo muy pequeño y un período de intercambio corto.</dd> + <dt><code>optional</code></dt> + <dd>Establece un tiempo de bloqueo muy corto y sin tiempo de intercambio.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css; highlight[7]">@font-face { + font-family: ExampleFont; + src: url(/path/to/fonts/examplefont.woff) format('woff'), + url(/path/to/fonts/examplefont.eot) format('eot'); + font-weight: 400; + font-style: normal; + font-display: fallback; +}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td> + <td>{{Spec2('CSS4 Fonts')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, por favor visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una petición de actualización.</div> + +<p>{{Compat("css.at-rules.font-face.font-display")}}</p> diff --git a/files/es/web/css/@font-face/font-family/index.html b/files/es/web/css/@font-face/font-family/index.html new file mode 100644 index 0000000000..1069ff05a8 --- /dev/null +++ b/files/es/web/css/@font-face/font-family/index.html @@ -0,0 +1,116 @@ +--- +title: font-family +slug: Web/CSS/@font-face/font-family +tags: + - CSS + - font-family +translation_of: Web/CSS/@font-face/font-family +--- +<p>{{CSSRef}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>El descriptor CSS font-family CSS permite al autor especificar el tipo de fuente para un elemento.</p> + +<p>La propiedad font-family puede contener varias fuentes a modo de sistema de "seguridad. Si el navegador no soporta la primera, probará con la siguiente y así sucesivamente.</p> + +<p>hay dos tipos de nombres de familias de fuentes:</p> + +<ul> + <li><strong>family-name</strong> - El nombre de la familia de fuentes, como "times", "courier", "arial", etc.</li> + <li><strong>generic-family</strong> - El nombre de la familia genérica , como "serif", "sans-serif", "cursive", "fantasy", "monospace".</li> +</ul> + +<p>Comienza con la fuente que quieras, y acaba siempre con una familia de fuente genérica para permitir al navegador elegir una fuente similar dentro de la familia genérica en caso de que no haya otras fuentes disponibles.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre>font-family: <em>font</em>|initial|inherit;</pre> + +<h3 id="Valores">Valores</h3> + +<p><font face="Consolas, Liberation Mono, Courier, monospace"><strong>family-name<br> + generic-family</strong></font><br> + Un lista priorizada de nombre de familias de fuentes y/o de nombres de familias genéricas.</p> + +<p><strong><code>initial</code></strong><br> + Establace el valor por defecto para esta propiedad.</p> + +<p><strong><code>inherit</code></strong><br> + Hereda esta propiedad del elemento padre.</p> + +<p><strong>serif</strong><br> + Fuente genérica con serif como, por ejemplo, el tipo de fuente Times.</p> + +<p><strong>sans-serif</strong><br> + Fuente genérica sin serif como, por ejemplo, el tipo de fuente Arial.</p> + +<p><strong>fantasy</strong><br> + Fuente genérica Fantasy.</p> + +<p><strong>monospace</strong><br> + Fuente genérica Monospace, como por ejemplo Courier.</p> + +<p><strong>cursive</strong><br> + Fuente genérica cursiva, como por ejemplo Script.</p> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre>{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Como ejemplo , consideremos la familia de fuentes garamon, es su forma normal, obtendremos el siguiente resultado:</p> + +<pre>p { + font-family: "Times New Roman", Georgia, Serif; +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>1.0</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/es/web/css/@font-face/font-style/index.html b/files/es/web/css/@font-face/font-style/index.html new file mode 100644 index 0000000000..5b812c2d63 --- /dev/null +++ b/files/es/web/css/@font-face/font-style/index.html @@ -0,0 +1,134 @@ +--- +title: font-style +slug: Web/CSS/@font-face/font-style +tags: + - '@font-face' + - CSS + - Fuentes + - Referências +translation_of: Web/CSS/@font-face/font-style +--- +<p>{{CSSRef}}</p> + +<h2 id="Summary">Summary</h2> + +<p>La propiedad CSS "font-style" permite a los autores esepcificar estilos de fuente para las fuentes especificadas en la regla "<code>@font-face</code>".</p> + +<p>Para un tipo de fuente particular, los autores pueden descargar varios tipos de fuentes que correspondan a diferentes estilos de la misma familia de fuentes, y luego usar la propiedad "font-style" para especificar explicitamente el tipo de fuente descargada. Los valores para esta propiedad CSS son los mismos que los correspondientes a font property.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<div class="syntaxbox"> +<pre class="brush: css">font-style: normal; +font-style: italic; +font-style: oblique;</pre> + +<h3 id="Values">Values</h3> + +<p><code><strong>normal</strong></code><br> + Selecciona la version normal del estilo de fuente.</p> + +<p><strong><code>italic</code></strong><br> + Especifica que el estilo de fuente es la versión en <em>cursiva</em> de la fuente normal.</p> + +<p><strong><code>oblique</code></strong><br> + Especifica que el estilo de fuente es la versión en <em>cursiva</em>, también, pero de forma diferente, de la fuente normal.</p> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<p>A modo de ejemplo, consideremos Garamond como un tipo de fuente que, en su forma normal, obtenemos el siguiente resultado:</p> + +<pre class="brush: css">@font-face { + font-family: garamond; + src: url('garamond.ttf'); +}</pre> + +<p><img alt="unstyled Garamond" src="https://mdn.mozillademos.org/files/12265/garamondunstyled.JPG" style="height: 101px; width: 276px;"></p> + +<p>La versión en <em>cursiva</em> de este texto utiliza los mismos trazos presentes en la versión sin estilo, pero artificialmente inclinadas unos pocos grados.</p> + +<p><img alt="artificially sloped garamond" src="https://mdn.mozillademos.org/files/12267/garamondartificialstyle.JPG" style="height: 101px; width: 276px;"></p> + +<p>Por otra parte, si existe un verdadera versión en <em>cursiva</em> del estilo de fuente, podemos incluirla en la propiedad "src" y especificar el estilo de fuente como "italic", con que claramente la fuente quedará en <em>cursiva</em>. Las verdaderas <em>cursivas</em> utilizan unos trazos específicos que son un poco diferentes de su versión normal, teniendo algunas características únicas y generalmente con cualidades redondeadas y caligráficas. Estas fuentes son específicamente creadas por diseñadores de fuentes y no son artificialmente inclinadas.</p> + +<p>@font-face { font-family: garamond; src: url('garamond-italic.ttf'); font-style: italic; }</p> + +<p><img alt="italic garamond" src="https://mdn.mozillademos.org/files/12269/garamonditalic.JPG" style="height: 101px; width: 267px;"></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table" style="height: 91px; width: 591px;"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>4.0 </td> + <td>4.0</td> + <td>10.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> +</div> diff --git a/files/es/web/css/@font-face/index.html b/files/es/web/css/@font-face/index.html new file mode 100644 index 0000000000..b00594d694 --- /dev/null +++ b/files/es/web/css/@font-face/index.html @@ -0,0 +1,162 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +translation_of: Web/CSS/@font-face +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p><code>@font-face</code> permite al autor especificar fuentes online para visualizar en sus páginas web. Al permitir a los autores proporcionar sus propias fuentes,<code> @font-face </code>elimina la necesidad de depender del numero limitado de fuentes de usuarios instaladas en sus computadoras.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre>@font-face { + font-family: <un-nombre-de-fuente-remota>; + src: <origen> [,<origen>]*; + [font-weight: <peso>]; + [font-style: <estilo>]; +} +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><un-nombre-de-fuente-remota> </dt> + <dd>Especifica el nombre de una fuente que será utilizada como valor de font face por las propiedades de fuente.</dd> + <dt><origen> </dt> + <dd>Dirección URL para la ubicación remota del archivo de fuente, o el nombre de una fuente en la computadora del usuario en la forma <code>local("Nombre de Fuente")</code>.</dd> + <dt><peso> </dt> + <dd>Un valor de <a class="internal" href="/en/CSS/font-weight" title="en/CSS/font-weight">peso/grosor de fuente</a>.</dd> + <dt><estilo> </dt> + <dd>Un valor de <a class="internal" href="/en/CSS/font-style" title="en/CSS/font-style">estilo de fuente</a>.</dd> +</dl> + +<p>Puede especificar una fuente por nombre en la computadora local del usuario utilizando la sintaxis <code>local()</code>. Si esa fuente no es encontrada, se intentarán otros orígenes hasta encontrar una fuente.</p> + +<h2 id="Formatos_de_fuentes_soportados">Formatos de fuentes soportados</h2> + +<ul> + <li>Gecko 1.9.1 (Firefox 3.5) soporta fuentes TrueType y OpenType.</li> + <li>Gecko 1.9.2 (Firefox 3.6) agrega soporte para <a href="/en/WOFF" title="en/About WOFF">WOFF</a>.</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Este ejemplo simplemente especifica una fuente que puede ser descargada para utilizar, aplicando la fuente a todo el cuerpo del documento.</p> + +<p><a class="internal" href="/@api/deki/files/2935/=webfont-sample.html" title="/@api/deki/files/2935/=webfont-sample.html">Muestra en vivo</a></p> + +<pre><html> +<head> + <title>Web Font Sample</title> + <style type="text/css" media="screen, print"> + @font-face { + font-family: "Bitstream Vera Serif Bold"; + src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); + } + + body { font-family: "Bitstream Vera Serif Bold", serif } + </style> +</head> +<body> + This is Bitstream Vera Serif Bold. +</body> +</html> +</pre> + +<p>En este ejemplo, es utilizada la copia local de "Helvetica Neue Bold" del usuario; si el usuario no tiene esa fuente instalada (se prueban dos nombre distintos), luego la fuente descargable de nombre "MgOpenModernaBold.ttf" es utilizada en cambio:</p> + +<pre class="deki-transform">@font-face { + font-family: MyHelvetica; + src: local("Helvetica Neue Bold"), + local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); + font-weight: bold; +} +</pre> + +<h2 id="Notas">Notas</h2> + +<ul> + <li><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">En</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Gecko</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">las fuentes</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">web están</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">sujetas</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a la restricción del</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mismo dominio</span> <span class="atn hps" title="Haz clic para obtener otras posibles traducciones">(los </span><span title="Haz clic para obtener otras posibles traducciones">archivos de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">fuentes</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">deben estar en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mismo dominio</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la página</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que los utiliza</span><span title="Haz clic para obtener otras posibles traducciones">)</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a menos que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los </span></span><a class="internal" href="/En/HTTP_access_control" title="En/HTTP access control">controles de acceso HTTP</a> <span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">sean utilizados para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">relajar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">esta restricción.</span></span></li> + <li> + <div class="note"><strong>Nota:</strong> Porque no hay tipos MIME definidos para fuentes TrueType, OpenType, y WOFF, el tipo MIME del archivo especificado no es considerado.</div> + </li> + <li>Cuando Gecko muestra una página que usa fuentes web, inicialmente muestra el texto que usa la mejor fuente de reserva CSS disponible en la computadora del usuario mientras espera que la fuente web termine de descargarse. Mientras cada fuente web se termina de descargar, Gecko actualiza el texto que utiliza esa fuente. Esto permite al usuario leer más rápidamente el texto en la página.</li> +</ul> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Chrome (WebKit)</td> + <td><strong>4</strong> (532.5)</td> + <td>Solo fuentes TrueType y OpenType</td> + </tr> + <tr> + <td></td> + <td><strong>6</strong> (534.3)</td> + <td>Web Open Font Format (WOFF) soporte agregado</td> + </tr> + </tbody> + <tbody> + <tr> + <td>Opera</td> + <td><strong>10.0</strong></td> + <td>Solo fuentes TrueType y OpenType</td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td><strong>3.1</strong> (525.6)</td> + <td>Solo fuentes TrueType y OpenType</td> + </tr> + </tbody> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión desde</th> + <th>Soporte de</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td><strong>4.0</strong></td> + <td>Solo fuentes OpenType embebidas</td> + </tr> + <tr> + <td>Internet Explorer</td> + <td><strong>9.0 Preview 3</strong></td> + <td>Web Open Font Format (WOFF) soporte agregado</td> + </tr> + <tr> + <td rowspan="2">Firefox (Gecko)</td> + <td><strong>3.5</strong> (1.9.1)</td> + <td>Solo fuentes TrueType y OpenType</td> + </tr> + <tr> + <td><strong>3.6</strong> (1.9.2)</td> + <td>Web Open Font Format (WOFF) soporte agregado</td> + </tr> + </tbody> +</table> + +<p>Vea también <a class="external" href="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx">MSDN Microsoft library @font-face</a>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions" title="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions">CSS 2 Fonts</a> 1998-05-12 Obsoletas</li> + <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-resources" title="http://www.w3.org/TR/css3-fonts/#font-resources">CSS 3 Fonts</a> 2009 Borrador de trabajo</li> + <li><a class="external" href="http://people.mozilla.com/~jkew/woff/woff-2009-09-16.html" title="http://people.mozilla.com/~jkew/woff/woff-2009-09-16.html">WOFF file format specification</a> Borrador</li> +</ul> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator" title="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li> + <li><a href="/en/WOFF" title="en/About WOFF">About WOFF</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/" title="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li> + <li><a class="external" href="http://openfontlibrary.org/" title="http://openfontlibrary.org/">Open Font Library</a></li> + <li><a class="external" href="http://opentype.info/demo/webfontdemo.html" title="http://opentype.info/demo/webfontdemo.html">10 Great Free Fonts for @font-face embedding</a></li> +</ul> diff --git a/files/es/web/css/@font-face/src/index.html b/files/es/web/css/@font-face/src/index.html new file mode 100644 index 0000000000..a9627ebf9b --- /dev/null +++ b/files/es/web/css/@font-face/src/index.html @@ -0,0 +1,245 @@ +--- +title: src +slug: Web/CSS/@font-face/src +tags: + - Descriptor CSS + - Fuentes CSS + - Referencia +translation_of: Web/CSS/@font-face/src +--- +<div>{{CSSRef}}</div> + +<p>El descriptor CSS <strong><code>src</code></strong> de la regla {{cssxref("@font-face")}} especifica el recurso que contiene a la fuente. Es requerido para que la regla <code>@font-face</code> sea válida.</p> + +<p>Su valor es una lista de referencias externas o nombres de fuentes instaladas, separadas por coma según su prioridad. Cuando se necesita una fuente, el agente usuario itera sobre el conjunto de referencias, usando la primera que pueda ser activada exitosamente. Fuentes que contienen datos inválidos o fuentes locales que no se encuentren son ignoradas, y el agente usuario cargará la siguiente en la lista.</p> + +<p>Al igual que con otras URLs en CSS, la URL puede ser relativa, en cuyo caso se resuelve relativamente a la ubicación de la hoja de estilos que contenga la regla <code>@font-face</code>. En caso de fuentes SVG, la URL apunta a un elemento dentro de un documento que contenga definiciones de fuentes SVG. Si se omite la referencia al elemento, se deduce que se usará la referencia a la primera fuente definida. De forma similar, formatos contenedores de fuentes que puedan contener más de una, cargarán solo una de las fuentes para una regla <code>@font-face</code>. Los identificadores de fragmentos son usados para indicar cuál fuente se cargará. Si un formato contenedor no tiene un esquema de identificadores de fragmento definido, se usará un esquema de indexado simple, con base en 1 (por ejemplo, "font-collection#1" para la primera fuente, "font-collection#2" para la segunda fuente).</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">/* <url> values */ +src: url(https://somewebsite.com/path/to/font.woff); /* absolute URL */ +src: url(path/to/font.woff); /* relative URL */ +src: url(path/to/font.woff) format("woff"); /* explicit format */ +src: url('path/to/font.woff'); /* quoted URL */ +src: url(path/to/svgfont.svg#example); /* fragment identifying font */ + +/* <font-face-name> values */ +src: local(font); /* unquoted name */ +src: local(some font); /* name containing space */ +src: local("font"); /* quoted name */ + +/* Multiple items */ +src: local(font), url(path/to/font.svg) format("svg"), + url(path/to/font.woff) format("woff"), + url(path/to/font.ttf) format("opentype"); +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><url> [ <span id="format()">format( <string># )</span> ]?</code></dt> + <dd>Especifica una referencia externa que consiste en una URL seguida por un indicador opcional que describe el formato del recurso referenciado por esa URL. El indicador de formato contiene una lista de textos de formato, separados por coma, que denota formatos de fuente conocidos. Si un agente usuario no soporta los formatos especificados, omitirá descargar el recurso. Si no se especifican los indicadores de formato, el recurso siempre es descargado.</dd> + <dt id="local()"><code><font-face-name></code></dt> + <dd>Especifica el nombre de una fuente instalada localmente, usando la función <code>local()</code>, que identifica de forma única a una fuente dentro de una familia larga. El nombre puede ser opcionalmente encerrado en comillas.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">@font-face { + font-family: examplefont; + src: local(Example Font), url('examplefont.woff') format("woff"), + url('examplefont.woff') format("opentype"); +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome("4.0")}}</td> + <td>12.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("6.0")}}</td> + <td>{{CompatOpera("9.0")}}</td> + <td>{{CompatSafari("3.1")}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/WOFF">WOFF</a></td> + <td>{{CompatChrome("5.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>{{CompatIE("9.0")}}</td> + <td>{{CompatOpera("11.1")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/WOFF">WOFF 2</a></td> + <td>{{CompatChrome("36.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("35.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("26.0")}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><a href="https://www.microsoft.com/typography/otspec/default.htm">TrueType</a></td> + <td>{{CompatChrome("4.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("9.0")}}</td> + <td>{{CompatOpera("10.0")}}</td> + <td>{{CompatSafari("3.1")}}</td> + </tr> + <tr> + <td><a href="https://www.microsoft.com/typography/otspec/default.htm">OpenType</a></td> + <td>{{CompatChrome("4.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("9.0")}}</td> + <td>{{CompatOpera("10.0")}}</td> + <td>{{CompatSafari("3.1")}}</td> + </tr> + <tr> + <td><a href="https://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded OpenType</a></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/SVG/Tutorial/SVG_fonts">SVG Font</a></td> + <td>{{CompatChrome("4.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("9.0")}}</td> + <td>{{CompatSafari("3.2")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatAndroid("2.2")}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>{{CompatIE("10.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("12.0")}}</td> + <td>{{CompatSafari("3.1")}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/WOFF">WOFF</a></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/WOFF">WOFF 2</a></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="https://www.microsoft.com/typography/otspec/default.htm">TrueType</a></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="https://www.microsoft.com/typography/otspec/default.htm">OpenType</a></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="https://www.w3.org/Submission/2008/SUBM-EOT-20080305/">Embedded OpenType</a></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/SVG/Tutorial/SVG_fonts">SVG Font</a></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Esta característica está implementada bajo la preferencia <code>gfx.downloadable_fonts.woff2.enabled</code>, inicialmente con valor predeterminado de <code>false</code>. A partir de Gecko 39.0 {{geckoRelease("39.0")}}, esta preferencia tiene valor predeterminado de <code>true</code>.</p> + +<p>[2] Esta característica aun no está implementada. Véase {{bug("119490")}}.</p> diff --git a/files/es/web/css/@font-face/unicode-range/index.html b/files/es/web/css/@font-face/unicode-range/index.html new file mode 100644 index 0000000000..61638788ac --- /dev/null +++ b/files/es/web/css/@font-face/unicode-range/index.html @@ -0,0 +1,86 @@ +--- +title: unicode-range +slug: Web/CSS/@font-face/unicode-range +tags: + - CSS + - Experimental + - Layout + - Reference +translation_of: Web/CSS/@font-face/unicode-range +--- +<div>{{cssref}}</div> + +<p>La regla CSS <strong><code>unicode-range</code></strong> especifica un rango específico de caracteres a ser usados por una fuente definida {{cssxref("@font-face")}} y hacerla disponible para su uso en la página actual. Si la página no usa algún caracter en ese rango, la fuente no es descargada; si usa al menos uno de ellos, la fuente es descargada.</p> + +<p>El propósito de esta regla es permitir a las fuente ser segmentados, así el navegador solo necesita descargar la fuente necesitada para el contexto de texto en una página en particular. Por ejemplo, un sitio con muchas localizaciones podría proveer fuentes separadas para el inglés, griego y japonés. Para los usuarios que ven la versión en inglés de la página, las fuentes para el griego y el japonés no son necesarias, y por lo tanto no se descargan, ahorrando ancho de banda.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* valores <unicode-range> */ +unicode-range: U+26; /* un único código */ +unicode-range: U+0-7F; +unicode-range: U+0025-00FF; /* rango de códigos */ +unicode-range: U+4??; /* rango por expresión */ +unicode-range: U+0025-00FF, U+4??; /* multiples valores */ +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><em><strong>un único código</strong></em></dt> + <dd>Un único código de caracter Unicode, por ejemplo <code>U+26</code>.</dd> + <dt><em><strong>un rango de código</strong></em></dt> + <dd>Un rango de códigos de caracter Unicode. Asi que, por ejemplo, <code>U+0025-00FF</code> significa <em>incluir todos caracteres en el rango <code>U+0025</code> a <code>U+00FF</code></em>.</dd> + <dt><em><strong>rango por expresión</strong></em></dt> + <dd>Un rango de códigos Unicode que contienen caracteres comodín, usando el caracter <code>'?'</code>, asi que, por ejemplo <code>U+4??</code> significa <em>incluir todos los caracteres en el rango <code>U+400</code> a <code>U+4FF</code></em>.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Hemos creado una etiqueta HTML que contiene un elemento {{HTMLElement("div")}}, que incluye un simbolo &, el cual queremos que se muestre con una fuente diferente. Para hacerlo obvio, usaremos una fuente sans-serif, <em>Helvetica</em> para el texto, y una fuente serif, <em>Times New Roman</em>, para el caracter &.</p> + +<div class="example"> +<pre class="brush: html"><div>Me & You = Us</div></pre> +</div> + +<p>En el CSS, puedes ver que en efecto estamos definiendo una separación completa {{cssxref("@font-face")}} el cual solo incluye un caracter, significando que solo ese caracter será estilizado con esa fuente. Podríamos haber hecho esto tambien encapsulando el caracter & en un elemento {{HTMLElement("span")}} y aplicando una fuente solo a ese elemento, pero esto es un elemento y una regla extra.</p> + +<div class="example"> +<pre class="brush: css">@font-face { + font-family: 'Ampersand'; + src: local('Times New Roman'); + unicode-range: U+26; +} + +div { + font-size: 4em; + font-family: Ampersand, Helvetica, sans-serif; +}</pre> + +<h3 id="Reultado">Reultado</h3> + +<p><img alt="What the example should looks like if your browser supports it." src="https://mdn.mozillademos.org/files/6043/Refresult.png"></p> +</div> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("css.at-rules.font-face.unicode-range")}}</p> diff --git a/files/es/web/css/@font-feature-values/index.html b/files/es/web/css/@font-feature-values/index.html new file mode 100644 index 0000000000..7966f7433e --- /dev/null +++ b/files/es/web/css/@font-feature-values/index.html @@ -0,0 +1,134 @@ +--- +title: '@font-feature-values' +slug: Web/CSS/@font-feature-values +tags: + - CSS + - Fuentes + - Referencia + - Regla-at +translation_of: Web/CSS/@font-feature-values +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/At-rule" title="At-rule">regla-at</a> <a href="/es/docs/Web/CSS" title="CSS">CSS</a> <strong><code>@font-feature-values</code></strong> permite a los autores usar un nombre común de {{cssxref("font-variant-alternates")}} para características activadas de distintas formas en OpenType. Permite simplificar el código CSS cuando se usan distintas fuentes.</p> + +<pre class="brush: css">@font-feature-values Font One { /* Cómo activar nice-style en Font One */ + @styleset { + nice-style: 12; + } +} + +@font-feature-values Font Two { /* Cómo activar nice-style en Font Two */ + @styleset { + nice-style: 4; + } +} + +… + +.nice-look { font-variant-alternates: styleset(nice-style); } /* Independiente de la fuente */ +</pre> + +<p>La regla-at <code>@font-feature-values</code> debe ser usada en la parte superior de la hoja de estilos, pero también dentro de <a href="/es/docs/Web/CSS/At-rule#Grupos_de_Reglas_Condicionales" title="CSS/At-rule#Conditional_Group_Rules">Grupos de reglas condicionales</a>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Bloques_de_valores_de_características">Bloques de valores de características</h3> + +<dl> + <dt><a name="@swash"><code>@swash</code></a></dt> + <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "swash()", "#swash()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de swash permite solo un valor: <code>ident1: 2</code> es válido con <code>ident2: 2 4</code> no lo es.</dd> + <dt><a name="@annotation"><code>@annotation</code></a></dt> + <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de annotation permite solo un valor: <code>ident1: 2</code> es válido con <code>ident2: 2 4</code> no lo es.</dd> + <dt><a name="@ornaments"><code>@ornaments</code></a></dt> + <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de ornaments permite solo un valor: <code>ident1: 2</code> es válido con <code>ident2: 2 4</code> no lo es.</dd> + <dt><a name="@stylistic"><code>@stylistic</code></a></dt> + <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de stylistic permite solo un valor: <code>ident1: 2</code> es válido con <code>ident2: 2 4</code> no lo es.</dd> + <dt><a name="@styleset"><code>@styleset</code></a></dt> + <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de stylset permite una cantidad ilimitada de valores: <code>ident1: 2 4 12 1</code> corresponden a los valores OpenType <code>ss02</code>, <code>ss04</code>, <code>ss12</code>, <code>ss01</code>. Nótese que los valores superiores a <code>99</code> son válidos, pero no corresponden a ningún valor OpenType y serán ignorados.</dd> + <dt><a name="@character-variant"><code>@character-variant</code></a></dt> + <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de character-variant permite uno o dos valores: <code>ident1: 2</code> corresponde a <code>cv02=1</code> y <code>ident2: 2 4</code> corresponde a <code>cv02)4</code> e <code>ident2: 2 4 5</code> no es válido.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("34")}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("34")}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implementación experimental de las extensiones CSS Fonts Nivel 3 estaba disponible desde Gecko 24. Estaba regido por la preferencia <code>layout.css.font-features.enabled</code> con valor predeterminado <code>true</code> en Nightly y Aurora solamente.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>La propiedad {{cssxref("font-variant-alternates")}} que usa valores definidos por esta regla-at.</li> +</ul> diff --git a/files/es/web/css/@import/index.html b/files/es/web/css/@import/index.html new file mode 100644 index 0000000000..145304cf70 --- /dev/null +++ b/files/es/web/css/@import/index.html @@ -0,0 +1,118 @@ +--- +title: '@import' +slug: Web/CSS/@import +translation_of: Web/CSS/@import +--- +<p>{{CSSRef}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La regla-at <a href="/en/CSS" title="/en/CSS">CSS</a> <code>@import</code> permite importar reglas desde otras hojas de estilo. Estas reglas deben preceder a todos los otros tipos de reglas, excepto a las reglas {{ cssxref("@charset") }}; como esto no es una <a href="/en/CSS/Syntax#nested_statements" title="/en/CSS/Syntax#nested_statements">declaración anidada</a>, no puede ser usado dentro de <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">grupos condicionales de reglas-at</a>.</p> + +<p>Para que los agentes de usuario puedan evitar recuperar recursos para tipos de medios no soportados, los autores pueden especificar reglas dependientes del tipo de medio <code>@import</code>. Estas condiciones @import se especifican separando por una coma las <a href="/en/CSS/Media_queries" title="/en/CSS/Media_queries">consultas de medios (media query)</a> despues de la <em>url</em>. En la ausencia de cualquier consulta de medios (media query), la importación es incondicional. Especificando <code>all</code> para el medio tiene el mismo efecto.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="eval">@import <em>url</em>; <em>or</em> +@import <em>url</em> <em>list-of-media-queries</em>; +</pre> + +<p>Dónde :</p> + +<dl> + <dt style="margin: 0 40px;"><em>url</em></dt> + <dd style="margin: 0 40px;">es una <span style="background-color: rgb(250, 251, 252); font-family: consolas,monaco,andale mono,monospace; font-size: 1rem; line-height: 19px; white-space: pre;">{{cssxref("<string>")}} </span>o un {{cssxref("<uri>")}}</dd> + <dd style="margin: 0pt 40px;">Representa la ubicación del recurso a importar. La <em>url</em> puede ser absoluta o relativa.</dd> + <dt style="margin: 0 40px;"><em>list-of-media-queries</em></dt> + <dd style="margin: 0 40px;">Es una lista separada por comas de <a href="/en/CSS/Media_queries" title="/en/CSS/Media_queries">consultas de medios (media query)</a> que condicionan la aplicación de las reglas CSS definidas en el enlace <em>url</em>. Si el navegador no soporta cualquiera de estos <a href="/en/CSS/Media_queries" title="/en/CSS/Media_queries">consultas de medios (media query)</a>, ni siquiera cargará el recurso vinculado.</dd> +</dl> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<pre class="eval">@import url("fineprint.css") print; +@import url("bluish.css") projection, tv; +@import 'custom.css'; +@import "common.css" screen, projection; +@import url('landscape.css') screen and (orientation:landscape); +</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Media Queries', '#media0', '@import') }}</td> + <td>{{ Spec2('CSS3 Media Queries') }}</td> + <td>Extiende la sintaxis para soportar cualquier <a href="/en/CSS/Media_queries" title="/en/CSS/Media_queries">consultas de medios (media query)</a> y no sólo los <a href="/en/CSS/@media#Media_types" title="/en/CSS/@media#Media_types">tipos de medios</a> simples.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'cascade.html#at-import', '@import') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Añade soporte para <span style="background-color: rgb(250, 251, 252); font-family: consolas,monaco,andale mono,monospace; font-size: 1rem; line-height: 19px; white-space: pre;">{{cssxref("<string>")}}</span><br> + para denotar la <em>url</em> de una hoja de estilo,<br> + y es requerida para insertar la regla <code>@import</code> en el principio del documento CSS.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#the-cascade', '@import') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>5.5</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>5.5</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/@keyframes/index.html b/files/es/web/css/@keyframes/index.html new file mode 100644 index 0000000000..55944c37db --- /dev/null +++ b/files/es/web/css/@keyframes/index.html @@ -0,0 +1,178 @@ +--- +title: '@keyframes' +slug: Web/CSS/@keyframes +translation_of: Web/CSS/@keyframes +--- +<p>{{ CSSRef() }} {{ SeeCompatTable() }}</p> + +<h3 id="Resumen">Resumen</h3> + +<p>La regla arroba <code>@keyframes</code> permite a los autores controlar los pasos intermedios en una secuencia de animación CSS mediante el establecimiento de keyframes (o puntos de trayectoria) a lo largo de la secuencia de animación que debe ser alcanzado por determinados puntos durante la animación. Esto le da un control más específico sobre los pasos intermedios de la secuencia de animación que se obtiene al dejar que el navegador maneje todo automáticamente.</p> + +<div>Para utilizar keyframes, se crea una regla de <span style="font-family: monospace;">@keyframes</span> con un nombre que es utilizada por la propiedad {{cssxref ("animation-name")}} para que coincida con una animación de keyframe a su lista. Cada regla <span style="font-family: monospace; line-height: 1.5em;">@keyframes </span><span style="line-height: 1.5em;">contiene una lista de estilo de selectores de keyframe, cada una de los cuales está compuesto de un porcentaje a lo largo de la animación en la que se produce el keyframe así como un bloque que contiene la información de estilo para ese keyframe.</span></div> + +<div> </div> + +<div>Puede listar los keyframes en cualquier orden, éstos serán tratados en el orden en que los porcentajes especificados indican que debe ocurrir.</div> + +<h4 id="Listas_válidas_de_keyframe">Listas válidas de keyframe</h4> + +<div>Para obtener una lista de keyframe que sea válida, debe incluir reglas para al menos los tiempos <span style="font-family: courier new,andale mono,monospace; line-height: normal;">0%</span><span style="line-height: 1.5em;"> (o </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">desde</span><span style="line-height: 1.5em;">) y </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">100%</span><span style="line-height: 1.5em;"> (o </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">hacia</span><span style="line-height: 1.5em;">) (o sea, los estados inicial y final de la animación). Si ambos desplazamientos de tiempo no se especifican, la declaración </span>keyframe<span style="line-height: 1.5em;"> es inválida y no se puede utilizar para la animación.</span></div> + +<div> </div> + +<div>Si se incluyen las propiedades que no se pueden animar en sus reglas de keyframe, serán ignoradas, pero las propiedades admitidas todavía estarán animadas.</div> + +<h4 id="Duplicar_resolución">Duplicar resolución</h4> + +<div>Si existen varios conjuntos de keyframe para un nombre dado, el último encontrado se utiliza. Las reglas de <span style="font-family: courier new,andale mono,monospace;">@keyframes</span> no estan en cascada, por lo que nunca las animaciones se conducen en keyframe desde un conjunto de reglas más de uno.</div> + +<div> </div> + +<div>Si una animación en tiempo compensado dado se duplica, el último keyframe en la regla de <span style="font-family: courier new,andale mono,monospace;">@keyframes</span> para que ese porcentaje se utilice para ese frame. No hay una cascada dentro de una regla de <span style="font-family: courier new,andale mono,monospace;">@keyframes</span><br> +si varios kayframes especifican los valores de los mismos porcentajes.</div> + +<div> +<h3 id="Cuando_las_propiedades_son_dejadas_fuera_de_algunos_keyframes">Cuando las propiedades son dejadas fuera de algunos keyframes</h3> + +<div>Cualquier propiedad que no se especifican en cualquier keyframes son interpoladas (con la excepción de aquellas que no pueden ser interpoladas, las que son eliminadas de la animación completamente). Por ejemplo:</div> +</div> + +<pre class="brush: css">@keyframes identifier { + 0% { top: 0; left: 0; } + 30% { top: 50px; } + 68%, 72% { left: 50px; } + 100% { top: 100px; left: 100%; } +} +</pre> + +<div>En este caso, la propiedad {{cssxref ("top")}} anima con los keyframes de 0%, 30% y 100%, y {{cssxref ("left")}} anima utilizando los keyframes 0%, 68%, y 100%.</div> + +<div> </div> + +<div>Sólo las propiedades que se especifican tanto en el 0% y 100% de keyframe serán animadas; cualquier propiedad no incluido en ambos de los keyframes conservarán su valor de partida para la duración de la secuencia de animación.</div> + +<h3 id="Cuando_se_define_un_keyframe_varias_veces">Cuando se define un keyframe varias veces</h3> + +<div>La especificación define que si un keyframe se define varias veces, pero no todas las propiedades afectadas se especifican en cada keyframe, sólo los valores especificados en el último keyframe se consideran. Por ejemplo:</div> + +<pre>@keyframes identifier { + 0% { top: 0; } + 50% { top: 30px; left: 20px; } + 50% { top: 10px; } + 100% { top: 0; } +} +</pre> + +<div> +<div>En este ejemplo, en el 50% del keyframe, el valor utilizado es <code style="font-size: 14px;">top: 10px</code> y todos los demás valores en este keyframe se ignoran.</div> + +<div> </div> + +<div>{{non-standard_inline}} {{fx_minversion_inline ("14")}} los keyframes (fotogramas clave) en cascada son compatibles a partir de Firefox 14. Para el ejemplo anterior, esto significa que en el fotograma clave 50%, el valor left: 20px será considerado. Esto no está definido en la especificación todavía, pero se está discutiendo.</div> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre>@keyframes <identifier> { + [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]* +} +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><identifier></code></dt> + <dd>Un nombre que identifica la lista de keyframe. Debe coincidir con el identificador de la producción en la sintaxis del CSS.</dd> + <dt><code>from</code></dt> + <dd>Un desplazamiento inicial de <code>0%</code>.</dd> + <dt><code>to</code></dt> + <dd>Un desplazamiento final de <code>100%</code>.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Un porcentaje de las veces aunque la secuencia de la animación en la que el keyframe especifica debe ocurrir.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Mira los ejemplos del <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Compatibilidad del navegador</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Estadp</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations', '#keyframes', '@keyframes') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10</td> + <td>12 {{ property_prefix("-o") }}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>4.0{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("16.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td> + <p>{{ CompatUnknown()}}iones</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Vease_también">Vease también</h2> +</div> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="en/CSS/CSS_animations">Using CSS animations</a></li> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> +</ul> diff --git a/files/es/web/css/@media/altura/index.html b/files/es/web/css/@media/altura/index.html new file mode 100644 index 0000000000..7cb29fe768 --- /dev/null +++ b/files/es/web/css/@media/altura/index.html @@ -0,0 +1,82 @@ +--- +title: Altura +slug: Web/CSS/@media/altura +tags: + - '@media' + - CSS + - Media Queries + - Referencia + - características media +translation_of: Web/CSS/@media/height +--- +<div>{{cssref}}</div> + +<p>Las <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">media feature (consulta de medios) </a><strong><code>height</code></strong> puede ser usada para aplicar estilos basados en la altura del {{glossary("viewport")}} (o la caja de la página, para <a href="/en-US/docs/Web/CSS/Paged_media">paged media</a>).</p> + +<h2 id="Sintáxis">Sintáxis</h2> + +<p>La característica <code>height</code> es especificada como un valor {{cssxref("<length>")}} representando la altura de la vista (viewport). Es una característica en rangos, lo que siginifica que puede ser prefijada con las variantes <strong><code>min-height</code></strong> y <code><strong>max-height</strong></code> para consultar valores mínimos y máximos, respectivamente.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Watch this element as you resize your viewport's height.</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">/* Altura exacta */ +@media (height: 360px) { + div { + color: red; + } +} + +/* Altura mínima */ +@media (min-height: 25rem) { + div { + background: yellow; + } +} + +/* Altura máxima */ +@media (max-height: 40rem) { + div { + border: 2px solid blue; + } +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Example','90%')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#height', 'height')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>El valor ahora puede ser negativo, en cuyo caso se calcula como negativo.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#height', 'height')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Definición inicial. El valor debe ser positivo.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.at-rules.media.height")}}</p> diff --git a/files/es/web/css/@media/color/index.html b/files/es/web/css/@media/color/index.html new file mode 100644 index 0000000000..462a566a07 --- /dev/null +++ b/files/es/web/css/@media/color/index.html @@ -0,0 +1,80 @@ +--- +title: color +slug: Web/CSS/@media/color +tags: + - CSS + - Referencia +translation_of: Web/CSS/@media/color +--- +<p><strong><code>color</code></strong> es una característica CSS relativa al medio de presentación cuyo valor es un <a href="/en-US/docs/Web/CSS/integer"><code><integer></code></a> que contiene el número de bits por componente de color en el dispositivo de salida, o cero si el dispositivivo no es en color.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#color', 'color')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Definición Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con los distintos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/es/web/css/@media/display-mode/index.html b/files/es/web/css/@media/display-mode/index.html new file mode 100644 index 0000000000..91b1d2cce4 --- /dev/null +++ b/files/es/web/css/@media/display-mode/index.html @@ -0,0 +1,90 @@ +--- +title: display-mode +slug: Web/CSS/@media/display-mode +tags: + - '@media' + - CSS + - Media Queries + - Referencia + - características de medio + - consultas de medio + - display + - display-mode + - media feature +translation_of: Web/CSS/@media/display-mode +--- +<div>{{cssref}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">característica de medios (media feature) de CSS</a> <strong><code>display-mode</code></strong> puede ser utilizada para probar el modo de visualización de una aplicación. Puede ser usada para proveer de una experiencia de usuario consistente entre el lanzamiento de un sitio desde una URL y desde un ícono del escritorio.</p> + +<p>La característica corresponde al miembro <a href="/en-US/docs/Web/Manifest#display"><code>display</code></a> del manifiesto de la aplicación web. Ambos aplican al contexto de navegación de nivel más alto y a cualquier hijo del contexto de navegación. La característica de consulta aplica sin importar si el manifiesto de la aplicación web esta presente</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La característica <code>display-mode</code> se especifica como un valor de palabra clave elegida de la siguiente lista.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Modo de visualización</th> + <th scope="col">Descripción</th> + <th scope="col"><code>Modo de visualización de reserva</code></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>fullscreen</code></td> + <td>Toda la área disponible de desplegado es usada y ningún agente de usuario {{glossary("chrome")}} es mostrado.</td> + <td><code>standalone</code></td> + </tr> + <tr> + <td><code>standalone</code></td> + <td>La aplicación se vera y sentira como una aplicación independiente. Esto puede incluir que la aplicación tenga una ventana diferente, su propio ícono en el lanzador de aplicaciones, etc. En este modo, el agente de usuario excluirá elementos UI paara controlar la navegación, pero puede incluir otros elementos UI como la barra de estado.</td> + <td><code>minimal-ui</code></td> + </tr> + <tr> + <td><code>minimal-ui</code></td> + <td>La aplicación se vera y sentira como una apicación autónoma, pero tendra un conjunto mínimo de elementos UI para controlar la navegación. Los elementos pueden variar por navegador.</td> + <td><code>browser</code></td> + </tr> + <tr> + <td><code>browser</code></td> + <td>La aplicación se abre en una pestaña o nueva ventana convencional del navegador, dependiendo del navegador y la plataforma.</td> + <td>(none)</td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: css">@media all and (display-mode: fullscreen) { + body { + margin: 0; + border: 5px solid black; + } +}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}</td> + <td>{{Spec2('Manifest')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + + + +<p>{{Compat("css.at-rules.media.display-mode")}}</p> diff --git a/files/es/web/css/@media/hover/index.html b/files/es/web/css/@media/hover/index.html new file mode 100644 index 0000000000..770d2e7494 --- /dev/null +++ b/files/es/web/css/@media/hover/index.html @@ -0,0 +1,70 @@ +--- +title: hover +slug: Web/CSS/@media/hover +tags: + - '@media' + - CSS + - Consulta de medios + - Media Queires + - Referencia + - característica de medios + - media feature +translation_of: Web/CSS/@media/hover +--- +<div>{{cssref}}</div> + +<p>La <a href="/en-US/docs/CSS">característica de medios CSS</a> <strong><code>hover</code></strong>, puede se utilizada para probar si el mecanismo de entrada primario de un usuario puede flotar sobre los elementos.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La característica <font face="consolas, Liberation Mono, courier, monospace">hover</font> es especificada como un valor de palabra clave elegida de la siguiente lista.</p> + +<dl> + <dt><code>none</code></dt> + <dd>El mecanismo de entrada primario no puede flotar o no puede convenientemente flotar (es decir, algunos dispositivos mobiles emulan la flotación cuando el usuario presiona inconvenientemente por bastante rato la pantalla), o no hay mecanismo de puntero primario.</dd> + <dt><code>hover</code></dt> + <dd>El mecanismo de entrada primario puede convenientemente flotar sobre los elementos.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="#">Try hovering over me!</a></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@media (hover: hover) { + a:hover { + background: yellow; + } +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2> + + + +<p>{{Compat("css.at-rules.media.hover")}}</p> diff --git a/files/es/web/css/@media/index.html b/files/es/web/css/@media/index.html new file mode 100644 index 0000000000..05e5f6ec5a --- /dev/null +++ b/files/es/web/css/@media/index.html @@ -0,0 +1,360 @@ +--- +title: '@media' +slug: Web/CSS/@media +translation_of: Web/CSS/@media +--- +<p>{{CSSRef}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/At-rule" title="en/CSS/At-rule">regla-at</a> <a href="/es/docs/Web/CSS" title="CSS">CSS</a> <code>@media</code> asocia un grupo de declaraciones anidadas, en un bloque CSS delimitado por llaves, con una condición definida por un <a href="/es/docs/CSS/Media_queries" title="CSS media queries">media query</a>. La regla-at <code>@media</code> puede ser usada no solo en el nivel superior de la hoja de estilos, sino también dentro de cualquier <a href="/es/docs/Web/CSS/At-rule#Grupos_de_Reglas_Condicionales" title="en/CSS/At-rule#Conditional_Group_Rules">grupo de reglas conditionales</a>.</p> + +<p>La regla-at <code>@media</code> puede ser accesible por medio de la interfaz de modelo de objeto {{domxref("CSSMediaRule")}}.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<p>Un <code><media-query></code> está compuesto por un tipo de medio opcional y/o un conjunto de características de medio.</p> + +<h2 id="Media_types" name="Media_types">Tipos de medios</h2> + +<dl> + <dt>all</dt> + <dd>Aplicable a todos los dispositivos.</dd> + <dt>print</dt> + <dd>Destinado material paginado y para documentos visibles en pantalla en modo de vista previa para impresión. Por favor, consulte la sección de <a href="/es/docs/Web/CSS/Paged_Media">medios paginados</a>, y la <a href="/es/docs/Web/CSS/Introducción/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">sección de Media en el tutorial de Introducción</a> para más información acerca de problemas de formateo específicos para los medios paginados.</dd> + <dt>screen</dt> + <dd>Destinado a principalmente a pantallas de computadora a color.</dd> + <dt>speech</dt> + <dd>Destinado a sintetizadores de voz. Nota: CSS2 tenía un tipo de medio similar llamado 'aural' para este propósito. Vea el apéndice sobre hojas de estilo aural para más detalles.</dd> +</dl> + +<div class="note"><strong>Nota:</strong> CSS2.1 y Media Queries 3 definió varios tipos de media adicionales (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>), pero fueron descontinuados en <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> y no deben ser usados.</div> + +<h2 id="Media_features" name="Media_features">Características de Medios (media feature)</h2> + +<p>Cada <em>característica de medios</em> verifica una característica específica del navegador o dispositivo.</p> + +<table> + <thead> + <tr> + <th>Nombre</th> + <th>Resumen</th> + <th>Notas</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/width"><code>width</code></a></td> + <td>Anchura del viewport</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/height"><code>height</code></a></td> + <td>Altura del viewport</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/aspect-ratio"><code>aspect-ratio</code></a></td> + <td>Relación de aspecto anchura-altura del viewport</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/orientation"><code>orientation</code></a></td> + <td>Orientación del viewport</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a></td> + <td>Densidad de pixeles del dispositivo</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/scan"><code>scan</code></a></td> + <td>Proceso de escaneo del dispositivo</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/grid"><code>grid</code></a></td> + <td>¿El dispositivo es un grid o un mapa de bits?</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/update-frequency"><code>update-frequency</code></a></td> + <td>Qué tan rápido (si lo hace) puede el dispositivo modificar la apariencia del contenido</td> + <td>Incluido en Media Queries Nivel 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/overflow-block"><code>overflow-block</code></a></td> + <td>Cómo maneja el dispositivo el contenido que excede los límites del viewport a lo largo del eje de bloque</td> + <td>Incluido en Media Queries Nivel 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/overflow-inline"><code>overflow-inline</code></a></td> + <td>¿Puede desplazarse hacia el contenido que excede los límites del viewport?</td> + <td>Incluido en Media Queries Nivel 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/color"><code>color</code></a></td> + <td>Componente de número de bits por color del dispositivo, o cero si el dispositivo no es a color.</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/color-index"><code>color-index</code></a></td> + <td>Número de entradas en la tabla de búsqueda de color del dispositivo, o cero si el dispositivo no usa una tabla.</td> + <td> </td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/@media/display-mode">display-mode</a></code></td> + <td>Modo de visualización de la aplicación, según se especifique en la <a href="/es/docs/Web/Manifest#display">propiedad display</a> del manifiesto de la aplicación web.</td> + <td>Definido en la <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">especificación del Manifiesto de Aplicación Web</a>.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/monochrome"><code>monochrome</code></a></td> + <td>Bits por pixel en el buffer de marco monocromático del dispositivo, o 0 si el dispositivo no es monocromático.</td> + <td> </td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/inverted-colors"><code>inverted-colors</code></a></td> + <td>¿El agente usuario o el Sistema Operativo está invirtiendo los colores?</td> + <td>Incluido en Media Queries Nivel 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code></a></td> + <td>¿El mecanismo de entrada principal es un dispositivo apuntador? y de ser así, ¿qué tan preciso es?</td> + <td>Incluido en Media Queries Nivel 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/hover"><code>hover</code></a></td> + <td>¿El mecanismo de entrada principal permite que el usuario posicione el puntero sobre los elementos?</td> + <td>Incluido en Media Queries Nivel 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/any-pointer"><code>any-pointer</code></a></td> + <td>¿Hay algún mecanismo de entrada que sea dispositivo apuntador? y de ser así, ¿qué tan preciso es éste?</td> + <td>Incluido en Media Queries Nivel 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/any-hover"><code>any-hover</code></a></td> + <td>¿Algún mecanismo de entrada disponible permite que el usuario posicione el puntero sobre los elementos?</td> + <td>Incluido en Media Queries Nivel 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/light-level"><code>light-level</code></a></td> + <td>Nivel de luz ambiental actual</td> + <td>Incluido en Media Queries Nivel 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/scripting"><code>scripting</code></a></td> + <td>¿Se soporta lenguaje de script (p.ej. JavaScript)?</td> + <td>Incluido en Media Queries Nivel 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/device-width"><code>device-width</code></a> {{obsolete_inline}}</td> + <td>Anchura de la superficie de representación del dispositivo</td> + <td>Descontinuado en Media Queries Nivel 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/device-height"><code>device-height</code></a> {{obsolete_inline}}</td> + <td>Altura de la superficie de representación del dispositivo</td> + <td>Descontinuado en Media Queries Nivel 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/device-aspect-ratio"><code>device-aspect-ratio</code></a> {{obsolete_inline}}</td> + <td>Relación de aspecto anchura-altura del dispositivo</td> + <td>Descontinuado en Media Queries Nivel 4</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio"><code>-webkit-device-pixel-ratio</code></a> {{non-standard_inline}}</td> + <td>Número de pixeles reales del dispositivo por pixel CSS</td> + <td>No estándar; Específica de WebKit/Blink. De ser posible, use la característica <code><a href="/en-US/docs/Web/CSS/@media/resolution">resolution</a> en su lugar</code>.</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a> {{non-standard_inline}}</td> + <td>¿Se soportan {{cssxref("transform", "transformaciones")}} 3D?</td> + <td>No estándar; Específica de WebKit/Blink</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a> {{non-standard_inline}}</td> + <td>¿Se soportan {{cssxref("transform", "transformaciones")}} 2D?</td> + <td>No estándar; Específica de WebKit</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a> {{non-standard_inline}}</td> + <td>Se soportan {{cssxref("transition", "transiciones")}} CSS?</td> + <td>No estándar; Específica de WebKit</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a> {{non-standard_inline}}</td> + <td>¿Se soportan {{cssxref("animation", "animaciones")}} CSS?</td> + <td>No estándar; Específica de WebKit</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<pre class="brush: css">@media print { + body { font-size: 10pt } +} +@media screen { + body { font-size: 13px } +} +@media screen, print { + body { line-height: 1.2 } +} +@media only screen + and (min-device-width: 320px) + and (max-device-width: 480px) + and (-webkit-min-device-pixel-ratio: 2) { + body { line-height: 1.4 } +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}}</td> + <td>{{Spec2('Compat')}}</td> + <td>Estandariza las características <code>-webkit-device-pixel-ratio</code> y <code>-webkit-transform-3d</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td>Define la sintaxis básica de la regla <code>@media</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td> + <p>Se agregan las características <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>light-level</code>, <code>update-frequency</code>, <code>overflow-block</code>, y <code>overflow-inline</code>.<br> + Se descontinúan todos los tipos de medios excepto <code>screen</code>, <code>print</code>, <code>speech</code>, y <code>all</code>.</p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Sin cambios.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico (<code>all</code>, <code>print</code>, <code>screen</code>)</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop(1.7) }}</td> + <td>6.0</td> + <td>9.2</td> + <td>1.3</td> + </tr> + <tr> + <td><code>speech</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9.2</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Media features (características de medios)</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop(1.7) }}</td> + <td>9.0</td> + <td>9.2</td> + <td>1.3</td> + </tr> + <tr> + <td>Característica <code>display-mode</code></td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop(47) }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico (<code>all</code>, <code>print</code>, <code>screen</code>)</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile(1.7) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9.0</td> + <td>3.1</td> + </tr> + <tr> + <td><code>speech</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9.0</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Media features (características de medios)</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile(1.7) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9.0</td> + <td>3.1</td> + </tr> + <tr> + <td>Característica <code>display-mode</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Media queries</a></li> + <li>El modelo CSSOM {{ domxref("CSSMediaRule") }} asociado a esta regla-at.</li> +</ul> diff --git a/files/es/web/css/@media/pointer/index.html b/files/es/web/css/@media/pointer/index.html new file mode 100644 index 0000000000..f7fca78ca6 --- /dev/null +++ b/files/es/web/css/@media/pointer/index.html @@ -0,0 +1,101 @@ +--- +title: pointer +slug: Web/CSS/@media/pointer +translation_of: Web/CSS/@media/pointer +--- +<div>{{cssref}}</div> + +<p>La <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">caracteristica</a> <strong><code>pointer</code></strong> <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS">CSS</a> comprueba si el usuario tiene un dispositivo de puntero (como el ratón), y si es así, cuán preciso es el dispositivo de puntero primario.</p> + +<div class="note"> +<p><strong>Nota:</strong> Si quieres comprobar la precisión de cualquier dispositivo apuntador, usa <code><a href="/en-US/docs/Web/CSS/@media/any-pointer">any-pointer</a></code> en su lugar.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La propiedad <code>pointer</code> se especifica como un valor de palabra clave elegido de la lista que figura a continuación.</p> + +<dl> + <dt><code>none</code></dt> + <dd>El mecanismo de entrada principal no incluye un dispositivo apuntador.</dd> + <dt><code>coarse</code></dt> + <dd>El mecanismo primario de entrada incluye un dispositivo de apuntamiento de precisión limitada.</dd> + <dt><code>fine</code></dt> + <dd>El mecanismo de entrada principal incluye un dispositivo de apuntamiento preciso.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Este ejemplo crea una pequeño checkbox para los usuarios con punteros primarios finos y un gran checkbox para los usuarios con punteros primarios gruesos.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input id="test" type="checkbox" /> +<label for="test">Mírame!</label></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input[type="checkbox"] { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + border: solid; + margin: 0; +} + +input[type="checkbox"]:checked { + background: gray; +} + +@media (pointer: fine) { + input[type="checkbox"] { + width: 15px; + height: 15px; + border-width: 1px; + border-color: blue; + } +} + +@media (pointer: coarse) { + input[type="checkbox"] { + width: 30px; + height: 30px; + border-width: 2px; + border-color: red; + } +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Status</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad">Compatibilidad</h2> + + + +<p>{{Compat("css.at-rules.media.pointer")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/@media/any-pointer">The <code>any-pointer</code> media feature</a></li> +</ul> diff --git a/files/es/web/css/@media/resolución/index.html b/files/es/web/css/@media/resolución/index.html new file mode 100644 index 0000000000..bd2beb4866 --- /dev/null +++ b/files/es/web/css/@media/resolución/index.html @@ -0,0 +1,88 @@ +--- +title: Resolución +slug: Web/CSS/@media/resolución +tags: + - Referencia + - resolución +translation_of: Web/CSS/@media/resolution +--- +<p><strong><code>resolución</code></strong><code> es una función de medios de CSS</code> cuyo valor es la densidad de píxeles del dispositivo de salida, como un CSS<a href="/en-US/docs/Web/CSS/resolution"><code><resolution></code></a>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th> + <table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + </tr> + </tbody> + </table> + </th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/es/web/css/@media/width/index.html b/files/es/web/css/@media/width/index.html new file mode 100644 index 0000000000..a4392047b3 --- /dev/null +++ b/files/es/web/css/@media/width/index.html @@ -0,0 +1,124 @@ +--- +title: width +slug: Web/CSS/@media/width +translation_of: Web/CSS/@media/width +--- +<div>{{cssref}}</div> + +<p>El <strong><code>width</code></strong> <a href="/en-US/docs/CSS">CSS</a> {{cssxref("@media")}} media caracteristica puede ser usada para aplicar estilos basados en el ancho de el {{glossary("viewport")}} (o la caja de la pagina, para <a href="/en-US/docs/Web/CSS/Paged_media">paged media</a>).</p> + +<h2 id="Syntax">Syntax</h2> + +<p>La característica <code>width</code> es especificada como {{cssxref("<length>")}} valor que representa el ancho de la ventana gráfica. Es una función de rango, lo que significa que también puede usar el prefijo <strong><code>min-width</code></strong> and <code><strong>max-width</strong></code> variantes para consultar valores mínimos y máximos, respectivamente.</p> + +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Watch this element as you resize your viewport's width.</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">/* Exact width */ +@media (width: 360px) { + div { + color: red; + } +} + +/* Minimum width */ +@media (min-width: 35rem) { + div { + background: yellow; + } +} + +/* Maximum width */ +@media (max-width: 50rem) { + div { + border: 2px solid blue; + } +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Example','90%')}}</p> + +<h2 id="Specificaciones">Specificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Media Queries', '#width', 'width')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td>The value can now be negative, in which case it computes to false.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#width', 'width')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Initial definition. The value must be nonnegative.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadores Compatibles</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table" style="height: 117px; width: 561px;"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th> + <p>Firefox (Gecko)</p> + </th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>9.0</td> + <td>14+</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table" style="height: 91px; width: 499px;"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>56+</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>9.3+</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/@namespace/index.html b/files/es/web/css/@namespace/index.html new file mode 100644 index 0000000000..ef48776311 --- /dev/null +++ b/files/es/web/css/@namespace/index.html @@ -0,0 +1,71 @@ +--- +title: '@namespace' +slug: Web/CSS/@namespace +translation_of: Web/CSS/@namespace +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>@namespace</code></strong> es una <a href="/en-US/docs/Web/CSS/At-rule" title="CSS at-rules">regla</a> que define <a href="/en-US/docs/Namespaces">XML namespace</a> a ser usados en una <a href="/en-US/docs/Glossary/CSS">hoja de estilos CSS</a>. Los namespaces definidos pueden utilizarse para restringir <a href="/en-US/docs/Web/CSS/Universal_selectors">selectores universales</a>, <a href="/en-US/docs/Web/CSS/Type_selectors">types</a>, y <a href="/en-US/docs/Web/CSS/Attribute_selectors">selectores de atributos</a> para seleccionar </span>sólo elementos dentro de ese namespace.<span class="seoSummary">La regla <code>@namespace</code> generalmente </span>sólo es útil cuando se trata de documents que contienen múltiples namespace<span class="seoSummary">—como HTML5 con SVG o MathML, o XML que mezcla</span>múltiples<span class="seoSummary">vocabularios.</span></p> + +<pre class="brush: css no-line-numbers">@namespace url(http://www.w3.org/1999/xhtml); +@namespace svg url(http://www.w3.org/2000/svg); + +/* Esto coincide con todos los elementos XHTML <a>, ya que el XHTML es el namespace por defecto sin prefijo */ +a {} + +/* Esto coincide con todos los elementos SVG <a> */ +svg|a {} + +/* Esto concuerda con todos los elementos XHTML y SVG <a> elements */ +*|a {}</pre> + +<p>Cualquier <code>@namespace</code> debe seguir todas las reglas de <a href="/en-US/docs/Web/CSS/%40charset">@charset</a> y <a href="/en-US/docs/Web/CSS/%40import">@import</a>, y preceder a todas las demás reglas y <a href="/en-US/docs/Web/API/CSSStyleDeclaration">declaraciones de estilo</a> de una hoja de estilos.</p> + +<p>Se puede utilizar <code>@namespace</code> para definirun <strong>namespace por defecto</strong> de una hoja de estilos. Cuando se define un namespace por defecto, todos los selectores universales y tipos (pero no los selectores de atributo, véase la nota a continuación) se aplican únicamente a los elementos de ese namespace</p> + +<p>La regla <code>@namespace</code> también puede usarse para definir un <strong>prefijo de namespace</strong>. Cuando un selector universal, tipo, o selector de atributo se antepone a un prefijo de un namespace, ese selector sólo coincide si el namespace y el nombre del elemento o atributo coinciden.</p> + +<p>En <a href="/en-US/docs/Glossary/HTML5">HTML5</a>, conocidos como<a href="https://html.spec.whatwg.org/#foreign-elements"> elementos externos</a> automaticamente se les asignarán un namespace. Esto significa que los elementos HTML actuarán como si estuvieran en un namespace XHTML (<code>http://www.w3.org/1999/xhtml</code>), incluso si no hay ningún atributo xmlns en ninguna parte del document, y los elementos <a href="/en-US/docs/Web/SVG/Element/svg"><svg></a> y <a href="/en-US/docs/Web/MathML/Element/math"><math></a> se les asignará un namespace propio (<code>http://www.w3.org/2000/svg</code> and <code>http://www.w3.org/1998/Math/MathML</code>).</p> + +<div class="note"> +<p><strong>Nota:</strong> En XML, a menos que se defina un prefijo directamente sobre un atributo (<em>ejemplo.</em>, <code>xlink:href</code>), ese atributo no tiene namespace. En otras palabras, los atributos no heredan el namespace del elemento en el que están. Para que coincida con este comportamiento, el namespace por defecto en CSS no se aplica a los selectores de atributos.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">/* Namespace por defecto */ +@namespace url(<em>XML-namespace-URL</em>); +@namespace "<em>XML-namespace-URL</em>"; + +/* Namespace sin prefijo */ +@namespace <em>prefix</em> url(<em>XML-namespace-URL</em>); +@namespace <em>prefix</em> "<em>XML-namespace-URL</em>";</pre> + +<h3 id="Sintaxis_oficial">Sintaxis oficial</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}</td> + <td>{{Spec2('CSS3 Namespaces')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad">Compatibilidad</h2> + + + +<p>{{Compat("css.at-rules.namespace")}}</p> diff --git a/files/es/web/css/@page/index.html b/files/es/web/css/@page/index.html new file mode 100644 index 0000000000..b13d0eddf7 --- /dev/null +++ b/files/es/web/css/@page/index.html @@ -0,0 +1,129 @@ +--- +title: '@page' +slug: Web/CSS/@page +translation_of: Web/CSS/@page +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La regla @page es usada para modificar algunas propiedades CSS cuando se va a imprimir una página web.<strong> </strong>No se pueden cambiar todas las propiedades CSS con <code>@page, </code>solo los márgenes, las líneas viudas, huérfanas y los saltos de página. Cualquier intento de cambiar otra propiedad será ignorada.</p> + +<p>La regla <code>@page</code> puede ser accesada por medio de la interfaz modelo objeto {{domxref("CSSPageRule")}}.</p> + +<div class="note"><strong>Nota:</strong> La W3C esta discutiendo como manejar las unidades relativas {{cssxref("<length>")}} : <code>vh</code>, <code>vw</code>, <code>vmin</code>, y <code>vmax</code>. Mientras tanto, se recomienda no usarlas en la regla <code>@page</code>.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Descriptores">Descriptores</h3> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/@page/size"><code>size</code></a></dt> + <dd>Especifica el tamaño y la orientación de la caja objetivo de la página. En general, una caja es representada dentro de una hoja, también indica el tamaño de la hoja destino.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/@page/marks"><code>marks</code></a></dt> + <dd>Añade marcas de corte y/o registro al documento.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt> + <dd>Especifica la extensión más allá de la caja de página a la que se recorta el procesamiento de página.</dd> +</dl> + +<h3 id="Sintaxis_Formal">Sintaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Por favor dirígete a las <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classes</a> de <code>@page</code> por ejemplos.</p> + +<ul> + <li>{{Cssxref(":blank")}}</li> + <li>{{Cssxref(":first")}}</li> + <li>{{Cssxref(":left")}}</li> + <li>{{Cssxref(":right")}}</li> + <li>{{Cssxref(":recto")}} {{experimental_inline}}</li> + <li>{{Cssxref(":verso")}} {{experimental_inline}}</li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Agrega los selectores de página<code>:recto</code> y <code>:verso.</code></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td> + <td>{{Spec2('CSS3 Paged Media')}}</td> + <td>Ningún cambio desde {{SpecName('CSS2.1')}}, aunque mas reglas CSS pueden ser usadas dentro de <code>@page</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>2.0</td> + <td>{{CompatGeckoDesktop("19.0")}}</td> + <td>8.0</td> + <td>6.0</td> + <td>5.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/@supports/index.html b/files/es/web/css/@supports/index.html new file mode 100644 index 0000000000..4d07fc1afe --- /dev/null +++ b/files/es/web/css/@supports/index.html @@ -0,0 +1,138 @@ +--- +title: '@supports' +slug: Web/CSS/@supports +translation_of: Web/CSS/@supports +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La regla "CSS <code>@supports"</code>asocia un conjunto de declaraciones anidadas en un bloque CSS (que está delimitado por corchetes) con una condición consistente en probar declaraciones de CSS (es decir, pares propiedad-valor, así como conjunciones, disjunciones o negaciones abritrarias sobre ellas). A esas condiciones se le llama condición "soporta"<em> (</em><em>supports condition)</em>.</p> + +<p><code>@supports</code> otorga la habilidad de realizar consultas que comprueben si ciertas funcionalidades están disponibles <em>(feature query)</em>.</p> + +<p>La regla <code>@supports </code>puede ser usada tanto en el nivel superior de una hoja de estilos, como dentro de cualquier <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">regla de grupo condicional</a> y se puede acceder a ella a través del modelo de objetos de CSS {{domxref("CSSSupportsRule")}}.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<p>Una condición "soporta" <em>(</em><em>supports condition)</em> consiste en una o varias declaraciones combinadas por diferentes operadores lógicos. La precedencia de los operadores puede ser definida usando paréntesis.</p> + +<h3 id="Sintaxis_de_una_declaración">Sintaxis de una declaración</h3> + +<p>La expresión más simple es una declaración CSS, es decir el nombre de una propiedad CSS seguida por un valor, separada por dos puntos. La siguiente expresión</p> + +<pre class="brush:css">( transform-origin: 5% 5% )</pre> + +<p>devuelve "cierto" si la {{ cssxref("transform-origin") }} implementa una sintaxis que reconoce <code>5% 5%</code> como válida.</p> + +<p>Una declaración CSS está siempre rodeada entre paréntesis.</p> + +<h3 id="El_operador_not">El operador "<code>not</code> "</h3> + +<p>El operador <code>not</code> puede preceder cualquier expresión para crear una nueva, resultando en la negación de la expresión original. La siguiente expresión</p> + +<pre class="brush:css">not ( transform-origin: 10em 10em 10em )</pre> + +<p>devuelve "cierto" si {{ cssxref("transform-origin") }} no reconoceo <code>10em 10em 10em</code> como una sintaxis válida.</p> + +<p>Como cualquier operador, el operador <code>not</code> puede ser aplicado a una declaración de complejidad arbitraria. Los siguientes ejemplos son todas expresiones válidas:</p> + +<pre class="brush:css">not ( not ( transform-origin: 2px ) ) +(display: flexbox) and ( not (display: inline-grid) )</pre> + +<div class="note style-wrap"> +<p><strong>Nota:</strong> no hay necesidad de encerrar el operador <code>not</code> entre paréntesis cuando se encuentra en el nivel superior. Para combinarlo con otros operadores, como <code>and</code> y <code>or</code>, sí se requieren paréntesis</p> +</div> + +<h3 id="El_operador_and">El operador "<code>and</code>"</h3> + +<p>Partiendo de dos expresiones, el operador <code>and</code> crea una nueva expresión consistente en la conjunción de dos originales; la expresión resultante es verdadera si sólo ambas expresiones originales lo son. En este ejemplo, la expresión completa resuelve a true si y sólo si, las dos expresiones son simultáneamente veraderas:</p> + +<pre class="brush:css">(display: table-cell) and (display: list-item)</pre> + +<p>Varias conjunciones pueden ser yuxtapuestas sin la necesidad de agregar paréntesis:</p> + +<pre class="brush:css">(display: table-cell) and (display: list-item) and (display:run-in)</pre> + +<p>es equivalente a:</p> + +<pre class="brush:css">(display: table-cell) and ((display: list-item) and (display:run-in))</pre> + +<h3 id="El_operador_or">El operador "<code>or"</code></h3> + +<p>Partiendo de dos expresiones, el operador <code>or</code> crea una nueva expresión consistente en la disyunción de dos originales; la expresión resultante es verdadera si una o ambas expresiones originales lo son. En este ejemplo, la expresión completa resuelve a true si al menos una de las dos expresiones es veradera:</p> + +<pre class="brush:css;">( transform-style: preserve ) or ( -moz-transform-style: preserve )</pre> + +<p>Varias disyunciones pueden ser yuxtapuestas sin la necesidad de agregar paréntesis:</p> + +<pre class="brush:css">( transform-style: preserve ) or ( -moz-transform-style: preserve ) or +( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )</pre> + +<p>es equivalente a:</p> + +<pre class="brush:css">( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or +(( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d )))</pre> + +<div class="note style-wrap"> +<p><strong>Nota</strong>: cuando se usan <code>and</code> y <code>or</code>, el paréntesis debe ser usado para definir el orden en el cual aplican. Si no, la condición es inválida provocando que se ignore todo el "at-rule" .</p> +</div> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Prueba_soporta_de_una_propiedad_CSS_determinada">Prueba "soporta" de una propiedad CSS determinada</h3> + +<pre class="brush:css;">@supports (animation-name: test) { + … /* specific CSS applied when animations are supported unprefixed */ + @keyframes { /* @supports being a CSS conditional group at-rule, it can includes other relevant at-rules */ + … + } +} +</pre> + +<h3 id="Prueba_soporta_de_una_propiedad_CSS_determinada_o_de_una_versión_con_prefijo">Prueba "soporta" de una propiedad CSS determinada o de una versión con prefijo</h3> + +<pre class="brush:css;">@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or + (-ms-perspective: 10px) or (-o-perspective: 10px) ) { + … /* specific CSS applied when 3D transforms, eventually prefixed, are supported */ +} +</pre> + +<h3 id="Prueba_soporta_para_propiedades_customizadas">Prueba "soporta" para propiedades customizadas</h3> + +<pre class="brush:css;">@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){ + … /* specific CSS applied to simulate text-align-last:justify */ +}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Conditional', '#at-supports', '@supports') }}</td> + <td>{{ Spec2('CSS3 Conditional') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +{{Compat("css.at-rules.supports")}} + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>La clase CSSOM {{ domxref("CSSSupportsRule") }}, y el método {{ domxref("CSS.supports") }} que permite chequear via JavaScript.</li> +</ul> diff --git a/files/es/web/css/@viewport/height/index.html b/files/es/web/css/@viewport/height/index.html new file mode 100644 index 0000000000..8389bdb95e --- /dev/null +++ b/files/es/web/css/@viewport/height/index.html @@ -0,0 +1,125 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - Descriptor CSS + - Referencia +translation_of: Web/CSS/@viewport +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El descriptor CSS <code><strong>height</strong></code> es un descriptor de forma reducida para establecer {{cssxref("@viewport/min-height", "min-height")}} y {{cssxref("@viewport/max-height", "max-height")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, altura mínima y altura máxima, con el valor definido.</p> + +<p>Si se definen dos valores de viewport, el primero corresponderá a la altura mínima, y el segundo, a la altura máxima.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">/* Un valor */ +height: auto; +height: 320px; +height: 15em; + +/* Dos valores */ +height: 320px 200px; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>El valor a usar es calculado con los valores de otros descriptores CSS.</dd> + <dt><code><length></code></dt> + <dd>Un valor {{cssxref("<length>")}} de longitud absoluta o relativa no negativa.</dd> + <dt><code><percentage></code></dt> + <dd>Un valor {{cssxref("<percentage>")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: css">@viewport { + height: 500px; +}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>29 (usando una bandera)</td> + <td>{{CompatNo}}</td> + <td>10 {{property_prefix("-ms")}}</td> + <td>11.10<br> + Removido en 15<br> + Reintroducido con una bandera en 16</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>4.4</td> + <td>29</td> + <td>{{CompatNo}}</td> + <td>10{{property_prefix("-ms")}}</td> + <td>11.10<br> + Removido en 15<br> + Reintroducido con una bandera en 16</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/@viewport/index.html b/files/es/web/css/@viewport/index.html new file mode 100644 index 0000000000..f03aaee77b --- /dev/null +++ b/files/es/web/css/@viewport/index.html @@ -0,0 +1,159 @@ +--- +title: '@viewport' +slug: Web/CSS/@viewport +tags: + - Adaptation + - At-rule + - CSS + - Device + - NeedsContent + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/@viewport +--- +<p>{{CSSRef}}</p> + +<h2 id="Summary">Summary</h2> + +<p>The<strong> <code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> contains a set of nested descriptors in a CSS block that is delimited by curly braces. These descriptors control viewport settings, primarily on mobile devices.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>A <em>zoom factor</em> of <code>1.0</code> or <code>100%</code> corresponds to no zooming. Larger values zoom in. Smaller values zoom out.</p> + +<h3 id="Descriptors">Descriptors</h3> + +<p>Browsers are supposed to ignore unrecognized descriptors.</p> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt> + <dd>Used in the determination of the width of the viewport when the document is first displayed.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt> + <dd>Used in the determination of the width of the viewport when the document is first displayed.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/width"><code>width</code></a></dt> + <dd>A shorthand descriptor for setting both <code>min-width</code> and <code>max-width</code></dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt> + <dd>Used in the determination of the height of the viewport when the document is first displayed.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt> + <dd>Used in the determination of the height of the viewport when the document is first displayed.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/height"><code>height</code></a></dt> + <dd>A shorthand descriptor for setting both <code>min-height</code> and <code>max-height</code></dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt> + <dd>Sets the initial zoom factor.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt> + <dd>Sets the minimum zoom factor.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt> + <dd>Sets the maximum zoom factor.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt> + <dd>Controls whether or not the user should be able to change the zoom factor.</dd> + <dt><a href="/en-US/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt> + <dd>Controls the document's orientation.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="eval" style="font-size: 14px;">@viewport { + min-width: 640px; + max-width: 800px; +} +@viewport { + zoom: 0.75; + min-zoom: 0.5; + max-zoom: 0.9; +} +@viewport { + orientation: landscape; +}</pre> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>29 (behind a flag) [4]</td> + <td>{{CompatNo()}} [2]</td> + <td>10 {{property_prefix("-ms")}}</td> + <td>11.10<br> + Removed in 15<br> + Reintroduced behind a flag in 16</td> + <td>{{CompatNo}} [3]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4</td> + <td>29</td> + <td>{{CompatNo}} [2]</td> + <td>10{{property_prefix("-ms")}}[1]</td> + <td>11.10<br> + Removed in 15<br> + Reintroduced behind a flag in 16</td> + <td>{{CompatNo}} [3]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] There is a bug in IE Mobile 10 on older versions of Windows Phone 8, where <code>device-width</code>, when used within <code>@-ms-viewport</code>, evaluates to the screen width in physical pixels rather than normalized CSS pixels, which is wrong according to the specification. However, when used within a <code>viewport</code> {{HTMLElement("meta")}} tag, <code>device-width</code> evaluates correctly. According to Microsoft, this bug was fixed in <a href="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Windows Phone 8 Update 3 (a.k.a. GDR3)</a>, although there are some reports that the <a href="http://www.nokia.com/us-en/windows-phone-black-update/">Lumia Black</a> GDR3 update did not fix the bug (at least on the Lumia 920). For more details and a workaround, <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">see Tim Kadlec's blog post "Windows Phone 8 and Device-Width"</a>.</p> + +<p>[2]: See {{bug(747754, 'summary')}}</p> + +<p>[3]: See {{webkitbug(95959)}}</p> +<p>[4]: See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=235457">Chromium issue #235457: Enable @viewport on all platforms</a></p> +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("meta")}}, specifically <code><meta name="viewport"></code></li> + <li><a href="/en-US/docs/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a></li> +</ul> diff --git a/files/es/web/css/@viewport/width/index.html b/files/es/web/css/@viewport/width/index.html new file mode 100644 index 0000000000..8ff87e0443 --- /dev/null +++ b/files/es/web/css/@viewport/width/index.html @@ -0,0 +1,122 @@ +--- +title: width +slug: Web/CSS/@viewport/width +translation_of: Web/CSS/@viewport +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El descriptor CSS <strong>width</strong> es una forma reducida para establecer {{cssxref("@viewport/min-width", "min-width")}} y {{cssxref("@viewport/max-width", "max-width")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, anchura mínima y anchura máxima, con el valor definido.</p> + +<p>Si se definen dos valores de viewport, el primero corresponderá a la anchura mínima, y el segundo, a la anchura máxima.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="brush: css">/* Ejemplo con un valor de viewport: */ +@viewport { + width: 320px; +} + +/* Ejemplo con dos valores de viewport: */ +@viewport { + width: 320px, 120px; +} + +</pre> + +<p> </p> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>El valor a usar es calculado con los valores de otros descriptores CSS.</dd> + <dt><code><length></code></dt> + <dd>Un valor {{cssxref("<length>")}} de longitud absoluta o relativa no negativa.</dd> + <dt><code><percentage></code></dt> + <dd>Un valor {{cssxref("<percentage>")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table" style="height: 93px; width: 950px;"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>29 (usando una bandera)</td> + <td>{{CompatNo}}</td> + <td>10 {{property_prefix("-ms")}}</td> + <td>11.10<br> + Removido en 15<br> + Reintroducido con una bandera en 16</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table" style="height: 93px; width: 948px;"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>4.4</td> + <td>29</td> + <td>{{CompatNo}}</td> + <td>10{{property_prefix("-ms")}}</td> + <td>11.10<br> + Removido en 15<br> + Reintroducido con una bandera en 16</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/es/web/css/_colon_-moz-broken/index.html b/files/es/web/css/_colon_-moz-broken/index.html new file mode 100644 index 0000000000..a419ae3cbc --- /dev/null +++ b/files/es/web/css/_colon_-moz-broken/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-broken' +slug: 'Web/CSS/:-moz-broken' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-broken' +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-broken</code> selecciona elementos con enlaces a imágenes no válidos</p> + +<p>Este selector está pensado sobre todo para desarrolladores de temas.</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{bug("11011")}}</li> + <li>{{cssxref("-moz-alt-content")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-drag-over/index.html b/files/es/web/css/_colon_-moz-drag-over/index.html new file mode 100644 index 0000000000..5e18bdd1fa --- /dev/null +++ b/files/es/web/css/_colon_-moz-drag-over/index.html @@ -0,0 +1,42 @@ +--- +title: ':-moz-drag-over' +slug: 'Web/CSS/:-moz-drag-over' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-drag-over' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-drag-over</code> se usa para editar un elemento cuando se produce un evento de arrasttar (drag) sobre él.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox"><var>element</var>:-moz-drag-over { propiedades del estilo } +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">td:-moz-drag-over { + color: red; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><table border="1"> + <tr> + <td width="100px" height="100px">Arrastra aquí</td> + </tr> +</table> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Example")}}</p> diff --git a/files/es/web/css/_colon_-moz-first-node/index.html b/files/es/web/css/_colon_-moz-first-node/index.html new file mode 100644 index 0000000000..6bd7cb3460 --- /dev/null +++ b/files/es/web/css/_colon_-moz-first-node/index.html @@ -0,0 +1,48 @@ +--- +title: ':-moz-first-node' +slug: 'Web/CSS/:-moz-first-node' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-first-node' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-first-node</code> representa cualquier elemento que sea el primer nodo hijo de algún otro elemento. Se diferencia de {{Cssxref(":first-child")}} en que no selecciona al primer hijo si tiene texto (que no sea espacios en blanco) detrás de él.</p> + +<p class="note">Cualquier espacion en blanco al principio del elemento se ignora a la hora de determina cual elemento es <code>:-moz-first-node</code>.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox"><var>span</var>:-moz-first-node { <em>propiedades del estilo</em> } +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">span:-moz-first-node { + background-color: lime; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><div> + <span>:-moz-first-node</span> + <span>:-moz-last-node</span> +</div> +</pre> + +<p>{{EmbedLiveSample("Example", "220", "20")}}</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref(":-moz-last-node")}}</li> + <li>{{cssxref(":first-child")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-focusring/index.html b/files/es/web/css/_colon_-moz-focusring/index.html new file mode 100644 index 0000000000..95ef9db9c4 --- /dev/null +++ b/files/es/web/css/_colon_-moz-focusring/index.html @@ -0,0 +1,90 @@ +--- +title: ':-moz-focusring' +slug: 'Web/CSS/:-moz-focusring' +tags: + - CSS + - NeedsLiveSample + - No estándar(2) + - Referencia CSS +translation_of: 'Web/CSS/:-moz-focusring' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-focusring</code> es similar a la pseudo-clase {{cssxref(":focus")}} , pero sólo selecciona un elemento si éste tiene el foco y el agente de usuario (user-agent) tiene habilitado el mostrar el anillo (borde) alrededor del elemento que actualmente tiene el foco. Si <code>:-moz-focusring</code> selecciona un elemento entonces <code>:focus</code> también lo selecciona pero esto no se da igual al revés, depende, como se ha dicho anteriormente, de la configuración del agente de usuario. Que un agente de usuario tenga el dibujo del anillo de foco habilitado depende de cosas como la configuración del sistema operativo así que el comportamiento preciso de esta propiedad puede variar de una plataforma a otra dependiendiendo de la configuración de la misma o de la configuración del usuario.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox">:-moz-focusring</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Para especificar la apariencia de un elemento cuando recibe el foco se puede usar este psuedo-selector de la siguiente manera:</p> + +<pre class="brush: css">mybutton:-moz-focusring { + outline: 2px dotted; +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Esta propiedad todavía no está definida en ninguna especificación, aunque fue <a href="https://lists.w3.org/Archives/Public/www-style/2015Sep/0226.html">debatida en el grupo de trabajo</a> y se <a href="https://lists.w3.org/Archives/Public/www-style/2015Oct/0012.html">decidió añadirla a los selectores 4 o 5</a>.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{bug("418521")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-full-screen-ancestor/index.html b/files/es/web/css/_colon_-moz-full-screen-ancestor/index.html new file mode 100644 index 0000000000..3163a3e07e --- /dev/null +++ b/files/es/web/css/_colon_-moz-full-screen-ancestor/index.html @@ -0,0 +1,83 @@ +--- +title: ':-moz-full-screen-ancestor' +slug: 'Web/CSS/:-moz-full-screen-ancestor' +tags: + - CSS + - NeedsExample + - No estandar + - Pseudo clase + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-full-screen-ancestor' +--- +<div>{{CSSRef}}{{non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-full-screen-ancestor</code> se aplica a todos los ancestros de el elemento full-screen(pantalla completa) exceptuando los frames (marcos) que pueda contener en los documentos padre, que son los elementos full-screen(pantalla completa) es sus propios documentos. Sin embargo, sí que se aplica la clase a los antecesores de esos elementos.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Necesita un ejemplo</p> + +<h2 id="Compatibilidad_con_distintos_navegadores">Compatibilidad con distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("10.0")}}{{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además.">Ver además.</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fullscreen_API">Usando el modo pantalla completa (full-screen)</a></li> + <li>{{domxref("element.mozRequestFullScreen()")}}</li> + <li>{{domxref("document.mozCancelFullScreen()")}}</li> + <li>{{domxref("document.mozFullScreen")}}</li> + <li>{{domxref("document.mozFullScreenElement")}}</li> + <li>{{domxref("document.mozFullScreenEnabled")}}</li> + <li>{{HTMLAttrXRef("mozallowfullscreen", "iframe")}}</li> + <li>{{cssxref(":-moz-full-screen")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-handler-blocked/index.html b/files/es/web/css/_colon_-moz-handler-blocked/index.html new file mode 100644 index 0000000000..3d4569b68d --- /dev/null +++ b/files/es/web/css/_colon_-moz-handler-blocked/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-blocked' +slug: 'Web/CSS/:-moz-handler-blocked' +tags: + - CSS + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-handler-blocked' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("1.9.1") }}</p> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p><code>:-moz-handler-blocked</code> selecciona elementos que no pueden ser mostrado por haber sido sus manejadores bloqueados.</p> + +<p>Es útil principalmente para los desarrolladores de temas.</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{ cssxref(":-moz-handler-crashed") }}</li> + <li>{{ cssxref(":-moz-handler-disabled") }}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-handler-crashed/index.html b/files/es/web/css/_colon_-moz-handler-crashed/index.html new file mode 100644 index 0000000000..406cd7c72d --- /dev/null +++ b/files/es/web/css/_colon_-moz-handler-crashed/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-crashed' +slug: 'Web/CSS/:-moz-handler-crashed' +tags: + - CSS + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-handler-crashed' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("2.0") }}</p> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p><code>:-moz-handler-crashed</code> selecciona elementos que no pueden ser mostrados porque el plugin para dibujarlos ha dejado de funcionar.</p> + +<p>Es útil principalmente para los desarrolladores de temas.</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{ cssxref(":-moz-handler-blocked") }}</li> + <li>{{ cssxref(":-moz-handler-disabled") }}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-handler-disabled/index.html b/files/es/web/css/_colon_-moz-handler-disabled/index.html new file mode 100644 index 0000000000..f69c0d7ca3 --- /dev/null +++ b/files/es/web/css/_colon_-moz-handler-disabled/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-disabled' +slug: 'Web/CSS/:-moz-handler-disabled' +tags: + - CSS + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-handler-disabled' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("1.9.1") }}</p> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p><code>:-moz-handler-disabled</code> selecciona elementos que no pueden ser mostrados porque sus manejadores han sido deshabilitados por el usuario.</p> + +<p>Es útil principalmente para desarrolladores de temas.</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{ cssxref(":-moz-handler-blocked") }}</li> + <li>{{ cssxref(":-moz-handler-crashed") }}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-last-node/index.html b/files/es/web/css/_colon_-moz-last-node/index.html new file mode 100644 index 0000000000..a857fcd9df --- /dev/null +++ b/files/es/web/css/_colon_-moz-last-node/index.html @@ -0,0 +1,48 @@ +--- +title: ':-moz-last-node' +slug: 'Web/CSS/:-moz-last-node' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-last-node' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-last-node</code> selecciona un elemento si es el último nodo hijo de algún otro elemento. Se diferencia de {{cssxref(":last-child")}} en que no selecciona el último elemento hijo si tiene texto (sin contar espacios en blanco) después de él.</p> + +<p class="note">Cualquier espacio en blanco al final de un elemento se ignora al usar <code>:-moz-last-node</code>.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox"><var>span</var>:-moz-last-node {<em>propiedades del estilo</em> } +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">span:-moz-last-node { + background-color: lime; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><div> + <span>:-moz-first-node</span> + <span>:-moz-last-node</span> +</div> +</pre> + +<p>{{EmbedLiveSample("Example", "220", "20")}}</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref(":-moz-first-node")}}</li> + <li>{{cssxref(":last-child")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-list-bullet/index.html b/files/es/web/css/_colon_-moz-list-bullet/index.html new file mode 100644 index 0000000000..07415595a9 --- /dev/null +++ b/files/es/web/css/_colon_-moz-list-bullet/index.html @@ -0,0 +1,46 @@ +--- +title: '::-moz-list-bullet' +slug: 'Web/CSS/:-moz-list-bullet' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-list-bullet' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><a href="/es/docs/Web/CSS">CSS </a>no-estándar <code>de Mozilla ::-moz-list-bullet</code> se usa para establecer el estilo para los iconos que preceden a los elemento de una lista.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox">li::-moz-list-bullet { <em>propiedades del estilo</em> }</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li>Number 1</li> + <li>Number 2</li> + <li>Number 3</li> +</ul> + +<ul class="list"> + <li>Number 1</li> + <li>Number 2</li> + <li>Number 3</li> +</ul> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.list ::-moz-list-bullet { font-size: 36px; }</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/:-moz-list-bullet') }}</p> + +<p> </p> diff --git a/files/es/web/css/_colon_-moz-list-number/index.html b/files/es/web/css/_colon_-moz-list-number/index.html new file mode 100644 index 0000000000..31747f5fe1 --- /dev/null +++ b/files/es/web/css/_colon_-moz-list-number/index.html @@ -0,0 +1,45 @@ +--- +title: '::-moz-list-number' +slug: 'Web/CSS/:-moz-list-number' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Pseudo-elemento + - Referencia CSS +translation_of: 'Web/CSS/:-moz-list-number' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><a href="/es/docs/Web/CSS">CSS </a><code>::-moz-list-number</code> te permite personalizar la apariencia de los números de los elementos de lista ({{HTMLElement("li")}}) en listas que sean listas ordenadas ({{HTMLElement("ol")}}).</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox">li::-moz-list-number { <em>style properties</em> } +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">li::-moz-list-number { + font-style: italic; + font-weight: bold; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><ol> + <li>First item</li> + <li>Second item</li> + <li>Third item</li> +</ol> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p><img alt="moz-list-number.png" class="default internal" src="/@api/deki/files/4668/=moz-list-number.png"><br> + {{EmbedLiveSample("Example")}}</p> diff --git a/files/es/web/css/_colon_-moz-loading/index.html b/files/es/web/css/_colon_-moz-loading/index.html new file mode 100644 index 0000000000..ba3eaff1c6 --- /dev/null +++ b/files/es/web/css/_colon_-moz-loading/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-loading' +slug: 'Web/CSS/:-moz-loading' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-loading' +--- +<div>{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a><a href="/es/docs/Web/CSS">CSS </a><code>:-moz-loading</code> selecciona elementos que no pueden mostrarse porque no aún no se han empezado a cargar, elementos como imágenes que todavía no han empezado a llegar. Destacar que las imágenes que están <em>en proceso de carga</em> no son seleccionadas por esta pseudo-clase.</p> + +<p>Principalmente es útil para desarrolladores de temas.</p> diff --git a/files/es/web/css/_colon_-moz-locale-dir(ltr)/index.html b/files/es/web/css/_colon_-moz-locale-dir(ltr)/index.html new file mode 100644 index 0000000000..a626dc93ee --- /dev/null +++ b/files/es/web/css/_colon_-moz-locale-dir(ltr)/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-locale-dir(ltr)' +slug: 'Web/CSS/:-moz-locale-dir(ltr)' +tags: + - CSS + - Localización + - NeedsCompatTable + - NeedsExample + - No estandar + - Pseudo-clase + - Referencia CSS +translation_of: 'Web/CSS/:-moz-locale-dir(ltr)' +--- +<div>{{Non-standard_header}}{{CSSRef}} {{gecko_minversion_header("1.9.2")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-locale-dir(ltr)</code> selecciona un elemento si el interfaz del usuario se está mostrando de izquierda a derecha. Esto viene determinado cuando la opción de las preferencias <code>intl.uidirection.<em>locale</em></code> (donde <code><em>locale</em></code> es la localización de idioma actual) está estáblecido a "ltr".</p> + +<p>Esto permite que extensiones (y temas) puedan fácilmente adaptar su interfaz de usuario dependiendo de las necesidades del usuario en relación a la localización.Puede variar de ventana a ventana e incluso de pestaña a pestaña. Permite que las extensiones funcionen incluso si no soportan esa preferencia del usuario siempre que puedan soportar izquierda-derecha o derecha-izquierda, sin preocuparse de las necesidades específicas con respecto a la localización.</p> + +<p>Este selector no funciona adecuadamente en HTML; siempre selecciona no importa si la localización del UI (Interfaz de Usuario) sea izquierda a derecha (left-to-right) o derecha a izqauierda (right-to-left).</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{Cssxref(":-moz-locale-dir(rtl)")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-locale-dir(rtl)/index.html b/files/es/web/css/_colon_-moz-locale-dir(rtl)/index.html new file mode 100644 index 0000000000..8fdb2f9dfd --- /dev/null +++ b/files/es/web/css/_colon_-moz-locale-dir(rtl)/index.html @@ -0,0 +1,33 @@ +--- +title: ':-moz-locale-dir(rtl)' +slug: 'Web/CSS/:-moz-locale-dir(rtl)' +tags: + - CSS + - Localización + - NeedsCompatTable + - NeedsExample + - No estandar + - Pseudo-clase + - Referencia CSS +translation_of: 'Web/CSS/:-moz-locale-dir(rtl)' +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-locale-dir(rtl)</code> selecciona un elemento si el interfaz del usuario se está mostrando de derecha a izquierda. Esto viene determinado cuando la opción de las preferencias <code>intl.uidirection.<em>locale</em></code> (donde <code><em>locale</em></code> es la localización de idioma actual) está estáblecida a "rtl".</p> + +<p>Esto permite que extensiones (y temas) puedan fácilmente adaptar su interfaz de usuario dependiendo de las necesidades del usuario en relación a la localización.Puede variar de ventana a ventana e incluso de pestaña a pestaña. Permite que las extensiones funcionen incluso si no soportan esa preferencia del usuario, siempre que puedan soportar izquierda-derecha o derecha-izquierda, sin preocuparse de las necesidades específicas con respecto a la localización.</p> + +<p>Este selector no funciona adecuadamente en HTML; nunca selecciona nada, no importa si la localización del UI (Interfaz de Usuario) sea izquierda a derecha (left-to-right) o derecha a izqauierda (right-to-left).</p> + +<p> </p> + +<h2 id="Ver_además">Ver además</h2> + +<p> </p> + +<ul> + <li>{{cssxref(":-moz-locale-dir(ltr)")}}</li> + <li><a href="/es/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales">Aségurate que tu tema funciona con localizaciones RTL</a></li> +</ul> diff --git a/files/es/web/css/_colon_-moz-lwtheme-brighttext/index.html b/files/es/web/css/_colon_-moz-lwtheme-brighttext/index.html new file mode 100644 index 0000000000..16421aa6f1 --- /dev/null +++ b/files/es/web/css/_colon_-moz-lwtheme-brighttext/index.html @@ -0,0 +1,24 @@ +--- +title: ':-moz-lwtheme-brighttext' +slug: 'Web/CSS/:-moz-lwtheme-brighttext' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-brighttext' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code>:-moz-lwtheme-brighttext</code> es seleccionada en los documentos chrome cuando {{cssxref(":-moz-lwtheme")}} es true (verdadero) y se ha seleccionado un tema ligero con un color de texto brillante.</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref(":-moz-lwtheme")}}</li> + <li>{{cssxref(":-moz-lwtheme-darktext")}}</li> + <li><a href="es/Add-ons/Themes/Lightweight_themes">Temas Ligeros</a></li> +</ul> diff --git a/files/es/web/css/_colon_-moz-lwtheme-darktext/index.html b/files/es/web/css/_colon_-moz-lwtheme-darktext/index.html new file mode 100644 index 0000000000..4cc595e8d1 --- /dev/null +++ b/files/es/web/css/_colon_-moz-lwtheme-darktext/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-lwtheme-darktext' +slug: 'Web/CSS/:-moz-lwtheme-darktext' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Referencia CSS + - Temas +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-darktext' +--- +<div>{{CSSRef}}{{non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code>:-moz-lwtheme-darktext</code> es seleccionada en los documentos chrome cuando {{cssxref(":-moz-lwtheme")}} es verdadero (true) y se ha seleccionado un tema ligero con un color de texto oscuro.</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref(":-moz-lwtheme")}}</li> + <li>{{cssxref(":-moz-lwtheme-brighttext")}}</li> + <li><a href="/es/Add-ons/Themes/Lightweight_themes">Temas Ligeros</a></li> +</ul> diff --git a/files/es/web/css/_colon_-moz-lwtheme/index.html b/files/es/web/css/_colon_-moz-lwtheme/index.html new file mode 100644 index 0000000000..7ce4770c52 --- /dev/null +++ b/files/es/web/css/_colon_-moz-lwtheme/index.html @@ -0,0 +1,26 @@ +--- +title: ':-moz-lwtheme' +slug: 'Web/CSS/:-moz-lwtheme' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Referencia CSS + - Temas + - Temas Ligeros +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code>:-moz-lwtheme</code> es verdadera y seleccionada en los documento chrome cuando el atributo {{xulattr("lightweightthemes")}} del elemento raíz es <code>true (verdadero)</code> y se ha seleccionado un tema</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref(":-moz-lwtheme-darktext")}}</li> + <li>{{cssxref(":-moz-lwtheme-brighttext")}}</li> + <li><a href="/es/Add-ons/Themes/Lightweight_themes">Temas Ligeros</a></li> +</ul> diff --git a/files/es/web/css/_colon_-moz-only-whitespace/index.html b/files/es/web/css/_colon_-moz-only-whitespace/index.html new file mode 100644 index 0000000000..9c8f5e89ec --- /dev/null +++ b/files/es/web/css/_colon_-moz-only-whitespace/index.html @@ -0,0 +1,36 @@ +--- +title: ':-moz-only-whitespace' +slug: 'Web/CSS/:-moz-only-whitespace' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Pseudo-clase + - Referencia CSS +translation_of: 'Web/CSS/:-moz-only-whitespace' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class </a><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a><code>:-moz-only-whitespace</code> selecciona un elemento si no tiene ningún hijo, o bien nodos textos vacíos o bien nodos texto que sólo contienen espacios en blanco. Sólo cuando hay elementos o nodos texto con uno o más caracteres dentro, el elemento no será seleccionado por esta pseudo-clase.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox"><var>span</var>:-moz-only-whitespace { <em>propiedades del estilo</em> } +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">span:-moz-only-whitespace::before { + background-color: lime; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span> </span> +</pre> + +<p>{{EmbedLiveSample("Example", "50", "20")}}</p> diff --git a/files/es/web/css/_colon_-moz-placeholder/index.html b/files/es/web/css/_colon_-moz-placeholder/index.html new file mode 100644 index 0000000000..a3e0afd5b0 --- /dev/null +++ b/files/es/web/css/_colon_-moz-placeholder/index.html @@ -0,0 +1,122 @@ +--- +title: ':-moz-placeholder' +slug: 'Web/CSS/:-moz-placeholder' +tags: + - CSS + - Marcador de Posición INPUT + - Marcador de posición + - No estándar(2) + - Placeholder + - Pseudo-Clase CSS + - Referencia CSS +translation_of: 'Web/CSS/:placeholder-shown' +--- +<div class="note"><strong>Nota:</strong> La pseudo-clase CSS <code>:-moz-placeholder</code> está depreciada desde la versión Firefox 19 siendo desde entonces sustituida por el pseudo-elemento {{cssxref('::-moz-placeholder')}}.</div> + +<div class="note"><strong>Nota: </strong> El CSSWG ha decidido introducir <code>:placeholder-shown</code>. Esta funcionalidad volverá a ser incluida en Gecko en algún momento futuro, sin prefijo y con un nuevo nombre. {{bug(1069012)}}</div> + +<div>{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p><code>La </code><a href="/es/docs/CSS/Pseudo-classes">pseudo-clase </a><code>:-moz-placeholder</code> representa a cualquier elemento que muestre un <a href="/es/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">texto del marcador de posición (placeholder)</a>. Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia del texto de los marcadores de posición (placeholders) que, por defecto, son grises. Puede que esto no funcione bien si ha cambiado el color de fondo de los campos de sus formularios a un color similar así que, puede usar esta pseudo-clase para cambiar el color del texto de los marcadores de posición (placeholders).,</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Ejemplo_básico">Ejemplo básico</h3> + +<p>Este ejemplo le da estilo a un <em>placeholder</em> (marcador de posición) haciendo que el color del texto sea verde.</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> + <title>Placeholder demo</title> + <style type="text/css"> + input::-moz-placeholder { + color: green; + } + input:-moz-placeholder { + color: green; + } + </style> +</head> +<body> + <input id="test" placeholder="Placeholder text!"> +</body> +</html> +</pre> + +<p>{{EmbedLiveSample("Basic_example")}}</p> + +<h3 id="Desbordamiento">Desbordamiento</h3> + +<p>En numerosas ocasiones las cajas para las búsquedas y otros campos de los formularios son fuertemente acortados al ser mostrados en dispositivos móviles. Desafortunadamente , en algunas circunstancias, el texto del marcador de posición de los elementos INPUT no cabe y es recortado de una manera poco afortunada y fea. Para evitar esto se puede usar la regla CSS <code>text-overflow: ellipsis</code> para envolverlo.</p> + +<pre class="brush: css">input[placeholder] { text-overflow: ellipsis; } +::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */ +input:-moz-placeholder { text-overflow: ellipsis; } +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implementado en {{bug("457801")}}.</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li><a href="/es/docs/Web/Guide/HTML/Forms_in_HTML">Formularios en HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("textarea")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-submit-invalid/index.html b/files/es/web/css/_colon_-moz-submit-invalid/index.html new file mode 100644 index 0000000000..75cd48a3f0 --- /dev/null +++ b/files/es/web/css/_colon_-moz-submit-invalid/index.html @@ -0,0 +1,76 @@ +--- +title: ':-moz-submit-invalid' +slug: 'Web/CSS/:-moz-submit-invalid' +tags: + - CSS + - No estandar + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Web/CSS/:-moz-submit-invalid' +--- +<p>{{Non-standard_header}}{{ CSSRef() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> CSS <code>:-moz-submit-invalid</code> representa cualquier botón de enviar de formularios cuyos contenidos no sean válidos conforme a las <a href="/en/HTML/Forms_in_HTML#Constraint_Validation" title="es/HTML/HTML5/Forms in HTML5#Constraint Validation">restricciones de validación HTML</a>.</p> + +<p>Por defecto no se aplica ningún estilo. Puedes usar tu estilo para personalizar la apariencia del botón de enviar cuando existen campos no válidos en el formulario.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{ cssxref(":valid") }}</li> + <li>{{ cssxref(":invalid") }}</li> + <li>{{ cssxref(":required") }}</li> + <li>{{ cssxref(":optional") }}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-suppressed/index.html b/files/es/web/css/_colon_-moz-suppressed/index.html new file mode 100644 index 0000000000..554a4c55d8 --- /dev/null +++ b/files/es/web/css/_colon_-moz-suppressed/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-suppressed' +slug: 'Web/CSS/:-moz-suppressed' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-suppressed' +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a><code>:-moz-suppressed</code> selecciona elementos que representan a imágenes que no han sido cargadas por estar bloqueado el sitio del que provienen.</p> + +<p>Este selector está pensado sobre todo para los desarrolladores de temas.</p> diff --git a/files/es/web/css/_colon_-moz-system-metric(images-in-menus)/index.html b/files/es/web/css/_colon_-moz-system-metric(images-in-menus)/index.html new file mode 100644 index 0000000000..b99e17b59f --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(images-in-menus)/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-system-metric(images-in-menus)' +slug: 'Web/CSS/:-moz-system-metric(images-in-menus)' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/images-in-menus' +--- +<div>{{CSSRef}}{{Non-standard_header}}{{Fx_minversion_header(3)}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-class </a>CSS <code>:-moz-system-metric(images-in-menus)</code> selecciona un elemento si el interfaz de usuario del equipo soporta imágenes en menús.</p> + +<p>Está pensado sobre todo para desarrolladores de temas.</p> diff --git a/files/es/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html b/files/es/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html new file mode 100644 index 0000000000..981760b5de --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-system-metric(mac-graphite-theme)' +slug: 'Web/CSS/:-moz-system-metric(mac-graphite-theme)' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/mac-graphite-theme' +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p><code>La pseudo-clase CSS :-moz-system-metric(mac-graphite-theme)</code> seleccionará cualquier elemento si el usuario ha elegido la apariencia "Graphite" en el panel de preferencias "Appearance" dentro de la sección de preferencias de sistema de Mac OS X.</p> + +<p>Este selector está pensado sobre todo para desarrolladores de temas</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=332586">Demo</a></p> + +<h2 id="Bugzilla">Bugzilla</h2> + +<p>{{Bug(448767)}}</p> diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html new file mode 100644 index 0000000000..00239c5bd1 --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-end-backward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-end-backward)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-backward' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a><code> </code><a href="/es/docs/Web/CSS">CSS </a><code>:-moz-system-metric(scrollbar-end-backward)</code> seleccionará un elemento si el interfaz de usuario del equipo incluye un botón de flecha hacia atrás al final de las barras de desplazamiento o barras de scroll.</p> + +<p>Está pensado sobre todo para desarrolladores de temas</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ningún estándar.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html new file mode 100644 index 0000000000..2712092b3c --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-end-forward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-end-forward)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-forward' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a><a href="/es/docs/Web/CSS">CSS </a><code>:-moz-system-metric(scrollbar-end-forward)</code> seleccionará un elemento si el interfaz de usuario del equpo incluye una flecha hacia adelante al final de las barras de desplazamiento o barras de scroll.</p> + +<p>Está pensado sobre todo para desarrolldores de temas.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html new file mode 100644 index 0000000000..a3a5c21e82 --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-start-backward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-start-backward)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-backward' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/s/docs/Web/CSS/Pseudo-classes">pseudo-clase </a><a href="/es/docs/Web/CSS">CSS</a><code>:-moz-system-metric(scrollbar-start-backward)</code> seleccionará un elemento si el interfaz de usuario del equipo incluye una flecha hacia atrás al principio de las barras de desplazamiento o barras de scroll.</p> + +<p>Este selector está pensado sobre todo para desarrolladores de temas.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de niguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html new file mode 100644 index 0000000000..f309dabd5c --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-start-forward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-start-forward)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-forward' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a><a href="/es/docs/Web/CSS">CSS</a><code>:-moz-system-metric(scrollbar-start-forward)</code> seleccionará un elemento si el interfaz de usuario del equipo incluye una flecha hacia atrás al principio de las barras de desplazamiento o barras de scroll.</p> + +<p>Este selector está pensado sobre todo para desarrolladores de temas.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html new file mode 100644 index 0000000000..1cbef2d0ec --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-thumb-proportional)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-thumb-proportional)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-thumb-proportional' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a><a href="/es/docs/Web/CSS">CSS</a><code>:-moz-system-metric(scrollbar-thumb-proportional)</code> seleccionará un elemento si el interfaz de usuario del equipo proporciona miniaturas (thumbnails) proporcionales en las barras de desplazamiento o barras de scroll; es decir, la miniatura o parte arrastrable en la barra de desplazamiento cambia de tamaño para indicar el tamaño relativo del área visible del documento.</p> + +<p>Está pensado sobre todo para desarrolladores de temas.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/_colon_-moz-system-metric(touch-enabled)/index.html b/files/es/web/css/_colon_-moz-system-metric(touch-enabled)/index.html new file mode 100644 index 0000000000..5ee2a63aa2 --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(touch-enabled)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(touch-enabled)' +slug: 'Web/CSS/:-moz-system-metric(touch-enabled)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/touch-enabled' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a><a href="/es/docs/Web/CSS">CSS</a><code> :-moz-system-metric(touch-enabled)</code> seleccionará un elemento si el dispositivo en el cuál se está mostrando el contenido soporta un interfaz táctil.</p> + +<div class="note"><strong>Nota:</strong> No está pensado para contenido web. Para eso se debería usar la consulta de medios (media query) <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#-moz-touch-enabled" title="https://developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled"><code>-moz-touch-enabled</code></a></div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <td>Característica</td> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html b/files/es/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html new file mode 100644 index 0000000000..8d134cb531 --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html @@ -0,0 +1,113 @@ +--- +title: ':-moz-system-metric(windows-default-theme)' +slug: 'Web/CSS/:-moz-system-metric(windows-default-theme)' +tags: + - CSS + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Psuedo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/windows-default-theme' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a><code> CSS :-moz-system-metric(windows-default-theme)</code> selecciona un elemento si el usuario está usando en esos momento uno de los siguientes temas de Windows: Luna, Royale, Zune, or Aero (por ejemplo Vista Basic, Vista Standard, or Aero Glass). Esto excluye los temas clásicos de Windows y los temas realizados por terceros.</p> + +<p>Este selector está pensado sobre todo para desarrolladores de temas.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><p id="defaultThemes"> + Este párrafo debería tener un fondo verde con los temas de Windows Luna/Royale/Zune/Aero + y un fondo rojo con otros temas. +</p> + +<p id="nonDefaultThemes"> + Este párrafo debería tener fondo verde con el tema clásico de Window o con temas de terceros + y fondo rojo con otros temas +</p> + +<p id="notSupported">La detección de temas no está soportada.</p></pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">#defaultThemes, +#nonDefaultThemes { + background-color: #FFA0A0; +} + +#defaultThemes:-moz-system-metric(windows-default-theme) { + background-color: #A0FFA0; +} + +#nonDefaultThemes:not(-moz-system-metric(windows-default-theme)) { + background-color: #A0FFA0; +} + +#notSupported:-moz-system-metric(windows-default-theme), +#notSupported:not(:-moz-system-metric(windows-default-theme)) { + display: none; +} +</pre> + +<p>{{EmbedLiveSample("Example", "100%", 170)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implementando en {{Bug("426660")}}. Cambió el comportamiento de los temas Royale y Zone para que funcionaran igual que el tema Luna {{Bug("429176")}}.</p> diff --git a/files/es/web/css/_colon_-moz-tree-cell-text(hover)/index.html b/files/es/web/css/_colon_-moz-tree-cell-text(hover)/index.html new file mode 100644 index 0000000000..c0ef648273 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-cell-text(hover)/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-tree-cell-text(hover)' +slug: 'Web/CSS/:-moz-tree-cell-text(hover)' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text(hover)' +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header(1.9)}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-tree-cell-text(hover)</code> seleccionará un elemento si el cursor del ratón está actualmente sobre el texto en una celda o elemento del árbol</p> + +<p>Está pensado principalmente para desarrolladores.</p> diff --git a/files/es/web/css/_colon_-moz-tree-cell-text/index.html b/files/es/web/css/_colon_-moz-tree-cell-text/index.html new file mode 100644 index 0000000000..c6dcc5f378 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-cell-text/index.html @@ -0,0 +1,30 @@ +--- +title: ':-moz-tree-cell-text' +slug: 'Web/CSS/:-moz-tree-cell-text' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text' +--- +<p>{{Non-standard_header}}{{CSSRef}}</p> + +<p>Activado por el atributo <code>properties</code>.</p> + +<h2 id="Elementos_asociados">Elementos asociados</h2> + +<ul> + <li>{{XULElem("treecell")}}</li> +</ul> + +<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2> + +<ul> + <li>{{cssxref("font")}}</li> + <li>{{cssxref("visibility")}}</li> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("text-decoration")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-tree-cell/index.html b/files/es/web/css/_colon_-moz-tree-cell/index.html new file mode 100644 index 0000000000..cf8ee0162c --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-cell/index.html @@ -0,0 +1,38 @@ +--- +title: ':-moz-tree-cell' +slug: 'Web/CSS/:-moz-tree-cell' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>Activado por el attributo <code>properties.</code></p> + +<h2 id="Elementos_asociados">Elementos asociados</h2> + +<ul> + <li>{{XULElem("treecell")}}</li> +</ul> + +<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2> + +<ul> + <li>{{cssxref("background")}}</li> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("outline")}}</li> + <li>{{cssxref("padding")}}</li> + <li>{{cssxref("visibility")}}</li> +</ul> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li><a href="/docs/Mozilla/Tech/XUL/Tutorial/Styling_a_Tree">Dándo estilo a un árbol</a></li> +</ul> diff --git a/files/es/web/css/_colon_-moz-tree-column/index.html b/files/es/web/css/_colon_-moz-tree-column/index.html new file mode 100644 index 0000000000..62376be975 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-column/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-column' +slug: 'Web/CSS/:-moz-tree-column' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-column' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>Activado por el atributo <code>properties</code>.</p> + +<h2 id="Elementos_asociados">Elementos asociados</h2> + +<ul> + <li>{{XULElem("treecol")}}</li> +</ul> + +<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2> + +<ul> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("visibility")}}</li> + <li>{{cssxref("text style")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-tree-drop-feedback/index.html b/files/es/web/css/_colon_-moz-tree-drop-feedback/index.html new file mode 100644 index 0000000000..320955cddf --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-drop-feedback/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-drop-feedback' +slug: 'Web/CSS/:-moz-tree-drop-feedback' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Pseudo clase + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-drop-feedback' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>Activado por el atributo <code>properties</code>.</p> + +<h2 id="Elementos_asociados">Elementos asociados</h2> + +<ul> + <li>{{XULElem("treerow")}}</li> +</ul> + +<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2> + +<ul> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("visibility")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-tree-image/index.html b/files/es/web/css/_colon_-moz-tree-image/index.html new file mode 100644 index 0000000000..65e270ddb5 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-image/index.html @@ -0,0 +1,34 @@ +--- +title: ':-moz-tree-image' +slug: 'Web/CSS/:-moz-tree-image' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsLiveSample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-tree-image' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>Activado por el atributo <code>properties</code>.</p> + +<h2 id="Elementos_asociados">Elementos asociados</h2> + +<ul> + <li>{{XULElem("treeitem")}}</li> + <li>{{XULElem("treecell")}}</li> +</ul> + +<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2> + +<ul> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("list-style")}}</li> + <li>{{cssxref("position")}}</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=610762&sid=2aa24bf393171dd0c9bd9343b3d355c3">Bookmark icons in the Places window - Mozillazine Forum</a></p> diff --git a/files/es/web/css/_colon_-moz-tree-indentation/index.html b/files/es/web/css/_colon_-moz-tree-indentation/index.html new file mode 100644 index 0000000000..bce9310aaf --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-indentation/index.html @@ -0,0 +1,27 @@ +--- +title: ':-moz-tree-indentation' +slug: 'Web/CSS/:-moz-tree-indentation' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-indentation' +--- +<p>{{CSSRef}}{{Non-standard_header}}</p> + +<p>Activado por el atributo <code>properties</code>.</p> + +<h2 id="Elementos_asociados">Elementos asociados</h2> + +<ul> + <li>{{XULElem("treeitem")}}</li> +</ul> + +<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2> + +<ul> + <li>{{cssxref("position")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-tree-line/index.html b/files/es/web/css/_colon_-moz-tree-line/index.html new file mode 100644 index 0000000000..67d05a7b74 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-line/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-tree-line' +slug: 'Web/CSS/:-moz-tree-line' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-line' +--- +<p>{{Non-standard_header}}{{CSSRef}}</p> + +<p>Activado por el atributo <code>properties</code>.</p> + +<h2 id="Elementos_asociados">Elementos asociados</h2> + +<ul> + <li>{{XULElem("treeitem")}}</li> +</ul> + +<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2> + +<ul> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("visibility")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-tree-progressmeter/index.html b/files/es/web/css/_colon_-moz-tree-progressmeter/index.html new file mode 100644 index 0000000000..57cdb929bd --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-progressmeter/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-tree-progressmeter' +slug: 'Web/CSS/:-moz-tree-progressmeter' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-progressmeter' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>Activado cuando al atributo <code>type</code> se le da el valor <code>progressmeter</code>.</p> + +<h2 id="Elementos_asociados">Elementos asociados</h2> + +<ul> + <li>{{XULElem("treecell")}}</li> +</ul> + +<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2> + +<ul> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("color")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-tree-row(hover)/index.html b/files/es/web/css/_colon_-moz-tree-row(hover)/index.html new file mode 100644 index 0000000000..6a5a723a12 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-row(hover)/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-tree-row(hover)' +slug: 'Web/CSS/:-moz-tree-row(hover)' +tags: + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row(hover)' +--- +<div>{{Non-standard_header}}{{CSSRef}}{{Fx_minversion_header(3)}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <code>:-moz-tree-row(hover)</code> seleccionará un elemento si el cursor del ratón está sobre una fila de un árbol.</p> + +<p>Está pensado principalmente para ser usado por desarrolladores de temas.</p> diff --git a/files/es/web/css/_colon_-moz-tree-row/index.html b/files/es/web/css/_colon_-moz-tree-row/index.html new file mode 100644 index 0000000000..b334d502f9 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-row/index.html @@ -0,0 +1,50 @@ +--- +title: ':-moz-tree-row' +slug: 'Web/CSS/:-moz-tree-row' +tags: + - CSS + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row' +--- +<p>{{CSSRef}}{{Non-standard_header}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a><code>::-moz-tree-row</code> CSS se usa para seleccionar filas y para aplicar estilos a las filas de los árboles.</p> + +<h2 id="Elementos_asociados">Elementos asociados</h2> + +<ul> + <li>{{XULElem("treerow")}}</li> +</ul> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox">treechildren::-moz-tree-row {<em>propiedades de estilo</em> } +</pre> + +<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2> + +<ul> + <li>{{cssxref("background")}}</li> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("outline")}}</li> + <li>{{cssxref("padding")}}</li> + <li>{{cssxref("display")}}</li> + <li>{{cssxref("-moz-appearance")}}</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush:css">treechildren::-moz-tree-row( foo bar ) +{ + margin: 2%; +} +</pre> + +<p>...donde...</p> + +<pre class="brush:html"> <treerow properties="foo">...</treerow> +</pre> diff --git a/files/es/web/css/_colon_-moz-tree-separator/index.html b/files/es/web/css/_colon_-moz-tree-separator/index.html new file mode 100644 index 0000000000..c3d15f89f8 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-separator/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-separator' +slug: 'Web/CSS/:-moz-tree-separator' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-separator' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>Activado por el atributo <code>properties</code>.</p> + +<h2 id="Elementos_asociados">Elementos asociados</h2> + +<ul> + <li>{{XULElem("treeseparator")}}</li> +</ul> + +<h2 id="Propiedades_de_estilo">Propiedades de estilo</h2> + +<ul> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("display")}}</li> + <li>{{cssxref("-moz-appearance")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-tree-twisty/index.html b/files/es/web/css/_colon_-moz-tree-twisty/index.html new file mode 100644 index 0000000000..80f03fadec --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-twisty/index.html @@ -0,0 +1,33 @@ +--- +title: ':-moz-tree-twisty' +slug: 'Web/CSS/:-moz-tree-twisty' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-twisty' +--- +<p>{{ CSSRef() }}{{Non-standard_header}}</p> + +<p>Activado por el atributo <code>properties</code>.</p> + +<h2 id="Associated_Elements" name="Associated_Elements">Elementos asociados</h2> + +<ul> + <li>{{XULElem("treecell")}}</li> +</ul> + +<h2 id="Style_Properties" name="Style_Properties">Propiedades de estilo</h2> + +<ul> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("padding")}}</li> + <li>{{cssxref("display")}}</li> + <li>{{cssxref("list-style")}}</li> + <li>{{cssxref("position")}}</li> + <li>{{cssxref("-moz-appearance")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-ui-invalid/index.html b/files/es/web/css/_colon_-moz-ui-invalid/index.html new file mode 100644 index 0000000000..6f12ca97a6 --- /dev/null +++ b/files/es/web/css/_colon_-moz-ui-invalid/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-ui-invalid' +slug: 'Web/CSS/:-moz-ui-invalid' +tags: + - CSS + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo clase + - Referencia CSS +translation_of: 'Web/CSS/:user-invalid' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a>CSS <code>:-moz-ui-invalid</code> representa cualquier elemento de los formularios que, en determinadas circunstancias, tiene <a href="/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation">restricciones de validación </a>y no es válido. Esta pseudo-clase se aplica siguiendo la siguiente reglas::</p> + +<ul> + <li>Si el control no tiene el foco y el valor no es válido se aplica la pseudo-clase.</li> + <li>Si el control tiene el foco y el valor era válido (incluyendo si es un elemento vacío) cuando obtuvo el foco, no se aplica la pseudo-clase.</li> + <li>Si el control tiene el foco y el valor no era válido cuando obtuvo el foco, se recalcula la validez del valor con cada pulsación de teclado.</li> + <li>Si el elemento es obligatorio (requerido) sólo se aplican las reglas anteriores si el usuario ha cambiado el valor o ha intentando enviar los datos del formulario (hacer un "sbumit").</li> +</ul> + +<p>El resultado es que si el control era válido cuando el usuario empezó a interactuar con él sólo se cambia el estilo de validación cuando el usuario cambia el foco hacia otro elemento. Sin embargo, si el usuario está corrigiendo un valor señalado anteriormente como no válido, el control muestra inmediatamente cuando el valor pasa a ser válido. A los elementos del formulario obligatorios se les aplica la pseudo-clase sólo si el usuario los cambia o si intenta enviar los datos del formulario (hacer "submit").</p> + +<p>Por defecto Gecko aplica un estilo que crear un brillo rojo "glow" (usando la propiedad{{Cssxref("box-shadow")}} ) alrededor de los elemento a los que se les aplica esta pseudo-clase. Ver la pseudo-clase {{Cssxref(":invalid")}} para poder observar un ejemplo que muestra como evitar este estilo por defecto.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(2)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref(":valid")}}</li> + <li>{{cssxref(":invalid")}}</li> + <li>{{cssxref(":required")}}</li> + <li>{{cssxref(":optional")}}</li> + <li>{{cssxref(":-moz-ui-valid")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-ui-valid/index.html b/files/es/web/css/_colon_-moz-ui-valid/index.html new file mode 100644 index 0000000000..0e49681290 --- /dev/null +++ b/files/es/web/css/_colon_-moz-ui-valid/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-ui-valid' +slug: 'Web/CSS/:-moz-ui-valid' +tags: + - CSS + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Web/CSS/:-moz-ui-valid' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a><code> CSS:-moz-ui-valid</code> CSS representa cualquier elemento de un formulario cuyo valor es válido atendiendo a sus <a href="/es/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation">restricciones de validación</a>.</p> + +<p>Se aplica siguiendo las siguientes reglas:</p> + +<ul> + <li>Se aplica la psuedo clase si el control no tiene el foco y el valor es válido.</li> + <li>Si el control tiene el foco y el valor era válido (esto incluye cuando está vacío), al obtener el foco de aplica la pseudo clase.</li> + <li>Si el control tiene el foco y el valor era inválido, una vez obtenido el foco se vuelve a validar cada vez que presionamos una tecla para ver si el nuevo valor es válido.</li> + <li>Si el elemento es requerido la reglas anteriores sólo se aplican si el usuario ha cambiado el valor o intenta enviar el formulario.</li> +</ul> + +<p>El resultado es que, si el control era válido cuando el usuario empieza a interactuar con él, el estilo de validación sólo se cambia cuando el usuario cambia el foco a otro control. Sin embargo, si el usuario está intentando corregir un campo que previamente se ha marcado como un valor inválido, cuando el control sea ya correcto esto se mostrará de manera inmediata. Los elementos requeridos sólo se marcan como inválidos si el usuario lo cambia o si lo intenta enviar con un valor inválido.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(2)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref(":valid")}}</li> + <li>{{cssxref(":invalid")}}</li> + <li>{{cssxref(":required")}}</li> + <li>{{cssxref(":optional")}}</li> + <li>{{cssxref(":-moz-ui-invalid")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-moz-user-disabled/index.html b/files/es/web/css/_colon_-moz-user-disabled/index.html new file mode 100644 index 0000000000..b7749f1a29 --- /dev/null +++ b/files/es/web/css/_colon_-moz-user-disabled/index.html @@ -0,0 +1,18 @@ +--- +title: ':-moz-user-disabled' +slug: 'Web/CSS/:-moz-user-disabled' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-user-disabled' +--- +<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class </a><a href="/en-US/docs/Web/CSS">CSS </a><code>:-moz-user-disabled</code> selecciona imágenes que no fueron cargadas porque en las preferencias del usuario las imagenes han sido totalmente desahabilitadas.</p> + +<p>Está pensado para que, sobre todo, sea usado por desarrolladores de temas.</p> diff --git a/files/es/web/css/_colon_-moz-window-inactive/index.html b/files/es/web/css/_colon_-moz-window-inactive/index.html new file mode 100644 index 0000000000..e22e734842 --- /dev/null +++ b/files/es/web/css/_colon_-moz-window-inactive/index.html @@ -0,0 +1,99 @@ +--- +title: ':-moz-window-inactive' +slug: 'Web/CSS/:-moz-window-inactive' +tags: + - CSS + - 'CSS:Extensiones Mozilla' + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Referencia CSS +translation_of: 'Web/CSS/:-moz-window-inactive' +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a><a href="/es/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes"> </a><code>:-moz-window-inactive</code> selecciona cualquier elemento mientras está en una ventana inactiva.</p> + +<div class="note"><strong>Nota:</strong> Antes de añadir esta pseudo-clase, dar dieferentes estilos a las ventanas de fondo podría lograrse con el atributo (<code>active="true"</code>) en la venta del nivel superior XUL. Este atributo ya no se usa.</div> + +<p><code>:-moz-window-inactive</code> funciona también en documentos de contenido HTML.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Este ejemplo modifica la apariencia del fondo de una caja dependiendo de si está o no en una ventana activa.</p> + +<pre class="brush: html"><style type="text/css"> +#mybox { + background: linear-gradient(to bottom, blue, cyan); +} + +#mybox:-moz-window-inactive { + background: cyan; +} +</style> + +<div id="mybox" style="width:200px; height:200px;"> + <p>This is a box!</p> +</div> +</pre> + +<p>Puedes verlo aquí en un <a href="/samples/cssref/moz-window-inactive.html">ejemplo en directo</a>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(2)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implementado en {{bug("508482")}}.</p> diff --git a/files/es/web/css/_colon_-ms-input-placeholder/index.html b/files/es/web/css/_colon_-ms-input-placeholder/index.html new file mode 100644 index 0000000000..a2be7fcf59 --- /dev/null +++ b/files/es/web/css/_colon_-ms-input-placeholder/index.html @@ -0,0 +1,111 @@ +--- +title: ':-ms-input-placeholder' +slug: 'Web/CSS/:-ms-input-placeholder' +tags: + - CSS + - No estándar(2) + - Pseudo clase CSS + - Referencia +translation_of: 'Web/CSS/:placeholder-shown' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a>propietaria y no estándar <code>:-ms-input-placeholder</code> representa el <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">texto del marcador de posición (placeholder) </a> de un elemento de un formulario. Esto permite personalizar el texto de los marcadores de posición (placeholders) a los desarrolladores web y a los diseñadores de temas. Sólo es soportada por los navegadores Internet Explorer y Microsoft Edge.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>El siguiente ejemplo destaca con un estilo personalizado los campos <em>"Branch"</em> y código "<em>ID"</em>. El texto del marcardor de posición (placeholder) se muestra con un estilo hasta que el campo obtiene el foco, momento a partir del cual podemos escribir en él. Cuando el campo obtiene el foco vuelve a tener el estilo normal para un campo input y el texto del marcador de posición (placeholder) desaparece.</p> + +<h3 id="HTML">HTML</h3> + +<pre><form id="test"> + <p><label>Enter Student Name: <input id="name" placeholder="Student Name"/></label></p> + <p><label>Enter Student Branch: <input id="branch" placeholder="Student Branch" /></label></p> + <p><label>Enter Student ID: <input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id" /></label></p> + <input type="submit" /> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input { + background-color:#E8E8E8; + color:black; } +/* placeholder only style */ +input.studentid:-ms-input-placeholder { + font-style:italic; + color: red; + background-color: yellow; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12684/bandicam%202016-03-08%2001-48-59-851.jpg" style="border-style: solid; border-width: 1px; height: 160px; margin: 0px; width: 650px;"></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación aunque Microsoft tiene <a href="https://msdn.microsoft.com/en-us/library/hh772745(v=vs.85).aspx">una descripción en MSDN.</a></p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref("::placeholder")}}</li> + <li>{{cssxref("::-webkit-input-placeholder")}}</li> + <li>{{cssxref("::-moz-placeholder")}}</li> + <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("textarea")}}</li> +</ul> diff --git a/files/es/web/css/_colon_-webkit-autofill/index.html b/files/es/web/css/_colon_-webkit-autofill/index.html new file mode 100644 index 0000000000..98c1c68215 --- /dev/null +++ b/files/es/web/css/_colon_-webkit-autofill/index.html @@ -0,0 +1,80 @@ +--- +title: ':-webkit-autofill' +slug: 'Web/CSS/:-webkit-autofill' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-clase + - Referencia +translation_of: 'Web/CSS/:-webkit-autofill' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a>CSS <code>:-webkit-autofill</code> CSS selecciona un elemento {{HTMLElement("input")}} cuando su valor es rellenado automáticamente por el navegador.</p> + +<p class="note"><strong>Nota:</strong> La hoja de estilos por defecto de muchos navegadores usan <code>!important</code> en sus declaraciones de estilo <code>:-webkit-autofill</code> , haciendo que no puedan ser sobrescritos por páginas que no usen trucos JavaScript.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=46543">Asunto Chromium 46543: El realce con fondo amarillo de los campos input de texto con valor automático no puede ser deshabilitados.</a></li> + <li><a href="https://bugs.webkit.org/show_bug.cgi?id=66032">WebKit bug 66032: Permite a los autores sobrescribir los colores de los campos que se rellenan automáticamente.</a></li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=740979">Mozilla bug 740979: implementar <code>la pseudo-clase :-moz-autofill</code> en elemento input con un valor de relleno automático.</a></li> +</ul> diff --git a/files/es/web/css/_colon_active/index.html b/files/es/web/css/_colon_active/index.html new file mode 100644 index 0000000000..7dc6934848 --- /dev/null +++ b/files/es/web/css/_colon_active/index.html @@ -0,0 +1,97 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:active' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> <code>:active</code> de <a href="/es/docs/Web/CSS">CSS</a> representa un elemento (como un botón) que el usuario está activando. Cuando se usa un mouse, la "activación" generalmente comienza cuando el usuario presiona el botón primario del mouse y termina cuando se suelta. La pseudo-clase <code>:active</code> se usa comúnmente en los elementos {{HTMLElement("a")}} y {{HTMLElement("button")}}, pero también se puede usar en otros elementos.</p> + +<pre class="brush: css">/* Selecciona cualquier <a> que esté siendo activado */ +a:active { + color: red; +}</pre> + +<p>Los estilos definidos por la pseudoclase <code>:active</code> serán anulados por cualquier pseudoclase posterior relacionada con el enlace ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":visited")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla <code>:active</code> después de todas las demás reglas relacionadas con el enlace, tal como lo define el orden LVHA: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"><strong>Nota:</strong> En los sistemas con los ratones de varios botones, CSS3 especifica que la pseudo-clase <code>:active</code> sólo debe aplicarse al botón primario; en ratones diestros, este suele ser el botón más a la izquierda.</div> + +<h2 class="editable" id="Sintaxis">Sintaxis</h2> + +<pre>{{csssyntax}}</pre> + +<h2 class="editable" id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="#">Este enlace cambiará a color lima mientras hace clic en él.</a> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a:link { color: blue; } /* Enlaces no visitados */ +a:visited { color: purple; } /* Enlaces visitados */ +a:hover { background: yellow; } /* El usuario esta sobre el enlace */ +a:active { color: lime; } /* Enlaces activos */ +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Ejemplo')}}</p> + +<h2 class="editable" id="Especificaciones"><span>Especificaciones</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<p>{{Compat("css.selectors.active")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Pseudo-clases relacionadas con enlaces: {{cssxref(":link")}}, {{cssxref(":visited")}}, y {{cssxref(":hover")}}</li> +</ul> diff --git a/files/es/web/css/_colon_any-link/index.html b/files/es/web/css/_colon_any-link/index.html new file mode 100644 index 0000000000..00c8a94bda --- /dev/null +++ b/files/es/web/css/_colon_any-link/index.html @@ -0,0 +1,78 @@ +--- +title: ':any-link' +slug: 'Web/CSS/:any-link' +tags: + - CSS + - Diseño + - Experimental + - Presentación + - Pseudo-Clase CSS + - Referencia + - Web +translation_of: 'Web/CSS/:any-link' +--- +<div>{{CSSRef}} {{SeeCompatTable}}</div> + +<div>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code>:any-link</code> de <a href="/es/docs/Web/CSS">CSS</a> representa a un elemento que actúa como el ancla origen de un hipervínculo independientemente de si ha sido visitado, es decir, coincide con cualquier elemento {{HTMLElement("a")}}, {{HTMLElement("area")}} o {{HTMLElement("link")}} con un atributo <code>href</code>. Por lo tanto, coincide con todos los elementos que coincidan con {{cssxref(":link")}} o {{cssxref(":visited")}}.</div> + +<div></div> + +<pre class="brush: css"><code>/* Selecciona cualquier elemento que coincida con :link o :visited */ +:any-link { + color: green; +}</code></pre> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="https://example.com">Enlace externo</a><br> +<a href="#">Enlace de destino interno</a><br> +<a>Enlace de marcador de posición (no se personalizará)</a></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a:any-link { + border: 1px solid blue; + color: orange; +} + +/* navegadores WebKit */ +a:-webkit-any-link { + border: 1px solid blue; + color: orange; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Ejemplo')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("css.selectors.any-link")}}</p> + +<div id="compat-mobile"></div> diff --git a/files/es/web/css/_colon_any/index.html b/files/es/web/css/_colon_any/index.html new file mode 100644 index 0000000000..b65249dfe3 --- /dev/null +++ b/files/es/web/css/_colon_any/index.html @@ -0,0 +1,186 @@ +--- +title: ':any' +slug: 'Web/CSS/:any' +tags: + - CSS + - Experimental + - Pseudo-Clase CSS + - Referencia +translation_of: 'Web/CSS/:is' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La <a href="/es/docs/CSS/Pseudo-classes" title="CSS/Pseudo-classes">pseudo-clase</a> <code>:any()</code> permite construir rápidamente conjuntos de selectores similares estableciendo grupos desde los que cualquier elemento incluido coincidirá. Es una alternativa a tener que repetir el selector completo por uno de los elementos que va a variar.</p> + +<div class="note"><strong>Nota:</strong> Esta pseudo-clase está en progreso de ser estandarizada en <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches" title="http://dev.w3.org/csswg/selectors4/#matches"><em>Selectores CSS Nivel 4</em></a> bajo el nombre <code>:matches()</code>. Es probable que la sintaxis y el nombre de <code>:-<em>vendor</em>-any()</code> sean cambiados para reflejar el estándar en el futuro próximo.</div> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code>selector</code></dt> + <dd>Un selector. Puede ser un selector simple o un selector múltiple, comprendido de <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors" title="http://www.w3.org/TR/css3-selectors/#simple-selectors">selectores simples de CSS 3</a>, y puede incluir el combinador descendiente.</dd> +</dl> + +<div class="note"><strong>Nota:</strong> Los selectores pueden <strong>no</strong> contener pseudo-elementos , y el combinador único combinador permitido es el de descendientes.</div> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<p>Por ejemplo, el siguiente CSS:</p> + +<pre class="brush: css">/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */ +ol ol ul, ol ul ul, ol menu ul, ol dir ul, +ol ol menu, ol ul menu, ol menu menu, ol dir menu, +ol ol dir, ol ul dir, ol menu dir, ol dir dir, +ul ol ul, ul ul ul, ul menu ul, ul dir ul, +ul ol menu, ul ul menu, ul menu menu, ul dir menu, +ul ol dir, ul ul dir, ul menu dir, ul dir dir, +menu ol ul, menu ul ul, menu menu ul, menu dir ul, +menu ol menu, menu ul menu, menu menu menu, menu dir menu, +menu ol dir, menu ul dir, menu menu dir, menu dir dir, +dir ol ul, dir ul ul, dir menu ul, dir dir ul, +dir ol menu, dir ul menu, dir menu menu, dir dir menu, +dir ol dir, dir ul dir, dir menu dir, dir dir dir { + list-style-type: square; +} +</pre> + +<p>Puede ser reemplazado con:</p> + +<pre class="brush: css">/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */ +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul, +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu, +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir { + list-style-type: square; +}</pre> + +<p>Sin embargo, no se debe usar lo siguiente: (Véase <a href="#Issues_with_performance_and_specificity">la sección de rendimiento</a> abajo.)</p> + +<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) { + list-style-type: square; +}</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Esto es particularmente útil al tratar con <a href="/es/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">secciones y encabezados</a> de HTML5. Puesto que {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, y {{HTMLElement("nav")}} pueden ser anidados, puede ser complicado aplicar estilos sin usar <code>:any()</code>.</p> + +<p>Por ejemplo, sin <code>:any()</code>, estilizar todos los {{HTMLElement("h1")}} a diferentes niveles de profundidad podría ser muy complicado:</p> + +<pre class="brush: css">/* Nivel 0 */ +h1 { + font-size: 30px; +} +/* Nivel 1 */ +section h1, article h1, aside h1, nav h1 { + font-size: 25px; +} +/* Nivelo 2 */ +section section h1, section article h1, section aside h1, section nav h1, +article section h1, article article h1, article aside h1, article nav h1, +aside section h1, aside article h1, aside aside h1, aside nav h1, +nav section h1, nav article h1, nav aside h1, nav nav h1, { + font-size: 20px; +} +/* Level 3 */ +/* ... ni siquiera lo pienses*/ +</pre> + +<p>Usando <code>:-any()</code>, en cambio, es mucho más fácil:</p> + +<pre class="brush: css">/* Nivel 0 */ +h1 { + font-size: 30px; +} +/* Nivel 1 */ +:-moz-any(section, article, aside, nav) h1 { + font-size: 25px; +} +/* Nivel 2 */ +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) h1 { + font-size: 20px; +} +/* Nivel 3 */ +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) h1 { + font-size: 15px; +}</pre> + +<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">Problemas con rendimiento y especificidad</h3> + +<p><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=561154" title="https://bugzilla.mozilla.org/show_bug.cgi?id=561154">Bug 561154</a> sigue un problema con Gecko donde la especificidad de <code>:-moz-any()</code> es incorrecta. La implementación hasta Firefox 12 pone a <code>:-moz-any()</code> en la categoría de reglas universales, por lo que usarlo como el selector más hacia la derecha será más lento que usando un ID, una clase o etiqueta como el selector a la derecha.</p> + +<p>Por ejemplo</p> + +<pre class="brush: css">.a > :-moz-any(.b, .c) +</pre> + +<p>es más lento que:</p> + +<pre class="brush: css">.a > .b, .a > .c +</pre> + +<p>y lo siguiente es rápido:</p> + +<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c +</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}</td> + <td>12.0 (534.30){{property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>5<br> + {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>5<br> + {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/_colon_blank/index.html b/files/es/web/css/_colon_blank/index.html new file mode 100644 index 0000000000..8545c5ce04 --- /dev/null +++ b/files/es/web/css/_colon_blank/index.html @@ -0,0 +1,54 @@ +--- +title: ':blank' +slug: 'Web/CSS/:blank' +tags: + - ':blank' + - Borrador + - CSS + - Experimental +translation_of: 'Web/CSS/:blank' +--- +<p>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> El selector <code>:blank</code> esta considerado en riesgo, puesto que la CSSWG sigue haciendo cambios.</p> + +<p>Ver <a href="https://github.com/w3c/csswg-drafts/issues/1967" title="[selectors] decide on :blank">CSSWG issue #1967</a>.</p> +</div> + +<p>La <a href="/en-US/docs/Web/CSS">pseudo-clase CSS</a> <strong><code>:blank</code></strong> selecciona elementos de entrada vaciós (eg. {{HTMLElement("input")}} or {{HTMLElement("textarea")}}).</p> + +<h2 id="Sintáxis">Sintáxis</h2> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2> + + + +<p>{{Compat("css.selectors.blank")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{CSSxRef(":empty")}}</li> +</ul> diff --git a/files/es/web/css/_colon_checked/index.html b/files/es/web/css/_colon_checked/index.html new file mode 100644 index 0000000000..fd5bb8e13c --- /dev/null +++ b/files/es/web/css/_colon_checked/index.html @@ -0,0 +1,197 @@ +--- +title: ':checked' +slug: 'Web/CSS/:checked' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:checked' +--- +<div>{{ CSSRef() }}</div> + +<p>La <a href="es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code style="font-style: normal;">:checked</code> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier <strong>radio </strong>(<a href="/es/docs/Web/HTML/Element/input/radio"><input type="radio"></a>), <strong>checkbox </strong>(<a href="/es/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a>) u <strong>option</strong> ({{ HTMLElement("option") }} en un elemento {{ HTMLElement("select") }}) que está marcado o conmutado a un estado <code>on</code>.</p> + +<pre class="brush: css"><code>/* Coincide con cualquier checked/selected radio, checkbox, u option */ +:checked { + margin-left: 25px; + border: 1px solid blue; +}</code></pre> + +<p>El usuario puede activar este estado marcando/seleccionando un elemento, o desactivándolo desmarcando/deseleccionando el elemento.</p> + +<div class="note"> +<p><strong>Nota: </strong>Debido a que los navegadores a menudo tratan las <code><option></code> s como <a href="/es/docs/Web/CSS/Replaced_element">elementos reemplazados</a>, la medida en que se pueden diseñar con la pseudo-clase <code>:checked</code> varía de un navegador a otro.</p> +</div> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre>{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Ejemplo_básico">Ejemplo básico</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <input type="radio" name="my-input" id="yes"> + <label for="yes">Yes</label> + + <input type="radio" name="my-input" id="no"> + <label for="no">No</label> +</div> + +<div> + <input type="checkbox" name="my-checkbox" id="opt-in"> + <label for="opt-in">Check me!</label> +</div> + +<select name="my-select" id="fruit"> + <option value="opt1">Apples</option> + <option value="opt2">Grapes</option> + <option value="opt3">Pears</option> +</select> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">div, +select { + margin: 8px; +} + +/* Etiquetas para entradas marcadas */ +input:checked + label { + color: red; +} + +/* Elemento Radio, cuando está marcado */ +input[type="radio"]:checked { + box-shadow: 0 0 0 3px orange; +} + +/* Elemento Checkbox, cuando está marcado */ +input[type="checkbox"]:checked { + box-shadow: 0 0 0 3px hotpink; +} + +/* Elementos Option, cuando se seleccionan */ +option:checked { + box-shadow: 0 0 0 3px lime; + color: red; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Ejemplo_básico")}}</p> + +<h3 id="Alternar_elementos_con_un_checkbox_oculto">Alternar elementos con un checkbox oculto</h3> + +<p>Este ejemplo utiliza la pseudoclase <code>:checked</code> para permitir al usuario alternar contenido según el estado de un <em>checkbox</em>, todo sin usar <a href="/es/docs/Web/JavaScript">JavaScript</a>.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><input type="checkbox" id="expand-toggle" /> + +<table> + <thead> + <tr><th>Columna #1</th><th>Columna #2</th><th>Columna #3</th></tr> + </thead> + <tbody> + <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> + <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> + <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> + <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> + </tbody> +</table> + +<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">/* Hide the toggle checkbox */ +#expand-toggle { + display: none; +} + +/* Hide expandable content by default */ +.expandable { + visibility: collapse; + background: #ddd; +} + +/* Style the button */ +#expand-btn { + display: inline-block; + margin-top: 12px; + padding: 5px 11px; + background-color: #ff7; + border: 1px solid; + border-radius: 3px; +} + +/* Show hidden content when the checkbox is checked */ +#expand-toggle:checked ~ * .expandable { + visibility: visible; +} + +/* Style the button when the checkbox is checked */ +#expand-toggle:checked ~ #expand-btn { + background-color: #ccc; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample("Alternar_elementos_con_un_checkbox_oculto", "auto", 220)}}</p> + +<h3 id="Galería_de_imágenes">Galería de imágenes</h3> + +<p>Puede usar la pseudoclase <code>:checked</code> para crear una galería de imágenes con imágenes de tamaño completo que solo se muestran cuando el usuario hace clic en una miniatura. Vea <a href="/@api/deki/files/6268/=css-checked-gallery.zip">esta demostración</a>.</p> + +<div class="note"><strong>Nota:</strong> Para un efecto análogo, pero basado en la pseudoclase <a href="/es/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a> y sin radioboxes ocultos, vea <a href="/@api/deki/files/6247/=css-gallery.zip">esta demostración</a>, tomada de la página de referencia <a href="/es/docs/CSS/:hover" title="CSS/:hover">:hover</a>.</div> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Define la semántica con respecto a HTML.</td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 UI', '#pseudo-checked', ':checked') }}</td> + <td>{{ Spec2('CSS3 UI') }}</td> + <td>Enlace al Nivel 3 de Selectores.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Define la pseudoclase, pero no la semántica asociada.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<p>{{Compat("css.selectors.checked")}}</p> diff --git a/files/es/web/css/_colon_default/index.html b/files/es/web/css/_colon_default/index.html new file mode 100644 index 0000000000..e46989a6b0 --- /dev/null +++ b/files/es/web/css/_colon_default/index.html @@ -0,0 +1,99 @@ +--- +title: ':default' +slug: 'Web/CSS/:default' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:default' +--- +<p>{{ CSSRef() }}</p> + +<p>La <a href="es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:default</code></strong> de <a href="es/docs/Web/CSS">CSS</a> representa cualquier elemento de formulario que sea el predeterminado entre un grupo de elementos relacionados.</p> + +<p>Este selector se puede usar en los elementos {{htmlelement("button")}}, <a href="es/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a>, <a href="es/docs/Web/HTML/Element/input/radio"><input type="radio"></a> y {{htmlelement("option")}}.</p> + +<pre class="brush: css">/* Selecciona cualquier <input> predeterminado */ +input:default { + background-color: lime; +}</pre> + +<p>Los elementos agrupados que permiten selecciones múltiples también pueden tener múltiples valores predeterminados, es decir, pueden tener múltiples elementos seleccionados inicialmente. En este caso, <em>todos </em>los valores predeterminados se representan utilizando la pseudo-clase <code>:default</code>. Por ejemplo, puede diseñar las casillas de verificación predeterminadas entre un grupo de casillas de verificación (checkboxes).</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre>{{csssyntax}}</pre> + +<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="radio" name="season" id="spring"> +<label for="spring">Spring</label> + +<input type="radio" name="season" id="summer" checked> +<label for="summer">Summer</label> + +<input type="radio" name="season" id="fall"> +<label for="fall">Fall</label> + +<input type="radio" name="season" id="winter"> +<label for="winter">Winter</label></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input:default { + box-shadow: 0 0 2px 1px coral; +} + +input:default + label { + color: coral; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Ejemplo")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#selector-default', ':default')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Define la semántica HTML asociada y la validación de restricciones.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Definición inicial, pero sin la semántica asociada.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("css.selectors.default")}}</p> + +<div> +<p> </p> +</div> diff --git a/files/es/web/css/_colon_defined/index.html b/files/es/web/css/_colon_defined/index.html new file mode 100644 index 0000000000..8e5921184f --- /dev/null +++ b/files/es/web/css/_colon_defined/index.html @@ -0,0 +1,115 @@ +--- +title: ':defined' +slug: 'Web/CSS/:defined' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:defined' +--- +<div>{{ CSSRef }}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:defined</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento que se haya definido. Esto incluye cualquier elemento estándar integrado en el navegador y elementos personalizados que se hayan definido correctamente (es decir, con el método {{domxref("CustomElementRegistry.define()")}}).</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier elemento definido */ +:defined { + font-style: italic; +} + +/* Selecciona cualquier instancia de un elemento personalizado específico */ +simple-custom:defined { + display: block; +} +</pre> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Los siguientes fragmentos están tomados de nuestra demostración <a href="https://github.com/mdn/web-components-examples/tree/master/defined-pseudo-class">Pseudo-clase-definida</a> (<a href="https://mdn.github.io/web-components-examples/defined-pseudo-class/">ver también en directo</a>).</p> + +<p>En esta demostración, definimos un elemento personalizado trivial muy simple:</p> + +<pre class="brush: js">customElements.define('simple-custom', + class extends HTMLElement { + constructor() { + super(); + + let divElem = document.createElement('div'); + divElem.textContent = this.getAttribute('text'); + + let shadowRoot = this.attachShadow({mode: 'open'}) + .appendChild(divElem); + } +})</pre> + +<p>Luego inserta una copia de este elemento en el documento, junto con un <code><p></code> estándar:</p> + +<pre class="brush: html"><simple-custom text="Texto de ejemplo del elemento personalizado"></simple-custom> + +<p>Texto de ejemplo de párrafo estándar</p></pre> + +<p>En el CSS primero incluimos las siguientes reglas:</p> + +<pre class="brush: css">/* Dar a los dos elementos fondos distintivos */ +p { + background: yellow; +} + +simple-custom { + background: cyan; +} + +/* Tanto el elemento personalizado como el incorporado tienen texto en cursiva */ +:defined { + font-style: italic; +}</pre> + +<p>A continuación, proporcione las dos reglas siguientes para ocultar las instancias de nuestro elemento personalizado que no están definidas y las instancias que se definen como elementos de nivel de bloque:</p> + +<pre class="brush: css">simple-custom:not(:defined) { + display: none; +} + +simple-custom:defined { + display: block; +}</pre> + +<p>Esto es útil si tiene un elemento personalizado complejo que demora un tiempo en cargarse en la página — es posible que desee ocultar las instancias del elemento hasta que la definición esté completa, para que no terminen con feos destellos de elementos sin estilo en la página</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.defined")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/Web_Components">Componentes web</a></li> +</ul> diff --git a/files/es/web/css/_colon_dir/index.html b/files/es/web/css/_colon_dir/index.html new file mode 100644 index 0000000000..b39c21888a --- /dev/null +++ b/files/es/web/css/_colon_dir/index.html @@ -0,0 +1,108 @@ +--- +title: ':dir()' +slug: 'Web/CSS/:dir' +tags: + - CSS + - Experimental + - Pseudo-clase + - Referencia +translation_of: 'Web/CSS/:dir' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code>:dir</code> de <a href="/es/docs/Web/CSS">CSS</a> coincide con los elementos en función de la direccionalidad del texto contenido en ellos.</p> + +<pre class="brush: css">/* Selecciona cualquier elemento con texto de derecha a izquierda */ +:dir(rtl) { + background-color: red; +}</pre> + +<p>La pseudo-clase <code>:dir()</code> usa solo el valor <em>semántico</em> de la direccionalidad, es decir, el definido en el documento mismo. No tiene en cuenta la direccionalidad del <em>estilo</em>, es decir, la direccionalidad establecida por las propiedades de CSS como {{cssxref("direction")}}.</p> + +<div class="note"> +<p><strong>Nota: </strong>Tenga en cuenta que el comportamiento de la pseudo-clase <code>:dir()</code> no es equivalente a los <a href="/es/docs/Web/CSS/Attribute_selectors">selectores de atributo</a> <code>[dir=...]</code>. Estos últimos coinciden con el atributo HTML {{htmlattrxref("dir")}} e ignoran los elementos que carecen de él, incluso si heredan una dirección de su padre. (De forma similar, <code>[dir=rtl]</code> y <code>[dir=ltr]</code> no coincidirán con el valor <code>auto</code>.) En contraste, <code>:dir()</code> coincidirá con el valor calculado por {{glossary("user agent")}}, incluso si se hereda.</p> +</div> + +<div class="note"> +<p><strong>Nota: </strong>En HTML, la dirección está determinada por el atributo {{htmlattrxref("dir")}} . Otros tipos de documentos pueden tener diferentes métodos.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La pseudoclase <code>:dir()</code> requiere un parámetro, que representa la direccionalidad de texto que desea orientar.</p> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>ltr</code></dt> + <dd>Orientar elementos de izquierda a derecha.</dd> + <dt><code>rtl</code></dt> + <dd>Orientar elementos de derecha a izquierda.</dd> + <dt> + <h3 id="Sintaxis_formal">Sintaxis formal</h3> + + <pre>{{csssyntax}} +</pre> + </dt> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div dir="rtl"> + <span>test1</span> + <div dir="ltr">test2 + <div dir="auto">עִבְרִית</div> + </div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">:dir(ltr) { + background-color: yellow; +} + +:dir(rtl) { + background-color: powderblue; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Ejemplo') }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("css.selectors.dir")}}</p> + +<div id="compat-mobile"> </div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Pseudo-clases relacionadas con el idioma: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li> +</ul> diff --git a/files/es/web/css/_colon_disabled/index.html b/files/es/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..ce16ddb96e --- /dev/null +++ b/files/es/web/css/_colon_disabled/index.html @@ -0,0 +1,127 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:disabled' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code>:disabled</code> de <a href="/en-US/docs/Web/CSS">CSS</a> representa a cualquier elemento deshabilitado. Un elemento se encuentra deshabilitado si no puede ser activado (por ejemplo ser selecionado, hacer click en él o aceptar texto de entrada) ni aceptar el foco. El elemento tiene además un estado habilitado en el cual puede ser activado o recibir foco.</p> + +<pre class="brush: css">/* Selecciona cualquier <input> deshabilitado */ +input:disabled { + background: #ccc; +}</pre> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre>{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Este ejemplo muestra un formulario de envío básico. Utiliza el evento <a href="/es/docs/Web/JavaScript">JavaScript</a> {{event("change")}} para permitir al usuario habilitar / deshabilitar los campos de facturación.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form action="#"> + <fieldset id="shipping"> + <legend>Dirección de Envío</legend> + <input type="text" placeholder="Nombre"> + <input type="text" placeholder="Dirección"> + <input type="text" placeholder="Código postal"> + </fieldset> + <br> + <fieldset id="billing"> + <legend>Dirección de facturación</legend> + <label for="billing_is_shipping">Igual que la dirección de envío:</label> + <input type="checkbox" id="billing-checkbox" checked> + <br> + <input type="text" placeholder="Nombre" disabled> + <input type="text" placeholder="Dirección" disabled> + <input type="text" placeholder="Código postal" disabled> + </fieldset> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input[type="text"]:disabled { + background: #ccc; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">// Esperar a que la página termine de cargarse +document.addEventListener('DOMContentLoaded', function () { + // Adjunte el detector de eventos `change` al checkbox + document.getElementById('billing-checkbox').onchange = toggleBilling; +}, false); + +function toggleBilling() { + // Seleccione los campos de texto de facturación + var billingItems = document.querySelectorAll('#billing input[type="text"]'); + + // Alternar los campos de texto de facturación + for (var i = 0; i < billingItems.length; i++) { + billingItems[i].disabled = !billingItems[i].disabled; + } +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Ejemplo', 300, 250)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Define la semántica referente a HTML y los formularios.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Referencia a los selectores de Nivel 3.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Define la pseudo clase pero no la semántica asociada..</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("css.selectors.disabled")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li> + <p>{{Cssxref(":enabled")}}</p> + </li> +</ul> diff --git a/files/es/web/css/_colon_empty/index.html b/files/es/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..d86e01d306 --- /dev/null +++ b/files/es/web/css/_colon_empty/index.html @@ -0,0 +1,106 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:empty' +--- +<div>{{ CSSRef() }}</div> + +<div>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:empty</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento que no tenga hijos. Los hijos pueden ser nodos de elemento o texto (incluido el espacio en blanco). Los comentarios o las instrucciones de procesamiento no afectan si un elemento se considera vacío.</div> + +<div></div> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> En {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}} la pseudo-clase <code>:empty</code> fue modificada para actuar como <span style="white-space: nowrap;">{{CSSxRef(":-moz-only-whitespace")}}</span>, pero ningún navegador actualmente suporta aún esto.</p> +</div> + +<pre class="brush: css">/* Selecciona cualquier <div> que no contenga contenido */ +div:empty { + background: lime; +}</pre> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre>{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="box"><!-- Voy a ser de color lima. --></div> +<div class="box">Voy a ser de color rosa.</div> +<div class="box"> + <!-- Seré de color rosa debido a los espacios en blanco alrededor de este comentario. --> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<div class="hidden"> +<pre class="brush: css">body { + display: flex; + justify-content: space-around; +} +</pre> +</div> + +<pre class="brush: css">.box { + background: pink; + height: 80px; + width: 80px; +} + +.box:empty { + background: lime; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Ejemplo', 300, 80)}}</p> + +<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2> + +<p>La tecnología de asistencia, como los lectores de pantalla, no puede analizar el contenido interactivo que está vacío. Todo el contenido interactivo debe tener un nombre accesible, que se crea proporcionando un valor de texto para el elemento principal del control interactivo (<a href="/es/docs/Web/HTML/Element/a">anclajes</a>, <a href="/es/docs/Web/HTML/Element/button">botones</a>, etc.). Los nombres accesibles exponen el control interactivo al <a href="/es/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">árbol de accesibilidad</a>, una API que comunica información útil para las tecnologías de asistencia.</p> + +<p>El texto que proporciona el nombre accesible del control interactivo se puede ocultar mediante una <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">combinación de propiedades</a> que lo eliminan visualmente de la pantalla, pero que la tecnología de asistencia lo puede analizar. Esto se usa comúnmente para botones que dependen solo de un ícono para transmitir el propósito.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">Qué es un nombre accesible (What is an accessible name?) | The Paciello Group</a></li> + <li><a href="https://gomakethings.com/hidden-content-for-better-a11y/">Contenido oculto para mejor a11y (Hidden content for better a11y) | Go Make Things</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN entendiendo WCAG, explicaciones para el lineamiento 2.4</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html">Understanding Success Criterion 2.4.4 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#empty-pseudo', ':empty') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<p>{{Compat("css.selectors.empty")}}</p> +</div> diff --git a/files/es/web/css/_colon_enabled/index.html b/files/es/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..c91360c9ab --- /dev/null +++ b/files/es/web/css/_colon_enabled/index.html @@ -0,0 +1,103 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:enabled' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code>:enabled</code> <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento habilitado. Un elemento está habilitado si puede ser activado (es decir seleccionado, se puede hacer click en él, acepta que se le introduzca texto, etc.) o si accepta el foco. El elemento también tiene un estado deshabilitado el en cuál, no puede ser activado ni acepta el foco.</p> + +<pre class="brush: css">/* Selecciona cualquier <input> habilitado */ +input:enabled { + color: blue; +}</pre> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre>{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>El siguiente ejemplo hace que el color del texto y el botón {{htmlElement ("input")}} sean verdes cuando están habilitados, y grises cuando están deshabilitados. Esto ayuda al usuario a comprender con qué elementos se puede interactuar.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form action="url_of_form"> + <label for="FirstField">Primer campo (habilitado):</label> + <input type="text" id="FirstField" value="Lorem"><br> + + <label for="SecondField">Segundo campo (deshabilitado):</label> + <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br> + + <input type="button" value="Enviar"> +</form> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input:enabled { + color: #2b2; +} + +input:disabled { + color: #aaa; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Ejemplo", 550, 95)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Define la semántica en relación con HTML y los formularios.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Enlaza con selectores nivel 3.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Define la pseudo clase pero no la semántica asociada.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("css.selectors.enabled")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{Cssxref(":disabled")}}</li> +</ul> diff --git a/files/es/web/css/_colon_first-child/index.html b/files/es/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..225aa2ffa5 --- /dev/null +++ b/files/es/web/css/_colon_first-child/index.html @@ -0,0 +1,133 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:first-child' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:first-child</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa el primer elemento entre un grupo de elementos hermanos.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier <p> que sea el primer + elemento entre sus hermanos */ +p:first-child { + color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_básico">Ejemplo básico</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <p>¡Este texto está seleccionado!</p> + <p>Este texto no está seleccionado.</p> +</div> + +<div> + <h2>Este texto no está seleccionado: no es un `p`.</h2> + <p>Este texto no está seleccionado.</p> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p:first-child { + color: lime; + background-color: black; + padding: 5px; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p><span>{{EmbedLiveSample('Ejemplo_básico', 500, 200)}}</span></p> + +<h3 id="Diseñando_una_lista">Diseñando una lista</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><ul> + <li>Objeto 1</li> + <li>Objeto 2</li> + <li>Objeto 3 + <ul> + <li>Objeto 3.1</li> + <li>Objeto 3.2</li> + <li>Objeto 3.3</li> + </ul> + </li> +</ul></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">ul li { + color: blue; +} + +ul li:first-child { + color: red; + font-weight: bold; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p><span>{{EmbedLiveSample('Diseñando_una_lista')}}</span></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Los elementos coincidentes no requieren tener un padre.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.first-child")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{cssxref(":first-of-type")}}, {{cssxref(":last-child")}}, {{cssxref(":nth-child")}}</li> +</ul> diff --git a/files/es/web/css/_colon_first-of-type/index.html b/files/es/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..d219d9cd70 --- /dev/null +++ b/files/es/web/css/_colon_first-of-type/index.html @@ -0,0 +1,114 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:first-of-type' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:first-of-type</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa el primer elemento de su tipo entre un grupo de elementos hermanos.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier <p> que sea el primer elemento + de este tipo entre sus hermanos */ +p:first-of-type { + color: red; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Diseñando_el_primer_párrafo">Diseñando el primer párrafo</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h2>Encabezado</h2> +<p>Párrafo 1</p> +<p>Párrafo 2</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p:first-of-type { + color: red; + font-style: italic; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Diseñando_el_primer_párrafo')}}</p> + +<h3 id="Elementos_anidados">Elementos anidados</h3> + +<p>Este ejemplo muestra cómo los elementos anidados también pueden utilizarse. Tenga en cuenta que el <a href="/es/docs/Web/CSS/Universal_selectors">selector universal</a> (<code>*</code>) está implícito cuando no se escribe un selector simple.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><article> + <div>!Este `div` es primero!</div> + <div>¡Este <span>`span` anidado es el primero</span>!</div> + <div>¡Este <em>`em` anidado es el primero</em>, pero este <em>`em` anidado es el último</em>!</div> + <div>¡Este <span>`span` anidado tiene estilo</span>!</div> + <b>¡Este `b` califica!</b> + <div>Este es el `div` final.</div> +</article> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">article :first-of-type { + background-color: pink; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample('Elementos_anidados', 500)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Los elementos coincidentes no requieren tener un padre.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.first-of-type")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{Cssxref(":first-child")}}, {{Cssxref(":last-of-type")}}, {{Cssxref(":nth-of-type")}}</li> +</ul> diff --git a/files/es/web/css/_colon_first/index.html b/files/es/web/css/_colon_first/index.html new file mode 100644 index 0000000000..2f02c35bd7 --- /dev/null +++ b/files/es/web/css/_colon_first/index.html @@ -0,0 +1,97 @@ +--- +title: ':first' +slug: 'Web/CSS/:first' +tags: + - '@page' + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:first' +--- +<div>{{CSSRef}}</div> + +<div>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <code>:first</code> de <a href="/es/docs/Web/CSS">CSS</a>, utilizada con la <a href="/es/docs/Web/CSS/At-rule">regla-at</a> {{cssxref("@page")}}, representa la primera página de un documento impreso.</div> + +<div> </div> + +<pre class="brush: css">/* Selecciona la primera página al imprimir */ +@page :first { + margin-left: 50%; + margin-top: 50%; +}</pre> + +<div class="note"><strong>Nota:</strong> No puede cambiar todas las propiedades de CSS con esta pseudoclase. Solo puede cambiar los márgenes, {{cssxref("orphans")}}, {{cssxref("widows")}} y saltos de página del documento. Además, solo puede usar unidades de <a href="/es/docs/Web/CSS/length#Absolute_length_units">longitud absoluta</a> al definir los márgenes. Todas las otras propiedades serán ignoradas.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre>{{csssyntax}}</pre> + +<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Primera página.</p> +<p>Segunda página.</p> +<button>Imprimir!</button></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@page :first { + margin-left: 50%; + margin-top: 50%; +} + +p { + page-break-after: always; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">document.querySelector("button").onclick = function () { + window.print(); +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>Presione el botón "Imprimir!" para imprimir el ejemplo. Las palabras en la primera página deben estar en algún lugar del centro, mientras que otras páginas tendrán sus contenidos en la posición predeterminada.</p> + +<p>{{ EmbedLiveSample('Ejemplo', '80%', '150px') }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}</td> + <td>{{Spec2('CSS3 Paged Media')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("css.selectors.first")}}</p> + +<div id="compat-mobile"> </div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{Cssxref("@page")}}</li> + <li>Otras pseudo-clases relacionadas con página: {{Cssxref(":left")}}, {{Cssxref(":right")}}</li> +</ul> diff --git a/files/es/web/css/_colon_focus-visible/index.html b/files/es/web/css/_colon_focus-visible/index.html new file mode 100644 index 0000000000..53212edeac --- /dev/null +++ b/files/es/web/css/_colon_focus-visible/index.html @@ -0,0 +1,128 @@ +--- +title: ':focus-visible' +slug: 'Web/CSS/:focus-visible' +translation_of: 'Web/CSS/:focus-visible' +--- +<div>{{CSSRef}}</div> + +<p>La pseudo-clase <strong><code>:focus-visible</code></strong> se aplica mientras un elemento coincide con la pseudo-clase {{CSSxRef(":focus")}} y el UA (<a href="/en-US/docs/Glossary/User_agent">Agente de Usuario</a>) determina mediante heurística que el foco debe hacerse evidente en el elemento. (Muchos navegdores muestras un "anillo de enfoque" por defecto en este caso.</p> + +<p>Este selector es útil para proporcionar un indicador de enfoque diferente basado en la modalidad de entrada del usuario (ratón vs teclado).</p> + +<p>Nótese que Firefox soporta una funcionalidad similar a través de una pseudo-clase prefijada — {{CSSxRef(":-moz-focusring")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplos_básicos">Ejemplos básicos</h3> + +<p>En este ejemplo, el selector <code>:focus-visible</code> usa el comportamiento del UA para deteminar cuándo emparejar. Compara lo que sucede cuando haces clic en los diferentes controles con un ratón con lo que sucede cuando los atraviesas con el teclado. Note la diferencia de comportamiento con respecto a los elementos con estilo <code>:focus</code>.</p> + +<pre class="brush: html notranslate"><input value="Default styles"><br> +<button>Default styles</button><br> +<input class="focus-only" value=":focus only"><br> +<button class="focus-only">:focus only</button><br> +<input class="focus-visible-only" value=":focus-visible only"><br> +<button class="focus-visible-only">:focus-visible only</button></pre> + +<pre class="brush: css highlight[9] notranslate">input, button { + margin: 10px; +} + +.focus-only:focus { + outline: 2px solid black; +} + +.focus-visible-only:focus-visible { + outline: 4px dashed darkorange; +} +</pre> + +<p>{{EmbedLiveSample("Basic_example", "100%", 300)}}</p> + +<h3 id="Mostrando_selectivamente_el_indicador_de_enfoque">Mostrando selectivamente el indicador de enfoque</h3> + +<p>Un control personalizado, como un botón de <a href="/en-US/docs/User:Andreas_Wuest/Custom_Elements">elemento personalizado</a>, puede utilizar <code>:focus-visible</code> para aplicar selectivamente un indicador de enfoque sólo en el enfoque del teclado. Esto coincide con el comportamiento de enfoque nativo para controles como {{htmlelement("button")}}.</p> + +<pre class="brush: html notranslate"><custom-button tabindex="0" role="button">Click Me</custom-button></pre> + +<pre class="brush: css highlight[13, 19] notranslate">custom-button { + display: inline-block; + margin: 10px; +} + +custom-button:focus { + /* Provide a fallback style for browsers + that don't support :focus-visible */ + outline: none; + background: lightgrey; +} + +custom-button:focus:not(:focus-visible) { + /* Remove the focus indicator on mouse-focus for browsers + that do support :focus-visible */ + background: transparent; +} + +custom-button:focus-visible { + /* Draw a very noticeable focus style for + keyboard-focus on browsers that do support + :focus-visible */ + outline: 4px dashed darkorange; + background: transparent; +}</pre> + +<p>{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}}</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>You can polyfill <code>:focus-visible</code> usando <a href="https://github.com/WICG/focus-visible">focus-visible.js</a>.</p> + +<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2> + +<h3 id="Baja_visión">Baja visión</h3> + +<p>Asegúrate de que el indicador de enfoque visual pueda ser visto por personas con baja visión. Esto también beneficiará a cualquier persona que utilice una pantalla en un espacio brillantemente iluminado (como el exterior en el sol). <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Contraste Sin Texto</a> requiere que el indicador de enfoque visual sea al menos 3 a 1.</p> + +<ul> + <li>Indicadores de enfoque visual accesibles: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Déle a su sitio un poco de enfoque! Consejos para diseñar indicadores de enfoque útiles y utilizables</a></li> +</ul> + +<h3 id="Cognición">Cognición</h3> + +<p>Puede que no sea obvio por qué el indicador de enfoque aparece y desaparece si una persona está utilizando formas mixtas de entrada. Para los usuarios con preocupaciones cognitivas, o que tienen menos conocimientos tecnológicos, esta falta de comportamiento consistente para los elementos interactivos puede ser confusa.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table" style=""> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, por favor, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</div> + +<p>{{Compat("css.selectors.focus-visible")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{CSSxRef(":focus")}}</li> + <li>{{CSSxRef(":focus-within")}}</li> +</ul> diff --git a/files/es/web/css/_colon_focus-within/index.html b/files/es/web/css/_colon_focus-within/index.html new file mode 100644 index 0000000000..5628c3b8bc --- /dev/null +++ b/files/es/web/css/_colon_focus-within/index.html @@ -0,0 +1,96 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +tags: + - CSS + - Diseño + - Referencia + - Web + - pseudo-clases +translation_of: 'Web/CSS/:focus-within' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <strong><code>:focus-within</code></strong> representa un elemento que ha recibido el foco o que <em>contiene</em> un elemento que ha recibido el foco. En otras palabras, representa un elemento que en sí coincide con la pseudoclase {{cssxref(":focus")}} o tiene descendientes que coincidan con <code>:focus</code>. (Esto incluye descendientes en <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a>)</p> + +<pre class="brush: css no-line-numbers notranslate">/* Selecciona un <div> cuando uno de sus descendientes recibe el foco*/ +div:focus-within { + background: cyan; +}</pre> + +<p>Este selector es útil, por tomar un ejemplo común, para resaltar un contenedor {{HTMLElement("form")}} completo cuando el usuario enfoca sobre uno de sus elementos {{HTMLElement("input")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>En este ejemplo, el formulario recibirá estilos de color especiales cuando cualquiera de las entradas de texto reciba el foco.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>Intenta escribir en este formulario.</p> + +<form> + <label for="given_name">Nombre:</label> + <input id="given_name" type="text"> + <br> + <label for="family_name">Apellido:</label> + <input id="family_name" type="text"> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css highlight[7] notranslate">form { + border: 1px solid; + color: gray; + padding: 4px; +} + +form:focus-within { + background: #ff8; + color: black; +} + +input { + margin: 4px; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Ejemplos", 500, 150)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. ISi deseas contribuir con los datos, consulta https://github.com/mdn/browser-compat-data y envíanos un <em>pull request</em>.</div> + +<p>{{Compat("css.selectors.focus-within")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{cssxref(":focus")}}</li> + <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li> + <li><a href="https://dev.to/vtrpldn/grab-your-user-s-attention-with-the-focus-within-css-selector-4d4">Grab your user's attention with the focus-within selector</a></li> +</ul> diff --git a/files/es/web/css/_colon_focus/index.html b/files/es/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..5e1ecbe49f --- /dev/null +++ b/files/es/web/css/_colon_focus/index.html @@ -0,0 +1,114 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:focus' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> <strong><code>:focus</code></strong> <a href="/es/docs/Web/CSS">CSS</a> representa un elemento (como una entrada de formulario) que ha recibido el foco. Generalmente se activa cuando el usuario hace clic, toca un elemento o lo selecciona con la tecla "Tab" del teclado.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier <input> cuando se enfoca */ +input:focus { + color: red; +}</pre> + +<div class="note"> +<p><strong>Nota:</strong> Esta pseudo-clase se aplica solo al elemento enfocado en sí mismo. Utilice {{cssxref(":focus-within")}} si desea seleccionar un elemento que contenga un elemento enfocado.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input class="red-input" value="Voy a ser de color rojo cuando enfoque."><br> +<input class="blue-input" value="Voy a ser de color azul cuando enfoque."></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.red-input:focus { + background: yellow; + color: red; +} + +.blue-input:focus { + background: yellow; + color: blue; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Ejemplo')}}</p> + +<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2> + +<p>Asegúrate de que el indicador visual de foco pueda ser notado por personas con baja visión. Esto beneficiará a cualquier persona utilizando una pantalla en un ambiente con mucha luminosidad (por ejemplo, exterior en un día soleado). El estándar de <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1</a> requiere que el indicador de foco tenga un contraste de por lo menos 3:1.</p> + +<ul> + <li>Indicadores de foco accesibles (en inglés): <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li> +</ul> + +<h3 id="focus_outline_none">:focus { outline: none; }</h3> + +<p>Nunca elimines el outline de un foco sin reemplazarlo por otro tipo de indicador que cumpla con las condiciones de contraste.</p> + +<ul> + <li>Más información (en inglés): <a href="https://a11yproject.com/posts/never-remove-css-outlines/">Never remove CSS outlines</a></li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Define la semántica específica de HTML.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.focus")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{cssxref(":focus-within")}}</li> +</ul> diff --git a/files/es/web/css/_colon_fullscreen/index.html b/files/es/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..d86528d5d8 --- /dev/null +++ b/files/es/web/css/_colon_fullscreen/index.html @@ -0,0 +1,170 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - Experimental + - Pantalla completa + - Pseudo-clase + - Referencia +translation_of: 'Web/CSS/:fullscreen' +--- +<div>{{CSSRef}} {{SeeCompatTable}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:fullscreen</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa un elemento que se muestra cuando el navegador está en modo de <a href="/es/docs/Web/API/Fullscreen_API">pantalla completa</a>.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier <div> que se muestre en modo de pantalla completa */ +/* Implementado en Firefox, WebKit/Chrome, y Edge/IE usando prefijos; + Edge también es compatible con la versión sin prefijo */ +div:-moz-full-screen { + background-color: pink; +} + +div:-webkit-full-screen { + background-color: pink; +} + +div:fullscreen { + background-color: pink; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: La especificación W3C usa la palabra única <code>:fullscreen</code>, sin guiones, pero las implementaciones experimentales de WebKit y Gecko usan una variante prefijada con dos palabras separadas por un guión: <code>:-webkit-full-screen</code> y <code>:-moz-full-screen</code>, respectivamente. Microsoft Edge e Internet Explorer utilizan la convención estándar: <code>:fullscreen</code> y <code>:-ms-fullscreen</code>, respectivamente.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="fullscreen"> + <h1>Demostración :fullscreen</h1> + <p>Este texto se pondrá grande y rojo cuando el navegador esté en modo de pantalla completa.</p> + <button id="fullscreen-button">Entrar en pantalla completa</button> +</div> +</pre> + +<div class="hidden"> +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var fullscreenButton = document.getElementById("fullscreen-button"); +var fullscreenDiv = document.getElementById("fullscreen"); +var fullscreenFunc = fullscreenDiv.requestFullscreen; + +if (!fullscreenFunc) { + ['mozRequestFullScreen', + 'msRequestFullscreen', + 'webkitRequestFullScreen'].forEach(function (req) { + fullscreenFunc = fullscreenFunc || fullscreenDiv[req]; + }); +} + +function enterFullscreen() { + fullscreenFunc.call(fullscreenDiv); +} + +fullscreenButton.addEventListener('click', enterFullscreen); +</pre> + +<h3 id="CSS_específico_del_navegador">CSS específico del navegador</h3> + +<pre class="brush: css">#fullscreen:-moz-full-screen { + padding: 42px; + background-color: pink; + border: 2px solid #f00; + font-size: 200%; +} +#fullscreen:-webkit-full-screen { + padding: 42px; + background-color: pink; + border: 2px solid #f00; + font-size: 200%; +} + +#fullscreen:-moz-full-screen > h1 { + color: red; +} +#fullscreen:-webkit-full-screen > h1 { + color: red; +} + +#fullscreen:-moz-full-screen > p { + color: darkred; +} +#fullscreen:-webkit-full-screen > p { + color: darkred; +} + +#fullscreen:-moz-full-screen > button { + display: none; +} +#fullscreen:-webkit-full-screen > button { + display: none; +} +</pre> +</div> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#fullscreen:fullscreen { + padding: 42px; + background-color: pink; + border:2px solid #f00; + font-size: 200%; +} + +#fullscreen:fullscreen > h1 { + color: red; +} + +#fullscreen:fullscreen > p { + color: darkred; +} + +#fullscreen:fullscreen > button { + display: none; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ LiveSampleLink('Ejemplo', "Haga clic aquí para probar este ejemplo.") }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.fullscreen")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/API/Fullscreen_API">Usando el modo de pantalla completa</a></li> + <li>{{cssxref("::backdrop")}}</li> + <li>DOM API: {{ domxref("Element.requestFullscreen()") }}, {{ domxref("Document.exitFullscreen()") }}, {{ domxref("Document.fullscreen") }}, {{ domxref("Document.fullscreenElement") }}</li> + <li>Atributo {{HTMLAttrXRef("allowfullscreen", "iframe")}}</li> +</ul> diff --git a/files/es/web/css/_colon_has/index.html b/files/es/web/css/_colon_has/index.html new file mode 100644 index 0000000000..186e999382 --- /dev/null +++ b/files/es/web/css/_colon_has/index.html @@ -0,0 +1,98 @@ +--- +title: ':has' +slug: 'Web/CSS/:has' +tags: + - CSS + - Experimental + - Pseudo clase + - Referencia + - Selectores CSS +translation_of: 'Web/CSS/:has' +--- +<p>{{ CSSRef() }}{{SeeCompatTable}}</p> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> CSS<strong><code>:has()</code> </strong>representa un elemento si cualquiera de los selectores, en relación con el {{cssxref(":scope")}} del elemento dado, que se pasa como parámetro, coincide con al menos un elemento. La pseudo clase :<code>has()</code> tomo un selector como argumento.</p> + +<h2 id="Syntax" name="Syntax">Síntaxis</h2> + +<pre>:has(<em>selector_list</em>) { propiedades de estilo }</pre> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<p>El siguiente selector selecciona únicamente los elementos {{HTMLElement("a")}} que contienen {{HTMLElement("img")}} hijo:</p> + +<pre>a:has(> img) +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#relational', ':has()') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Definición Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad entre los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/_colon_host/index.html b/files/es/web/css/_colon_host/index.html new file mode 100644 index 0000000000..dca8c822d4 --- /dev/null +++ b/files/es/web/css/_colon_host/index.html @@ -0,0 +1,95 @@ +--- +title: ':host' +slug: 'Web/CSS/:host' +tags: + - ':host' + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:host' +--- +<div>{{ CSSRef }}</div> + +<p><span class="seoSummary">La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <strong><code>:host</code></strong> selecciona la sombra host de <a href="/es/docs/Web/Web_Components/Using_shadow_DOM">sombra DOM</a> que contiene el CSS que se usa en el interior — es decir, esto le permite seleccionar un elemento personalizado desde su sombra DOM.</span></p> + +<div class="note"> +<p><strong>Nota</strong>: Esto no tiene ningún efecto cuando se usa fuera de una sombra DOM.</p> +</div> + +<pre class="brush: css no-line-numbers">/* Selects a shadow root host */ +:host { + font-weight: bold; +} +</pre> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Los siguientes fragmentos se toman de nuestro ejemplo de <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors">selectores de host</a> (<a href="https://mdn.github.io/web-components-examples/host-selectors/">ver también en directo</a>).</p> + +<p>En este ejemplo, tenemos un elemento personalizado simple — <code><context-span></code> — que se puede envolver alrededor del texto:</p> + +<pre class="brush: html"><h1>Host selectors <a href="#"><context-span>example</context-span></a></h1></pre> + +<p>Dentro del constructor del elemento, creamos los elementos <code>style</code> y <code>span</code>, llenamos el <code>span</code> con el contenido del elemento personalizado y llenamos el elemento <code>style</code> con algunas reglas CSS:</p> + +<pre class="brush: js">let style = document.createElement('style'); + let span = document.createElement('span'); + span.textContent = this.textContent; + + const shadowRoot = this.attachShadow({mode: 'open'}); + shadowRoot.appendChild(style); + shadowRoot.appendChild(span); + + style.textContent = 'span:hover { text-decoration: underline; }' + + ':host-context(h1) { font-style: italic; }' + + ':host-context(h1):after { content: " - no links in headers!" }' + + ':host-context(article, aside) { color: gray; }' + + ':host(.footer) { color : red; }' + + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre> + +<p>La regla <code>:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }</code> estiliza todas las instancias del elemento <code><context-span></code> (la sombra host en esta instancia) en el documento.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS Scope', '#host-selector', ':host') }}</td> + <td>{{ Spec2('CSS Scope') }}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<p>Compatible con Chrome y Safari.</p> + +<div> + + +<p>{{Compat("css.selectors.host")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/Web_Components">Componentes Web</a></li> + <li>{{cssxref(":host()")}}</li> + <li>{{cssxref(":host-context()")}}</li> +</ul> + +<p> </p> diff --git a/files/es/web/css/_colon_hover/index.html b/files/es/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..65b6202f03 --- /dev/null +++ b/files/es/web/css/_colon_hover/index.html @@ -0,0 +1,105 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:hover' +--- +<div>{{ CSSRef }}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> <strong><code>:hover</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> coincide cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa. Generalmente se activa cuando el usuario se desplaza sobre un elemento con el cursor (puntero del mouse).</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier elemento <a> cuando está "mantenido (hovered)" */ +a:hover { + color: orange; +}</pre> + +<p>Los estilos definidos por la pseudoclase <code>:active</code> serán anulados por cualquier pseudo-clase posterior relacionada con el <em>enlace </em>({{ cssxref(":link") }}, {{ cssxref(":visited") }}, o {{ cssxref(":active") }}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla <code>:hover</code> después de las reglas <code>:link</code> y <code>:visited</code>, pero antes de <code>:active</code>, según lo definido por el <em>orden LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"><strong>Nota</strong>: La pseudo-clase <code>:hover</code> es problemática en las pantallas táctiles. Dependiendo del navegador, la pseudo-clase <code>:hover</code> podría no coincidir, coincidir solo por un momento después de tocar un elemento, o continuar coincidiendo incluso después de que el usuario haya dejado de tocar y hasta que el usuario toque otro elemento. Los desarrolladores web deben asegurarse de que el contenido sea accesible en dispositivos con capacidades <em>hovering </em>limitadas o inexistentes.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_básico">Ejemplo básico</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><a href="#">Intenta pasar el mouse sobre este enlace.</a></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a { + background-color: powderblue; + transition: background-color .5s; +} + +a:hover { + background-color: gold; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Ejemplo_básico")}}</p> + +<h3 id="Galería_de_imágenes">Galería de imágenes</h3> + +<p>Puede usar la pseudoclase <code>:hover</code> para crear una galería de imágenes con imágenes de tamaño completo que solo se muestran cuando el mouse se mueve sobre una miniatura. Vea <a href="/@api/deki/files/6247/=css-gallery.zip">esta demostración</a> para una posible nota.</p> + +<div class="note"><strong>Nota:</strong> Para un efecto análogo, pero basado en la pseudo-clase <a class="internal" href="/es/docs/Web/CSS/%3Achecked"><code>:checked</code></a> (aplicado a radioboxes ocultos), vea <a href="/@api/deki/files/6268/=css-checked-gallery.zip">esta demostración</a>, tomada de la página de referencia <a class="internal" href="/es/docs/Web/CSS/:checked">:checked</a>.</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Permite aplicar <code>:hover</code> a cualquier pseudo-elemento.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Ningún cambio significativo.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.hover")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium bug #370155: No ponga <code>:hover</code> sticky en los sitios que configuran una ventana gráfica móvil</a></li> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium bug #306581: Inmediatamente muestra los estados hover y active al tocar cuando la página no se puede desplazar.</a></li> +</ul> diff --git a/files/es/web/css/_colon_in-range/index.html b/files/es/web/css/_colon_in-range/index.html new file mode 100644 index 0000000000..95cee43d30 --- /dev/null +++ b/files/es/web/css/_colon_in-range/index.html @@ -0,0 +1,115 @@ +--- +title: ':in-range' +slug: 'Web/CSS/:in-range' +tags: + - CSS + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:in-range' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> <strong><code>:in-range</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa un elemento {{htmlelement("input")}} cuyo valor actual se encuentra dentro de los límites de rango especificados por los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max","input")}}.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier <input>, pero solo cuando tiene un rango + especificado, y su valor está dentro de ese rango */ +input:in-range { + background-color: rgba(0, 255, 0, 0.25); +}</pre> + +<p>Esta pseudo-clase es útil para dar al usuario una indicación visual de que el valor actual de un campo está dentro de los límites permitidos.</p> + +<div class="note"><strong>Nota:</strong> Esta pseudo-clase solo se aplica a los elementos que tienen (y pueden tomar) una limitación de rango. En ausencia de tal limitación, el elemento no puede estar "dentro del rango" ni "fuera de rango".</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2> + +<div id="example"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form action="" id="form1"> + <ul>Los valores entre 1 y 10 son válidos. + <li> + <input id="value1" name="value1" type="number" placeholder="1 a 10" min="1" max="10" value="12"> + <label for="value1">Tu valor esta </label> + </li> + </ul> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css;">li { + list-style: none; + margin-bottom: 1em; +} + +input { + border: 1px solid black; +} + +input:in-range { + background-color: rgba(0, 255, 0, 0.25); +} + +input:out-of-range { + background-color: rgba(255, 0, 0, 0.25); + border: 2px solid red; +} + +input:in-range + label::after { + content: 'bien.'; +} + +input:out-of-range + label::after { + content: 'fuera de rango!'; +}</pre> + +<h3 id="Resultado">Resultado</h3> +</div> + +<div>{{EmbedLiveSample('Ejemplo', 600, 140)}}</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Define cuándo <code>:in-range</code> coincide con elementos en HTML.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<div> + + +<p>{{Compat("css.selectors.in-range")}}</p> +</div> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{cssxref(":out-of-range")}}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validación de datos de formulario</a></li> +</ul> diff --git a/files/es/web/css/_colon_indeterminate/index.html b/files/es/web/css/_colon_indeterminate/index.html new file mode 100644 index 0000000000..ff56f97c85 --- /dev/null +++ b/files/es/web/css/_colon_indeterminate/index.html @@ -0,0 +1,134 @@ +--- +title: ':indeterminate' +slug: 'Web/CSS/:indeterminate' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:indeterminate' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:indeterminate</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento de formulario cuyo estado sea indeterminado.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier <input> cuyo estado sea indeterminado */ +input:indeterminate { + background: lime; +}</pre> + +<p>Los elementos seleccionados por este selector son:</p> + +<ul> + <li>Elementos <code><a href="/es/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> cuya propiedad <code>indeterminate</code> se establece en <code>true</code> por <a href="/es/docs/Web/JavaScript">JavaScript</a></li> + <li>Elementos <code><a href="/es/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>, cuando todos los radio buttons con el mismo valor <code>name</code> en el formulario no están marcados</li> + <li>Elementos {{HTMLElement("progress")}} en un estado indeterminado</li> +</ul> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Checkbox_y_radio_button">Checkbox y radio button</h3> + +<p>Este ejemplo aplica estilos especiales a las etiquetas asociadas con campos de formulario indeterminados.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <input type="checkbox" id="checkbox"> + <label for="checkbox">Esta etiqueta comienza con el color lima.</label> +</div> +<div> + <input type="radio" id="radio"> + <label for="radio">Esta etiqueta comienza con el color lima.</label> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; hightlight[5]">input:indeterminate + label { + background: lime; +} +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var inputs = document.getElementsByTagName("input"); + +for (var i = 0; i < inputs.length; i++) { + inputs[i].indeterminate = true; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Checkbox_y_radio_button', 'auto', 50)}}</p> + +<h3 id="Barra_de_progreso">Barra de progreso</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><progress> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css; hightlight[5]">progress { + margin: 4px; +} + +progress:indeterminate { + opacity: 0.5; + background-color: lightgray; + box-shadow: 0 0 2px 1px red; +} +</pre> + +<h3 id="Resultado_2">Resultado</h3> + +<p>{{EmbedLiveSample('Barra_de_progreso', 'auto', 30)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Define la semántica de HTML y la validación de restricciones.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Define la pseudo-clase, pero no la semántica asociada.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.indeterminate")}}</p> +</div> diff --git a/files/es/web/css/_colon_invalid/index.html b/files/es/web/css/_colon_invalid/index.html new file mode 100644 index 0000000000..a357717a25 --- /dev/null +++ b/files/es/web/css/_colon_invalid/index.html @@ -0,0 +1,149 @@ +--- +title: ':invalid' +slug: 'Web/CSS/:invalid' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:invalid' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:invalid</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento {{HTMLElement("input")}} u otro elemento {{HTMLElement("form")}} cuyos contenidos no se puedan <a href="/es/docs/Web/Guide/HTML/HTML5/Constraint_validation">validar</a>.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier <input> no válido */ +input:invalid { + background-color: pink; +}</pre> + +<p>Esta pseudo-clase es útil para resaltar errores de campo para el usuario.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Este ejemplo presenta una forma simple que colorea los elementos en verde cuando son validos y en rojo cuando no lo son.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form> + <label for="url_input">Ingresa una URL:</label> + <input type="url" id="url_input" /> + <br /> + <br /> + <label for="email_input">Introduzca una dirección de correo electrónico:</label> + <input type="email" id="email_input" required/> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input:invalid { + background-color: #ffdddd; +} + +form:invalid { + border: 5px solid #ffdddd; +} + +input:valid { + background-color: #ddffdd; +} + +form:valid { + border: 5px solid #ddffdd; +} + +input:required { + border-color: #800000; + border-width: 3px; +} + +input:required:invalid { + border-color: #C00000; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Ejemplo', 600, 150)}}</p> + +<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2> + +<p>El color rojo se usa comúnmente para indicar una entrada no válida. Las personas que tienen ciertos tipos de daltonismo no podrán determinar el estado de la entrada a menos que vaya acompañado de un indicador adicional que no dependa del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Comprensión de las WCAG, explicaciones de la Guía 1.4</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">Comprender el Criterio de Conformidad 1.4.1 | W3C Comprender WCAG 2.0</a></li> +</ul> + +<h2 id="Notas">Notas</h2> + +<h3 id="Radio_buttons">Radio buttons</h3> + +<p>Si alguno de los radio buttons en un grupo es <code>required</code>, la pseudo-clase <code>:invalid</code> se aplica a todos ellos si no se selecciona ninguno de los botones del grupo. (Los radio buttons agrupados comparten el mismo valor para su atributo <code>name</code>).</p> + +<h3 id="Gecko_por_defecto">Gecko por defecto</h3> + +<p>Por defecto, Gecko no aplica un estilo a la pseudo-clase <code>:invalid</code>. Sin embargo, sí aplica un estilo (un "resplandor" rojo que usa la propiedad {{Cssxref("box-shadow")}}) a la pseudoclase {{cssxref(":-moz-ui-invalid")}}, que se aplica en un subconjunto de casos para: <code>:invalid</code>.</p> + +<p>Puede inhabilitar el brillo con el siguiente CSS o anularlo por completo para modificar la apariencia de los campos no válidos:</p> + +<pre class="brush: css">:invalid { + box-shadow: none; +} + +:-moz-submit-invalid { + box-shadow: none; +} + +:-moz-ui-invalid { + box-shadow: none; +}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Define la semántica de HTML y la validación de restricciones.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.invalid")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Otras pseudo-clases relacionadas con la validación: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":valid") }}</li> + <li>Pseudo-clases relacionadas de Mozilla: {{cssxref(":-moz-ui-invalid")}}, {{cssxref(":-moz-submit-invalid")}}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validación de datos de formulario</a></li> +</ul> diff --git a/files/es/web/css/_colon_lang/index.html b/files/es/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..46bfc7609e --- /dev/null +++ b/files/es/web/css/_colon_lang/index.html @@ -0,0 +1,101 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - Pseudo-clase + - Web +translation_of: 'Web/CSS/:lang' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:lang()</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> es utilizada para modificar elementos en función del idioma en el que se determina que están.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier <p> en inglés (en) */ +p:lang(en) { + quotes: '\201C' '\201D' '\2018' '\2019'; +}</pre> + +<div class="note"> +<p><strong>Nota:</strong> En HTML, el lenguaje está determinado por una combinación del atributo {{htmlattrxref("lang")}}, el elemento {{HTMLElement("meta")}} y posiblemente por la información del protocolo (como los encabezados HTTP). Para otros tipos de documentos, puede haber otros métodos de documentos para determinar el idioma.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h3 id="Parámetro">Parámetro</h3> + +<dl> + <dt><code><language-code></code></dt> + <dd>Un {{cssxref("<string>")}} que representa el idioma que desea orientar. Los valores aceptables se especifican en las especificaciones <a href="/es/docs/Web/HTML">HTML</a>.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>En este ejemplo, la pseudo-clase <code>:lang()</code> se usa para hacer coincidir los elementos primarios de los elementos de cita ({{htmlElement("q")}}) utilizando <a href="/es/docs/Web/CSS/Child_selectors">selectores de hijo</a>. Tenga en cuenta que esto no ilustra la única manera de hacerlo, y que el mejor método para usar depende del tipo de documento. También tenga en cuenta que los valores de {{glossary("Unicode")}} se utilizan para especificar algunos de los caracteres de comillas especiales.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div lang="en"><q>Esta cita en inglés tiene una cita <q>anidada</q> adentro.</q></div> +<div lang="fr"><q>Esta cita en francés tiene una cita <q>anidada</q> adentro.</q></div> +<div lang="de"><q>Esta cita en aleman tiene una cita <q>anidada</q> adentro.</q></div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; } +:lang(fr) > q { quotes: '« ' ' »'; } +:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; } +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Ejemplo', 350)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Ningún cambio significativo.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.lang")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Pseudo-clases relacionadas con el lenguaje: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li> + <li>Atributo HTML {{htmlattrxref("lang")}}</li> + <li><a class="external" href="https://tools.ietf.org/html/bcp47">BCP 47 - Etiquetas para identificar idiomas</a></li> +</ul> diff --git a/files/es/web/css/_colon_last-child/index.html b/files/es/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..309a8b4b38 --- /dev/null +++ b/files/es/web/css/_colon_last-child/index.html @@ -0,0 +1,127 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:last-child' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:last-child</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa el último elemento entre un grupo de elementos hermanos.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier <p> que sea el último elemento + entre sus hermanos */ +p:last-child { + color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Ejemplo_básico">Ejemplo básico</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <p>Este texto no está seleccionado.</p> + <p>¡Este texto está seleccionado!</p> +</div> + +<div> + <p>Este texto no está seleccionado.</p> + <h2>Este texto no está seleccionado: no es un `p`.</h2> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p:last-child { + color: lime; + background-color: black; + padding: 5px; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p><span>{{EmbedLiveSample('Ejemplo_básico', 500, 200)}}</span></p> + +<h3 id="Diseñando_una_lista">Diseñando una lista</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><ul> + <li>Artículo 1</li> + <li>Artículo 2</li> + <li>Artículo 3 + <ul> + <li>Artículo 3.1</li> + <li>Artículo 3.2</li> + <li>Artículo 3.3</li> + </ul> + </li> +</ul></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">ul li { + color: blue; +} + +ul li:last-child { + border: 1px solid red; + color: red; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample('Diseñando_una_lista')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Los elementos coincidentes no requieren tener un padre.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.last-child")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{cssxref(":last-of-type")}}, {{cssxref(":first-child")}}, {{cssxref(":nth-child")}}</li> +</ul> diff --git a/files/es/web/css/_colon_last-of-type/index.html b/files/es/web/css/_colon_last-of-type/index.html new file mode 100644 index 0000000000..3058cd668f --- /dev/null +++ b/files/es/web/css/_colon_last-of-type/index.html @@ -0,0 +1,113 @@ +--- +title: ':last-of-type' +slug: 'Web/CSS/:last-of-type' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:last-of-type' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <strong><code>:last-of-type</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa el último elemento de su tipo entre un grupo de elementos hermanos.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier <p> que sea el último elemento + de su tipo entre sus hermanos */ +p:last-of-type { + color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Diseñando_el_último_párrafo">Diseñando el último párrafo</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h2>Título</h2> +<p>Párrafo 1</p> +<p>Párrafo 2</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p:last-of-type { + color: red; + font-style: italic; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Diseñando_el_último_párrafo')}}</p> + +<h3 id="Elementos_anidados">Elementos anidados</h3> + +<p>Este ejemplo muestra cómo los elementos anidados también pueden utilizarse. Tenga en cuenta que el <a href="/es/docs/Web/CSS/Universal_selectors">selector universal</a> (<code>*</code>) está implícito cuando no se escribe un selector simple.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><article> + <div>Este `div` es primero.</div> + <div>¡Este <span>'span' anidado es el último</span>!</div> + <div>¡Este <em>`em` anidado es el primero</em>, pero este <em>`em` anidado es el último</em>!</div> + <b>¡Este `b` califica!</b> + <div>¡Este es el 'div' final!</div> +</article> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">article :last-of-type { + background-color: pink; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample('Elementos_anidados', 500)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Los elementos coincidentes no requieren tener un padre.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.last-of-type")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{cssxref(":last-child")}}, {{Cssxref(":nth-last-of-type")}}</li> +</ul> diff --git a/files/es/web/css/_colon_left/index.html b/files/es/web/css/_colon_left/index.html new file mode 100644 index 0000000000..33a66ad6d3 --- /dev/null +++ b/files/es/web/css/_colon_left/index.html @@ -0,0 +1,80 @@ +--- +title: ':left' +slug: 'Web/CSS/:left' +tags: + - '@page' + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:left' +--- +<div>{{ CSSRef() }}</div> + +<p>La <strong><code>:left</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-clase</a>, <span class="tlid-translation translation" lang="es"><span title="">utilizada con la regla @page at, representa todas las páginas de la izquierda de un documento impreso.</span></span></p> + +<pre class="brush: css no-line-numbers">/* Selects any left-hand pages when printing */ +@page :left { + margin: 2in 3in; +}</pre> + +<p><span class="tlid-translation translation" lang="es"><span title="">La dirección principal de escritura del documento determina si una página es "izquierda" o "derecha".</span> <span title="">Por ejemplo, si la primera página tiene una dirección de escritura principal de izquierda a derecha, entonces será una página :right (derecha);</span> <span title="">si tiene una dirección de escritura importante de derecha a izquierda, será una página :left (izquierda).</span></span></p> + +<div class="note"> +<p><span class="tlid-translation translation" lang="es"><span title="">Nota: Esta pseudoclase se puede usar para cambiar solo las propiedades margin, padding, border y background del cuadro de página.</span> <span title="">Se ignorarán todas las demás propiedades y solo se verá afectado el cuadro de página, no el contenido del documento en la página.</span></span></p> +</div> + +<h2 id="Sintaxis">Sintaxis </h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">@page :left { + margin: 2in 3in; +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Paged Media', '#left-right-first', ':left') }}</td> + <td>{{ Spec2('CSS3 Paged Media') }}</td> + <td>Sin Cambio.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td> + <p>Definición Inicial.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + + + +<p>{{Compat("css.selectors.left")}}</p> + + + +<h2 id="Ver_También">Ver También</h2> + +<ul> + <li>{{ Cssxref("@page") }}</li> + <li>Otras pseudo-clases relacionadas con la página: {{ Cssxref(":first") }}, {{ Cssxref(":right") }}</li> +</ul> diff --git a/files/es/web/css/_colon_link/index.html b/files/es/web/css/_colon_link/index.html new file mode 100644 index 0000000000..7859239d9e --- /dev/null +++ b/files/es/web/css/_colon_link/index.html @@ -0,0 +1,105 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:link' +--- +<div>{{ CSSRef }}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:link</code></strong> <a href="/es/docs/Web/CSS">CSS</a> representa un elemento que aún no se ha visitado. Coincide con cada elemento no visitado {{HTMLElement("a")}}, {{HTMLElement("area")}}, o {{HTMLElement("link")}} que tiene un atributo <code>href</code>.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier <a> que aún no se haya visitado */ +a:link { + color: red; +}</pre> + +<p>Los estilos definidos por la pseudo-clase <code>:link</code> serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{cssxref(":active")}}, {{cssxref(":hover")}}, o {{cssxref(":visited")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla <code>:link</code> antes de todas las demás reglas relacionadas con el enlace, tal como lo define el <em>orden LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"> +<p><strong>Nota:</strong> Use {{cssxref(":any-link")}} para seleccionar un elemento independientemente de si ha sido visitado o no.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Por defecto, la mayoría de los navegadores aplican un valor especial {{cssxref("color")}} a los enlaces visitados. Por lo tanto, los enlaces de este ejemplo probablemente tendrán colores de fuente especiales solo antes de visitarlos. (Después de eso, deberá borrar el historial de su navegador para volver a verlos). Sin embargo, es probable que los valores de {{cssxref("background-color")}} permanezcan, ya que la mayoría de los navegadores no establecen esa propiedad en los enlaces visitados de forma predeterminada.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="#ordinary-target">Este es un enlace ordinario.</a><br> +<a href="">Ya has visitado este enlace.</a><br> +<a>Enlace de marcador de posición (no se personalizará)</a> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a:link { + background-color: gold; + color: green; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Ejemplos")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#link', ':link') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#link', ':link') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Elevar la restricción para aplicarla únicamente al elemento {{ HTMLElement("a") }}.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.link")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Pseudo-clases relacionadas con enlaces: {{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}</li> +</ul> diff --git a/files/es/web/css/_colon_not()/index.html b/files/es/web/css/_colon_not()/index.html new file mode 100644 index 0000000000..5182d83d77 --- /dev/null +++ b/files/es/web/css/_colon_not()/index.html @@ -0,0 +1,112 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not()' +tags: + - CSS + - Diseño + - Referencia + - Web + - pseudoclase +translation_of: 'Web/CSS/:not' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudoclase</a> <strong><code>:not()</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa elementos que no coinciden con una lista de selectores. Como evita que se seleccionen elementos específicos, se lo conoce como la <em>pseudoclase de negación</em>.</p> + +<pre class="brush: css no-line-numbers notranslate">/* Selecciona cualquier elemento que NO sea un párrafo */ +:not(p) { + color: blue; +}</pre> + +<div class="note"> +<p><strong>Notas:</strong></p> + +<ul> + <li>Se pueden escribir selectores inútiles usando esta pseudoclase. Por ejemplo, <code>:not(*)</code> coincide con cualquier elemento que no sea un elemento, por lo que la regla nunca se aplicará.</li> + <li>Esta pseudoclase puede aumentar la <a href="/es/docs/Web/CSS/Specificity">especificidad</a> de una regla. Por ejemplo, <code>#foo:not(#bar)</code> coincidirá con el mismo elemento que el <code>#foo</code> más simple, pero tiene una especificidad más alta.</li> + <li><code>:not(.foo)</code> coincidirá con cualquier cosa que no sea <code>.foo</code>, <em>incluidos {{HTMLElement("html")}} y {{HTMLElement("body")}}.</em></li> + <li>Este selector solo se aplica a un elemento; no puedes usarlo para excluir a todos los antepasados. Por ejemplo, <code>body :not(table) a</code> se aplicará a los enlaces dentro de una tabla, ya que {{HTMLElement("tr")}} coincidirá con la parte <code>:not()</code> del selector.</li> +</ul> +</div> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<p>La pseudoclase <code>:not()</code> requiere una lista separada por comas de uno o más selectores como argumento. La lista no debe contener otro selector de negación o un <a href="/es/docs/Web/CSS/Pseudo-elements">pseudoelemento</a>.</p> + +<div class="warning"> +<p>La capacidad de enumerar más de un selector es experimental y aún no es ampliamente compatible.</p> +</div> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>Soy un párrafo.</p> +<p class="fancy">¡Soy muy elegante!</p> +<div>NO soy un párrafo.</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.fancy { + text-shadow: 2px 2px 3px gold; +} + +/* elementos <p> que no están en la clase `.fancy` */ +p:not(.fancy) { + color: green; +} + +/* Elementos que no son elementos <p> */ +body :not(p) { + text-decoration: underline; +} + +/* Elementos que no son elementos <div> o <span> */ +body :not(div):not(span) { + font-weight: bold; +} + +/* Elementos que no son `.crazy` o `.fancy` */ +/* Tenga en cuenta que esta sintaxis aún no está bien soportada. */ +body :not(.crazy, .fancy) { + font-family: sans-serif; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Ejemplo')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#negation', ':not()')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Extiende su argumento para permitir algunos selectores no simples.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#negation', ':not()')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.not")}}</p> +</div> diff --git a/files/es/web/css/_colon_nth-child/index.html b/files/es/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..19e024c8ff --- /dev/null +++ b/files/es/web/css/_colon_nth-child/index.html @@ -0,0 +1,188 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:nth-child' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS">pseudo-clase</a> <strong><code>:nth-child()</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> coincide con uno o más elementos en función de su posición entre un grupo de hermanos.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cada cuarto elemento entre + cualquier grupo de hermanos */ +:nth-child(4n) { + color: lime; +} +</pre> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<p>La pseudo-clase <code>nth-child</code> se especifica con un único argumento, que representa el patrón para los elementos coincidentes.</p> + +<h3 id="Valores_de_palabras_clave">Valores de palabras clave</h3> + +<dl> + <dt><code>odd</code></dt> + <dd>Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc.</dd> + <dt><code>even</code></dt> + <dd>Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc.</dd> +</dl> + +<h3 id="Notación_funcional">Notación funcional</h3> + +<dl> + <dt><code><An+B></code></dt> + <dd>Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón <code>An+B</code>, para cada entero positivo o valor cero de <code>n</code>. El índice del primer elemento es <code>1</code>. Los valores <code>A</code> y <code>B</code> deben ser ambos {{cssxref("<integer>")}}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example_selectors" name="Example_selectors">Selectores de ejemplo</h3> + +<dl> + <dt><code>tr:nth-child(odd)</code> o <code>tr:nth-child(2n+1)</code></dt> + <dd>Representa las filas impares de una tabla HTML: 1, 3, 5, etc.</dd> + <dt><code>tr:nth-child(even)</code> o <code>tr:nth-child(2n)</code></dt> + <dd>Representa las filas pares de una tabla HTML: 2, 4, 6, etc.</dd> + <dt><code>:nth-child(7)</code></dt> + <dd>Representa el séptimo elemento.</dd> + <dt><code>:nth-child(5n)</code></dt> + <dd>Representa los elementos 5, 10, 15, etc.</dd> + <dt><code>:nth-child(3n+4)</code></dt> + <dd>Representa los elementos 4, 7, 10, 13, etc.</dd> + <dt><code>:nth-child(-n+3)</code></dt> + <dd>Representa los primeros tres elementos entre un grupo de hermanos.</dd> + <dt><code>p:nth-child(n)</code></dt> + <dd>Representa cada elemento <code><p></code> entre un grupo de hermanos. Esto es lo mismo que un simple selector <code>p</code>.</dd> + <dt><code>p:nth-child(1)</code> o <code>p:nth-child(0n+1)</code></dt> + <dd>Representa cada <code><p></code> que es el primer elemento entre un grupo de hermanos. Esto es lo mismo que el selector {{cssxref(":first-child")}}.</dd> +</dl> + +<h3 id="Ejemplo_detallado">Ejemplo detallado</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html"><h3><code>span:nth-child(2n+1)</code>, SIN un + <code>&lt;em&gt;</code> entre los hijos.</h3> +<p>Los hijos 1, 3, 5 y 7 son seleccionados.</p> +<div class="first"> + <span>Span 1!</span> + <span>Span 2</span> + <span>Span 3!</span> + <span>Span 4</span> + <span>Span 5!</span> + <span>Span 6</span> + <span>Span 7!</span> +</div> + +<br> + +<h3><code>span:nth-child(2n+1)</code>, CON un + <code>&lt;em&gt;</code> entre los hijos.</h3> +<p>Los hijos 1, 5 y 7 son seleccionados.<br> + 3 se usa en el conteo porque es un hijo, pero + no se selecciona porque no es un <code>&lt;span&gt;</code>.</p> +<div class="second"> + <span>Span!</span> + <span>Span</span> + <em>Este es un `em`.</em> + <span>Span</span> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> + <span>Span</span> +</div> + +<br> + +<h3><code>span:nth-of-type(2n+1)</code>, CON un + <code>&lt;em&gt;</code> entre los hijos.</h3> +<p>Los hijos 1, 4, 6 y 8 son seleccionados.<br> + 3 no se usa en el conteo ni se selecciona porque es un <code>&lt;em&gt;</code>, + no un <code>&lt;span&gt;</code>, y <code>nth-of-type</code> solo selecciona + hijos de ese tipo. El <code>&lt;em&gt;</code> se omite por completo y se ignora.</p> +<div class="third"> + <span>Span!</span> + <span>Span</span> + <em>Este es un `em`.</em> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> + <span>Span</span> + <span>Span!</span> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +span, +div em { + padding: 5px; + border: 1px solid green; + display: inline-block; + margin-bottom: 3px; +} + +.first span:nth-child(2n+1), +.second span:nth-child(2n+1), +.third span:nth-of-type(2n+1) { + background-color: lime; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Ejemplo_detallado', 550, 550)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td> + <p>Agrega la sintaxis <code>of <selector></code> y especifica que no se requiere que los elementos coincidentes tengan un padre.</p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.nth-child")}}</p> +</div> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li> +</ul> diff --git a/files/es/web/css/_colon_nth-last-child/index.html b/files/es/web/css/_colon_nth-last-child/index.html new file mode 100644 index 0000000000..daf0b8a50b --- /dev/null +++ b/files/es/web/css/_colon_nth-last-child/index.html @@ -0,0 +1,197 @@ +--- +title: ':nth-last-child' +slug: 'Web/CSS/:nth-last-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:nth-last-child' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:nth-last-child()</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> selecciona uno o más elementos en función de su posición entre un grupo de hermanos, contando desde el final.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cada cuarto elemento entre + cualquier grupo de hermanos, contando + hacia atrás desde el último */ +:nth-last-child(4n) { + color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota:</strong> Esta pseudo-clase es esencialmente la misma que {{Cssxref(":nth-child")}}, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La pseudo-clase <code>nth-last-child</code> se especifica con un solo argumento, que representa el patrón para los elementos coincidentes, contando desde el final.</p> + +<h3 id="Valores_de_palabras_clave">Valores de palabras clave</h3> + +<dl> + <dt><code>odd</code></dt> + <dd>Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc., contando desde el final.</dd> + <dt><code>even</code></dt> + <dd>Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc., contando desde el final.</dd> +</dl> + +<h3 id="Notación_funcional">Notación funcional</h3> + +<dl> + <dt><code><An+B></code></dt> + <dd>Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón <code>An+B</code>, para cada entero positivo o valor cero de <code>n</code>. El índice del primer elemento, contando desde el final, es <code>1</code>. Los valores <code>A</code> y <code>B</code> deben ser ambos {{cssxref("<integer>")}}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Example_selectors" name="Example_selectors">Selectores de ejemplo</h3> + +<dl> + <dt><code>tr:nth-last-child(odd)</code> o <code>tr:nth-last-child(2n+1)</code></dt> + <dd>Representa las filas impares de una tabla HTML: 1, 3, 5, etc., contando desde el final.</dd> + <dt><code>tr:nth-last-child(even)</code> o <code>tr:nth-last-child(2n)</code></dt> + <dd>Representa las filas pares de una tabla HTML: 2, 4, 6, etc., contando desde el final.</dd> + <dt><code>:nth-last-child(7)</code></dt> + <dd>Representa el séptimo elemento, contando desde el final.</dd> + <dt><code>:nth-last-child(5n)</code></dt> + <dd>Representa los elementos 5, 10, 15, etc., contando desde el final.</dd> + <dt><code>:nth-last-child(3n+4)</code></dt> + <dd>Representa los elementos 4, 7, 10, 13, etc., contando desde el final.</dd> + <dt><code>:nth-last-child(-n+3)</code></dt> + <dd>Representa los últimos tres elementos entre un grupo de hermanos.</dd> + <dt><code>p:nth-last-child(n)</code></dt> + <dd>Representa cada elemento <code><p></code> entre un grupo de hermanos. Esto es lo mismo que un simple selector <code>p</code>. </dd> + <dt><code>p:nth-last-child(1)</code> or <code>p:nth-last-child(0n+1)</code></dt> + <dd>Representa cada <code><p></code> que es el primer elemento entre un grupo de hermanos, contando desde el final. Esto es lo mismo que el selector {{cssxref(":last-child")}}. </dd> +</dl> + +<h3 id="Ejemplo_de_tabla">Ejemplo de tabla</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><table> + <tbody> + <tr> + <td>Primera línea</td> + </tr> + <tr> + <td>Segunda línea</td> + </tr> + <tr> + <td>Tercera línea</td> + </tr> + <tr> + <td>Cuarta línea</td> + </tr> + <tr> + <td>Quinta línea</td> + </tr> + </tbody> +</table> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">table { + border: 1px solid blue; +} + +/* Selecciona los últimos tres elementos */ +tr:nth-last-child(-n+3) { + background-color: pink; +} + +/* Toma todos los elementos a partir del penúltimo elemento */ +tr:nth-last-child(n+2) { + color: blue; +} + +/* Seleccione solo el penúltimo elemento */ +tr:nth-last-child(2) { + font-weight: 600; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Ejemplo_de_tabla', 300, 150)}}</p> + +<h3 id="Ejemplo_de_caso_Edge">Ejemplo de caso Edge</h3> + +<p>Como <code>n</code> comienza en cero, mientras que el último elemento comienza en uno, <code>n</code> y <code>n+1</code> seleccionarán los mismos elementos.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><table> + <tbody> + <tr> + <td>Primera línea</td> + </tr> + <tr> + <td>Segunda línea</td> + </tr> + <tr> + <td>Tercera línea</td> + </tr> + </tbody> +</table></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">tr:nth-last-child(n) { + background-color: lightgray; +} + +tr:nth-last-child(n+1){ + font-weight: 600; +} +</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample('Ejemplo_de_caso_Edge')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Los elementos coincidentes no requieren tener un padre.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.nth-last-child")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}</li> +</ul> diff --git a/files/es/web/css/_colon_nth-last-of-type/index.html b/files/es/web/css/_colon_nth-last-of-type/index.html new file mode 100644 index 0000000000..6699c2520d --- /dev/null +++ b/files/es/web/css/_colon_nth-last-of-type/index.html @@ -0,0 +1,97 @@ +--- +title: ':nth-last-of-type()' +slug: 'Web/CSS/:nth-last-of-type' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:nth-last-of-type' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:nth-last-of-type()</code></strong> <a href="/es/docs/Web/CSS">CSS</a> coincide con uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos, contando desde el final.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cada cuarto elementos <p> entre + cualquier grupo de hermanos, contando hacia + atrás desde el último */ +p:nth-last-of-type(4n) { + color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota:</strong> Esta pseudo-clase es esencialmente la misma que {{Cssxref(":nth-of-type")}}, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La pseudo-clase <code>nth-last-of-type</code> se especifica con un solo argumento, que representa el patrón para los elementos coincidentes, contando desde el final.</p> + +<p>Ver {{Cssxref(":nth-last-child")}} para una explicación más detallada de su sintaxis.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <span>Este es un span.</span> + <span>Este es otro span.</span> + <em>Esto esta enfatizado.</em> + <span>¡Guauu, este span se pone color lima!</span> + <strike>Esto está tachado.</strike> + <span>Aquí hay un último span.</span> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span:nth-last-of-type(2) { + background-color: lime; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Ejemplo')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Los elementos coincidentes no requieren tener un padre.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<div class="hidden">La tabla de compatibilidad de esta página es generada a partir de datos estructurados. Si quieres contribuir a estos datos, por favor mira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div> + +<p>{{Compat("css.selectors.nth-last-of-type")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{Cssxref(":nth-last-child")}}, {{Cssxref(":nth-of-type")}}</li> +</ul> diff --git a/files/es/web/css/_colon_nth-of-type/index.html b/files/es/web/css/_colon_nth-of-type/index.html new file mode 100644 index 0000000000..ad133d3584 --- /dev/null +++ b/files/es/web/css/_colon_nth-of-type/index.html @@ -0,0 +1,107 @@ +--- +title: ':nth-of-type' +slug: 'Web/CSS/:nth-of-type' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:nth-of-type' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:nth-of-type()</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> selecciona uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos.</p> + +<pre class="brush: css no-line-numbers language-css">/* Selecciona cada cuarto elementos <p> entre + cualquier grupo de hermanos */ +p:nth-of-type(4n) { + color: lime; +}</pre> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La pseudo-clase <code>nth-of-type</code> se especifica con un solo argumento, que representa el patrón para los elementos coincidentes.</p> + +<p>Ver {{Cssxref(":nth-child")}} para una explicación más detallada de su sintaxis.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_básico">Ejemplo básico</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div> + <div>Este elemento no se cuenta.</div> + <p>1er párrafo.</p> + <p>2do párrafo.</p> + <div>Este elemento no se cuenta.</div> + <p>3er párrafo.</p> + <p>4to párrafo.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* Párrafos impares */ +p:nth-of-type(2n+1) { + color: red; +} + +/* Párrafos pares */ +p:nth-of-type(2n) { + color: blue; +} + +/* Primer párrafo */ +p:nth-of-type(1) { + font-weight: bold; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Ejemplo_básico', 250, 200)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Los elementos coincidentes no requieren tener un padre.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td><br> + Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.nth-of-type")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}</li> +</ul> diff --git a/files/es/web/css/_colon_only-child/index.html b/files/es/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..c11051748e --- /dev/null +++ b/files/es/web/css/_colon_only-child/index.html @@ -0,0 +1,136 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:only-child' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:only-child</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa un elemento sin hermanos. Esto es lo mismo que <code>:first-child:last-child</code> o <code>:nth-child(1):nth-last-child(1)</code>, pero con una especificidad menor.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cada <p>, pero solo si es el */ +/* único hijo de su padre */ +p:only-child { + background-color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_básico">Ejemplo básico</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><main> + <div> + <i>Soy un hijo único y solitario.</i> + </div> + + <div> + <i>Yo tengo hermanos.</i><br> + <b>¡Yo también!</b><br> + <span>Yo también tengo hermanos, <span>pero este es un hijo único.</span></span> + </div> +</main></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">main :only-child { + color: red; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Ejemplo_básico','100%',180)}}</p> + +<h3 id="Ejemplo_de_lista">Ejemplo de lista</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><ol> + <li>Primero + <ul> + <li>Esta lista tiene solo un elemento. + </ul> + </li> + <li>Segundo + <ul> + <li>Esta lista tiene tres elementos. + <li>Esta lista tiene tres elementos. + <li>Esta lista tiene tres elementos. + </ul> + </li> +<ol> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">li li { + list-style-type: disc; +} +li:only-child { + color: red; + list-style-type: square; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample('Ejemplo_de_lista', '100%', 210)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Los elementos coincidentes no requieren tener un padre.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td><br> + Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<div> + + +<p>{{Compat("css.selectors.only-child")}}</p> +</div> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{Cssxref(":only-of-type")}}</li> + <li>{{Cssxref(":first-child")}}</li> + <li>{{Cssxref(":last-child")}}</li> + <li>{{Cssxref(":nth-child")}}</li> +</ul> diff --git a/files/es/web/css/_colon_only-of-type/index.html b/files/es/web/css/_colon_only-of-type/index.html new file mode 100644 index 0000000000..36d26b5fea --- /dev/null +++ b/files/es/web/css/_colon_only-of-type/index.html @@ -0,0 +1,97 @@ +--- +title: ':only-of-type' +slug: 'Web/CSS/:only-of-type' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:only-of-type' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:only-of-type</code></strong> <a href="/es/docs/Web/CSS">CSS</a> representa un elemento que no tiene hermanos del mismo tipo.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cada <p>, pero solo si es el único */ +/* elemento <p> dentro de su padre */ +p:only-of-type { + background-color: lime; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><main> + <div>Soy un `div` #1.</div> + <p>Yo soy el único `p` entre mis hermanos.</p> + <div>Soy un `div` #2.</div> + <div>Soy un `div` #3. + <i>Yo soy el único hijo `i`.</i> + <em>Soy un `em` #1.</em> + <em>Soy un `em` #2.</em> + </div> +</main> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">main :only-of-type { + color: red; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Ejemplo','100%',180)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Los elementos coincidentes no requieren tener un padre.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.only-of-type")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{Cssxref(":only-child")}}</li> + <li>{{Cssxref(":first-of-type")}}</li> + <li>{{Cssxref(":last-of-type")}}</li> + <li>{{Cssxref(":nth-of-type")}}</li> +</ul> diff --git a/files/es/web/css/_colon_optional/index.html b/files/es/web/css/_colon_optional/index.html new file mode 100644 index 0000000000..2efdc61674 --- /dev/null +++ b/files/es/web/css/_colon_optional/index.html @@ -0,0 +1,91 @@ +--- +title: ':optional' +slug: 'Web/CSS/:optional' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:optional' +--- +<div>{{ CSSRef }}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:optional</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} que no tenga el atributo {{ htmlattrxref("required", "input") }} establecido en él.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier opción <input> */ +input:optional { + border: 1px dashed black; +}</pre> + +<p>Esta pseudo-clase es útil para diseñar campos que no son necesarios para enviar un formulario.</p> + +<div class="note"> +<p><strong>Nota:</strong> La pseudo-clase {{cssxref(":required")}} selecciona los campos de formulario <em>requeridos</em>.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Ver {{cssxref(":invalid")}} para un ejemplo.</p> + +<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2> + +<p>Si un <a href="/es/docs/Web/HTML/Element/form">formulario</a> contiene {{htmlelement("input")}}s opcionales, las entradas requeridas deben indicarse utilizando el atributo {{ htmlattrxref("required", "input") }}. Esto se asegurará de que las personas que navegan con la ayuda de la tecnología de asistencia, como un lector de pantalla, puedan comprender qué entradas necesitan contenido válido para garantizar el envío exitoso del formulario.</p> + +<p>Las entradas requeridas también deben indicarse visualmente, utilizando un tratamiento que no dependa únicamente del color para transmitir el significado. Por lo general, se utilizan textos descriptivos y/o un icono.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.3_%E2%80%94_Input_Assistance_Help_users_avoid_and_correct_mistakes">MDN Understanding WCAG, Guideline 3.3 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html">Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Define la semántica de HTML y la validación de restricciones.</td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td>Define la pseudoclase, pero no la semántica asociada.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.selectors.optional")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Otras pseudo-clases relacionadas con la validación: {{ cssxref(":required") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validación de datos de formulario</a></li> +</ul> diff --git a/files/es/web/css/_colon_out-of-range/index.html b/files/es/web/css/_colon_out-of-range/index.html new file mode 100644 index 0000000000..2ed8e84372 --- /dev/null +++ b/files/es/web/css/_colon_out-of-range/index.html @@ -0,0 +1,116 @@ +--- +title: ':out-of-range' +slug: 'Web/CSS/:out-of-range' +tags: + - CSS + - Presentación + - Pseudo-Clase CSS + - Referencia CSS + - Web +translation_of: 'Web/CSS/:out-of-range' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:out-of-range</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa un elemento {{htmlelement("input")}} cuyo valor actual está fuera de los límites de rango especificados por los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max","input")}}.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier <input>, pero solo cuando tiene un + rango especificado, y su valor está fuera de ese rango */ +input:out-of-range { + background-color: rgba(255, 0, 0, 0.25); +}</pre> + +<p>Esta pseudo-clase es útil para dar al usuario una indicación visual de que el valor actual de un campo está fuera de los límites permitidos.</p> + +<div class="note"><strong>Nota:</strong> Esta pseudo-clase solo se aplica a los elementos que tienen (y pueden tomar) una limitación de rango. En ausencia de tal limitación, el elemento no puede estar "dentro del rango" ni "fuera de rango".</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2> + +<div id="example"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form action="" id="form1"> + <ul>Los valores entre 1 y 10 son válidos. + <li> + <input id="value1" name="value1" type="number" placeholder="1 a 10" min="1" max="10" value="12"> + <label for="value1">Tu valor esta </label> + </li> + </ul> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css;">li { + list-style: none; + margin-bottom: 1em; +} + +input { + border: 1px solid black; +} + +input:in-range { + background-color: rgba(0, 255, 0, 0.25); +} + +input:out-of-range { + background-color: rgba(255, 0, 0, 0.25); + border: 2px solid red; +} + +input:in-range + label::after { + content: 'bien.'; +} + +input:out-of-range + label::after { + content: '¡fuera de rango!'; +}</pre> + +<h3 id="Resultado">Resultado</h3> +</div> + +<div>{{EmbedLiveSample('Ejemplo', 600, 140)}}</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Define cuándo <code>:out-of-range</code> coincide con los elementos en HTML.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<div> + + +<p>{{Compat("css.selectors.out-of-range")}}</p> +</div> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{cssxref(":in-range")}}</li> + <li><a href="/es/docs/Learn/HTML/Forms/Form_validation">Validación de datos de formulario</a></li> +</ul> diff --git a/files/es/web/css/_colon_placeholder-shown/index.html b/files/es/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..9a113639b6 --- /dev/null +++ b/files/es/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,97 @@ +--- +title: ':placeholder-shown' +slug: 'Web/CSS/:placeholder-shown' +tags: + - CSS + - Experimental + - Pseudo-clase + - Referencia +translation_of: 'Web/CSS/:placeholder-shown' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La <a href="/es/docs/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:placeholder-shown</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento {{htmlElement("input")}} o {{htmlElement("textarea")}} que esté mostrando actualmente el <a href="/es/docs/Web/HTML/Element/input#attr-placeholder">texto de marcador de posición (placeholder)</a>.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier elemento con un placeholder activo */ +:placeholder-shown { + border: 2px solid silver; +}</pre> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_básico">Ejemplo básico</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><input placeholder="¡Escribe algo aquí!"></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight[6]">input { + border: 2px solid black; + padding: 3px; +} + +input:placeholder-shown { + border-color: silver; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Ejemplo_básico", 200, 60)}}</p> + +<h3 id="Texto_desbordante">Texto desbordante</h3> + +<p>En pantallas angostas como teléfonos inteligentes, el ancho de los cuadros de búsqueda y otros campos de formulario pueden acortarse drásticamente. Esto puede provocar que el texto de marcador de posición se recorte de una manera no deseada. A menudo es útil alterar este comportamiento con la propiedad {{cssxref("text-overflow")}}.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><input placeholder="¡Ingresa algo en este campo, por favor!"></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">input:placeholder-shown { + text-overflow: ellipsis; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample("Texto_desbordante", 200, 60)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.selectors.placeholder-shown")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>El pseudo-elemento {{cssxref("::placeholder")}} estiliza el placeholder <em>por sí mismo</em>.</li> + <li>Elementos HTML relacionados: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li> + <li>{{cssxref(":-moz-placeholder")}}, {{cssxref("::-moz-placeholder")}}</li> + <li><a href="/es/docs/Learn/HTML/Forms">Formularios HTML</a></li> +</ul> diff --git a/files/es/web/css/_colon_read-only/index.html b/files/es/web/css/_colon_read-only/index.html new file mode 100644 index 0000000000..a97724cdf8 --- /dev/null +++ b/files/es/web/css/_colon_read-only/index.html @@ -0,0 +1,100 @@ +--- +title: ':read-only' +slug: 'Web/CSS/:read-only' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:read-only' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:read-only</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa un elemento que ya no es editable por el usuario (como un <a href="/es/docs/Web/HTML/Element/input">input</a>).</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier <input> que está en modo de solo lectura */ +/* Soportado en Firefox usando prefijo */ +input:-moz-read-only { + background-color: #ccc; +} + +/* El prefijo no es necesario en navegadores basados en Blink/WebKit/Edge */ +p:read-only { + cursor: not-allowed; +} +input:read-only { + background-color: #ccc; +} </pre> + +<div class="note"> +<p><strong>Nota</strong>: El selector no solo selecciona {{htmlElement("input")}} marcados como {{htmlattrxref("readonly", "input")}}; también selecccionará cualquier elemento que no pueda ser editar por el usuario. Lea sobre el atributo <a href="/es/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a>.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">:read-only</pre> + +<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="text" value="Aquí puedes poner lo que quieras."> +<input type="text" value="Campo de solo lectura." readonly> +<p>Este es un párrafo normal.</p> +<p contenteditable="true">Puedes editar este párrafo, ¡inténtalo!</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input { min-width: 25em; } +input:-moz-read-only { background: cyan; } +input:read-only { background: cyan; } + +p:-moz-read-only { background: lightgray; } +p:read-only { background: lightgray; } +p[contenteditable="true"] { color: blue; } +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Ejemplo")}}</p> + +<h2 class="editable" id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Define la semántica relacionada con HTML y de la validación de las restricciones.</td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Define la pseudoclase, pero no la semántica asociada.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<p>{{Compat("css.selectors.read-only")}}</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{cssxref(":read-write")}}</li> + <li>Atributo HTML {{htmlattrxref("contenteditable")}}</li> +</ul> diff --git a/files/es/web/css/_colon_read-write/index.html b/files/es/web/css/_colon_read-write/index.html new file mode 100644 index 0000000000..404b97ce79 --- /dev/null +++ b/files/es/web/css/_colon_read-write/index.html @@ -0,0 +1,99 @@ +--- +title: ':read-write' +slug: 'Web/CSS/:read-write' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:read-write' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="https://developer.mozilla.org/es/docs/CSS/Pseudo-classes" rel="nofollow">pseudo-clase</a> <strong><code>:read-write</code></strong> de <a href="https://developer.mozilla.org/es/docs/Web/CSS">CSS</a> representa un elemento (como un <a href="https://developer.mozilla.org/es/docs/Web/HTML/Element/input" rel="nofollow">input</a>) que es editable por el usuario.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier elemento <input> que sea editable */ +/* Compatible con Firefox con un prefijo */ +input:-moz-read-write { + background-color: #bbf; +} + +/* Compatible con Blink/WebKit/Edge sin un prefijo */ +input:read-write { + background-color: #bbf; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Este selector no solo selecciona texto de {{htmlElement("input")}}; seleccionará <em>cualquier</em> elemento que pueda editar el usuario, como un elemento {{htmlelement("p")}} con {{htmlattrxref("contenteditable")}} establecido en él.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="text" value="Escribe lo que quieras aquí."> +<input type="text" value="Este es un campo de solo lectura." readonly> +<p>Este es un párrafo normal.</p> +<p contenteditable="true">¡Puedes editar este párrafo!</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css line-numbers language-css">input { min-width: 25em; } +input:-moz-read-write { background: cyan; } +input:read-write { background: cyan; } + +p:-moz-read-write { background: lightgray; } +p:read-write { background: lightgray; } +p[contenteditable="true"] { color: blue; } +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Ejemplo")}}</p> + +<h2 class="editable" id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Define la semántica con respecto a HTML y validación de restricciones.</td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Define la pseudo-clase, pero no la semántica asociada.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.selectors.read-write")}}</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{cssxref(":read-only")}}</li> + <li>Atributo HTML {{htmlattrxref("contenteditable")}}</li> +</ul> diff --git a/files/es/web/css/_colon_required/index.html b/files/es/web/css/_colon_required/index.html new file mode 100644 index 0000000000..2dd6458012 --- /dev/null +++ b/files/es/web/css/_colon_required/index.html @@ -0,0 +1,91 @@ +--- +title: ':required' +slug: 'Web/CSS/:required' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:required' +--- +<div>{{ CSSRef }}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:required</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} que tenga el atributo {{ htmlattrxref("required", "input") }} establecido en él.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier <input> requerido */ +input:required { + border: 1px dashed red; +}</pre> + +<p>Esta pseudo-clase es útil para resaltar campos que deben tener datos válidos antes de que se pueda enviar un formulario.</p> + +<div class="note"> +<p><strong>Nota:</strong> La pseudoclase {{cssxref(":optional")}} selecciona campos de formulario <em>opcionales</em>.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Ver {{cssxref(":invalid")}} para un ejemplo.</p> + +<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2> + +<p>Obligatoriamente los {{htmlelement("input")}} deben tener el atributo {{ htmlattrxref("required", "input") }} aplicado a ellos. Esto asegurará que las personas que navegan con la ayuda de tecnología de asistencia, como un lector de pantalla, puedan comprender qué entradas necesitan contenido válido para garantizar un envío exitoso.</p> + +<p>Si el formulario también contiene entradas opcionales, las entradas requeridas deben indicarse visualmente utilizando un tratamiento que no dependa únicamente del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.3_%E2%80%94_Input_Assistance_Help_users_avoid_and_correct_mistakes">MDN Comprender las WCAG, explicaciones de la Guía 3.3</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html" rel="noopener">Comprender el Criterio de Conformidad 3.3.2 | W3C Comprender WCAG 2.0</a></li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Define la semántica de HTML y la validación de restricciones.</td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td>Define la pseudo-clase, pero no la semántica asociada.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.selectors.required")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Otras pseudo-clases relacionadas con la validación: {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validación de datos de formulario</a></li> +</ul> diff --git a/files/es/web/css/_colon_right/index.html b/files/es/web/css/_colon_right/index.html new file mode 100644 index 0000000000..97490676a3 --- /dev/null +++ b/files/es/web/css/_colon_right/index.html @@ -0,0 +1,78 @@ +--- +title: ':right' +slug: 'Web/CSS/:right' +tags: + - '@page' + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:right' +--- +<div>{{ CSSRef() }}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <a href="/es/docs/Web/CSS">CSS</a> <strong><code>:right</code></strong>, utilizada con la <a href="/es/docs/Web/CSS/At-rule">regla-at</a> {{cssxref("@page")}}, representa todas las páginas de la derecha de un documento impreso.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier página de la derecha al imprimir */ +@page :right { + margin: 2in 3in; +}</pre> + +<p>Que una página dada sea "izquierda" o "derecha" está determinada por la dirección principal de escritura del documento. Por ejemplo, si la primera página tiene una dirección de escritura principal de izquierda a derecha, entonces será una página <code>:right</code>; si tiene una dirección de escritura principal de derecha a izquierda, entonces será una página {{Cssxref(":left")}}.</p> + +<div class="note"> +<p><strong>Nota:</strong> No puede cambiar todas las propiedades de CSS con esta pseudo-clase. Solo puede cambiar las propiedades {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, y {{ Cssxref("background") }} de la caja de página. Se ignorarán todas las demás propiedades y solo se verá afectada la caja de página, no el contenido del documento en la página.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">@page :right { + margin: 2in 3in; +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Paged Media', '#left-right-first', ':right') }}</td> + <td>{{ Spec2('CSS3 Paged Media') }}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p> </p> + + + +<p>{{Compat("css.selectors.right")}}</p> + +<p> </p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{ Cssxref("@page") }}</li> + <li>Otras páginas relacionadas con la pseudo-clases: {{ Cssxref(":first") }}, {{ Cssxref(":left") }}</li> +</ul> diff --git a/files/es/web/css/_colon_root/index.html b/files/es/web/css/_colon_root/index.html new file mode 100644 index 0000000000..5c5bc5e192 --- /dev/null +++ b/files/es/web/css/_colon_root/index.html @@ -0,0 +1,64 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:root' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:root</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> selecciona el elemento raíz de un árbol que representa el documento. En HTML, <code>:root</code> representa el elemento {{HTMLElement("html")}} y es idéntico al selector <code>html</code>, excepto que su <a href="/es/docs/Web/CSS/Specificity">especificidad</a> es mayor.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona el elemento raíz del documento: + <html> en el caso de HTML */ +:root { + background: yellow; +}</pre> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p><code>:root</code> puede ser útil para declarar <a href="/es/docs/Web/CSS/Using_CSS_variables">variables CSS</a> globales:</p> + +<pre class="brush: css">:root { + --main-color: hotpink; + --pane-padding: 5px 42px; +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.selectors.root")}}</p> diff --git a/files/es/web/css/_colon_target/index.html b/files/es/web/css/_colon_target/index.html new file mode 100644 index 0000000000..bb426f225d --- /dev/null +++ b/files/es/web/css/_colon_target/index.html @@ -0,0 +1,214 @@ +--- +title: ':target' +slug: 'Web/CSS/:target' +tags: + - CSS + - Layout + - Pseudo clase CSS + - Referencia + - Web +translation_of: 'Web/CSS/:target' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:target</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa un elemento único (el <em>elemento objetivo</em>) con un {{htmlattrxref("id")}} que coincide con el fragmento de la URL.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona un elemento con una ID que coincida con el fragmento de la URL actual */ +:target { + border: 2px solid black; +}</pre> + +<p>Por ejemplo, la siguiente URL tiene un fragmento (indicado por el signo #) que apunta a un elemento llamado <code>section2</code>:</p> + +<pre>http://www.example.com/index.html#section2</pre> + +<p>El siguiente elemento sería seleccionado por un selector <code>:target</code> cuando la URL actual sea igual a la anterior:</p> + +<pre class="brush: html"><section id="section2">Ejemplo</section></pre> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Una_tabla_de_contenido">Una tabla de contenido</h3> + +<p>La pseudo-clase <code>:target</code> se puede usar para resaltar la parte de una página a la que se ha vinculado desde una tabla de contenido.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h3>Tabla de contenido</h3> +<ol> + <li><a href="#p1">¡Salta al primer párrafo!</a></li> + <li><a href="#p2">¡Salta al segundo párrafo!</a></li> + <li><a href="#nowhere">Este enlace no va a ninguna parte, + porque el objetivo no existe.</a></li> +</ol> + +<h3>Mi artículo divertido</h3> +<p id="p1">Puede orientar elegir como blanco <i>este párrafo</i> utilizando un + fragmento de URL. ¡Haz clic en el enlace de arriba para probar!</p> +<p id="p2">Este es <i>otro párrafo</i>, también accesible + desde los enlaces de arriba. ¿No es encantador?</p> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p:target { + background-color: gold; +} + +/* Agrega un pseudo-elemento dentro del elemento de destino */ +p:target::before { + font: 70% sans-serif; + content: "►"; + color: limegreen; + margin-right: .25em; +} + +/* Estilo de elementos en cursiva dentro del elemento de destino */ +p:target i { + color: red; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Una_tabla_de_contenido', 500, 300)}}</p> + +<h3 id="CSS-Puro_lightbox">CSS-Puro lightbox</h3> + +<p>Puede usar la pseudo-clase <code>:target</code> para crear un lightbox sin usar JavaScript. Esta técnica se basa en la capacidad de los enlaces de anclaje para señalar elementos que están inicialmente ocultos en la página. Una vez segmentado, el CSS cambia su <code>display</code> para que se muestren.</p> + +<div class="note"><strong>Nota:</strong> Un CSS-Puro lightbox más completo basado en la pseudoclase <code>:target</code> está <a href="https://github.com/madmurphy/takefive.css/">disponible en GitHub</a> (<a href="https://madmurphy.github.io/takefive.css/">demo</a>).</div> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><ul> + <li><a href="#ejemplo1">Abrir ejemplo #1</a></li> + <li><a href="#ejemplo2">Abrir ejemplo #2</a></li> +</ul> + +<div class="lightbox" id="ejemplo1"> + <figure> + <a href="#" class="close"></a> + <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption> + </figure> +</div> + +<div class="lightbox" id="ejemplo2"> + <figure> + <a href="#" class="close"></a> + <figcaption>Cras risus odio, pharetra nec ultricies et, + mollis ac augue. Nunc et diam quis sapien dignissim auctor. + Quisque quis neque arcu, nec gravida magna.</figcaption> + </figure> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">/* lightbox sin abrir */ +.lightbox { + display: none; +} + +/* lightbox abierto */ +.lightbox:target { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +/* Contenido de Lightbox */ +.lightbox figcaption { + width: 25rem; + position: relative; + padding: 1.5em; + background-color: lightpink; +} + +/* Botón Cerrar */ +.lightbox .close { + position: relative; + display: block; +} + +.lightbox .close::after { + right: -1rem; + top: -1rem; + width: 2rem; + height: 2rem; + position: absolute; + display: flex; + z-index: 1; + align-items: center; + justify-content: center; + background-color: black; + border-radius: 50%; + color: white; + content: "×"; + cursor: pointer; +} + +/* superposición Lightbox */ +.lightbox .close::before { + left: 0; + top: 0; + width: 100%; + height: 100%; + position: fixed; + background-color: rgba(0,0,0,.7); + content: ""; + cursor: default; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample('CSS-Puro_lightbox', 500, 220)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Define la semántica específica de HTML.</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.target")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Using_the_:target_selector">Usando la pseudoclase :target en selectores</a></li> +</ul> diff --git a/files/es/web/css/_colon_valid/index.html b/files/es/web/css/_colon_valid/index.html new file mode 100644 index 0000000000..047421e43a --- /dev/null +++ b/files/es/web/css/_colon_valid/index.html @@ -0,0 +1,83 @@ +--- +title: ':valid' +slug: 'Web/CSS/:valid' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:valid' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a> <strong><code>:valid</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa cualquier elemento {{HTMLElement("input")}} u otro elemento {{HTMLElement("form")}} cuyo contenido se <a href="/es/docs/Web/Guide/HTML/HTML5/Constraint_validation">valide</a> satisfactoriamente. Esto permite que los campos válidos adopten fácilmente una apariencia que ayuda al usuario a confirmar que sus datos están formateados correctamente.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier <input> válido */ +input:valid { + background-color: powderblue; +}</pre> + +<p>Esta pseudo-clase es útil para resaltar los campos correctos para el usuario.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Ver {{cssxref(":invalid")}} para un ejemplo.</p> + +<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2> + +<p>El color verde se usa comúnmente para indicar una entrada válida. Las personas que tienen ciertos tipos de daltonismo no podrán determinar el estado de la entrada a menos que vaya acompañado de un indicador adicional que no dependa del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Comprensión de las WCAG, explicaciones de la Guía 1.4</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">Comprender el Criterio de Conformidad 1.4.1 | W3C Comprender WCAG 2.0</a></li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Define la semántica de HTML y la validación de restricciones.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td><br> + Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.valid")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Otras pseudo-clases relacionadas con la validación: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}</li> + <li><a href="/es/docs/Learn/HTML/Forms/Form_validation">Validación de datos de formulario</a></li> +</ul> diff --git a/files/es/web/css/_colon_visited/index.html b/files/es/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..3fa81d8ddc --- /dev/null +++ b/files/es/web/css/_colon_visited/index.html @@ -0,0 +1,120 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:visited' +--- +<div>{{ CSSRef }}</div> + +<p>La <a href="/es/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> <strong><code>:visited</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa enlaces que el usuario ya ha visitado. Por motivos de privacidad, los estilos que se pueden modificar con este selector son muy limitados.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona cualquier <a> que ha sido visitado */ +a:visited { + color: green; +}</pre> + +<p>Los estilos definidos por la pseudo-clase <code>:visited</code> serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":active")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla <code>:visited</code> después de la regla <code>:link</code> pero antes de las reglas <code>:hover</code> y <code>:active</code>, según lo definido por el orden LVHA: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<h2 id="Restricciones_de_estilo">Restricciones de estilo</h2> + +<p>Por motivos de privacidad, los navegadores limitan estrictamente los estilos que puede aplicar utilizando esta pseudo-clase y cómo se pueden usar:</p> + +<ul> + <li>Las propiedades CSS permitidas son {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("column-rule-color") }}, y {{ cssxref("outline-color") }}.</li> + <li>Los atributos SVG permitidos son {{SVGAttr("fill")}} y {{SVGAttr("stroke")}}.</li> + <li>El componente alfa de los estilos permitidos será ignorado. En su lugar, se utilizará el componente alfa del estado non-<code>:visited</code> del elemento, excepto cuando ese componente sea 0, en cuyo caso el estilo establecido en <code>:visited</code> se ignorará por completo.</li> + <li>Aunque estos estilos pueden cambiar la apariencia de los colores para el usuario final, el método {{domxref("window.getComputedStyle")}} mentirá y siempre devolverá el valor del color non-<code>:visited</code>. </li> +</ul> + +<div class="note"> +<p><strong>Nota:</strong> Para obtener más información sobre estas limitaciones y las razones detrás de ellas, vea <a href="/es/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privacidad y el selector :visited</a>.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Las propiedades que de otro modo no tendrían ningún color o serían transparentes no se pueden modificar con <code>:visited</code>. De las propiedades que se pueden establecer con esta pseudo-clase, su navegador probablemente solo tenga un valor predeterminado para <code>color</code> y <code>column-rule-color</code>. Por lo tanto, si desea modificar las otras propiedades, deberá darles un valor base fuera del selector <code>:visited</code>.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="#test-visited-link">¿Ya has visitado este enlace?</a><br> +<a href="">Ya has visitado este enlace.</a></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a { + /* Especifique los valores predeterminados no transparentes a ciertas propiedades, + lo que les permite ser diseñado con el estado :visited */ + background-color: white; + border: 1px solid white; +} + +a:visited { + background-color: yellow; + border-color: hotpink; + color: hotpink; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Ejemplo")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#link', ':visited') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#link', ':visited') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Levanta la restricción para aplicar <code>:visited</code> solo al elemento {{ HTMLElement("a") }}. Permite a los navegadores restringir su comportamiento por razones de privacidad.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.selectors.visited")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privacidad y el selector :visited</a></li> + <li>pseudo-clases relacionadas con enlaces: {{cssxref(":link")}}, {{cssxref(":active")}}, {{cssxref(":hover")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_-moz-color-swatch/index.html b/files/es/web/css/_doublecolon_-moz-color-swatch/index.html new file mode 100644 index 0000000000..3edb2edc5b --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-color-swatch/index.html @@ -0,0 +1,56 @@ +--- +title: '::-moz-color-swatch' +slug: 'Web/CSS/::-moz-color-swatch' +translation_of: 'Web/CSS/::-moz-color-swatch' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>El <strong><code>::-moz-color-swatch</code></strong> <a href="/en-US/docs/Web/CSS">pdseudo-elemento CSS</a> es una<a href="/en-US/docs/Web/CSS/Mozilla_Extensions"> extension de Mozilla</a> que representa el color seleccionado en un {{HTMLElement("input")}} de <code>type="color"</code>.</p> + +<div class="note"> +<p><strong>Nota:</strong> Usando <code>::-moz-color-swatch</code> con cualquier cosa excepto <code><input type="color"></code> no concuerda con nada y no tiene efecto.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="color" value="#de2020" /> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input[type=color]::-moz-color-swatch { + border-radius: 10px; + border-style: none; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Example", 300, 50)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificacion. Es un pseudo-elemento patentado específicamente para Gecko.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.selectors.-moz-color-swatch")}}</p> + +<h2 id="Ver_tambien">Ver tambien</h2> + +<ul> + <li>Pseudo-elementos similares usados por otros buscadores: + <ul> + <li>{{cssxref("::-webkit-color-swatch")}}, pseudo-elemento soportado por WebKit y Blink (Safari, Chrome, and Opera)</li> + </ul> + </li> +</ul> diff --git a/files/es/web/css/_doublecolon_-moz-page-sequence/index.html b/files/es/web/css/_doublecolon_-moz-page-sequence/index.html new file mode 100644 index 0000000000..33ee3c2706 --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-page-sequence/index.html @@ -0,0 +1,82 @@ +--- +title: '::-moz-page-sequence' +slug: 'Web/CSS/::-moz-page-sequence' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsExample + - No estándar(2) + - Pseudo-elemento + - Referencia CSS +translation_of: 'Web/CSS/::-moz-page-sequence' +--- +<div>{{CSSRef}}{{non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><a href="/es/docs/Web/CSS">CSS </a><code>::-moz-page-sequence</code> sirve para representar el fondo de la previsualización de impresión.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Necesita un eejemplo</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref("::-moz-page")}}</li> + <li>{{cssxref("::-moz-scrolled-page-sequence")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_-moz-page/index.html b/files/es/web/css/_doublecolon_-moz-page/index.html new file mode 100644 index 0000000000..5e6d7d7ffa --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-page/index.html @@ -0,0 +1,27 @@ +--- +title: '::-moz-page' +slug: 'Web/CSS/::-moz-page' +tags: + - CSS + - NeedsCompatTable + - NeedsE + - No estándar(2) + - Referencia CSS +translation_of: 'Web/CSS/::-moz-page' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a><code> CSS ::-moz-page</code> se aplica a una página individual que va a ser impresa o que está en previsualización para impresión.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref("::-moz-page-sequence")}}</li> + <li>{{cssxref("::-moz-scrolled-page-sequence")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_-moz-placeholder/index.html b/files/es/web/css/_doublecolon_-moz-placeholder/index.html new file mode 100644 index 0000000000..efe8d9c509 --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-placeholder/index.html @@ -0,0 +1,108 @@ +--- +title: '::-moz-placeholder' +slug: 'Web/CSS/::-moz-placeholder' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento CSS + - Referencia CSS +translation_of: 'Web/CSS/::placeholder' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<div class="note"><strong>Nota:</strong> El pseudo-elemento <code>::-moz-placeholder</code> fue creado como sustituto de la pseudo-clase {{cssxref(':-moz-placeholder')}} que fue depreciada a partir de la versión de 19 de Firefox.</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><code>::-moz-placeholder</code> sirve para seleccionar cualquier elemento de un formulario que esté mostrando un <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">marcador de posición de texto (placeholder text) </a>. Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia de estos elementos, cuyo estilo por defecto es de color gris claro. Puede que no funcione correctamente si se cambia el color de fondo de los campos de los formularios para que sean, por ejemplo, de un color similar, así que en ese caso se puede usar este pseudo-elemento para cambiar el color del marcador de posición de texto (placeholder text).</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>En este ejemplo se da estilo al marcador de posición del texto (placeholder text) haciendo que el color del texto sea verde (green).</p> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush:html"><input id="test" placeholder="Placeholder text!"> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush:css">input::-moz-placeholder { + color: green; +} +</pre> + +<p>Obtendremos el siguiente resultado:</p> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("19.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("19.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox aplica un estilo por defecto de <code>{{cssxref("opacity")}}: 0.54</code> al marcador de posición del texto (placeholder). Ver {{Bug("556145")}}. La mayoría de los demás navegadores importante no comparten este estilo ni para el pseudo-elemento ni para la pseudo-clase.</p> + +<p>La implementación previa en el motor Gecko era como la pseudo-clase {{cssxref(":-moz-placeholder")}}. Ver {{Bug("737786")}}.</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref("::placeholder")}}</li> + <li>{{cssxref("::-webkit-input-placeholder")}}</li> + <li>{{cssxref(":-ms-input-placeholder")}}</li> + <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("textarea")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_-moz-progress-bar/index.html b/files/es/web/css/_doublecolon_-moz-progress-bar/index.html new file mode 100644 index 0000000000..0d3cd4d002 --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-progress-bar/index.html @@ -0,0 +1,55 @@ +--- +title: '::-moz-progress-bar' +slug: 'Web/CSS/::-moz-progress-bar' +tags: + - CSS + - 'CSS: Extensiones Mozilla' + - NeedsCompatTable + - No estandar + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-moz-progress-bar' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> <strong><code>::-moz-progress-bar</code></strong> de <a href="/es/docs/Web/CSS">CSS</a> es una <a href="/es/docs/Web/CSS/Mozilla_Extensions">extensión de Mozilla</a> que representa la barra de progreso dentro de un elemento {{HTMLElement("progress")}}. (La barra representa la cantidad de progreso que se ha realizado).</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html;"><progress value="30" max="100">30%</progress> +<progress max="100">Indeterminado</progress></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">::-moz-progress-bar { + background-color: red; +} + +/* Forzar barras indeterminadas para tener ancho cero */ +:indeterminate::-moz-progress-bar { + width: 0; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Ejemplos')}}</p> + +<p>La primera barra de arriba debe tener este aspecto:</p> + +<p><img alt="Custom styled progress bar" class="default internal" src="/@api/deki/files/5387/=redbar.png"></p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{HTMLElement("progress")}}</li> + <li>{{ cssxref("::-ms-fill") }}</li> + <li>{{ cssxref("::-webkit-progress-bar") }}</li> + <li>{{ cssxref("::-webkit-progress-value") }}</li> + <li>{{ cssxref("::-webkit-progress-inner-element") }}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_-moz-range-progress/index.html b/files/es/web/css/_doublecolon_-moz-range-progress/index.html new file mode 100644 index 0000000000..22c7889cf0 --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-range-progress/index.html @@ -0,0 +1,115 @@ +--- +title: '::-moz-range-progress' +slug: 'Web/CSS/::-moz-range-progress' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Web/CSS/::-moz-range-progress' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><a href="/es/docs/Web/CSS">CSS </a><strong><code>::-moz-range-progress</code></strong> representa la parte del "camino" (la ranura sobre la que desliza) de un elemento {{HTMLElement("input")}} con <code>type="range"</code>, que se corresponde con los valores inferiores al valor seleccionado actualmente en ese "camino".</p> + +<div class="note"> +<p>Si usamos <code>::-moz-range-progress</code> con cualquier otra cosa que no sea <code><input type="range"></code> ni seleccionaremos nada ni conseguiremos ningún efecto.</p> +</div> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">input[type=range]::-moz-range-progress { + background-color: green; + height: 1em; +} +</pre> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><input type="range" min="0" max="100" step="5" value="50"/> +</pre> + +<h3 id="Salida">Salida</h3> + +<p>{{EmbedLiveSample("Example", 300, 50)}}</p> + +<p>Una barra de progreso que utilice este estilo se vería de la siguiente manera:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12041/Screen%20Shot%202015-12-04%20at%2020.14.48.png"></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario de Gecko.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>El pseudo-elements que usa Gecko para dar estilo a otras parte de un input con type="range": + <ul> + <li>{{cssxref("::-moz-range-thumb")}}</li> + <li>{{cssxref("::-moz-range-track")}}</li> + </ul> + </li> + <li>{{cssxref("::-ms-fill-upper")}}</li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Dando estilo con CSS a input con type="range" en todos los navegadores.</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilo y usando scripts para elementos deslizantes.</a></li> +</ul> diff --git a/files/es/web/css/_doublecolon_-moz-range-thumb/index.html b/files/es/web/css/_doublecolon_-moz-range-thumb/index.html new file mode 100644 index 0000000000..97900536ba --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-range-thumb/index.html @@ -0,0 +1,119 @@ +--- +title: '::-moz-range-thumb' +slug: 'Web/CSS/::-moz-range-thumb' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Web/CSS/::-moz-range-thumb' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><code>CSS</code><strong><code> ::-moz-range-thumb</code></strong> representa el elemento que el usuario puede usar en el <em>"camino"</em> marcado por un elemento {{HTMLElement("input")}} con <code>type="range"</code> para alterar su valor numérico.</p> + +<div class="note"> +<p>Si se usa <code>::-moz-range-thumb</code> en cualquier elemento que no sea <code><input type="range"></code> ni se seleccionará nada ni se conseguirá efecto alguno.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">input[type=range]::-moz-range-thumb { + background-color: green; +} +</pre> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><input type="range" min="0" max="100" step="5" value="50"/> +</pre> + +<h3 id="Salida">Salida</h3> + +<p>{{EmbedLiveSample("Example", 300, 50)}}</p> + +<p>Una barra de progreso que utilizara este estilo se visualizarías de la siguiente manera:</p> + +<p><img alt="The thumb of the <input type=right> styled in green" src="https://mdn.mozillademos.org/files/12027/Screen%20Shot%202015-12-04%20at%2013.30.08.png"></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. El un pseudo-elemento propietario de Gecko.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>Los pseudo-elements usados por Gecko para dar estilo a otras parte de un input con typue="range": + <ul> + <li>{{cssxref("::-moz-range-track")}},</li> + <li>{{cssxref("::-moz-range-progress")}}</li> + </ul> + </li> + <li>Pseudo-elementos similares usados por otras nevagadores: + <ul> + <li>{{cssxref("::-ms-thumb")}}, pseudo-elemento soportado por Internet Explorer y Edge.</li> + <li>{{cssxref("::-webkit-slider-thumb")}}, pseudo-elemento souportado por WebKit y Blink (Safari, Chrome and Opera).</li> + </ul> + </li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Estilos con CSS para input con type="range" en los distintos navegadores.</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilos y haciendo script con elementos deslizadores.</a></li> +</ul> diff --git a/files/es/web/css/_doublecolon_-moz-range-track/index.html b/files/es/web/css/_doublecolon_-moz-range-track/index.html new file mode 100644 index 0000000000..f702065abc --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-range-track/index.html @@ -0,0 +1,119 @@ +--- +title: '::-moz-range-track' +slug: 'Web/CSS/::-moz-range-track' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Web/CSS/::-moz-range-track' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements" title="es/CSS/Pseudo-elements">pseudo-elemento </a><code>CSS</code><strong><code> ::-moz-range-track</code></strong> representa la trayectoría, es decir la ranura sobre la cual se desliza el indicador de un {{HTMLElement("input")}} con <code>type="range"</code>.</p> + +<div class="note"> +<p>Si usamos <code>::-moz-range-track</code> con cualquier otra cosa que no sea un <code><input type="range"></code> ni seleccionaremos nada ni se mostrará efecto alguno.</p> +</div> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">input[type=range]::-moz-range-track { + background-color: green; +} +</pre> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><input type="range" min="0" max="100" step="5" value="50"/> +</pre> + +<h3 id="Salida">Salida</h3> + +<p>{{EmbedLiveSample("Example", 300, 50)}}</p> + +<p>Un barra de progreso con ese estilo tendrá una apariencia similar a la siguiente:</p> + +<p><img alt="A range with the track green." src="https://mdn.mozillademos.org/files/11999/Screen%20Shot%202015-12-04%20at%2010.14.34.png"></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario específico del motor Gecko.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>Los pseudo-elementos usados por Gecko para proporcionar estilos a las distintas partes de un input con type="range": + <ul> + <li>{{cssxref("::-moz-range-thumb")}}, el cursor deslizándose sobre la ranura.</li> + <li>{{cssxref("::-moz-range-progress")}}</li> + </ul> + </li> + <li>Pseudo-elementos similares en otros navegadores: + <ul> + <li>{{cssxref("::-webkit-slider-runnable-track")}}, pseudo-elemento soportado por WebKit y Blink (Safari, Chrome and Opera).</li> + <li>{{cssxref("::-ms-track")}}, pseudo-elemento soportado por Internet Explorer y Edge.</li> + </ul> + </li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Dando estilo con CSS a elementos Input con type="range" para que se muestren correctamente en todos los navegadores.</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilos y scripting a elementos deslizantes</a></li> +</ul> diff --git a/files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html b/files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html new file mode 100644 index 0000000000..bbb86d7207 --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html @@ -0,0 +1,79 @@ +--- +title: '::-moz-scrolled-page-sequence' +slug: 'Web/CSS/::-moz-scrolled-page-sequence' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Referencia + - Referencia CSS +translation_of: 'Web/CSS/::-moz-scrolled-page-sequence' +--- +<p>{{CSSRef}}{{non-standard_header}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a>CSS <code>::-moz-scrolled-page-sequence</code> CSS representa el fondo de la previsualización para impresión.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Not part of any specification.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref("::-moz-page")}}</li> + <li>{{cssxref("::-moz-page-sequence")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_-ms-browse/index.html b/files/es/web/css/_doublecolon_-ms-browse/index.html new file mode 100644 index 0000000000..7ad4e3c6ec --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-browse/index.html @@ -0,0 +1,97 @@ +--- +title: '::-ms-browse' +slug: 'Web/CSS/::-ms-browse' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-browse' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a>CSS <strong><code>::-ms-browse</code></strong> representa el botón para abrir el selector de archivos de un {{HTMLElement("input")}} con <code>type="file"</code>.</p> + +<div class="note"> +<p><strong>Nota:</strong> No se pueden usar todas las propiedades con este pseudo-elemento. Hay una <a href="https://msdn.microsoft.com/es/library/windows/apps/hh779844.aspx">lista de propiedades permitidas en la documentación MSDN</a>.</p> +</div> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><label>Select image: <input type="file"></label></pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">input[type="file"]::-ms-browse +{ + color: red; + background-color: yellow; +}</pre> + +<h3 id="Salida">Salida</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<h3 id="Resultado_del_ejemplo">Resultado del ejemplo</h3> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12744/bandicam%202016-03-11%2017-19-55-369.jpg" style="height: 188px; width: 680px;"></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación pero Miscrosoft tiene una <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh779844.aspx">descripción de :<code>:-ms-browse</code> en MSDN</a>.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/_doublecolon_-ms-check/index.html b/files/es/web/css/_doublecolon_-ms-check/index.html new file mode 100644 index 0000000000..ce4c6e1c6b --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-check/index.html @@ -0,0 +1,114 @@ +--- +title: '::-ms-check' +slug: 'Web/CSS/::-ms-check' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-check' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a>CSS <strong><code>::-ms-check</code></strong> representa la marca de selección de un {{HTMLElement("input")}} con <code>type="checkbox"</code> o <code>type="radio"</code>.</p> + +<p>No es un elemento estándar y es únicamente soportado por Internet Explorer y Edge, tal y como indica el prefijo (<code>-ms</code> que indica Microsoft).</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox"><em>selector</em>::-ms-check +</pre> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><form> + <label for="redButton">Red</label> + <input type="radio" id="redButton"><br> + <label for="greenCheckbox">Green</label> + <input type="checkbox" id="greenCheckbox"> +</form></pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">input, label { + display: inline; +} + +input[type=radio]::-ms-check { + color: red; /* Hará que la marca de selección sea roja cuando seleccionemos el botón */ +} + +input[type=checkbox]::-ms-check { + color: green; /* Hará que la marca de selección sea rverde cuando seleccionemos el botón */ +} +</pre> + +<p>Más abajo tiene disponible un ejemplo para poder probar. El pantallazo a la izquierda muestra que es lo que sucedería al haer click en caso de que no tengas acceso a Internet Explorer o Edge.</p> + +<p>{{ EmbedLiveSample('Examples', '', '', 'https://mdn.mozillademos.org/files/13392/ms_check', 'Web/CSS/::-ms-check') }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<p>Microsoft tienes una <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465739.aspx">descripcón en MSDN</a> que enumera varias propiedades que se pueden modificar en este pseudo-elemento.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>iOS WebKit</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> </div> diff --git a/files/es/web/css/_doublecolon_-ms-clear/index.html b/files/es/web/css/_doublecolon_-ms-clear/index.html new file mode 100644 index 0000000000..d5fe9d7ffa --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-clear/index.html @@ -0,0 +1,113 @@ +--- +title: '::-ms-clear' +slug: 'Web/CSS/::-ms-clear' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-clear' +--- +<p id="comment_text_9">{{non-standard_header}}{{CSSRef}}</p> + +<h2 id="MSCLEARLS" name="MSCLEARLS">Resumen</h2> + +<p id="MSCLEARLS">El <a href="/es/CSS/Pseudo-elements" title="es/CSS/Pseudo-elements">pseudo-elemento </a>CSS <strong><code>::-ms-clear</code></strong> sirve para representar un botón (el botón "borrar") en el borde de un elemento {{HTMLElement("input")}} con type="text". Este botón elimina el valor actual del elemento {{HTMLElement("input")}}. El botón y pseudo-elemento no son parte del estándar y únicamente son soportados por los navegadores Internet Explorer 10 y 11 y Edge 12+, de ahí el prefijo del vendedor (`-ms` por Microsoft). El botón de borrado sólo se muestra en elementos {{HTMLElement("input")}} con type="text" que hayan recibido el foco y no estén vacíos.</p> + +<h2 id="Síntaxis"><strong>Síntaxis</strong></h2> + +<pre class="syntaxbox"> <em>selector</em>::-ms-clear</pre> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h4 id="Contenido_HTML">Contenido HTML</h4> + +<pre class="brush: html"><form> + <label for="firstname">First name:</label> + <input type="text" id="firstname" name="firstname" placeholder="First name"><br> + + <label for="lastname">Last name:</label> + <input type="text" id="lastname" name="lastname" placeholder="Second name"> +</form> +</pre> + +<h4 id="Contenido_CSS">Contenido CSS</h4> + +<pre class="brush: css">input, +label { + display: block; +} + +input[type=text]::-ms-clear { + color: red;<em> </em>/* Establece el color de la cruz a rojo */ + /* La cruz se puede ocultar si fijamos el atributo display a "none" */ +}</pre> + +<p>{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/::-ms-clear') }}</p> + +<p>El siguiente pantallazo muestra, para aquellos que no tengan acceso a IE 10/11 o a Edge 12+, cómo quedaría esta característica:</p> + +<p> <img alt="" src="https://mdn.mozillademos.org/files/12263/ms-clear-example.png" style="display: block; height: 75px; margin: 0px auto; width: 611px;"></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación</p> + +<p>Microsoft <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx">tiene una descripción en MSDN</a> que enumera las distintas propiedades que podemos establecer para este tipo de pseudo-elementos.</p> + +<div class="note"> +<p id="comment_text_9">Esta característica sólo está disponible para IE 10-11, ha sido eliminada en la versión más reciente de Microsoft Edge.</p> +</div> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.0 [1]<br> + Edge 12+</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p><span style="line-height: 1.5;">[1] En un {{HTMLElement("input")}} de texto al que se le haya dada estilo con {{cssxref("text-align")}}</span><code style="font-style: normal; font-weight: normal; line-height: 1.5;">: right</code><span style="line-height: 1.5;">, si se muestra el botón de borrado, éste cortará el borde derecho del valor contenido en el {{HTMLElement("input")}}. Una solución es esconder el botón usando {{cssxref("display")}}</span><code style="font-style: normal; font-weight: normal; line-height: 1.5;">: none</code><span style="line-height: 1.5;">.</span></p> diff --git a/files/es/web/css/_doublecolon_-ms-expand/index.html b/files/es/web/css/_doublecolon_-ms-expand/index.html new file mode 100644 index 0000000000..99c3a18ccd --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-expand/index.html @@ -0,0 +1,25 @@ +--- +title: '::-ms-expand' +slug: 'Web/CSS/::-ms-expand' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsExample + - No estandar + - Pesudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-expand' +--- +<div>{{ CSSRef() }}</div> + +<p>{{ Non-standard_header() }}</p> + +<h3 id="Resumen">Resumen</h3> + +<p>El <a href="/es/CSS/Pseudo-elements" title="es/CSS/Pseudo-elements">pseudo-elemento </a>CSS <strong><code>::-ms-expand</code></strong> representa el botón dentro un {{HTMLElement("select")}} que abre y cierra el menú desplegable que contiene los disferentes elementos {{HTMLElement("option")}}. Normalemente tiene apariencia de triángulo que apunta hacia abajo..</p> + +<h3 id="Specification" name="Specification">Especificaciones</h3> + +<p>No es parte de ninguna especificación</p> + +<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465742.aspx">tiene una descripción en MSDN</a>.</p> diff --git a/files/es/web/css/_doublecolon_-ms-fill-lower/index.html b/files/es/web/css/_doublecolon_-ms-fill-lower/index.html new file mode 100644 index 0000000000..33ba4292b4 --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-fill-lower/index.html @@ -0,0 +1,88 @@ +--- +title: '::-ms-fill-lower' +slug: 'Web/CSS/::-ms-fill-lower' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-fill-lower' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a>CSS <strong><code>::-ms-fill-lower</code></strong> representa la porción de la "ruta" (la ranura sobre la cual el indicador desliza) de un {{HTMLElement("input")}} con <code>type="range"</code>, lo que corresponde a los valores inferiores al actualmente seleccionador por el indicador.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<p>Microsoft tiene una <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465745.aspx">descriptción en MSDN</a>.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>Los pseudo-elementos usados por IE/Edge para dar estilo a otras partes de un input con type="range": + <ul> + <li>{{cssxref("::-ms-fill-upper")}}</li> + <li>{{cssxref("::-ms-track")}}</li> + <li>{{cssxref("::-ms-thumb")}}</li> + </ul> + </li> + <li>{{cssxref("::-moz-range-progress")}}</li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Dando estilo con CSS a elementos Input range para que se vean correctamente en distintos navegadores.</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilo y scripting a elementos deslizantes</a></li> +</ul> diff --git a/files/es/web/css/_doublecolon_-ms-fill-upper/index.html b/files/es/web/css/_doublecolon_-ms-fill-upper/index.html new file mode 100644 index 0000000000..1806c2890f --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-fill-upper/index.html @@ -0,0 +1,88 @@ +--- +title: '::-ms-fill-upper' +slug: 'Web/CSS/::-ms-fill-upper' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-fill-upper' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a> <a href="/es/docs/Web/CSS">CSS </a><strong><code>::-ms-fill-upper</code></strong> representa la parte de la ruta (la ranura sobre la que el indicador desliza) de un {{HTMLElement("input")}} con <code>type="range"</code>, que corresponde a valores mayores que el valor actual en el que se encuentra el indicador.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación</p> + +<p>Microsoft tiene una <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465748.aspx">descripción en MSDN</a>.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>Los pseudo-elementoss usados por IE/Edge para dar estilos a otras partes de un input con type="range": + <ul> + <li>{{cssxref("::-ms-fill-lower")}}</li> + <li>{{cssxref("::-ms-track")}}</li> + <li>{{cssxref("::-ms-thumb")}}</li> + </ul> + </li> + <li>{{cssxref("::-moz-range-progress")}}</li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Dando estilos con CSS a Input range para que se vea de manera correcta en distintos navegadores</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilos y aplicando scripts a elementos deslizantes</a></li> +</ul> diff --git a/files/es/web/css/_doublecolon_-ms-fill/index.html b/files/es/web/css/_doublecolon_-ms-fill/index.html new file mode 100644 index 0000000000..6da2a8a77b --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-fill/index.html @@ -0,0 +1,106 @@ +--- +title: '::-ms-fill' +slug: 'Web/CSS/::-ms-fill' +tags: + - CSS + - No estándar(2) + - Pseudo-lemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-fill' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements" title="es/CSS/Pseudo-elements">pseudo-elemento </a>CSS <strong><code>::-ms-fill</code></strong> CSS representa la porción rellena de un elemento {{HTMLElement("progress")}}. Es un pseudo-elemento no estándar y específico de Internet Explorer 10+, de ahí el prefijo del vendedor.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Microsoft tiene una <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx">descripción en MSDN</a>.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">progress::-ms-fill { + background-color: orange; +}</pre> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><progress value="10" max="50"> +</pre> + +<h3 id="Salida">Salida</h3> + +<p>{{EmbedLiveSample("Example", 300, 50)}}</p> + +<p>Una barra de progreso a la que se aplique ese estilo tendrá una apariencia similar a la siguiente:</p> + +<p><img alt="Progress Bar with Orange Fill" src="https://mdn.mozillademos.org/files/13484/progress_bar.png" style="height: 44px; width: 308px;"></p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{ cssxref("::-moz-progress-bar") }}</li> + <li>{{ cssxref("::-webkit-progress-bar") }}</li> + <li>{{ cssxref("::-webkit-progress-value") }}</li> + <li>{{ cssxref("::-webkit-progress-inner-element") }} + <ul> + </ul> + </li> +</ul> diff --git a/files/es/web/css/_doublecolon_-ms-reveal/index.html b/files/es/web/css/_doublecolon_-ms-reveal/index.html new file mode 100644 index 0000000000..ed8e17278d --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-reveal/index.html @@ -0,0 +1,72 @@ +--- +title: '::-ms-reveal' +slug: 'Web/CSS/::-ms-reveal' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-reveal' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a>CSS <strong><code>::-ms-reveal</code></strong> se usa para mostrar y aplicar estilos al botón "mostrar contraseña" que normalmente se pone al lado de un elemento {{HTMLElement("input")}} con <code>type="password"</code> en Internet Explorer 10+. Este botón revela el valor del campo contraseña en texto plano (en vez de los asteriscos que son usados por motivos de privacidad). Este botón y el pseudo-elemento no son estándar y son específicos de Internet Explorer 10+, de ahí ese prefijo de vendedor.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación.</p> + +<p>Microsoft tiene una <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465773.aspx">descripción en MSDN</a>.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/_doublecolon_-ms-thumb/index.html b/files/es/web/css/_doublecolon_-ms-thumb/index.html new file mode 100644 index 0000000000..3e81694509 --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-thumb/index.html @@ -0,0 +1,44 @@ +--- +title: '::-ms-thumb' +slug: 'Web/CSS/::-ms-thumb' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo-elemento + - Pseudo-elementos CSS + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-thumb' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> CSS <strong><code>::-ms-thumb</code></strong> representa el indicador que el usuario puede mover a través de la pista o ranura de un elemento {{HTMLElement("input")}} con <code>type="range"</code> para alterar su valor numérico.</p> + +<h2 id="Especificación">Especificación</h2> + +<p>No es parte de ninguna especificación, aunque Microsoft tiene una <a href="https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465780.aspx">descripción en MSDN</a>.</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>Los pseudo-elementos usados por IE/Edge para dar estilo a otras partes de un input range: + <ul> + <li>{{cssxref("::-ms-track")}}</li> + <li>{{cssxref("::-ms-fill-upper")}}</li> + <li>{{cssxref("::-ms-fill-lower")}}</li> + </ul> + </li> + <li>Pseudo-elementos similares usados por otros navegadores: + <ul> + <li>{{cssxref("::-webkit-slider-thumb")}}</li> + <li>{{cssxref("::-moz-range-thumb")}}</li> + </ul> + </li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Dando estilo con CSS a Inputs range para que funcionen de manera correcta en distintos navegadores</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilos y aplicando scripts a elementos deslizantes</a></li> +</ul> diff --git a/files/es/web/css/_doublecolon_-ms-ticks-after/index.html b/files/es/web/css/_doublecolon_-ms-ticks-after/index.html new file mode 100644 index 0000000000..5f49d4a9b0 --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-ticks-after/index.html @@ -0,0 +1,84 @@ +--- +title: '::-ms-ticks-after' +slug: 'Web/CSS/::-ms-ticks-after' +tags: + - CSS + - No standard + - Pseudo-elementos + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-ticks-after' +--- +<div>{{CSSRef}}</div> + +<div>{{non-standard_header}}</div> + +<div> </div> + +<p>El <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a>o <strong><code>::-ms-ticks-after</code></strong> es una extensión de<a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions"> extensión de Microsoft </a>que aplica uno o más estilos, a las marcas de tick que aparecen despues del marcador de un control slider. El control slider es una posible representación de una entrada tipo rango( <a href="/en-US/docs/Web/HTML/Element/input/range"><input type="range"></a> ).</p> + +<p>Esas marcas no son mostradas por omisión. Para mostrarlas, se debe de establecer la propiedad display del control a block {{cssxref("display")}}.</p> + +<p>Es posible usar los pseudo elementos <strong><code>::-ms-ticks-after</code></strong>, {{ cssxref("::-ms-ticks-before") }}, y {{ cssxref("::-ms-track") }} a la vez. Para hacerlo debe crear tres tres conjuntos de marcas, pero la mejor experiencia deusuario es con un conjunto. Par quitar todas las marcas , establezca la propiedad color {{ cssxref("color") }} a transparente.</p> + +<h2 id="Allowable_properties" name="Allowable_properties">Allowable Properties</h2> + +<p>Solo una de las siguientes propiedades CSS puede ser usada con <code>::-ms-ticks-after</code> en su selector. Otras propiedadess seran ignoradas.</p> + +<ul> + <li>{{cssxref("background-clip")}}</li> + <li>{{cssxref("background-color")}}</li> + <li>{{cssxref("background-image")}}</li> + <li>{{cssxref("background-origin")}}</li> + <li>{{cssxref("background-repeat")}}</li> + <li>{{cssxref("background-size")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-bottom-left-radius")}}</li> + <li>{{cssxref("border-bottom-right-radius")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-left-color")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-right-style ")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-top-left-radius")}}</li> + <li>{{cssxref("border-top-right-radius ")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("box-shadow")}}</li> + <li>{{cssxref("box-sizing")}}</li> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("cursor")}}</li> + <li>{{cssxref("display")}} (values <code>block</code>, <code>inline-block</code>, <code>none</code>)</li> + <li>{{cssxref("@font-face")}}</li> + <li>{{cssxref("font-size")}}</li> + <li>{{cssxref("font-style")}}</li> + <li>{{cssxref("font-weight")}}</li> + <li>{{cssxref("height")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-top")}}</li> + <li><code>-ms-background-position-x</code></li> + <li><code>-ms-background-position-y</code></li> + <li>{{cssxref("-ms-high-contrast-adjust")}}</li> + <li>{{cssxref("opacity")}}</li> + <li>{{cssxref("outline-color")}}</li> + <li>{{cssxref("outline-style")}}</li> + <li>{{cssxref("outline-width")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-top")}}</li> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("transform-origin")}}</li> + <li>{{cssxref("visibility")}}</li> + <li>{{cssxref("width")}}</li> +</ul> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"> {{csssyntax}} +</pre> diff --git a/files/es/web/css/_doublecolon_-ms-track/index.html b/files/es/web/css/_doublecolon_-ms-track/index.html new file mode 100644 index 0000000000..e4feb900b5 --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-track/index.html @@ -0,0 +1,48 @@ +--- +title: '::-ms-track' +slug: 'Web/CSS/::-ms-track' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estádar + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-track' +--- +<div>{{ CSSRef() }}</div> + +<p>{{ Non-standard_header() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements">pseudo-elemento</a> CSS <strong><code>::-ms-track</code></strong> representa la trayectoria (la ranura sobre la cual se desliza el indicador) de un {{HTMLElement("input")}} con <code>type="range"</code>.</p> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p>No es parte de ninguna especificación</p> + +<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465813.aspx">tiene una descripción en MSDN</a>.</p> + +<h2 id="See_also" name="See_also">Ver además</h2> + +<ul> + <li>Los pseudo-elementoss usados por IE/Edge para dar estilos a otras partes de input range: + <ul> + <li>{{cssxref("::-ms-thumb")}}</li> + <li>{{cssxref("::-ms-fill-upper")}}</li> + <li>{{cssxref("::-ms-fill-lower")}}</li> + </ul> + </li> + <li>Pseudo-elementos similares usados por otros navegadores: + <ul> + <li>{{cssxref("::-webkit-slider-runnable-track")}}</li> + <li>{{cssxref("::-moz-range-track")}}</li> + </ul> + </li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Dando estilo con CSS a elementos Inputs range para que se muestren de manera correcta en distintos navegadores</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilos y aplicando scripts a elementos deslizantes</a></li> +</ul> diff --git a/files/es/web/css/_doublecolon_-ms-value/index.html b/files/es/web/css/_doublecolon_-ms-value/index.html new file mode 100644 index 0000000000..618063cb2b --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-value/index.html @@ -0,0 +1,31 @@ +--- +title: '::-ms-value' +slug: 'Web/CSS/::-ms-value' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Pseudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-value' +--- +<div>{{ CSSRef() }}</div> + +<p>{{ Non-standard_header() }}</p> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a>CSS <strong><code>::-ms-value</code></strong> aplica reglas al valor / contenido de un {{HTMLElement("input")}} o de un {{HTMLElement("select")}}. En este pseudo-elemento sólo se pueden establecer ciertas propiesdades, las demás no tendrán efecto.</p> + +<h2 id="Syntax" name="Syntax">Síntaxis</h2> + +<pre class="syntaxbox">input::-ms-value { <em>propiedades de estilo</em> } + +select::-ms-value { <em>propiedades de estilo</em> } </pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<p>No es parte de ninguna espeficiación</p> + +<p>Microsoft tiene <a href="https://msdn.microsoft.com/en-us/library/windows/apps/hh465820.aspx">una descripción en MSDN.</a></p> diff --git a/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html b/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html new file mode 100644 index 0000000000..5d14e35e58 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html @@ -0,0 +1,100 @@ +--- +title: '::-webkit-file-upload-button' +slug: 'Web/CSS/::-webkit-file-upload-button' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::file-selector-button' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> <a href="/es/docs/Web/CSS">CSS</a> <strong><code>::-webkit-file-upload-button</code></strong> representa el botón de los elementos {{HTMLElement("input") }} con <code>type="file"</code>.</p> + +<p>No es estándar y es sólo soportado por los navegadores compatibles con WebKit/Blink como Chrome, Opera and Safari (esto queda indicado por el prefijo <code>-webkit</code> ).</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox"><var>selector</var>::-webkit-file-upload-button +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><form> + <label for="fileUpload">Upload file</label><br> + <input type="file" id="fileUpload"> +</form></pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">input, label { + display: block; +} + +input[type=file]::-webkit-file-upload-button { + border: 1px solid grey; + background: #FFFAAA; +}</pre> + +<p>Más abajo tienes un ejemplo para probar. El pantallazo a la izquierda muestra como quedaría el botón en caso de que no puedas acceder a Chrome, Opera o Safari. </p> + +<p>{{ EmbedLiveSample('Example', '', '', 'https://mdn.mozillademos.org/files/13400/webkit_file_upload_button_screen.png', 'Web/CSS/::-webkit-file-upload-button') }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/_doublecolon_-webkit-inner-spin-button/index.html b/files/es/web/css/_doublecolon_-webkit-inner-spin-button/index.html new file mode 100644 index 0000000000..d6dcc041b4 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-inner-spin-button/index.html @@ -0,0 +1,96 @@ +--- +title: '::-webkit-inner-spin-button' +slug: 'Web/CSS/::-webkit-inner-spin-button' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-inner-spin-button' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> <a href="/es/docs/Web/CSS">CSS</a> <strong><code>::-webkit-inner-spin-button</code></strong> se usa para dar estilo a la parte interior del botón ruleta para seleccionar números en los input con type="number".</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">input::-webkit-inner-spin-button { + -webkit-appearance: none; +}</pre> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><input type="number"> +</pre> + +<p>{{EmbedLiveSample("Example", 200, 30)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatversionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref("::-webkit-outer-spin-button")}}</li> + <li>{{cssxref("::-webkit-textfield-decoration-container")}}</li> + <li><a href="http://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement">Dando estilo a controles de formularios – WebKit</a></li> +</ul> diff --git a/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html b/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html new file mode 100644 index 0000000000..b765b529a4 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html @@ -0,0 +1,85 @@ +--- +title: '::-webkit-input-placeholder' +slug: 'Web/CSS/::-webkit-input-placeholder' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia + - Referencia CSS +translation_of: 'Web/CSS/::placeholder' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> no estándar y propietario <code>::-webkit-input-placeholder</code> representa el <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">marcador de posición de texto (placeholder text)</a> de un elemento formulario. Permite que desarrolladores y diseñadores de temas puedan personalizar este marcador de posición de texto (placeholder). Sólo está soportado por WebKit/Blink.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref("::placeholder")}}</li> + <li>{{cssxref("::-moz-placeholder")}}</li> + <li>{{cssxref(":-ms-input-placeholder")}}</li> + <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("textarea")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_-webkit-meter-bar/index.html b/files/es/web/css/_doublecolon_-webkit-meter-bar/index.html new file mode 100644 index 0000000000..f84bebf096 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-meter-bar/index.html @@ -0,0 +1,103 @@ +--- +title: '::-webkit-meter-bar' +slug: 'Web/CSS/::-webkit-meter-bar' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-meter-bar' +--- +<p>{{CSSRef}}{{Non-standard_header}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La pseudo-clase <code>::-webkit-meter-bar</code> establece el estilo para el fondo del elemento meter que contiene el valor.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><meter min="0" max="10" value="6">Puntuación sobre 10</meter></pre> + +<pre class="brush: css">meter { + /* Resetea a la apariencia por defecto */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +meter::-webkit-meter-bar { + background: #eee; + box-shadow: 0 2px 3px rgba (0, 0, 0, 0.2) inset; + border-radius: 3px; +}</pre> + +<p>{{ EmbedLiveSample('Ejemplos', '100%', 50) }}</p> + +<div class="note"> +<p><strong>Note</strong>: Sólo funciona en navegadores basados en Webkit/Blink.</p> +</div> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<p>Los pseudo-elementos usados en WebKit/Blink para dar estilos a otras partes del elemento {{htmlelement("meter")}} :</p> + +<ul> + <li>{{cssxref("::-webkit-meter-inner-element")}}</li> + <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li> + <li>{{cssxref("::-webkit-meter-optimum-value")}}</li> + <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html b/files/es/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html new file mode 100644 index 0000000000..d309e32dfc --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html @@ -0,0 +1,91 @@ +--- +title: '::-webkit-meter-even-less-good-value' +slug: 'Web/CSS/::-webkit-meter-even-less-good-value' +translation_of: 'Web/CSS/::-webkit-meter-even-less-good-value' +--- +<p>{{CSSRef}}{{Non-standard_header}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>El pseudo-elemento <code>::-webkit-meter-even-less-good-value</code> da color rojo al elemento meter cuando el valor y el atributo optimum están fuera del rango establecido y en zonas opuestas. Por ejemplo valor < low < high < optimum o valor> high > low > optimum.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><meter min="0" max="10" value="6">Score out of 10</meter></pre> + +<pre class="brush: css">meter::-webkit-meter-even-less-good-value { + background: linear-gradient(to bottom, #f77, #d44 45%, #d44 55%, #f77); + height: 100%; + box-sizing: border-box; +}</pre> + +<p>{{ EmbedLiveSample('Ejemplos', '100%', 50) }}</p> + +<div class="note"> +<p><strong>Note</strong>: This will only work in Webkit/Blink-based browsers.</p> +</div> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<p>The pseudo-elements used by WebKit/Blink to style other parts of a {{htmlelement("meter")}} element are as follows:</p> + +<ul> + <li>{{cssxref("::-webkit-meter-inner-element")}}</li> + <li>{{cssxref("::-webkit-meter-bar")}}</li> + <li>{{cssxref("::-webkit-meter-optimum-value")}}</li> + <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_-webkit-meter-inner-element/index.html b/files/es/web/css/_doublecolon_-webkit-meter-inner-element/index.html new file mode 100644 index 0000000000..b4a1d5e657 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-meter-inner-element/index.html @@ -0,0 +1,106 @@ +--- +title: '::-webkit-meter-inner-element' +slug: 'Web/CSS/::-webkit-meter-inner-element' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-meter-inner-element' +--- +<p>{{CSSRef}}{{Non-standard_header}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p><code>El pseudo-elemento CSS ::-webkit-meter-inner-element</code> es un pseudo-elemento propietario de WebKit CSS para seleccionar y aplicar estilo al contenedor exterior de un elemento {{htmlelement("meter")}}. Es necesario una marca adicional para mostrar este elemento como si fuera de sólo lectura.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><meter min="0" max="10" value="6">Score out of 10</meter></pre> + +<pre class="brush: css">meter { + /* Resetear la apariencia por defecto*/ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +meter::-webkit-meter-inner-element { + -webkit-appearance: inherit; + box-sizing: inherit; + border: 1px solid #aaa; +}</pre> + +<p>{{ EmbedLiveSample('Ejemplos', '100%', 50) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Sólo funcionará en navegadores basasdo en Webkit/Blink.</p> +</div> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<p>Los pseudo-elementos usados por WebKit/Blink para dar estilo a otras partes del elemento {{htmlelement("meter")}} :</p> + +<ul> + <li>{{cssxref("::-webkit-meter-bar")}}</li> + <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li> + <li>{{cssxref("::-webkit-meter-optimum-value")}}</li> + <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li> +</ul> + +<p> <br> + </p> diff --git a/files/es/web/css/_doublecolon_-webkit-meter-optimum-value/index.html b/files/es/web/css/_doublecolon_-webkit-meter-optimum-value/index.html new file mode 100644 index 0000000000..1ba5550c80 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-meter-optimum-value/index.html @@ -0,0 +1,103 @@ +--- +title: '::-webkit-meter-optimum-value' +slug: 'Web/CSS/::-webkit-meter-optimum-value' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-meter-optimum-value' +--- +<p>{{CSSRef}}{{Non-standard_header}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>El pseudo-elemento CSS <code>::-webkit-meter-optimum-value</code> da estilo al elemento meter cuando su valor está dentro del rango min-max establecido.</p> + +<p>El color por defecto es verde.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><meter min="0" max="10" value="6">Puntuación sobre 10</meter></pre> + +<pre class="brush: css">meter::-webkit-meter-bar { + /* Necesario para eliminar la propiedad de fondo por defecto */ + background : none; + background-color : whiteSmoke; + box-shadow : 0 5px 5px -5px #333 inset; +} + +meter::-webkit-meter-optimum-value { + box-shadow: 0 5px 5px -5px #999 inset; +}</pre> + +<p>{{ EmbedLiveSample('Ejemplos', '100%', 50) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Sólo funciona en navegadores basado en Webkit/Blink.</p> +</div> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Soporte básico</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<p>Los pseudo-elementos de WebKit/Blink para dar estilos a otras partes de {{htmlelement("meter")}}:</p> + +<ul> + <li>{{cssxref("::-webkit-meter-inner-element")}}</li> + <li>{{cssxref("::-webkit-meter-bar")}}</li> + <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li> + <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html b/files/es/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html new file mode 100644 index 0000000000..6213d4afa9 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html @@ -0,0 +1,96 @@ +--- +title: '::-webkit-meter-suboptimum-value' +slug: 'Web/CSS/::-webkit-meter-suboptimum-value' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-meter-suboptimum-value' +--- +<p>{{CSSRef}}{{Non-standard_header}}</p> + +<h2 id="Resumen"><strong>Resumen</strong></h2> + +<p>El pseudo-elemento CSS <code>::-webkit-meter-suboptimum-value</code> da color amarillo al elemento meter cuando su valor cae fuera del rango mix-max.</p> + +<h2 id="Especificaciones"><strong>Especificaciones</strong></h2> + +<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p> + +<h2 id="Ejemplos"><strong>Ejemplos</strong></h2> + +<pre class="brush: html"><meter min="0" max="10" value="6">Puntuación sobre 10</meter></pre> + +<pre class="brush: css">meter::-webkit-meter-suboptimum-value { + background: -webkit-gradient linear, left top, left bottom, + height: 100%; + box-sizing: border-box; +}</pre> + +<p>{{ EmbedLiveSample('Ejemplos', '100%', 50) }}</p> + +<div class="note"> +<p><strong>Notae</strong>: Sólo funciona en navegadores basados en Webkit/Blink</p> +</div> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<p>Los pseudo-elementos usados por WebKit/Blink para dar estilo a otras partes del elemento {{htmlelement("meter")}} :</p> + +<ul> + <li>{{cssxref("::-webkit-meter-inner-element")}}</li> + <li>{{cssxref("::-webkit-meter-bar")}}</li> + <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li> + <li>{{cssxref("::-webkit-meter-optimum-value")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_-webkit-outer-spin-button/index.html b/files/es/web/css/_doublecolon_-webkit-outer-spin-button/index.html new file mode 100644 index 0000000000..8351b2fa2e --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-outer-spin-button/index.html @@ -0,0 +1,96 @@ +--- +title: '::-webkit-outer-spin-button' +slug: 'Web/CSS/::-webkit-outer-spin-button' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-outer-spin-button' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El pseudo-elemento CSS <strong><code>::-webkit-outer-spin-button</code></strong> se usa para dar estilo a la parte exterior del selector de números en un botón input de tipo <em>number</em>.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">input::-webkit-outer-spin-button { + -webkit-appearance: none; +}</pre> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><input type="number"> +</pre> + +<p>{{EmbedLiveSample("Ejemplo", 200, 30)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatversionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref("::-webkit-inner-spin-button")}}</li> + <li>{{cssxref("::-webkit-textfield-decoration-container")}}</li> + <li><a href="http://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement">Dando estilo a controles de formulario – WebKit</a></li> +</ul> diff --git a/files/es/web/css/_doublecolon_-webkit-progress-bar/index.html b/files/es/web/css/_doublecolon_-webkit-progress-bar/index.html new file mode 100644 index 0000000000..7aff28f56d --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-progress-bar/index.html @@ -0,0 +1,112 @@ +--- +title: '::-webkit-progress-bar' +slug: 'Web/CSS/::-webkit-progress-bar' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-progress-bar' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a> <a href="/es/docs/Web/CSS">CSS </a><strong><code>::-webkit-progress-bar</code></strong> representa la barra entera del elemento {{HTMLElement("progress")}} . Normalmente sólo está visible a partir de la porción rellena de la barra ya que, por defecto se muestra debajo del pseudo-lemento {{ cssxref("::-webkit-progress-value") }}. Es hijo del pseudo-elemento {{cssxref("::-webkit-progress-inner-element")}} y padre del pseudo-elemento {{cssxref("::-webkit-progress-value")}}.</p> + +<div class="note"> +<p><strong>Nota:</strong> para que <code>::-webkit-progress-value</code> tenga efecto , en el elemento <code><progress> </code>{{cssxref("-webkit-appearance")}} debe tener el valor <em>none</em>.</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">progress { + -webkit-appearance: none; +} + +::-webkit-progress-bar { + background-color: orange; +} +</pre> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><progress value="10" max="50"> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Ejemplo", 200, 50)}}</p> + +<p>Una barra de progreso que use el estilo indicado anteriormente será similar a la siguiente:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13488/progress-bar.png" style="height: 43px; width: 194px;"></p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>Los pseudo-elementos usados por WebKit/Blink para dar estilo a otras partes del elemento {{HTMLElement("progress")}}: + <ul> + <li>{{ cssxref("::-webkit-progress-value") }}</li> + <li>{{ cssxref("::-webkit-progress-inner-element") }}</li> + </ul> + </li> + <li>{{ cssxref("::-moz-progress-bar") }}</li> + <li>{{ cssxref("::-ms-fill") }}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_-webkit-progress-inner-element/index.html b/files/es/web/css/_doublecolon_-webkit-progress-inner-element/index.html new file mode 100644 index 0000000000..55bb247275 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-progress-inner-element/index.html @@ -0,0 +1,112 @@ +--- +title: '::-webkit-progress-inner-element' +slug: 'Web/CSS/::-webkit-progress-inner-element' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-progress-inner-element' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> <a href="/es/docs/Web/CSS">CSS </a><strong><code>::-webkit-progress-inner-element</code></strong> representa la parte más exterior de un elemento {{HTMLElement("progress")}}. Es el padre del pseudo-elemento {{cssxref("::-webkit-progress-bar")}}.</p> + +<div class="note"> +<p><strong>Nota:</strong> para que <code>::-webkit-progress-inner-element</code> tenga efecto , hay que darle valor none a {{cssxref("-webkit-appearance")}} en el elemento <code><progress></code>.</p> +</div> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">progress { + -webkit-appearance: none; +} + +::-webkit-progress-inner-element { + border: 2px solid black; +} +</pre> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><progress value="10" max="50"> +</pre> + +<h3 id="Salida">Salida</h3> + +<p>{{EmbedLiveSample("Ejemplo", 200, 50)}}</p> + +<p>Una barra de progreso que use el estilo especificado anteriormente tendrá una apariencia similar a la siguiente::</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13492/-webkit-progress-inner-element%20example.png"></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Es un pseudo-elemento propitario y específico de WebKit/Blink.</p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>Los pseudo-elementos usados por WebKit/Blink para dar estilos a otras partes de un elemento {{HTMLElement("progress")}} : + <ul> + <li>{{cssxref("::-webkit-progress-bar")}}</li> + <li>{{cssxref("::-webkit-progress-value")}}</li> + </ul> + </li> + <li>{{cssxref("::-moz-progress-bar")}}</li> + <li>{{cssxref("::-ms-fill")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_-webkit-progress-value/index.html b/files/es/web/css/_doublecolon_-webkit-progress-value/index.html new file mode 100644 index 0000000000..4e6d5bd10f --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-progress-value/index.html @@ -0,0 +1,111 @@ +--- +title: '::-webkit-progress-value' +slug: 'Web/CSS/::-webkit-progress-value' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-progress-value' +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><a href="/es/docs/Web/CSS">CSS </a><strong><code>::-webkit-progress-value</code></strong> representa la parte rellena de la barra del elemento {{HTMLElement("progress")}}. Es hija del pseudo-elemento {{cssxref("::-webkit-progress-bar")}}.</p> + +<div class="note"> +<p><strong>Nota:</strong> para que <code>::-webkit-progress-value</code> tenga efecto en el elemento <progress> {{cssxref("-webkit-appearance")}} deberá tener <em>none </em>como valor.</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">progress { + -webkit-appearance: none; +} + +::-webkit-progress-value { + background-color: orange; +}</pre> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><progress value="10" max="50"> +</pre> + +<h2 id="Resultado">Resultado</h2> + +<p>{{EmbedLiveSample("Ejemplo", 200, 50)}}</p> + +<p>Una barra de progreso con el estilo indicado anteriormente será similar a esta:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13490/progress-value.png" style="height: 60px; width: 249px;"></p> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>Los pseudo-elemento de WebKit/Blink para dar estilos a otras partes de un elemento {{HTMLElement("progress")}}: + <ul> + <li>{{ cssxref("::-webkit-progress-bar") }}</li> + <li>{{ cssxref("::-webkit-progress-inner-element") }}</li> + </ul> + </li> + <li>{{ cssxref("::-moz-progress-bar") }}</li> + <li>{{ cssxref("::-ms-fill") }}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_-webkit-scrollbar/index.html b/files/es/web/css/_doublecolon_-webkit-scrollbar/index.html new file mode 100644 index 0000000000..4e89ab3087 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-scrollbar/index.html @@ -0,0 +1,37 @@ +--- +title: '::-webkit-scrollbar' +slug: 'Web/CSS/::-webkit-scrollbar' +tags: + - CSS + - NeedsCompatTable + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-scrollbar' +--- +<p>{{Draft()}}{{CSSRef}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> <a href="/es/docs/Web/CSS">CSS</a> <font face="Consolas, Liberation Mono, Courier, monospace">::-webkit-scrollbar</font> afecta el estilo de la barra de desplazamiento asociada a un elemento.</p> + +<div class="note"> +<p><code>::-webkit-scrollbar</code> sólo está disponible en navegadores basados en <a class="external external-icon" href="https://webkit.org" title="https://webkit.org">WebKit</a><span style="font-size: 85%;"> (p.e., Google Chrome)</span>.</p> +</div> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: css">.visible-scrollbar, .invisible-scrollbar { + display: block; + width: 10em; + overflow: auto; +} +.invisible-scrollbar::-webkit-scrollbar { + display: none; +} +</pre> + +<pre class="brush: html"><div class="visible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div> +<div class="invisible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div> +</pre> + +<p>{{EmbedLiveSample('Ejemplo')}}</p> diff --git a/files/es/web/css/_doublecolon_-webkit-slider-runnable-track/index.html b/files/es/web/css/_doublecolon_-webkit-slider-runnable-track/index.html new file mode 100644 index 0000000000..753ecad019 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-slider-runnable-track/index.html @@ -0,0 +1,40 @@ +--- +title: '::-webkit-slider-runnable-track' +slug: 'Web/CSS/::-webkit-slider-runnable-track' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Web/CSS/::-webkit-slider-runnable-track' +--- +<div>{{ CSSRef() }}</div> + +<p>{{ Non-standard_header() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/CSS/Pseudo-elements" title="en/CSS/Pseudo-elements">pseudo-elemento </a>CSS <strong><code>::-webkit-slider-runnable-track</code></strong> representa el trayecto (la ranura sobre la que se desliza el indicador) de un {{HTMLElement("input")}} con <code>type="range"</code>.</p> + +<h2 id="Specification" name="Specification">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p> + +<h2 id="See_also" name="See_also">Ver además</h2> + +<ul> + <li>{{cssxref("::-webkit-slider-thumb")}}</li> + <li>Pseudo-elementos similares usados en otros navegadores: + <ul> + <li>{{cssxref("::-ms-track")}}</li> + <li>{{cssxref("::-moz-range-track")}}</li> + </ul> + </li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Dando estilos con CSS a elementos Input de tipo range para que se muestren correctamente en distintos navegadores.</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilos y aplicando scripts a elementos deslizantes</a></li> +</ul> diff --git a/files/es/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/es/web/css/_doublecolon_-webkit-slider-thumb/index.html new file mode 100644 index 0000000000..bd00c701d3 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-slider-thumb/index.html @@ -0,0 +1,38 @@ +--- +title: '::-webkit-slider-thumb' +slug: 'Web/CSS/::-webkit-slider-thumb' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Web/CSS/::-webkit-slider-thumb' +--- +<div>admi{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a> <code>CSS </code><strong><code>::-webkit-slider-thumb</code></strong> representa el selector que el usuario puede mover a lo largo de la ranura de un elemento {{HTMLElement("input")}} con <code>type="range"</code> para modificar su valor numérico.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref("::-webkit-slider-runnable-track")}}</li> + <li>Psuedo-elementos similares en otros navegadores: + <ul> + <li>{{cssxref("::-moz-range-thumb")}}</li> + <li>{{cssxref("::-ms-thumb")}}</li> + </ul> + </li> + <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks: Dando estilos con CSS a elementos Input de tipo range para que se muestren correctamente en distintos navegadores</a></li> + <li><a href="http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode: Dando estilos y aplicando scripts a elementos deslizantes</a></li> +</ul> diff --git a/files/es/web/css/_doublecolon_after/index.html b/files/es/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..c5fe24fedb --- /dev/null +++ b/files/es/web/css/_doublecolon_after/index.html @@ -0,0 +1,182 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS + - Presentación + - Pseudo-elemento CSS + - Referencia + - Web +translation_of: 'Web/CSS/::after' +--- +<div>{{CSSRef}}</div> + +<div></div> + +<div> +<p><span class="seoSummary">En CSS, <strong><code>::after</code></strong> crea un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> que es el último hijo del elemento seleccionado. Es comunmente usado para añadir contenido cosmético a un elemento con la propiedad {{CSSxRef("content")}}.</span>Es en linea (inline) de forma predeterminada.</p> + +<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* Añdade una flecha después de los enlaces */</span> +<span class="selector token">a<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">content</span><span class="punctuation token">:</span> "</code>→<code class="language-css">"<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<div class="note"> +<p><strong>Nota:</strong> Los pseudo-elementos generados por <code>::before</code> y <code>::after</code> son <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">contenidos por la caja de formato del elemento</a>, y por lo tanto no aplica a <em><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">elementos reemplazados</a></em> como los elementos {{HTMLElement("img")}}, o {{HTMLElement("br")}}.</p> +</div> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<div class="note"> +<p><strong>Nota:</strong> CSS3 introdujo la notación <code>::after</code> (con doble dos puntos) para distinguir <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-clases</a> de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>. Los navegadores también aceptan <code>:after</code>, añadido en CSS2.</p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Uso_simple">Uso simple</h3> + +<p>Crearemos dos clases: una para párrafos aburridos y otra para párrafos interesantes. Después podremos resaltar cada párrafo añadiendo un pseudo-elemento al final del mismo.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>boring-text<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Here is some plain old boring text.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Here is some normal text that is neither boring nor exciting.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>exciting-text<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Contributing to MDN is easy and fun.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.exciting-text</span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">" <- EXCITING!"</span><span class="punctuation token">;</span> + <span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.boring-text</span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">" <- BORING"</span><span class="punctuation token">;</span> + <span class="property token">color</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Uso_simple', 500, 150)}}</p> + +<h3 id="Ejemplo_decorativo">Ejemplo decorativo</h3> + +<p>Podemos estilizar el texto o imágenes de la propiedad {{cssxref("content")}} de casi cualquier forma que queramos.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ribbon<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Look at the orange box after this text. <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span></code></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.ribbon</span></span> <span class="punctuation token">{</span> + <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#5BC8F7</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.ribbon</span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">"This is a fancy orange box."</span><span class="punctuation token">;</span> + <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#FFBA10</span><span class="punctuation token">;</span> + <span class="property token">border-color</span><span class="punctuation token">:</span> black<span class="punctuation token">;</span> + <span class="property token">border-style</span><span class="punctuation token">:</span> dotted<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample('Ejemplo_decorativo', 450, 20)}}</p> + +<h3 id="Tooltips">Tooltips</h3> + +<p>El siguiente ejemplo muestra el uso del <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> <code>::after</code> en conjunto con la expresión CSS <a href="/es/docs/Web/CSS/attr"><code>attr()</code></a> y el <a href="/es/docs/Web/HTML/Global_attributes#attr-dataset">atributo data personalizado</a> <code>data-descr</code> para crear un <em>tooltip</em> de tipo glosario, completamente en CSS. Mira la vista previa más abajo, o también puedes ver el ejemplo en una <a href="https://developer.mozilla.org/files/4591/css-only_tooltips.html">página separada.</a></p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Here we have some + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">tabindex</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">data-descr</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>collection of words and punctuation<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span> with a few + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">tabindex</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">data-descr</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>small popups that appear when hovering<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>tooltips<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span>. +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">span<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">data-descr</span><span class="punctuation token">]</span></span></span> <span class="punctuation token">{</span> + <span class="property token">position</span><span class="punctuation token">:</span> relative<span class="punctuation token">;</span> + <span class="property token">text-decoration</span><span class="punctuation token">:</span> underline<span class="punctuation token">;</span> + <span class="property token">color</span><span class="punctuation token">:</span> <span class="hexcode token">#00F</span><span class="punctuation token">;</span> + <span class="property token">cursor</span><span class="punctuation token">:</span> help<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">span<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">data-descr</span><span class="punctuation token">]</span></span><span class="pseudo-class token">:hover</span><span class="pseudo-element token">::after</span>, +span<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">data-descr</span><span class="punctuation token">]</span></span><span class="pseudo-class token">:focus</span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">content</span><span class="punctuation token">:</span> <span class="function token">attr</span><span class="punctuation token">(</span>data-descr<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="property token">position</span><span class="punctuation token">:</span> absolute<span class="punctuation token">;</span> + <span class="property token">left</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> + <span class="property token">top</span><span class="punctuation token">:</span> <span class="number token">24</span><span class="token unit">px</span><span class="punctuation token">;</span> + <span class="property token">min-width</span><span class="punctuation token">:</span> <span class="number token">200</span><span class="token unit">px</span><span class="punctuation token">;</span> + <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="token unit">px</span> <span class="hexcode token">#aaaaaa</span> solid<span class="punctuation token">;</span> + <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">;</span> + <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#ffffcc</span><span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">12</span><span class="token unit">px</span><span class="punctuation token">;</span> + <span class="property token">color</span><span class="punctuation token">:</span> <span class="hexcode token">#000000</span><span class="punctuation token">;</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">14</span><span class="token unit">px</span><span class="punctuation token">;</span> + <span class="property token">z-index</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h4 id="Resultado_3">Resultado</h4> + +<p>{{EmbedLiveSample('Tooltips', 450, 120)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Sin cambios significativos desde la especificación previa.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}</td> + <td>{{Spec2("CSS3 Transitions")}}</td> + <td>Permite transiciones en propiedades definidas en los pseudo-elementos.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>Permite animaciones en propiedades definidas en los pseudo-elementos.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Introduce la sintaxis de doble símbolo <code>:</code></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición inicial, usando sintáxis de un solo símbolo <code>:</code></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.after")}}</p> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{Cssxref("::before")}}</li> + <li>{{cssxref("content")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_backdrop/index.html b/files/es/web/css/_doublecolon_backdrop/index.html new file mode 100644 index 0000000000..931a893f81 --- /dev/null +++ b/files/es/web/css/_doublecolon_backdrop/index.html @@ -0,0 +1,132 @@ +--- +title: '::backdrop' +slug: 'Web/CSS/::backdrop' +tags: + - CSS + - Layout + - NeedsContent + - Pantalla completa + - Pseudo Elemento CSS + - Referencia + - Web +translation_of: 'Web/CSS/::backdrop' +--- +<div>{{CSSRef}} {{SeeCompatTable}}</div> + +<p>Cada uno de los elementos en la pila de la <a href="https://fullscreen.spec.whatwg.org/#top-layer">capa superior</a> posee un <dfn><code>::backdrop</code></dfn> {{Cssxref("pseudo-elements", "pseudo-element")}}. Este pseudo-elemento es una caja que se muestra inmediatamente debajo del elemento (y sobre el elemento inmediatamente inferior de la pila, si es que hay), dentro de dicha capa superior.</p> + +<p class="note">El pseudo-elemento <code>::backdrop</code> se puede usar para crear un fondo que oculte el documento subyacente detrás de la pila de la capa superior, p.ej., para el elemento que es mostrado a pantalla complete tal y como se describe en esta especificación.</p> + +<p>No se hereda ni es heredado de ningún elemento. Tampoco se hacen restricciones sobre qué propiedades se aplican a este pseudo-elemento.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}</td> + <td>{{Spec2('Fullscreen')}}</td> + <td>Definición Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>32.0 {{property_prefix("webkit")}}<br> + 37.0</td> + <td>{{CompatGeckoDesktop("47")}} <sup>[1]</sup></td> + <td>11 {{property_prefix("ms")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>en la etiqueta <code><dialog></code></td> + <td>32.0 {{property_prefix("webkit")}}<br> + 37.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>a pantalla completa</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("47")}} <sup>[1]</sup></td> + <td>11 {{property_prefix("ms")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("47")}} <sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>en la etiqueta <code><dialog></code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>a pantalla completa</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("47")}} <sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Ver {{bug(1064843)}}</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>{{cssxref(":fullscreen")}}</li> + <li>{{HTMLElement("dialog")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_before/index.html b/files/es/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..3f75cb9266 --- /dev/null +++ b/files/es/web/css/_doublecolon_before/index.html @@ -0,0 +1,231 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - Presentación + - Pseudo-elemento CSS + - Referencia + - Web +translation_of: 'Web/CSS/::before' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">En CSS, <code>::before</code> crea un <a href="/es/docs/Web/CSS/Pseudo-elements">pseudoelemento</a> que es el primer hijo del elemento seleccionado. Es usado normalmente para añadir contenido estético a un elemento, usando la propiedad {{cssxref("content")}}. Este elemento se muestra en línea con el texto de forma predeterminada.</span></p> + +<pre class="brush: css language-css notranslate"><code class="language-css"><span class="comment token">/* Añade un corazón antes de los enlaces */</span> +<span class="selector token">a<span class="pseudo-element token">::before</span></span> <span class="punctuation token">{</span> + <span class="property token">content</span><span class="punctuation token">:</span> "</code>♥<code class="language-css">"<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<div class="note"> +<p><strong>Nota:</strong> Los pseudoelementos generados por <code>::before</code> y <code>::after</code> son <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">contenidos por la caja de formato del elemento</a>, y por lo tanto, no aplica a <em><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">elementos de reemplazo</a></em> como los elementos {{htmlelement("img")}}, o {{htmlelement("br")}}.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<div class="note"> +<p><strong>Nota:</strong> CSS3 introdujo la notación <code>::before</code> (con doble dos puntos) para diferenciar <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-clases</a> con <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>. Los navegadores aceptan <code>:before</code>, añadido en CSS2.</p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Añadiendo_comillas">Añadiendo comillas</h3> + +<p>Un ejemplo simple del uso del pseudoelemento <code>::before</code> es el proporcionar comillas. Aquí, usamos <code>::before </code>y <code>{{Cssxref("::after")}}</code> para insertar caracteres de comillas.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html notranslate"><q>Some quotes</q>, he said, <q>are better than none</q>.</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush:css notranslate">q::before { + content: "«"; + color: blue; +} +q::after { + content: "»"; + color: red; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Añadiendo_comillas', '500', '50', '')}}</p> + +<h3 id="Ejemplo_decorativo">Ejemplo decorativo</h3> + +<p>Podemos estilizar el texto o imágenes en la propiedad {{cssxref("content")}} de casi cualquier forma que queramos.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><span class="ribbon">Notice where the orange box is.</span></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">.ribbon { + background-color: #5BC8F7; +} + +.ribbon::before { + content: "Look at this orange box."; + background-color: #FFBA10; + border-color: black; + border-style: dotted; +}</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample('Ejemplo_decorativo', 450, 60)}}</p> + +<h3 id="Lista_de_tareas">Lista de tareas</h3> + +<p>En este ejemplo, creamos una lista de tareas simple usando pseudo-elementos. Este método puede ser usado comúnmente para añadir detalles a la interfaz y mejorar su experiencia de usuario.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html notranslate"><ul> + <li>Buy milk</li> + <li>Take the dog for a walk</li> + <li>Exercise</li> + <li>Write code</li> + <li>Play music</li> + <li>Relax</li> +</ul> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css notranslate">li { + list-style-type: none; + position: relative; + margin: 2px; + padding: 0.5em 0.5em 0.5em 2em; + background: lightgrey; + font-family: sans-serif; +} + +li.done { + background: #CCFF99; +} + +li.done::before { + content: ''; + position: absolute; + border-color: #009933; + border-style: solid; + border-width: 0 0.3em 0.25em 0; + height: 1em; + top: 1.3em; + left: 0.6em; + margin-top: -1em; + transform: rotate(45deg); + width: 0.5em; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">var list = document.querySelector('ul'); +list.addEventListener('click', function(ev) { + if( ev.target.tagName === 'LI') { + ev.target.classList.toggle('done'); + } +}, false); +</pre> + +<p>Aquí se está ejecutando el ejemplo de arriba. Nótese que no se están usando íconos, y la marca de selección en realidad es el pseudoelemento <code>::before</code> que ha sido estilizado en CSS. Puedes interactuar con el ejemplo para ver los cambios.</p> + +<h4 id="Resultado_3">Resultado</h4> + +<p>{{EmbedLiveSample('Lista_de_tareas', 400, 300)}}</p> + +<h3 id="Caracteres_especiales">Caracteres especiales</h3> + +<p>Como esto es CSS y no HTML, <strong>no </strong>se pueden usar entidades de marcado en los valores del contenido. Si se necesita usar caracteres especiales, y no se puede ingresar literalmente en la cadena de contenido CSS, se utiliza una secuencia de escape unicode, consistiendo de una barra invertida seguida de un valor unicode hexadecimal.</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ol</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Crack Eggs into bowl<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Add Milk<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Add Flour<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span> <span class="attr-name token">aria-current</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>step<span class="punctuation token">'</span></span><span class="punctuation token">></span></span>Mix thoroughly into a smooth batter<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Pour a ladleful of batter onto a hot, greased, flat frying pan<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Fry until the top of the pancake loses its gloss<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Flip it over and fry for a couple more minutes<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>serve with your favorite topping<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ol</span><span class="punctuation token">></span></span></code></pre> + +<h4 id="CSS_4">CSS</h4> + +<pre class="brush: css language-css notranslate"><code class="language-css"> +<span class="selector token">li</span> <span class="punctuation token">{</span> + <span class="property token">padding</span><span class="punctuation token">:</span><span class="number token">0.5</span><span class="token unit">em</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">li<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">aria-current</span><span class="operator token">=</span><span class="token value">'step'</span><span class="punctuation token">]</span></span></span> <span class="punctuation token">{</span> + <span class="property token">font-weight</span><span class="punctuation token">:</span>bold<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">li<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">aria-current</span><span class="operator token">=</span><span class="token value">'step'</span><span class="punctuation token">]</span></span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">" \21E6"</span><span class="punctuation token">;</span> <span class="comment token">/* Hexadecimal for Unicode Leftwards white arrow*/</span> + <span class="property token">display</span><span class="punctuation token">:</span> inline<span class="punctuation token">;</span> +<span class="punctuation token">}</span> +</code> +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Sin cambios significativos desde la especificación previa.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td> + <td>{{Spec2("CSS3 Transitions")}}</td> + <td>Permite transiciones en propiedades definidas a los pseudo-elementos.</td> + </tr> + <tr> + <td>{{Specname("CSS3 Animations", "", "")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td>Permite animaciones en propiedades definidas a los pseudo-elementos.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Introduce la sintaxis de doble símbolo <code>:</code></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición inicial, usando la sintaxis de un símbolo <code>:</code></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.before")}}</p> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{Cssxref("::after")}}</li> + <li>{{cssxref("content")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_cue/index.html b/files/es/web/css/_doublecolon_cue/index.html new file mode 100644 index 0000000000..033849a603 --- /dev/null +++ b/files/es/web/css/_doublecolon_cue/index.html @@ -0,0 +1,113 @@ +--- +title: '::cue' +slug: 'Web/CSS/::cue' +tags: + - '::cue' + - Archivos multimedia + - CSS + - Formato de pistas de texto para la web + - Pseudo-elemento + - Referencia + - Selector + - WebVTT + - anotaciones + - subtítulos +translation_of: 'Web/CSS/::cue' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>::cue</code></strong> señala las pistas de texto <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a> dentro del elemento seleccionado. Esto puede ser usado para <a href="https://wiki.developer.mozilla.org/es/docs/Web/API/WebVTT_API#Estilizando_anotaciones_WebVTT">estilizar subtítulos y otras pistas de texto</a> multimedia con pistas de texto.</span></p> + +<pre class="brush: css no-line-numbers notranslate">::cue { + color: yellow; + font-weight: bold; +}</pre> + +<p>Las propiedades son aplicadas al cojunto completo de anotaciones como si fuesen una unidad. La única excepción es que <code>background</code> y sus versiones largas se aplican a cada pista de texto individualmente para evitar crear cajas y oscurecer inesperadamente grandes partes de los archivos multimedia.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="Propiedades_permitidas">Propiedades permitidas</h2> + +<p>Las reglas cuyos selectores incluyen este elemento solo pueden usar las siguientes propiedades CSS:</p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/background"><code>background</code></a></li> + <li><a href="/en-US/docs/Web/CSS/background-attachment"><code>background-attachment</code></a></li> + <li><a href="/en-US/docs/Web/CSS/background-clip"><code>background-clip</code></a></li> + <li><a href="/en-US/docs/Web/CSS/background-color"><code>background-color</code></a></li> + <li><a href="/en-US/docs/Web/CSS/background-image"><code>background-image</code></a></li> + <li><a href="/en-US/docs/Web/CSS/background-origin"><code>background-origin</code></a></li> + <li><a href="/en-US/docs/Web/CSS/background-position"><code>background-position</code></a></li> + <li><a href="/en-US/docs/Web/CSS/background-repeat"><code>background-repeat</code></a></li> + <li><a href="/en-US/docs/Web/CSS/background-size"><code>background-size</code></a></li> + <li><a href="/en-US/docs/Web/CSS/color"><code>color</code></a></li> + <li><a href="/en-US/docs/Web/CSS/font"><code>font</code></a></li> + <li><a href="/en-US/docs/Web/CSS/font-family"><code>font-family</code></a></li> + <li><a href="/en-US/docs/Web/CSS/font-size"><code>font-size</code></a></li> + <li><a href="/en-US/docs/Web/CSS/font-stretch"><code>font-stretch</code></a></li> + <li><a href="/en-US/docs/Web/CSS/font-style"><code>font-style</code></a></li> + <li><a href="/en-US/docs/Web/CSS/font-variant"><code>font-variant</code></a></li> + <li><a href="/en-US/docs/Web/CSS/font-weight"><code>font-weight</code></a></li> + <li><a href="/en-US/docs/Web/CSS/line-height"><code>line-height</code></a></li> + <li><a href="/en-US/docs/Web/CSS/opacity"><code>opacity</code></a></li> + <li><a href="/en-US/docs/Web/CSS/outline"><code>outline</code></a></li> + <li><a href="/en-US/docs/Web/CSS/outline-color"><code>outline-color</code></a></li> + <li><a href="/en-US/docs/Web/CSS/outline-style"><code>outline-style</code></a></li> + <li><a href="/en-US/docs/Web/CSS/outline-width"><code>outline-width</code></a></li> + <li><a href="/en-US/docs/Web/CSS/ruby-position"><code>ruby-position</code></a></li> + <li><a href="/en-US/docs/Web/CSS/text-combine-upright"><code>text-combine-upright</code></a></li> + <li><a href="/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a></li> + <li><a href="/en-US/docs/Web/CSS/text-decoration-color"><code>text-decoration-color</code></a></li> + <li><a href="/en-US/docs/Web/CSS/text-decoration-line"><code>text-decoration-line</code></a></li> + <li><a href="/en-US/docs/Web/CSS/text-decoration-style"><code>text-decoration-style</code></a></li> + <li><a href="/en-US/docs/Web/CSS/text-decoration-thickness"><code>text-decoration-thickness</code></a></li> + <li><a href="/en-US/docs/Web/CSS/text-shadow"><code>text-shadow</code></a></li> + <li><a href="/en-US/docs/Web/CSS/visibility"><code>visibility</code></a></li> + <li><a href="/en-US/docs/Web/CSS/white-space"><code>white-space</code></a></li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Estilizando_las_anotaciones_WebVTT_como_blanco_sobre_negro">Estilizando las anotaciones WebVTT como blanco sobre negro</h3> + +<p>El siguiente CSS ajusta el estilo de las anotaciones para que el texto sea blanco y el fondo sea una caja negro translúcido.</p> + +<pre class="brush: css notranslate">::cue { + color: #fff; + background-color: rgba(0, 0, 0, 0.6); +}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Especificacion</th> + <th>Estado</th> + <th>Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}</td> + <td>{{Spec2("WebVTT")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página está generada desde datos estructurados. Si quieres contribuir a los datos, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una pull request.</div> + +<p>{{Compat("css.selectors.cue")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebVTT_API">Formato de pistas de texto para la web (WebVTT)</a></li> + <li>{{HTMLElement("track")}}, {{HTMLElement("video")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_first-letter/index.html b/files/es/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..3e243869b6 --- /dev/null +++ b/files/es/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,135 @@ +--- +title: '::first-letter (:first-letter)' +slug: 'Web/CSS/::first-letter' +tags: + - CSS + - Diseño + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::first-letter' +--- +<div>{{CSSRef}}</div> + +<p>El <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" rel="noopener">pseudo-elemento</a> <strong><code>::first-letter</code></strong> aplica estilos a la primera letra de la primera línea un <a href="https://developer.mozilla.org/es/docs/Web/HTML/Block-level_elements">elemento de bloque</a>, sólo cuando no es precedido de otro contenido (como imágenes o tablas).</p> + +<pre class="brush: css no-line-numbers notranslate">/* Selecciona la primera letra de <p> */ +p::first-letter { + font-size: 130%; +}</pre> + +<p>La primera letra de un elemento no es siempre fácil de identificar:</p> + +<ul> + <li>La puntuación que precede o sigue inmediatamente a la primera letra se incluye. La puntuación incluyo cualquier caracter Unicode definido on las clases <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf), y <em>other punctuation</em> (Po).</li> + <li>Algunos idiomas tienen dígrafos que siempre se capitalizan juntos, como el <code>IJ</code> en holandés. En estos casos, ambas letras del dígrafo deben coincidir con el pseudo-elemento <code>::first-letter</code>. (Esto pobremente implementado en los navegadores; consulte la tabla de compatibilidad).</li> + <li>La combinación del pseudoelemento {{ cssxref("::before") }} y la propiedad {{ cssxref("content") }} podría inyectar texto al inico del elemento. En dicho caso, <code>::first-letter</code> se aplicaría a la primera letra de este contenido generado.</li> +</ul> + +<div class="note"> +<p>CSS3 introdujo la notación<code>::first-letter</code> (con doble dos puntos) para distinguir <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" rel="noopener">pseudo-clases</a> de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" rel="noopener">pseudo-elementos</a>. Los navegadores también aceptan<code>:first-letter</code>, introducido en CSS2.</p> +</div> + +<h2 id="Propiedades_permitidas">Propiedades permitidas</h2> + +<p>Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento <code>::first-letter</code>:</p> + +<ul> + <li>Todas las propiedades de fuente: {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}</li> + <li>Todas las propiedades de fondo: {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, and {{cssxref("background-blend-mode")}}</li> + <li>Todas las propiedades de márgenes: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}</li> + <li>Todas las propiedades de relleno: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}</li> + <li>Todas las propiedades de bordes: {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}</li> + <li>La propiedad {{ cssxref("color") }}</li> + <li>Las propiedades {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (sólo si <code>float</code> es <code>none</code>)</li> +</ul> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<p>Hace que la primera letra de cada párrafo sea roja y grande.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt + ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo + dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p> +<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> +<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut + aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit + esse molestie consequat.</p> +<p>-El comienzo es un signo de puntuación especial.</p> +<p>_El comienzo es un signo de puntuación especial.</p> +<p>"El comienzo es un signo de puntuación especial.</p> +<p>'El comienzo es un signo de puntuación especial.</p> +<p>*El comienzo es un signo de puntuación especial.</p> +<p>#El comienzo es un signo de puntuación especial.</p> +<p>「特殊的汉字标点符号开头。</p> +<p>《特殊的汉字标点符号开头。</p> +<p>“特殊的汉字标点符号开头。</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">p::first-letter { + color: red; + font-size: 130%; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Example', '80%', 420) }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td> + <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Generaliza propiedades permitidas, {{ cssxref("opacity") }}, and {{ cssxref("box-shadow") }}.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}</td> + <td>{{ Spec2('CSS3 Text Decoration')}}</td> + <td>Permite el uso de {{cssxref("text-shadow")}} con <code>::first-letter</code>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Introducción de la sintaxis de doble dos puntos. Definición de casos particulares, como con idiomas específicos (ej., el dígrafo holandés <code>IJ</code>).</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Sin cambios.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definición inicial, uso de la sintaxis de doble dos puntos.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad">Compatibilidad</h2> + +<div> + + +<p>{{Compat("css.selectors.first-letter")}}</p> +</div> + +<h2 id="Ver_También">Ver También</h2> + +<ul> + <li>{{cssxref("::first-line")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_first-line/index.html b/files/es/web/css/_doublecolon_first-line/index.html new file mode 100644 index 0000000000..671e7716ef --- /dev/null +++ b/files/es/web/css/_doublecolon_first-line/index.html @@ -0,0 +1,122 @@ +--- +title: '::first-line (:first-line)' +slug: 'Web/CSS/::first-line' +tags: + - CSS + - Diseño + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::first-line' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">El <a href="https://developer.mozilla.org/es/docs/Web/CSS/Pseudoelementos">Pseudoelemento</a> <strong><code>::first-line</code></strong> aplica estilos a la primera línea de un <a href="https://developer.mozilla.org/es/docs/Web/HTML/Block-level_elements">elemento de bloque</a>.</span> Nótese que la longitud de la primera línea depende de muchos factores, incluyendo el ancho del elemento, el ancho del documento y el tamaño de fuente del texto.</p> + +<pre class="brush: css no-line-numbers notranslate">/* Selecciona la primera línea de un <p> */ +p::first-line { + color: red; +}</pre> + +<div class="note"> +<p>CSS3 introdujo la notación <code>::first-line</code> (con doble dos puntos) para distinguir <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" rel="noopener">pseudo-clases</a> de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" rel="noopener">pseudo-elementos</a>. Los navegadores también aceptan <code>:first-line</code>, añadido en CSS2.</p> +</div> + +<h2 id="Propiedades_permitidas">Propiedades permitidas</h2> + +<p>Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento <code>::first-line</code>:</p> + +<ul> + <li>Todas las propiedades de fuente: {{Cssxref("font")}}, {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}}, and {{Cssxref("font-family")}}</li> + <li>Todas las propiedades de fondo: {{Cssxref("background-color")}}, {{cssxref("background-clip")}}, {{Cssxref("background-image")}}, {{cssxref("background-origin")}}, {{Cssxref("background-position")}}, {{Cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{Cssxref("background-attachment")}}, and {{cssxref("background-blend-mode")}}</li> + <li>La propiedad {{cssxref("color")}}</li> + <li>{{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}}, and {{cssxref("line-height")}}</li> + <li>{{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, and {{cssxref("vertical-align")}}.</li> +</ul> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>Los estilos sólo se aplicarán en la primera línea de este párrafo. +Posteriormente, todo el texto tendrá el estilo normal. +¿Ves?</p> + +<span>La primera línea de este elemento no recibe ningún estilo +especial, porque no es un elemento de bloque.</span></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">::first-line { + color: blue; + text-transform: uppercase; + + + /* ADVERTENCIA: NO USES ESTOS*/ + /* Muchas propiedades son inválidas en pseudoelementos ::first-line */ + margin-left: 20px; + text-indent: 20px; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Example', 350, 160)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td> + <p>Defina más estrictamente dónde <code>::first-letter</code> puede ocurrir. Generaliza propiedades permitidas. Define la herencia de <code>::first-letter</code>.</p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td>Permite el uso de {{cssxref("text-shadow")}} con <code>::first-letter</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Introducción de la sintexis de doble dos puntos.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Sin cambios.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición inicial, uso de la sintaxis de doble dos puntos.</td> + </tr> + </tbody> +</table> + +<div> +<div class="hidden"><br> +<font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.3333px;"><strong>Compatibilidad</strong></span></font></div> + + + +<p>{{Compat("css.selectors.first-line")}}</p> +</div> + +<h2 id="Ver_También">Ver También</h2> + +<ul> + <li>{{cssxref("::first-letter")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_marker/index.html b/files/es/web/css/_doublecolon_marker/index.html new file mode 100644 index 0000000000..68c7e12b52 --- /dev/null +++ b/files/es/web/css/_doublecolon_marker/index.html @@ -0,0 +1,91 @@ +--- +title: '::marker' +slug: 'Web/CSS/::marker' +translation_of: 'Web/CSS/::marker' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p><span class="seoSummary">El <a href="/en/CSS/Pseudo-elements">pseudo-elemento</a> <strong><code>::marker</code></strong> en <a href="/en-US/docs/Web/CSS">CSS </a></span>selecciona la caja de marcadores de un elemento de la lista, que normalmente contiene una viñeta o un número. Funciona en cualquier elemento o pseudo-elemento configurado para <code><a href="/en-US/docs/Web/CSS/display">display: list-item</a></code>, como el elemento {{HTMLElement("li")}} y {{HTMLElement("summary")}}.</p> + +<pre class="brush: css no-line-numbers">::marker { + color: blue; + font-size: 1.2em; +}</pre> + +<h2 id="Propiedades_permitidas">Propiedades permitidas</h2> + +<p>Sólo ciertas propiedades CSS puedes utilizarse en una regla con <code>::marker</code> como selector:</p> + +<ul> + <li>Todas las <a href="/en-US/docs/Web/CSS/CSS_Fonts">propiedades de fuentes</a></li> + <li>{{CSSxRef("color")}}</li> + <li>La propiedad {{CSSxRef("text-combine-upright")}}, {{CSSxRef("unicode-bidi")}} y {{CSSxRef("direction")}}</li> + <li>La propiedad {{CSSxRef("content")}}</li> +</ul> + +<div class="blockIndicator note"> +<p>En la especificación se indica que en el futuro de pueden admitir propiedades CSS adicionales.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li>Duraznos</li> + <li>Manzanas</li> + <li>Ciruelas</li> +</ul></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">ul li::marker { + color: red; + font-size: 1.5em; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}</td> + <td>{{Spec2('CSS3 Lists')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.marker")}}</p> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>Elementos HTML que tienen marcadores por defecto: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("summary")}}</li> +</ul> diff --git a/files/es/web/css/_doublecolon_placeholder/index.html b/files/es/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..4ed5e7ff80 --- /dev/null +++ b/files/es/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,152 @@ +--- +title: '::placeholder' +slug: 'Web/CSS/::placeholder' +tags: + - '::placeholder' + - CSS + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::placeholder' +--- +<div>{{CSSRef}}</div> + +<p>El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento CSS</a> <strong><code>::placeholder</code></strong> representa el <a href="/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">texto provisional</a> en un elemento {{HTMLElement("input")}} o un elemento {{HTMLElement("textarea")}}.</p> + +<pre class="brush: css no-line-numbers">::placeholder { + color: blue; + font-size: 1.5em; +}</pre> + +<p>Solo el subconjuto de las propiedades CSS que aplican al pseudo-elemento {{cssxref("::first-line")}} puede ser usado en una regla utilizando <code>::placeholder</code> en su selector.</p> + +<div class="note"> +<p><strong>Nota:</strong> En la mayoría de navegadores, la apariencia del texto provisional es traslúcido o un color gris claro por defecto.</p> +</div> + +<h2 id="Sintáxis">Sintáxis</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Texto_rojo">Texto rojo</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html line-numbers language-html"><input placeholder="Type something here!"></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">input::placeholder { + color: red; + font-size: 1.2em; + font-style: italic; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Red_text", 200, 60)}}</p> + +<h3 id="Texto_verde">Texto verde</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush:html line-numbers language-html"><input placeholder="Type something here..."></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">input::placeholder { + color: green; +} +</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Green_text", 200, 60)}}</p> + +<h2 id="Preocupaciones_por_la_accesibilidad">Preocupaciones por la accesibilidad</h2> + +<h3 id="Contraste_de_color">Contraste de color</h3> + +<h4 id="Contraste_de_color_2">Contraste de color</h4> + +<p>El texto temporal generalmente tiene un color más claro para indicar que es una sugerencia para el tipo de entrada que será válido, y no es una entrada real de cualquier tipo.</p> + +<p>Es importante asegurarse que el radio de contraste entre el color del texto provisional y el fondo de la entrada es lo suficientemente alto para que las personas que experimenten condiciones de visión baja sean capaces de leer el texto mientras también asegurarse que hay diferencia suficiente entre el color del texto temporal y el color del texto de entrada para que los usuarios no confundad el texto provisional con la información de ingreso.</p> + +<p>El radio del color de contraste es determinado al comparar la luminosidad entre dos colores. Para cumplir las actuales <a href="https://www.w3.org/WAI/standards-guidelines/wcag/es">Pautas de Accesibilidad para el Contenido Web (WCAG)</a>, un radio de 4.5:1 es requerido para el contenido de un texto y 3:1 para textos más grandes como encabezados. Un texto grando es definido como 18.66px o mayor en negritas; o 24px o mayor.</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Comprobador de contraste de color</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Entendiendo WCAG, Explicaciones del lineamiento 1.4</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Entendiendo críterios exitósos 1.4.3 | W3C Entendiendo WCAG 2.0</a></li> +</ul> + +<h4 id="Usabilidad">Usabilidad</h4> + +<p>Un texto temporal con suficiente contraste puede ser interpretado como una entrada. El texto provisional podría desaparecer cuando una persona ingresa contenido en un elemento {{htmlelement("input")}}. Ámbas circunstancias pueden interferir con el correcto llenado de un formulario, especialmente para personas con dificultades cogniticas.</p> + +<p>Un acercamiento alternativo para proveer información provisional es incluirla afuera del campo de entrada en proximidad visual, entonces usar <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> para programáticamente asociar la entrada {{HTMLElement("input")}} con su sugerencia.</p> + +<p>Con esta implementación, el contenido de la sugerencia, esta disponible incluso cuando información es ingresada en el campo de entrada, y la entrada aparece libre de una <em>entrada</em> preexistente cuando la página ha cargado. Muchas de las tecnologías de lectores de pantalla usan <code>aria-describedby</code> para leer la sugerencia después de que la etiqueta de la entrada de texto hay sido anunciada, y la persona utilizando el lector de pantalla puede silenciarla si encuentra la información adicional innecesaria..</p> + +<pre class="brush:html line-numbers language-html"><label for="user-email">Your email address</label> +<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span> +<input id="user-email" aria-describedby="user-email-hint" name="email" type="email"> +</pre> + +<ul> + <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Los textos provisionales en los campos del formulario son dañinos (Placeholders in Form Fields Are Harmful) — Nielsen Norman Group</a></li> +</ul> + +<h3 id="Modo_de_alto_contraste_de_Windows">Modo de alto contraste de Windows</h3> + +<p>El campo temporal puede aparecer con el mismo estilo como el texto ingresado por el usuario cuando se utiliza el <a href="/en-US/docs/Web/CSS/-ms-high-contrast">Modo de alto contraste de Windows</a>. Eso hará difícil para algunas personas determinar que contenido ha sido ingresado y que contenido es un texto temporal</p> + +<ul> + <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — Cómo usar -ms-high-contrast (How to use -ms-high-contrast)</a></li> +</ul> + +<h3 id="Etiquetas">Etiquetas</h3> + +<p>El texto provisional no es un reemplazo para el elemento {{htmlelement("label")}}. Sin una etiqueta que ha sido programaticamente asociada con la entrada usando una combinación de los atributos {{htmlattrxref("for", "label")}} y {{htmlattrxref("id")}}, tecnología asistiva como los lectores de pantalla no pueden leer los elementos {{htmlelement("input")}}.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">Sugerencias básicas de formularios (MDN Basic form hints)</a></li> + <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Los textos provisionales en los campos del formulario son dañinos (Placeholders in Form Fields Are Harmful) — Nielsen Norman Group</a></li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.placeholder")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>La pseudo-clase {{cssxref(":placeholder-shown")}} provee estilos a un elemento que <em>tiene</em> un texto provisional activo.</li> + <li>Elementos HTML relacionados: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li> + <li><a href="/en-US/docs/Learn/HTML/Forms">Formularios HTML</a></li> +</ul> diff --git a/files/es/web/css/_doublecolon_selection/index.html b/files/es/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..d02181429f --- /dev/null +++ b/files/es/web/css/_doublecolon_selection/index.html @@ -0,0 +1,94 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +translation_of: 'Web/CSS/::selection' +--- +<p>{{ CSSRef() }}</p> + +<p>{{ Non-standard_header() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>El selector <code>::selection</code> CSS pseudo-elemento aplica reglas a una porción de un documento que ha sido destacado (por ejemplo: selección con el mouse o algún otro puntero en un dispositivo) del usuario.</p> + +<p>Sólo un pequeño subconjunto de propiedades CSS pueden ser usadas en una regla <code>::selection</code> en el selector de: {{ cssxref("color") }}, {{ cssxref("background") }}, {{ cssxref("background-color") }} y {{ cssxref("text-shadow") }}. Nótese que, en particular, {{ cssxref("background-image") }} es ignorado, como cualquier otra propiedad.</p> + +<div class="note"> +<p><code>text-shadow</code> en <code>::selection</code> es soportado por Chrome y Safari y Firefox 17 y superior.</p> +</div> + +<div class="note">Aunque este pseudo-elemento está en borradores como nivel 3 de selectores CSS, fue quitado durante la fase recomendaciones de candidatos, como parecía que su comportamiento estaba infra-especificado, especialmente con elementos anidados, y la interoperabilidad no fue conseguida <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html" title="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(basado en discusión en W3C lista de correos de estilo)</a>.<br> +<br> +<code>El ::selection</code> pseudo elemento actualmente no está en los modulos de CSS para estandar track. No debe ser usado en entornos de produccion.</div> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Gecko es la única máquina que requiere el prefijo. Devido a el factor que las reglas de análisis de CSS requieren dejar caer la regla general cuando encuentre un pseudo elemento inválido, dos reglas deben ser escritas: <code>::-moz-selection, ::selection {...}</code>. La regla debe soltada en non-Gecko como <code>::-moz-selection</code> es inválido en esto.</p> + +<pre class="brush: css">/* dibuja en cualquier texto seleccionado el color amarillo sobre un fondo rojo */ +::-moz-selection { color: gold; background: red; } +::selection { color: gold; background: red; } + +/* dibuja el texto seleccionado en un parrafo de color blanco y negro*/ +p::-moz-selection { color: white; background: black; } +p::selection { color: white; background: black; }</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>El <code>::selection</code> CSS pseudo-elemento fue redactado selector CSS nivel 3 pero quitado antes que alcanzara el estatus recomendado. Apesar de esto es simplemente en algunos Navegadores, que probablemente tendran soporte a este.</p> + +<p><span style="line-height: inherit;">En estos momentos, el seudo elemento CSS </span><code style="font-size: 14px; line-height: inherit;">::selection</code><span style="line-height: inherit;"> no esta en ninguna especificaci</span><span style="line-height: inherit;">ón.</span></p> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristicas</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte basico</td> + <td>1</td> + <td>1.0 {{ property_prefix("-moz") }}</td> + <td>9</td> + <td>9.5</td> + <td>1.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristicas</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte basico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/es/web/css/_doublecolon_spelling-error/index.html b/files/es/web/css/_doublecolon_spelling-error/index.html new file mode 100644 index 0000000000..7c0ac9fb5b --- /dev/null +++ b/files/es/web/css/_doublecolon_spelling-error/index.html @@ -0,0 +1,70 @@ +--- +title: '::spelling-error' +slug: 'Web/CSS/::spelling-error' +tags: + - CSS + - Experimental + - Pseudo-elemento + - Referencia + - Web +translation_of: 'Web/CSS/::spelling-error' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>El <a href="/en/CSS/Pseudo-elements">pseudo-elemento</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>::spelling-error</code></strong> representa un segmento de texto que el {{glossary("user agent")}} ha marcado como deletreado incorrectamente.</p> + +<pre class="brush: css no-line-numbers">::spelling-error { + color: red; +}</pre> + +<h2 id="Propiedades_permitidas">Propiedades permitidas</h2> + +<p>Solo se puede usar un pequeño subconjunto de propiedades de CSS en una regla con <code>::spelling-error</code> en su selector:</p> + +<ul> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("background-color")}}</li> + <li>{{cssxref("cursor")}}</li> + <li>{{cssxref("caret-color")}}</li> + <li>{{cssxref("outline")}} y sus longhands</li> + <li>{{cssxref("text-decoration")}} y sus propiedades asociadas</li> + <li>{{cssxref("text-emphasis-color")}}</li> + <li>{{cssxref("text-shadow")}}</li> +</ul> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">::spelling-error</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-spelling-error', '::spelling-error')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.selectors.spelling-error")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{cssxref("::grammar-error")}}</li> +</ul> diff --git a/files/es/web/css/actual_value/index.html b/files/es/web/css/actual_value/index.html new file mode 100644 index 0000000000..a11954dbdb --- /dev/null +++ b/files/es/web/css/actual_value/index.html @@ -0,0 +1,36 @@ +--- +title: Valor real +slug: Web/CSS/actual_value +translation_of: Web/CSS/actual_value +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El <strong>valor real</strong> (<strong>actual value</strong>) de una propiedad CSS es el valor usado una vez que se aplican todas las aproximaciones. Por ejemplo, tal vez un agente usuario solo puede renderizar bordes con un valor de píxel entero, y se vería forzado a calcular la aproximación de la anchura del borde.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/Referencia_CSS">Referencia CSS</a></li> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/es/web/css/align-content/index.html b/files/es/web/css/align-content/index.html new file mode 100644 index 0000000000..9e6b9b882a --- /dev/null +++ b/files/es/web/css/align-content/index.html @@ -0,0 +1,261 @@ +--- +title: align-content +slug: Web/CSS/align-content +tags: + - Cajas Flexibles CSS + - Propiedad CSS +translation_of: Web/CSS/align-content +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code>align-content</code> ajusta las líneas dentro de un contenedor flex cuando hay espacio extra en el eje transversal.</p> + +<p>Esta propiedad no tiene efecto en cajas flexibles de una sola línea.</p> + +<div>{{cssinfo}}</div> + +<p>Vea <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS" title="CSS/Using_CSS_flexible_boxes">Usando las cajas flexibles CSS</a> para más propiedades e información.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">/* Ajusta las líneas desde el inicio del eje transversal */ +align-content: flex-start; + +/* Ajusta las líneas desde el final del eje transversal */ +align-content: flex-end; + +/* Ajusta las líneas al rededor del centro del eje transversal */ +align-content: center; + +/* Distribuye las líneas a lo largo del eje transversal, de principio a fin */ +align-content: space-between; + +/* Distribuye las líneas a lo largo del eje transversal, igualmente espaciados */ +align-content: space-around; + +/* Estira las líneas para que ocupen el eje transversal completo */ +align-content: stretch; + +/* Valores globales */ +align-content: inherit; +align-content: initial; +align-content: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>flex-start</code></dt> + <dd>Las líneas son ajustadas a partir del inicio del eje transversal. El borde transversal de inicio de la primera línea y el del contenedor flexible quedan unidos. Cada línea siguiente es unida a su predecesora.</dd> + <dt><code>flex-end</code></dt> + <dd>Las líneas son ajustadas a partir del final del eje transversal. El borde transversal final de la última línea y el del contenedor flexible quedan unidos. Cada línea que precede es unida a la línea siguiente.</dd> + <dt><code>center</code></dt> + <dd>Las líneas son ajustadas hacia el centro del contenedor flexible. Las líneas son unidas entre sí, y centradas dentro del contenedor. El espacio entre el borde transversal de inicio y la primera línea, y el que hay entre el borde transversal final y la última línea es el mismo.</dd> + <dt><code>space-between</code></dt> + <dd>Las líneas son distribuidas de manera uniforme en el contenedor flexible. El espaciado se hace de modo que la separación entre cualquier par de elementos adyacentes sea el mismo. Los bordes transversales de inicio y de fin del contenedor son unidos a los bordes de la primera y última línea, respectivamente.</dd> + <dt><code>space-around</code></dt> + <dd>Las líneas son distribuidas uniformemente de modo que el espacio entre cualquier par de elementos adyacentes sea el mismo. El espacio vacío antes de la primera línea y el espacio después de la última es igual a la mitad del espacio entre cualquier par de líneas adyacentes.</dd> + <dt><code>stretch</code></dt> + <dd>Las líneas son estiradas para usar el espacio sobrante. El espacio libre en el contenedor es dividido por igual entre todas las líneas.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p><strong>HTML:</strong></p> + +<pre class="brush: html"><div id="container"> + <p>align-content: flex-start</p> + <div id="flex-start"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <p>align-content: center</p> + <div id="center"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <p>align-content: flex-end</p> + <div id="flex-end"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <p>align-content: space-between</p> + <div id="space-between"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <p>align-content: space-around</p> + <div id="space-around"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <p>align-content: stretch</p> + <div id="stretch"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</div></pre> + +<p><strong>CSS:</strong></p> + +<pre class="brush: css">#container > div { + display: -webkit-flex; + display: -ms-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + width: 140px; + height: 140px; + background: linear-gradient(-45deg, #78ff8c, #b4ffc8); +} + +#container > div > div { + margin: 2px; + width: 30px; + min-height: 30px; + background: linear-gradient(-45deg, #788cff, #b4c8ff); +} + +#flex-start { + -webkit-align-content: flex-start; + align-content: flex-start; +} + +#center { + -webkit-align-content: center; + align-content: center; +} + +#flex-end { + -webkit-align-content: flex-end; + align-content: flex-end; +} + +#space-between { + -webkit-align-content: space-between; + align-content: space-between; +} + +#space-around { + -webkit-align-content: space-around; + align-content: space-around; +} + +#stretch { + -webkit-align-content: stretch; + align-content: stretch; +}</pre> + +<p>Su resultado es:</p> + +<p>{{ EmbedLiveSample('Examples', 600, 550) }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#align-content', 'align-content')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>21.0{{property_prefix("-webkit")}}</td> + <td>28.0<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>12.10</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>28.0<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>12.10</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añadió soporte a la versión con prefijo <code>-webkit</code> de la propiedad, por razones de compatibilidad, usando la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esta preferencia es <code>true</code>.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS" title="CSS/Using_CSS_flexible_boxes">Usando las cajas flexibles CSS</a></li> +</ul> diff --git a/files/es/web/css/align-items/index.html b/files/es/web/css/align-items/index.html new file mode 100644 index 0000000000..1bc917d05b --- /dev/null +++ b/files/es/web/css/align-items/index.html @@ -0,0 +1,169 @@ +--- +title: align-items +slug: Web/CSS/align-items +tags: + - Cajas Flexibles CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/align-items +--- +<p>La propiedad <a href="/es/docs/Web/CSS" title="CSS">CSS</a> <strong><code>align-items</code></strong> establece el valor {{cssxref("align-self")}} sobre todos los descendientes directos de un grupo. La propiedad align-self indica la alineación de un elemento dentro del bloque que lo contiene. En Flexbox controla la alineación de los elementos del {{glossary("Cross Axis")}}, en Grid Layout controla la alineación de los elementos en el eje Block dentro de su <a href="/en-US/docs/Glossary/Grid_Areas">área grid</a>.</p> + +<p>El ejemplo interactivo a continuación demuestra algunos de los valores de <code>align-items</code> utilizando el sistema grid.</p> + +<div>{{EmbedInteractiveExample("pages/css/align-items.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers notranslate">/* Palabras Clave Basicas */ +align-items: normal; +align-items: stretch; + +/* Alineamiento posicional */ +/* align-items no considera los valores de "left" o "right" */ +align-items: center; /* Agrupa los elementos alrededor del centro */ +align-items: start; /* Agrupa los elementos desde el inicio */ +align-items: end; /* Agrupa los elementos desde el final */ +align-items: flex-start; /* Agrupa los elementos flex desde el incio */ +align-items: flex-end; /* Agrupa los elementos flex desde el final */ +align-items: self-start; +align-items: self-end; + +/* Alineamiento de Linea Base */ +align-items: baseline; +align-items: first baseline; +align-items: last baseline; /* Alineamiento de desborde (solamente para alineamiento posicional) */ +align-items: safe center; +align-items: unsafe center; + +/* Valores globales */ +align-items: inherit; +align-items: initial; +align-items: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>El efecto de esta palabra clave depende del modo de diseño utilizado:</dd> +</dl> + +<ul> + <li>en diseños de absolutamente-posicionados, esta clave se comporta como <code>start</code> en cajas-absolutamente-posicionadas <em>reemplazadas</em>. y como <code>stretch</code> en <em>todas las demas </em>cajas-absolutamente-posicionadas.</li> + <li>En la posicion estatica de diseños absolutamenteposicionados, esta clave se comporta como <code>stretch</code>.</li> + <li>Para elementos flex, la clave se comporta como <code>stretch</code>.</li> + <li>Para elementos grid, Esta palabra clave conduce a un comportamiento similar al de <code>stretch</code>, excepto para cuadros con una relación de aspecto o un tamaño intrínseco donde se comporta como <code>start</code>.</li> + <li>La propiedad no se aplica a cajas de nivel de bloque ni a celdas de tabla.</li> +</ul> + +<dl> + <dt></dt> + <dt><code>flex-start</code></dt> + <dd>El límite del margen transversal inicial del elemento flexible es unido al borde transversal final de la línea.</dd> + <dt><code>flex-end</code></dt> + <dd>El límite del margen transversal final del elemento flexible es unido al borde transversal final de la línea.</dd> + <dt><code>center</code></dt> + <dd>Los márgenes del elemento flexible son centrados dentro de la línea sobre su eje transversal. Si el tamaño transversal del elemento es mayor al del contenedor, se excederá por igual en ambas direcciones.</dd> + <dt><code>start</code></dt> + <dd>Los elementos se agrupan uno junto al otro hacia el borde inicial del contenedor de alineación en el eje apropiado.</dd> + <dt><code>end</code></dt> + <dd>Los elementos se agrupan uno junto al otro hacia el borde final del contenedor de alineación en el eje apropiado.</dd> + <dt><code>baseline</code></dt> + <dd>Todos los elementos flexibles son ajustados de modo que sus bases queden alineadas. El elemento con la distancia mayor entre su límite transversal inicial y su base es combinado con el borde transversal de la línea.</dd> + <dt><code>stretch</code></dt> + <dd>Las elementos flexibles son estirados de modo que el tamaño transversal de sus límites sea el mismo de la línea, manteniendo sus restricciones de anchura y altura.</dd> + <dt> + <h3 id="Sintaxis_formal">Sintaxis formal</h3> + </dt> +</dl> + +<pre class="syntaxbox notranslate">{{csssyntax}} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome(21.0)}}{{property_prefix("-webkit")}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("20.0")}}<sup>[2]</sup></td> + <td>11.0<sup>[3]</sup></td> + <td>12.10</td> + <td>7.0{{property_prefix("-webkit")}} </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("20.0")}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>12.10</td> + <td>7.0{{property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Las versiones anteriores de la especificación tratan a los hijos con posición absoluta como si fueran elementos flexibles de <code>0x0</code>. Las versiones posteriores los excluyen del flujo y establecen sus posiciones con base en las propiedades de alineación y justificación. Chrome implementa el comportamiento nuevo a partir de Chrome 52.</p> + +<p>[2] Para activar soporte a flexbox en Firefox 18 y 19, el usuario debe acceder a <code>about:config</code> y cambiar el valor de la preferencia <code>layout.css.flexbox.enabled</code> a <code>true</code>. Los flexbox multiínea son soportados desde Firefox 28.</p> + +<p>Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añadió soporte a la versión con prefijo <code>-webkit</code> de la propiedad, por razones de compatibilidad, usando la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esta preferencia es <code>true</code>.</p> + +<p>[3] En Internet Explorer 10-11, si los elementos flex de una columna tienen <code>align-items: center;</code> y su contenido es muy largo, se saldrán de los límites del contenedor. Véase <a href="https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container">Flexbug #2</a> para más información.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS" title="CSS/Using_CSS_flexible_boxes">Usando las cajas flexibles CSS</a></li> +</ul> diff --git a/files/es/web/css/align-self/index.html b/files/es/web/css/align-self/index.html new file mode 100644 index 0000000000..639c48a15a --- /dev/null +++ b/files/es/web/css/align-self/index.html @@ -0,0 +1,137 @@ +--- +title: align-self +slug: Web/CSS/align-self +tags: + - Cajas Flexibles CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/align-self +--- +<p>{{CSSRef}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>align-self</code></strong> alinea los elementos flexibles de la línea flexible actual, reemplazando el valor de {{cssxref("align-items")}}. Si el límite transversal de alguno de los elementos está definido como <code>auto</code>, el valor de <code>align-self</code> es ignorado.</p> + +<p>{{cssinfo}}</p> + +<p>Véase <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS" title="/en/CSS/Using_CSS_flexible_boxes">Usando las cajas flexibles CSS</a> para más propiedades e información.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* Valores clave */ +align-self: auto; +align-self: flex-start; +align-self: flex-end; +align-self: center; +align-self: baseline; +align-self: stretch; + +/* Valores globales */ +align-self: inherit; +align-self: initial; +align-self: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Se calcula acorde al valor de {{cssxref("align-items") }} del padre, o al de <code>stretch</code> si el elemento no tiene padre.</dd> + <dt><code>flex-start</code></dt> + <dd>El límite transversal inicial del elemento flexible es unido al borde transversal inicial de la línea.</dd> + <dt><code>flex-end</code></dt> + <dd>El límite transversal final del elemento flexible es unido al borde transversal final de la línea.</dd> + <dt><code>center</code></dt> + <dd>Los límites del elemento flexible son centrados dentro de la línea en su eje transversal. Si el tamaño transversal del elemento es superior al del contenedor, se excederá por igual hacia ambas direcciones.</dd> + <dt><code>baseline</code></dt> + <dd>Todos los elementos flexibles son ajustados de modo que sus bases estén alineadas. El elemento con la distancia mayor entre su límite transversal inicial y su base es combinado con el borde transversal de la línea.</dd> + <dt><code>stretch</code></dt> + <dd>Las elementos flexibles son estirados de modo que el tamaño transversal de sus límites sea el mismo de la línea, manteniendo sus restricciones de anchura y altura.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Box Alignment', '#align-self-property', 'align-self') }}</td> + <td>{{ Spec2('CSS3 Box Alignment') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 36.0</td> + <td>{{CompatGeckoDesktop("20.0")}}<sup>[1]</sup></td> + <td>11.0</td> + <td>12.10</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>12.10</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox soporta solamente flexbox de una línea hasta Firefox 27. Para activar soporte a flexbox, en Firefox 18 y 19, el usuario debe cambiar la preferencia <code>layout.css.flexbox.enabled</code> a <code>true</code> en la página <code>about:config</code>.</p> + +<p>Además del soporte sin prefijo, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) añadió soporte a la versión con prefijo <code>-webkit</code> de la propiedad, por razones de compatibilidad, usando la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado <code>false</code>. Desde Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) el valor predeterminado de esta preferencia es <code>true</code>.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS" title="CSS/Using_CSS_flexible_boxes">Usando las cajas flexibles CSS</a></li> +</ul> diff --git a/files/es/web/css/all/index.html b/files/es/web/css/all/index.html new file mode 100644 index 0000000000..0bb60f5174 --- /dev/null +++ b/files/es/web/css/all/index.html @@ -0,0 +1,219 @@ +--- +title: all +slug: Web/CSS/all +tags: + - Cascada CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/all +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad de forma reducida <code><strong>all</strong></code> restaura todas las propiedades, excepto {{cssxref("unicode-bidi")}} y {{cssxref("direction")}}, a su valor inicial o heredado.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">all: initial; +all: inherit; +all: unset; + +/* CSS Cascading and Inheritance Level 4 */ +all: revert; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>initial</code></dt> + <dd>Esta palabra clave indica que se cambien todas las propiedades aplicables al elemento, o a su elemento padre, a sus valores iniciales. Los valores de {{cssxref("unicode-bidi")}} y {{cssxref("direction")}} no son afectados.</dd> + <dt><code>inherit</code></dt> + <dd>Esta palabra clave indica que se cambien todas las propiedades aplicables al elemento, o a su elemento padre, a los valores de los elementos padre. Los valores de {{cssxref("unicode-bidi")}} y {{cssxref("direction")}} no son afectados.</dd> + <dt><code>unset</code></dt> + <dd>Esta palabra clave indica que se cambien todas las propiedades aplicables al elemento, o a su elemento padre, a los valores de los elementos padres, si son heredadas, o a sus valores iniciales en caso contrario. Los valores de {{cssxref("unicode-bidi")}} y {{cssxref("direction")}} no son afectados.</dd> + <dt><code>revert</code></dt> + <dd>Si el valor en cascada de una propiedad es la palabra clave revert, el comportamiento dependerá del origen al que pertenece la declaración: + <dl> + <dt>user-agent origin</dt> + <dd>Equivalente a <code>unset</code>.</dd> + <dt>user origin</dt> + <dd>Revierte la cascada al nivel del agente usuario, para que el valor especificado sea calculado como si no se hubieran especificado reglas a nivel de autor o a nivel de usuario para esta propiedad.</dd> + <dt>author origin</dt> + <dd>Revierte la cascada a nivel del usuario, para que el valor especificado sea calculado como si no se hubieran especificado reglas a nivel de autor para esta propiedad. Para permitir la reversión, este origen incluye los orígenes de Override y Animation.</dd> + </dl> + </dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p id="HTML"><strong>HTML</strong></p> + +<pre class="brush: html"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<p id="CSS"><strong>CSS</strong></p> + +<pre class="brush: css">html { + font-size: small; + background-color: #F0F0F0; + color: blue; +} + +blockquote { + background-color: skyblue; + color: red; +} +</pre> + +<p id="Results">Su resultado es:</p> + +<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;"> +<h4 id="Sin_propiedad_all">Sin propiedad <code>all</code></h4> + +<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<pre class="brush: css hidden">html { font-size: small; background-color: #F0F0F0; color:blue; } +blockquote { background-color: skyblue; color: red; }</pre> +{{EmbedLiveSample("ex0", "200", "125")}} + +<p>El elemento {{HTMLElement("blockquote")}} usa los estilos predeterminados del navegador junto con colores de fondo y de texto específicos. También se comporta como elemento <em>block</em>: el texto que le sigue está debajo de él.</p> +</div> + +<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;"> +<h4 id="allunset"><code>all:unset</code></h4> + +<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<pre class="brush: css hidden">html { font-size: small; background-color: #F0F0F0; color:blue; } +blockquote { background-color: skyblue; color: red; } +blockquote { all: unset; }</pre> +{{EmbedLiveSample("ex1", "200", "125")}} + +<p>El elemento {{HTMLElement("blockquote")}} no usa los estilos predeterminados del navegador: ahora es un elemento <em>inline</em> (valor inicial), su propiedad {{cssxref("background-color")}} es <code>transparent</code> (valor inicial), pero su propiedad {{cssxref("font-size")}} sigue siendo <code>small</code> (valor heredado) y su propiedad {{cssxref("color")}} es <code>blue</code> (valor heredado).</p> +</div> + +<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;"> +<h4 id="allinitial"><code>all:initial</code></h4> + +<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<pre class="brush: css hidden">html { font-size: small; background-color: #F0F0F0; color:blue; } +blockquote { background-color: skyblue; color: red; } +blockquote { all: initial; }</pre> +{{EmbedLiveSample("ex2", "200", "125")}} + +<p>El elemento {{HTMLElement("blockquote")}} no usa los estilos predeterminados del navegador: ahora es un elemento <em>inline</em> element (valor inicial), su propiedad {{cssxref("background-color")}} es <code>transparent</code> (valor inicial), su propiedad {{cssxref("font-size")}} es <code>normal</code> (valor inicial) y su propiedad {{cssxref("color")}} es <code>black</code> (valor inicial).</p> +</div> + +<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;"> +<h4 id="allinherit"><code>all:inherit</code></h4> + +<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre> + +<pre class="brush: css hidden">html { font-size: small; background-color: #F0F0F0; color:blue; } +blockquote { background-color: skyblue; color: red; } +blockquote { all: inherit; }</pre> +{{EmbedLiveSample("ex3", "200", "125")}} + +<p>El elemento {{HTMLElement("blockquote")}} no usa los estilos predeterminados del navegador: ahora es un elemento <em>block</em> (valor heredado de su contenedor {{HTMLElement("div")}}), su propiedad {{cssxref("background-color")}} es <code>transparent</code> (valor heredado), su propiedad {{cssxref("font-size")}} es <code>small</code> (valor heredado) y su propiedad {{cssxref("color")}} es <code>blue</code> (valor heredado).</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Cascade', '#all-shorthand', 'all') }}</td> + <td>{{ Spec2('CSS4 Cascade') }}</td> + <td>Añadido el valor <code>revert</code>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}</td> + <td>{{ Spec2('CSS3 Cascade') }}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome("37")}} </td> + <td>{{ CompatGeckoDesktop("27") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("24")}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>revert</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("27")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>revert</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9.3</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<p>Los valores de las propiedades CSS: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, y {{cssxref("revert")}}.</p> diff --git a/files/es/web/css/angle/index.html b/files/es/web/css/angle/index.html new file mode 100644 index 0000000000..8da1e5173d --- /dev/null +++ b/files/es/web/css/angle/index.html @@ -0,0 +1,139 @@ +--- +title: <angle> +slug: Web/CSS/angle +tags: + - Ángulo +translation_of: Web/CSS/angle +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Summary">Summary</h2> + +<p>El tipo de dato <code><angle></code> de <a href="/es/docs/Web/CSS" title="CSS">CSS</a> representa valores de ángulo. Los valores positivos representan ángulos en sentido de las agujas del reloj, mientras los valores negativos representan ángulos en sentido opuesto. Su sintáxis es un valor de tipo numérico ({{cssxref("<number>")}}) seguido inmediatamente por la unidad (<code>deg</code>, <code>grad</code>, <code>rad</code> o <code>turn</code>). Al igual que cualquier otra dimensión en CSS, no debe haber espacio entre la unidad y el número.</p> + +<p>Para propiedades estáticas y una unidad dada, un ángulo puede ser representado por muchos valores: <code>90deg</code> y <code>-270deg</code>, o <code>1turn</code> y <code>4turn</code> representan la misma posición final. Sin embargo, para posiciones dinámicas, como aplicar una transición ({{ cssxref("transition") }}) en la propiedad {{ cssxref("transform") }}, el efecto será diferente.</p> + +<p><span style="line-height: 1.5;">Se deben usar las siguientes unidades:</span></p> + +<ul> + <li><code><a id="deg">deg</a></code>, que representa un ángulo en <a class="external" href="https://es.wikipedia.org/wiki/Grado_sexagesimal" title="http://en.wikipedia.org/wiki/Degree_%28angle%29">grados</a>. Un círculo completo equivale a <code>360deg</code>. Ejemplos: <code>0deg</code>, <code>90deg</code>, <code>360deg</code>.</li> + <li><code><a id="grad">grad</a></code>, que representa un ángulo en <a class="external" href="https://es.wikipedia.org/wiki/Grado_centesimal" title="http://en.wikipedia.org/wiki/Gradian">grado centesimal</a>. Un circulo completo equivale a <code>400grad</code>. Ejemplos: <code>0grad</code>, <code>100grad</code>, <code>400grad</code>.</li> + <li><code><a id="rad">rad</a></code>, que representa un ángulo en <a class="external" href="https://es.wikipedia.org/wiki/Radi%C3%A1n" title="http://en.wikipedia.org/wiki/Radian">radianes</a>. Un círculo completo equivale a 2π radianes, que se aproxima a <code>6.2832rad</code>. <code>1rad</code> es 180/π grados. Ejemplos: <code>0rad</code>, <code>1.0708rad</code>, <code>6.2832rad</code>.</li> + <li><code><a id="turn">turn</a></code>, que representa el número de vueltas del ángulo. Un círculo completo equivale a <code>1turn</code>. Ejemplos: <code>0turn</code>, <code>0.25turn</code>, <code>1turn</code>.</li> +</ul> + +<p>Aun cuando todas las unidades representan lo mismo para el valor <code>0</code>, la unidad no debe ser omitida en ese caso, puesto que no es un valor de tipo {{cssxref("<length>")}}: <code>0</code> es inválido, y no representa <code>0deg</code>, <code>0grad</code>, <code>0rad</code> o <code>0turn</code>.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<table style="width: 100%;"> + <tbody> + <tr> + <td><img alt="Angle90.png" class="default internal" src="/@api/deki/files/5704/=Angle90.png"></td> + <td> + <p>Ángulo recto: <code>90deg = 100grad = 0.25turn</code> <code style="white-space: nowrap;">≈</code><code> 1.5708rad</code></p> + </td> + </tr> + <tr> + <td><img alt="Angle180.png" class="default internal" src="/@api/deki/files/5706/=Angle180.png"></td> + <td>Ángulo llano: <code>180deg = 200grad = 0.5turn</code><code> </code><code style="white-space: nowrap;">≈</code><code> 3.1416rad</code></td> + </tr> + <tr> + <td><img alt="AngleMinus90.png" class="default internal" src="/@api/deki/files/5707/=AngleMinus90.png"></td> + <td>Ángulo recto (hacia la izquierda): <code>-90deg = -100grad = -0.25turn</code> <code style="white-space: nowrap;">≈</code><code> -1.5708rad</code></td> + </tr> + <tr> + <td><img alt="Angle0.png" class="default internal" src="/@api/deki/files/5708/=Angle0.png"></td> + <td> + <p>Ángulo nulo: <code>0deg = 0grad = 0turn</code><code> </code><code style="white-space: nowrap;">=</code><code> 0rad</code></p> + + <div class="note"><strong>Nota:</strong> <code>0</code> no es un valor de ángulo válido.</div> + </td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Values', '#angles', '<angle>') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>2 (528.17)</td> + <td>3.6 (1.9.2)</td> + <td>9.0</td> + <td>{{ CompatNo }}</td> + <td>4.0 (528.17)</td> + </tr> + <tr> + <td><code>turn</code> unit</td> + <td>{{ CompatNo }}</td> + <td>13.0</td> + <td>9.0</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown }}</td> + </tr> + <tr> + <td><code>turn</code> unit</td> + <td>{{ CompatNo }}</td> + <td>13.0</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/animation-delay/index.html b/files/es/web/css/animation-delay/index.html new file mode 100644 index 0000000000..6edea7e4f2 --- /dev/null +++ b/files/es/web/css/animation-delay/index.html @@ -0,0 +1,125 @@ +--- +title: animation-delay +slug: Web/CSS/animation-delay +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-delay +--- +<p>{{ CSSRef() }}</p> + +<p>{{ SeeCompatTable() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/en/CSS" title="CSS">CSS</a> <code>animation-delay</code> especifica el tiempo de retardo que debe transcurrir antes de comenzar la animación. Esto permite que la secuencia de animación no comience nada más ser aplicada a un elemento.</p> + +<p>El valor 0, que es el valor por defecto, indica que la animación debería comenzar inmediatamente. Usando otro valor, definimos el retardo entre el momento en que el elemento recibe la animación y el comienzo de la secuencia de la misma.</p> + +<p>Si especificamos un valor negativo, la animación comenzará inmediatamente, pero no desde el principio de la misma, sino desde el punto que le hemos indicado. Por ejemplo, si ponemos un retardo de -1s, la animación se iniciará inmediatamente pero comenzará en el segundo 1 de la secuencia.</p> + +<p>Si se especifica un valor negativo para el retraso de la animación, pero el valor de inicio es implícito, el valor inicial es tomado desde el momento en que la animación es aplicada al elemento.</p> + +<p>A menudo es conveniente usar la propiedad abreviada {{ cssxref("animation") }} para ajustar las propiedades de animación una sola vez.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="twopartsyntaxbox">Gramática formal: <a href="/en-US/docs/CSS/time"><time></a> [, <a href="/en-US/docs/CSS/time"><time></a>]* +</pre> + +<pre>animation-delay: 3s +animation-delay: 2s, 4ms +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><time></code></dt> + <dd>El espacio de tiempo que debe transcurrir desde que la animación se aplica al elemento y el comienzo de la misma. Podemos especificarlo en segundos (usando <code>s</code>) o milisegundos (usando <code>ms</code>). Si no especificamos la unidad, la sentencia no será válida.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Visitar <a href="/es/CSS/Usando_animaciones_CSS" title="en/CSS/CSS_animations">animaciones CSS</a> para ver algunos ejemplos.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations', '#animation-delay', 'animation-delay') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }} {{ CompatGeckoDesktop("16.0") }}</td> + <td>10</td> + <td>12{{ property_prefix("-o") }}<br> + 12.5 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>4.0{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }} {{ CompatGeckoMobile("16.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>12{{ property_prefix("-o") }}</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Consulte_también">Consulte también</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="en/CSS/CSS_animations">Usando animaciones CSS</a></li> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> +</ul> diff --git a/files/es/web/css/animation-direction/index.html b/files/es/web/css/animation-direction/index.html new file mode 100644 index 0000000000..cdc0973157 --- /dev/null +++ b/files/es/web/css/animation-direction/index.html @@ -0,0 +1,167 @@ +--- +title: animation-direction +slug: Web/CSS/animation-direction +tags: + - CSS + - CSS Animations + - CSS Property + - Experemiental + - Reference +translation_of: Web/CSS/animation-direction +--- +<p>{{ CSSRef() }}</p> + +<p>{{ SeeCompatTable() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <code>animation-direction</code> indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.</p> + +<p>Es conveniente usar la propiedad abreviada {{ cssxref("animation") }} para ajustar todas las propiedades de animación una sola vez.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="twopartsyntaxbox">Gramática formal: [ normal | reverse | alternate | alternate-reverse ] [, [ normal | reverse | alternate | alternate-reverse ] ]* +</pre> + +<pre>animation-direction: normal +animation-direction: reverse +animation-direction: alternate +animation-direction: alternate-reverse +animation-direction: normal, reverse +animation-direction: alternate, reverse, normal +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Cada vez que termina un ciclo, la animación se reinicia al estado inicial y comienza desde el principio. Este es el comportamiento por defecto.</dd> + <dt><code>alternate</code></dt> + <dd>La animación, al terminar un ciclo, invierte su dirección. Es decir, los pasos de la animación se ejecutan al revés. Además, las funciones de tiempo también se invierten; por ejemplo una animación <code>ease-in</code> se convierte en una animación con <code>ease-out</code> cuando se reproduce al revés. El contador que determina si la iteración es par o impar comienza en uno.</dd> + <dt><code>reverse</code></dt> + <dd>Cada ciclo de la animación se reproduce al revés . Cada vez que comienza un ciclo de animación, ésta se posiciona en el estado final y comienza desde ahí.</dd> + <dt><code>alternate-reverse</code></dt> + <dd>Es similar a<code> alternate</code> pero la animación se reproduce al revés. Es decir la animación se posiciona en el estado final, comienza a reproducirse al reves y, cuando llega al inicio vuelve a reproducirse de forma normal hasta llegar al final de la secuencia. Y vuelve otra vez a repetirse. El contador que determina si la iteración es par o impar comienza en uno.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Visitar <a href="/es/CSS/Usando_animaciones_CSS" title="en/CSS/CSS_animations">animaciones CSS</a> para ver algunos ejemplos.</p> + +<p>Especificaciones</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations', '#animation-direction', 'animation-direction') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td>For the two new values, see the <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2011May/0090.html">W3C discussion</a>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10</td> + <td>12{{ property_prefix("-o") }}<br> + 12.5 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>4.0{{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td><code>reverse</code></td> + <td>19 {{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("16.0") }}</td> + <td>10</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>alternate-reverse</code></td> + <td>19 {{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("16.0") }}</td> + <td>10</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("16.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>reverse</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoMobile("16.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>alternate-reverse</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoMobile("16.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Consulte_también">Consulte también</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_animations">Usando animaciones CSS</a></li> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> +</ul> diff --git a/files/es/web/css/animation-duration/index.html b/files/es/web/css/animation-duration/index.html new file mode 100644 index 0000000000..40f9fa5382 --- /dev/null +++ b/files/es/web/css/animation-duration/index.html @@ -0,0 +1,127 @@ +--- +title: animation-duration +slug: Web/CSS/animation-duration +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-duration +--- +<p>{{ CSSRef() }}</p> + +<p>{{ SeeCompatTable() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <code>animation-duration</code> indica la cantidad de tiempo que la animación tarda en completar un ciclo (duración).</p> + +<p>El valor por defecto es <code>0s</code>, que indica que la animación no debe producirse.</p> + +<p>Es conveniente usar la propiedad abreviada {{ cssxref("animation") }} para ajustar todas las propiedades de animación a la vez</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Gramatica formal</a>: {{csssyntax("animation-duration")}} +</pre> + +<pre>animation-duration: 6s +animation-duration: 120ms +animation-duration: 1s, 15s +animation-duration: 10s, 30s, 230ms +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><time></code></dt> + <dd>El tiempo que tarda la animación en terminar su secuencia. Podemos especificarlo en segundos (usando <code>s</code>) o milisegundos (usando <code>ms</code>). Si no especificamos la unidad, la sentencia no será válida.</dd> +</dl> + +<div class="note"><strong>Nota:</strong> No acepta valores negativos, si los ponemos la sentencia se ignorará. Algunas implementaciones antiguas (con prefijos) pueden considerar los valores negativos como si fueran <code>0s</code>.</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Visitar <a href="/es/CSS/Usando_animaciones_CSS" title="en/CSS/CSS_animations">CSS animations</a> para ver algunos ejemplos.</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre navegadores</h2> + +<p style="">{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table" style="height: 197px; width: 921px;"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10</td> + <td>12{{ property_prefix("-o") }}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>4.0{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.0{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("16.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>4.2{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Consultar_también">Consultar también</h2> + +<ul> + <li><a href="/es/docs/CSS/Usando_animaciones_CSS" title="Tutorial about CSS animations">Usando animaciones CSS</a></li> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> +</ul> diff --git a/files/es/web/css/animation-fill-mode/index.html b/files/es/web/css/animation-fill-mode/index.html new file mode 100644 index 0000000000..1c1f251d22 --- /dev/null +++ b/files/es/web/css/animation-fill-mode/index.html @@ -0,0 +1,233 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-fill-mode +--- +<div>{{ CSSRef() }}</div> + +<div>{{ SeeCompatTable() }}</div> + +<h2 id="Definición">Definición</h2> + +<p>La propiedad <a href="/en/CSS" title="CSS">CSS</a> <code>animation-fill-mode</code> especifica el modo en que una animación CSS aplica sus estilos, estableciendo su persistencia y estado final tras su ejecución.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("animation-fill-mode")}} +</pre> + +<pre>animation-fill-mode: none +animation-fill-mode: forwards +animation-fill-mode: backwards +animation-fill-mode: both + +<strong>El caracter # indica que pueden darse varios valores separados por comas. +Cada uno de los valores se aplicará en el mismo orden en que se ha declarado en la propiedad 'animation'</strong> +animation-fill-mode: none, backwards +animation-fill-mode: both, forwards, none +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>La animación no aplicará los estilos antes ni después de su ejecución.</dd> + <dt><code>forwards</code></dt> + <dd>El objeto sobre el que se aplica la animación quedará con los valores y estilos que le aplique el último keyframe de la ejecución de la animación. El último valor dependerá del valor de {{ cssxref("animation-direction") }} y {{ cssxref("animation-iteration-count") }}: + <table class="standard-table"> + <thead> + <tr> + <th scope="col"><code>animation-direction</code></th> + <th scope="col"><code>animation-iteration-count</code></th> + <th scope="col">ultimo keyframe encontrado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>normal</code></td> + <td>even o odd</td> + <td><code>100%</code> or <code>to</code></td> + </tr> + <tr> + <td><code>reverse</code></td> + <td>even o odd</td> + <td><code>0%</code> or <code>from</code></td> + </tr> + <tr> + <td><code>alternate</code></td> + <td>even</td> + <td><code>0%</code> or <code>from</code></td> + </tr> + <tr> + <td><code>alternate</code></td> + <td>odd</td> + <td><code>100%</code> or <code>to</code></td> + </tr> + <tr> + <td><code>alternate-reverse</code></td> + <td>even</td> + <td><code>100%</code> or <code>to</code></td> + </tr> + <tr> + <td><code>alternate-reverse</code></td> + <td>odd</td> + <td><code>0%</code> or <code>from</code></td> + </tr> + </tbody> + </table> + </dd> + <dt><code>backwards</code></dt> + <dd>La animación aplicará los valores definidos en el primer <a href="/en-US/docs/CSS/@keyframes">keyframe</a> tan pronto como se aplique al objeto, y los retendrá durante el tiempo de {{ cssxref("animation-delay") }}. El primer keyframe dependerá del valor de {{ cssxref("animation-direction") }}: + <table class="standard-table"> + <thead> + <tr> + <th scope="col"><code>animation-direction</code></th> + <th scope="col">primer keyframe</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>normal</code> o <code>alternate</code></td> + <td><code>0%</code> or <code>from</code></td> + </tr> + <tr> + <td><code>reverse</code> o <code>alternate-reverse</code></td> + <td><code>100%</code> or <code>to</code></td> + </tr> + </tbody> + </table> + </dd> + <dt><code>both</code></dt> + <dd>La animación seguirá las reglas de las opciones forwards y backwards, extendiendo las propiedades de la animación en ambas direcciones.</dd> +</dl> + +<h2 id="Example" name="Example">Ejemplos</h2> + +<p>Puedes ver el efecto de animation-fill-mode en el siguiente ejemplo. Para animaciones que iteran de forma infinita, puede que quieras que al final de cada iteración queden en su estado final mejor que en el estado inicial. </p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Mueve el raton sobre la caja gris</p> +<div class="demo"> + <div class="grows">Esto sólo crece</div> + <div class="growsandstays">Esto crece y se queda grande</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.demo { + border-top: 100px solid #ccc; + height: 300px; + font-family: sans-serif; +} +@keyframes grow { + 0% { font-size: 0 } + 100% { font-size: 40px } +} +@-webkit-keyframes grow { + 0% { font-size: 0 } + 100% { font-size: 40px } +} +.demo:hover .grows { + animation-name: grow; + animation-duration: 3s; + -webkit-animation-name: grow; + -webkit-animation-duration: 3s; +} +.demo:hover .growsandstays { + animation-name: grow; + animation-duration: 3s; + animation-fill-mode: forwards; + -webkit-animation-name: grow; + -webkit-animation-duration: 3s; + -webkit-animation-fill-mode: forwards; +}</pre> + +<p>{{ EmbedLiveSample('Example',700,300) }}</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10</td> + <td>12{{ property_prefix("-o") }}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>4.0{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("16.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Usando CSS Animations</a></li> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> +</ul> diff --git a/files/es/web/css/animation-iteration-count/index.html b/files/es/web/css/animation-iteration-count/index.html new file mode 100644 index 0000000000..da5a5792ba --- /dev/null +++ b/files/es/web/css/animation-iteration-count/index.html @@ -0,0 +1,126 @@ +--- +title: animation-iteration-count +slug: Web/CSS/animation-iteration-count +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-iteration-count +--- +<div>{{ CSSRef() }}</div> + +<div>{{ SeeCompatTable() }}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/en/CSS" title="CSS">CSS</a> <code style="font-style: normal;">animation-iteration-count</code> define el numero de veces que un ciclo de animación debe ser ejecutado antes de detenerse.</p> + +<p>A menudo es conveniente utilizar la propiedad {{ cssxref("animation") }} para ajustar todas las propiedades de animación a la vez.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="twopartsyntaxbox">Sintaxis formal: {{csssyntax("animation-iteration-count")}} +</pre> + +<pre>animation-iteration-count: infinite; +animation-iteration-count: 3; +animation-iteration-count: 2.3; + +animation-iteration-count: 2, 0, infinite; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>infinite</code></dt> + <dd>La animación se repetirá siempre.</dd> + <dt><code><number></code></dt> + <dd>El número de veces que la animación debe repetir: es 1 por defecto. Los valores negativos no son validos. Puede especificar valores no enteros para ejecutar parte de un ciclo de animación (por ejemplo 0.5 se ejecutara la mitad del ciclo de la animación).</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Ver ejemplos <a href="/en-US/docs/CSS/Using_CSS_animations">CSS animations</a>.</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10 </td> + <td>12 {{ property_prefix("-o") }}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>4.0{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristicas</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("16.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Usando animaciones CSS</a></li> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> +</ul> diff --git a/files/es/web/css/animation-name/index.html b/files/es/web/css/animation-name/index.html new file mode 100644 index 0000000000..c74f2cc301 --- /dev/null +++ b/files/es/web/css/animation-name/index.html @@ -0,0 +1,134 @@ +--- +title: animation-name +slug: Web/CSS/animation-name +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-name +--- +<div>{{CSSRef}}</div> + +<div>{{SeeCompatTable}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <span style="font-family: consolas,monaco,andale mono,monospace;">animation-name especifica una lista de animaciones que se deben aplicar al elemento seleccionado. Cada nombre indica un</span> {{cssxref("@keyframes")}} esta regla define los valores de las propiedades de la secuencia de animación.</p> + +<p>A menudo es conveniente utilizar la propiedad abrevieda {{cssxref("animation")}} para ajustar todas las propiedades de animación a la vez.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintaxis formal</a>: {{csssyntax("animation-name")}}</pre> + +<pre>animation-name: none; +animation-name: test_05; +animation-name: -specific; +animation-name: sliding-vertically; + +animation-name: test1; +animation-name: test1, animation4; +animation-name: none, -moz-specific, sliding; + +animation-name: <a href="/en-US/docs/Web/CSS/initial">initial</a>; +animation-name: <a href="/en-US/docs/Web/CSS/inherit">inherit</a>; +animation-name: <a href="/en-US/docs/Web/CSS/unset">unset</a>; +</pre> + +<h3 id="Valores">Valores</h3> + +<p><code><single-animation-name></code> es una de las siguientes palabras clave:</p> + +<dl> + <dt><code>none</code></dt> + <dd>Es una palabra clave especial que denota que no hay fotogramas (keyframes) clave. Se puede utilizar para desactivar una animación sin cambiar el orden de los otros identificadores, o para desactivar animaciones procedentes de las cascada.</dd> + <dt>{{cssxref("custom-ident","<custom-ident>")}}</dt> + <dd>Cadena que identifica la animación. Este identificador está compuesto por una combinación de letras mayúsculas y minúsculas de la "A"a la "Z", números del 0 al 9, guiones bajos "_" y/o guiones "-". el primer caracter siempre debe ser una letra, ni un numero, excepto un guión (no se pueden poner dos guiones seguidos o más al principio del nombre.) No puede usarse <code style="font-style: normal;">none</code>, <code style="font-style: normal;">unset</code>, <code style="font-style: normal;">initial</code>, o <code style="font-style: normal;">inherit</code> ni ninguna combinación de estos casos.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Ver ejemplos <a href="/en-US/docs/CSS/CSS_animations" title="CSS/CSS_animations">CSS animations</a>.</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad en navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10 </td> + <td>12 {{property_prefix("-o")}}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoMobile("16.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Usando CSS animations</a></li> + <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> +</ul> diff --git a/files/es/web/css/animation-play-state/index.html b/files/es/web/css/animation-play-state/index.html new file mode 100644 index 0000000000..ea24e449de --- /dev/null +++ b/files/es/web/css/animation-play-state/index.html @@ -0,0 +1,134 @@ +--- +title: animation-play-state +slug: Web/CSS/animation-play-state +translation_of: Web/CSS/animation-play-state +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="sect1"> </h2> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>animation-play-state</code></strong> determina si una animación está en ejecución o en pausa. Puede ser consultada para determinar si la animación se está ejecutando. Además, su valor se puede establecer para pausar y reanudar una animación.</p> + +<p>Reanudando una animación pausada, ésta empezará en el punto en el que fue pausada, en vez de empezar desde el principio.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">/* Single animation */ +animation-play-state: running; +animation-play-state: paused; + +/* Multiple animations */ +animation-play-state: paused, running, running; + +/* Global values */ +animation-play-state: inherited; +animation-play-state: initial; +animation-play-state: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>running</code></dt> + <dd>La animación se está ejecutando.</dd> + <dt><code>paused</code></dt> + <dd>La animación está pausada.</dd> +</dl> + +<h3 id="Syntax_formal">Syntax formal</h3> + +<pre class="syntaxbox"><code>{{csssyntax}}</code> +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Visita <a href="https://developer.mozilla.org/es/CSS/Usando_animaciones_CSS" title="en/CSS/CSS_animations">animaciones CSS</a> para ver algunos ejemplos.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Definición incial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatChrome(43.0)}}</td> + <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>12 {{property_prefix("-o")}}<br> + 12.10</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect2"> </h2> + +<h2 id="Consulte_también">Consulte también</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS developer guide about CSS animations">Usando animaciones CSS</a></li> + <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> +</ul> diff --git a/files/es/web/css/animation-timing-function/index.html b/files/es/web/css/animation-timing-function/index.html new file mode 100644 index 0000000000..3ab99bb113 --- /dev/null +++ b/files/es/web/css/animation-timing-function/index.html @@ -0,0 +1,141 @@ +--- +title: animation-timing-function +slug: Web/CSS/animation-timing-function +translation_of: Web/CSS/animation-timing-function +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code><strong>animation-timing-function</strong></code> especifica cómo una animación CSS debe avanzar sobre la duración de cada ciclo. Los posibles valores son una o varias {{cssxref("<timing-function>")}}.</p> + +<p>Para animaciones con keyframes, la timing function se aplica entre los <a href="/en-US/docs/Web/CSS/@keyframes" title="/en-US/docs/CSS/@keyframes">keyframes</a> en lugar de sobre toda la animación. Es decir, se aplica al comienzo del keyframe y al final del mismo.</p> + +<p>Una timing function definida dentro de un keyframe afecta a ese keyframe. Si no está definida para el keyframe, se aplica la timing function para la animación en general.</p> + +<p>A menudo, es conveniente usar la propiedad abreviada {{cssxref("animation")}} para ajustar las propiedades de animación una sola vez.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">/* Keyword values */ +animation-timing-function: ease; +animation-timing-function: ease-in; +animation-timing-function: ease-out; +animation-timing-function: ease-in-out; +animation-timing-function: linear; +animation-timing-function: step-start; +animation-timing-function: step-end; + +/* Function values */ +animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); +animation-timing-function: steps(4, end); + +/* Multiple animations */ +animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); + +/* Global values */ +animation-timing-function: inherited; +animation-timing-function: initial; +animation-timing-function: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><timingfunction></code></dt> + <dd>Cada {{cssxref("<timing-function>")}} representa la timing function vinculada a la propiedad correspondiente a animar, como se define en {{cssxref ("animación-propiedad")}}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Visita <a href="https://developer.mozilla.org/es/CSS/Usando_animaciones_CSS" title="en/CSS/CSS_animations">animaciones CSS</a> para ver algunos ejemplos.</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td>Definición incial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatChrome(43.0)}}</td> + <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>12 {{property_prefix("-o")}}<br> + 12.10</td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>12{{property_prefix("-o")}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Consulte_también">Consulte también</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS developer guide about CSS animations">Usando animaciones CSS</a></li> + <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li> +</ul> diff --git a/files/es/web/css/animation/index.html b/files/es/web/css/animation/index.html new file mode 100644 index 0000000000..23b241a346 --- /dev/null +++ b/files/es/web/css/animation/index.html @@ -0,0 +1,127 @@ +--- +title: animation +slug: Web/CSS/animation +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation +--- +<p>{{CSSRef}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <code>animation</code> de <a href="/es/CSS" title="CSS">CSS</a> es una <a href="/en/CSS/Shorthand_properties" title="Shorthand properties">propiedad abreviada (shorthand property) </a>para {{ cssxref("animation-name") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-timing-function") }}, {{ cssxref("animation-delay") }}, {{ cssxref("animation-iteration-count") }} y {{ cssxref("animation-direction") }}.</p> + +<p>La <a href="/es/docs/CSS/Transiciones_de_CSS#Propiedades_que_pueden_ser_animadas" title="en/CSS/CSS_transitions#Properties_that_can_be_animated">lista de propiedades CSS que pueden ser animadas </a>está disponible; cabe señalar que estas son las mismas propiedades soportadas por <a href="/es/docs/CSS/Transiciones_de_CSS" title="en/CSS/CSS_transitions">CSS transitions</a>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="eval syntaxbox">Formal grammar: [ <'animation-name'> || <'animation-duration'> || <a href="/en/CSS/timing-function" title="en/CSS/timing-function"><'animation-timing-function'></a> || <'animation-delay'> || + <'animation-iteration-count'> || <'animation-direction'> || <'animation-fill-mode'> ] + [, [<'animation-name'> || <'animation-duration'> || <a href="/en/CSS/timing-function" title="en/CSS/timing-function"><'animation-timing-function'></a> || <'animation-delay'> || + <'animation-iteration-count'> || <'animation-direction'> || <'animation-fill-mode'>] ]* +</pre> + +<h2 id="Ejemplos"><nobr>Ejemplos</nobr></h2> + +<p>Consulte <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a> para ver los ejemplos.</p> + +<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2> + +<p>Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o <span class="short_text" id="result_box" lang="es"><span>síndrome de sensibilidad escotópica</span></span>.</p> + +<p>Por favor, considerá ofrecer un mecanismo para pausar o deshabilitar las animaciones, como utilizando <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query.</a></p> + +<p>Para más información (en inglés):</p> + +<ul> + <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li> + <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li> + <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations', '#animation', 'animation') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility"><nobr>Compatibilidad con navegadores</nobr></h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10</td> + <td>12{{ property_prefix("-o") }}<br> + 12.5 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>4.0{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("16.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>iOS 2.0{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Consulte_también"><nobr>Consulte también</nobr></h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="en/CSS/CSS_animations">Usando animaciones CSS</a></li> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> +</ul> diff --git a/files/es/web/css/appearance/index.html b/files/es/web/css/appearance/index.html new file mode 100644 index 0000000000..b9bb3a62cc --- /dev/null +++ b/files/es/web/css/appearance/index.html @@ -0,0 +1,1556 @@ +--- +title: '-moz-appearance (-webkit-appearance)' +slug: Web/CSS/appearance +tags: + - Apariencia CSS + - CSS Referencia(2) + - No-estándar +translation_of: Web/CSS/appearance +--- +<div>{{non-standard_header}}{{CSSRef}}</div> + +<p>La propiedad CSS <code>-moz-appearance</code> se utiliza en Gecko (Firefox) para visualizar un elemento utilizando una plataforma nativa basada en el estilo del tema del sistema operativo.</p> + +<p>Esta propiedad es frecuentemente utilizada en hojas de estilo <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial">XUL</a> para diseñar widgets personalizados con un estilo apropiado a la plataforma. También se utiliza en las implementaciones <a href="/en-US/docs/XBL">XBL</a> de los widgets que se arman en la plataforma Mozilla.</p> + +<div class="note"> +<p><em>No utilizar</em> esta propiedad en sitios Web: no sólo porque no es estándar, sinó porque su comportamiento cambia de un navegador a otro. Incluso la palabra clave <code>none</code> no tiene el mismo comportamiento en cada elemento de formulario a través de diferentes navegadores, y alguno no la soporta en absoluto.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush: css">/* Lista parcial de valores válidos en Gecko */ +-moz-appearance: none; +-moz-appearance: button; +-moz-appearance: checkbox; +-moz-appearance: scrollbarbutton-up; + +/* Lista parcial de valores válidos en WebKit/Blink */ +-webkit-appearance: none; +-webkit-appearance: button; +-webkit-appearance: checkbox; +-webkit-appearance: scrollbarbutton-up; +</pre> + +<h3 id="Valores">Valores</h3> + +<p><code><appearance></code> es una de las siguientes palabras clave:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Value</th> + <th>Demo</th> + <th>Description</th> + </tr> + <tr> + <td><code>none</code></td> + <td> + <div id="sampleNone" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: none; -webkit-appearance: none; color: black;}</pre> + + <pre class="brush:html"> + <div>Lorem</div> +</pre> + </div> + {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}</td> + <td>No special styling is applied. This is the default. Note, however, {{bug(649849)}} and {{bug(605985)}}.</td> + </tr> + <tr> + <td><code>button</code></td> + <td> + <div id="sampleButton" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: button; -webkit-appearance: button; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}</td> + <td>The element is drawn like a button.</td> + </tr> + <tr> + <td><code>button-arrow-down</code></td> + <td> + <div id="sampleButtonArrowDown" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>button-arrow-next</code></td> + <td> + <div id="sampleButtonArrowNext" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>button-arrow-previous</code></td> + <td> + <div id="sampleButtonArrowPrevious" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>button-arrow-up</code></td> + <td> + <div id="sampleButtonArrowUp" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>button-bevel</code></td> + <td> + <div id="sampleButtonBevel" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>button-focus</code></td> + <td> + <div id="sampleButtonFocus" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>caret</code></td> + <td> + <div id="sampleCaret" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: caret; -webkit-appearance: caret; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>checkbox</code></td> + <td> + <div id="sampleCheckbox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}</td> + <td>The element is drawn like a checkbox, including only the actual "checkbox" portion.</td> + </tr> + <tr> + <td><code>checkbox-container</code></td> + <td> + <div id="sampleCheckboxContainer" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}</td> + <td>The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox.</td> + </tr> + <tr> + <td><code>checkbox-label</code></td> + <td> + <div id="sampleCheckboxLabel" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>checkmenuitem</code></td> + <td> + <div id="sampleCheckmenuitem" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>dualbutton</code></td> + <td> + <div id="sampleDualButton" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>groupbox</code></td> + <td> + <div id="sampleGroupbox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>listbox</code></td> + <td> + <div id="sampleListBox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>listitem</code></td> + <td> + <div id="sampleListItem" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menuarrow</code></td> + <td> + <div id="sampleMenuArrow" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menubar</code></td> + <td> + <div id="sampleMenubar" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menucheckbox</code></td> + <td> + <div id="sampleMenuCheckbox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menuimage</code></td> + <td> + <div id="sampleMenuImage" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menuitem</code></td> + <td> + <div id="sampleMenuItem" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}</td> + <td>The element is styled as menu item, item is highlighted when hovered.</td> + </tr> + <tr> + <td><code>menuitemtext</code></td> + <td> + <div id="sampleMenuItemText" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menulist</code></td> + <td> + <div id="sampleMenuList" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menulist-button</code></td> + <td> + <div id="sampleMenuListButton" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}</td> + <td>The element is styled as a button that would indicate a menulist can be opened.</td> + </tr> + <tr> + <td><code>menulist-text</code></td> + <td> + <div id="sampleMenuListText" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menulist-textfield</code></td> + <td> + <div id="sampleMenuListTextfield" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}</td> + <td>The element is styled as the text field for a menulist. (Not implemented for the Windows platform)</td> + </tr> + <tr> + <td><code>menupopup</code></td> + <td> + <div id="sampleMenuPopup" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menuradio</code></td> + <td> + <div id="sampleMenuRadio" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>menuseparator</code></td> + <td> + <div id="sampleMenuSeparator" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>meterbar</code></td> + <td> + <div id="sampleMeterbar" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}</td> + <td>New in Fx 16.</td> + </tr> + <tr> + <td><code>meterchunk</code></td> + <td> + <div id="sampleMeterchunk" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}</td> + <td>New in Fx 16</td> + </tr> + <tr> + <td><code>progressbar</code></td> + <td> + <div id="sampleProgressBar" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}</td> + <td>The element is styled like a progress bar.</td> + </tr> + <tr> + <td><code>progressbar-vertical</code></td> + <td> + <div id="sampleProgressBarVertical" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>progresschunk</code></td> + <td> + <div id="sampleProgressChunk" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>progresschunk-vertical</code></td> + <td> + <div id="sampleProgressChunkVertical" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>radio</code></td> + <td> + <div id="sampleRadio" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: radio; -webkit-appearance: radio; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}</td> + <td>The element is drawn like a radio button, including only the actual "radio button" portion.</td> + </tr> + <tr> + <td><code>radio-container</code></td> + <td> + <div id="sampleRadioContainer" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}</td> + <td>The element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a radio button.</td> + </tr> + <tr> + <td><code>radio-label</code></td> + <td> + <div id="sampleRadioLabel" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>radiomenuitem</code></td> + <td> + <div id="sampleRadioMenuItem" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td>range</td> + <td> + <div id="sampleRange" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: range; -webkit-appearance: range; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td>range-thumb</td> + <td> + <div id="sampleRangeThumb" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: range-thumb; -webkit-appearance: range-thumb; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>resizer</code></td> + <td> + <div id="sampleResizer" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>resizerpanel</code></td> + <td> + <div id="sampleResizerPanel" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scale-horizontal</code></td> + <td> + <div id="sampleScaleHorizontal" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scalethumbend</code></td> + <td> + <div id="sampleThumbEnd" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scalethumb-horizontal</code></td> + <td> + <div id="sampleScaleThumbHorizontal" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scalethumbstart</code></td> + <td> + <div id="sampleScaleThumbStart" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scalethumbtick</code></td> + <td> + <div id="sampleScaleThumbTick" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scalethumb-vertical</code></td> + <td> + <div id="sampleScaleThumbVertical" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scale-vertical</code></td> + <td> + <div id="sampleScaleVertical" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; }</pre> + + <pre class="brush:html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbarbutton-down</code></td> + <td> + <div id="sampleScrollbarButtonDown" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbarbutton-left</code></td> + <td> + <div id="sampleScrollbarButtonLeft" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbarbutton-right</code></td> + <td> + <div id="sampleScrollbarButtonRight" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbarbutton-up</code></td> + <td> + <div id="sampleScrollbarButtonUp" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbarthumb-horizontal</code></td> + <td> + <div id="sampleScrollbarThumbHorizontal" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbarthumb-vertical</code></td> + <td> + <div id="sampleScrollbarThumbVertical" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbartrack-horizontal</code></td> + <td> + <div id="sampleScrollbarTrackHorizontal" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>scrollbartrack-vertical</code></td> + <td> + <div id="sampleScrollbarTrackVertical" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>searchfield</code></td> + <td> + <div id="sampleSearchField" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>separator</code></td> + <td> + <div id="sampleSeparator" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; }</pre> + + <pre class="bruh: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>sheet</code></td> + <td> + <div id="sampleSheet" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>spinner</code></td> + <td> + <div id="sampleSpinner" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>spinner-downbutton</code></td> + <td> + <div id="sampleSpinnerDownbutton" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>spinner-textfield</code></td> + <td> + <div id="sampleSpinnerTextfield" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>spinner-upbutton</code></td> + <td> + <div id="sampleSpinnerUpbutton" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>splitter</code></td> + <td> + <div id="sampleSplitter" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>statusbar</code></td> + <td> + <div id="sampleStatusBar" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>statusbarpanel</code></td> + <td> + <div id="sampleStatusBarPanel" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>tab</code></td> + <td> + <div id="sampleTab" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>tabpanel</code></td> + <td> + <div id="sampleTabPanel" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>tabpanels</code></td> + <td> + <div id="sampleTabPanels" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>tab-scroll-arrow-back</code></td> + <td> + <div id="sampleTabScrollArrowBack" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>tab-scroll-arrow-forward</code></td> + <td> + <div id="sampleTabScrollArrowForward" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>textfield</code></td> + <td> + <div id="sampleTextField" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>textfield-multiline</code></td> + <td> + <div id="sampleTextfieldMultiline" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>toolbar</code></td> + <td> + <div id="sampleToolbar" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>toolbarbutton</code></td> + <td> + <div id="sampleToolbarButton" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>toolbarbutton-dropdown</code></td> + <td> + <div id="sampleToolbarButtonDropdown" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>toolbargripper</code></td> + <td> + <div id="sampleToolbarGripper" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>toolbox</code></td> + <td> + <div id="sampleToolbox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>tooltip</code></td> + <td> + <div id="sampleTooltip" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>treeheader</code></td> + <td> + <div id="sampleTreeHeader" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>treeheadercell</code></td> + <td> + <div id="sampleTreeHeaderCell" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>treeheadersortarrow</code></td> + <td> + <div id="sampleTreeHeaderSortArrow" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>treeitem</code></td> + <td> + <div id="sampleTreeItem" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>treeline</code></td> + <td> + <div id="sampleTreeLine" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>treetwisty</code></td> + <td> + <div id="sampleTreeTwisty" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>treetwistyopen</code></td> + <td> + <div id="sampleTreeTwistyOpen" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>treeview</code></td> + <td> + <div id="sampleTreeView" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-mac-unified-toolbar</code></td> + <td> + <div id="sampleMacUnifiedToolbar" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-mac-unified-toolbar; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleMacUnifiedToolbar",100,50,"","", "nobutton")}}</td> + <td><strong>Mac OS X only</strong>. This causes the toolbar and title bar to render using the unified toolbar style common to Mac OS X 10.4 and later applications.</td> + </tr> + <tr> + <td>{{gecko_minversion_inline("2.0")}} <code>-moz-win-borderless-glass</code></td> + <td> + <div id="sampleWinBorderlessGlass" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-win-borderless-glass; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}</td> + <td><strong>Windows Vista and later only</strong>. This style applies the Aero Glass effect -- but without a border -- to the element.</td> + </tr> + <tr> + <td><code>-moz-win-browsertabbar-toolbox</code></td> + <td> + <div id="sampleWinBrowsertabbarToolbox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}</td> + <td><strong>Windows Vista and later only</strong>. This toolbox style is meant to be used for the tab bar in a browser.</td> + </tr> + <tr> + <td><code>-moz-win-communicationstext</code></td> + <td> + <div id="sampleWinCommunicationstext" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-win-communicationstext; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-win-communications-toolbox</code></td> + <td> + <div id="sampleWinCommunicationsToolbox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-win-communications-toolbox; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}</td> + <td><strong>Windows Vista and later only</strong>. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is <code>-moz-win-communicationstext</code>.</td> + </tr> + <tr> + <td>{{gecko_minversion_inline("6.0")}} <code>-moz-win-exclude-glass</code></td> + <td> + <div id="sampleWinExcludeGlass" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-win-exclude-glass; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}</td> + <td><strong>Windows Vista and later only. </strong>This styles is used to exclude the Aero Glass effect on the element.</td> + </tr> + <tr> + <td><code>-moz-win-glass</code></td> + <td> + <div id="sampleWinGlass" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-win-glass; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}</td> + <td><strong>Windows Vista and later only</strong>. This style applies the Aero Glass effect to the element.</td> + </tr> + <tr> + <td><code>-moz-win-mediatext</code></td> + <td> + <div id="sampleWinMediaText" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-win-mediatext; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinMediaText",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-win-media-toolbox</code></td> + <td> + <div id="sampleWinMediaToolbox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-win-media-toolbox; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}</td> + <td><strong>Windows Vista and later only</strong>. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is <code>-moz-win-mediatext</code>.</td> + </tr> + <tr> + <td><code>-moz-window-button-box</code></td> + <td> + <div id="sampleWindowButtonBox" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-button-box; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-button-box-maximized</code></td> + <td> + <div id="sampleWindowButtonBoxMaximized" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-button-box-maximized; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-button-close</code></td> + <td> + <div id="sampleWindowButtonClose" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-button-close; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-button-maximize</code></td> + <td> + <div id="sampleWindowButtonMaximize" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-button-maximize; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-button-minimize</code></td> + <td> + <div id="sampleWindowButtonMinimize" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-button-minimize; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-button-restore</code></td> + <td> + <div id="sampleWindowButtonRestore" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-button-restore; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-frame-bottom</code></td> + <td> + <div id="sampleWindowFrameBottom" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-frame-bottom; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-frame-left</code></td> + <td> + <div id="sampleWindowFrameLeft" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-frame-left; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-frame-right</code></td> + <td> + <div id="sampleWindowFrameRight" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-frame-right; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-titlebar</code></td> + <td> + <div id="sampleWindowTitlebar" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-titlebar; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-window-titlebar-maximized</code></td> + <td> + <div id="sampleWindowTitlebarMaximized" style="display: none;"> + <pre class="brush:css"> + div {-moz-appearance: -moz-window-titlebar-maximized; color: black; }</pre> + + <pre class="brush: html"> + <div>Lorem</div></pre> + </div> + {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Síntaxis_formal">Síntaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">.exampleone { + -moz-appearance: toolbarbutton; +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>La propiedad <code>appearance</code> no se encuentra actualmente presente en ninguna nueva especificación CSS.</p> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>3.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>11.0{{property_prefix("-webkit")}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] No está completamente soportada.</p> + +<p>[2] Solo los valores <code>none</code>, <code>button</code>, y <code>textfield</code> están soportados. Ver <a href="https://msdn.microsoft.com/en-us/library/ie/dn793580%28v=vs.85%29.aspx">la documentación en MSDN</a>.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance">Definición de <code>appearance</code> en CSS 3 Interfaz Básico de Usuario</a> (Candidata a Recomendación desde 2004-05-11), desactualizada (La propiedad <code>appearance</code> se ha abandonado en las nuevas versiones de esta especificación.)</li> + <li><a class="external" href="http://wiki.csswg.org/spec/css4-ui#dropped-css3-features">Características CSS3 abandonadas en la UI especificación.</a></li> +</ul> diff --git a/files/es/web/css/at-rule/index.html b/files/es/web/css/at-rule/index.html new file mode 100644 index 0000000000..58620af629 --- /dev/null +++ b/files/es/web/css/at-rule/index.html @@ -0,0 +1,73 @@ +--- +title: Regla-At +slug: Web/CSS/At-rule +translation_of: Web/CSS/At-rule +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary">Una <strong>regla-at</strong> es una <a href="/en-US/docs/Web/CSS/Syntax#CSS_statements">declaración CSS</a> que comienza con el símbolo arroba, '@' (U+0040 COMMERCIAL AT), seguido por un identificador, e incluye todo el contenido hasta el siguiente punto y coma, ';' (U+003B SEMICOLON), o el siguiente <a href="/en-US/docs/Web/CSS/Syntax#CSS_declarations_blocks">bloque CSS</a>, lo que sea primero.</span></p> + +<p>Hay varias reglas-at, designadas por sus identificadores, cada una con sintaxis distinta:</p> + +<ul> + <li>{{cssxref("@charset")}} — Define el conjunto de caracteres usado por la hoja de estilos.</li> + <li>{{cssxref("@import")}} — Indica al motor de CSS que incluya una hoja de estilos externa.</li> + <li>{{cssxref("@namespace")}} — Indica al motor de CSS que todo el contenido usa como prefijo un espacio de nombres XML.</li> + <li><strong><em>Reglas-at anidadas</em></strong> — Un subconjunto de declaraciones anidadas, que pueden ser usadas como declaraciones de estilos, así como grupos de reglas condicionadas internas: + <ul> + <li>{{cssxref("@media")}} — Un grupo de reglas condicional que aplicará su contenido si el dispositivo cumple los criterios de las condiciones definidas usando un <em>media query</em>.</li> + <li>{{cssxref("@supports")}} {{experimental_inline}} — Un grupo de reglas condicional que aplicará su contenido si el navegador cumple los criterios de la condición dada.</li> + <li>{{cssxref("@document")}} {{experimental_inline}} — Un grupo de reglas condicionadas que aplicará su contenido si el documento donde se aplica la hoja de estilos cumple los criterios de la condición dada. <em>(diferida al Nivel 4 de la Especificación CSS)</em></li> + <li>{{cssxref("@page")}} — Describe los cambios en la disposición de la página que serán aplicados al imprimir el documento.</li> + <li>{{cssxref("@font-face")}} — Describe la configuración de fuentes externas que se descargarán.</li> + <li>{{cssxref("@keyframes")}} {{experimental_inline}} — Describe la configuración de pasos intermedios en una secuencia de animación CSS.</li> + <li>{{cssxref("@viewport")}} {{experimental_inline}} — Describe los aspectos del viewport para dispositivos de pantalla pequeña. <em>(actualmente en Borrador)</em></li> + <li>{{cssxref("@counter-style")}} — Define estilos de contador específicos que no son parte de los conjuntos de estilos predeterminados. <em>(en estado de Recomendación Candidata, pero sólo implementada en Gekko al momento de esta publicación)</em></li> + <li>{{cssxref("@font-feature-values")}} (junto con <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> y <code>@character-variant</code>)<br> + — Define nombres comunes para la propiedad {{cssxref("font-variant-alternates")}}. <em>(en estado de Recomendación Candidata, pero sólo implementada en Gekko al momento de esta publicación)</em></li> + </ul> + </li> +</ul> + +<h2 id="Grupos_de_Reglas_Condicionales">Grupos de Reglas Condicionales</h2> + +<p>Así como los valores de las propiedades, cada regla-at tiene sintaxis propia. Sin embargo, muchas de esas reglas pueden ser agrupadas en categorías especiales, llamadas <strong>conditional group rules</strong>. Estas declaraciones comparten sintáxis común y cada una puede incluir <em>nested statements</em>—ya sean <em>conjuntos de reglas</em> o <em>reglas-at anidadas</em>. Además, pueden transmitir un significado semántico común—todas incluyen algun tipo de condición, que devuelve un resultado que puede ser <strong>verdadero</strong> o <strong>falso</strong>. Si el valor de la condición resulta <strong>verdadero</strong>, todas las declaraciones del grupo serán aplicadas.</p> + +<p>Los grupos de reglas condicionales están definidos en <a href="http://dev.w3.org/csswg/css3-conditional/">CSS Conditionals Level 3</a> y son:</p> + +<ul> + <li>{{cssxref("@media")}},</li> + <li>{{cssxref("@supports")}},</li> + <li>{{cssxref("@document")}}. <em>(diferida al Nivel 4 de la Especificación CSS) </em></li> +</ul> + +<p>Como cada grupo de condición puede incluir también declaraciones anidadas, puede haber un número de anidaciones ilimitado.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificatión</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('CSS3 Conditional')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td> + <td>{{Spec2('Compat')}}</td> + <td><code>@-webkit-keyframes estandarizado</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a></li> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/es/web/css/attr()/index.html b/files/es/web/css/attr()/index.html new file mode 100644 index 0000000000..7f78df0156 --- /dev/null +++ b/files/es/web/css/attr()/index.html @@ -0,0 +1,246 @@ +--- +title: attr +slug: Web/CSS/attr() +translation_of: Web/CSS/attr() +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La función <code>attr()</code> de <a href="/en-US/docs/Web/CSS">CSS</a> se usa para recuperar el valor de un atributo del elemento seleccionado y usarlo en la hoja de estilos. Se puede usar también en un pseudo-elemento y, en este caso, el valor del atributo en el elemento originado del pseudo-elemento es devuelto.</p> + +<p>La función <code>attr()</code> de <a href="/en-US/docs/Web/CSS">CSS</a> se puede usar con cualquier propiedad de CSS. {{ experimental_inline() }}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Sintaxis formal</a>: attr( attribute-name <type-or-unit>? [, <fallback> ]? ) +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>attribute-name</code></dt> + <dd>Es el nombre de un atributo en el elemento HTML al que se hace referencia en el CSS. Soporte para otros atributos a parte de {{ cssxref("content") }} es {{ experimental_inline() }}.</dd> + <dt><code><type-</code>or-unit></dt> + <dd>Es una palabra clave que representa o el tipo del valor del atributo, o su unidad, pues en HTML algunos atributos tienen unidades implícitas. Si el uso de <code><type-or-unit></code> como valor del atributo especificado no es válido, la expresión <code>attr()</code> también será no válida. Si se omite, el valor por defecto es string. La lista de valores válidos son: + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Keyword</th> + <th scope="col">Associated type</th> + <th scope="col">Comment</th> + <th scope="col">Default value</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>string</code></td> + <td>{{cssxref("<string>")}}</td> + <td>El valor del atributo es tratado como una {{cssxref("<string>")}} de CSS. No se reparsea, y en este caso particular los caracteres son usados tal y como son en vez de convertirlos en diferentes caracteres de CSS.</td> + <td>Cadena vacía</td> + </tr> + <tr> + <td><code>color</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<color>")}}</td> + <td>El valor del atributo es tratado como hash (3- or 6-value hash) o a una palabra clave. Debe ser un valor válido de una {{cssxref("<string>")}} de CSS.<br> + Los espacios iniciales y finales son eliminados.</td> + <td><code>currentColor</code></td> + </tr> + <tr> + <td><code>url</code> {{ experimental_inline() }}</td> + <td>{{ cssxref("<uri>") }}</td> + <td>El valor del atributo es tratado como una cadena que se usa en una función <code>url()</code> de CSS.<br> + URLs relativas se resuelven con respecto al documento original, no respecto a la hoja de estilos. Los espacios iniciales y finales son eliminados.</td> + <td>La url <code>about:invalid</code> que apunta a un documento inexistente con una condición de error genérico.</td> + </tr> + <tr> + <td><code>integer</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<integer>")}}</td> + <td>El valor del atributo es tratado como un {{cssxref("<integer>")}} CSS. Si no es válido, si no es un entero o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.<br> + Los espacios iniciales y finales son eliminados.</td> + <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>number</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<number>")}}</td> + <td>El valor del atributo es tratado como {{cssxref("<number>")}}. Si no es válido, si no es un número o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.<br> + Los espacios iniciales y finales son eliminados.</td> + <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>length</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<length>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. <code>12.5em</code>). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.<br> + If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<length>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>angle</code> {{ experimental_inline() }}</td> + <td>{{ cssxref("<angle>") }}</td> + <td>The attribute value is parsed as a CSS {{ cssxref("<angle>") }} dimension, that is including the unit (e.g. <code>30.5deg</code>). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{ experimental_inline() }}</td> + <td>{{ cssxref("<angle>") }}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an {{ cssxref("<angle>") }} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>time</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<time>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. <code>30.5ms</code>). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>s</code>, <code>ms</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<time>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>frequency</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<frequency>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. <code>30.5kHz</code>). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.</td> + <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>Hz</code>, <code>kHz</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<frequency>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + <tr> + <td><code>%</code> {{ experimental_inline() }}</td> + <td>{{cssxref("<percentage>")}}</td> + <td>The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br> + If the given value is used as a length, <code>attr()</code>computes it to an absolute length.<br> + Leading and trailing spaces are stripped.</td> + <td><code>0%</code>, or, if <code>0%</code> is not a valid value for the property, the property's minimum value.</td> + </tr> + </tbody> + </table> + </dd> + <dt><code><fallback></code></dt> + <dd>The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where <code>attr()</code> is used, even if it is not used, and must not contain another <code>attr()</code> expression. If <code>attr()</code> is not the sole component value of a property, its <code><fallback></code> value must be of the type defined by <code><type-or-unit></code>. If not set, CSS will use the default value defined for each <code><type-or-unit></code>.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: css notranslate">p::before { + content:attr(data-foo) " "; +} +</pre> + +<pre class="brush: html notranslate"><p data-foo="hello">world</p> +</pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample("Examples", '100%', '80') }}</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Values', '#attr', 'attr()') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are {{ experimental_inline() }} and may be dropped during the CR phase if browser support is too small.</td> + </tr> + <tr style="vertical-align: top;"> + <td style="vertical-align: top;">{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}</td> + <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td> + <td style="vertical-align: top;">Limited to the {{ cssxref("content") }} property; always return a {{cssxref("<string>")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.0</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>8</td> + <td>9.0</td> + <td>3.1</td> + </tr> + <tr> + <td>Usage in other properties than {{cssxref("content")}} and with non-string values {{ experimental_inline() }}</td> + <td>{{CompatNo()}}</td> + <td>{{CompatNo()}} (see {{bug("435426")}})</td> + <td>{{CompatNo()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{ CompatGeckoMobile(1.0) }}</td> + <td>8</td> + <td>10.0</td> + <td>3.1</td> + </tr> + <tr> + <td>Usage in other properties than {{cssxref("content")}}and with non-string values {{ experimental_inline() }}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatNo()}} (see {{bug("435426")}})</td> + <td>{{CompatNo()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/es/web/css/auto/index.html b/files/es/web/css/auto/index.html new file mode 100644 index 0000000000..f9f19df9f7 --- /dev/null +++ b/files/es/web/css/auto/index.html @@ -0,0 +1,49 @@ +--- +title: auto +slug: Web/CSS/auto +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/width +--- +<p> +</p><p><< <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a> +</p> +<h3 id="Resumen" name="Resumen"> Resumen </h3> +<p>Un valor computado automáticamente por el 'useragent.' +</p><p>Usando el valor <i>auto</i> en cualquier propiedad, dejamos al navegador que calcule el valor requerido. </p><p><br> +FIXME +</p> +<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3> +<pre class="eval">div { + height: 600px; + border: 1px solid #000; +} +</pre> +<pre class="eval">div img { + height: auto; + border: 1px solid red; +} +</pre> +<h3 id="Se_utiliza_en" name="Se_utiliza_en"> Se utiliza en </h3> +<ul><li> {{ Cssxref("overflow") }} +</li><li> {{ Cssxref("cursor") }} +</li><li> {{ Cssxref("width") }} +</li><li> {{ Cssxref("marker-offset") }} +</li><li> {{ Cssxref("margin") }} +</li><li> margin-* (left|bottom|top|right|start|end) +</li><li> {{ Cssxref("bottom") }} +</li><li> {{ Cssxref("left") }} +</li><li> {{ Cssxref("table-layout") }} +</li><li> {{ Cssxref("z-index") }} +</li><li> {{ Cssxref("-moz-column-width") }} +</li></ul> +<p><br> +</p> +<div class="noinclude"> +<p><span class="comment">Categorías</span> +<span class="comment">Interwiki Languages</span> +</p> +</div> +{{ languages( { "en": "en/CSS/auto" } ) }} diff --git a/files/es/web/css/azimuth/index.html b/files/es/web/css/azimuth/index.html new file mode 100644 index 0000000000..b4ccce8e37 --- /dev/null +++ b/files/es/web/css/azimuth/index.html @@ -0,0 +1,70 @@ +--- +title: azimuth +slug: Web/CSS/azimuth +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Archive/Web/CSS/azimuth +--- +<p> +</p><p><< <a href="es/Referencia_CSS">Referencia CSS</a> +</p><p><br> +</p> +<h3 id="Resumen" name="Resumen"> Resumen </h3> +<p>En combinación con <code><a href="es/CSS/elevation">elevación</a></code>, <code>azimuth</code> permite posicionar en el espacio/lugar diferentes fuentes de audio para una presentación auditiva (<small>aural</small>). Es importante ya que es un medio natural de definir varias fuentes de audio que pueden ser colocadas en lugares diferentes en la escena auditiva. Una salida estéreo produce una escena lateral, mientras que los cascos o los sistemas de múltiples altavoces permiten obtener una audición en 3D. +</p> +<ul><li> {{ Cssxref("initial", "Valor inicial") }}: al centro +</li><li> Se aplica a: todos los elementos +</li><li> {{ Cssxref("inheritance", "Herencia") }}: sí +</li><li> Porcentajes: N/A +</li><li> Medio: {{ Cssxref("Medio:audio", "auditivo") }} +</li><li> {{ Cssxref("computed value", "Valor calculada") }}: ángulo normalizado +</li></ul> +<h3 id="Sintaxis" name="Sintaxis"> Sintaxis </h3> +<pre class="eval">azimuth: <i>angle</i> | [[ left-side | far-left | left | + center-left | center | center-right | right | + far-right | right-side ] || behind ] | leftwards | + rightwards | inherit +</pre> +<h3 id="Valores" name="Valores"> Valores </h3> +<dl><dt> ángulo (<code>angle</code>) </dt><dd> La posición de la fuente audible se describe por un ángulo comprendido en tre <code>-360deg</code> y <code>360deg</code>. El valor <b><code>0deg</code></b> se encuentra directamente en el centro del escenario auditivo (valor por defecto), <b><code>90deg</code></b> es a la derecha, <b><code>180deg</code></b> es detrás y <b><code>270deg</code></b> o <b><code>-90deg</code></b> es a la izquierda. +</dd></dl> +<h4 id="Palabras_claves_de_posici.C3.B3n" name="Palabras_claves_de_posici.C3.B3n"> Palabras claves de posición </h4> +<ul><li> <b>left-side</b> = <code>270deg</code>. +</li><li> <b>left-side behind</b> = <code>270deg</code>. +</li><li> <b>far-left</b> = <code>300deg</code>. +</li><li> <b>far-left behind</b> = <code>240deg</code>. +</li><li> <b>left</b> = <code>320deg</code>. +</li><li> <b>left behind</b> = <code>220deg</code>. +</li><li> <b>center-left</b> = <code>340deg</code>. +</li><li> <b>center-left behind</b> = <code>200deg</code>. +</li><li> <b>center</b> = <code>0deg</code>. +</li><li> <b>center behind</b> = <code>180deg</code>. +</li><li> <b>center-right</b> = <code>20deg</code>. +</li><li> <b>center-right behind</b> = <code>160deg</code>. +</li><li> <b>right</b> = <code>40deg</code>. +</li><li> <b>right behind</b> = <code>140deg</code>. +</li><li> <b>far-right</b> = <code>60deg</code>. +</li><li> <b>far-right behind</b> = <code>120deg</code>. +</li><li> <b>right-side</b> = <code>90deg</code>. +</li><li> <b>right-side behind</b> = <code>90deg</code>. +</li><li> <b>behind</b> = <code>180deg</code>. También utilizado como modificador de otras palabras claves de posicionamiento, como encima. +</li><li> <b>leftwards</b>: Mueve el sonido 20 grados en el sentido inverso (izquierda) al del reloj, en relación al ángulo actual. +</li><li> <b>rightwards</b>: Mueve el sonido 20 grado en el sentido del reloj, en relación al ángulo actual. +</li></ul> +<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3> +<pre>h1 { azimuth: 30deg } +td.a { azimuth: far-right } /* 60deg */ +#12 { azimuth: behind far-right } /* 120deg */ +p.comment { azimuth: behind } /* 180deg */ +</pre> +<h3 id="Especificaciones" name="Especificaciones"> Especificaciones </h3> +<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/aural.html#spatial-props">CSS 2.1</a> +</li></ul> +<h3 id="Compatibilidad_con_navegadores" name="Compatibilidad_con_navegadores"> Compatibilidad con navegadores </h3> +<p>Por definir. +</p> +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3> +<p>{{ Cssxref("elevation") }} +</p>{{ languages( { "en": "en/Image/Azimuth.png", "en": "en/CSS/azimuth", "fr": "fr/CSS/azimuth", "pl": "pl/CSS/azimuth", "zh-cn": "cn/CSS/azimuth" } ) }} diff --git a/files/es/web/css/backdrop-filter/index.html b/files/es/web/css/backdrop-filter/index.html new file mode 100644 index 0000000000..ca5df66d42 --- /dev/null +++ b/files/es/web/css/backdrop-filter/index.html @@ -0,0 +1,145 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +tags: + - CSS + - Diseño + - Filtro SVG + - Propiedad CSS + - Referencia + - SVG + - Web + - graficos +translation_of: Web/CSS/backdrop-filter +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> de <strong><code>backdrop-filter</code></strong> le permite aplicar efectos gráficos como el desenfoque o el cambio de color al área detrás de un elemento. Debido a que se aplica a todo lo que está <em>detrás</em> del elemento, para ver el efecto debe hacer que el elemento o su fondo sean al menos parcialmente transparentes.</p> + +<pre class="brush: css no-line-numbers">/* Valor de palabra clave */ +backdrop-filter: none; + +/* URL al filtro SVG */ +backdrop-filter: url(commonfilters.svg#filter); + +/* valores <filter-function> */ +backdrop-filter: blur(2px); +backdrop-filter: brightness(60%); +backdrop-filter: contrast(40%); +backdrop-filter: drop-shadow(4px 4px 10px blue); +backdrop-filter: grayscale(30%); +backdrop-filter: hue-rotate(120deg); +backdrop-filter: invert(70%); +backdrop-filter: opacity(20%); +backdrop-filter: sepia(90%); +backdrop-filter: saturate(80%); + +/* Múltiples filtros */ +backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); + +/* Valores globales */ +backdrop-filter: inherit; +backdrop-filter: initial; +backdrop-filter: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>No se aplica filtro al fondo.</dd> + <dt><code><filter-function-list></code></dt> + <dd>Una lista separada por espacios de {{cssxref("<filter-function>")}} o un <a href="/es/docs/Web/SVG/Element/filter">filtro SVG</a> que se aplicará al fondo.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.box { + background-color: rgba(255, 255, 255, 0.3); + border-radius: 5px; + font-family: sans-serif; + text-align: center; + line-height: 1; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + max-width: 50%; + max-height: 50%; + padding: 20px 40px; +} + +html, +body { + height: 100%; + width: 100%; +} + +body { + background-image: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg'); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; +} + +.container { + align-items: center; + display: flex; + justify-content: center; + height: 100%; + width: 100%; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="container"> + <div class="box"> + <p>backdrop-filter: blur(10px)</p> + </div> +</div> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Ejemplo", 600, 400)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td> + <td>{{Spec2('Filters 2.0')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.properties.backdrop-filter")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{cssxref("filter")}}</li> + <li><a href="http://www.domneill.com/blog/posts/2015/07/28/my-favourite-new-features-in-webkit-and-safari/">Publicación del blog de Dom Neill con ejemplos</a></li> + <li><a href="http://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter">Creación de efectos de transparencia similares a iOS en CSS con filtro de fondo</a></li> +</ul> diff --git a/files/es/web/css/backface-visibility/index.html b/files/es/web/css/backface-visibility/index.html new file mode 100644 index 0000000000..509c6e05fc --- /dev/null +++ b/files/es/web/css/backface-visibility/index.html @@ -0,0 +1,270 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +tags: + - CSS + - Experimental + - Propiedad CSS + - Referencia +translation_of: Web/CSS/backface-visibility +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>backface-visibility</code></strong> determina si la cara posterior de un elemento es visible de frente al usuario. La cara posterior de un elemento siempre es un fondo transparente, permitiendo, cuando es visible, que se muestre una imagen de espejo de la cara frontal.</p> + +<p>Hay casos en los que no queremos que la cara frontal de un elemento sea visible a través de la cara posterior, como cuando se hace el efecto de voltear una tarjeta (estableciendo dos elementos lado a lado).</p> + +<p>Esta propiedad no tiene efecto en transformaciones 2D, pues estos no tienen perspectiva.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">backface-visibility: visible; +backface-visibility: hidden; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>Esta propiedad puede tener dos valores diferentes (y exclusivos):</p> + +<ul> + <li><code>visible</code> significa que la cara posterior es visible, permitiendo que la cara frontal se muestre invertida</li> + <li><code>hidden</code> significa que la cara posterior no es visible, ocultando la cara frontal</li> +</ul> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<dl> +</dl> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Cubo_con_caras_transparentes">Cubo con caras transparentes</h3> + +<h4 id="Contenido_HTML">Contenido HTML</h4> + +<pre class="brush: html"><table> + <tbody> + <tr> + <th><code>backface-visibility: visible;</code></th> + <th><code>backface-visibility: hidden;</code></th> + </tr> + <tr> + <td> + <div class="container"> + <div class="cube showbf"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> + <p>All the faces are transparent and the three back faces are visible through the front ones.</p> + </td> + <td> + <div class="container"> + <div class="cube hidebf"> + <div class="face front">1</div> + <div class="face back">2</div> + <div class="face right">3</div> + <div class="face left">4</div> + <div class="face top">5</div> + <div class="face bottom">6</div> + </div> + </div> + <p>No face is opaque, but the three back faces are always hidden now.</p> + </td> + </tr> + </tbody> +</table></pre> + +<h4 id="Contenido_CSS">Contenido CSS</h4> + +<pre class="brush: css">/* Shorthand classes that will show or hide the three back faces of the "cube" */ +.hidebf div { + backface-visibility: hidden; + -webkit-backface-visibility: hidden; +} + +.showbf div { + backface-visibility: visible; + -webkit-backface-visibility: visible; +} + +/* Define the container div, the cube div, and a generic face */ +.container { + width: 150px; + height: 150px; + margin: 75px 0 0 75px; + border: none; +} + +.cube { + width: 100%; + height: 100%; + perspective: 550px; + perspective-origin: 150% 150%; + transform-style: preserve-3d; + -webkit-perspective: 300px; + -webkit-perspective-origin: 150% 150%; + -webkit-transform-style: preserve-3d; +} + +.face { + display: block; + position: absolute; + width: 100px; + height: 100px; + border: none; + line-height: 100px; + font-family: sans-serif; + font-size: 60px; + color: white; + text-align: center; +} + +/* Define each face based on direction */ +.front { + background: rgba(0, 0, 0, 0.3); + transform: translateZ(50px); + -webkit-transform: translateZ(50px); +} + +.back { + background: rgba(0, 255, 0, 1); + color: black; + transform: rotateY(180deg) translateZ(50px); + -webkit-transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(196, 0, 0, 0.7); + transform: rotateY(90deg) translateZ(50px); + -webkit-transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0, 0, 196, 0.7); + transform: rotateY(-90deg) translateZ(50px); + -webkit-transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(196, 196, 0, 0.7); + transform: rotateX(90deg) translateZ(50px); + -webkit-transform: rotateX(90deg) translateZ(50px) +} + +.bottom { + background: rgba(196, 0, 196, 0.7); + transform: rotateX(-90deg) translateZ(50px); + -webkit-transform: rotateX(-90deg) translateZ(50px); +} + +/* Make the table a little nicer */ +th, p, td { + background-color: #EEEEEE; + margin: 0px; + padding: 6px; + font-family: sans-serif; + text-align: left; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Cube_with_transparent_faces', 620, 460)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>12{{property_prefix('-webkit')}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("10")}}{{property_prefix('-moz')}}<br> + {{CompatGeckoDesktop("16")}}<sup>[1]</sup></td> + <td>10</td> + <td>15{{property_prefix('-webkit')}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>3.0{{property_prefix('-webkit')}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("10")}}{{property_prefix('-moz')}}<br> + {{CompatGeckoMobile("16")}}<sup>[1]</sup></td> + <td>8.1<br> + <a href="https://msdn.microsoft.com/en-us/library/ie/hh772262(v=vs.85).aspx">11</a>{{property_prefix('-webkit')}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Además del soporte sin prefijo, Gecko 45.0 {{geckoRelease("45.0")}} añadió sopore para una versión de la propiedad con prefijo <code>-webkit</code> por razones de compatibilidad, bajo la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado de <code>false</code>. A partir de Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esta preferencia es <code>true</code>.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/es/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Uso de CSS transforms</a></li> +</ul> diff --git a/files/es/web/css/background-attachment/index.html b/files/es/web/css/background-attachment/index.html new file mode 100644 index 0000000000..0075a07f88 --- /dev/null +++ b/files/es/web/css/background-attachment/index.html @@ -0,0 +1,133 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS +translation_of: Web/CSS/background-attachment +--- +<p>{{CSSRef}}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>La propiedad CSS <strong><code>background-attachment</code></strong> determina si la posición de la imagen de fondo será <strong>fija</strong> dentro de la pantalla o <strong>se desplazará</strong> con su bloque contenedor.</p> + +<ul> + <li>{{ Cssxref("initial", "Inicial") }}: desplazamiento (<em>scroll</em>)</li> + <li>Se aplica a: todos los elementos</li> + <li>{{ Cssxref("inheritance", "Herencia") }}: no</li> + <li>Porcentajes: N/A</li> + <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li> + <li>{{ Cssxref("computed value", "Valor calculada") }}: como se haya especificado</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval notranslate">background-attachment: scroll | fixed | inherit +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt>scroll </dt> + <dd>Si <code>scroll</code> es especificado, la imagen de fondo se moverá dentro de la pantalla junto al bloque que la contiene.</dd> + <dt>fixed </dt> + <dd>Si <code>fixed</code> es especificado, la imagen de fondo estará fija en la pantalla y no se moverá con el bloque contenedor.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_simple">Ejemplo simple</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush:css; highlight:[3]; notranslate">p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); + background-attachment: fixed; +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p> + There were doors all round the hall, but they were all locked; and when + Alice had been all the way down one side and up the other, trying every + door, she walked sadly down the middle, wondering how she was ever to + get out again. +</p></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Simple_example")}}</p> + +<h3 id="Soporta_múltiples_imagenes_de_fondo">Soporta múltiples imagenes de fondo</h3> + +<p>Esta propiedad soporta multiples imágenes de fondo. Puedes especificar un <code><attachment></code> diferente por cada imagen de fondo, separado por comas. Cada imagen es asociada con el correspondiente valor de <attachment>, especificado desde el primero hasta el último.</p> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush:css; highlight:[3]; notranslate">p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); + background-attachment: fixed, scroll; + background-repeat: no-repeat, repeat-y; +}</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p> + There were doors all round the hall, but they were all locked; and when + Alice had been all the way down one side and up the other, trying every + door, she walked sadly down the middle, wondering how she was ever to + get out again. + + Suddenly she came upon a little three-legged table, all made of solid + glass; there was nothing on it except a tiny golden key, and Alice's + first thought was that it might belong to one of the doors of the hall; + but, alas! either the locks were too large, or the key was too small, + but at any rate it would not open any of them. However, on the second + time round, she came upon a low curtain she had not noticed before, and + behind it was a little door about fifteen inches high: she tried the + little golden key in the lock, and to her great delight it fitted! +</p></pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Multiple_background_image_support")}}</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-attachment">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-attachment">CSS 3</a></li> +</ul> + +<h3 id="Compatibilidad_de_navegadores" name="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p> diff --git a/files/es/web/css/background-blend-mode/index.html b/files/es/web/css/background-blend-mode/index.html new file mode 100644 index 0000000000..808654f167 --- /dev/null +++ b/files/es/web/css/background-blend-mode/index.html @@ -0,0 +1,150 @@ +--- +title: background-blend-mode +slug: Web/CSS/background-blend-mode +tags: + - Composición CSS + - Propiedad CSS +translation_of: Web/CSS/background-blend-mode +--- +<p>{{CSSRef()}}</p> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La propiedad CSS <strong><code>background-blend-mode</code></strong> describe cómo las imágenes de fondo y el color de fondo del elemento deben mezclar entre sí. </p> + +<p>Los modos de fusión deben ser definidos en el mismo orden que la propiedad CSS {{cssxref("background-image")}}. Si la cantidad de modos de fusión y de imagenes de fondo no son iguales, se repetirán y/o truncarán hasta igualar las cantidades.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="brush:css">/* Un valor */ +background-blend-mode: normal; + +/* Dos valores, uno por fondo */ +background-blend-mode: darken, luminosity; + +/* Valores globales */ +background-blend-mode: initial; +background-blend-mode: inherit; +background-blend-mode: unset; +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code><blend-mode></code></dt> + <dd>Es un {{cssxref("<blend-mode>")}} que denota el modo de fusión que se aplicará. Puede haber varios valores, separados por coma.</dd> +</dl> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<pre class="brush: html" style="display: none;"><div id="div"></div> +<select id="select"> + <option>normal</option> + <option>multiply</option> + <option selected>screen</option> + <option>overlay</option> + <option>darken</option> + <option>lighten</option> + <option>color-dodge</option> + <option>color-burn</option> + <option>hard-light</option> + <option>soft-light</option> + <option>difference</option> + <option>exclusion</option> + <option>hue</option> + <option>saturation</option> + <option>color</option> + <option>luminosity</option> +</select></pre> + +<pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: screen; +}</pre> + +<pre class="brush: js" style="display: none;">document.getElementById("select").onchange = function(event) { + document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; +} +console.log(document.getElementById('div'));</pre> + +<p>{{ EmbedLiveSample('Examples', "330", "330") }}</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }}</td> + <td>{{ Spec2('Compositing') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico </td> + <td>35</td> + <td>{{CompatGeckoDesktop('30.0')}}</td> + <td>{{CompatNo()}}</td> + <td>22</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo()}}</td> + <td>{{CompatGeckoMobile('30.0')}}</td> + <td>{{CompatNo()}}</td> + <td>22</td> + <td>iOS 8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Véase también</h2> + +<ul> + <li>{{cssxref("<blend-mode>")}}</li> + <li>{{cssxref("mix-blend-mode")}}</li> +</ul> diff --git a/files/es/web/css/background-clip/index.html b/files/es/web/css/background-clip/index.html new file mode 100644 index 0000000000..2c8b8daf79 --- /dev/null +++ b/files/es/web/css/background-clip/index.html @@ -0,0 +1,171 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +tags: + - CSS + - Diseño + - Fondo CSS + - Propiedad CSS + - Referencia + - Referência(2) + - Web +translation_of: Web/CSS/background-clip +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Resumen">Resumen</h2> + +<p><span id="result_box" lang="es"><span class="hps">La propiedad</span></span> CSS <code>background-clip</code> <span id="result_box" lang="es"><span class="hps">especifica si</span> <span class="hps">el fondo</span> <span class="hps">de</span> <span class="hps">un elemento,</span> <span class="hps">ya sea</span> <span class="hps">el color</span> <span class="hps">o imagen</span><span>,</span> <span class="hps">se extiende por debajo</span> <span class="alt-edited hps">su borde</span><span>.</span></span></p> + +<p>Si la imagen o color de fondo no esta definido, esta propiedad solo tendrá un efecto visual cuando el borde tenga regiones transparentes o regiones parcialmente opacas (debido a {{ Cssxref("border-style") }} o {{ Cssxref("border-image") }}); <span class="short_text" id="result_box" lang="es"><span class="hps">de lo contrario</span> <span class="alt-edited hps">el borde</span> <span class="hps">cubre</span> <span class="hps">la diferencia</span></span>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Sintaxis Formal</a>: {{csssyntax("background-clip")}}</pre> + +<pre>background-clip: border-box +background-clip: padding-box +background-clip: content-box + +background-clip: inherit +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>border-box</code></dt> + <dd><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">fondo</span> <span class="hps">se extiende hasta el</span> <span class="hps">borde exterior de</span> <span class="alt-edited hps">el contenedor</span> <span class="atn hps">(</span><span>pero por debajo de</span> <span class="hps">la frontera, en</span> <span class="hps">orden z</span><span>)</span></span>.</dd> + <dt><code>padding-box</code></dt> + <dd>El fondo no se muestra a través del borde (<span id="result_box" lang="es"><span class="alt-edited hps">el fondo</span> <span class="hps">se extiende</span> <span class="hps">hasta el borde exterior</span> <span class="hps">del</span></span> padding).</dd> + <dt><code>content-box</code></dt> + <dd>El fondo se dibuja desde donde inicia el contenido.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><p class="border-box">The yellow background extends behind the border.</p> +<p class="padding-box">The yellow background extends to the inside edge of the border.</p> +<p class="content-box">The yellow background extends only to the edge of the content box.</p> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">p { + border: 5px navy; + border-style: dotted double; + margin: 2em; + padding: 2em; + background: #F8D575; +} +.border-box { background-clip: border-box; } +.padding-box { background-clip: padding-box; } +.content-box { background-clip: content-box; } +</pre> + +<h4 id="Salida">Salida</h4> + +<p>{{ EmbedLiveSample('Ejemplo', 540, 450) }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador"><font><font>Compatibilidad del navegador</font></font></h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte basico</td> + <td>1.0 [3]</td> + <td>{{ CompatGeckoDesktop("2.0") }} [1]</td> + <td>9.0 [2]</td> + <td>10.5</td> + <td>3.0 (522) [3]</td> + </tr> + <tr> + <td><code>content-box</code></td> + <td>1.0 [3]</td> + <td>{{ CompatGeckoDesktop("2.0") }} [1]</td> + <td>9.0 [2]</td> + <td>12.0 (maybe earlier)</td> + <td>3.0 (522) [3]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.1</td> + <td>{{ CompatGeckoMobile("14") }}</td> + <td>7.1</td> + <td>12.1</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>content-box</code></td> + <td>4.1</td> + <td>{{ CompatGeckoMobile("14") }}</td> + <td>7.1</td> + <td>12.1</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko soportado, desde la version 1.1 a la version 1.9.2, <span class="short_text" id="result_box" lang="es"><span class="hps">que se corresponde con</span> <span class="hps">Firefox</span></span> 1.0 a 3.6 incluido, con una diferente sintaxis con prefijo: <code>-moz-background-clip: padding | border</code>.</p> + +<p>[2] Internet Explorer 7 soportado, <span id="result_box" lang="es"><span class="hps">pero</span> <span class="hps">en otras versiones de</span> <span class="hps">Internet Explorer</span> <span class="hps">se comporta como</span></span> <code>background-clip:padding</code> si <code>overflow es: hidden | auto | scroll</code>.</p> + +<p>[3]<span id="result_box" lang="es"><span class="hps">Webkit</span> <span class="hps">también es compatible con</span> <span class="hps">prefijo</span> en esta<span class="hps"> propiedad,</span> <span class="hps">y en ese caso</span><span>,</span> <span class="hps">además de las</span> <span class="hps">palabras clave</span> <span class="hps">actuales</span><span>,</span> <span class="hps">los</span> <span class="hps">sinónimos</span> <span class="hps">alternativas</span> <span class="hps">son</span></span>: <code>padding</code>, <code>border</code>, and <code>content</code>.</p> + +<p>[4] Konqueror 3.5.4 tiene soporte con<code> -khtml-background-clip</code>.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{ cssxref("clip") }}</li> + <li><a href="/en-US/docs/Web/CSS/box_model">Modelo de caja CSS</a></li> +</ul> diff --git a/files/es/web/css/background-color/index.html b/files/es/web/css/background-color/index.html new file mode 100644 index 0000000000..4f3a1fb78f --- /dev/null +++ b/files/es/web/css/background-color/index.html @@ -0,0 +1,141 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/background-color +--- +<p> </p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p><code>Background-color</code> es un propiedad de CSS que define el color de fondo de un elemento, puede ser el valor de un color o la palabra "<code>transparent</code>e".</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: transparente</li> + <li>Se aplica a: todos los elementos</li> + <li>{{ Cssxref("inheritance", "Herencia") }}: no</li> + <li>Percentages: N/A</li> + <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li> + <li>{{ Cssxref("computed value", "Valor calculado") }}: como se haya especificado</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">background-color: <em>color</em> | transparent | inherit +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt><color></dt> + <dd>Se puede especificar el color de fondo como un valor RGB hexa-decimal o regular, o utilizando una de las palabras claves predefinidas de color.</dd> +</dl> + +<dl> + <dt>transparent </dt> + <dd>El valor por defecto del color de fondo (<code>background-color</code>) es <code>transparent</code>e tomando así el color del elemento que está justo debajo de él en el apilamiento.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="exampleone"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="exampletwo"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="examplethree"> + Lorem ipsum dolor sit amet, consectetuer +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[2,7,12,17];">.exampleone { + background-color: teal; + color: white; +} + +.exampletwo { + background-color: rgb(153,102,153); + color: rgb(255,255,204); +} + +.examplethree { + background-color: #777799; + color: #FFFFFF; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Ejemplos","200","150")}}</p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p><span class="comment">(Add links to good colour reference sites here.)</span></p> + +<p> </p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-color">CSS 1 (en)</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-color">CSS 2.1 (en)</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-color">CSS 3 (en)</a></li> +</ul> + +<h3 id="Compatibilidad_de_navegadores" name="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3> + +<p><span class="comment">TBD: This may be removed in favour of a centralized compatibility chart.</span></p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>soporta background-color</th> + </tr> + <tr> + <td>Internet Explorer 6</td> + <td>parcialmente</td> + </tr> + <tr> + <td>Internet Explorer 7</td> + <td>parcialmente</td> + </tr> + <tr> + <td>Firefox 1.5</td> + <td>Sí</td> + </tr> + <tr> + <td>Firefox 2</td> + <td>Sí</td> + </tr> + <tr> + <td>Opera 8.5</td> + <td>parcialmente</td> + </tr> + <tr> + <td>Opera 9</td> + <td>parcialmente</td> + </tr> + <tr> + <td>Konqueror 3.5</td> + <td>Sí</td> + </tr> + <tr> + <td>Safari 2</td> + <td>Sí</td> + </tr> + </tbody> +</table> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p> diff --git a/files/es/web/css/background-image/index.html b/files/es/web/css/background-image/index.html new file mode 100644 index 0000000000..b2ab46dd70 --- /dev/null +++ b/files/es/web/css/background-image/index.html @@ -0,0 +1,135 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/background-image +--- +<p>{{ PreviousNext("CSS:background-color", "CSS:background-position") }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>background-image</code></strong> establece una o más imágenes de fondo para un elemento.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: ninguno</li> + <li>Se aplica a: todos los elementos</li> + <li>{{ Cssxref("inheritance", "Herencia") }}: no</li> + <li>Porcentajes: N/A</li> + <li>Medio: {{ Cssxref("visual") }}</li> + <li>{{ Cssxref("computed value", "Valor calculada") }}: URI absoluta o ninguna</li> +</ul> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="eval">background-image: <em>url</em> | none | inherit +</pre> + +<h2 id="Valores" name="Valores">Valores</h2> + +<dl> + <dt>url </dt> + <dd>Localización de la imagen que se utilizará de fondo.</dd> + <dt>none </dt> + <dd>Utilizado para especificar que un elemento no debe tener ninguna imagen de fondo.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Note that the star image is partially transparent and is layered over the cat image.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p class="catsandstars"> + This paragraph is full of cats<br />and stars. + </p> + <p>This paragraph is not.</p> + <p class="catsandstars"> + Here are more cats for you.<br />Look at them! + </p> + <p>And no more.</p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">pre, p { + font-size: 1.5em; + color: #FE7F88; + background-color: transparent; +} + +div { + background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); +} + +p { + background-image: none; +} + +.catsandstars { + background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), + url("https://mdn.mozillademos.org/files/7693/catfront.png"); + background-color: transparent; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Ejemplos')}}</p> + +<h2 id="Notas" name="Notas">Notas</h2> + +<p>Los desarrolladores deben asegurarse que han especificado un color de fondo ({{ Cssxref("background-color") }}) en el caso de no usar una imagen. Las imágenes de fondo son mostradas encima del color de fondo.</p> + +<h2 id="Especificaciones" name="Especificaciones">Sobre Accesibilidad</h2> + +<p>Los lectores de pantalla no reconocen las imágenes de fondo, si la imagen tiene un significado y no es de carácter meramente decorativa deberás incluirla semánticamente en el documento utilizando la etiqueta <code>img</code>.</p> + +<p>Para más información (en inglés):</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-image">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-image">CSS 3</a></li> +</ul> + +<h2 id="Compatibilidad_de_navegador" name="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2> + +<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p> diff --git a/files/es/web/css/background-origin/index.html b/files/es/web/css/background-origin/index.html new file mode 100644 index 0000000000..e7e8a94c63 --- /dev/null +++ b/files/es/web/css/background-origin/index.html @@ -0,0 +1,88 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +tags: + - CSS + - CSS Referência +translation_of: Web/CSS/background-origin +--- +<h2 id="Resumen">Resumen</h2> +<p>La propiedad background-origin especifica el área de origen de un fondo o imagen en determinada caja. para que la propiedad <a href="/es/CSS/background-position" title="background-position">background-position</a> calcule la posición de inicio de un fondo o imagen definida por la propiedad <a href="/es/CSS/background-image" title="background-image">background-image</a>.</p> +<ul> + <li>Valor inicial: padding-box</li> + <li>Aplica a: Todos los elementos</li> + <li>Heredado: No</li> + <li>Porcentajes: n/a</li> + <li>Media: Visual</li> + <li>Valor computado: Mismo que valor especificado.</li> + <li>Animación: No</li> +</ul> +<h2 id="Sintaxis">Sintaxis</h2> +<pre class="eval">background-origin:[<code>padding-box | border-box | conten</code><code>t-box</code>][, [<code>border-box | padding-box | conten</code><code>t-box</code>]]* +</pre> +<h2 id="Valores">Valores</h2> +<dl> + <dt> + border-box</dt> + <dd> + <p>El fondo se extiende al borde exterior (por debajo del borde en el orden z), la posición es relativa al borde de la caja.</p> + </dd> + <dt> + padding-box</dt> + <dd> + <p>El fondo se extiende al borde exterior del padding, la posición es relativa al padding de la caja.</p> + </dd> + <dt> + content-box</dt> + <dd> + <p>El fondo se extiende dentro del (recortado al) contenido de la caja, la posición es relativa al contenido de la caja.</p> + </dd> +</dl> +<h2 id="Ejemplos">Ejemplos</h2> +<pre>div{ + border:4px dotted #FBE700; + background:url('imagen.jpg'); + background-position:0 0; + background-origin:border-box; +} +</pre> +<pre>div{ + background-image: url('image1.jpg'), url('image2.jpg'); + background-position: 0 0, bottom left; + background-origin: padding-box, content-box; +} +</pre> +<h2 id="Notas">Notas</h2> +<ul> + <li>La propiedad background-origin es ignorada si la propiedad background-attachment tiene un valor de fixed.</li> + <li>Si el valor de esta propiedad no es establecido en la propiedad abreviada (shorthand) <a href="/es/CSS/background" title="background">background</a> que es aplicada a el elemento despues de la propiedad background-origin, el valor de esta propiedad sera restablecido a su valor inicial por la propiedad abreviada background.</li> +</ul> +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>4.0 (2.0)</td> + <td>9.0</td> + <td>10.5</td> + <td>3.0 (522)</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Especificaciones">Especificaciones</h2> +<ul> + <li><a class="external" href="http://dev.w3.org/csswg/css3-background/#the-background-origin" title="http://dev.w3.org/csswg/css3-background/#the-background-origin">Css fondos y bordes modulo nivel 3 </a> (candidato a recomendación]</li> +</ul> +<h2 id="Relacionado">Relacionado</h2> +<p><a href="/es/CSS/background" title="es/CSS/background">background</a>, <a href="/es/CSS/background-attachment" title="es/CSS/background-attachment">background-attachment</a><a href="/es/CSS/background-image" title="es/CSS/background-image">, background-image</a>,<a href="/es/CSS/background-repeat" title="es/CSS/background-repeat"> background-repeat</a></p> diff --git a/files/es/web/css/background-position-x/index.html b/files/es/web/css/background-position-x/index.html new file mode 100644 index 0000000000..cb85bcd824 --- /dev/null +++ b/files/es/web/css/background-position-x/index.html @@ -0,0 +1,128 @@ +--- +title: background-position-x +slug: Web/CSS/background-position-x +translation_of: Web/CSS/background-position-x +--- +<div>{{CSSRef}}</div> + +<p>El <strong><code>background-position-x</code></strong> propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> coloca la posicion horizontal inicial por cada imagen de fondo. La posicion es relativa a la posicion de la capa puesta por {{cssxref("background-origin")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-position-x.html")}}</div> + +<p class="hidden">El recurso para este ejemplo interactivo es almacenado en un repositorio GitHub. Si te gustaría contrubuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envianos una solicitud.</p> + +<p>The value of this property is overridden by any declaration of the {{cssxref("background")}} or {{cssxref("background-position")}} shorthand properties applied to the element after it.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers notranslate">/* Keyword values */ +background-position-x: left; +background-position-x: center; +background-position-x: right; + +/* <percentage> values */ +background-position-x: 25%; + +/* <length> values */ +background-position-x: 0px; +background-position-x: 1cm; +background-position-x: 8em; + +/* Side-relative values */ +background-position-x: right 3px; +background-position-x: left 25%; + +/* Multiple values */ +background-position-x: 0px, center; + +/* Global values */ +background-position-x: inherit; +background-position-x: initial; +background-position-x: unset; +</pre> + +<p>The <code>background-position-x</code> property is specified as one or more values, separated by commas.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>left</code></dt> + <dd>Aligns the left edge of the background image with the left edge of the background position layer.</dd> + <dt><code>center</code></dt> + <dd>Aligns the center of the background image with the center of the background position layer.</dd> + <dt><code>right</code></dt> + <dd>Aligns the right edge of the background image with the right edge of the background position layer.</dd> + <dt>{{cssxref("<length>")}}</dt> + <dd>The offset of the given background image's left vertical edge from the background position layer's left vertical edge. (Some browsers allow assigning the right edge for offset).</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>The offset of the given background image's horizontal position relative to the container. A value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the <em>right</em> edge of the background image is aligned with the <em>right</em> edge of the container, thus a value of 50% horizontally centers the background image.</dd> +</dl> + +<h2 id="Formal_definition">Formal definition</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">Formal syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Basic_example">Basic example</h3> + +<p>The following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div></div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 300px; + height: 300px; + background-color: skyblue; + background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: bottom 10px; +}</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Basic_example', '100%', 300)}}</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}</td> + <td>{{Spec2('CSS4 Backgrounds')}}</td> + <td>Initial specification of longhand sub-properties of {{cssxref("background-position")}} to match longstanding implementations.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("css.properties.background-position-x")}}</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{cssxref("background-position")}}</li> + <li>{{cssxref("background-position-y")}}</li> + <li>{{cssxref("background-position-inline")}}</li> + <li>{{cssxref("background-position-block")}}</li> + <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Using multiple backgrounds</a></li> +</ul> diff --git a/files/es/web/css/background-position/index.html b/files/es/web/css/background-position/index.html new file mode 100644 index 0000000000..66a74be4b3 --- /dev/null +++ b/files/es/web/css/background-position/index.html @@ -0,0 +1,132 @@ +--- +title: background-position +slug: Web/CSS/background-position +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/background-position +--- +<p>{{ PreviousNext("CSS:background-image", "CSS:background-repeat") }}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p><code>background-position</code> define la posición inicial de la imagen de fondo especificada.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: 0% 0%</li> + <li>Se aplica a: todos los elementos</li> + <li>{{ Cssxref("inheritance", "Herencia") }}: no</li> + <li>Porcentajes: se refiere al tamaño de la caja misma</li> + <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li> + <li>{{ Cssxref("computed value", "Valor calculada") }}: para <length> el valor absoluto, para otros un porcentaje.</li> +</ul> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="eval">background-position: [ <percentage> | <length> | left | center | right ] + [ <percentage> | <length> | top | center | bottom ] ? ; +</pre> + +<pre class="eval">background-position: [ top | center | bottom ]; +</pre> + +<pre class="eval">background-position: inherit; +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt>{{ Cssxref("porcentaje") }} <percentage></dt> + <dd>Con el par de valores '0% 0%', la esquina izquierda de la imagen es alineada con la esquina izquierda del borde del espaciado de la caja. Un valor '100% 100%' pone la esquina inferior de la imagen en la esquina inferior del área de espaciado. Con un valor '14% 84%', el punto a 14% a la derecha y 84% abajo de la imagen es colocado en el punto al 14% derecha y 84% abajo del área de espaciado.</dd> + <dt>{{ Cssxref("length") }} <length></dt> + <dd>con un valor '2cm 1cm', la esquina superior izquierda de la imagen es colocada a 2 cm a la derecha y a 1cm debajo de la esquina superior izquierda del área de espaciado.</dd> + <dt>top left y left top</dt> + <dd>Es igual a '0% 0%'.</dd> + <dt>top, top center y center top</dt> + <dd>Es igual a '50% 0%'.</dd> + <dt>right top y top right</dt> + <dd>Es igual a '100% 0%'.</dd> + <dt>left, left center y center left</dt> + <dd>Es igual a '0% 50%'.</dd> + <dt>center and center center</dt> + <dd>Es igual a '50% 50%'.</dd> + <dt>right, right center y center right</dt> + <dd>Es igual a '100% 50%'.</dd> + <dt>bottom left y left bottom</dt> + <dd>Es igual a '0% 100%'.</dd> + <dt>bottom, bottom center y center bottom</dt> + <dd>Es igual a '50% 100%'.</dd> + <dt>bottom right y right bottom</dt> + <dd>Es igual a '100% 100%'.</dd> +</dl> + +<p>Si solo se especifica un valor, se entenderá que es la posición horizontal con la vertical al 50%. De otra manera el primer valor especifica la posición horizontal. Se admiten valores negativos y combinaciones de palabras claves, largos (<small>lenght</small>) o porcentajes, pero en el caso de mezclar las palabras claves con otros valores, '<strong>left' y 'right'</strong> solo se utilizarán como primer valor y '<strong>top' y 'bottom'</strong> como segundo.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<pre>.exampleone { + background-image: url("logo.png"); + background-position: top center; +} + +.exampletwo { + background-image: url("logo.png"); + background-position: 25% 75%; +} + +.examplethree { + background-image: url("logo.png"); + background-position: 2cm bottom; +} + +.examplefour { + background-image: url("logo.png"); + background-position: center 10%; +} + +.examplefive { + background-image: url("logo.png"); + background-position: 2cm 50%; +} + +</pre> + +<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-position">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-position">CSS 3</a></li> +</ul> + +<h3 id="Compatibilidad" name="Compatibilidad">Compatibilidad</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p> diff --git a/files/es/web/css/background-repeat/index.html b/files/es/web/css/background-repeat/index.html new file mode 100644 index 0000000000..660f22df27 --- /dev/null +++ b/files/es/web/css/background-repeat/index.html @@ -0,0 +1,250 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +tags: + - CSS + - 'CSS:Referencias' + - Fondos CSS + - Propiedades de CSS + - Referências + - Todas_las_Categorías +translation_of: Web/CSS/background-repeat +--- +<div>{{CSSRef}}</div> + +<p>La propiedad de <a href="/en-US/docs/CSS">CSS</a> <strong><code>background-repeat</code></strong> define como se repiten los fondos del documento. Un fondo de imagen puede ser repetido sobre el eje horizontal, el eje vertical, ambos ejes, o no estar repetido.</p> + +<p> </p> + +<div>{{EmbedInteractiveExample("pages/css/background-repeat.html")}} </div> + +<div> </div> + +<div class="hidden"> +<p>La fuente de este ejemplo interactivo es de GitHub. Si estás interesado en contribuir a los ejemplos interactivos, por favor accee a <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud para colaborar.</p> +</div> + +<p> </p> + +<p> </p> + +<pre class="brush: css no-line-numbers">/* One-value syntax */ +background-repeat: repeat-x; +background-repeat: repeat-y; +background-repeat: repeat; +background-repeat: space; +background-repeat: round; +background-repeat: no-repeat; + +/* Two-value syntax: horizontal | vertical */ +background-repeat: repeat space; +background-repeat: repeat repeat; +background-repeat: round space; +background-repeat: no-repeat round; + +/* Global values */ +background-repeat: inherit; +background-repeat: initial; +background-repeat: unset; +</pre> + +<div> </div> + +<div class="hidden"> </div> + +<p> </p> + +<p>Por defecto, las imágenes repetidas son ajustadas al tamaño del elemento, pero pueden ser reescaladas para ajustarse (usando <em>round) </em>o igualmente distribuido desde un extremo a otro (usando <em>space</em>).</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><repeat-style></code></dt> + <dd>Los atributos de valor único son una abreviación de los atributos de doble valor.</dd> + <dd> + <table class="standard-table"> + <tbody> + <tr> + <td><strong>Valor único</strong></td> + <td><strong>Doble valor equivalente</strong></td> + </tr> + <tr> + <td><code>repeat-x</code></td> + <td><code>repeat no-repeat</code></td> + </tr> + <tr> + <td><code>repeat-y</code></td> + <td><code>no-repeat repeat</code></td> + </tr> + <tr> + <td><code>repeat</code></td> + <td><code>repeat repeat</code></td> + </tr> + <tr> + <td><code>space</code></td> + <td><code>space space</code></td> + </tr> + <tr> + <td><code>round</code></td> + <td><code>round round</code></td> + </tr> + <tr> + <td><code>no-repeat</code></td> + <td><code>no-repeat no-repeat</code></td> + </tr> + </tbody> + </table> + En los atributos de doble valor, el primer valor se comporta usando la repetición horizontal y el segundo valor representa el comportamiento de repetición vertical. Aquí se explica como cada opción funciona con cada dirección:</dd> + <dd> + <table class="standard-table"> + <tbody> + <tr> + <td><code>repeat</code></td> + <td> La imagen se repite hasta cobrir todo el fondo existente. La última imagen debe ser recortada si no encaja.</td> + </tr> + <tr> + <td><code>space</code></td> + <td>La imagen se repite lo máximo posible sin recortarse. La primera y última imagen son fijadas a cada lado del elemento, y el espacio blanco es distribuido igualmente entre las imágenes. La propiedad {{cssxref("background-position")}} es ignorada a menos que una sola imagen pueda ser desplegada sin recortar. El único caso donde se recorta usando <code>space</code> es cuando no hay suficiente sitio para desplegar una imagen.</td> + </tr> + <tr> + <td><code>round</code></td> + <td>Como el espacio permitido aumenta, las imágenes repetidas se estrechan (sin dejar huecos) hasta que haya espacio suficiente (espacio restante >= la mitad del ancho de la imagen) para que otra sea añadida. Cuando la próxima imagen es añadida, todas las demás son comprimidas al espacio disponible. Ejemplo: Una imagen con un ancho inicial de 260px, se repite 3 veces, debería estirarse hasta que el tamaño sea de 300px, luego otra imagen debe ser añadida. Luego deberían comprimirse hasta los 225px.</td> + </tr> + <tr> + <td><code>no-repeat</code></td> + <td>La imagen no se repite (y por lo tanto el area coloreada de la imagen de fondo no debe ser rellenada completamente). La posición del fondo no repetido ies definida por la propiedad de CSS {{cssxref("background-position")}}.</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ol> + <li>no-repeat + <div class="one"></div> + </li> + <li>repeat + <div class="two"></div> + </li> + <li>repeat-x + <div class="three"></div> + </li> + <li>repeat-y + <div class="four"></div> + </li> + <li>space + <div class="five"></div> + </li> + <li>round + <div class="six"></div> + </li> + <li>repeat-x, repeat-y (multiple images) + <div class="seven"></div> + </li> +</ol></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">/* Shared for all DIVS in example */ +ol, +li { + margin: 0; + padding: 0; +} +li { + margin-bottom: 12px; +} +div { + background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); + width: 160px; + height: 70px; +} + +/* Background repeats */ +.one { + background-repeat: no-repeat; +} +.two { + background-repeat: repeat; +} +.three { + background-repeat: repeat-x; +} +.four { + background-repeat: repeat-y; +} +.five { + background-repeat: space; +} +.six { + background-repeat: round; +} + +/* Multiple images */ +.seven { + background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), + url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); + background-repeat: repeat-x, + repeat-y; + height: 144px; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>En este ejemplo, cada elemento de la lista coincide con un valor diferente de <code>background-repeat</code>.</p> + +<p>{{EmbedLiveSample('Examples', 240, 560)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Añade soporte para diferentes imágenes de fondo, el atributo de doble valor equivalente permite un comportamiento de repetición diferente para las direcciones verticales y horizontales, las palabras clave <code>space</code> y <code>round</code> , y para fondos en elementos en la misma línea mediante la definición precisa de la zona disponible del fondo.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Sin cambios significativos.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p class="hidden">La tabla de compatibilidad en esta página está generada a partir de datos esrtucturados. Si quieres contribuir a estos datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y mándanos una solicitud.</p> + +<p>{{Compat("css.properties.background-repeat")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Usando diferentes fondos</a></li> +</ul> diff --git a/files/es/web/css/background-size/index.html b/files/es/web/css/background-size/index.html new file mode 100644 index 0000000000..827eb7b8e5 --- /dev/null +++ b/files/es/web/css/background-size/index.html @@ -0,0 +1,235 @@ +--- +title: background-size +slug: Web/CSS/background-size +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-size +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>background-size</code></strong> especifica el tamaño de las imágenes de fondo.</p> + +<div class="note"><strong>Nota:</strong> Si el valor de esta propiedad no se encuentra en una propiedad abreviada {{ cssxref("background") }} esta es aplicada para los elementos después de la propiedad CSS <code>background-size</code>, el valor de esta propiedad <span id="result_box" lang="es"><span class="gt-trans-draggable hps">se restablece</span> <span class="gt-trans-draggable hps">a su valor</span> <span class="gt-trans-draggable hps">inicial de la</span> <span class="gt-trans-draggable hps">propiedad abreviada</span><span class="gt-trans-draggable">.</span></span></div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">background-size: <em>background-size</em>[ <em>background-size</em>]* +</pre> + +<p>donde <strong>: </strong></p> + +<dl> + <dt><em><strong>background-size</strong></em></dt> + <dd style="margin-left: 40px;">Es una de las palabras claves:</dd> + <dd style="margin-left: 40px;"> + <ul> + <li style="margin-left: 40px;"><strong><code>contain</code></strong><br> + <span id="result_box" lang="es"><span class="hps">Escala la imagen al mayor tamaño posible sin recortarla ni estirarla.</span></span></li> + <li style="margin-left: 40px;"><strong><code>cover</code></strong><br> + <span id="result_box" lang="es"><span class="gt-trans-draggable">Escala la imagen al mayor tamaño posible sin estirarla. Si las proporciones de la imagen difieren de las del elemento, es recortada vertical u horizontalmente para que no quede un espacio vacío.</span></span></li> + </ul> + <span id="result_box" lang="es"><span class="gt-trans-draggable hps">O bien,</span> <span class="gt-trans-draggable hps">uno o dos de</span> <span class="gt-trans-draggable hps">los siguientes valores,</span> <span class="gt-trans-draggable hps">que denota el</span> <span class="gt-trans-draggable hps">tamaño</span> <span class="gt-trans-draggable hps">horizontal</span> <span class="gt-trans-draggable hps">y</span> <span class="gt-trans-draggable hps">el tamaño vertical</span> <span class="atn gt-trans-draggable hps">respectivamente (</span><span class="gt-trans-draggable">si sólo es</span> <span class="gt-trans-draggable hps">especificado uno</span><span class="gt-trans-draggable">, el valor predeterminado</span> para el segundo es auto<span class="gt-trans-draggable">):</span></span> + + <ul> + <li>Un valor {{cssxref("<percentage>")}} que escala la imagen de fondo en la dimensión correspondiente <span id="result_box" lang="es"><span class="gt-trans-draggable hps">al porcentaje especificado</span> <span class="gt-trans-draggable hps">del área</span><span class="gt-trans-draggable hps"> de posicionamiento</span> <span class="gt-trans-draggable hps">de fondo</span><span class="gt-trans-draggable">,</span></span> que viene el valor determinado {{ cssxref("background-origin") }}. <span id="result_box" lang="es"><span class="gt-trans-draggable hps">El</span> <span class="gt-trans-draggable hps">área de posicionamiento</span> <span class="gt-trans-draggable hps">del fondo es</span><span class="gt-trans-draggable">, por defecto,</span> <span class="gt-trans-draggable hps">el área que contiene</span> <span class="gt-trans-draggable hps">el contenido</span> <span class="gt-trans-draggable hps">de la caja y</span> <span class="gt-trans-draggable hps">su relleno</span><span class="gt-trans-draggable">, el área</span> <span class="gt-trans-draggable hps">también</span> <span class="gt-trans-draggable hps">se puede cambiar a</span> <span class="gt-trans-draggable hps">simplemente el</span> <span class="gt-trans-draggable hps">contenido o</span> <span class="gt-trans-draggable hps">el área que contiene</span> <span class="gt-trans-draggable hps">bordes</span><span class="gt-trans-draggable">, el relleno y</span> <span class="gt-trans-draggable hps">contenido.</span> <span class="gt-trans-draggable hps">Si el fondo</span> <span class="gt-trans-draggable hps">de</span> <span class="atn gt-trans-draggable hps">{</span><span class="atn gt-trans-draggable">{</span><span class="gt-trans-draggable">cssxref</span> <span class="atn gt-trans-draggable hps">(</span><span class="atn gt-trans-draggable hps">"background-</span><span class="gt-trans-draggable">attachment"</span><span class="gt-trans-draggable">, "attachment</span><span class="gt-trans-draggable">")}</span><span class="gt-trans-draggable">}</span> <span class="gt-trans-draggable hps">es fija, el</span> <span class="gt-trans-draggable hps">área de posicionamiento</span> del <span class="gt-trans-draggable hps">fondo</span> <span class="gt-trans-draggable hps">es más bien</span> <span class="gt-trans-draggable hps">toda el área de</span> <span class="gt-trans-draggable hps">la ventana del navegador</span><span class="gt-trans-draggable">, sin incluir el</span> <span class="gt-trans-draggable hps">área cubierta por</span> <span class="gt-trans-draggable hps">las barras de desplazamiento</span> <span class="gt-trans-draggable hps">si están presentes</span><span class="gt-trans-draggable">.</span> <span class="gt-trans-draggable hps">Porcentajes</span> <span class="gt-trans-draggable hps">negativos no</span> <span class="gt-trans-draggable hps">son permitidos.</span></span></li> + <li>Un valor {{cssxref("<length>")}} q<span lang="es"><span class="gt-trans-draggable hps">ue escala</span> <span class="gt-trans-draggable hps">la</span> <span class="gt-trans-draggable hps">imagen de fondo a</span> <span class="gt-trans-draggable hps">la longitud especificada en</span> <span class="gt-trans-draggable hps">la dimensión correspondiente.</span> <span class="gt-trans-draggable hps">Longitudes</span> <span class="gt-trans-draggable hps">negativas no</span> <span class="gt-trans-draggable hps">están permitidos.</span></span></li> + <li><span id="result_box" lang="es"><span class="gt-trans-draggable hps">La</span> <span class="gt-trans-draggable hps">palabra clave auto</span> <span class="gt-trans-draggable hps">que escala el</span> <span class="gt-trans-draggable hps">fondo de la imagen</span> <span class="gt-trans-draggable hps">en la dirección correspondiente</span> <span class="gt-trans-draggable hps">de modo que su</span> <span class="gt-trans-draggable hps">proporción</span> escencial <span class="gt-trans-draggable hps">se mantiene</span><span class="gt-trans-draggable">.</span></span></li> + </ul> + </dd> +</dl> + +<p><span id="result_box" lang="es"><span class="gt-trans-draggable hps">La interpretación</span> <span class="gt-trans-draggable hps">de los valores posibles</span> <span class="gt-trans-draggable hps">depende de las dimensiones</span> propias <span class="gt-trans-draggable hps">de la imagen</span> <span class="atn gt-trans-draggable hps">(</span><span class="gt-trans-draggable">ancho y alto)</span> <span class="gt-trans-draggable hps">y proporción</span> <span class="atn gt-trans-draggable hps">propia (</span><span class="gt-trans-draggable">relación entre la anchura</span> <span class="gt-trans-draggable hps">y altura).</span> <span class="gt-trans-draggable hps">Una imagen de</span> <span class="gt-trans-draggable hps">mapa de bits</span> <span class="gt-trans-draggable hps">siempre tiene</span> <span class="gt-trans-draggable hps">dimensiones propias</span> <span class="gt-trans-draggable hps">y una proporción</span> <span class="gt-trans-draggable hps">propia.</span> <span class="gt-trans-draggable hps">Una imagen del vector</span> <span class="gt-trans-draggable hps">puede tener</span> <span class="gt-trans-draggable hps">ambas dimensiones</span> <span class="atn gt-trans-draggable hps">propias (</span><span class="gt-trans-draggable">y por lo tanto</span> <span class="gt-trans-draggable hps">debe tener una</span> <span class="gt-trans-draggable hps">proporción</span> propia<span class="gt-trans-draggable">)</span><span class="gt-trans-draggable">.</span> <span class="gt-trans-draggable hps">También puede tener</span> <span class="gt-trans-draggable hps">una o ningún</span>a <span class="gt-trans-draggable hps">dimensiones propias</span><span class="gt-trans-draggable">,</span> <span class="gt-trans-draggable hps">y</span> <span class="gt-trans-draggable hps">en cualquier caso se</span> <span class="gt-trans-draggable hps">podría o no</span> <span class="gt-trans-draggable hps">tener</span> <span class="gt-trans-draggable hps">una</span> <span class="gt-trans-draggable hps">proporción</span> <span class="gt-trans-draggable hps">propia.</span> <span class="gt-trans-draggable hps">Los gradientes son</span> <span class="gt-trans-draggable hps">tratados como</span> <span class="gt-trans-draggable hps">imágenes</span> <span class="gt-trans-draggable hps">sin</span> <span class="gt-trans-draggable hps">dimensiones propias</span> <span class="gt-trans-draggable hps">o proporción</span> propia<span class="gt-trans-draggable hps">.</span></span></p> + +<div class="geckoVersionNote" style=""> +<p>{{ gecko_callout_heading("8.0") }}</p> + +<p><span id="result_box" lang="es"><span class="hps">Este comportamiento ha cambiado</span> <span class="hps">en</span> <span class="hps">Gecko</span> <span class="hps">8.0</span> <span class="atn hps">{</span><span class="atn">{</span><span>geckoRelease</span> <span class="atn hps">("</span><span>8.0"</span><span>)}</span><span>}.</span> <span class="hps">Antes de esto,</span> <span class="hps">los gradientes se</span> <span class="hps">tratan como</span> <span class="hps">imágenes</span> <span class="hps">sin</span> <span class="hps">dimensiones propias</span><span>,</span> <span class="hps">con</span> <span class="hps">una</span> <span class="hps">proporción</span> propi<span class="hps">a</span> <span class="hps">idéntica al área</span><span class="hps"> de posicionamiento</span> <span class="hps">de fondo.</span></span></p> +</div> + +<p> </p> + +<p><span id="result_box" lang="es"><span class="hps">Las imágenes de fondo</span> <span class="hps">generados a partir de</span> <span class="hps">elementos</span> <span class="atn hps">con </span></span>{{ cssxref("-moz-element") }}<span id="result_box" lang="es"> <span class="hps">(que en realidad</span> <span class="hps">coincide con</span> <span class="hps">un elemento)</span> <span class="hps">se tratan actualmente</span> <span class="hps">como</span> <span class="hps">las imágenes con</span> <span class="hps">las</span> <span class="hps">dimensiones del elemento</span><span>, o</span> <span class="hps">de</span> <span class="hps">la</span> <span class="hps">zona de posicionamiento</span> <span class="hps">de fondo si</span> <span class="hps">el elemento es</span> <span class="hps">SVG</span><span>,</span> <span class="hps">con</span> <span class="hps">la proporción</span> <span class="hps">propia</span> <span class="hps">correspondiente</span><span>.</span></span></p> + +<div class="note"><span id="result_box" lang="es"><span class="hps"><strong>Nota</strong>: El comportamiento de los <code><degradados></code> cambió en Gecko 8.0 </span></span>{{geckoRelease("8.0")}}. Anteriormente se trataban como imágenes sin dimensiones intrínsecas, pero con proporciones intrínsecas idénticas a las del área de posicionamiento del fondo.</div> + +<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">tamaño representado</span> <span class="hps">de</span> <span class="hps">la imagen de fondo</span> <span class="hps">se calcula como</span> <span class="hps">sigue:</span></span></p> + +<dl> + <dt><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">ambos componentes de</span> </span><code>background-size</code><span id="result_box" lang="es"> <span class="hps">se especifican</span> <span class="hps">y no son</span> <span class="hps">auto</span></span>:</dt> + <dd><span id="result_box" lang="es"><span class="hps">La imagen de fondo</span> <span class="alt-edited hps">representa</span> a<span class="hps">l tamaño</span> <span class="hps">especificado.</span></span></dd> + <dt>si el <code>background-size</code> es <code>contain</code> o <code>cover</code>:</dt> + <dd><span id="result_box" lang="es"><span class="hps">La imagen</span> <span class="alt-edited hps">es renderizada</span>, <span class="hps">preservando su</span> <span class="hps">proporción</span> propia<span>,</span> <span class="hps">en el tamaño mayor</span> <span class="hps">contenido dentro de</span><span>, o cubriendo</span><span>,</span> <span class="hps">el</span> <span class="hps">área de posicionamiento</span> <span class="hps">de fondo.</span> <span class="hps">Si</span> <span class="hps">la</span> <span class="hps">imagen no tiene una</span> <span class="hps">proporción</span> <span class="hps">propia</span><span>,</span> <span class="hps">entonces</span> <span class="hps">se representa</span> a<span class="hps">l tamaño de la</span> <span class="hps">zona de posicionamiento</span> <span class="hps">de fondo.</span></span></dd> + <dt>Si el <code>background-size</code> es <code>auto</code> o <code>auto auto</code>:</dt> + <dd><span id="result_box" lang="es"><span class="hps">Si la imagen tiene</span> <span class="hps">dos</span> <span class="hps">dimensiones propias</span><span>, se representa</span> <span class="hps">en ese tamaño.</span> <span class="hps">Si</span> <span class="hps">no tiene dimensiones</span> propi<span class="hps">as y</span> <span class="hps">no</span> <span class="hps">proporción</span> <span class="hps">propia</span><span>, se representa</span> <span class="hps">en</span> <span class="hps">el tamaño del área</span><span class="hps"> de posicionamiento</span> <span class="hps">de fondo.</span> <span class="hps">Si no tiene</span> <span class="hps">dimensiones</span><span>, pero tiene una</span> <span class="hps">proporción</span><span>, se</span> <span class="hps">representa como</span> <span class="hps">si</span> <span class="hps">se hubiera especificado</span> <span class="hps">contener</span> <span class="hps">en su lugar.</span> <span class="hps">Si la imagen tiene</span> <span class="hps">una</span> <span class="hps">dimensión</span> <span class="hps">propia y</span> <span class="hps">una</span> <span class="hps">proporción</span><span>, ha</span> <span class="hps">rendido en</span> <span class="hps">el tamaño determinado</span> <span class="hps">por esa</span> <span class="hps">única dimensión</span> <span class="hps">y la proporción</span><span>.</span> <span class="hps">Si la imagen tiene</span> <span class="hps">una dimensión</span> propia <span class="hps">pero</span> <span class="hps">proporción</span> <span class="hps">no, se</span> <span class="hps">representa utilizando</span> <span class="hps">la dimensión propia</span> <span class="hps">y</span> <span class="hps">la dimensión correspondiente del área</span><span class="hps"> de posicionamiento</span> <span class="hps">de fondo.</span></span></dd> + <dt>Si el background-size tiene un <code>auto</code> componente y un non-<code>auto</code> componente:</dt> + <dd><span id="result_box" lang="es"><span class="hps">Si la imagen tiene</span> <span class="hps">una</span> <span class="hps">proporción</span> propia<span class="hps">, entonces</span> <span class="hps">hacen</span> <span class="hps">uso de la dimensión</span> <span class="hps">especificada</span><span>,</span> <span class="hps">y</span> <span class="hps">calcula</span> <span class="hps">la otra dimensión</span> <span class="hps">de</span> <span class="hps">la dimensión especificada</span> <span class="hps">y</span> <span class="hps">la proporción</span> propia<span class="hps">.</span> <span class="hps">Si la</span> <span class="hps">imagen no tiene una</span> <span class="hps">parte</span> propia<span>, utilice</span> <span class="hps">la dimensión especificada</span> <span class="hps">para esa dimensión.</span> <span class="hps">Por</span> <span class="hps">la otra dimensión</span><span>, utilice la</span> <span class="hps">imagen</span> <span class="hps">de</span> <span class="hps">dimensión propia</span> <span class="hps">correspondiente, si</span> <span class="hps">es que existe.</span> <span class="hps">Si</span> <span class="hps">no hay ninguna dimensión</span> propia <span class="hps">tal, el uso</span> <span class="hps">de la</span> <span class="hps">dimensión correspondiente del </span><span class="hps">área de posicionamiento</span> <span class="hps">de fondo.</span></span></dd> +</dl> + +<p><span id="result_box" lang="es"><span class="hps">Tenga en cuenta</span> <span class="hps">que los antecedentes</span> <span class="hps">de tamaño de</span> <span class="hps">imágenes</span> <span class="hps">vectoriales que</span> <span class="hps">carecen de</span> <span class="hps">dimensiones propias</span> <span class="hps">o la proporción</span> <span class="hps">no</span> <span class="hps">se</span> <span class="hps">ha aplicado plenamente</span> <span class="hps">en</span> <span class="hps">todos los navegadores.</span> <span class="hps">Tenga cuidado con</span> <span class="hps">confiar en el</span> <span class="hps">comportamiento descrito anteriormente</span><span>, y la prueba</span> <span class="hps">en varios navegadores</span> <span class="atn hps">(</span><span>incluyendo específicamente</span> <span class="hps">las versiones de</span> <span class="hps">Firefox 7</span> <span class="hps">o anterior y</span> <span class="hps">Firefox 8</span> <span class="hps">o superior</span><span>) para asegurarse de</span> <span class="hps">versiones</span> <span class="hps">diferentes</span> <span class="hps">son aceptables.</span></span></p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Esta demostración de backround-size: cover y esta demostración de background-size: contain están destinados a ser abiertos en nuevas ventanas para que pueda ver <span id="result_box" lang="es"><span class="gt-trans-draggable hps">cómo</span> contain<span class="gt-trans-draggable hps"> y</span> cover <span class="gt-trans-draggable hps">comportarse</span> <span class="gt-trans-draggable hps">cuando las dimensiones</span> <span class="gt-trans-draggable hps">de</span>l área <span class="gt-trans-draggable hps">de posicionamiento</span> <span class="gt-trans-draggable hps">de</span> <span class="gt-trans-draggable hps">fondo</span> <span class="gt-trans-draggable hps">variar.</span> <span class="gt-trans-draggable hps">Esta serie de</span> <span class="gt-trans-draggable hps">demostraciones de</span> <span class="gt-trans-draggable hps">cómo</span> <span class="gt-trans-draggable hps">funciona</span> <span class="gt-trans-draggable hps">el background-size</span> <span class="gt-trans-draggable hps">e interactúa</span> <span class="gt-trans-draggable hps">con otras</span> <span class="gt-trans-draggable hps">propiedades de</span> background-<span class="gt-trans-draggable hps">*</span> </span><span id="result_box" lang="es"><span class="hps">debe</span> <span class="hps">casi</span> <span class="hps">cubrir el suelo</span> <span class="hps">restante</span> <span class="hps">en el uso de</span> <span class="hps">background-size</span> <span class="hps">solo y</span> <span class="hps">en combinación</span> <span class="hps">con otras propiedades.</span></span></p> + +<h2 id="Notas">Notas</h2> + +<p>Si especifíca un degradado como fondo y tiene especificado un background-size para ir con ella, es mejor no especificar un tamaño que utilice un solo componente auto, o es especificado usando solo un valor de anchura (por ejemplo, background-size: 50%). Renderizado de gradientes en tales casos cambiaron en Firefox 8, y en la actualidad es generalmente inconsistente en todos los navegadores, que no todo implementa el renderizadando en total conformidad con la especificación CSS3 background-size y con la especificación de valores de imagen CSS3 gradiente.</p> + +<pre class="brush: css">.bar { + width: 50px; height: 100px; + background-image: gradient(...); + + /* NO RECOMENDADO */ + background-size: 25px; + background-size: 50%; + background-size: auto 50px; + background-size: auto 50%; + + /* OKAY */ + background-size: 25px 50px; + background-size: 50% 50%; +} +</pre> + +<p>Tenga en cuenta que particularmente no es recomendado usar una dimensión de píxeles y una dimensión auto con degradado, porque es imposible replicar el renderizado en las versiones de Firefox anteriores a 8, y en los navegadores que no implementaron el renderizado de Firefox 8,<span class="long_text" id="result_box" lang="es"><span class="gt-trans-draggable"> sin saber</span> <span class="gt-trans-draggable hps">el tamaño exacto</span> <span class="gt-trans-draggable hps">del elemento cuyo</span> <span class="gt-trans-draggable hps">fondo</span> <span class="gt-trans-draggable hps">se ha especificado</span><span class="gt-trans-draggable">.</span></span></p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estados</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegador</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th colspan="3">Safari (WebKit)</th> + </tr> + <tr> + <td rowspan="2">Soporte Básico</td> + <td>1.0{{ property_prefix("-webkit") }} [2]</td> + <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]</td> + <td rowspan="2">9.0</td> + <td>9.5{{ property_prefix("-o") }}<br> + with some bugs [1]</td> + <td>3.0 (522){{ property_prefix("-webkit") }}<br> + but from an older CSS3 draft [2]</td> + <td rowspan="2"> </td> + <td rowspan="2"> </td> + </tr> + <tr> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>10.0</td> + <td>4.1 (532)</td> + </tr> + <tr> + <td>Soporte para<br> + <code>contain</code> y <code>cover</code></td> + <td>3.0</td> + <td>{{ CompatGeckoDesktop("1.9.2") }}</td> + <td>9.0</td> + <td>10.0</td> + <td colspan="3">4.1 (532)</td> + </tr> + <tr> + <td>Soporte para SVG backgrounds</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("8.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td colspan="3">{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Windows Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}<br> + 2.3</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Soporte para SVG backgrounds</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("8.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p><span class="long_text" id="result_box" lang="es"><span class="hps">[1</span><span>]</span> <span class="hps">Opera 9.5</span> <span class="atn hps">'</span><span>s calcula</span><span class="hps"> el área de</span> <span class="hps">posicionamiento</span> de background <span class="hps">es incorrecto</span> <span class="hps">para los background</span> <span class="hps">fijos.</span> <span class="hps">Opera</span> <span class="hps">9,5</span> <span class="hps">también</span> <span class="hps">interpreta la forma</span> <span class="hps">de dos valores</span> <span class="hps">como</span> <span class="hps">un factor de escala</span> <span class="hps">horizontal</span> <span class="hps">y</span><span>,</span> <span class="hps">por las apariencias,</span> <span class="hps">una dimensión</span> <span class="hps">de recorte vertical</span><span>.</span> <span class="hps">Esto ha</span> <span class="hps">sido arreglado en</span> <span class="hps">Opera 10.</span></span></p> + +<p>[2] WebKit-based browsers originally implemented an older draft of CSS3<code> background-size </code>in which an omitted second value is treated as <em>duplicating</em> the first value; this draft does not include the<code> contain </code>or<code> cover </code>keywords.</p> + +<p><span class="long_text" id="result_box"><span style="background-color: #ffffff;" title="[2] WebKit-based browsers originally implemented an older draft of CSS3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.">[2] Los navegadores basados en WebKit- originalmente implementado un proyecto anterior de background-size CSS3 en que se trata de un valor omitido segundo como duplicar el primer valor; este proyecto no incluye el cover o contain palabras claves.</span></span></p> + +<p>[3] Konqueror 3.5.4 <code>soportan -khtml-background-size</code>.</p> + +<p>[4] <span class="long_text" id="result_box" lang="es"><span>Si bien</span> <span class="hps">esta</span> <span class="hps">propiedad es nueva en</span> </span> Gecko 1.9.2 (Firefox 3.6), <span class="long_text" id="result_box" lang="es"><span class="gt-trans-draggable">es</span> <span class="gt-trans-draggable hps">posible estirar</span> <span class="gt-trans-draggable hps">una imagen completamente</span> <span class="gt-trans-draggable hps">sobre el fondo</span> <span class="gt-trans-draggable hps">en Firefox</span> <span class="gt-trans-draggable hps">3.5 usando</span></span> {{ cssxref("-moz-border-image") }}.</p> + +<pre class="brush:css">.foo { + background-image: url(bg-image.png); + + -webkit-background-size: 100% 100%; /* Safari 3.0 */ + -moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */ + -o-background-size: 100% 100%; /* Opera 9.5 */ + background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */ + + -moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */ +}</pre> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> + <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="en-US/docs/CSS/Multiple backgrounds">Multiple backgrounds</a></li> + <li><a href="/en-US/docs/CSS/Scaling_background_images" title="/en-US/docs/CSS/Scaling_background_images">Scaling background images</a></li> +</ul> diff --git a/files/es/web/css/background/index.html b/files/es/web/css/background/index.html new file mode 100644 index 0000000000..d982708096 --- /dev/null +++ b/files/es/web/css/background/index.html @@ -0,0 +1,138 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/background +--- +<p>{{CSSRef}}</p> + +<p>La propiedad <code>background</code> es un atajo para definir los valores individuales del fondo en una única regla CSS. Se puede usar <code>background</code> para definir los valores de una o de todas las propiedades siguientes: {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color", "color") }}, {{ Cssxref("background-image", "image") }}, {{ Cssxref("background-position", "position") }}, {{ Cssxref("background-repeat", "repeat") }}.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales</li> + <li>Se aplica a: todos los elementos</li> + <li>{{ Cssxref("inheritance", "Herencia") }}: no</li> + <li>Porcentajes: permitido en {{ Cssxref("background-position", "posición") }}</li> + <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li> + <li>{{ Cssxref("computed value", "Valor calculada") }}: ver propiedades individuales</li> +</ul> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre>/* Usando <background-color> */ +background: green; + +/* Usando <bg-image> y <repeat-style> */ +background: url("test.jpg") repeat-y; + +/* Usando <box> and <background-color> */ +background: border-box red; + +/* Una sola imagen, centrada y escalada */ +background: no-repeat center/80% url("../img/image.png");</pre> + +<p>La propiedad <code>background</code> se especifica como una o más capas de fondo, separadas por comas.</p> + +<p>La sintaxis de cada capa es la siguiente:</p> + +<ul> + <li>Cada capa puede incluir cero o una ocurrencia de cualquiera de los siguientes valores + <ul> + <li><code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cattachment%3E"><attachment></a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cbg-image%3E"><bg-image></a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cposition%3E"><position></a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cbg-size%3E"><bg-size></a></code></li> + <li><code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Crepeat-style%3E"><repeat-style></a></code></li> + </ul> + </li> + <li>El valor <code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cbg-size%3E"><bg-size></a></code> sólo puede ser incluido inmediatamente después de la <a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cposition%3E"><position></a>, separado con el carácter '/', así: "<code>center/80%</code>".</li> + <li>El valor <a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cbox%3E"><box></a> puede ser incluido cero, una o dos veces. Si se incluye una vez, establece ambos {{cssxref("background-origin")}} y {{cssxref("background-clip")}}. Si se incluye dos veces, la primera ocurrencia establece {{cssxref("background-origin")}}, y el segundo conjunto {{cssxref("background-clip")}}.</li> + <li>El valor <code><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/background$edit#%3Cbackground-color%3E"><background-color></a></code> sólo puede ser incluido en la última capa especificada.</li> +</ul> + +<h2 id="Valores" name="Valores">Valores</h2> + +<dl> + <dt>background-color</dt> + <dd>ver <code><a href="/es/CSS/background-color" title="es/CSS/background-color">color</a></code>.</dd> + <dt>background-image </dt> + <dd>ver <code><a href="/es/CSS/background-image" title="es/CSS/background-image">image</a></code>.</dd> + <dt>background-repeat </dt> + <dd>ver <code><a href="/es/CSS/background-repeat" title="es/CSS/background-repeat">repeat</a></code>.</dd> + <dt>background-attachment </dt> + <dd>ver <code><a href="/es/CSS/background-attachment" title="es/CSS/background-attachment">background-attachment</a></code>.</dd> + <dt>background-position </dt> + <dd>ver <code><a href="/es/CSS/background-position" title="es/CSS/background-position">position</a></code>.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="topbanner"> + Starry sky<br/> + Twinkle twinkle<br/> + Starry sky +</p> +<p class="warning">Here is a paragraph<p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css' highlight:[2,6];">.warning { + background: red; +} + +.topbanner { + background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Ejemplos")}}</p> + +<h2 id="Notas" name="Notas">Notas</h2> + +<p>Tomando una declaración válida, la propiedad <code>background</code> inicia las propiedades individuales a sus valores iniciales para después asignarles los valores especificadas explícitamente en la declaración. No hay que definir un valor por cada propiedad individual, se cambia solo las que necesitamos en relación al valor por defecto.</p> + +<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background">CSS 3</a></li> +</ul> + +<h2 id="Compatibilidad_de_navegadores" name="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Mínima versión</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2> + +<p>{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}</p> diff --git a/files/es/web/css/basic-shape/index.html b/files/es/web/css/basic-shape/index.html new file mode 100644 index 0000000000..7ebf5eb24b --- /dev/null +++ b/files/es/web/css/basic-shape/index.html @@ -0,0 +1,208 @@ +--- +title: <basic-shape> +slug: Web/CSS/basic-shape +tags: + - CSS + - Referencia + - Tipo de Dato CSS +translation_of: Web/CSS/basic-shape +--- +<p>{{CSSRef}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>El tipo <strong><code><basic-shape></code></strong> puede ser especificado usando funciones de figura (shape) básicas. Al usar esta sintaxis para definir figuras, la caja de referencia es definida por cada propiedad que usa valores <code><basic-shape></code>. El sistema de coordenadas para la figura tiene su origen en la esquina superior izquierda de la caja de referencia, con el eje x corriendo hacia la derecha y el eje y, hacia abajo. Todas las longitudes expresadas en porcentajes son resueltas con base en las dimensiones de la caja de referencia.</p> + +<h2 id="Figuras_posibles">Figuras posibles</h2> + +<p>Las siguientes figuras son soportadas. Todos los valores <code><basic-shape></code> usan notación funcional y son definidos aquí usando la <a href="/es/docs/Web/CSS/Sintaxis_definición_de_valor">sintaxis de definición de valor</a>.</p> + +<dl> + <dt><code><a name="inset"></a>inset()</code></dt> + <dd> + <pre class="syntaxbox"><code>inset( <shape-arg>{1,4} [round <border-radius>]? )</code></pre> + + <p>Define un rectángulo incrustado.</p> + + <p>Cuando se proporcionan los cuatro primeros argumentos, representan la separación superior, derecha, inferior e izquierda del interior de la caja de referencia que define las posiciones de los bordes del rectángulo interior. Estos argumentos siguen la sintaxis de la abreviatura de margen, que permite definir los cuatro valores en uno, dos o cuatro valores.</p> + + <p>Los argumentos opcionales <a href="/es/docs/Web/CSS/border-radius"><code><border-radius></code></a> definen esquinas redondeadas para el rectángulo incrustado usando la sintaxis de abreviatura de border-radius.</p> + + <p>Cuando un par de valores inset en cualquier dimensión suman un valor mayor al límite de la dimensión disponible (como por ejemplo, que los valores inset izquierdo y derecho sean de 75% cada uno), se está definiendo una figura que no encierra ningun área. Para esta especificación, el resultado es un área flotante vacía.</p> + </dd> + <dt><code><a name="polygon"></a>polygon()</code></dt> + <dd> + <pre class="syntaxbox"><code>polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )</code></pre> + + <p><code><fill-rule></code> representa la <a href="/es/docs/Web/SVG/Attribute/fill-rule">regla de llenado</a> usada para determinar el área interior del polígono. Los valores posibles son <code>nonzero</code> y <code>evenodd</code>. El valor predeterminado es <code>nonzero</code>.</p> + + <p>Cada elemento par de la lista representa <em>x<sub>i</sub></em> y <em>y<sub>i</sub></em> - las coordenadas del eje x y el eje y en el vértice <em>i</em> del polígono.</p> + </dd> + <dt><code><a name="circle"></a>circle(</code>)</dt> + <dd> + <pre class="syntaxbox"><code><code><code>circle( [<shape-radius>]? [at <position>]? )</code></code></code></pre> + + <p>El argumento <code><shape-radius></code> representa a <em>r</em>, el radio del círculo. Los valores negativos son inválidos. Un valor en porcentaje es resuelto de la anchura y altura presentes de la caja de referencia como <code>sqrt(width^2+height^2)/sqrt(2)</code>.</p> + + <p>El argumento {{cssxref("<position>")}} define el centro del círculo. Su valor predeterminado es <code>center</code>.</p> + </dd> + <dt><code><a name="ellipse"></a>ellipse()</code></dt> + <dd> + <pre class="syntaxbox"><code><code><code>ellipse( [<shape-radius>{2}]? [at <position>]? )</code></code></code></pre> + + <p>El argumento <code><shape-radius></code> representa a r<sub>x</sub> y r<sub>y</sub>, los radios del eje x y del eje y de la elipse, en ese orden. Los valores negativos son inválidos. Los valores en porcentaje son resueltos contra la anchura (para r<sub>x</sub>) y altura (para r<sub>y</sub>) presentes en la caja de referencia.</p> + + <p>El argumento {{cssxref("<position>")}} define el centro de la elipse. Su valor predeterminado es <code>center</code>.</p> + </dd> +</dl> + +<p>Los argumentos no definidos arriba son definidos de esta forma:</p> + +<pre class="syntaxbox"><code><shape-arg> = <length> | <percentage> +<shape-radius> = <length> | <percentage> | closest-side | farthest-side</code></pre> + +<p>Define un radio para un círculo o elipse. Su valor predeterminado es <code>closest-side</code>.</p> + +<p><code>closest-side</code> usa la longitud desde el centro de la figura hasta el borde más cercano de la caja de referencia. Para círculos, es el lado más cercano en cualquier dimensión. Para elipses, es el lado más cercano en la dimensión del radio.</p> + +<p><code>farthest-side</code> use la longitud desde el centro de la figura hasta el lado más alejado de la caja de referencia. Para círculos, es el lado más alejado en cualquier dimensión. Para elipses, es el lado más alejado en la dimensión del radio.</p> + +<h2 id="Valores_Calculados_de_Figuras_Básicas">Valores Calculados de Figuras Básicas</h2> + +<p>Los valores en una función <code><basic-shape></code> son calculados segun se especifica, con estas excepciones:</p> + +<ul> + <li>Valores omitidos son incluidos y calculados acorde a su valor predeterminado.</li> + <li>Un valor {{cssxref("<position>")}} en <code>circle()</code> o <code>ellipse()</code> es calculado como un par de separaciones (horizontal y después vertical) desde el origen superior izquierdo, cada uno dado como combinación de una longitud absoluta y un porcentaje.</li> + <li>Un valor <a href="/en-US/docs/Web/CSS/border-radius"><code><border-radius></code></a> en <code>inset()</code> es calculado como una lista expandida de ocho valores {{cssxref("length")}} o de porcentaje.</li> +</ul> + +<h2 id="Interpolación_de_Figuras_Básicas">Interpolación de Figuras Básicas</h2> + +<div>Para interpolar dos figuras, se aplican las reglas a continuación. Los valores en la función de figura se interpolan como una lista simple. La lista de valores se interpola como {{cssxref("length", "length")}}, {{cssxref("percentage", "percentage")}}, o {{cssxref("calc", "calc")}} donde sea posible. Si los valores listados no son de los de esos tipos pero son idénticos (por ejemplo, tener <code>nonzero</code> en la misma posición en ambas listas), sí se interpolan esos valores.</div> + +<div> </div> + +<ul> + <li>Ambas figuras deben usar la misma figura de referencia.</li> + <li>Si ambas figuras son del mismo tipo, <code>ellipse()</code> o <code>circle()</code>, y ninguno de los radios usa las palabras clave <code>closest-side</code> o <code>farthest-side</code> keywords, se interpola entre cada valor de las funciones de figura.</li> + <li>Si ambas figuras son de tipo <code>inset()</code>, se interpola entre cada valor de las funciones de figura.</li> + <li>Si ambas figuras son de tipo <code>polygon()</code>, ambos polígonos tienen el mismo número de vértices y usan la misma regla <a href="/es/docs/Web/SVG/Attribute/fill-rule"><code><fill-rule></code></a>, se interpola entre cada valor de la función de figura.</li> + <li>En cualquier otro casa no se especifica la interpolación.</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre>TODO</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificicación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}</td> + <td>{{ Spec2('CSS Shapes') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{compatVersionUnknown()}}</td> + <td>{{CompatGeckoDesktop(47)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{compatVersionUnknown()}}</td> + </tr> + <tr> + <td><code>inset()</code></td> + <td>{{compatUnknown()}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{compatUnknown()}}</td> + </tr> + <tr> + <td>Animaciones</td> + <td>{{compatUnknown()}}</td> + <td>{{CompatGeckoDesktop(49)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{compatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{compatVersionUnknown()}}</td> + <td>{{compatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile(47)}} (behind a pref)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{compatVersionUnknown()}}</td> + </tr> + <tr> + <td><code>inset()</code></td> + <td>{{compatUnknown()}}</td> + <td>{{compatVersionUnknown()}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{compatUnknown()}}</td> + </tr> + <tr> + <td>Animaciones</td> + <td>{{compatUnknown()}}</td> + <td>{{compatUnknown()}}</td> + <td>{{CompatGeckoMobile(49)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{compatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><code>{{cssxref("clip-path")}}</code></li> + <li><code>{{cssxref("shape-outside")}}</code></li> +</ul> diff --git a/files/es/web/css/blend-mode/index.html b/files/es/web/css/blend-mode/index.html new file mode 100644 index 0000000000..e2a0e41f18 --- /dev/null +++ b/files/es/web/css/blend-mode/index.html @@ -0,0 +1,417 @@ +--- +title: <blend-mode> +slug: Web/CSS/blend-mode +tags: + - Composición + - Composición CSS + - Modos de mezcla + - Referencia + - Tipo de Dato CSS +translation_of: Web/CSS/blend-mode +--- +<p>{{CSSRef}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>El tipo <strong><code><blend-mode></code></strong> es una coleccion de palabras clave que describen modos de mezcla.</p> + +<p>Un modo de mezcla (blend mode) es un método para calcular el color final de un píxel cuando hay dos capas superpuestas. Cada modo de mezcla toma el valor del color de primer plano y el de fondo (color superior y color inferior, respectivamente), realiza su cálculo y devuelve el valor de color. La capa final visible es el resultado de realizar el cálculo del modo de mezcla en cada pixel sobrepuesto entre las capas mezcladas.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">Sintaxis formal: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity</pre> + +<h3 id="Valores_posibles">Valores posibles</h3> + +<dl> + <dt><code>normal</code></dt> + <dd> + <p>El color final es el de la capa superior, sin importar el color de fondo.<br> + El efecto es similar a dos trozos de papel sobrepuestos.</p> + + <div id="normal"> + <pre class="brush: html" style="display: none;"><div id="div"></div></pre> + + <pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: normal; +}</pre> + </div> + + <p>{{ EmbedLiveSample('normal', "300", "300") }}</p> + </dd> + <dt><code>multiply</code></dt> + <dd> + <p>El color final es el resultado de multiplicar el color superior y el inferior.<br> + Una capa negra conduce a una capa final negra, y una capa blanca lleva a que no haya cambios.<br> + El efecto ese similar a dos imágenes impresas en papel transparente sobrepuestas.</p> + + <div id="multiply"> + <pre class="brush: html" style="display: none;"><div id="div"></div></pre> + + <pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: multiply; +}</pre> + </div> + + <p>{{ EmbedLiveSample('multiply', "300", "300") }}</p> + </dd> + <dt><code>screen</code></dt> + <dd> + <p>El color final ees el resultado de invertir los colores, multiplicándolos e invirtiendo el valor resultante.<br> + Una capa negra no produce cambio alguno, y una capa blanca conduce a una capa blanca final.<br> + El efecto es similar a dos imágenes mostrándose desde un proyector.</p> + + <div id="screen"> + <pre class="brush: html" style="display: none;"><div id="div"></div></pre> + + <pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: screen; +}</pre> + </div> + + <p>{{ EmbedLiveSample('screen', "300", "300") }}</p> + </dd> + <dt><code>overlay</code></dt> + <dd>El color final es el resultado de <code>multiply</code> si el color inferior es más oscuro, o <code>screen</code> si el color inferior es más claro.<br> + Este modo de mezcla es equivalente a <code>hard-light</code>, pero si las capas son intercambiadas. + <div id="overlay"> + <pre class="brush: html" style="display: none;"><div id="div"></div></pre> + + <pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: overlay; +}</pre> + </div> + + <p>{{ EmbedLiveSample('overlay', "300", "300") }}</p> + </dd> + <dt><code>darken</code></dt> + <dd> + <p>El resultado final es un color compuesto de los valores más oscuros por cada canal de color.</p> + + <div id="darken"> + <pre class="brush: html" style="display: none;"><div id="div"></div></pre> + + <pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: darken; +}</pre> + </div> + + <p>{{ EmbedLiveSample('darken', "300", "300") }}</p> + </dd> + <dt><code>lighten</code></dt> + <dd> + <p>El resultado final es un color compuesto de los valores más claros por cada canal de color.</p> + + <div id="lighten"> + <pre class="brush: html" style="display: none;"><div id="div"></div></pre> + + <pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: lighten; +}</pre> + </div> + + <p>{{ EmbedLiveSample('lighten', "300", "300") }}</p> + </dd> + <dt><code>color-dodge</code></dt> + <dd> + <p>El color final es el resultado de dividir el color inferior por el inverso del color superior.<br> + Un fondo negro no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce un color completamente iluminado.<br> + Este modo de mezcla es similar a <code>screen</code>, pero basta con que el color de primer plano sea tan claro como el inverso del color de fondo para alcanzar un color completamente iluminado.</p> + + <div id="color-dodge"> + <pre class="brush: html" style="display: none;"><div id="div"></div></pre> + + <pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: color-dodge; +}</pre> + </div> + + <p>{{ EmbedLiveSample('color-dodge', "300", "300") }}</p> + </dd> + <dt><code>color-burn</code></dt> + <dd> + <p>El color final es el resultado de invertir el color de fondo, dividier el valor por el color superior, e invertir ese valor.<br> + Un fondo blanco no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce una imagen negra.<br> + Este modo de mezcla es similar a <code>multiply</code>, pero basta con que el color de primer plano sea tan oscuro como el inverso del color de fondo para dar como resultado una imagen negra.</p> + + <div id="color-burn"> + <pre class="brush: html" style="display: none;"><div id="div"></div></pre> + + <pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: color-burn; +}</pre> + </div> + + <p>{{ EmbedLiveSample('color-burn', "300", "300") }}</p> + </dd> + <dt><code>hard-light</code></dt> + <dd> + <p>El color final es el resultado de <code>multiply</code> si el color superior es más oscuro, o <code>screen</code> si el color superior es más oscuro.<br> + Este modo de mezcla es equivalente a <code>overlay</code>, pero con las capas intercambiadas.<br> + El efecto es similar a encender un foco con mucha <em>intensidad</em> en el fondo.</p> + + <div id="hard-light"> + <pre class="brush: html" style="display: none;"><div id="div"></div></pre> + + <pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: hard-light; +}</pre> + </div> + + <p>{{ EmbedLiveSample('hard-light', "300", "300") }}</p> + </dd> + <dt><code>soft-light</code></dt> + <dd> + <p>El color final es similar a <code>hard-light</code>, pero más suave.<br> + Este modo de mezcla se comporta similar a <code>hard-light</code>.<br> + El efecto es similar a encender un foco <em>difuso</em> en el fondo<em><code>.</code></em></p> + + <div id="soft-light"> + <pre class="brush: html" style="display: none;"><div id="div"></div></pre> + + <pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: soft-light; +}</pre> + </div> + + <p>{{ EmbedLiveSample('soft-light', "300", "300") }}</p> + </dd> + <dt><code>difference</code></dt> + <dd> + <p>El color final es elresultado de restar el color más oscuro de las dos capas, del más claro.<br> + Una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.</p> + + <div id="difference"> + <pre class="brush: html" style="display: none;"><div id="div"></div></pre> + + <pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: difference; +}</pre> + </div> + + <p>{{ EmbedLiveSample('difference', "300", "300") }}</p> + </dd> + <dt><code>exclusion</code></dt> + <dd> + <p>El color final es similar a <code>difference,</code> pero con menor contraste.<br> + Así como con <code>difference</code>, una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.</p> + + <div id="exclusion"> + <pre class="brush: html" style="display: none;"><div id="div"></div></pre> + + <pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: exclusion; +}</pre> + </div> + + <p>{{ EmbedLiveSample('exclusion', "300", "300") }}</p> + </dd> + <dt><code>hue</code></dt> + <dd> + <p>El color final tiene el <em>matiz</em> del color superior, mientras usa la <em>saturación</em> y <em>luminosidad</em> del color inferior.</p> + + <div id="hue"> + <pre class="brush: html" style="display: none;"><div id="div"></div></pre> + + <pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: hue; +}</pre> + </div> + + <p>{{ EmbedLiveSample('hue', "300", "300") }}</p> + </dd> + <dt><code>saturation</code></dt> + <dd> + <p>El color final tiene la <em>saturación</em> del color superior, mientras usa el <em>matiz</em> y <em>luminosidad</em> del color inferior.<br> + Un fondo gris puro, que no tenga saturación, no producirá efecto alguno.</p> + + <div id="saturation"> + <pre class="brush: html" style="display: none;"><div id="div"></div></pre> + + <pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: saturation; +}</pre> + </div> + + <p>{{ EmbedLiveSample('saturation', "300", "300") }}</p> + </dd> + <dt><code>color</code></dt> + <dd> + <p>El color final tiene el <em><em>matiz</em></em> y <em><em>saturación</em></em> del color superior, mientras usa la <em>luminosidad</em> del color inferior.<br> + El efecto preserva los niveles de grid y puede ser usado para colorear el primer plano.</p> + + <div id="color"> + <pre class="brush: html" style="display: none;"><div id="div"></div></pre> + + <pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: color; +}</pre> + </div> + + <p>{{ EmbedLiveSample('color', "300", "300") }}</p> + </dd> + <dt><code>luminosity</code></dt> + <dd> + <p>El color final tiene la <em>luminosidad</em> del color superior, mientras usa el <em>matiz</em> y <em>saturación</em> del color inferior.<br> + Este modo de mezcla es equivalente a <code>color</code>, pero con las capas intercambiadas.</p> + + <div id="luminosity"> + <pre class="brush: html" style="display: none;"><div id="div"></div></pre> + + <pre class="brush: css" style="display: none;">#div { + width: 300px; + height: 300px; + background: url('https://mdn.mozillademos.org/files/8543/br.png'), + url('https://mdn.mozillademos.org/files/8545/tr.png'); + background-blend-mode: luminosity; +}</pre> + </div> + + <p>{{ EmbedLiveSample('luminosity', "300", "300") }}</p> + </dd> +</dl> + +<h2 id="Interpolación_de_modos_de_mezcla">Interpolación de modos de mezcla</h2> + +<div> </div> + +<p>Los cambios entre modos de mezcla no son interpolados. Cualquier cambio ocurrirá abruptamente.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Compositing', '#ltblendmodegt', '<blend-mode>') }}</td> + <td>{{ Spec2('Compositing') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>35</td> + <td>{{compatVersionUnknown()}}</td> + <td>{{compatUnknown()}}</td> + <td>{{compatUnknown()}}</td> + <td>{{compatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{compatUnknown()}}</td> + <td>{{compatUnknown()}}</td> + <td>{{compatVersionUnknown()}}</td> + <td>{{compatUnknown()}}</td> + <td>{{compatUnknown()}}</td> + <td>{{compatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>Propiedades que usan valores de este tipo: {{cssxref("background-blend-mode")}} y {{cssxref("mix-blend-mode")}}</li> + <li><a href="http://en.wikipedia.org/wiki/Blend_modes">Blend modes</a></li> + <li>Índice de <a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">Referencia CSS</a></li> +</ul> diff --git a/files/es/web/css/block-size/index.html b/files/es/web/css/block-size/index.html new file mode 100644 index 0000000000..7b3bd80cc6 --- /dev/null +++ b/files/es/web/css/block-size/index.html @@ -0,0 +1,151 @@ +--- +title: block-size +slug: Web/CSS/block-size +tags: + - Experimental + - Propiedad CSS + - Propiedad Lógica CSS + - Referencia +translation_of: Web/CSS/block-size +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>block-size</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> define el tamaño horizontal o vertical de los elementos en bloque, dependiendo de los modos de escritura. estos corresponden ya sea a la propiedad {{cssxref("width")}} o la propiedad {{cssxref("height")}}, dependiendo de los valores de {{cssxref("writing-mode")}}.</p> + +<p>{{EmbedInteractiveExample("pages/css/block-size.html")}} </p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>block-size</code></strong> define el tamaño horizontal y vertical del bloque de un elemento, dependiendo de su modo de escritura. Corresponde a la propiedad {{cssxref("width")}} o {{cssxref("height")}}, dependiendo del valor definido en {{cssxref("writing-mode")}}.</p> + +<p>Si el modo de escritura está orientado verticalmente, el valor de <code>block-size</code> se relaciona con la anchura del elemento, de lo contrario, se relaciona con la altura del elemento. Está relacionada con {{cssxref("inline-size")}}, la cual define las otras dimensiones del elemento.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* <length> values */ +block-size: 300px; +block-size: 25em; + +/* <percentage> values */ +block-size: 75%; + +/* Keyword values */ +block-size: 25em border-box; +block-size: 75% content-box; +block-size: max-content; +block-size: min-content; +block-size: available; +block-size: fit-content; +block-size: auto; + +/* Global values */ +block-size: inherit; +block-size: initial; +block-size: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>block-size</code> toma los mismos valores que las propiedades {{cssxref("width")}} y {{cssxref("height")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><p class="texto">Texto de ejemplo</p> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">.texto { + writing-mode: vertical-rl; + background-color: yellow; + block-size: 200px; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo")}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("41.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>CompatNo}}</td> + <td>{{CompatGeckoMobile("41.0") }}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Disponible desde Gecko 38, pero bajo la preferencia <code>layout.css.vertical-text.enabled</code>, deshabilitada de forma predeterminada. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde dicha versión.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>Las propiedades físicas asignadas: {{cssxref("width")}} y {{cssxref("height")}}</li> + <li>{{cssxref("writing-mode")}}</li> +</ul> diff --git a/files/es/web/css/border-block-color/index.html b/files/es/web/css/border-block-color/index.html new file mode 100644 index 0000000000..904664a1ae --- /dev/null +++ b/files/es/web/css/border-block-color/index.html @@ -0,0 +1,86 @@ +--- +title: border-block-color +slug: Web/CSS/border-block-color +translation_of: Web/CSS/border-block-color +--- +<div>{{CSSRef}}{{SeeCompatTable}} </div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block-color</code></strong> define el color del borde de bloque de un elemento, que se asigna al color del borde físico dependiendo de los elementos de modo de escrituro, direccionalidad y la orientación del texto. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-right-color")}} y {{cssxref("border-left-color")}} dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<pre class="brush:css no-line-numbers">border-block-color: yellow; +border-block-color: #F5F6F7; +</pre> + +<p>El color de borde en la otra dimensión puede ser establecida con {{cssxref("border-inline-color")}} que establece {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'color'></code></dt> + <dd>El color del borde. Mirar {{cssxref("color")}}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS </h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 10px solid blue; + border-block-color: red; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div> + +<p>{{Compat("css.properties.border-block-color")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ error 1297097</li> +</ul> diff --git a/files/es/web/css/border-block-end-color/index.html b/files/es/web/css/border-block-end-color/index.html new file mode 100644 index 0000000000..e6b360ad1f --- /dev/null +++ b/files/es/web/css/border-block-end-color/index.html @@ -0,0 +1,138 @@ +--- +title: border-block-end-color +slug: Web/CSS/border-block-end-color +tags: + - CSS + - Experimental + - Propiedad CSS + - Propiedad Lógica CSS + - Referencia +translation_of: Web/CSS/border-block-end-color +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p>La propiedad <a href="/es/docs/Web/CSS" title="CSS">CSS</a> <code>border-block-end-color</code> define el color del borde del final lógico de un elemento, que se mapea a un color de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<pre class="brush:css no-line-numbers">border-block-end-color: yellow; +border-block-end-color: #F5F6F7; +</pre> + +<p>Está relacionada con {{cssxref("border-block-start-color")}}, {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}, que definen las otras propiedades de color de borde del elemento.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'border-color'></code></dt> + <dd>Véase {{ cssxref("border-color") }}</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Texto de ejemplo</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 10px solid blue; + border-block-end-color: red; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("41.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("41.0") }}<sup><a href="#compat_hint1">[1]</a></sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Disponible desde Gecko 38, pero bajo la preferencia <code>layout.css.vertical-text.enabled</code>, deshabilitada por defecto. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde esta misma versión .</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, y {{cssxref("border-left-color")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097</li> +</ul> diff --git a/files/es/web/css/border-block-end-style/index.html b/files/es/web/css/border-block-end-style/index.html new file mode 100644 index 0000000000..cf626f9017 --- /dev/null +++ b/files/es/web/css/border-block-end-style/index.html @@ -0,0 +1,139 @@ +--- +title: border-block-end-style +slug: Web/CSS/border-block-end-style +tags: + - CSS + - Experimental + - Propiedad CSS + - Propiedad Lógica CSS + - Referencia +translation_of: Web/CSS/border-block-end-style +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p>La propiedad <a href="/es/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block-end-style</code></strong> define el estilo del borde del final lógico del bloque de un elemento, que se mapea a un estilo de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<pre class="brush:css no-line-numbers">border-block-end-style: dashed; +border-block-end-style: dotted; +border-block-end-style: groove; +</pre> + +<p>Está relacionada a {{cssxref("border-block-start-style")}}, {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}, que definen las otras propiedades de estilos de borde del elemento.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'border-style'></code></dt> + <dd>See {{ cssxref("border-style") }}</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Texto de ejemplo</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 5px solid blue; + border-block-end-style: dashed; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("41.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("41.0") }}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Disponible desde Gecko 38, pero bajo la preferencia <code>layout.css.vertical-text.enabled</code>, deshabilitada por defecto. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde esta misma versión.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, y {{cssxref("border-left-style")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-block-end-width/index.html b/files/es/web/css/border-block-end-width/index.html new file mode 100644 index 0000000000..df9125f627 --- /dev/null +++ b/files/es/web/css/border-block-end-width/index.html @@ -0,0 +1,91 @@ +--- +title: border-block-end-width +slug: Web/CSS/border-block-end-width +translation_of: Web/CSS/border-block-end-width +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propieda de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block-end-width</code></strong> define el ancho del borde final lógico de bloque de un elemento, que se asigna al borde físico que depende del modo de escritura, direccionalidad, y orientación del texto del elemento. Esto corresponde a la propiedad {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}} property dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <'border-width'> values */ +border-block-end-width: 5px; +border-block-end-width: thick; +</pre> + +<p>Las propiedades relacionadas son {{cssxref ("border-block-start-width")}}, {{cssxref ("border-inline-width")}}, y {{cssxref ("border-inline-end-width ")}}, que define los otros anchos de borde del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'border-width'></code></dt> + <dd>El tamaño del borde. Mira {{ cssxref("border-width") }}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 1px solid blue; + border-block-end-width: 5px; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2> + + + +<p>{{Compat("css.properties.border-block-end-width")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-block-end/index.html b/files/es/web/css/border-block-end/index.html new file mode 100644 index 0000000000..a2c5d20e60 --- /dev/null +++ b/files/es/web/css/border-block-end/index.html @@ -0,0 +1,144 @@ +--- +title: border-block-end +slug: Web/CSS/border-block-end +tags: + - CSS + - Experimental + - Propiedad CSS + - Propiedad Lógica CSS + - Referencia +translation_of: Web/CSS/border-block-end +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p>La propiedad <a href="/es/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block-end</code></strong> es un atajo para establecer los valores de las propiedades individuales del borde final lógico de un bloque en un solo lugar de la hoja de estilos. <code>border-block-end</code> puede ser usada para establecer los valores de una o más de las siguientes propiedades: {{Cssxref("border-block-end-width")}}, {{Cssxref("border-block-end-style")}}, {{Cssxref("border-block-end-color")}}. Se asigna a un borde físico, dependiendo del modo de escritura del elemento, su direccionalidad y orientación de texto. Corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}, dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<pre class="brush:css no-line-numbers">border-block-end: 1px; +border-block-end: 2px dotted; +border-block-end: medium dashed blue; +</pre> + +<p>Está relacionada con {{cssxref("border-block-start")}}, {{cssxref("border-inline-start")}}, y {{cssxref("border-inline-end")}}, las cuales definen el borde contrario del elemento.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<p>Una o más de los siguientes, en cualquier orden:</p> + +<dl> + <dt><code><'border-width'></code></dt> + <dd>Véase {{ cssxref("border-width") }}</dd> + <dt><code><'border-style'></code></dt> + <dd>Véase {{ cssxref("border-style") }}</dd> + <dt><code><'color'></code></dt> + <dd>Véase {{ cssxref("color") }}</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Texto de ejemplo</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + border-block-end: 5px dashed blue; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("41.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("41.0") }}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Disponible desde Gecko 38, pero bajo la preferencia <code>layout.css.vertical-text.enabled</code>, deshabilitada por defecto. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde esta misma versión.</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, y {{cssxref("border-left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-block-start-color/index.html b/files/es/web/css/border-block-start-color/index.html new file mode 100644 index 0000000000..393780221b --- /dev/null +++ b/files/es/web/css/border-block-start-color/index.html @@ -0,0 +1,90 @@ +--- +title: border-block-start-color +slug: Web/CSS/border-block-start-color +translation_of: Web/CSS/border-block-start-color +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block-start-color</code></strong> define el color del borde lógico de bloque inicial de un elemento, que se asigna al color de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">border-block-start-color: blue; +border-block-start-color: #4c5d21; +</pre> + +<p>Propiedades relacionadas son {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}, que definen los otros colores del borde del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'color'></code></dt> + <dd>Mira {{ cssxref("border-color") }}</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 10px solid blue; + border-block-start-color: red; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-block-start-color")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-block-start-style/index.html b/files/es/web/css/border-block-start-style/index.html new file mode 100644 index 0000000000..0fe32ca16a --- /dev/null +++ b/files/es/web/css/border-block-start-style/index.html @@ -0,0 +1,92 @@ +--- +title: border-block-start-style +slug: Web/CSS/border-block-start-style +translation_of: Web/CSS/border-block-start-style +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block-start-style</code></strong> define el estilo del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físicodependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}} dependiendo de los valores definidos por{{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <'border-style'> values */ +border-block-start-style: dashed; +border-block-start-style: dotted; +border-block-start-style: groove; +</pre> + +<p>Propiedades relacionadas son {{cssxref("border-block-end-style")}}, {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}, que definen los otros estilos del borde del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'border-style'></code></dt> + <dd>El estilo de la línea del borde. Mira {{ cssxref("border-style") }}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 5px solid blue; + border-block-start-style: dashed; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-block-start-style")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-block-start-width/index.html b/files/es/web/css/border-block-start-width/index.html new file mode 100644 index 0000000000..cdbdcc153a --- /dev/null +++ b/files/es/web/css/border-block-start-width/index.html @@ -0,0 +1,91 @@ +--- +title: border-block-start-width +slug: Web/CSS/border-block-start-width +translation_of: Web/CSS/border-block-start-width +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block-start-width</code></strong> define el ancho del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <'border-width'> values */ +border-block-start-width: 5px; +border-block-start-width: thick; +</pre> + +<p>Propiedades relacionadas son{{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}}, y {{cssxref("border-inline-end-width")}}, que definen los otros anchos del borde del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'border-width'></code></dt> + <dd>El ancho del borde. Mira {{ cssxref("border-width") }}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 1px solid blue; + border-block-start-width: 5px; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-block-start-width")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-block-start/index.html b/files/es/web/css/border-block-start/index.html new file mode 100644 index 0000000000..89204dc8b1 --- /dev/null +++ b/files/es/web/css/border-block-start/index.html @@ -0,0 +1,98 @@ +--- +title: border-block-start +slug: Web/CSS/border-block-start +translation_of: Web/CSS/border-block-start +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block-start</code></strong> es una <a href="/en-US/docs/Web/CSS/Shorthand_properties">propiedad abreviada</a> para establecer los valores lógicos individuales del borde de bloque inicial en un solo lugar en la hoja de estilos. </p> + +<div>{{EmbedInteractiveExample("pages/css/border-block-start.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">border-block-start: 1px; +border-block-start: 2px dotted; +border-block-start: medium dashed blue; +</pre> + +<p><code>border-block-start</code> puede ser usado para establecer los valores de uno o más de {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}}, y {{cssxref("border-block-start-color")}}. El borde físico al que se asigna depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<p>Propiedades relacionadas son {{cssxref("border-block-end")}}, {{cssxref("border-inline-start")}}, y {{cssxref("border-inline-end")}}, que definen los otros bordes del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<p>El <code>border-block-start</code> es especificado con uno o más de los siguientes valores, en cualquier orden:</p> + +<dl> + <dt><code><'border-width'></code></dt> + <dd>El ancho del borde. Mira {{cssxref("border-width")}}.</dd> + <dt><code><'border-style'></code></dt> + <dd>El estilo de la línea del borde. Mira {{cssxref("border-style")}}.</dd> + <dt><code><'color'></code></dt> + <dd>El color del borde. Mira {{cssxref("color")}}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush:css no-line-numbers">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + border-block-start: 5px dashed blue; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-block-start")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-block-style/index.html b/files/es/web/css/border-block-style/index.html new file mode 100644 index 0000000000..f3a8cbadbf --- /dev/null +++ b/files/es/web/css/border-block-style/index.html @@ -0,0 +1,90 @@ +--- +title: border-block-style +slug: Web/CSS/border-block-style +translation_of: Web/CSS/border-block-style +--- +<div>{{CSSRef}}{{SeeCompatTable}} </div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a><strong> <code>border-block-style</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> property defines the style of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<pre class="brush:css no-line-numbers">/* <'border-style'> values */ +border-block-style: dashed; +border-block-style: dotted; +border-block-style: groove; +</pre> + +<p>El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-inline-style")}}, que establece {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'border-style'></code></dt> + <dd>La línea de estilo del borde. Mira {{ cssxref("border-style") }}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 5px solid blue; + border-block-style: dashed; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-block-style")}}</p> + +<p> </p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-block-width/index.html b/files/es/web/css/border-block-width/index.html new file mode 100644 index 0000000000..10c641ba39 --- /dev/null +++ b/files/es/web/css/border-block-width/index.html @@ -0,0 +1,87 @@ +--- +title: border-block-width +slug: Web/CSS/border-block-width +translation_of: Web/CSS/border-block-width +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block-width</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> property defines the width of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<pre class="brush:css no-line-numbers">/* <'border-width'> values */ +border-block-width: 5px; +border-block-width: thick; +</pre> + +<p>El ancho del borde en otra dimensión puede establecerse con {{cssxref("border-inline-width")}}, que establece {{cssxref("border-inline-start-width")}}, y {{cssxref("border-inline-end-width")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'border-width'></code></dt> + <dd>El ancho del borde. Mira {{ cssxref("border-width") }}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 1px solid blue; + border-block-width: 5px; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-block-width")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-block/index.html b/files/es/web/css/border-block/index.html new file mode 100644 index 0000000000..f3159a7174 --- /dev/null +++ b/files/es/web/css/border-block/index.html @@ -0,0 +1,96 @@ +--- +title: border-block +slug: Web/CSS/border-block +translation_of: Web/CSS/border-block +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-block</code></strong> es una <a href="/en-US/docs/Web/CSS/Shorthand_properties">propiedad abreviada</a> para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos. </p> + +<pre class="brush:css no-line-numbers">border-block: 1px; +border-block: 2px dotted; +border-block: medium dashed blue; +</pre> + +<p><code>border-block</code> puede ser usada para establecer los valores de uno o más {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}}, y {{cssxref("border-block-color")}} estableciendo tanto el inicio como el final en la dimensión del bloque a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref ("border-top")}} y {{cssxref ("border-bottom")}} o {{cssxref ("border-right")}}, y {{cssxref ("border -left ")}} dependiendo de los valores definidos para {{cssxref (" modo de escritura ")}}, {{cssxref (" dirección ")}}, y {{cssxref (" orientación de texto ")}} .</p> + +<p>Los bordes en la otra dimensión se pueden establecer con {{cssxref ("border-inline")}}, que establece {{cssxref ("border-inline-start")}}, y {{cssxref ("border-inline- fin")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<p>El <code>border-block</code> es especificado con uno o más de los siguientes valores, en cualquier orden:</p> + +<dl> + <dt><code><'border-width'></code></dt> + <dd>El ancho del borde. Mirar {{cssxref("border-width")}}.</dd> + <dt><code><'border-style'></code></dt> + <dd>El estilo de la línea del borde. Mirar {{cssxref("border-style")}}.</dd> + <dt><code><'color'></code></dt> + <dd>El color del borde. Mirar {{cssxref("color")}}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + border-block: 5px dashed blue; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definition inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores </h2> + +<div class="hidden"> +<p>La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite <a href="https://github.com/mdn/browser-compat-data" style="font-size: 1rem; letter-spacing: -0.00278rem;">https://github.com/mdn/browser-compat-data</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> y envíanos un pull request.</span></p> +</div> + +<p>{{Compat("css.properties.border-block")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-bottom-color/index.html b/files/es/web/css/border-bottom-color/index.html new file mode 100644 index 0000000000..b171eb2aca --- /dev/null +++ b/files/es/web/css/border-bottom-color/index.html @@ -0,0 +1,117 @@ +--- +title: border-bottom-color +slug: Web/CSS/border-bottom-color +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-bottom-color +--- +<p><< <a href="/es/Guía_de_referencia_de_CSS" title="es/Guía_de_referencia_de_CSS">Volver</a></p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>La propiedad <code>border-bottom-color</code> define el color del borde inferior de un elemento, con la ayuda de un valor de color o con la palabra clave <code>transparent</code>e.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: propiedad {{ Cssxref("color") }}</li> + <li>Se aplica a: todos los elementos</li> + <li>{{ Cssxref("inheritance", "Valor heredado") }}: non</li> + <li>Porcentajes: N/A</li> + <li>Medio : {{ Xref_cssvisual() }}</li> + <li>{{ Cssxref("computed value", "Valor calculado") }}: como se especifique o si proviene de la propiedad {{ Cssxref("color") }}, será el valor {{ Cssxref("color") }}.</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">border-bottom-color: <em>couleur</em> | transparent | inherit +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt>color </dt> + <dd>puede especificarse por un valor RGB hexa-decimal o regular o por una palabra clave predefinida (<em>azul</em>).</dd> +</dl> + +<dl> + <dt>transparent </dt> + <dd>el elemento no tiene color propio, muestra el color del elemento atrás suyo en el árbol de apilado.</dd> +</dl> + +<h3 id="Propiedades_relacionadas" name="Propiedades_relacionadas">Propiedades relacionadas</h3> + +<ul> + <li>{{ Cssxref("border-color") }}</li> + <li>{{ Cssxref("border-left-color") }}</li> + <li>{{ Cssxref("border-right-color") }}</li> + <li>{{ Cssxref("border-top-color") }}</li> +</ul> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p><a href="/samples/cssref/border.html">Ver El Ejemplo Vivo</a></p> + +<pre class="eval">element { + width: 300px; + padding: 15px; + border-bottom-size: 1px; + border-bottom-style: solid; + border-bottom-color: #000; +} +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<ul> + <li><a class="external" href="http://html-color-codes.com/">Color Chart by VisiBone (en)</a></li> + <li><a class="external" href="http://www.yoyodesign.org/outils/ncolor/ncolor.php?langue=fr">Sélecteur de couleur, chez yoyodesign (fr)</a></li> +</ul> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom-color">CSS 2.1 (en)</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-bottom">CSS 3 (en)</a></li> +</ul> + +<h3 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}</p> + +<div class="noinclude"> +<p><span class="comment">Categorías</span></p> + +<p><span class="comment">Interwiki Languages</span></p> +</div> + +<p>{{ languages( { "de": "de/CSS/border-bottom-color", "en": "en/CSS/border-bottom-color", "fr": "fr/CSS/border-bottom-color", "ja": "ja/CSS/border-bottom-color", "pl": "pl/CSS/border-bottom-color" } ) }}</p> diff --git a/files/es/web/css/border-bottom-left-radius/index.html b/files/es/web/css/border-bottom-left-radius/index.html new file mode 100644 index 0000000000..7290aa56c1 --- /dev/null +++ b/files/es/web/css/border-bottom-left-radius/index.html @@ -0,0 +1,264 @@ +--- +title: border-bottom-left-radius +slug: Web/CSS/border-bottom-left-radius +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-bottom-left-radius +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS<strong> <code>border-bottom-left-radius</code></strong> establece el redondeo de la esquina inferior izquierda del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es <code>0</code>, no se redondeará la esquina, dejándola cuadrada.</p> + +<div style="text-align: center;"><img alt="border-bottom-left-radius.png" class="default internal" src="/@api/deki/files/6136/=border-bottom-left-radius.png"></div> + +<p>Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.</p> + +<div class="note">Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad <code>border-bottom-left-radius</code>, el valor de esta propiedad es restaurado a su valor inicial por la <a href="/en-US/docs/Web/CSS/Shorthand_properties">propiedad de forma reducida</a>.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* la esquina es un círculo */ +/* border-bottom-left-radius: <em>radius</em> */ +border-bottom-left-radius: 3px; + +/* la esquina es una elipse */ +/* border-bottom-left-radius: <em>horizontal</em> <em>vertical</em> */ +border-bottom-left-radius: 0.5em 1em; + +border-bottom-left-radius: inherit; +</pre> + +<div style="font-size: 0.9em;"> +<p style="">donde:</p> + +<dl style="padding-left: 6em;"> + <dt style="float: left; width: 7.5em;"><em>radius</em></dt> + <dd style="padding-left: 7.5em;">Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.</dd> + <dt style="float: left; width: 7.5em;"><em>horizontal</em></dt> + <dd style="padding-left: 7.5em;">Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.</dd> + <dt style="float: left; width: 7.5em;"><em>vertical</em></dt> + <dd style="padding-left: 7.5em;">Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.</dd> +</dl> +</div> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.</dd> + <dt><code><percentage></code></dt> + <dd>Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Ejemplo en vivo</th> + <th>Código</th> + </tr> + </thead> + <tbody> + <tr> + <td style="padding: 1.5em;"> + <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 40px; width: 100px; height: 100px;"> + <div style="display: none;">.</div> + </div> + </td> + <td>Un arco de círculo usado como borde + <pre class="brush: css"> +div { + border-bottom-left-radius: 40px 40px; +} +</pre> + </td> + </tr> + <tr> + <td style="padding: 1.5em;"> + <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 20px; width: 100px; height: 100px;"> + <div style="display: none;">.</div> + </div> + </td> + <td>Un arco de elipse usado como borde + <pre class="brush: css"> +div { + border-bottom-left-radius: 40px 20px; +} +</pre> + </td> + </tr> + <tr> + <td style="padding: 1.5em;"> + <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 100px;"> + <div style="display: none;">.</div> + </div> + </td> + <td>La caja es un cuadro: un arco de círculo es usado como borde + <pre class="brush: css"> +div { + border-bottom-left-radius: 40%; +} +</pre> + </td> + </tr> + <tr> + <td style="padding: 1.5em;"> + <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 200px;"> + <div style="display: none;">.</div> + </div> + </td> + <td>La caja no es un círculo: un arco de elipse es usado como borde + <pre class="brush: css"> +div { + border-bottom-left-radius: 40%; +} +</pre> + </td> + </tr> + <tr> + <td style="padding: 1.5em;"> + <div style="border: black 3px double; border-bottom-left-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;"> + <div style="display: none;">.</div> + </div> + </td> + <td>El color de fondo está delimitado al borde + <pre class="brush: css"> +div { + border-bottom-left-radius:40%; + border-style: black 3px double; + background-color: rgb(250,20,70); + background-clip: content-box; +} +</pre> + </td> + </tr> + </tbody> +</table> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0 {{property_prefix("-webkit")}}<br> + 4.0</td> + <td>1.0 (1.0){{property_prefix("-moz")}}<sup>[1]</sup><br> + 4.0 (2.0)<sup>[3]</sup></td> + <td>9.0</td> + <td>10.5</td> + <td>3.0 (522){{property_prefix("-webkit")}}<br> + 5.0 (532.5)</td> + </tr> + <tr> + <td>Porcentajes</td> + <td>4.0</td> + <td>1.0 (1.0)<sup>[2]</sup><br> + 4.0 (2.0)</td> + <td>9.0</td> + <td>10.5</td> + <td>5.0 (532.5)</td> + </tr> + <tr> + <td>Esquinas elípticas</td> + <td>1.0</td> + <td>3.5 (1.9.1)</td> + <td>9.0</td> + <td>10.5</td> + <td>3.0 (522)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Porcentajes</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Esquinas elípticas</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] La versión con prefijo (permitida desde Firefox 1 hasta Firefox 12) de esta propiedad usaba otro nombre, <code>-moz-border-radius-bottomleft</code>, distinto al de la propiedad final, ya que Mozilla lo implementó antes de que se determinara el nombre final.</p> + +<p>[2] Antes de Firefox 4, el valor {{cssxref("<percentage>")}} era relativo a la anchura de la caja, incluso al especificar el radio para la altura. Esto implicaba que <code>-moz-border-radius-bottomleft</code> siempre dibujaba un arco de círculo, y nunca una elipse, cuando se establecía un valor único.</p> + +<p>[3] Previo a Gecko 50.0 {{geckoRelease("50.0")}}, los estilos de bordes de esquinas redondeadas siempre se dibujaban como si <code>border-style</code> tuviera valor <code>solid</code>. Esto fue solucionado en Gecko 50.0.</p> + +<p>Además del soporte a la versión sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} añadió soporte a la versión con prefijo <code>-webkit</code> de la propiedad, por razones de compatibilidad, usando la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}}, el valor predeterminado de la preferencia es <code>true</code>.</p> + +<h2 id="Véase_también">Véase también</h2> + +<p>Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-top-left-radius")}}.</p> diff --git a/files/es/web/css/border-bottom-right-radius/index.html b/files/es/web/css/border-bottom-right-radius/index.html new file mode 100644 index 0000000000..1e95cfd6d7 --- /dev/null +++ b/files/es/web/css/border-bottom-right-radius/index.html @@ -0,0 +1,264 @@ +--- +title: border-bottom-right-radius +slug: Web/CSS/border-bottom-right-radius +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-bottom-right-radius +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>border-bottom-right-radius</code></strong> establece el redondeo de la esquina inferior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es <code>0</code>, no se redondeará la esquina, dejándola cuadrada.</p> + +<div style="text-align: center;"><img alt="border-bottom-right-radius.png" class="default internal" src="/@api/deki/files/6134/=border-bottom-right-radius.png"></div> + +<p>Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.</p> + +<div class="note">Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad <code>border-bottom-right-radius</code>, el valor de esta propiedad es restaurado a su valor inicial por la <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">propiedad de forma reducida</a>.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* la esquina es un círculo */ +/* border-bottom-right-radius: <em>radius</em> */ +border-bottom-right-radius: 3px; + +/* la esquina es una elipse */ +/* border-bottom-right-radius: horizontal vertical */ +border-bottom-right-radius: 0.5em 1em; + +border-bottom-right-radius: inherit; +</pre> + +<div style="font-size: 0.9em;"> +<p style="">donde:</p> + +<dl style="padding-left: 6em;"> + <dt style="float: left; width: 7.5em;"><em>radius</em></dt> + <dd style="padding-left: 7.5em;">Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.</dd> + <dt style="float: left; width: 7.5em;"><em>horizontal</em></dt> + <dd style="padding-left: 7.5em;">Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.</dd> + <dt style="float: left; width: 7.5em;"><em>vertical</em></dt> + <dd style="padding-left: 7.5em;">Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.</dd> +</dl> +</div> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.</dd> + <dt><code><percentage></code></dt> + <dd>Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Ejemplo en vivo</th> + <th>Código</th> + </tr> + </thead> + <tbody> + <tr> + <td style="padding: 1.5em;"> + <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 40px; width: 100px; height: 100px;"> + <div style="display: none;">.</div> + </div> + </td> + <td>Un arco de círculo usado como borde + <pre class="brush: css"> +div { + border-bottom-right-radius: 40px 40px; +} +</pre> + </td> + </tr> + <tr> + <td style="padding: 1.5em;"> + <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 20px; width: 100px; height: 100px;"> + <div style="display: none;">.</div> + </div> + </td> + <td>Un arco de elipse usado como borde + <pre class="brush: css"> +div { + border-bottom-right-radius: 40px 20px; +} +</pre> + </td> + </tr> + <tr> + <td style="padding: 1.5em;"> + <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 100px;"> + <div style="display: none;">.</div> + </div> + </td> + <td>La caja es un cuadro: un arco de círculo es usado como borde + <pre class="brush: css"> +div { + border-bottom-right-radius: 40%; +} +</pre> + </td> + </tr> + <tr> + <td style="padding: 1.5em;"> + <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 200px;"> + <div style="display: none;">.</div> + </div> + </td> + <td>La caja no es un círculo: un arco de elipse es usado como borde + <pre class="brush: css"> +div { + border-bottom-right-radius: 40%; +} +</pre> + </td> + </tr> + <tr> + <td style="padding: 1.5em;"> + <div style="border: black 3px double; border-bottom-right-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;"> + <div style="display: none;">.</div> + </div> + </td> + <td>El color de fondo está delimitado al borde + <pre class="brush: css"> +div { + border-bottom-right-radius:40%; + border-style: black 3px double; + background-color: rgb(250,20,70); + background-clip: content-box; +} +</pre> + </td> + </tr> + </tbody> +</table> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0 {{property_prefix("-webkit")}}<br> + 4.0</td> + <td>1.0 (1.0){{property_prefix("-moz")}}<sup>[1]</sup><br> + 4.0 (2.0)<sup>[3]</sup></td> + <td>9.0</td> + <td>10.5</td> + <td>3.0 (522){{property_prefix("-webkit")}}<br> + 5.0 (532.5)</td> + </tr> + <tr> + <td>Porcentajes</td> + <td>4.0</td> + <td>1.0 (1.0)<sup>[2]</sup><br> + 4.0 (2.0)</td> + <td>9.0</td> + <td>10.5</td> + <td>5.0 (532.5)</td> + </tr> + <tr> + <td>Esquinas elípticas</td> + <td>1.0</td> + <td>3.5 (1.9.1)</td> + <td>9.0</td> + <td>10.5</td> + <td>3.0 (522)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Porcentajes</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Esquinas elípticas</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] La versión con prefijo (permitida desde Firefox 1 hasta Firefox 12) de esta propiedad usaba otro nombre, <code>-moz-border-radius-bottomright</code>, distinto al de la propiedad final, ya que Mozilla lo implementó antes de que se determinara el nombre final.</p> + +<p>[2] Antes de Firefox 4, el valor {{cssxref("<percentage>")}} era relativo a la anchura de la caja, incluso al especificar el radio para la altura. Esto implicaba que <code>-moz-border-radius-bottomright</code> siempre dibujaba un arco de círculo, y nunca una elipse, cuando se establecía un valor único.</p> + +<p>[3] Previo a Gecko 50.0 {{geckoRelease("50.0")}}, los estilos de bordes de esquinas redondeadas siempre se dibujaban como si <code>border-style</code> tuviera valor <code>solid</code>. Esto fue solucionado en Gecko 50.0.</p> + +<p>Además del soporte a la versión sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} añadió soporte a la versión con prefijo <code>-webkit</code> de la propiedad, por razones de compatibilidad, usando la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de la preferencia es <code>true</code>.</p> + +<h2 id="Véase_también">Véase también</h2> + +<p>Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-top-left-radius")}}, y {{cssxref("border-bottom-left-radius")}}.</p> diff --git a/files/es/web/css/border-bottom-style/index.html b/files/es/web/css/border-bottom-style/index.html new file mode 100644 index 0000000000..28f0697b0c --- /dev/null +++ b/files/es/web/css/border-bottom-style/index.html @@ -0,0 +1,102 @@ +--- +title: border-bottom-style +slug: Web/CSS/border-bottom-style +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-bottom-style +--- +<p> </p> + +<p><< <a href="/es/Guía_de_referencia_de_CSS" title="es/Guía_de_referencia_de_CSS">Volver</a></p> + +<p> </p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p><code>border-bottom-style</code> define el estilo de línea del borde inferior de una caja.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }}</li> + <li>Se aplica a: todos los elementos</li> + <li>{{ Cssxref("inheritance", "Valor heredado") }}: no</li> + <li>Porcentajes: N/A</li> + <li>Medio: {{ Xref_cssvisual() }}</li> + <li>{{ Cssxref("computed value", "Valor calculado") }}: como se especificó</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">border-bottom-style: <border-style> | inherit +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt>none </dt> + <dd>sin borde.</dd> + <dt>hidden </dt> + <dd>es igual a 'none', excepto en términos de resolución de conflicto para elementos de tabla.</dd> + <dt>dotted </dt> + <dd>series de puntos (....).</dd> + <dt>dashed </dt> + <dd>series de guiones cortos o pequeñas líneas (----).</dd> + <dt>solid </dt> + <dd>línea única, recta y sólida.</dd> + <dt>double </dt> + <dd>dos líneas rectas que se suman a la cantidad de píxeles definidos como ancho de borde<code>border-width</code>.</dd> + <dt>groove </dt> + <dd>efecto de hundido.</dd> + <dt>ridge </dt> + <dd>al revés de 'groove'. El borde aparece en 3D (saliendo).</dd> + <dt>inset </dt> + <dd>hace que la caja aparezca hundida.</dd> + <dt>outset </dt> + <dd>opuesto a 'inset'. La caja aparece en 3D (saliendo).</dd> +</dl> + +<h3 id="Propiedades_relacionadas" name="Propiedades_relacionadas">Propiedades relacionadas</h3> + +<ul> + <li>{{ Cssxref("border-left-style") }}</li> + <li>{{ Cssxref("border-right-style") }}</li> + <li>{{ Cssxref("border-top-style") }}</li> + <li>{{ Cssxref("border-style") }}</li> +</ul> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p><a href="/samples/cssref/border.html">Ver El Ejemplo Vivo</a></p> + +<pre>element { + border-bottom-size: 1px; + border-bottom-style: dotted; + border-bottom-color: #000; +} +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>A menos que un valor {{ Cssxref("border-style") }} sea definido, el borde no aparecerá porque el valor por defecto es 'none'.</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom-style">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-style">CSS 3</a></li> +</ul> + +<h3 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h3> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}</p> + +<p> </p> + +<div class="noinclude"> +<p><span class="comment">Categorías</span></p> +<span class="comment">Interwiki Languages</span></div> + +<p>{{ languages( { "de": "de/CSS/border-bottom-style", "en": "en/CSS/border-bottom-style", "fr": "fr/CSS/border-bottom-style", "ja": "ja/CSS/border-bottom-style", "pl": "pl/CSS/border-bottom-style" } ) }}</p> diff --git a/files/es/web/css/border-bottom-width/index.html b/files/es/web/css/border-bottom-width/index.html new file mode 100644 index 0000000000..5550344a75 --- /dev/null +++ b/files/es/web/css/border-bottom-width/index.html @@ -0,0 +1,113 @@ +--- +title: border-bottom-width +slug: Web/CSS/border-bottom-width +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-bottom-width +--- +<p> </p> + +<p><< <a href="/es/Guía_de_referencia_de_CSS" title="es/Guía_de_referencia_de_CSS">Volver</a></p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p><code>border-bottom-width</code> define el ancho del borde inferior de una caja.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("medium", "medio") }}</li> + <li>Se aplica a : todos los elementos</li> + <li>{{ Cssxref("inheritance", "Valor heredado") }}: no</li> + <li>Porcentajes: N/A</li> + <li>Medio: {{ Xref_cssvisual() }}</li> + <li>{{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo es <code>none</code> o <code>hidden</code>.</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">border-bottom-width: <border-width> | inherit +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt>thin</dt> + <dd>un borde fino.</dd> + <dt>medium</dt> + <dd>un borde mediano.</dd> + <dt>thick</dt> + <dd>un borde grueso.</dd> + <dt><length></dt> + <dd>El espesor de un borde tiene un valor explícito. los anchos de borde no pueden ser negativos.<br> + Nota : El valor <code>em</code> también es soportada.</dd> +</dl> + +<h3 id="Propiedades_relacionadas" name="Propiedades_relacionadas">Propiedades relacionadas</h3> + +<ul> + <li>{{ Cssxref("border-left-style") }}</li> + <li>{{ Cssxref("border-right-style") }}</li> + <li>{{ Cssxref("border-top-style") }}</li> + <li>{{ Cssxref("border-style") }}</li> +</ul> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p><a href="/samples/cssref/border.html">Ver El Ejemplo Vivo</a></p> + +<pre>element { + border-bottom-width: thin; + border-bottom-style: solid; + border-bottom-color: #000; +} +</pre> + +<h3 id="Especificacions" name="Especificacions">Especificacions</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#border-width">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-width-properties">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-width">CSS 3</a></li> +</ul> + +<h3 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td> </td> + </tr> + <tr> + <td>Firefox</td> + <td> </td> + </tr> + <tr> + <td>Netscape</td> + <td> </td> + </tr> + <tr> + <td>Opera</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}</p> + +<p> </p> + +<div class="noinclude"> +<p><span class="comment">Categorías</span></p> + +<p><span class="comment">Interwiki Languages</span></p> +</div> + +<p>{{ languages( { "de": "de/CSS/border-bottom-width", "en": "en/CSS/border-bottom-width", "pl": "pl/CSS/border-bottom-width", "fr": "fr/CSS/border-bottom-width", "ja": "ja/CSS/border-bottom-width" } ) }}</p> diff --git a/files/es/web/css/border-bottom/index.html b/files/es/web/css/border-bottom/index.html new file mode 100644 index 0000000000..3b1774513b --- /dev/null +++ b/files/es/web/css/border-bottom/index.html @@ -0,0 +1,117 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-bottom +--- +<p><< <a href="/es/Guía_de_referencia_de_CSS" title="es/Guía_de_referencia_de_CSS">Volver</a></p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>La propiedad <code>border-bottom</code> permite de definir de una vez todas las propiedades individuales {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }}, y {{ Cssxref("border-bottom-width") }}, las cuales describen el color, estilo y ancho del borde inferior de un elementos.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales</li> + <li>Se aplica a : todos los elementos</li> + <li>{{ Cssxref("inheritance", "Valor heredado") }}: no</li> + <li>Porcentajes: N/A</li> + <li>Medio: {{ Xref_cssvisual() }}</li> + <li>{{ Cssxref("computed value", "Valor calculado") }}: ver propiedades individuales</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">border-bottom: [ <border-width> || <border-style> || <border-color> ] | <em>inherit</em> +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt><border-width> </dt> + <dd>ver {{ Cssxref("border-bottom-width") }}.</dd> + <dt><border-style> </dt> + <dd>ver {{ Cssxref("border-bottom-style") }}.</dd> + <dt><border-color> </dt> + <dd>ver {{ Cssxref("border-bottom-color") }}.</dd> +</dl> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p><a href="/samples/cssref/border.html">Ver El Ejemplo Vivo</a></p> + +<pre>element { + border-bottom-width: 1px solid #000; +} +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>Si no se especifica el color del borde, este tomará el valor definido en la propiedad del {{ Cssxref("color") }} general.</p> + +<p>Se puede especificar los tres valores en cualquier orden y se pueden omitir una o dos.</p> + +<p>Como con todas las propiedades generales, <code>border-bottom</code> siempre inicia todos los valores que le pueden ser definidos aún cuando no están especificados, en este caso toma los valores por defecto.</p> + +<p>Lo que significa que:</p> + +<pre> border-bottom-style: dotted; + border-bottom: thick green;</pre> + +<p>es idéntico a:</p> + +<pre> border-bottom-style: dotted; + border-bottom: none thick green;</pre> + +<p>y el valor de {{ Cssxref("border-bottom-style") }} dado antes de <code>border-bottom</code> es ignorado.</p> + +<p>Como el valor por defecto de {{ Cssxref("border-bottom-style") }} es <code>none</code>, el no especificar la parte <border-style> en la propiedad general significa: <strong>sin borde</strong>.</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#border-bottom">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands">CSS 3</a></li> +</ul> + +<h3 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-color") }},</p> + +<div class="noinclude"> +<p><span class="comment">Categorías</span></p> + +<p><span class="comment">Interwiki Languages</span></p> +</div> + +<p>{{ languages( { "de": "de/CSS/border-bottom", "en": "en/CSS/border-bottom", "fr": "fr/CSS/border-bottom", "ja": "ja/CSS/border-bottom", "pl": "pl/CSS/border-bottom" } ) }}</p> diff --git a/files/es/web/css/border-collapse/index.html b/files/es/web/css/border-collapse/index.html new file mode 100644 index 0000000000..a657568e91 --- /dev/null +++ b/files/es/web/css/border-collapse/index.html @@ -0,0 +1,98 @@ +--- +title: border-collapse +slug: Web/CSS/border-collapse +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-collapse +--- +<p><< <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a></p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>La propiedad <code>border-collapse</code> se utiliza para fusionar los bordes. Ésto tiene una gran influencia sobre la presentación y el estilo de las celdas de tabla. La representación de los bordes de tabla es dividida en dos categorías en CSS2 - "fusión" y "separación" (<small>collapsed - separated</small>). Esta propiedad especifica que modo de presentación de borde hay que usar.</p> + +<p>En el modelo de fusión, las celdas adyacentes comparten los mismos bordes</p> + +<p>En el modelo de separación, cada celda adyacente tiene su propio borde (la distancia entre cada borde es dado con la propiedad del {{ Cssxref("border-spacing", "espaciado de borde") }}).</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("separate", "separado") }}</li> + <li>{{ Cssxref("inheritance", "Valor heredado") }}: Yes</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Cssxref("computed value", "Valor calculado") }}:</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">border-collapse: value +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<ul> + <li><strong>inherit</strong> : Define explícitamente el valor como heredada del elemento padre.</li> + <li><strong>separate</strong> : Utiliza el modo de presentación de separación de borde.</li> + <li><strong>collapse</strong> : Utiliza el modo de presentación de fusión de borde</li> +</ul> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p><a href="/samples/cssref/border-collapse.html">Ver El Ejemplo Vivo</a></p> + +<pre><table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500"> +</pre> + +<pre><table border="1" style="border-collapse: separate" bordercolor="#111111" width="500"> +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>En el modelo de fusión, el valor del {{ Cssxref("border-style", "estilo de borde") }} de <code>inset</code> se comporta como <code>groove</code>, y <code>outset</code> como <code>ridge</code>.</p> + +<p>CSS 2 especifica que el valor inicial para esta propiedad es <code>collapse</code>, pero CSS 2.1 y Mozilla/Opera definen o se comportan como si el valor inicial fuera <code>separate</code>.</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#collapsing-borders">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/REC-CSS2/tables.html#borders">CSS 3</a></li> +</ul> + +<h3 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>5.5</td> + </tr> + <tr> + <td>Netscape</td> + <td>7</td> + </tr> + <tr> + <td>Opera</td> + <td>5</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("border-spacing") }}</p> + +<div class="noinclude"> +<p><span class="comment">Categorías</span></p> + +<p><span class="comment">Interwiki Languages</span></p> +</div> + +<p>{{ languages( { "en": "en/CSS/border-collapse", "fr": "fr/CSS/border-collapse", "pl": "pl/CSS/border-collapse" } ) }}</p> diff --git a/files/es/web/css/border-color/index.html b/files/es/web/css/border-color/index.html new file mode 100644 index 0000000000..ae50c74d4d --- /dev/null +++ b/files/es/web/css/border-color/index.html @@ -0,0 +1,112 @@ +--- +title: border-color +slug: Web/CSS/border-color +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-color +--- +<p>{{ PreviousNext("CSS:border", "CSS:border-style") }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>la propiedad <code>border-color</code> es un atajo para definir el color de los cuatro bordes de un elemento.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: el {{ Cssxref("color") }} del elemento en sí</li> + <li>Se aplica a: todos los elementos</li> + <li>{{ Cssxref("inheritance", "Herencia") }}: no</li> + <li>Percentages: N/A</li> + <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li> + <li>{{ Cssxref("computed value", "Valor calculada") }}: el valor del <code>color</code> por defecto, o lo que se especificó.</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">border-color: [ <color> || transparent ]{1,4} | <em>inherit</em> +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt><color> </dt> + <dd>el color se puede especificar con un valor RGB hexa-decimal o regular, o con el nombre predefinido de ese color.</dd> +</dl> + +<dl> + <dt>transparent </dt> + <dd>el borde no aparece pero ocupa el sitio definido.</dd> +</dl> + +<p>Se pueden pasar hasta cuatro valores;</p> + +<p>Con <strong>un</strong> color, los cuatro lados tendrán el mismo.<br> + Con <strong>dos</strong> colores, los lados de arriba y abajo utilizan el primer valor y los izquierda y derecha el segundo.<br> + Con <strong>tres</strong> colores, el primero para arriba, el segundo para izquierda y derecha y el tercero para abajo.<br> + Con <strong>cuatro</strong> colores, el primero para arriba, el segundo para la derecha, el tercero para abajo y el cuarto para la izquierda.</p> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p><a href="/samples/cssref/border.html">Ver El Ejemplo Vivo</a></p> + +<pre>element { + border-width: 1px; + border-style: solid; + border-color: black; +} +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>Para poder ver el/los bordes también hay que definir {{ Cssxref("border-width", "el ancho") }} con un valor positivo y {{ Cssxref("border-style", "el estilo") }} con algo visible. (<em>diferente de <code>none o hidden</code></em>)</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#border-color">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-color-properties">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-color">CSS 3</a></li> +</ul> + +<h3 id="Compatibilidad" name="Compatibilidad">Compatibilidad</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegadores</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Extensiones_Mozilla" name="Extensiones_Mozilla">Extensiones Mozilla</h3> + +<p>La siguientes extensiones definen los múltiples colores de los respectivos bordes en los navegadores Gecko.</p> + +<ul> + <li>{{ Cssxref("-moz-border-bottom-colors") }}</li> + <li>{{ Cssxref("-moz-border-left-colors") }}</li> + <li>{{ Cssxref("-moz-border-right-colors") }}</li> + <li>{{ Cssxref("-moz-border-top-colors") }}</li> +</ul> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}</p> diff --git a/files/es/web/css/border-end-end-radius/index.html b/files/es/web/css/border-end-end-radius/index.html new file mode 100644 index 0000000000..478bacb8f6 --- /dev/null +++ b/files/es/web/css/border-end-end-radius/index.html @@ -0,0 +1,98 @@ +--- +title: border-end-end-radius +slug: Web/CSS/border-end-end-radius +translation_of: Web/CSS/border-end-end-radius +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-end-end-radius</code></strong> define un radio de borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +/* With one value the corner will be a circle */ +border-end-end-radius: 10px; +border-end-end-radius: 1em; + +/* With two values the corner will be an ellipse */ +border-end-end-radius: 1em 2em; + +/* Global values */ +border-end-end-radius: inherit; +border-end-end-radius: initial; +border-end-end-radius: unset; +</pre> + +<p>Por ejemplo, en un modo de escritura <code>horizontal-tb</code>, esta propiedad corresponde a la propiedad {{CSSxRef("border-bottom-right-radius")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: rebeccapurple; + width: 120px; + height: 120px; + border-end-end-radius: 10px; +} + +.exampleText { + writing-mode: vertical-rl; + padding: 10px; + background-color: #fff; + border-end-end-radius: 10px; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<p>{{CSSInfo}}</p> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-end-end-radius")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>La propiedad física asignada: {{CSSxRef("border-bottom-right-radius")}}</li> + <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-end-start-radius/index.html b/files/es/web/css/border-end-start-radius/index.html new file mode 100644 index 0000000000..b58ce4add6 --- /dev/null +++ b/files/es/web/css/border-end-start-radius/index.html @@ -0,0 +1,98 @@ +--- +title: border-end-start-radius +slug: Web/CSS/border-end-start-radius +translation_of: Web/CSS/border-end-start-radius +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-end-start-radius</code></strong> define un radio del borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +/* With one value the corner will be a circle */ +border-end-start-radius: 10px; +border-end-start-radius: 1em; + +/* With two values the corner will be an ellipse */ +border-end-start-radius: 1em 2em; + +/* Global values */ +border-end-start-radius: inherit; +border-end-start-radius: initial; +border-end-start-radius: unset; +</pre> + +<p>Por ejemplo, en un modo de escritura <code>horizontal-tb</code>, esta propiedad corresponde a la propiedad {{CSSxRef("border-top-right-radius")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: rebeccapurple; + width: 120px; + height: 120px; + border-end-start-radius: 10px; +} + +.exampleText { + writing-mode: vertical-rl; + padding: 10px; + background-color: #fff; + border-end-start-radius: 10px; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<p>{{CSSInfo}}</p> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-end-start-radius")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>La propiedad física asignada: {{CSSxRef("border-top-right-radius")}}</li> + <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-image-outset/index.html b/files/es/web/css/border-image-outset/index.html new file mode 100644 index 0000000000..565a215775 --- /dev/null +++ b/files/es/web/css/border-image-outset/index.html @@ -0,0 +1,138 @@ +--- +title: border-image-outset +slug: Web/CSS/border-image-outset +tags: + - Bordes CSS + - CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-image-outset +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <strong><code>border-image-outset</code></strong> describe el monto por el cual se extenderá la imagen de borde más allá del límite de la caja.</p> + +<p>Las porciones de la imagen de borde que se dibujen fuera de los límites de la caja como resultado de esta propiedad no provocarán desplazamiento del contenido. Estas áreas tampoco capturarán o causarán que ocurran eventos del ratón con referencia al elemento al que pertenecen.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* border-image-outset: <em>sides</em> */ +border-image-outset: 1.5; + +/* border-image-outset: <em>vertical</em> <em>horizontal</em> */ +border-image-outset: 1 1.2; + +/* border-image-outset: <em>top</em> <em>horizontal</em> <em>bottom */</em> +border-image-outset: 30px 2 45px; + +/* border-image-outset: <em>top</em> <em>right</em> <em>bottom</em> <em>left */</em> +border-image-outset: 7px 12px 14px 5px; + +border-image-outset: inherit; +</pre> + +<h3 id="Valores">Valores</h3> + +<div class="note"> +<p>Cuando un valor se especifica como valor {{cssxref("<number>")}} sin unidad, el valor es multiplicado por el {{cssxref("border-width")}} calculado correspondiente, para determinar el valor de <code>border-image-outset</code>. Los valores negativos no son permitidos.</p> +</div> + +<dl> + <dt><em>sides</em></dt> + <dd>Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en las cuatro direcciones.</dd> + <dt><em>horizontal</em></dt> + <dd>Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones horizontales (izquierda y derecha).</dd> + <dt><em>vertical</em></dt> + <dd>Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones verticales (superior e inferior).</dd> + <dt><em>top</em></dt> + <dd>Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde superior de la caja.</dd> + <dt><em>bottom</em></dt> + <dd>Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde inferior de la caja.</dd> + <dt><em>right</em></dt> + <dd>Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde derecho de la caja.</dd> + <dt><em>left</em></dt> + <dd>Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde izquierdo de la caja.</dd> + <dt><code>inherit</code></dt> + <dd>Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de sus elementos padre.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-image-outset', 'border-image-outset')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>15.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>11</td> + <td>15</td> + <td>6</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/border-image-repeat/index.html b/files/es/web/css/border-image-repeat/index.html new file mode 100644 index 0000000000..14410bd1ff --- /dev/null +++ b/files/es/web/css/border-image-repeat/index.html @@ -0,0 +1,123 @@ +--- +title: border-image-repeat +slug: Web/CSS/border-image-repeat +tags: + - Bordes CSS + - CSS + - Propiedades CSS + - Referencia +translation_of: Web/CSS/border-image-repeat +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>border-image-repeat</code></strong> define cómo se manejará la parte media de una imagen de borde para que coincida con el tamaño del borde. Tiene sintaxis de un valor, el cual describe el comportamiento de todos los lados, y otra sintaxis de dos valores, que establece diferentes valores para el comportamiento horizontal y vertical.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* border-image-repeat: <em>type</em> */ +border-image-repeat: stretch; + +/* border-image-repeat: <em>horizontal</em> <em>vertical</em> */ +border-image-repeat: round stretch; + +/* Global values */ +border-image-repeat: inherit; +border-image-repeat: initial; +border-image-repeat: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><em>type</em></dt> + <dd>Puede ser <code>stretch</code>, <code>repeat</code>, o <code>round</code>, que denotan cómo será tratada la imagen vertical y horizontalmente.</dd> + <dt><em>horizontal</em></dt> + <dd>Puede ser <code>stretch</code>, <code>repeat</code>, o <code>round</code>, denotando cómo será tratada la imagen horizontalmente.</dd> + <dt><em>vertical</em></dt> + <dd>Puede ser <code>stretch</code>, <code>repeat</code>, o <code>round</code>, denotando cómo será tratada la imagen verticalmente.</dd> + <dt><code>stretch</code></dt> + <dd>Palabra clave que indica que la imagen deberá ser estirada para cubrir el espacio entre dos bordes.</dd> + <dt><code>repeat</code></dt> + <dd>Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes.</dd> + <dt><code>round</code></dt> + <dd>Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes. Si la imagen no se ajusta después de repetirse un número íntegro de veces, la imagen es escalada para ajustarse.</dd> + <dt><code>space</code></dt> + <dd>La imagen es repetida hasta cubrir el área del elemento. Si no se cubre el área completa con un número de imágenes, el espacio extra es distribuido al rededor de éstas.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css; highlight[7]">#borderImageRepetition { + width: 260px; + height: 80px; + margin-bottom: 10px; + border: 30px solid; + border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; + border-image-repeat: stretch; /* Puede ser modificado en el ejemplo en vivo */ +} +</pre> + +<div class="hidden"> +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div id="borderImageRepetition"> +</div> +<select id="repetition"> + <option value="stretch">stretch</option> + <option value="repeat">repeat</option> + <option value="round">round</option> + <option value="space">space</option> + <option value="stretch repeat">stretch repeat</option> + <option value="space round">space round</option> +</select> +</pre> + +<h3 id="Contenido_JavaScript">Contenido JavaScript</h3> + +<pre class="brush: js">var repetition = document.getElementById("repetition"); +repetition.addEventListener("change", function (evt) { + document.getElementById("borderImageRepetition").style.borderImageRepeat = evt.target.value; +}); +</pre> +</div> + +<p>{{EmbedLiveSample("Example", "330px", "180px")}}</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-image-repeat', 'border-image-repeat')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{Compat("css.properties.border-image-repeat")}}</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="https://css-tricks.com/almanac/properties/b/border-image/">css-tricks border-image</a></li> +</ul> diff --git a/files/es/web/css/border-image-slice/index.html b/files/es/web/css/border-image-slice/index.html new file mode 100644 index 0000000000..4a3c074a22 --- /dev/null +++ b/files/es/web/css/border-image-slice/index.html @@ -0,0 +1,159 @@ +--- +title: border-image-slice +slug: Web/CSS/border-image-slice +tags: + - Bordes CSS + - CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-image-slice +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>border-image-slice</code></strong> divide la imagen especificada por {{cssxref("border-image-source")}} en nueve regiones: las cuatro esquinas, los cuatro bordes y el espacio enmedio. Esto se hace especificando cuatro desplazamientos hacia adentro.</p> + +<p><a href="/files/3814/border-image-slice.png" style="float: left;"><img alt="The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties" src="/files/3814/border-image-slice.png" style="height: 132px; margin: 1px; padding: 1em; width: 250px;"></a>Cuatro valores controlan la posición de las líneas de corte. Si algunas no son especificada, se infieren de las otras, con la sintaxis común de cuatro valores de CSS.</p> + +<p>La región media no es usada por el borde en sí, pero sí se usa como imagen de fondo si se establece la palabra clave <code>fill</code>. Se puede establecer este valor en cualquier posición en la propiedad (antes, después o entre los otros valores).</p> + +<p>Las propiedades {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}} y {{cssxref("border-image-outset")}} definen cómo se usarán estas imágenes.</p> + +<p>La propiedad abreviada {{cssxref("border-image")}} podría restaurar esta propiedad a su valor predeterminado.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* border-image-slice: <em>slice</em> */ +border-image-slice: 30%; + +/* border-image-slice: <em>horizontal</em> <em>vertical</em> */ +border-image-slice: 10% 30%; + +/* border-image-slice: <em>top</em> <em>horizontal</em> <em>bottom</em> */ +border-image-slice: 30 30% 45; + +/* border-image-slice: <em>top</em> <em>right</em> <em>bottom</em> <em>left</em> */ +border-image-slice: 7 12 14 5; + +/* border-image-slice: … fill */ +/* The fill value can be placed between any value */ +border-image-slice: 10% fill 7 12; + +/* Global values */ +border-image-slice: inherit; +border-image-slice: initial; +border-image-slice: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><em>slice</em></dt> + <dd>Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las cuatro líneas de corte. Un valor {{cssxref("<number>")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inváildos, y valores mayores al tamaño relevante, anchura o altura, son restringidos a <code>100%</code>.</dd> + <dt><em>horizontal</em></dt> + <dd>Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las dos líneas de corte horizontales, la superior y la inferior. El valor {{cssxref("<number>")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd> + <dt><em>vertical</em></dt> + <dd>Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las dos líneas de corte verticales, la izquierda y la derecha. El valor {{cssxref("<number>")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd> + <dt><em>top</em></dt> + <dd>Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte superior. El valor {{cssxref("<number>")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd> + <dt><em>bottom</em></dt> + <dd>Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte inferior. El valor {{cssxref("<number>")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd> + <dt><em>right</em></dt> + <dd>Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte derecha. El valor {{cssxref("<number>")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd> + <dt><em>left</em></dt> + <dd>Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte izquierda. El valor {{cssxref("<number>")}} representa <em>píxeles</em> para imágenes de mapa de bits y <em>coordenadas</em> para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a <code>100%</code>.</dd> + <dt><code>fill</code></dt> + <dd>Es una palabra clave cuya presencia forza que la región media de la imagen sea mostrada sobre la imagen de fondo; su tamaño y altura son redimensionados acorde a los fragmentos superior e izquierdo, respectivamente.</dd> + <dt><code>inherit</code></dt> + <dd>Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de su elemento padre.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>15.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("15.0")}}<sup>[1]</sup></td> + <td>11</td> + <td>15</td> + <td>6</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>4.1{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Hasta Gecko 47.0 {{geckoRelease("47.0")}} las imágenes SVGs sin viewport no eran divididas correctamente ({{bug("619500")}}). A partir de Gecko 48.0 {{geckoRelease("48.0")}} son mostradas igual que los SVGs con viewport, aunque si las partes no son exactamente el 50%, son ajustadas incorrectamente ({{bug("1264809")}}). Esto fue arreglado en Gecko 49.0 {{geckoRelease("49.0")}}, aunque aun hay un problema con los SVGs sin viewport donde <a href="https://wiki.mozilla.org/Electrolysis">e10s</a> es deshabilitado ({{bug("1284798")}}).</p> + +<p>También, SVGs pequeños son ajustados incorrectamente, porque los porcentajes en {{cssxref("border-image-slice")}} son calculados como enteros, en vez de reales ({{bug("1284797")}}).</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases">Illustrated description of the 1-to-4-value syntax</a></li> +</ul> diff --git a/files/es/web/css/border-image/index.html b/files/es/web/css/border-image/index.html new file mode 100644 index 0000000000..a2f2ca8c26 --- /dev/null +++ b/files/es/web/css/border-image/index.html @@ -0,0 +1,199 @@ +--- +title: border-image +slug: Web/CSS/border-image +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image +--- +<div>{{CSSRef("CSS Borders")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad de CSS <code>border-image</code> permite utilizar una imágen para definir los bordes de los elementos. Esto hace que dibujarlos sea más simple y elimina la necesidad de utilizar muchas cajas en algunos casos.</p> + +<p>La propiedad <code>border-image</code> es usada en lugar de la sentencia {{cssxref("border-style")}}. Por eso es muy importante tener en cuenta el valor dado por la sentencia {{cssxref("border-image-source")}}, que se puede establecer ya sea por la propiedad <code>border-image-source</code> o la abreviatura <code>border-image</code>, en caso de que su valor sea nulo (none), o si la imágen no se puede visualizar, se utilizarán los estilos de borde.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Etiquetado formal</a>: {{csssyntax("border-image")}}</pre> + +<h3 id="Valores">Valores</h3> + +<p>A continuación vea las respectivas propiedades para los diferentes valores.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Bitmap_repeated_(repeat)">Bitmap repeated (repeat)</h3> + +<p>La imágen es cortada para rellenar el area del borde, repitiendose si es necesario.</p> + +<pre class="brush:css">.example { + border: 30px solid transparent; + -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */ + -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */ + -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */ + border-image:url("/files/4127/border.png") 30 30 repeat; +} +</pre> + +<p>Resultado:<br> + <img alt="border image repeat demo" src="/files/4129/repeat.png" style="height: 118px; width: 349px;"></p> + +<h3 id="Bitmap_repeated_(round)">Bitmap repeated (round)</h3> + +<p>La opción 'round' es una variación de la opción 'repeat', la cual distribuye las partes de tal manera que los extremos se conecten bién.</p> + +<pre class="brush: css">.example { + border: 30px solid transparent; + -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */ + -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */ + -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */ + border-image:url("/files/4127/border.png") 30 30 round; +}</pre> + +<p>Resultado:<br> + <img alt="border image round demo" src="/files/4131/round.png" style="height: 155px; width: 349px;"></p> + +<h3 id="Bitmap_stretched">Bitmap stretched</h3> + +<p>La opción 'stretch' estira la imágen para rellenar todo el borde del área</p> + +<pre class="brush:css">.example { + border: 30px solid transparent; + -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */ + -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */ + -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */ + border-image:url("/files/4127/border.png") 30 30 stretch; +}</pre> + +<p>Resultado:<br> + <img alt="border image stretch demo" src="/files/4133/stretch.png" style="height: 118px; width: 349px;"></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-image', 'border-image')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}} [1]</p> + + <p>Without prefix since {{CompatGeckoDesktop("15")}}</p> + </td> + <td> + <p>7.0{{property_prefix("-webkit")}}</p> + + <p>Without prefix since 16.0</p> + </td> + <td> + <p><span style="line-height: 1.5;">11</span></p> + </td> + <td> + <p>10.5 / 11.0{{property_prefix("-o")}} [2]</p> + + <p>Without prefix since 15.0</p> + </td> + <td> + <p>3.0{{property_prefix("-webkit")}}</p> + + <p>Without prefix since 6.0</p> + </td> + </tr> + <tr> + <td>optional <code><border-image-slice></code></td> + <td>{{CompatGeckoDesktop("15")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>fill</code> keyword</td> + <td>{{CompatGeckoDesktop("15")}}</td> + <td>Yes</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>Yes (6)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>iOS Safari</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Android Browser</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>3.2{{property_prefix("-webkit")}}</p> + + <p>Without prefix since {{CompatGeckoMobile("15")}}</p> + </td> + <td>{{CompatNo}}</td> + <td>11.0{{property_prefix("-o")}}</td> + <td>2.1{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>optional <code><border-image-slice></code></td> + <td>{{CompatGeckoMobile("15")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>fill</code> keyword</td> + <td>{{CompatGeckoMobile("15")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>Yes(18)</td> + </tr> + </tbody> +</table> +</div> + +<ul> + <li>[1] An earlier version of the specification was implemented, prefixed, in Gecko versions prior to 15.</li> + <li>[2] For Opera, the prefixed property was added <em>after</em> the non-prefixed.</li> +</ul> diff --git a/files/es/web/css/border-inline-color/index.html b/files/es/web/css/border-inline-color/index.html new file mode 100644 index 0000000000..cf7c658d5f --- /dev/null +++ b/files/es/web/css/border-inline-color/index.html @@ -0,0 +1,86 @@ +--- +title: border-inline-color +slug: Web/CSS/border-inline-color +translation_of: Web/CSS/border-inline-color +--- +<div>{{CSSRef}}{{SeeCompatTable}} </div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-inline-color</code></strong> define el color del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<pre class="brush:css no-line-numbers">border-inline-color: yellow; +border-inline-color: #F5F6F7; +</pre> + +<p>El color del borde en otra dimensión puede establecerse con {{cssxref("border-block-color")}} que establece {{cssxref("border-block-start-color")}}, y {{cssxref("border-block-end-color")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'color'></code></dt> + <dd>El color del borde. Mira {{cssxref("color")}}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 10px solid blue; + border-inline-color: red; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-inline-color")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097</li> +</ul> diff --git a/files/es/web/css/border-inline-end-color/index.html b/files/es/web/css/border-inline-end-color/index.html new file mode 100644 index 0000000000..961d2d0e1e --- /dev/null +++ b/files/es/web/css/border-inline-end-color/index.html @@ -0,0 +1,90 @@ +--- +title: border-inline-end-color +slug: Web/CSS/border-inline-end-color +translation_of: Web/CSS/border-inline-end-color +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-inline-end-color</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> property defines the color of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">border-inline-end-color: rebeccapurple; +border-inline-end-color: #663399; +</pre> + +<p>Propiedades relacionadas son {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, y {{cssxref("border-inline-start-color")}}, que definen los otros colores del borde del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'color'></code></dt> + <dd>El color del borde. Mira {{cssxref("color")}}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 10px solid blue; + border-inline-end-color: red; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-inline-end-color")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-inline-end-style/index.html b/files/es/web/css/border-inline-end-style/index.html new file mode 100644 index 0000000000..1f3a6dbfe7 --- /dev/null +++ b/files/es/web/css/border-inline-end-style/index.html @@ -0,0 +1,92 @@ +--- +title: border-inline-end-style +slug: Web/CSS/border-inline-end-style +translation_of: Web/CSS/border-inline-end-style +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-inline-end-style</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> property defines the style of the logical inline end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <'border-style'> values */ +border-inline-end-style: dashed; +border-inline-end-style: dotted; +border-inline-end-style: groove; +</pre> + +<p>Propiedades relacionadas son {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, and {{cssxref("border-inline-start-style")}}, que definen los otros estilos del borde del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'border-style'></code></dt> + <dd>La línea de estilo del borde. Mira {{ cssxref("border-style") }}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 5px solid blue; + border-inline-end-style: dashed; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-inline-end-style")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-inline-end-style")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-inline-end-width/index.html b/files/es/web/css/border-inline-end-width/index.html new file mode 100644 index 0000000000..3924e681f6 --- /dev/null +++ b/files/es/web/css/border-inline-end-width/index.html @@ -0,0 +1,91 @@ +--- +title: border-inline-end-width +slug: Web/CSS/border-inline-end-width +translation_of: Web/CSS/border-inline-end-width +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong> <code>border-inline-end-width</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> property defines the width of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <'border-width'> values */ +border-inline-end-width: 2px; +border-inline-end-width: thick; +</pre> + +<p>Propiedades relacionadas son {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-start-width")}}, que definen los otros anchos del borde del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'border-width'></code></dt> + <dd>El ancho del borde. Mira {{ cssxref("border-width") }}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 1px solid blue; + border-inline-end-width: 5px; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-inline-end-width")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-inline-end/index.html b/files/es/web/css/border-inline-end/index.html new file mode 100644 index 0000000000..7303c2fafc --- /dev/null +++ b/files/es/web/css/border-inline-end/index.html @@ -0,0 +1,98 @@ +--- +title: border-inline-end +slug: Web/CSS/border-inline-end +translation_of: Web/CSS/border-inline-end +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-inline-end</code></strong> es una <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">propiedad abreviada</a> para establecer los valores lógicos individuales del borde en línea final en un solo lugar en la hoja de estilos. </p> + +<div>{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">border-inline-end: 1px; +border-inline-end: 2px dashed; +border-inline-end: medium dashed blue; +</pre> + +<p><code>border-inline-end</code> puede ser usado para establecer los valores de uno o más de {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}}, y {{cssxref("border-inline-end-color")}}. El borde físico al que se mapea depende<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades</span><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</span></p> + +<p>Propiedades relacionadas son {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, and {{cssxref("border-inline-start")}}, que definen los otros bordes del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<p>El <code>border-inline-end</code> es especificado con uno o más de los siguientes valores, en cualquier orden:</p> + +<dl> + <dt><code><'border-width'></code></dt> + <dd>El ancho del borde. Mira {{cssxref("border-width")}}.</dd> + <dt><code><'border-style'></code></dt> + <dd>La línea de estilo del borde. Mira {{cssxref("border-style")}}.</dd> + <dt><code><'color'></code></dt> + <dd>El color del borde. Mira {{cssxref("color")}}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + border-inline-end: 5px dashed blue; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-inline-end")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-inline-start-color/index.html b/files/es/web/css/border-inline-start-color/index.html new file mode 100644 index 0000000000..b6c7da3e00 --- /dev/null +++ b/files/es/web/css/border-inline-start-color/index.html @@ -0,0 +1,90 @@ +--- +title: border-inline-start-color +slug: Web/CSS/border-inline-start-color +translation_of: Web/CSS/border-inline-start-color +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-inline-start-color</code></strong> define el color del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">border-inline-start-color: red; +border-inline-start-color: #ee4141; +</pre> + +<p>Propiedades relacionadas son {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, y {{cssxref("border-inline-end-color")}}, que define los otros colores del borde del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'color'></code></dt> + <dd>El color del borde. Mira {{cssxref("color")}}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 10px solid blue; + border-inline-start-color: red; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-inline-start-color")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, y {{cssxref("border-left-color")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-inline-start-style/index.html b/files/es/web/css/border-inline-start-style/index.html new file mode 100644 index 0000000000..e02c4e585b --- /dev/null +++ b/files/es/web/css/border-inline-start-style/index.html @@ -0,0 +1,92 @@ +--- +title: border-inline-start-style +slug: Web/CSS/border-inline-start-style +translation_of: Web/CSS/border-inline-start-style +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-inline-start-style</code></strong> define el estilo del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <'border-style'> values */ +border-inline-start-style: dashed; +border-inline-start-style: dotted; +border-inline-start-style: groove; +</pre> + +<p>Propiedades relacionadas son {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, y {{cssxref("border-inline-end-style")}}, que definen los otros estilos del borde del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'border-style'></code></dt> + <dd>La línea de estilo del borde. Mira {{ cssxref("border-style") }}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 5px solid blue; + border-inline-start-style: dashed; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-inline-start-style")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-inline-start-width/index.html b/files/es/web/css/border-inline-start-width/index.html new file mode 100644 index 0000000000..d507fcb933 --- /dev/null +++ b/files/es/web/css/border-inline-start-width/index.html @@ -0,0 +1,91 @@ +--- +title: border-inline-start-width +slug: Web/CSS/border-inline-start-width +translation_of: Web/CSS/border-inline-start-width +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-inline-start-width</code></strong> define el ancho del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <'border-width'> values */ +border-inline-start-width: 5px; +border-inline-start-width: thick; +</pre> + +<p>Propiedades relacionadas son {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-end-width")}}, que definen los otros anchos del borde del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'border-width'></code></dt> + <dd>El ancho del borde. Mira {{ cssxref("border-width") }}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 1px solid blue; + border-inline-start-width: 5px; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-inline-start-width")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-inline-start/index.html b/files/es/web/css/border-inline-start/index.html new file mode 100644 index 0000000000..5a40bc8105 --- /dev/null +++ b/files/es/web/css/border-inline-start/index.html @@ -0,0 +1,98 @@ +--- +title: border-inline-start +slug: Web/CSS/border-inline-start +translation_of: Web/CSS/border-inline-start +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong> <code>border-inline-start</code></strong> es una <a href="/en-US/docs/Web/CSS/Shorthand_properties">propiedad abreviada</a> para establecer los valores de la propiedad inicial del borde individual en línea en un solo lugar en la hoja de estilos.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">border-inline-start: 1px; +border-inline-start: 2px dotted; +border-inline-start: medium dashed green; +</pre> + +<p><code>border-inline-start</code> es especificado con uno o más de {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}}, and {{cssxref("border-inline-start-color")}}. El borde físico al que se mapea depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<p>Propiedades relacionadas son {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, and {{cssxref("border-inline-end")}}, que definen los otros bordes del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<p>El <code>border-inline-start</code> es especificado con uno o más de los sigueintes valores, en cualquier orden:</p> + +<dl> + <dt><code><'border-width'></code></dt> + <dd>El ancho del borde. Mira {{cssxref("border-width")}}.</dd> + <dt><code><'border-style'></code></dt> + <dd>La línea de estilo del borde. Mira {{cssxref("border-style")}}.</dd> + <dt><code><'color'></code></dt> + <dd>El color del borde. Mira {{cssxref("color")}}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + border-inline-start: 5px dashed blue; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-inline-start")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-inline-style/index.html b/files/es/web/css/border-inline-style/index.html new file mode 100644 index 0000000000..23eea1cf40 --- /dev/null +++ b/files/es/web/css/border-inline-style/index.html @@ -0,0 +1,90 @@ +--- +title: border-inline-style +slug: Web/CSS/border-inline-style +translation_of: Web/CSS/border-inline-style +--- +<div>{{CSSRef}}{{SeeCompatTable}} </div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a><strong> <code>border-inline-style</code></strong> define el estilo de los bordes lógicos en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<pre class="brush:css no-line-numbers">/* <'border-style'> values */ +border-inline-style: dashed; +border-inline-style: dotted; +border-inline-style: groove; +</pre> + +<p>El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-block-style")}}, que establece {{cssxref("border-block-start-style")}}, y {{cssxref("border-block-end-style")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'border-style'></code></dt> + <dd>La línea de estilo del borde. Mira {{ cssxref("border-style") }}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 5px solid blue; + border-inline-style: dashed; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-inline-style")}}</p> + +<p> </p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-inline-width/index.html b/files/es/web/css/border-inline-width/index.html new file mode 100644 index 0000000000..b3c6eeb16f --- /dev/null +++ b/files/es/web/css/border-inline-width/index.html @@ -0,0 +1,88 @@ +--- +title: border-inline-width +slug: Web/CSS/border-inline-width +translation_of: Web/CSS/border-inline-width +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-inline-width</code></strong> define al ancho del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<pre class="brush:css no-line-numbers">/* <'border-width'> values */ +border-inline-width: 5px 10px; +border-inline-width: 5px; +border-inline-width: thick; +</pre> + +<p>El ancho del borde en otra dimensión puede establecerse con {{cssxref("border-block-width")}}, que establece {{cssxref("border-block-start-width")}}, y {{cssxref("border-block-end-width")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'border-width'></code></dt> + <dd>El ancho del borde. Mira {{ cssxref("border-width") }}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + border: 1px solid blue; + border-inline-width: 5px 10px; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-block-width")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-inline/index.html b/files/es/web/css/border-inline/index.html new file mode 100644 index 0000000000..cdff68b414 --- /dev/null +++ b/files/es/web/css/border-inline/index.html @@ -0,0 +1,94 @@ +--- +title: border-inline +slug: Web/CSS/border-inline +translation_of: Web/CSS/border-inline +--- +<p>{{CSSRef}}{{SeeCompatTable}} </p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a><strong> <code>border-inline</code></strong> es una <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">propiedad abreviada</a> para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos. </p> + +<pre class="brush:css no-line-numbers">border-inline: 1px; +border-inline: 2px dotted; +border-inline: medium dashed blue; +</pre> + +<p><code>border-inline</code> puede ser usada para establecer los valores de uno o más de {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}}, y {{cssxref("border-inline-color")}} estableciendo tanto el inicio como el final en la dimensión en línea a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponden a las propiedades {{cssxref("border-top")}} y {{cssxref("border-bottom")}} o {{cssxref("border-right")}}, and {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<p>El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-block")}}, que establece {{cssxref("border-block-start")}}, y {{cssxref("border-block-end")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<p>El <code>border-inline</code> es especificado con uno o más de los siguientes valores, en cualquier orden:</p> + +<dl> + <dt><code><'border-width'></code></dt> + <dd>El ancho del borde. Mira {{cssxref("border-width")}}.</dd> + <dt><code><'border-style'></code></dt> + <dd>La línea de estilo del borde. Mira {{cssxref("border-style")}}.</dd> + <dt><code><'color'></code></dt> + <dd>El color del borde. Mira {{cssxref("color")}}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + border-inline: 5px dashed blue; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline", "border-inline")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-inline")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-left-color/index.html b/files/es/web/css/border-left-color/index.html new file mode 100644 index 0000000000..1d78d5e755 --- /dev/null +++ b/files/es/web/css/border-left-color/index.html @@ -0,0 +1,73 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +translation_of: Web/CSS/border-left-color +--- +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p><code>border-left-color</code> pone el color del borde izquierdo de un elemento,con el valor de el color en hexadecimal o con palabras clave, como azul, verde, rojo <code> transparente </code>.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("color") }} propiedad</li> + <li>Se aplica a : todos los elementos</li> + <li>{{ Xref_cssinherited() }}: no</li> + <li>Porcentajes: N/A</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: cuando son tomados de la propiedad 'color',los valores computarizados de 'color'; de otra manera como sean especificados.</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">border-left-color:<em>color</em> | transparent | inherit +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt>color </dt> + <dd>El color puede ser especificado en un valor RGB en hexadecimal, o usando uno de los colores predeterminados</dd> + <dt>transparent </dt> + <dd>El elemento no tiene color de si mismo, en vez este enseña el color detras de este elemento.</dd> +</dl> + +<h3 id="Propiedades_parecidas" name="Propiedades_parecidas">Propiedades parecidas</h3> + +<ul> + <li>{{ Cssxref("border-color") }}</li> + <li>{{ Cssxref("border-bottom-color") }}</li> + <li>{{ Cssxref("border-right-color") }}</li> + <li>{{ Cssxref("border-top-color") }}</li> +</ul> + +<h3 id="Examples" name="Examples">Examples</h3> + +<p><a href="/samples/cssref/border.html">Ver El Ejemplo Vivo</a></p> + +<pre>element { + width: 300px; + padding: 15px; + border-bottom-size: 1px; + border-bottom-style: solid; + border-bottom-color: #000; +} + +</pre> + +<p> </p> + +<pre>p { +border-style: solid; +border-left-color: #ff0000 +} + +p { +border-style: solid; +border-left-color: rgb(255,0,0) +} +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<ul> + <li><a class="external" href="http://html-color-codes.com/">Color Chart by VisiBone</a></li> +</ul> diff --git a/files/es/web/css/border-left/index.html b/files/es/web/css/border-left/index.html new file mode 100644 index 0000000000..8c2b4d55ed --- /dev/null +++ b/files/es/web/css/border-left/index.html @@ -0,0 +1,120 @@ +--- +title: border-left +slug: Web/CSS/border-left +translation_of: Web/CSS/border-left +--- +<p>{{CSSRef}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El <code>borde_izquierdo</code> es una propiedad rápida para poner el ancho, estilo y color del borde izquierdo de un elemento. Esta propiedad puede ser usada para poner los valores de uno o mas de : {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-color") }}. Valores omitidos son puestos a su valor inicial.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="eval">border-left: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>] ; +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt>border-width</dt> + <dd>See {{ Cssxref("border-width") }}.</dd> + <dt>border-style </dt> + <dd>See {{ Cssxref("border-style") }}.</dd> + <dt>border-color </dt> + <dd>See {{ Cssxref("border-color") }}.</dd> +</dl> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<p>element {</p> + +<pre class="eval"> border-left: 1px solid #000; +</pre> + +<p>}</p> + +<h2 id="Notas" name="Notas">Notas</h2> + +<p>Si las reglas no especifican un color de borde, el borde tendrá la propiedad {{ Cssxref("color") }}</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No significant changes</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#border-left', 'border-left') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>4</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/border-radius/index.html b/files/es/web/css/border-radius/index.html new file mode 100644 index 0000000000..39e3ab03d7 --- /dev/null +++ b/files/es/web/css/border-radius/index.html @@ -0,0 +1,320 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-radius +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <code>border-radius</code> permite a los desarrolladores Web definir qué tan redondeadas serán las esquinas. La redondez de cada esquina está definida usando uno o dos valores para el radio que define su forma dependiendo si es un círculo o una elipse.</p> + +<p><img alt="Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse" class="default internal" src="/files/3638/border-radius-sh.png" style="height: 164px; width: 549px;"></p> + +<p>El radio se aplica a todo el {{ Cssxref("background") }}, aun si el elemento no tiene bordes; la posición exacta del recorte es definida por la propiedad {{ Cssxref("background-clip") }}.</p> + +<p>Esta propiedad es un <a href="/en/CSS/Shorthand_properties" title="en/CSS/Shorthand_properties">atajo</a> para establecer las cuatro propiedades {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }} y {{ Cssxref("border-bottom-left-radius") }}.</p> + +<div class="note">As with any shorthand property, individual inherited values are not possible, that is <code>border-radius:0 0 inherit inherit</code>, which would override existing definitions partially. In that case, the individual longhand properties have to be used.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="twopartsyntaxbox">Formal grammar: [ <var><length></var> | <var><percentage></var> ]{1,4} [ / [ <var><length></var> | <var><percentage></var> ]{1,4}] ? + \------------------------------/ \-------------------------------/ + First radii Second radii (optional) +</pre> + +<pre><strong>The syntax of the first radius allows one to four values:</strong> +border-radius: <em>radius</em> +border-radius: <em>top-left-and-bottom-right</em> <em>top-right-and-bottom-left</em> +border-radius: <em>top-left</em> <em>top-right-and-bottom-left</em> <em>bottom-right</em> +border-radius: <em>top-left</em> <em>top-right</em> <em>bottom-right</em> <em>bottom-left</em> + +<strong>The syntax of the second radius also allows one to four values</strong> +border-radius: (first radius values) / <em>radius</em> +border-radius: (first radius values) / <em>top-left-and-bottom-right</em> <em>top-right-and-bottom-left</em> +border-radius: (first radius values) / <em>top-left</em> <em>top-right-and-bottom-left</em> <em>bottom-right</em> +border-radius: (first radius values) / <em>top-left</em> <em>top-right</em> <em>bottom-right</em> <em>bottom-left</em> + +border-radius: inherit +</pre> + +<h3 id="Valores">Valores</h3> + +<table> + <tbody> + <tr> + <td style="vertical-align: top;"><em>radius</em></td> + <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td> + <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>top-left-and-bottom-right</em></td> + <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td> + <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>top-right-and-bottom-left</em></td> + <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td> + <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>top-left</em></td> + <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td> + <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>top-right</em></td> + <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td> + <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>bottom-right</em></td> + <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td> + <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.</td> + </tr> + <tr> + <td style="vertical-align: top;"><em>bottom-left</em></td> + <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td> + <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.</td> + </tr> + <tr> + <td style="vertical-align: top;"><code>inherit</code></td> + <td> </td> + <td style="vertical-align: top;">Is a keyword indicating that all four values are inherited from their parent's element calculated value.</td> + </tr> + </tbody> +</table> + +<h3 id="Valores_2">Valores</h3> + +<dl> + <dt><length></dt> + <dd>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS {{cssxref("<length>")}} data types. Negative values are invalid.</dd> + <dt><percentage></dt> + <dd>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.</dd> +</dl> + +<p>Por ejemplo:</p> + +<pre class="brush: css">border-radius: 1em/5em; + +/* es equivalente a: */ + +border-top-left-radius: 1em 5em; +border-top-right-radius: 1em 5em; +border-bottom-right-radius: 1em 5em; +border-bottom-left-radius: 1em 5em; +</pre> + +<pre class="brush: css">border-radius: 4px 3px 6px / 2px 4px; + +/* es equivalente a: */ + +border-top-left-radius: 4px 2px; +border-top-right-radius: 3px 4px; +border-bottom-right-radius: 6px 2px; +border-bottom-left-radius: 3px 4px; +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre style="display: inline-block; margin: 10px; border: solid 10px; border-radius: 10px 40px 40px 10px;"> border: solid 10px; + /* the border will curve into a 'D' */ + border-radius: 10px 40px 40px 10px; +</pre> + +<pre style="display: inline-block; margin: 10px; border: groove 1em red; border-radius: 2em;"> border: groove 1em red; + border-radius: 2em; +</pre> + +<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold; border-radius: 13em/3em;"> background: gold; + border: ridge gold; + border-radius: 13em/3em; +</pre> + +<pre style="display: inline-block; margin: 10px; background: gold; border: none; border-radius: 40px 10px;"> border: none; + border-radius: 40px 10px; +</pre> + +<pre style="display: inline-block; margin: 10px; background: black; color: white; border: none; border-radius: 50%;"> border: none; + border-radius: 50%; +</pre> + +<h2 id="Notas">Notas</h2> + +<ul> + <li>Dotted and dashed rounded border corners are rendered as solid in Gecko; see {{ bug("382721") }}.</li> + <li><code>border-radius</code> does not apply to table elements when {{ Cssxref("border-collapse") }} is <code>collapse</code>.</li> + <li>Old versions of WebKit handle multiple values differently, see below.</li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatGeckoDesktop("2.0") }}<br> + {{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }}</td> + <td>4.0<br> + 0.2{{ property_prefix("-webkit") }}</td> + <td>9.0</td> + <td>10.5</td> + <td>5.0<br> + 3.0{{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td>Elliptical borders</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>yes</td> + <td>yes</td> + <td>yes</td> + <td>yes, but see below</td> + </tr> + <tr> + <td>4 values for 4 corners</td> + <td>yes</td> + <td>4.0</td> + <td>yes</td> + <td>yes</td> + <td>5.0</td> + </tr> + <tr> + <td>Percentages</td> + <td>yes<br> + was {{ non-standard_inline() }} (see below)</td> + <td>yes</td> + <td>yes</td> + <td>11.5</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>iOS Safari</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Android Browser</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.2{{ property_prefix("-webkit") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>2.1{{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td>Elliptical borders</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>4 values for 4 corners</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Percentages</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="<percentage>_values"><code><percentage></code> values</h3> + +<ul> + <li>are not supported in older Chrome and Safari versions (it was <a class="external" href="http://trac.webkit.org/changeset/66615">fixed in Sepember 2010</a>)</li> + <li>are buggy in Opera prior to 11.50</li> + <li>are implemented in a non-standard way prior to Gecko 2.0 (Firefox 4). <strong>Both</strong> horizontal and vertical radii were relative to the width of the border box.</li> + <li>are not supported in older versions of iOS (prior to 5) and Android versions (prior to WebKit 532)</li> +</ul> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<p>In Gecko 2.0 <code>-moz-border-radius</code> was renamed to <code>border-radius</code>; <code>-moz-border-radius</code> was supported as an alias until Gecko 12.0. In order to conform to the CSS3 standard, Gecko 2.0</p> + +<ul> + <li>changes the handling of {{cssxref("<percentage>")}} values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with <code>border-radius: 50%;</code></li> + <li>makes rounded corners clip content and images (if {{ cssxref("overflow") }}<code>: visible</code> is not set)</li> +</ul> + +<div class="note"><strong>Note:</strong> Support for the prefixed version (<code>-moz-border-radius</code>) was removed in Gecko 13.0 {{ geckoRelease("13.0") }}.</div> + +<h3 id="WebKit_notes">WebKit notes</h3> + +<p>Older Safari and Chrome versions (prior to WebKit 532.5)</p> + +<ul> + <li>support only <strong>one</strong> value for all 4 corners. For different radii the <a href="/en/CSS/border-top-left-radius#Examples" title="en/CSS/border-top-left-radius#Examples">long form properties</a> must be used</li> + <li>don't support the slash <code>/</code> notation. If two values are specified, an elliptical border is drawn on all 4 corners + <pre>/* this is equivalent: */ + +-webkit-border-radius: 40px 10px; + border-radius: 40px/10px; +</pre> + </li> +</ul> + +<h3 id="Opera_notes">Opera notes</h3> + +<p>In Opera (prior to Opera 11.60), applying <code>border-radius</code> to replaced elements will not have rounded corners.</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>Border-radius-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}</li> +</ul> + +<p>{{ languages( { "de": "de/CSS/border-radius", "fr": "fr/CSS/-moz-border-radius", "ja": "ja/CSS/border-radius", "pl": "pl/CSS/-moz-border-radius" } ) }}</p> diff --git a/files/es/web/css/border-right/index.html b/files/es/web/css/border-right/index.html new file mode 100644 index 0000000000..ef5e1b4a3e --- /dev/null +++ b/files/es/web/css/border-right/index.html @@ -0,0 +1,109 @@ +--- +title: border-right +slug: Web/CSS/border-right +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-right +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">La propiedad <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>border-right</code></strong> es un a propiedad rápida para dar valores al {{cssxref("border-right-width")}}, {{cssxref("border-right-style")}} y {{cssxref("border-right-color")}}.</span> Estas propiedades establecen un <a href="/es/docs/Web/CSS/border">borde </a>derecho del elemento.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-right.html")}}</div> + + + +<p>Como con todas las propiedades rápidas, <code>border-right</code> siempre establece los valores de todas las propiedades que puede establecer, incluso si no están especificadas. Establece los no especificados a sus valores por defecto. Lo que significa que ...</p> + +<pre class="brush: css">border-right-style: dotted; +border-right: thick green; +</pre> + +<p>... es en realidad lo mismo que ...</p> + +<pre class="brush: css">border-right-style: dotted; +border-right: none thick green; +</pre> + +<p>... y el valor de {{cssxref("border-right-style")}} dado previamente a <code>border-right</code> es ignorado. Puesto que el valor por defecto de {{cssxref("border-right-style")}} es <code>none</code>, si no se especifica la parte <code>border-style</code> el resultado es no establecer un borde.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css no-line-numbers">border-right: 1px; +border-right: 2px dotted; +border-right: medium dashed green; +</pre> + +<p>Los tres valores de la propiedad rápida pueden ser especificados en cualquier orden, incluso omitiendo uno o dos de ellos.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><br-width></code></dt> + <dd>Ver {{cssxref("border-right-width")}}.</dd> + <dt><code><br-style></code></dt> + <dd>Ver {{cssxref("border-right-style")}}.</dd> + <dt>{{cssxref("<color>")}}</dt> + <dd>Ver {{cssxref("border-right-color")}}.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: html"><div> + Esta caja tiene un borde en el lado derecho. +</div></pre> + +<pre class="brush: css">div { + border-right: 4px dashed blue; + background-color: gold; + height: 100px; + width: 100px; + font-weight: bold; + text-align: center; +} +</pre> + +<p>{{EmbedLiveSample('Example')}}</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-right', 'border-right')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>No direct changes, though the modification of values for the {{cssxref("border-right-color")}} do apply to it.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant changes.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-right', 'border-right')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilitidad del navegador</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.border-right")}}</p> diff --git a/files/es/web/css/border-spacing/index.html b/files/es/web/css/border-spacing/index.html new file mode 100644 index 0000000000..3abde56c44 --- /dev/null +++ b/files/es/web/css/border-spacing/index.html @@ -0,0 +1,104 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-spacing +--- +<p><< <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a></p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>La propiedad de {{ Cssxref("border-spacing", "espaciado de borde") }} especifica la distancia entre los bordes de celdas adyacentes (sólo para el modelo de <a href="es/CSS/border-collapse">separación de borde</a>). Es el equivalente al atributo <code>cellspacing</code> en HTML.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: 0</li> + <li>Se aplica a: tablas y elementos con la propiedad <code>inline-table</code></li> + <li>{{ Cssxref("inheritance", "Valor heredado") }}: sí</li> + <li>Medio: {{ Xref_cssvisual() }}</li> + <li>{{ Cssxref("computed value", "Valor calculado") }}: dos largos absolutos.</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<p>border-spacing: <length> | <length> <length> | inherit</p> + +<h3 id="Valores" name="Valores">Valores</h3> + +<ul> + <li><strong><length></strong> : un largo a utilizar para el espaciado horizontal y vertical.</li> + <li><strong><length> <length></strong> : el primero da el espaciado horizontal (espacio entre celdas de una fila) y el segundo el espaciado vertical (espacio entre celdas de una columna).</li> +</ul> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p><a href="/samples/cssref/border-spacing.html">Ver El Ejemplo Vivo</a></p> + +<pre>table#space { + border-collapse: separate; + border-spacing: 10px 5px; +} +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>Ésta propiedad sólo se aplica cuando {{ Cssxref("border-collapse") }} es especificado en <code>separate</code>.</p> + +<p>El espaciado de borde también se utiliza en los bordes exteriores de las tablas donde la distancia entre los bordes de tabla y las celdas en la primera/última columna o fila es la suma de los espaciados (horizontales o verticales) y de los espaciados (arriba, derecho, abajo o izquierdo) en una tabla.</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing">CSS 2.1</a></li> +</ul> + +<h3 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Internet Explorer</td> + <td>7</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Mozilla</td> + <td>1</td> + </tr> + <tr> + <td>Safari</td> + <td>1</td> + </tr> + <tr> + <td>Opera</td> + <td>6</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("border-collapse") }}</p> + +<div class="noinclude"> +<p><span class="comment">Categorías</span></p> + +<p><span class="comment">Interwiki Languages</span></p> +</div> + +<p>{{ languages( { "fr": "fr/CSS/border-spacing", "pl": "pl/CSS/border-spacing", "en": "en/CSS/border-spacing" } ) }}</p> diff --git a/files/es/web/css/border-start-end-radius/index.html b/files/es/web/css/border-start-end-radius/index.html new file mode 100644 index 0000000000..97f10396ad --- /dev/null +++ b/files/es/web/css/border-start-end-radius/index.html @@ -0,0 +1,98 @@ +--- +title: border-start-end-radius +slug: Web/CSS/border-start-end-radius +translation_of: Web/CSS/border-start-end-radius +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-start-end-radius</code></strong> define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +/* With one value the corner will be a circle */ +border-start-end-radius: 10px; +border-start-end-radius: 1em; + +/* With two values the corner will be an ellipse */ +border-start-end-radius: 1em 2em; + +/* Global values */ +border-start-end-radius: inherit; +border-start-end-radius: initial; +border-start-end-radius: unset; +</pre> + +<p>Por ejemplo, en un modo de escritura <code>horizontal-tb</code>, esta propiedad corresponde a la propiedad {{CSSxRef("border-bottom-left-radius")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: rebeccapurple; + width: 120px; + height: 120px; + border-start-end-radius: 10px; +} + +.exampleText { + writing-mode: vertical-rl; + padding: 10px; + background-color: #fff; + border-start-end-radius: 10px; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<p>{{CSSInfo}}</p> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-start-end-radius")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>La propiedad física asignada: {{CSSxRef("border-bottom-left-radius")}}</li> + <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-start-start-radius/index.html b/files/es/web/css/border-start-start-radius/index.html new file mode 100644 index 0000000000..c7596f14ad --- /dev/null +++ b/files/es/web/css/border-start-start-radius/index.html @@ -0,0 +1,98 @@ +--- +title: border-start-start-radius +slug: Web/CSS/border-start-start-radius +translation_of: Web/CSS/border-start-start-radius +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>border-start-start-radius</code></strong> define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +/* With one value the corner will be a circle */ +border-start-start-radius: 10px; +border-start-start-radius: 1em; + +/* With two values the corner will be an ellipse */ +border-start-start-radius: 1em 2em; + +/* Global values */ +border-start-start-radius: inherit; +border-start-start-radius: initial; +border-start-start-radius: unset; +</pre> + +<p>Por ejemplo, en un modo de escritura <code>horizontal-tb</code>, esta propiedad corresponde a la propiedad {{CSSxRef("border-top-left-radius")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: rebeccapurple; + width: 120px; + height: 120px; + border-start-start-radius: 10px; +} + +.exampleText { + writing-mode: vertical-rl; + padding: 10px; + background-color: #fff; + border-start-start-radius: 10px; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<p>{{CSSInfo}}</p> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.border-start-start-radius")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>La propiedad física asignada: {{CSSxRef("border-top-left-radius")}}</li> + <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/border-style/index.html b/files/es/web/css/border-style/index.html new file mode 100644 index 0000000000..616f336ead --- /dev/null +++ b/files/es/web/css/border-style/index.html @@ -0,0 +1,242 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - Bordes CSS + - CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-style +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">La propiedad <strong><code>border-style</code></strong> <a href="/en/CSS" title="CSS">CSS</a> es una <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand property</a> (Propiedad abreviada) que establece el estilo de línea para los cuatro lados del borde de un elemento.</span></p> + +<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers notranslate">/* Keyword values */ +border-top-style: none; +border-top-style: hidden; +border-top-style: dotted; +border-top-style: dashed; +border-top-style: solid; +border-top-style: double; +border-top-style: groove; +border-top-style: ridge; +border-top-style: inset; +border-top-style: outset; + +/* vertical | horizontal */ +border-style: dotted solid; + +/* top | horizontal | bottom */ +border-style: hidden double dashed; + +/* top | right | bottom | left */ +border-style: none solid dotted dashed; + +/* Global values */ +border-style: inherit; +border-style: initial; +border-style: unset; +</pre> + +<p>La propiedad <code>border-style</code> se puede especificar usando uno, dos, tres o cuatro valores.</p> + +<ul> + <li>Cuando se especifica <strong>un</strong> valor, se aplica el mismo estilo a los <strong>cuatro lados</strong>.</li> + <li>Cuando se especifican <strong>dos </strong>valores, el primer estilo se aplica a la parte <strong>superior e inferior</strong>, el segundo a la <strong>izquierda y a la derecha</strong></li> + <li>Cuando se especifican <strong>tres </strong>valores, el primer estilo se aplica a la <strong>parte superior</strong>, el segundo a la <strong>izquierda y derecha</strong>, el tercero a la <strong>parte inferior</strong>.</li> + <li>Cuando se especifican <strong>cuatro </strong>valores, los estilos se aplican a la parte <strong>superior</strong>, <strong>derecha</strong>, <strong>inferior </strong>e <strong>izquierda </strong>en ese orden (en el sentido de las agujas del reloj).</li> +</ul> + +<p>Cada valor es una palabra clave elegida de la siguiente lista.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><br-style></code></dt> + <dd>Describe el estilo del borde. Puede tener los siguientes valores: + <table class="standard-table"> + <tbody> + <tr> + <td style="vertical-align: middle;"><code>none</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: none; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Like the <code>hidden</code> keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be <code>0</code>, even if the specified value is something else. In the case of table cell and border collapsing, the <code>none</code> value has the <em>lowest</em> priority: if any other conflicting border is set, it will be displayed.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>hidden</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: hidden; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Like the <code>none</code> keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be <code>0</code>, even if the specified value is something else. In the case of table cell and border collapsing, the <code>hidden</code> value has the <em>highest</em> priority: if any other conflicting border is set, it won't be displayed.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>dotted</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: dotted; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated {{ cssxref("border-top-width") }}.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>dashed</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: dashed; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>solid</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: solid; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Displays a single, straight, solid line.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>double</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: double; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Displays two straight lines that add up to the pixel size defined by {{ cssxref("border-width") }} or {{ cssxref("border-top-width") }}.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>groove</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: groove; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Displays a border with a carved appearance. It is the opposite of <code>ridge</code>.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>ridge</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: ridge; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Displays a border with an extruded appearance. It is the opposite of <code>groove</code>.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>inset</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: inset; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Displays a border that makes the element appear embedded. It is the opposite of <code>outset</code>. When applied to a table cell with {{ cssxref("border-collapse") }} set to <code>collapsed</code>, this value behaves like <code>groove</code>.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>outset</code></td> + <td style="vertical-align: middle;"> + <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: outset; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;"> + <p>Displays a border that makes the element appear embossed. It is the opposite of <code>inset</code>. When applied to a table cell with {{ cssxref("border-collapse") }} set to <code>collapsed</code>, this value behaves like <code>ridge</code>.</p> + </td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Table_with_all_property_values" name="Table_with_all_property_values">Tabla con todos los valores de propiedad</h3> + +<p>A continuación, se muestra un ejemplo de todos los valores de propiedad.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><table> + <tr> + <td class="b1">none</td> + <td class="b2">hidden</td> + <td class="b3">dotted</td> + <td class="b4">dashed</td> + </tr> + <tr> + <td class="b5">solid</td> + <td class="b6">double</td> + <td class="b7">groove</td> + <td class="b8">ridge</td> + </tr> + <tr> + <td class="b9">inset</td> + <td class="b10">outset</td> + </tr> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">/* Define look of the table */ +table { + border-width: 3px; + background-color: #52E396; +} +tr, td { + padding: 2px; +} + +/* border-style example classes */ +.b1 {border-style:none;} +.b2 {border-style:hidden;} +.b3 {border-style:dotted;} +.b4 {border-style:dashed;} +.b5 {border-style:solid;} +.b6 {border-style:double;} +.b7 {border-style:groove;} +.b8 {border-style:ridge;} +.b9 {border-style:inset;} +.b10 {border-style:outset;}</pre> + +<h4 id="Output">Output</h4> + +<p>{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificacion </th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Adds <code>hidden</code> keyword value.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#border-style', 'border-style') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + + + +<p>{{Compat("css.properties.border-style")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>The border-related shorthand CSS properties: {{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}</li> +</ul> diff --git a/files/es/web/css/border-top-color/index.html b/files/es/web/css/border-top-color/index.html new file mode 100644 index 0000000000..7be5b9461e --- /dev/null +++ b/files/es/web/css/border-top-color/index.html @@ -0,0 +1,105 @@ +--- +title: border-top-color +slug: Web/CSS/border-top-color +translation_of: Web/CSS/border-top-color +--- +<div>{{CSSRef}}</div> + +<p>La propiedad CSS <strong><code>border-top-color</code></strong> establece el color superior de un elemento {{cssxref("border")}}. Tenga en cuenta que en la mayoria de los casos las propiedades abreviadas {{cssxref("border-color")}} o {{cssxref("border-top")}} son mas convenientes y preferidas.</p> + +<pre class="brush: css no-line-numbers language-css">/*valores <color> */ +border-top-color: red; +border-top-color: #ffbb00; +border-top-color: rgb(255, 0, 0); +border-top-color: hsla(100%, 50%, 25%, 0.75); +border-top-color: currentColor; +border-top-color: transparent; + +/* Valores globales */ +border-top-color: inherit; +border-top-color: initial; +border-top-color: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La propiedad <code>border-top-color</code> es especificada con un valor unico.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>{{cssxref("<color>")}}</dt> + <dd>El color superior del borde</dd> +</dl> + +<h3 id="Sintaxis_Formal">Sintaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Un_div_simple_con_un_borde">Un div simple con un borde</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="mybox"> + <p>Esta es una caja con un border alrededor. + Tenga en cuenta que un border de la caja es + <span class="redtext">Rojo</span>.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.mybox { + border: solid 0.3em gold; + border-top-color: red; + width: auto; +} + +.redtext { + color: red; +}</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('A_simple_div_with_a_border')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Sin cambios significativos, aunque la palabra clave <code>transparent</code> , ahora incluida en {{cssxref("<color>")}} que se ha extendido, se ha eliminado formalmente.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-top-color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta pagina es generada desde una estructura de datos. Si usted le gustaria contribuir con los datos, por favor chequee <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envienos la información.</div> + +<p>{{Compat("css.properties.border-top-color")}}</p> + +<h2 id="Ver_tambien">Ver tambien</h2> + +<ul> + <li>Las propiedades abreviadas de CSS relacionadas con los bordes : {{Cssxref("border")}}, {{Cssxref("border-top")}}, y {{Cssxref("border-color")}}.</li> + <li>Las propiedades abrevadas de CSS relacionadas con el color para los bordes: {{Cssxref("border-right-color")}}, {{Cssxref("border-bottom-color")}}, y {{Cssxref("border-left-color")}}.</li> + <li>Las otras propiedades CSS relaciones con los bordes que se aplican al mismo borde : {{cssxref("border-top-style")}} y {{cssxref("border-top-width")}}.</li> +</ul> diff --git a/files/es/web/css/border-top-left-radius/index.html b/files/es/web/css/border-top-left-radius/index.html new file mode 100644 index 0000000000..69be619d41 --- /dev/null +++ b/files/es/web/css/border-top-left-radius/index.html @@ -0,0 +1,252 @@ +--- +title: border-top-left-radius +slug: Web/CSS/border-top-left-radius +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-top-left-radius +--- +<div>{{CSSRef}}</div> + +<p>La propiedad CSS <strong><code>border-top-left-radius</code></strong> establece el redondeo de la esquina superior izquierda del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es <code>0,</code>no se redondeará la esquina, dejándola cuadrada.</p> + +<div style="text-align: center;"><img alt="border-radius.png" class="default internal" src="/@api/deki/files/6132/=border-radius.png"></div> + +<p>Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.</p> + +<div class="note">Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad <code>border-top-left-radius</code>, el valor de esta propiedad es restaurado a su valor inicial por la <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">propiedad de forma reducida</a>.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* la esquina es un círculo */ +/* border-top-left-radius: <em>radius</em> */ +border-top-left-radius: 3px; + +/* la esquina es una elipse */ +/* border-top-left-radius: <em>horizontal</em> <em>vertical</em> */ +border-top-left-radius: 0.5em 1em; + +border-top-left-radius: inherit; +</pre> + +<div style="font-size: 0.9em;"> +<p>donde:</p> + +<dl style="padding-left: 6em;"> + <dt style="float: left; width: 7.5em;"><em>radius</em></dt> + <dd style="padding-left: 7.5em;">Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.</dd> + <dt style="float: left; width: 7.5em;"><em>horizontal</em></dt> + <dd style="padding-left: 7.5em;">Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.</dd> + <dt style="float: left; width: 7.5em;"><em>vertical</em></dt> + <dd style="padding-left: 7.5em;">Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.</dd> +</dl> +</div> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.</dd> + <dt><code><percentage></code></dt> + <dd>Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Ejemplo en vivo</th> + <th>Código</th> + </tr> + </thead> + <tbody> + <tr> + <td style="padding: 1.5em;"> + <div id="circle-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40px 40px; width: 100px; height: 100px;"> </div> + </td> + <td>Un arco de círculo usado como borde + <pre class="brush:css"> +div { + border-top-left-radius: 40px 40px; +} +</pre> + </td> + </tr> + <tr> + <td style="padding: 1.5em;"> + <div id="ellipse-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40px 20px; width: 100px; height: 100px;"> </div> + </td> + <td>Un arco de elipse usado como borde + <pre class="brush:css"> +div { + border-top-left-radius: 40px 20px; +} +</pre> + </td> + </tr> + <tr> + <td style="padding: 1.5em;"> + <div id="square-box-circle-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40%; width: 100px; height: 100px;"> </div> + </td> + <td>La caja es un cuadro: un arco de círculo es usado como borde + <pre class="brush: css"> +div + border-top-left-radius: 40%; +} +</pre> + </td> + </tr> + <tr> + <td style="padding: 1.5em;"> + <div id="not-square-ellipse-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40%; width: 100px; height: 200px;"> </div> + </td> + <td>La caja no es un círculo: un arco de elipse es usado como borde + <pre class="brush: css"> +div { + border-top-left-radius: 40%; +} +</pre> + </td> + </tr> + <tr> + <td style="padding: 1.5em;"> + <div id="clipped-border" style="background-color: rgb(250,20,70); background-clip: content-box; border: double 3px black; border-top-left-radius: 40%; width: 100px; height: 100px;"> </div> + </td> + <td>El color de fondo está delimitado al borde + <pre class="brush: css"> +div { + border-top-left-radius:40%; + border-style: black 3px double; + background-color: rgb(250,20,70); + background-clip: content-box; +} +</pre> + </td> + </tr> + </tbody> +</table> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0 {{property_prefix("-webkit")}}<br> + 4.0</td> + <td>1.0 (1.0){{property_prefix("-moz")}}<sup>[1]</sup><br> + 4.0 (2.0)<sup>[3]</sup></td> + <td>9.0</td> + <td>10.5</td> + <td>3.0 (522){{property_prefix("-webkit")}}<br> + 5.0 (532.5)</td> + </tr> + <tr> + <td>Porcentajes</td> + <td>4.0</td> + <td>1.0 (1.0)<sup>[2]</sup><br> + 4.0 (2.0)</td> + <td>9.0</td> + <td>10.5</td> + <td>5.0 (532.5)</td> + </tr> + <tr> + <td>Esquinas elípticas</td> + <td>1.0</td> + <td>3.5 (1.9.1)</td> + <td>9.0</td> + <td>10.5</td> + <td>3.0 (522)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Porcentajes</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Esquinas elípticas</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] La versión con prefijo (permitida desde Firefox 1 hasta Firefox 12) de esta propiedad usaba otro nombre, <code>-moz-border-radius-topleft</code>, distinto al de la propiedad final, ya que Mozilla lo implementó antes de que se determinara el nombre final.</p> + +<p>[2] Antes de Firefox 4, el valor {{cssxref("<percentage>")}} era relativo a la anchura de la caja, incluso al especificar el radio para la altura. Esto implicaba que <code>-moz-border-radius-topleft</code> siempre dibujaba un arco de círculo, y nunca una elipse, cuando se establecía un valor único.</p> + +<p>[3] Previo a Gecko 50.0 {{geckoRelease("50.0")}}, los estilos de bordes de esquinas redondeadas siempre se dibujaban como si <code>border-style</code> tuviera valor <code>solid</code>. Esto fue solucionado en Gecko 50.0.</p> + +<p>Además del soporte a la versión sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} añadió soporte a la versión con prefijo <code>-webkit</code> de la propiedad, por razones de compatibilidad, usando la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de la preferencia es <code>true</code>.</p> + +<h2 id="Véase_también">Véase también</h2> + +<p>Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-bottom-left-radius")}}.</p> diff --git a/files/es/web/css/border-top-right-radius/index.html b/files/es/web/css/border-top-right-radius/index.html new file mode 100644 index 0000000000..ecb6f157b2 --- /dev/null +++ b/files/es/web/css/border-top-right-radius/index.html @@ -0,0 +1,256 @@ +--- +title: border-top-right-radius +slug: Web/CSS/border-top-right-radius +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-top-right-radius +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>border-top-right-radius</code></strong> establece el redondeo de la esquina superior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es <code>0,</code>no se redondeará la esquina, dejándola cuadrada.</p> + +<div style="text-align: center;"><img alt="border-top-right-radius.png" class="default internal" src="/@api/deki/files/6133/=border-top-right-radius.png"></div> + +<p>Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.</p> + +<div class="note">Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad <code>border-top-radius-radius</code><span style="line-height: 1.5;">, el valor de esta propiedad es restaurado a su valor inicial por la </span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties" style="line-height: 1.5;">propiedad de forma reducida</a><span style="line-height: 1.5;">.</span></div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* la esquina es un círculo */ +/* border-top-right-radius: <em>radius</em> */ +border-top-right-radius: 3px; + +/* la esquina es una elipse */ +/* border-top-right-radius: <em>horizontal</em> <em>vertical</em> */ +border-top-right-radius: 0.5em 1em; + +border-top-right-radius: inherit; +</pre> + +<div style="font-size: 0.9em;"> +<p style="">donde:</p> + +<dl style="padding-left: 6em;"> + <dt style="float: left; width: 7.5em;"><em>radius</em></dt> + <dd style="padding-left: 7.5em;">Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.</dd> + <dt style="float: left; width: 7.5em;"><em>horizontal</em></dt> + <dd style="padding-left: 7.5em;">Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.</dd> + <dt style="float: left; width: 7.5em;"><em>vertical</em></dt> + <dd style="padding-left: 7.5em;">Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.</dd> +</dl> +</div> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.</dd> + <dt><code><percentage></code></dt> + <dd>Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Ejemplo en vivo</th> + <th>Código</th> + </tr> + </thead> + <tbody> + <tr> + <td style="padding: 1.5em;"> + <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40px 40px; width: 100px; height: 100px;"> </div> + </td> + <td>Un arco de círculo usado como borde + <pre class="brush: css"> +div { + border-top-right-radius: 40px 40px; +} +</pre> + </td> + </tr> + <tr> + <td style="padding: 1.5em;"> + <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40px 20px; width: 100px; height: 100px;"> </div> + </td> + <td>Un arco de elipse usado como borde + <pre class="brush: css"> +div { + border-top-right-radius: 40px 20px; +} +</pre> + </td> + </tr> + <tr> + <td style="padding: 1.5em;"> + <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40%; width: 100px; height: 100px;"> </div> + </td> + <td>La caja es un cuadro: un arco de círculo es usado como borde + <pre class="brush: css"> +div { + border-top-right-radius: 40%; +} +</pre> + </td> + </tr> + <tr> + <td style="padding: 1.5em;"> + <div style="background-color: lightgreen; border: solid 1px black; border-top-right-radius: 40%; width: 100px; height: 200px;"> + <div style="display: none;">.</div> + </div> + </td> + <td>La caja no es un círculo: un arco de elipse es usado como borde + <pre class="brush: css"> +div { + border-top-right-radius: 40%; +} +</pre> + </td> + </tr> + <tr> + <td style="padding: 1.5em;"> + <div style="border: black 3px double; border-top-right-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;"> </div> + </td> + <td>El color de fondo está delimitado al borde + <pre class="brush: css"> +div { + border-top-right-radius:40%; + border-style: black 3px double; + background-color: rgb(250,20,70); + background-clip: content-box; +} +</pre> + </td> + </tr> + </tbody> +</table> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0 {{property_prefix("-webkit")}}<br> + 4.0</td> + <td>1.0 (1.0){{property_prefix("-moz")}}<sup>[1]</sup><br> + 4.0 (2.0)<sup>[3]</sup></td> + <td>9.0</td> + <td>10.5</td> + <td>3.0 (522){{property_prefix("-webkit")}}<br> + 5.0 (532.5)</td> + </tr> + <tr> + <td>Porcentajes</td> + <td>4.0</td> + <td>1.0 (1.0)<sup>[2]</sup><br> + 4.0 (2.0)</td> + <td>9.0</td> + <td>10.5</td> + <td>5.0 (532.5)</td> + </tr> + <tr> + <td>Esquinas elípticas</td> + <td>1.0</td> + <td>3.5 (1.9.1)</td> + <td>9.0</td> + <td>10.5</td> + <td>3.0 (522)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Porcentajes</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Esquinas elípticas</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] La versión con prefijo (permitida desde Firefox 1 hasta Firefox 12) de esta propiedad usaba otro nombre, <code>-moz-border-radius-topright</code>, distinto al de la propiedad final, ya que Mozilla lo implementó antes de que se determinara el nombre final.</p> + +<p>[2] Antes de Firefox 4, el valor {{cssxref("<percentage>")}} era relativo a la anchura de la caja, incluso al especificar el radio para la altura. Esto implicaba que <code>-moz-border-radius-topright</code> siempre dibujaba un arco de círculo, y nunca una elipse, cuando se establecía un valor único.</p> + +<p>[3] Previo a Gecko 50.0 {{geckoRelease("50.0")}}, los estilos de bordes de esquinas redondeadas siempre se dibujaban como si <code>border-style</code> tuviera valor <code>solid</code>. tuviera valor <code>solid</code>. Esto fue solucionado en Gecko 50.0.</p> + +<p>Además del soporte a la versión sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} añadió soporte a la versión con prefijo <code>-webkit</code> de la propiedad, por razones de compatibilidad, usando la preferencia <code>layout.css.prefixes.webkit</code>, con valor predeterminado <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de la preferencia es <code>true</code>.</p> + +<h2 id="Véase_también">Véase también</h2> + +<p>Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-left-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-bottom-left-radius")}}.</p> diff --git a/files/es/web/css/border-top/index.html b/files/es/web/css/border-top/index.html new file mode 100644 index 0000000000..fbbb9a741b --- /dev/null +++ b/files/es/web/css/border-top/index.html @@ -0,0 +1,151 @@ +--- +title: border-top +slug: Web/CSS/border-top +tags: + - Bordes + - CSS + - Propiedades CSS + - Referencia +translation_of: Web/CSS/border-top +--- +<div>{{CSSRef}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La propiedad de <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>border-top</code></strong> es una abreviatura que establece los valores de {{Cssxref("border-top-color")}}, {{Cssxref("border-top-style")}}, y {{Cssxref("border-top-width")}}. Estas propiedades las características del borde superior de un elemento.</p> + +<div class="note"> +<p>Los tres valores de la abreviatura pueden ser especificados en cualquier orden, y uno o dos de ellos pueden ser omitidos.</p> + +<p>Como con todas las propiedades abreviadas, border-top siempre establece los valores de todas las propiedades que sean posibles, aun si no están especificadas. Establece aquellas que no son especificadas a sus valores por defecto. Esto significa que:</p> + +<pre class="brush:css"> border-top: none thick green; +</pre> + +<p>es lo mismo que</p> + +<pre class="brush:css"> border-top: thick green; +</pre> + +<p>y el valor de {{Cssxref("border-top-style")}} establecido antes de <code>border-top</code> es ignorado.</p> + +<p>El no especificar la parte de border-style que está destinada a establecer el valor de {{Cssxref("border-top-style")}} significa que se tomará el valor por defecto, lo que significa que el {{Cssxref("border-top-style")}} será <code>none.</code></p> + +<p>También hay que tomar en cuenta que en el siguiente bloque de código se ignorará la primer asignación de {{Cssxref("border-top-style")}} dado que al indicar <code>border-top</code> se establecerá implicitamente el valor de {{Cssxref("border-top-style")}} a <code>none</code></p> + +<pre class="brush:css"> border-top-style: dotted; + border-top: thick green; +</pre> +</div> + +<div>{{cssinfo}}</div> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="brush:css">border-top: 1px; +border-top: 2px dotted; +border-top: medium dashed green; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><br-width> </code></dt> + <dd>See {{Cssxref("border-top-width")}}.</dd> + <dt><code><br-style> </code></dt> + <dd>See {{Cssxref("border-top-style")}}.</dd> + <dt><code><color> </code></dt> + <dd>See {{Cssxref("border-top-color")}}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<pre class="brush: css">element { + border-top: 1px solid #000; +} +</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Status</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td> + <p>No hay cambios directos, aunque la modificación de valores para {{cssxref("border-top-color")}} sí aplican.</p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No hay cambios significativos</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border-top', 'border-top')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/border-width/index.html b/files/es/web/css/border-width/index.html new file mode 100644 index 0000000000..ba017b3823 --- /dev/null +++ b/files/es/web/css/border-width/index.html @@ -0,0 +1,101 @@ +--- +title: border-width +slug: Web/CSS/border-width +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-width +--- +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>La propiedad <strong><code>border-width</code></strong> define el ancho del borde.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("medium", "medio") }}</li> + <li>Se aplica a: todos los elementos</li> + <li>{{ Cssxref("inheritance", "Herencia") }}: no</li> + <li>Porcentajes: N/A</li> + <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li> + <li>{{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo del borde es <em>ninguno</em> ('none') o 'hidden'.</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval notranslate"> border-width: <border-width-value> {1,4} | {{ Cssxref("inherit", "heredado") }} +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt><strong><border-width-value></strong></dt> + <dd><code>thin | medium | thick | </code> {{ Cssxref("length", "largo") }}</dd> + <dt>thin</dt> + <dd>Un borde fino.</dd> + <dt>medium</dt> + <dd>Un borde mediano.</dd> + <dt>thick</dt> + <dd>Un borde grueso.</dd> + <dt><length></dt> + <dd>El grosor de un borde es un valor explícito por lo cual el ancho <strong>no</strong> puede ser nunca negativo.<br> + Nota: Un valor <code>em</code> también es reconocido y soportado.</dd> +</dl> + +<h3 id="Propiedades_relacionadas" name="Propiedades_relacionadas">Propiedades relacionadas</h3> + +<ul> + <li>{{ Cssxref("border-bottom-width") }}</li> + <li>{{ Cssxref("border-left-width") }}</li> + <li>{{ Cssxref("border-right-width") }}</li> + <li>{{ Cssxref("border-top-width") }}</li> +</ul> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p><a href="/samples/cssref/border.html">V</a>er el ejemplo en vivo</p> + +<pre class="notranslate">element { + border-width: thin; + border-style: solid; + border-color: #000; +} +</pre> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#border-width">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-width-properties">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-width">CSS 3</a></li> +</ul> + +<h3 id="Compatibilidad" name="Compatibilidad">Compatibilidad</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox</td> + <td>1.0</td> + </tr> + <tr> + <td>Netscape</td> + <td></td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}</p> diff --git a/files/es/web/css/border/index.html b/files/es/web/css/border/index.html new file mode 100644 index 0000000000..2650cc595d --- /dev/null +++ b/files/es/web/css/border/index.html @@ -0,0 +1,117 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border +--- +<p>{{ PreviousNext("Guía de referencia de CSS", "CSS:border-color") }}</p> + +<h3 id="Propierdades_Contitutivas">Propierdades Contitutivas</h3> + +<p>Esta es una <a href="/es/docs/Web/CSS/Shorthand_properties">propiedad abreviada</a> para las siguientes propiedades CSS:</p> + +<ul> + <li>border-color</li> + <li>border-style</li> + <li>border-width</li> +</ul> + + + + + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>La propiedad <code>border</code> permite definir de golpe todos los bordes en una única regla de la hoja de estilos. Se puede utilizar <code>border</code> para definir el o los valores siguientes: {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales</li> + <li>Se aplica a: todos los elementos</li> + <li>{{ Cssxref("inheritance", "Herencia") }}: no</li> + <li>Porcentajes: N/A</li> + <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li> + <li>{{ Cssxref("computed value", "Valor calculada") }}: ver propiedades individuales</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval notranslate">border: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>] ; +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt>{{ Cssxref("border-width") }}.</dt> + <dt>{{ Cssxref("border-style") }}.</dt> + <dt>{{ Cssxref("border-color") }}.</dt> +</dl> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p><a href="/samples/cssref/border.html">Ver El Ejemplo Vivo</a></p> + +<pre class="notranslate">element { + border: 1px solid #000; +} +</pre> + +<h3 id="Notas_importantes" name="Notas_importantes">Notas importantes</h3> + +<p>Mientras que las propiedades {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }} y {{ Cssxref("border-color") }} admiten hasta cuatro valores diferentes, ésta (<em>border</em>) no acepta más de uno por cada propiedad.</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#border">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#box-border-area">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands">CSS 3</a></li> +</ul> + +<h3 id="Compatibilidad" name="Compatibilidad">Compatibilidad</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}</p> + +<h3 id="Descripción">Descripción</h3> + +<p>Como sucede con todas las propiedades abreviadas, cualquier subvalor omitdo será definido a su valor inicial. Cabe destacar que la asignación de un valor personalizado a <code>border-image</code> no puede ser realizada mediante el uso de <code>border</code>, en todo caso éste útltimo lo fijaría a su valor inicial, por ejemplo, a <code>none</code>. </p> + +<p>La propiedad abreviada <code>border</code> es especialmente útil cuando deseas que los cuatro bordes sean idénticos. Sin embargo, es posible hacerlos distintos utilzando las propiedades extensas (aquellas individuales que componen a la abreviada) <code>border-width</code>, <code>border-style</code> y <code>border-color</code> puesto que aceptan valores distintos por lado. Alternativamente, puedes modificar un borde a la vez con las propiedades físicas (p. ej. <code>border-top)</code> y lógicas (p. ej. <code>border-block-start</code>) del borde.</p> + +<h3 id="Bordes_vs._contornos">Bordes vs. contornos</h3> + +<p>Los bordes y los <a href="/es/docs/Web/CSS/outline">contornos</a> son muy parecidos. Sin embargo, los contornos se distinguen de los bordes de la siguiente forma:</p> + +<ul> + <li>Los conronos nunca toman espacio, ya que se dibujan fuera del contenido de un elemento. </li> + <li>De conformidad con las especificaciones, si bien los contornos suelen ser rectangulares, no necesitan serlo. </li> +</ul> diff --git a/files/es/web/css/bottom/index.html b/files/es/web/css/bottom/index.html new file mode 100644 index 0000000000..6d26cf7c97 --- /dev/null +++ b/files/es/web/css/bottom/index.html @@ -0,0 +1,86 @@ +--- +title: bottom +slug: Web/CSS/bottom +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/bottom +--- +<p> +</p><p><< <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a> +</p> +<h3 id="Resumen" name="Resumen"> Resumen </h3> +<p>La propiedad <code>bottom</code> especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código). +</p><p>Para los elementos con una posición absoluta (aquellos que tienen la propiedad <code>position: absolute</code> o <code>position: fixed</code>), la propiedad bottom determina la distancia entre el borde inferior del elemento y el borde inferior de su bloque contenedor. +</p><p>Para los elementos con una posición relativa (los que tienen la propiedad <code>position: relative</code>), la propiedad bottom determina la distancia que el elemento se mueve hacia arriba desde su posición normal. Sin embargo, la propiedad {{ Cssxref("top") }} se antepone a la propiedad bottom, por lo que si <code>top</code> no es <code>auto</code>, el valor computado de <code>bottom</code> es el valor negativo del valor computado de <code>top</code>. +</p> +<ul><li> {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("auto", "automático") }} +</li><li> Se aplica a: {{ Cssxref("position", "la posición de los elementos") }} +</li><li> {{ Cssxref("inheritance", "Heredado") }}: no +</li><li> Porcentajes: se refieren a la altura del bloque contenedor. +</li><li> Medio: {{ Cssxref("Media:Visual", "visual") }} +</li><li> {{ Cssxref("computed value", "Valor calculada") }}: valor absoluto, porcentaje o auto. +</li></ul> +<h3 id="Sintaxis" name="Sintaxis"> Sintaxis </h3> +<pre class="eval"> bottom: <length> | <percentage> | auto | inherit +</pre> +<h3 id="Valores" name="Valores"> Valores </h3> +<dl><dt> <length> </dt><dd> Una longitud, usada como se describe en el <a href="#Resumen">resumen</a>. Puede ser un valor negativo, cero o un valor positivo. +</dd><dt> <percentage> </dt><dd> Un porcentaje de la altura del bloque contenedor, usado como se describe en el <a href="#Resumen">resumen</a>. +</dd><dt> <code>auto</code> </dt><dd> Para los elementos con posición absoluta, el elemento se posiciona en base a la propiedad {{ Cssxref("top") }} y por tanto se trata <code>height: auto</code> como una altura basada en el contenido del elemento. Para los elementos posicionados como relativos, especifica un desplazamiento desde su posición normal basada en la propiedad {{ Cssxref("top") }} o si, <code>top</code> es también <code>auto</code>, no se produce desplazamiento alguno. +</dd><dt> <code>inherit</code> </dt><dd> Recoge el valor que tenga el elemento padre (que puede no ser el bloque contenedor). Este valor calculado es tratado como si fuera un valor <length>, <percentage> o <code>auto</code>. +</dd></dl> +<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3> +<pre>element { + position: absolute; + bottom: 20px; + height: 200px; + border: 1px solid #000; +} +</pre> +<p>El siguiente ejemplo permite contrastar entre <code>position:absolute</code> y <code>position:fixed</code>. Cuando el texto ocupa un espacio más alto que la porción visible de la página (la porción visible en la ventana del navegador) los bloques posicionados con <code>position:absolute</code> se desplazarán junto con la página, mientras que los bloques posicionados con <code>position:fixed</code>, no lo harán. +</p> +<ul><li><b>Atención</b>: IE6 <b>no</b> soporta el código <code>position:fixed</code>. +</li></ul> +<pre><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> +<title>Position at bottom, absolute or fixed</title> +<style type="text/css"> +p {font-size:30px; line-height:3em;} +div.pos {width:49%; text-align:center; border:2px solid #00f;} +div#abs {position:absolute; bottom:0; left:0;} +div#fix {position:fixed; bottom:0; right:0;} +</style> +</head> +<body> + <p>Esto<br>es<br>un texto<br>alto,<br>alto, + <br>alto,<br>alto,<br>alto<br>de prueba.</p> + <div id="fix" class="pos"><p>Fixed</p></div> + <div id="abs" class="pos"><p>Absolute</p></div> +</body> +</html></pre> +<h3 id="Notas" name="Notas"> Notas </h3> +<p>Para los elementos posicionados de forma absoluta cuyo bloque contenedor sea un elemento de tipo bloque, esta propiedad es un desplazamiento a partir del borde de relleno (padding) de dicho elemento. +</p><p>Para los elementos posicionados de forma absoluta, la propiedad <code>bottom</code> no tiene efectos visibles cuando los valores {{ Cssxref("top") }}, {{ Cssxref("height") }}, y {{ Cssxref("margin-top") }} <i>no</i> son <code>auto</code> (que es el valor por defecto para <code>top</code> y <code>height</code>). +</p> +<h3 id="Especificaciones" name="Especificaciones"> Especificaciones </h3> +<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom">CSS 2.1 (en)</a> +</li><li> <a class="external" href="http://www.w3.org/Style/CSS/current-work#positioning">CSS 3 (en)</a> +</li></ul> +<h3 id="Compatibilidad_entre_navegadores" name="Compatibilidad_entre_navegadores"> Compatibilidad entre navegadores </h3> +<span class="comment">This is as far back as the documentaion goes.</span><table class="standard-table"> <tbody><tr> <th>Navegador</th> <th>Versión mínima</th> </tr> <tr> <td>Internet Explorer</td> <td>5</td> </tr> <tr> <td>Firefox</td> <td>1</td> </tr> <tr> <td>Netscape</td> <td>6</td> </tr> <tr> <td>Opera</td> <td>6</td> </tr> +</tbody></table> +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3> +<p>{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("left") }} +</p><p><br> +</p> +<div class="noinclude"> +<p><span class="comment">Categorías</span> +</p><p><span class="comment">Interwiki Languages</span> +</p> +</div> +{{ languages( { "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom", "en": "en/CSS/bottom" } ) }} diff --git a/files/es/web/css/box-shadow/index.html b/files/es/web/css/box-shadow/index.html new file mode 100644 index 0000000000..16de31787a --- /dev/null +++ b/files/es/web/css/box-shadow/index.html @@ -0,0 +1,178 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - CSS + - CSS Background + - Estilos + - Reference + - Referencia + - Sombras + - box-shadow +translation_of: Web/CSS/box-shadow +--- +<p>{{ CSSRef() }}</p> + +<p>La propiedad CSS <code>box-shadow</code> añade efectos de sombra alrededor del marco de un elemento. Se pueden definir múltiples efectos separados por comas. La caja de la sombra se describe por los desplazamientos en X e Y, los radios de desenfoque y dispersión, y el color relativos al elemento.</p> + +<p class="hidden">El código fuente de este ejemplo interactivo se encuentra almacenado en un repositorio de GitHub. Si desea contribuir al poryecto de ejemplos interactivos, por favor clone el repositiorio <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envie un pull request.</p> + +<p>La propiedad <code>box-shadow</code> permite proyectar una sombra difuminada desde el marco de casi cualquier elemento. Si {{cssxref("border-radius")}} es especificado en un elemento con la propiedad box-shadow, la sombra adopta la misma curva en las esquinas. El z-orden de múltiples cajas de sombra es la misma que de múltiples <a href="https://developer.mozilla.org/en-US/CSS/text-shadow">sombras de texto</a> (la primera sombra definida se ubica hasta arriba).</p> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Generador de Box-shadow</a> es una herramienta interactiva que permite generar una <code>box-shadow</code>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css no-line-numbers language-css notranslate"><code class="language-css"><span class="comment token">/* Keyword values */</span> +<span class="property token">box-shadow</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span> + +<span class="comment token">/* offset-x | offset-y | color */</span> +<span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">60</span><span class="token unit">px</span> <span class="number token">-16</span><span class="token unit">px</span> teal<span class="punctuation token">;</span> + +<span class="comment token">/* offset-x | offset-y | blur-radius | color */</span> +<span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span> <span class="number token">5</span><span class="token unit">px</span> <span class="number token">5</span><span class="token unit">px</span> black<span class="punctuation token">;</span> + +<span class="comment token">/* offset-x | offset-y | blur-radius | spread-radius | color */</span> +<span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="token unit">px</span> <span class="number token">2</span><span class="token unit">px</span> <span class="number token">2</span><span class="token unit">px</span> <span class="number token">1</span><span class="token unit">px</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0.2</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">/* inset | offset-x | offset-y | color */</span> +<span class="property token">box-shadow</span><span class="punctuation token">:</span> inset <span class="number token">5</span><span class="token unit">em</span> <span class="number token">1</span><span class="token unit">em</span> gold<span class="punctuation token">;</span> + +<span class="comment token">/* Any number of shadows, separated by commas */</span> +<span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="token unit">px</span> <span class="number token">3</span><span class="token unit">px</span> red<span class="punctuation token">,</span> <span class="number token">-1</span><span class="token unit">em</span> <span class="number token">0</span> <span class="number token">0.4</span><span class="token unit">em</span> olive<span class="punctuation token">;</span> + +<span class="comment token">/* Global keywords */</span> +<span class="property token">box-shadow</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> +<span class="property token">box-shadow</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span> +<span class="property token">box-shadow</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre> + +<p>Especifica una sola box-shadow utilizando:</p> + +<ul> + <li>Dos, tres, o cuatro valores <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length"><length></a></code>. + + <ul> + <li>Si solo dos valores son definidos, son interpretados como valores <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#offset-x"><offset-x><offset-y></a></code>.</li> + <li>Si un tercer valor es dado, es interpretado como un <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#blur-radius"><blur-radius></a></code>.</li> + <li>Si un cuarto valor es dado, es interpretado como un <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#spread-radius"><spread-radius></a></code>.</li> + </ul> + </li> + <li>Opcionalmente, la palabra clave <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#inset">inset</a></code>.</li> + <li>Opcionalmente, el valor <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#color"><color></a></code>.</li> +</ul> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>inset</code></dt> + <dd>Si no se especifica (por defecto), la sombra asume una sombra difuminada (como si la caja fuera levantada por encima del contenido).<br> + La presencia de la palabra clave <code>inset</code> cambia la sombra a una dentro del marco (como si el contenido estuviera deprimido dentro de la caja). Inset shadows dibuja dentro del borde (incluso de los transparentes), por encima del fondo, pero por debajo del contenido.</dd> + <dt><code><offset-x> <offset-y></code></dt> + <dd>Estos son dos valores {{cssxref("<length>")}} para definir el desplazamiento de la sombra. <code><offset-x></code> especifica la distancia horizontal. Los valores negativos colocan las combra a la izquierda de el elemento. <code><offset-y></code> Especifica la distancia vertical. Los valores negativos colocan la sombra por encima del elemento. Ver{{cssxref("<length>")}} para posibles unidades.<br> + Si ambos valores son <code>0</code>, la sombra es ubicada detras del elemento (y puede generar un efecto de difuminación <code><blur-radius></code> y/o <code><spread-radius></code> está establecido).</dd> + <dt><code><blur-radius></code></dt> + <dd>Este es el tercer valor {{cssxref("<length>")}}. Cuando mayor sea este valor, mayor sera la difuminación, por consecuencia la sombra se vuelve más grande y ligera. Los valores negativos no son permitidos. Si esto no es especificado, su valor será <code>0</code> (el borde de la sombra es fuerte). La especificación no incluye un algoritmo exacto para como el radio de desenfoque debe ser calculado, sin embargo, explica lo siguiente:</dd> +</dl> + +<blockquote> +<p>...para una borde largo y recto de la sombra, se debería crear una transición de color con la longitud de la distancia de desenfoque que sea perpendicular a y centrada al borde de la sombra, y en estos rangos desde el color de la sombra total en el punto final del radio dentro de la sombra hasta totalmente transparente en el punto final fuera de ella.</p> +</blockquote> + +<dl> + <dt><code><spread-radius></code></dt> + <dd>Este es el cuarto valor {{cssxref("<length>")}} . Los valores positivos harán que la sombra se expanda y crezca más, los valores negativos harán que la sombra se reduzca de tamaño. Si no se especifica, este será <code>0</code> (la sombra será del mismo tamaño del elemento).</dd> + <dt><code><color></code></dt> + <dd>Ver los valores de {{cssxref("<color>")}} para las posibles palabras claves y anotaciones.<br> + Si no se especifica, el color depende del navegador - usualmente el valor de la propiedad {{ cssxref("color") }}, pero notar que en Safari, actualmente pinta una sombra transparente en este caso que sea omitido.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>En nuestro ejemplo, se incluyen tres sombras: una sombra interior, una sombra difuminada normal, y una sombra de 2px que crea un efecto de borde (podría haberse usado un {{cssxref('outline')}} en lugar de una tercera sombra).</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>blockquote</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>q</span><span class="punctuation token">></span></span>You may shoot me with your words,<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">/></span></span> +You may cut me with your eyes,<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">/></span></span> +You may kill me with your hatefulness,<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">/></span></span> +But still, like air, I'll rise.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>q</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="entity token" title="—">&mdash;</span> Maya Angelou<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>blockquote</span><span class="punctuation token">></span></span></code> +</pre> + +<p><em>Podrías dispararme con tus palabras,<br> + podrías cortarme con tus ojos,<br> + podrías matarme con tu odio,<br> + y aún, como el aire, levantarme.</em><br> + -Traduccion-</p> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">blockquote</span> <span class="punctuation token">{</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">20</span><span class="token unit">px</span><span class="punctuation token">;</span> + <span class="property token">box-shadow</span><span class="punctuation token">:</span> + inset <span class="number token">0</span> <span class="number token">-3</span><span class="token unit">em</span> <span class="number token">3</span><span class="token unit">em</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0.1</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + <span class="number token">0</span> <span class="number token">0</span> <span class="number token">0</span> <span class="number token">2</span><span class="token unit">px</span> <span class="function token">rgb</span><span class="punctuation token">(</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">255</span><span class="punctuation token">,</span><span class="number token">255</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + <span class="number token">0.3</span><span class="token unit">em</span> <span class="number token">0.3</span><span class="token unit">em</span> <span class="number token">1</span><span class="token unit">em</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0</span><span class="punctuation token">,</span><span class="number token">0.3</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>{{EmbedLiveSample('Examples1', '300', '300')}}</p> + +<div id="Examples2"> +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Hello World<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> +</div> + +<h3 id="CSS_2">CSS</h3> + +<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">p</span> <span class="punctuation token">{</span> + <span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">0</span> <span class="number token">0</span> <span class="number token">0</span> <span class="number token">2</span><span class="token unit">em</span> <span class="hexcode token">#F4AAB9</span><span class="punctuation token">,</span> + <span class="number token">0</span> <span class="number token">0</span> <span class="number token">0</span> <span class="number token">4</span><span class="token unit">em</span> <span class="hexcode token">#66CCFF</span><span class="punctuation token">;</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">4</span><span class="token unit">em</span><span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span><span class="number token">1</span><span class="token unit">em</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>{{EmbedLiveSample('Examples2', '300', '300')}}</p> + +<p>Cuando el <code>x-offset</code>, <code>y-offset</code>, y <code>blur</code> son todos cero, la sombra sera un contorno unifrome. Las sombras son dibujadas desde el fondo hasta el frente, así que la primera sombra se encuentra encima de sombras posteriores. Cuando el <code>border-radius</code> es 0, como por defecto, las esquinas de la sombra serán, bien, esquinas. De haberse definido un <code>border-radius</code> de cualquier otro valor, las esquinas habrían sido redondeadas.</p> + +<p>Se ha añadido un margen del tamaño de la sombra más ancha para asegurarse de que la sombra no se superponga a los elementos adyacentes o vaya más allá del borde de la caja de contención. Una sombra de caja no afeta a las dimensiones del <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model">modelo de caja</a>.</p> + + + +<h2 class="cleared" id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<p>cssinfo}}</p> + +<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página es generada de datos estructurados. Si desea contribuir a esta información, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíe sus pull request.</div> + +<p>{{Compat("css.properties.box-shadow")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>El tipo de dato {{cssxref("<color>")}}</li> + <li>Otras propiedades relacionadas al color: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}}</li> + <li>{{cssxref("text-shadow")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color">Aplicando color a los elementos HTML utilizando CSS</a></li> +</ul> diff --git a/files/es/web/css/box-sizing/index.html b/files/es/web/css/box-sizing/index.html new file mode 100644 index 0000000000..5fbea86747 --- /dev/null +++ b/files/es/web/css/box-sizing/index.html @@ -0,0 +1,119 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - Layout + - Propiedades CSS + - Web +translation_of: Web/CSS/box-sizing +--- +<div>{{CSSRef}}</div> + +<p>La propiedad CSS <strong><code>box-sizing</code></strong> como el {{glossary("user agent")}} debe calcular el ancho y alto total de un elemento.</p> + +<div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div> + + + +<p>Por defecto en el <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">modelo de caja de CSS</a>, el ancho y alto asignado a un elemento es aplicado solo al contenido de la caja del elemento. Si el elemento tiene algun borde (border) o relleno (padding), este es entonces añadido al ancho y alto a alcanzar el tamaño de la caja que es desplegada en pantalla. Esto significa que cuando se definen el ancho y alto, se tiene que ajustar el valor definido para permitir cualquier borde o relleno que se pueda añadir.</p> + +<p>La propiedad <code>box-sizing</code> puede ser usada para ajustar el siguiente comportamiento:</p> + +<ul> + <li><code>content-box</code> es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno ser añadirá al ancho final desplegado.</li> + <li><code>border-box</code> le dice al navegador tomar en cuenta para cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluíran cualquier borde o relleno que se añadan, y la caja de contenido se encogerá para absorber ese ancho extra. Esto típicamente hace mucho más fácil dimensionar elementos.</li> +</ul> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La propiedad <code>box-sizing</code> es especificada como una sola palabra clave elegida de la lista de valores que aparece abajo.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>content-box</code></dt> + <dd>Este es el valor inicial y por defecto especificado por el estándar CSS. Las propiedades {{Cssxref("width")}} and {{Cssxref("height")}} no incluyen el borde, relleno o margen. Por ejemplo, <code>.box {width: 350px; border: 10px solid black;}</code> despliega una caja con un ancho de 370 pixeles.</dd> + <dd>Aquí, las dimensiones de un elemento son calculados como: ancho = ancho del contenido, altura = altura del contenido. (Los bordes y rellenos no son incluídos en el cálculo.)</dd> + <dt><code>border-box</code></dt> + <dd>Las propiedad de {{Cssxref("width")}} y {{Cssxref("height")}} incluyen el contenido, relleno y borde pero no incluyen el margén. Tenga en cuenta que el relleno y borde estarán dentro de la caja. Por ejemplo, <code>.box {width: 350px; border: 10px solid black;}</code> despliega una caja con un ancho de 350 pixeles. La caja de contenidos no puede ser negativo y tiene un valor mínimo de 0, haciendo imposible usar el <code>border-box</code> para hacer que el elemento desaparezca.</dd> + <dd>Las dimensiones del elemeno se calculan como: ancho = borde + relleno + ancho del contenido, y altura = borde + relleno + altura del contenido.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Este ejemplo muesta cómo diferentes valores de tamaño de la caja (<code>box-sizing</code>) alteran el tamaño desplegado de dos elementos idénticos.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="content-box">Contenido de la caja</div> +<br> +<div class="border-box">Borde de la caja</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 160px; + height: 80px; + padding: 20px; + border: 8px solid red; + background: yellow; +} + +.content-box { + box-sizing: content-box; + /* Ancho total: 160px + (2 * 20px) + (2 * 8px) = 216px + Altura total: 80px + (2 * 20px) + (2 * 8px) = 136px + Ancho de la caja de contenido: 160px + Altura de la caja de contenido: 80px */ +} + +.border-box { + box-sizing: border-box; + /* Ancho total: 160px + Altura total: 80px + Ancho de la caja de contenido: 160px - (2 * 20px) - (2 * 8px) = 104px + Altura de la caja de contenido: 80px - (2 * 20px) - (2 * 8px) = 24px */ +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Ejemplo', 'auto', 300)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + + + +<p>{{Compat("css.properties.box-sizing")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Modelo de caja de CSS</a></li> +</ul> diff --git a/files/es/web/css/calc()/index.html b/files/es/web/css/calc()/index.html new file mode 100644 index 0000000000..def61847cd --- /dev/null +++ b/files/es/web/css/calc()/index.html @@ -0,0 +1,199 @@ +--- +title: calc +slug: Web/CSS/calc() +translation_of: Web/CSS/calc() +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Sumario">Sumario</h2> + +<p>La función CSS <code>calc()</code> puede ser usada en cualquier sitio donde {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, o {{cssxref("<integer>")}} sea requerido. <code>Con calc()</code> puedes realizar cálculos para determinar valores de propiedades CSS.</p> + +<p>Es posible anidar llamadas a <code>calc()</code> dentro de otras llamadas <code>calc()</code>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">calc(<em>expresión</em>)</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt>expresión</dt> + <dd>Una expresión matemática cuyo resultado es usado como valor para la propiedad sobre la cual se aplica.</dd> +</dl> + +<h3 id="Expresiones">Expresiones</h3> + +<p>{{todo("mod,min,max : http://hacks.mozilla.org/2010/06/css3-calc/")}}La expresión puede ser una combinación de los siguientes operadores:</p> + +<dl> + <dt><strong>+</strong></dt> + <dd>Suma</dd> + <dt><strong>-</strong></dt> + <dd>Resta</dd> + <dt><strong>*</strong></dt> + <dd>Multiplicación. Al menos uno de los argumentos debe ser un {{cssxref("<number>")}}.</dd> + <dt><strong>/</strong></dt> + <dd>División. El divisor debe ser un {{cssxref("<number>")}}.</dd> +</dl> + +<p>Los operandos en la expresión pueden ser valores tanto positivos como negativos. Puedes usar diferentes unidades para cada valor si lo deseas. Es recomendable el uso de paréntesis para añadir legibilidad a la expresión o para forzar precedencia en las operaciones en caso necesario.</p> + +<div class="note"><strong>Nota:</strong> La división por cero dará lugar a un error generado por el analizador de HTML del navegador.</div> + +<div class="note"><strong>Nota:</strong> las operaciones + y - siempre deben estar separadas de sus operandos mediante espacios en blanco. La expresión <code>calc(50% -8px)</code> será tomada como un operando de porcentaje seguido de otro operando de signo negativo (una expresión inválida, dado que no hay operador en medio), mientras que la expresión <code>calc(50% - 8px)</code> es un porcentaje seguido de una operación de resta.<br> +Los operadores <code>* y</code> <code>/</code> no requieren espacio en blanco, pero es recomendable añadirlo por consistencia.</div> + +<dl> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Añadir_un_margen_a_un_objeto_en_pantalla">Añadir un margen a un objeto en pantalla</h3> + +<p><code>calc()</code> hace más fácil añadir márgenes a un objeto en determinadas circunstancias. En este ejemplo, CSS crea un espacio horizontal de color amarillo que llena el ancho de la ventana con un hueco de 40 pixels en ambos lados:</p> + +<pre class="brush: css">.banner { + position: absolute; + left: 40px; + width: 90%; /* salvaguarda para navegadores que no reconocen calc() */ + width: calc(100% - 80px); + border: solid black 1px; + box-shadow: 1px 2px; + background-color: yellow; + padding: 6px; + text-align: center; +} +</pre> + +<pre class="brush: html"><div class="banner">This is a banner!</div></pre> + +<p>{{ EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', '100%', '60') }}</p> + +<h3 id="Entradas_de_formulario_que_se_ajustan_automáticamente_al_ancho_de_su_contenedor">Entradas de formulario que se ajustan automáticamente al ancho de su contenedor</h3> + +<p>Otro caso de uso para<code> calc()</code> 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.</p> + +<p>Echémosle un vistazo al CSS:</p> + +<pre class="brush: css">input { + padding: 2px; + display: block; + width: 98%; /* salvaguarda para navegadores que no reconocen calc() */ + width: calc(100% - 1em); +} + +#formbox { + width: 130px; /* salvaguarda para navegadores que no reconocen calc() */ + width: calc(100% / 6); + border: 1px solid black; + padding: 4px; +} +</pre> + +<p>El formulario usa 1/6 del ancho disponible. Para asegurar que los campos de entrada tienen el tamaño adecuado, usamos <code>calc()</code> de nuevo para establecer el ancho que deberían tener (el de su contenedor) menos 1em. Para probar esto, usaremos el siguiente HTML:</p> + +<pre class="brush: html"><form> + <div id="formbox"> + <label>Type something:</label> + <input type="text"> + </div> +</form> +</pre> + +<p>{{ EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '100%', '80') }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>19 (WebKit 536.3) {{property_prefix("-webkit")}}<br> + 26</td> + <td>{{CompatGeckoDesktop("2")}} {{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16")}}</td> + <td>9</td> + <td>-</td> + <td>6 {{property_prefix("-webkit")}} (buggy)</td> + </tr> + <tr> + <td>On gradients' color stops</td> + <td>19 (WebKit 536.3) {{property_prefix("-webkit")}}<br> + 27 (maybe 26)</td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>9</td> + <td>-</td> + <td>6 {{property_prefix("-webkit")}} (buggy)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2")}} {{property_prefix("-moz")}}<br> + {{CompatGeckoMobile("16")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>On gradients' color stops</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/" title="Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</a></li> +</ul> diff --git a/files/es/web/css/caret-color/index.html b/files/es/web/css/caret-color/index.html new file mode 100644 index 0000000000..df16ae5923 --- /dev/null +++ b/files/es/web/css/caret-color/index.html @@ -0,0 +1,151 @@ +--- +title: caret-color +slug: Web/CSS/caret-color +tags: + - CSS + - CSS UI + - Propiedad CSS + - Referencia +translation_of: Web/CSS/caret-color +--- +<div>{{CSSRef}}</div> + +<p>La propiedad CSS <strong><code>caret-color</code></strong> especifica el color del cursor de texto, el indicador visible del punto de inserción en un elemento donde el usuario puede introducir texto u otro contenido.</p> + +<pre class="brush: css no-line-numbers">/* Palabras clave */ +caret-color: auto; +color: transparent; +color: currentColor; + +/* Valores <color> */ +caret-color: red; +caret-color: #5729e9; +caret-color: rgb(0, 200, 0); +caret-color: hsla(228, 4%, 24%, 0.8); +</pre> + +<div class="note"> +<p><strong>Nota:</strong> Los agentes usuario podrían incluir otras cosas que consideren “cursor de texto.” Por ejemplo, puede haber una “cursor para navegación,” que actúa de forma similar al cursor de texto pero puede ser movido en textos no editables. Por otro lado, la imagen de cursor mostrada cuando se coloca el cursor del ratón sobre texto cuando la propiedad {{cssxref("cursor")}} es <code>auto</code>, o sobre un elemento donde la propiedad <code>cursor</code> es <code>text</code> o <code>vertical-text</code>, aunque a veces se parezca al cursor de texto, no lo es (es un cursor del ratón). En algunos navegadores que no soportan esta propiedad, el color del cursor de texto no está asociado al color de la fuente.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Los agentes usuarios deberán usar <code>currentcolor</code>, pero podrían ajustar automáticamente el color del cursor para asegurar la correcta visibilidad y contraste con el contenido alrededor, posiblemente con base en <code>currentcolor</code>, el fondo, sombras, etc. + <div class="note"> + <p><strong>Nota:</strong> Aunque los agentes usuarios puedan usar <code>currentcolor</code> (que usualmente es animable) para el valor <code>auto</code>, <code>auto</code> no es interpolado en las transiciones/animaciones.</p> + </div> + </dd> + <dt>{{cssxref("<color>")}}</dt> + <dd>Color del cursor de texto.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input /></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input { + caret-color: red; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Ejemplo", 300, 40)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}}</td> + <td>{{Spec2("CSS3 UI")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome("57")}}</td> + <td> + <p>Edge 38.1</p> + </td> + <td>{{CompatGeckoDesktop("53.0")}}</td> + <td> + <p>Internet Explorer 11 </p> + </td> + <td>{{CompatOpera("44")}}</td> + <td> + <p>{{CompatNo}} </p> + + <p>system caret</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome("57")}}</td> + <td>{{CompatChrome("57")}}</td> + <td>{{CompatGeckoMobile("53.0")}}</td> + <td>{{CompatNo}} + <p>font color</p> + </td> + <td>{{CompatOperaMobile("44")}}</td> + <td>{{CompatNo}} + <p>system caret</p> + </td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/cascade/index.html b/files/es/web/css/cascade/index.html new file mode 100644 index 0000000000..6860a8ba39 --- /dev/null +++ b/files/es/web/css/cascade/index.html @@ -0,0 +1,202 @@ +--- +title: Introducción a CSS en cascada +slug: Web/CSS/Cascade +translation_of: Web/CSS/Cascade +--- +<div>{{CSSRef}}</div> + +<div>La <strong>cascada</strong> es un algoritmo que define como combinar valores de propiedad originarios de diferentes fuentes. Este se encuentra en el núcleo de CSS, como enfatizafo por el nombre: <em>Hojas de Estilo en Cascada</em>. Este articulo explica que es cascada, el orden de las <span class="seoSummary">{{Glossary("CSS")}} </span><a href="/en-US/docs/Web/API/CSSStyleDeclaration">declaraciones</a> en cascada, y como esto te afecta, el desarrollador web.</div> + +<h2 id="¿Cuáles_entidades_CSS_participan_en_la_cascada">¿Cuáles entidades CSS participan en la cascada?</h2> + +<p>Solo las declaraciones CSS, es decir pares de propiedad/valor, participan en la cascada. Esto significa que las <a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/At-rule">at-rules</a> que contienen entidades distintas de las declaraciones, como una regla <code>@font-face</code> que contiene <em>descriptores</em>, no participan en la cascada. En estos casos, solo la regla-at en su conjunto participa en la cascada: aquí, la <code>@font-face</code> identificada por su descriptor de familia de tipografías. Si se definen varias reglas <code>@font-face</code> con el mismo descriptor, solo se considera la <code>@font-face</code>, como conjunto, más adecuada. </p> + +<p>Mientras que las declaraciones contenidas en la mayoría de las reglas-at -como aquellas en <code>@media</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@document</span></font> o <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@support</span></font> - participan en la cascada, las declaraciones contenidas en <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@keyframes</span></font> no. Como con <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@font-face</span></font>, solo la regla-at en su conjunto se selecciona a través del algoritmo en cascada.</p> + +<p>Finalmente, debemos tener en cuenta que {{cssxref ("@ import")}} y {{cssxref ("@ charset")}} obedecen a algoritmos específicos y no se ven afectados por el algoritmo en cascada.</p> + +<h2 id="Origin_of_CSS_declarations">Origin of CSS declarations</h2> + +<p>The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations originate from different origins: the <strong>{{anch("User-agent stylesheets")}}</strong>, the <strong>{{anch("Author stylesheets")}}</strong>, and the <strong>{{anch("User stylesheets")}}</strong>.</p> + +<p>Though style sheets come from these different origins, they overlap in scope; to make this work, the cascade algorithm defines how they interact.</p> + +<h3 id="User-agent_stylesheets">User-agent stylesheets</h3> + +<p>The browser has a basic style sheet that gives a default style to any document. These style sheets are named <strong>user-agent stylesheets</strong>. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.</p> + +<p>Some browsers let users modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To simplify the development process, Web developers often use a CSS reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.</p> + +<h3 id="Author_stylesheets">Author stylesheets</h3> + +<p><strong>Author stylesheets</strong> are the most common type of style sheet. These are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme.</p> + +<h3 id="User_stylesheets">User stylesheets</h3> + +<p>The user (or reader) of the web site can choose to override styles in many browsers using a custom <strong>user stylesheet</strong> designed to tailor the experience to the user's wishes.</p> + +<h2 id="Cascading_order">Cascading order</h2> + +<p>The cascading algorithm determines how to find the value to apply for each property for each document element.</p> + +<ol> + <li>It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.</li> + <li>Then it sorts these rules according to their importance, that is, whether or not they are followed by <code>!important</code>, and by their origin. The cascade is in ascending order, which means that <code>!important</code> values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: + <table class="standard-table"> + <thead> + <tr> + <th scope="col"></th> + <th scope="col">Origin</th> + <th scope="col">Importance</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>user agent</td> + <td>normal</td> + </tr> + <tr> + <td>2</td> + <td>user</td> + <td>normal</td> + </tr> + <tr> + <td>3</td> + <td>author</td> + <td>normal</td> + </tr> + <tr> + <td>4</td> + <td>animations</td> + <td></td> + </tr> + <tr> + <td>5</td> + <td>author</td> + <td><code>!important</code></td> + </tr> + <tr> + <td>6</td> + <td>user</td> + <td><code>!important</code></td> + </tr> + <tr> + <td>7</td> + <td>user agent</td> + <td><code>!important</code></td> + </tr> + <tr> + <td>8</td> + <td>transitions</td> + <td></td> + </tr> + </tbody> + </table> + </li> + <li>In case of equality, the <a href="/en-US/docs/Web/CSS/Specificity" title="/en-US/docs/Web/CSSSpecificity">specificity</a> of a value is considered to choose one or the other.</li> +</ol> + +<h2 id="Resetting_styles">Resetting styles</h2> + +<p>After your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. This may happen in cases of animations, theme changes, and so forth. The CSS property {{cssxref("all")}} lets you quickly set (almost) everything in CSS back to a known state.</p> + +<p><code>all</code> lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.</p> + +<h2 id="CSS_animations_and_the_cascade">CSS animations and the cascade</h2> + +<p><a href="/en-US/docs/Web/CSSUsing_CSS_animations" title="/en-US/docs/Web/CSSUsing_CSS_animations">CSS animations</a>, using {{ cssxref("@keyframes")}} at-rules, define animations between states. Keyframes don't cascade, meaning that at any given time CSS takes values from only one single {{cssxref("@keyframes")}}, and never mixes multiple ones together.</p> + +<p>When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.</p> + +<h2 id="Example">Example</h2> + +<p>Let's look at an example involving multiple sources of CSS across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the HTML:</p> + +<p><strong>User-agent CSS:</strong></p> + +<pre class="brush:css;">li { margin-left: 10px }</pre> + +<p><strong class="brush:css;">Author CSS 1:</strong></p> + +<pre class="brush:css;">li { margin-left: 0 } /* This is a reset */</pre> + +<p><strong class="brush:css;">Author CSS 2:</strong></p> + +<pre class="brush:css;">@media screen { + li { margin-left: 3px } +} + +@media print { + li { margin-left: 1px } +} +</pre> + +<p><strong class="brush:css;">User CSS:</strong></p> + +<pre class="brush:css;">.specific { margin-left: 1em }</pre> + +<p><strong>HTML:</strong></p> + +<pre class="brush:html;"><ul> + <li class="specific">1<sup>st</sup></li> + <li>2<sup>nd</sup></li> +</ul> +</pre> + +<p>In this case, declarations inside <code>li</code> and <code>.specific</code> rules should apply. No declaration is marked as <code>!important</code>, so the precedence order is author style sheets before user style sheets or user-agent stylesheet.</p> + +<p>So three declarations are in competition:</p> + +<pre class="brush:css;">margin-left: 0</pre> + +<pre class="brush:css;">margin-left: 3px</pre> + +<pre class="brush:css;">margin-left: 1px</pre> + +<p>The last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. Therefore, it is the last one that is then selected:</p> + +<pre class="brush:css;">margin-left: 3px</pre> + +<p>Note that the declaration defined in the user CSS, though having a greater specificity, is not chosen as the cascade algorithm is applied before the specificity algorithm.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Cascade")}}</td> + <td>{{Spec2("CSS4 Cascade")}}</td> + <td>Added the {{CSSxRef("revert")}} keyword, which allows rolling a property back a cascade level.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Cascade")}}</td> + <td>{{Spec2("CSS3 Cascade")}}</td> + <td>Removed the override cascade origin, as it was never used in a W3C standard.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "cascade.html", "the cascade")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS1", "#the-cascade", "the cascade")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">A very simple introduction to the CSS cascade</a></li> + <li>{{CSS_Key_Concepts}}</li> +</ul> diff --git a/files/es/web/css/child_combinator/index.html b/files/es/web/css/child_combinator/index.html new file mode 100644 index 0000000000..b191b809fd --- /dev/null +++ b/files/es/web/css/child_combinator/index.html @@ -0,0 +1,119 @@ +--- +title: Selectores de hijo +slug: Web/CSS/Child_combinator +tags: + - CSS + - Principiante + - Referencia CSS + - Selectores +translation_of: Web/CSS/Child_combinator +--- +<div>{{CSSRef("Selectors")}}</div> + +<p>El combinador <code>></code> separa a dos selectores y busca solo a los elementos que coindicen con el segundo selector y que son hijos <strong>directos</strong> del primero. EN contraste, cuando se combinan dos selectores con el <a href="/es/docs/Web/CSS/Descendant_selectors">selector de descendiente</a>, la expresión busca elementos que coinciden con el segundo selector y que tienen algun ancestro que coindice con el primero, sin importar el nivel de separación que tengan dentro del DOM.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">selector1 > selector2 { <em>style properties</em> } +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: css">span { background-color: white; } +div > span { + background-color: DodgerBlue; +} +</pre> + +<pre class="brush: html"><div> + <span>Span #1, dentro del div. + <span>Span #2, dentro del span que está en el div.</span> + </span> +</div> +<span>Span #3, no está dentro del div.</span> +</pre> + +<p>{{EmbedLiveSample("Ejemplo", 200, 100)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Sin cambios</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>7.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/class_selectors/index.html b/files/es/web/css/class_selectors/index.html new file mode 100644 index 0000000000..382be6e07e --- /dev/null +++ b/files/es/web/css/class_selectors/index.html @@ -0,0 +1,128 @@ +--- +title: Selectores de clase +slug: Web/CSS/Class_selectors +tags: + - CSS + - Principiante + - Referencia CSS + - Selectores +translation_of: Web/CSS/Class_selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<p>En un documento HTML, los selectores de clase buscan un elemento basado en el contenido de su atributo <code>class</code>. El atributo {{htmlattrxref("class")}} está definido como una lista de elementos separados por espacio, y uno de esos elementos debe coincidir exactamente con el nombre de clase dado en el selector.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">.classname { <em>style properties</em> }</pre> + +<p>Nótese que esto es equivalente al siguiente {{Cssxref("Attribute_selectors", "selector de atributo")}}:</p> + +<pre class="syntaxbox">[class~=classname] { <em>style properties</em> }</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span.classy { + background-color: DodgerBlue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span class="classy">Aquí hay un span con algo de texto.</span> +<span>Aquí hay otro.</span> +</pre> + +<p>{{EmbedLiveSample('Ejemplo', 200, 50)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Sin cambios</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/clear/index.html b/files/es/web/css/clear/index.html new file mode 100644 index 0000000000..e66c285536 --- /dev/null +++ b/files/es/web/css/clear/index.html @@ -0,0 +1,239 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - Reference +translation_of: Web/CSS/clear +--- +<div>{{CSSRef}}</div> + +<p>La propiedad <a href="/es/docs/CSS">CSS</a> <strong><code>clear </code></strong>especifica si un elemento puede estar al lado de elementos <a href="/es/docs/CSS/float">flotantes</a> que lo preceden o si debe ser movido (cleared) debajo de ellos. La propiedad <code>clear</code> aplica a ambos elementos flotantes y no flotantes.</p> + +<p>Cuando es aplicado a bloques no flotantes, mueve el <a href="/es/docs/CSS/box_model">border edge</a> del elemento hacia abajo hasta que este debajo del <a href="/es/docs/CSS/box_model">margin edge</a> de todos los floats relevantes. Este movimiento (cuando acontece) causa que <a href="/es/docs/CSS/margin_collapsing">margin collapsing</a> no ocurra.</p> + +<p>Cuando se aplica a elementos flotantes, mueve el <a href="/es/docs/CSS/box_model">margin edge</a> del elemento debajo del <a href="/es/docs/CSS/box_model">margin edge</a> de todos los floats relevantes. Esto afecta la posición de floats posteriores, ya que estos no pueden ser posicionados más arriba que los primeros.</p> + +<p>Los floats que son relevantes para ser limpiados (cleared) son los primeros floats dentro del mismo <a href="/es/docs/Web/Guide/CSS/Block_formatting_context">contexto de formato de bloque</a>.</p> + +<div class="note"> +<p><strong>Nota: </strong>Si deseas que un elemento contenga todos los elementos flotantes dentro, puedes hacer dos cosas, o bien flotar el contenedor también o usar <code>clear</code> en un <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-element</a> {{cssxref("::after")}}.</p> + +<pre class="brush: css notranslate">#container::after { + content: ""; + display: block; + clear: both; +} +</pre> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css notranslate">clear: none; +clear: left; +clear: right; +clear: both; +clear: inline-start; +clear: inline-end; + +clear: inherit; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Es un keyword que indica que el elemento no es movido hacia abajo para limpiar elementos flotantes anteriores.</dd> + <dt><code>left</code></dt> + <dd>Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes a la izquierda.</dd> + <dt><code>right</code></dt> + <dd>Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes a la derecha.</dd> + <dt><code>both</code></dt> + <dd>Es un keyword que indica que el elemento es movido hacia abajo para limpiar tanto elementos flotantes de la izquierda como de la derecha.</dd> + <dt><code>inline-start</code> {{experimental_inline}}</dt> + <dd>Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes al inicio del bloque contenedor, estos son los elementos con valor float <em>left</em> en scripts ltr (left to right) y elementos con valor float <em>right</em> en scripts rtl (right to left).</dd> + <dt><code>inline-end</code> {{experimental_inline}}</dt> + <dd>Es un keyword que indica que el elemento es movido hacia abajo para limpiar floats al final del bloque contenedor, estos son los elementos con valor float <em>right</em> en scripts ltr (left to right) y elementos con valor float <em>left</em> en scripts rtl (right to left).</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<div class="note"><strong>Nota: </strong>El div con clase 'wrapper' añade un borde para una mejor visibilidad de la utilidad de la propiedad clear</div> + +<h3 id="clear_left">clear: left</h3> + +<h4 id="Contenido_HTML">Contenido HTML</h4> + +<pre class="brush: html notranslate"><div class="wrapper"> + + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + + <p class="left">This paragraph clears left.</p> + +</div> +</pre> + +<h4 id="Contenido_CSS">Contenido CSS</h4> + +<pre class="brush: css notranslate">.wrapper{ + border:1px solid black; + padding:10px; +} +.left { + border: 1px solid black; + clear: left; +} +.black { + float: left; + margin: 0; + background-color: black; + color: #fff; + width: 20%; +} +.red { + float: left; + margin: 0; + background-color: red; + width:20%; +} +p { + width: 50%; +} +</pre> + +<p>{{ EmbedLiveSample('clear:_left','100%','250') }}</p> + +<h3 id="clear_right">clear: right</h3> + +<h4 id="Contenido_HTML_2">Contenido HTML</h4> + +<pre class="brush: html notranslate"><div class="wrapper"> + + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> + + <p class="right">This paragraph clears right.</p> + +</div> +</pre> + +<h4 id="Contenido_CSS_2">Contenido CSS</h4> + +<pre class="brush: css notranslate">.wrapper{ + border:1px solid black; + padding:10px; +} +.right { + border: 1px solid black; + clear: right; +} +.black { + float: right; + margin: 0; + background-color: black; + color: #fff; + width:20%; +} +.red { + float: right; + margin: 0; + background-color: red; + width:20%; +} +p { + width: 50%; +}</pre> + +<p>{{ EmbedLiveSample('clear:_right','100%','250') }}</p> + +<h3 id="clear_both">clear: both</h3> + +<h4 id="Contenido_HTML_3">Contenido HTML</h4> + +<pre class="brush: html notranslate"><div class="wrapper"> + + <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p> + + <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p> + + <p class="both">This paragraph clears both.</p> + +</div> +</pre> + +<h4 id="Contenido_CSS_3">Contenido CSS</h4> + +<pre class="brush: css notranslate">.wrapper{ + border:1px solid black; + padding:10px; +} +.both { + border: 1px solid black; + clear: both; +} +.black { + float: left; + margin: 0; + background-color: black; + color: #fff; + width:20%; +} +.red { + float: right; + margin: 0; + background-color: red; + width:20%; +} +p { + width: 45%; +}</pre> + +<p>{{ EmbedLiveSample('clear:_both','100%','300') }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Agrega los valores inline-start y inline-end</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Sin cambios significativos, aunque se aclaran los detalles.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#clear', 'clear')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>{{Compat("css.properties.clear")}}</p> + +<h2 id="También_puedes_ver">También puedes ver</h2> + +<ul> + <li><a href="/es/docs/Escuela_XUL/El_modelo_de_caja">El modelo de caja</a></li> +</ul> diff --git a/files/es/web/css/clip-path/index.html b/files/es/web/css/clip-path/index.html new file mode 100644 index 0000000000..a5c78f6eb8 --- /dev/null +++ b/files/es/web/css/clip-path/index.html @@ -0,0 +1,179 @@ +--- +title: clip-path +slug: Web/CSS/clip-path +translation_of: Web/CSS/clip-path +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad CSS <code><strong>clip-path</strong></code> proviene que una porción de un elemento se muestre definiendo una región de recorte para mostrarse, es decir, solo una parte especifica del elemento se mostrara. La región recortada es un path especificado como una URL referenciando a un SVG inline o externo, o un metodo de figura como lo es <a href="/en-US/docs/Web/SVG/Element/circle">circle()</a>. La propiedad clip-path reemplaza la ahora deprecada propiedad <a href="/en-US/docs/Web/CSS/clip">clip</a>.</p> + +<pre class="brush:css no-line-numbers">/* Valores clave */ +clip-path: none; + +/* Valores de imagen */ +clip-path: url(resources.svg#c1); + +/* Valores de caja */ +clip-path: fill-box; +clip-path: stroke-box; +clip-path: view-box; +clip-path: margin-box; +clip-path: border-box; +clip-path: padding-box; +clip-path: content-box; + +/* Valores geometricos */ +clip-path: inset(100px 50px); +clip-path: circle(50px at 0 100px); +clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); + +/* Valores Geometricos y de caja combinados */ +clip-path: padding-box circle(50px at 0 100px); + +/* Valores globales */ +clip-path: inherit; +clip-path: initial; +clip-path: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>url()</code></dt> + <dd>Represents a URL referencing a clip path element.</dd> + <dt> </dt> + <dt><code>inset()</code>, <code>circle()</code>, <code>ellipse()</code>, <code>polygon()</code></dt> + <dd>A {{cssxref("<basic-shape>")}} function. Such a shape will make use of the specified <code><geometry-box></code> to size and position the basic shape. If no geometry box is specified, the <code>border-box</code> will be used as reference box.</dd> + <dt><code><geometry-box></code></dt> + <dd>If specified in combination with a <code><basic-shape></code>, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined by {{cssxref("border-radius")}}) as clipping path. The geometry box can be one of the following values: + <dl> + <dt><code>fill-box</code></dt> + <dd>Uses the object bounding box as reference box.</dd> + <dt><code>stroke-box</code></dt> + <dd>Uses the stroke bounding box as reference box.</dd> + <dt><code>view-box</code></dt> + <dd>Uses the nearest SVG viewport as reference box. If a {{SVGAttr("viewBox")}} attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the <code>viewBox</code> attribute and the dimension of the reference box is set to the width and height values of the <code>viewBox</code> attribute.</dd> + <dt><code>margin-box</code></dt> + <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">margin box</a> as the reference box.</dd> + <dt><code>border-box</code></dt> + <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">border box</a> as the reference box.</dd> + <dt><code>padding-box</code></dt> + <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">padding box</a> as the reference box.</dd> + <dt><code>content-box</code></dt> + <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">content box</a> as the reference box.</dd> + </dl> + </dd> + <dt><code>none</code></dt> + <dd>There is no clipping path created.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="brush:css">/* inline SVG */ +.target { + clip-path: url(#c1); +} + +/* external SVG */ +.anothertarget { + clip-path: url(resources.svg#c1); +} + +/* circle */ +.circleClass { + clip-path: circle(15px at 20px 20px); +}</pre> + +<h2 id="Live_sample">Live sample</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg" + alt="MDN logo"> +<svg height="0" width="0"> + <defs> + <clipPath id="cross"> + <rect y="110" x="137" width="90" height="90"/> + <rect x="0" y="110" width="90" height="90"/> + <rect x="137" y="0" width="90" height="90"/> + <rect x="0" y="0" width="90" height="90"/> + </clipPath> + </defs> +</svg> + +<select id="clipPath"> + <option value="none">none</option> + <option value="circle(100px at 110px 100px)">circle</option> + <option value="url(#cross)" selected>cross</option> + <option value="inset(20px round 20px)">inset</option> +</select> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#clipped { + margin-bottom: 20px; + clip-path: url(#cross); +} +</pre> + +<div class="hidden"> +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var clipPathSelect = document.getElementById("clipPath"); +clipPathSelect.addEventListener("change", function (evt) { + document.getElementById("clipped").style.clipPath = evt.target.value; +}); +</pre> +</div> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Live_sample", 230, 250)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}</td> + <td>{{Spec2('CSS Masks')}}</td> + <td>Extends its application to HTML elements</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition (applies to SVG elements only)</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.clip-path")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute/clip-rule">clip-rule</a>, {{cssxref("mask")}}, {{cssxref("filter")}}</li> + <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">CSS Shapes, clipping and masking – and how to use them</a></li> + <li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></li> + <li>{{SVGAttr("clip-path")}} SVG attribute</li> +</ul> diff --git a/files/es/web/css/clip/index.html b/files/es/web/css/clip/index.html new file mode 100644 index 0000000000..73098f51d9 --- /dev/null +++ b/files/es/web/css/clip/index.html @@ -0,0 +1,148 @@ +--- +title: clip +slug: Web/CSS/clip +translation_of: Web/CSS/clip +--- +<div> +<div>{{CSSRef}}{{deprecated_header}}</div> +</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad de CSS <code>clip</code> define qué porción de un elemento es visible. La propiedad <code>clip</code> se aplica solamente sobre elementos con {{ cssxref("position","position:absolute") }} o {{cssxref("position", "position:fixed")}}.</p> + +<div class="warning"> +<p><strong>Warning:</strong> This property is deprecated. Use {{cssxref("clip-path")}} instead.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintaxis formal</a>: {{csssyntax("clip")}} +</pre> + +<pre>clip: rect(1px, 10em, 3rem, 2ch) +clip: auto + +clip: inherit</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><shape></code></dt> + <dd>Una forma rectangular del formulario + <pre style="margin: 0;">rect(<top>, <right>, <bottom>, <left>) /* sintaxis estándar */ +</pre> + o + + <pre style="margin: 0;">rect(<top> <right> <bottom> <left>) /* sintaxis compatible inversa */</pre> + donde<code><top></code> y <code><bottom></code> especifícan desplazamientos de la <em>esquina del borde superior</em> de la caja, y <code><right></code>, y <code><left></code> especifican desplazamientos de la <em>esquina del borde izquiedo</em> de la caja.</dd> + <dd><code><top></code>, <code><right></code>, <code><bottom></code>, y <code><left></code> pueden cada uno tenerun valor {{cssxref("<length>")}} o <code> auto</code>.</dd> + <dt><code>auto</code></dt> + <dd>El elemento no se recorta (valor por defecto)</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush:css">p { border:dotted; position:relative; } + +#img2 { + position:absolute; left:263px; + + clip: rect(40px, 200px, 150px, 30px); + /* sintáxis estándar, no soportada por Internet Explorer 4-7 */ +} + +#img3 { + position: absolute; left:526px; + + clip: rect(40px 200px 150px 30px); + /* sintáxis no-estándar, pero soportada por todos los exploradores importantes incluyendo Firefox y IE */ +}</pre> + +<p style="position: relative; border: dotted;"><img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg"> <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style=""> <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style=""></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'clip') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Define <code>clip</code> como animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visufx.html#clipping', 'clip') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre exploradores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td rowspan="2">Soporte básico</td> + <td rowspan="2">1.0</td> + <td rowspan="2">1.0 (1.0)</td> + <td>4.0</td> + <td rowspan="2">7.0</td> + <td rowspan="2">1.0 (85)</td> + </tr> + <tr> + <td>8.0<br> + En esta versión es soportada la sintaxis correcta con coma.</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Propiedades CSS relacionadas: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("overflow") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}</li> +</ul> diff --git a/files/es/web/css/color/index.html b/files/es/web/css/color/index.html new file mode 100644 index 0000000000..d5d408265f --- /dev/null +++ b/files/es/web/css/color/index.html @@ -0,0 +1,260 @@ +--- +title: color +slug: Web/CSS/color +tags: + - CSS + - Colores CSS + - Colores HTML + - Diseño + - Estilo HTML + - Estilo Texto + - Estilos HTML + - Propiedad CSS + - Referencia + - Referencia_CSS + - Web + - color +translation_of: Web/CSS/color +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">La propiedad de CSS <strong><code>color</code></strong> selecciona el <a href="/en-US/docs/Web/CSS/color_value">valor de color</a> de primer plano del contenido de elemento de texto y <a href="/en-US/docs/Web/CSS/text-decoration">decoraciones de texto</a>. Tambien establece el valor {{cssxref("currentcolor")}} </span> <span id="result_box" lang="es"><span>que se puede usar como un valor indirecto en otras propiedades, y es el valor predeterminado para otras propiedades de color, como</span></span> <span class="seoSummary"> {{cssxref("border-color")}}.</span></p> + +<p><span id="result_box" lang="es"><span>Para obtener una descripción general del uso del color en HTML, consulte</span></span> <a href="/en-US/docs/Web/HTML/Applying_color">Aplicando color a los elementos HTML mediante CSS</a>.</p> + +<pre class="brush: css no-line-numbers">/* Valores de palabras clave */ +color: currentcolor; + +/* Valores <named-color> */ +color: red; +color: orange; +color: tan; +color: rebeccapurple; + +/* Valores <hex-color> */ +color: #090; +color: #009900; +color: #090a; +color: #009900aa; + +/* Valores <rgb()> */ +color: rgb(34, 12, 64, 0.6); +color: rgba(34, 12, 64, 0.6); +color: rgb(34 12 64 / 0.6); +color: rgba(34 12 64 / 0.3); +color: rgb(34.0 12 64 / 60%); +color: rgba(34.6 12 64 / 30%); + +/* Valores <hsl()> */ +color: hsl(30, 100%, 50%, 0.6); +color: hsla(30, 100%, 50%, 0.6); +color: hsl(30 100% 50% / 0.6); +color: hsla(30 100% 50% / 0.6); +color: hsl(30.0 100% 50% / 60%); +color: hsla(30.2 100% 50% / 60%); + +/* Valores Globales */ +color: inherit; +color: initial; +color: unset; +</pre> + +<p><span class="short_text" id="result_box" lang="es"><span>Ten en cuenta que el valor debe ser un </span></span>{{cssxref("color")}} <span class="short_text" lang="es"><span>uniforme</span></span> . No puede ser un {{cssxref("<gradient>")}}, que es en realidad un tipo de {{cssxref("<image>")}}.</p> + +<div class="hidden" id="color"> +<pre class="brush: html"><div class="grid"> + <div class="col"> + <div class="cell"> + Keyword values + <p class="c1">color: currentcolor</p> + </div> + <div class="cell"> + &lt;named-color&gt; values + <p class="c2">color: red</p> + <p class="c3">color: orange</p> + <p class="c4">color: tan</p> + <p class="c5">color: rebeccapurple</p> + </div> + <div class="cell"> + &lt;hex-color&gt; values + <p class="c6">color: #090</p> + <p class="c7">color: #009900</p> + <p class="c8">color: #090a</p> + <p class="c9">color: #009900aa</p> + </div> + <div class="cell"> + &lt;rgb()&gt; values + <p class="c10">color: rgb(34, 12, 64, 0.6)</p> + <p class="c11">color: rgba(34, 12, 64, 0.6)</p> + <p class="c12">color: rgb(34 12 64 / 0.6)</p> + <p class="c13">color: rgba(34 12 64 / 0.6)</p> + </div> + <div class="cell"> + &lt;hsl()&gt; values + <p class="c14">color: hsl(30, 100%, 50%, 0.6)</p> + <p class="c15">color: hsla(30, 100%, 50%, 0.6)</p> + <p class="c16">color: hsl(30 100% 50% / 0.6)</p> + <p class="c17">color: hsla(30 100% 50% / 0.6)</p> + </div> + </div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; +} + +.grid { + width: 100%; + height: 100%; + display: flex; + background: #EEE; + font: 1em monospace; +} + +.col { + display: flex; + flex: 1 auto; + flex-direction: column; +} + +.cell { + margin: .5em; + padding: .5em; + background-color: #FFF; + overflow: hidden; + text-align: left; + font-style: italic; +} + +p { + font-size: 1rem; + font-style: normal; + padding: 0 .5em .5em; + margin: 0; +} + +p:first-child { + padding-top: .5em; +} + +/* Valores de palabras clave */ +.c1 { color: currentcolor; } + +/* values */ +.c2 { color: red; } +.c3 { color: orange; } +.c4 { color: tan; } +.c5 { color: rebeccapurple; } + +/* valores */ +.c6 { color: #090; } +.c7 { color: #009900; } +.c8 { color: #090A; } +.c9 { color: #009900AA; } + +/* valores */ +.c10 { color: rgb(34, 12, 64, 0.6); } +.c11 { color: rgba(34, 12, 64, 0.6); } +.c12 { color: rgb(34 12 64 / 0.6); } +.c13 { color: rgba(34 12 64 / 0.6); } + +/* valores */ +.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); }</pre> +</div> + +<p>{{EmbedLiveSample("color", "100%", 630, "", "", "example-outcome-frame")}}</p> + +<div>{{cssinfo}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La propiedad <code>color</code> esta especificada como un solo un valor de {{cssxref("<color>")}}</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>{{cssxref("<color>")}}</dt> + <dd><span id="result_box" lang="es"><span>Establece el color de las partes textuales y decorativas del elemento.</span></span></dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p><span id="result_box" lang="es"><span>Las siguientes son todas las formas de hacer que el texto de un párrafo sea rojo:</span></span></p> + +<pre class="brush: css">p { color: red; } +p { color: #f00; } +p { color: #ff0000; } +p { color: rgb(255,0,0); } +p { color: rgb(100%, 0%, 0%); } +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); } +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}</td> + <td>{{Spec2('CSS4 Colors')}}</td> + <td> + <p><span class="short_text" id="result_box" lang="es"><span>Agrega sintaxis sin comas para las funciones</span></span> <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, y <code>hsla()</code>. <span class="short_text" id="result_box" lang="es"><span>Permite valores alfa en</span></span> <code>rgb()</code> y <code>hsl()</code>, <span class="short_text" id="result_box" lang="es"><span>convirtiéndose</span></span> <code>rgba()</code> y <code>hsla()</code> <span class="short_text" id="result_box" lang="es"><span>en alias (obsoletos) para ellos.</span></span><br> + <span class="short_text" id="result_box" lang="es"><span>Agrega una palabra clave de color</span></span> <code>rebeccapurple</code>.<br> + <span id="result_box" lang="es"><span>Agrega valores de color hexadecimal de 4 y 8 dígitos, donde el último dígito representa el valor alfa.</span></span><br> + Añade las funciones <code>hwb()</code>, <code>device-cmyk()</code>, y <code>color()</code>.</p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Define <code>color</code> como animable.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td><span id="result_box" lang="es"><span>Desprecia los colores del sistema.</span> <span>Agrega colores SVG.</span></span> Agrega las funciones <code>rgba()</code>, <code>hsl()</code>, y <code>hsla()</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Añade el color <code>orange</code> y los colores del sistema.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#color', 'color')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definicion inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + + + +<p>{{Compat("css.properties.color")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><span class="short_text" id="result_box" lang="es"><span>El tipo de datos de</span></span> {{cssxref("<color>")}}</li> + <li><span class="short_text" id="result_box" lang="es"><span>Otras propiedades relacionadas con el color:</span></span> {{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")}}</li> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Aplicar color a elementos HTML usando CSS</a></li> +</ul> diff --git a/files/es/web/css/color_value/index.html b/files/es/web/css/color_value/index.html new file mode 100644 index 0000000000..5e8fde3b08 --- /dev/null +++ b/files/es/web/css/color_value/index.html @@ -0,0 +1,1416 @@ +--- +title: <color> +slug: Web/CSS/color_value +tags: + - CSS + - Layout + - Necesita Compatibilidad con Navegadores Móviles + - Referencia + - Tipos de datos CSS + - Web +translation_of: Web/CSS/color_value +--- +<p>{{CSSRef}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p><code><font face="Open Sans, Arial, sans-serif">El tipo de datos </font></code><a href="/en-US/docs/Web/CSS">CSS</a><code><font face="Open Sans, Arial, sans-serif"> </font><color></code> denota un color en el <a class="external" href="http://en.wikipedia.org/wiki/SRGB">sRGB color space</a>. Un color puede ser descrito de cualquiera de las siguiente maneras:</p> + +<ul> + <li>Usando una <em>palabra clave</em>.</li> + <li>Usando el sistema <a class="external" href="http://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation">RGB cubic-coordinate</a> (usando #-hexadecimal o las notaciones funcionales <code>rgb()</code> y <code>rgba()</code> )</li> + <li>Usando el sistema <a class="external" href="http://en.wikipedia.org/wiki/HSL_and_HSV">HSL cylindrical-coordinate</a> (usando las notaciones funcionales <code>hsl()</code> y <code>hsla() </code>)</li> +</ul> + +<p>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.</p> + +<p>Asociado con el color en el espacio sRGB, un valor <code><color></code> también consiste en una coordenada <a class="external" href="http://en.wikipedia.org/wiki/Alpha_compositing">alpha-channel</a> o valor de transparencia, indicando cómo se debe <a class="external" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">composite</a> o mezclar el color con su color de fondo.</p> + +<p>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 <a class="external" href="http://en.wikipedia.org/wiki/ICC_profile">color profile</a> de algunos dispositivos de salidas. En esta situación el color puede variar bastante.</p> + +<div class="note"><strong>Notas:</strong> La recomendación <a class="external" href="http://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> de la W3C aconseja a los autores web de manera clara que no usen <em>color </em>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.</div> + +<h2 id="Interpolación">Interpolación</h2> + +<p>Los valores del tipo de datos CSS <code><color></code> pueden ser interpolados para lograr animaciones o para crear valores <code><gradient>. </code>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 <a class="external" href="http://www.gimp.org/docs/plug-in/appendix-alpha.html">alpha-premultiplied sRGBA color space</a> para evitar que aparezcan grises inesperados. En las animaciones, la velocidad de la interpolación viene determinada por la <a href="/en-US/docs/Web/CSS/timing-function">timing function</a> asociada con la animación.</p> + +<h2 id="Valores">Valores</h2> + +<p>Hay varias formas de describir un valor <code><color></code>.</p> + +<h3 id="Palabras_clave_de_colores">Palabras clave de colores</h3> + +<p>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 <code>red, blue, brown, lightseagreen</code>. 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:</p> + +<ul> + <li>CSS Nivel 1 sólo acepta 16 colores básicos, los llamados <em>colores</em> <em>VGA </em>ya que son tomados de los colores que son capaces de mostrar las trajetas gráficas <a class="external" href="http://en.wikipedia.org/wiki/VGA">VGA</a>.</li> + <li>CSS Nivel 2 añadió la palabra clave <code>orange</code>.</li> + <li>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.</li> +</ul> + +<p>Hay algunas advertencias a tener en cuenta al usar las palabras clave relativas a colores:</p> + +<ul> + <li>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.</li> + <li>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</li> + <li>Ninguna palabra clave de color tiene transparencia en CSS, son colores planos y sólidos.</li> + <li>Algunas referencian el mismo color: + <ul> + <li><code>darkgray</code> / <code>darkgrey</code></li> + <li><code>darkslategray</code> / <code>darkslategrey</code></li> + <li><code>dimgray</code> / <code>dimgrey</code></li> + <li><code>lightgray</code> / <code>lightgrey</code></li> + <li><code>lightslategray</code> / <code>lightslategrey</code></li> + <li><code>gray</code> / <code>grey</code></li> + <li><code>slategray</code> / <code>slategrey</code></li> + </ul> + </li> + <li>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.</li> +</ul> + +<table> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Color</th> + <th scope="col">Palabra clave</th> + <th scope="col">Valor RGB hexadecimal</th> + <th scope="col">Muestra</th> + </tr> + </thead> + <tbody> + <tr style="position: relative;"> + <td rowspan="16">{{SpecName("CSS1")}}</td> + <td style="background: #000;"> </td> + <td style="text-align: center;"><code>black</code></td> + <td><code>#000000</code></td> + <td style="background: black;"> </td> + </tr> + <tr> + <td style="background: #C0C0C0;"> </td> + <td style="text-align: center;"><code>silver</code></td> + <td><code>#c0c0c0</code></td> + <td style="background: silver;"> </td> + </tr> + <tr> + <td style="background: #808080;"> </td> + <td style="text-align: center;"><code>gray</code></td> + <td><code>#808080</code></td> + <td style="background: gray;"> </td> + </tr> + <tr> + <td style="background: #FFF;"> </td> + <td style="text-align: center;"><code>white</code></td> + <td><code>#ffffff</code></td> + <td style="background: white;"> </td> + </tr> + <tr> + <td style="background: #800000;"> </td> + <td style="text-align: center;"><code>maroon</code></td> + <td><code>#800000</code></td> + <td style="background: maroon;"> </td> + </tr> + <tr> + <td style="background: #F00;"> </td> + <td style="text-align: center;"><code>red</code></td> + <td><code>#ff0000</code></td> + <td style="background: red;"> </td> + </tr> + <tr> + <td style="background: #800080;"> </td> + <td style="text-align: center;"><code>purple</code></td> + <td><code>#800080</code></td> + <td style="background: purple;"> </td> + </tr> + <tr> + <td style="background: #F0F;"> </td> + <td style="text-align: center;"><code>fuchsia</code></td> + <td><code>#ff00ff</code></td> + <td style="background: fuchsia;"> </td> + </tr> + <tr> + <td style="background: #008000;"> </td> + <td style="text-align: center;"><code>green</code></td> + <td><code>#008000</code></td> + <td style="background: green;"> </td> + </tr> + <tr> + <td style="background: #0F0;"> </td> + <td style="text-align: center;"><code>lime</code></td> + <td><code>#00ff00</code></td> + <td style="background: lime;"> </td> + </tr> + <tr> + <td style="background: #808000;"> </td> + <td style="text-align: center;"><code>olive</code></td> + <td><code>#808000</code></td> + <td style="background: olive;"> </td> + </tr> + <tr> + <td style="background: #FF0;"> </td> + <td style="text-align: center;"><code>yellow</code></td> + <td><code>#ffff00</code></td> + <td style="background: yellow;"> </td> + </tr> + <tr> + <td style="background: #000080;"> </td> + <td style="text-align: center;"><code>navy</code></td> + <td><code>#000080</code></td> + <td style="background: navy;"> </td> + </tr> + <tr> + <td style="background: #00F;"> </td> + <td style="text-align: center;"><code>blue</code></td> + <td><code>#0000ff</code></td> + <td style="background: blue;"> </td> + </tr> + <tr> + <td style="background: #008080;"> </td> + <td style="text-align: center;"><code>teal</code></td> + <td><code>#008080</code></td> + <td style="background: teal;"> </td> + </tr> + <tr> + <td style="background: #0FF;"> </td> + <td style="text-align: center;"><code>aqua</code></td> + <td><code>#00ffff</code></td> + <td style="background: aqua;"> </td> + </tr> + <tr> + <td>{{SpecName("CSS2.1")}}</td> + <td style="background: #FFA500;"> </td> + <td style="text-align: center;"><code>orange</code></td> + <td><code>#ffa500</code></td> + <td style="background: orange;"> </td> + </tr> + <tr> + <td rowspan="128">{{SpecName("CSS3 Colors")}}</td> + <td style="background: #f0f8ff;"> </td> + <td style="text-align: center;"><code>aliceblue</code></td> + <td><code>#f0f8ff</code></td> + <td style="background: aliceblue;"> </td> + </tr> + <tr> + <td style="background: #faebd7;"> </td> + <td style="text-align: center;"><code>antiquewhite</code></td> + <td><code>#faebd7</code></td> + <td style="background: antiquewhite;"> </td> + </tr> + <tr> + <td style="background: #7fffd4;"> </td> + <td style="text-align: center;"><code>aquamarine</code></td> + <td><code>#7fffd4</code></td> + <td style="background: aquamarine;"> </td> + </tr> + <tr> + <td style="background: #f0ffff;"> </td> + <td style="text-align: center;"><code>azure</code></td> + <td><code>#f0ffff</code></td> + <td style="background: azure;"> </td> + </tr> + <tr> + <td style="background: #f5f5dc;"> </td> + <td style="text-align: center;"><code>beige</code></td> + <td><code>#f5f5dc</code></td> + <td style="background: beige;"> </td> + </tr> + <tr> + <td style="background: #ffe4c4;"> </td> + <td style="text-align: center;"><code>bisque</code></td> + <td><code>#ffe4c4</code></td> + <td style="background: bisque;"> </td> + </tr> + <tr> + <td style="background: #ffebcd;"> </td> + <td style="text-align: center;"><code>blanchedalmond</code></td> + <td><code>#ffe4c4</code></td> + <td style="background: blanchedalmond;"> </td> + </tr> + <tr> + <td style="background: #8a2be2;"> </td> + <td style="text-align: center;"><code>blueviolet</code></td> + <td><code>#8a2be2</code></td> + <td style="background: blueviolet;"> </td> + </tr> + <tr> + <td style="background: #a52a2a;"> </td> + <td style="text-align: center;"><code>brown</code></td> + <td><code>#a52a2a</code></td> + <td style="background: brown;"> </td> + </tr> + <tr> + <td style="background: #deb887;"> </td> + <td style="text-align: center;"><code>burlywood</code></td> + <td><code>#deb887</code></td> + <td style="background: burlywood;"> </td> + </tr> + <tr> + <td style="background: #5f9ea0;"> </td> + <td style="text-align: center;"><code>cadetblue</code></td> + <td><code>#5f9ea0</code></td> + <td style="background: cadetblue;"> </td> + </tr> + <tr> + <td style="background: #7fff00;"> </td> + <td style="text-align: center;"><code>chartreuse</code></td> + <td><code>#7fff00</code></td> + <td style="background: chartreuse;"> </td> + </tr> + <tr> + <td style="background: #d2691e;"> </td> + <td style="text-align: center;"><code>chocolate</code></td> + <td><code>#d2691e</code></td> + <td style="background: chocolate;"> </td> + </tr> + <tr> + <td style="background: #ff7f50;"> </td> + <td style="text-align: center;"><code>coral</code></td> + <td><code>#ff7f50</code></td> + <td style="background: coral;"> </td> + </tr> + <tr> + <td style="background: #6495ed;"> </td> + <td style="text-align: center;"><code>cornflowerblue</code></td> + <td><code>#6495ed</code></td> + <td style="background: cornflowerblue;"> </td> + </tr> + <tr> + <td style="background: #fff8dc;"> </td> + <td style="text-align: center;"><code>cornsilk</code></td> + <td><code>#fff8dc</code></td> + <td style="background: cornsilk;"> </td> + </tr> + <tr> + <td style="background: #dc143c;"> </td> + <td style="text-align: center;"><code>crimson</code></td> + <td><code>#dc143c</code></td> + <td style="background: crimson;"> </td> + </tr> + <tr> + <td style="background: #00008b;"> </td> + <td style="text-align: center;"><code>darkblue</code></td> + <td><code>#00008b</code></td> + <td style="background: darkblue;"> </td> + </tr> + <tr> + <td style="background: #008b8b;"> </td> + <td style="text-align: center;"><code>darkcyan</code></td> + <td><code>#008b8b</code></td> + <td style="background: darkcyan;"> </td> + </tr> + <tr> + <td style="background: #b8860b;"> </td> + <td style="text-align: center;"><code>darkgoldenrod</code></td> + <td><code>#b8860b</code></td> + <td style="background: darkgoldenrod;"> </td> + </tr> + <tr> + <td style="background: #a9a9a9;"> </td> + <td style="text-align: center;"><code>darkgray</code></td> + <td><code>#a9a9a9</code></td> + <td style="background: darkgray;"> </td> + </tr> + <tr> + <td style="background: #006400;"> </td> + <td style="text-align: center;"><code>darkgreen</code></td> + <td><code>#006400</code></td> + <td style="background: darkgreen;"> </td> + </tr> + <tr> + <td style="background: #a9a9a9;"> </td> + <td style="text-align: center;"><code>darkgrey</code></td> + <td><code>#a9a9a9</code></td> + <td style="background: darkgrey;"> </td> + </tr> + <tr> + <td style="background: #bdb76b;"> </td> + <td style="text-align: center;"><code>darkkhaki</code></td> + <td><code>#bdb76b</code></td> + <td style="background: darkkhaki;"> </td> + </tr> + <tr> + <td style="background: #8b008b;"> </td> + <td style="text-align: center;"><code>darkmagenta</code></td> + <td><code>#8b008b</code></td> + <td style="background: darkmagenta;"> </td> + </tr> + <tr> + <td style="background: #556b2f;"> </td> + <td style="text-align: center;"><code>darkolivegreen</code></td> + <td><code>#556b2f</code></td> + <td style="background: darkolivegreen;"> </td> + </tr> + <tr> + <td style="background: #ff8c00;"> </td> + <td style="text-align: center;"><code>darkorange</code></td> + <td><code>#ff8c00</code></td> + <td style="background: darkorange;"> </td> + </tr> + <tr> + <td style="background: #9932cc;"> </td> + <td style="text-align: center;"><code>darkorchid</code></td> + <td><code>#9932cc</code></td> + <td style="background: darkorchid;"> </td> + </tr> + <tr> + <td style="background: #8b0000;"> </td> + <td style="text-align: center;"><code>darkred</code></td> + <td><code>#8b0000</code></td> + <td style="background: darkred;"> </td> + </tr> + <tr> + <td style="background: #e9967a;"> </td> + <td style="text-align: center;"><code>darksalmon</code></td> + <td><code>#e9967a</code></td> + <td style="background: darksalmon;"> </td> + </tr> + <tr> + <td style="background: #8fbc8f;"> </td> + <td style="text-align: center;"><code>darkseagreen</code></td> + <td><code>#8fbc8f</code></td> + <td style="background: darkseagreen;"> </td> + </tr> + <tr> + <td style="background: #483d8b;"> </td> + <td style="text-align: center;"><code>darkslateblue</code></td> + <td><code>#483d8b</code></td> + <td style="background: darkslateblue;"> </td> + </tr> + <tr> + <td style="background: #2f4f4f;"> </td> + <td style="text-align: center;"><code>darkslategray</code></td> + <td><code>#2f4f4f</code></td> + <td style="background: darkslategray;"> </td> + </tr> + <tr> + <td style="background: #2f4f4f;"> </td> + <td style="text-align: center;"><code>darkslategrey</code></td> + <td><code>#2f4f4f</code></td> + <td style="background: darkslategrey;"> </td> + </tr> + <tr> + <td style="background: #00ced1;"> </td> + <td style="text-align: center;"><code>darkturquoise</code></td> + <td><code>#00ced1</code></td> + <td style="background: darkturquoise;"> </td> + </tr> + <tr> + <td style="background: #9400d3;"> </td> + <td style="text-align: center;"><code>darkviolet</code></td> + <td><code>#9400d3</code></td> + <td style="background: darkviolet;"> </td> + </tr> + <tr> + <td style="background: #ff1493;"> </td> + <td style="text-align: center;"><code>deeppink</code></td> + <td><code>#ff1493</code></td> + <td style="background: deeppink;"> </td> + </tr> + <tr> + <td style="background: #00bfff;"> </td> + <td style="text-align: center;"><code>deepskyblue</code></td> + <td><code>#00bfff</code></td> + <td style="background: deepskyblue;"> </td> + </tr> + <tr> + <td style="background: #696969;"> </td> + <td style="text-align: center;"><code>dimgray</code></td> + <td><code>#696969</code></td> + <td style="background: dimgray;"> </td> + </tr> + <tr> + <td style="background: #696969;"> </td> + <td style="text-align: center;"><code>dimgrey</code></td> + <td><code>#696969</code></td> + <td style="background: dimgrey;"> </td> + </tr> + <tr> + <td style="background: #1e90ff;"> </td> + <td style="text-align: center;"><code>dodgerblue</code></td> + <td><code>#1e90ff</code></td> + <td style="background: dodgerblue;"> </td> + </tr> + <tr> + <td style="background: #b22222;"> </td> + <td style="text-align: center;"><code>firebrick</code></td> + <td><code>#b22222</code></td> + <td style="background: firebrick;"> </td> + </tr> + <tr> + <td style="background: #fffaf0;"> </td> + <td style="text-align: center;"><code>floralwhite</code></td> + <td><code>#fffaf0</code></td> + <td style="background: floralwhite;"> </td> + </tr> + <tr> + <td style="background: #228b22;"> </td> + <td style="text-align: center;"><code>forestgreen</code></td> + <td><code>#228b22</code></td> + <td style="background: forestgreen;"> </td> + </tr> + <tr> + <td style="background: #dcdcdc;"> </td> + <td style="text-align: center;"><code>gainsboro</code></td> + <td><code>#dcdcdc</code></td> + <td style="background: gainsboro;"> </td> + </tr> + <tr> + <td style="background: #f8f8ff;"> </td> + <td style="text-align: center;"><code>ghostwhite</code></td> + <td><code>#f8f8ff</code></td> + <td style="background: ghostwhite;"> </td> + </tr> + <tr> + <td style="background: #ffd700;"> </td> + <td style="text-align: center;"><code>gold</code></td> + <td><code>#ffd700</code></td> + <td style="background: gold;"> </td> + </tr> + <tr> + <td style="background: #daa520;"> </td> + <td style="text-align: center;"><code>goldenrod</code></td> + <td><code>#daa520</code></td> + <td style="background: goldenrod;"> </td> + </tr> + <tr> + <td style="background: #adff2f;"> </td> + <td style="text-align: center;"><code>greenyellow</code></td> + <td><code>#adff2f</code></td> + <td style="background: greenyellow ;"> </td> + </tr> + <tr> + <td style="background: #808080;"> </td> + <td style="text-align: center;"><code>grey</code></td> + <td><code>#808080</code></td> + <td style="background: grey;"> </td> + </tr> + <tr> + <td style="background: #f0fff0;"> </td> + <td style="text-align: center;"><code>honeydew</code></td> + <td><code>#f0fff0</code></td> + <td style="background: honeydew;"> </td> + </tr> + <tr> + <td style="background: #ff69b4;"> </td> + <td style="text-align: center;"><code>hotpink</code></td> + <td><code>#ff69b4</code></td> + <td style="background: hotpink;"> </td> + </tr> + <tr> + <td style="background: #cd5c5c;"> </td> + <td style="text-align: center;"><code>indianred</code></td> + <td><code>#cd5c5c</code></td> + <td style="background: indianred;"> </td> + </tr> + <tr> + <td style="background: #4b0082;"> </td> + <td style="text-align: center;"><code>indigo</code></td> + <td><code>#4b0082</code></td> + <td style="background: indigo;"> </td> + </tr> + <tr> + <td style="background: #fffff0;"> </td> + <td style="text-align: center;"><code>ivory</code></td> + <td><code>#fffff0</code></td> + <td style="background: ivory;"> </td> + </tr> + <tr> + <td style="background: #f0e68c;"> </td> + <td style="text-align: center;"><code>khaki</code></td> + <td><code>#f0e68c</code></td> + <td style="background: khaki;"> </td> + </tr> + <tr> + <td style="background: #e6e6fa;"> </td> + <td style="text-align: center;"><code>lavender</code></td> + <td><code>#e6e6fa</code></td> + <td style="background: lavender;"> </td> + </tr> + <tr> + <td style="background: #fff0f5;"> </td> + <td style="text-align: center;"><code>lavenderblush</code></td> + <td><code>#fff0f5</code></td> + <td style="background: lavenderblush ;"> </td> + </tr> + <tr> + <td style="background: #7cfc00;"> </td> + <td style="text-align: center;"><code>lawngreen</code></td> + <td><code>#7cfc00</code></td> + <td style="background: lawngreen;"> </td> + </tr> + <tr> + <td style="background: #fffacd;"> </td> + <td style="text-align: center;"><code>lemonchiffon</code></td> + <td><code>#fffacd</code></td> + <td style="background: lemonchiffon;"> </td> + </tr> + <tr> + <td style="background: #add8e6;"> </td> + <td style="text-align: center;"><code>lightblue</code></td> + <td><code>#add8e6</code></td> + <td style="background: lightblue;"> </td> + </tr> + <tr> + <td style="background: #f08080;"> </td> + <td style="text-align: center;"><code>lightcoral</code></td> + <td><code>#f08080</code></td> + <td style="background: lightcoral;"> </td> + </tr> + <tr> + <td style="background: #e0ffff;"> </td> + <td style="text-align: center;"><code>lightcyan</code></td> + <td><code>#e0ffff</code></td> + <td style="background: lightcyan;"> </td> + </tr> + <tr> + <td style="background: #fafad2;"> </td> + <td style="text-align: center;"><code>lightgoldenrodyellow</code></td> + <td><code>#fafad2</code></td> + <td style="background: lightgoldenrodyellow ;"> </td> + </tr> + <tr> + <td style="background: #d3d3d3;"> </td> + <td style="text-align: center;"><code>lightgray</code></td> + <td><code>#d3d3d3</code></td> + <td style="background: lightgray;"> </td> + </tr> + <tr> + <td style="background: #90ee90;"> </td> + <td style="text-align: center;"><code>lightgreen</code></td> + <td><code>#90ee90</code></td> + <td style="background: lightgreen;"> </td> + </tr> + <tr> + <td style="background: #d3d3d3;"> </td> + <td style="text-align: center;"><code>lightgrey</code></td> + <td><code>#d3d3d3</code></td> + <td style="background: lightgrey;"> </td> + </tr> + <tr> + <td style="background: #ffb6c1;"> </td> + <td style="text-align: center;"><code>lightpink</code></td> + <td><code>#ffb6c1</code></td> + <td style="background: lightpink;"> </td> + </tr> + <tr> + <td style="background: #ffa07a;"> </td> + <td style="text-align: center;"><code>lightsalmon</code></td> + <td><code>#ffa07a</code></td> + <td style="background: lightsalmon;"> </td> + </tr> + <tr> + <td style="background: #20b2aa;"> </td> + <td style="text-align: center;"><code>lightseagreen</code></td> + <td><code>#20b2aa</code></td> + <td style="background: lightseagreen;"> </td> + </tr> + <tr> + <td style="background: #87cefa;"> </td> + <td style="text-align: center;"><code>lightskyblue</code></td> + <td><code>#87cefa</code></td> + <td style="background: lightskyblue;"> </td> + </tr> + <tr> + <td style="background: #778899;"> </td> + <td style="text-align: center;"><code>lightslategray</code></td> + <td><code>#778899</code></td> + <td style="background: lightslategray;"> </td> + </tr> + <tr> + <td style="background: #778899;"> </td> + <td style="text-align: center;"><code>lightslategrey</code></td> + <td><code>#778899</code></td> + <td style="background: lightslategrey;"> </td> + </tr> + <tr> + <td style="background: #b0c4de;"> </td> + <td style="text-align: center;"><code>lightsteelblue</code></td> + <td><code>#b0c4de</code></td> + <td style="background: lightsteelblue;"> </td> + </tr> + <tr> + <td style="background: #ffffe0;"> </td> + <td style="text-align: center;"><code>lightyellow</code></td> + <td><code>#ffffe0</code></td> + <td style="background: lightyellow;"> </td> + </tr> + <tr> + <td style="background: #32cd32;"> </td> + <td style="text-align: center;"><code>limegreen</code></td> + <td><code>#32cd32</code></td> + <td style="background: limegreen;"> </td> + </tr> + <tr> + <td style="background: #faf0e6;"> </td> + <td style="text-align: center;"><code>linen</code></td> + <td><code>#faf0e6</code></td> + <td style="background: linen;"> </td> + </tr> + <tr> + <td style="background: #66cdaa;"> </td> + <td style="text-align: center;"><code>mediumaquamarine</code></td> + <td><code>#66cdaa</code></td> + <td style="background: mediumaquamarine;"> </td> + </tr> + <tr> + <td style="background: #0000cd;"> </td> + <td style="text-align: center;"><code>mediumblue</code></td> + <td><code>#0000cd</code></td> + <td style="background: mediumblue;"> </td> + </tr> + <tr> + <td style="background: #ba55d3;"> </td> + <td style="text-align: center;"><code>mediumorchid</code></td> + <td><code>#ba55d3</code></td> + <td style="background: mediumorchid;"> </td> + </tr> + <tr> + <td style="background: #9370db;"> </td> + <td style="text-align: center;"><code>mediumpurple</code></td> + <td><code>#9370db</code></td> + <td style="background: mediumpurple;"> </td> + </tr> + <tr> + <td style="background: #3cb371;"> </td> + <td style="text-align: center;"><code>mediumseagreen</code></td> + <td><code>#3cb371</code></td> + <td style="background: mediumseagreen;"> </td> + </tr> + <tr> + <td style="background: #7b68ee;"> </td> + <td style="text-align: center;"><code>mediumslateblue</code></td> + <td><code>#7b68ee</code></td> + <td style="background: mediumslateblue;"> </td> + </tr> + <tr> + <td style="background: #00fa9a;"> </td> + <td style="text-align: center;"><code>mediumspringgreen</code></td> + <td><code>#00fa9a</code></td> + <td style="background: mediumspringgreen;"> </td> + </tr> + <tr> + <td style="background: #48d1cc;"> </td> + <td style="text-align: center;"><code>mediumturquoise</code></td> + <td><code>#48d1cc</code></td> + <td style="background: mediumturquoise;"> </td> + </tr> + <tr> + <td style="background: #c71585;"> </td> + <td style="text-align: center;"><code>mediumvioletred</code></td> + <td><code>#c71585</code></td> + <td style="background: mediumvioletred;"> </td> + </tr> + <tr> + <td style="background: #191970;"> </td> + <td style="text-align: center;"><code>midnightblue</code></td> + <td><code>#191970</code></td> + <td style="background: midnightblue;"> </td> + </tr> + <tr> + <td style="background: #f5fffa;"> </td> + <td style="text-align: center;"><code>mintcream</code></td> + <td><code>#f5fffa</code></td> + <td style="background: mintcream;"> </td> + </tr> + <tr> + <td style="background: #ffe4e1;"> </td> + <td style="text-align: center;"><code>mistyrose</code></td> + <td><code>#ffe4e1</code></td> + <td style="background: mistyrose;"> </td> + </tr> + <tr> + <td style="background: #ffe4b5;"> </td> + <td style="text-align: center;"><code>moccasin</code></td> + <td><code>#ffe4b5</code></td> + <td style="background: moccasin;"> </td> + </tr> + <tr> + <td style="background: #ffdead;"> </td> + <td style="text-align: center;"><code>navajowhite</code></td> + <td><code>#ffdead</code></td> + <td style="background: navajowhite;"> </td> + </tr> + <tr> + <td style="background: #fdf5e6;"> </td> + <td style="text-align: center;"><code>oldlace</code></td> + <td><code>#fdf5e6</code></td> + <td style="background: oldlace;"> </td> + </tr> + <tr> + <td style="background: #6b8e23;"> </td> + <td style="text-align: center;"><code>olivedrab</code></td> + <td><code>#6b8e23</code></td> + <td style="background: olivedrab;"> </td> + </tr> + <tr> + <td style="background: #ff4500;"> </td> + <td style="text-align: center;"><code>orangered</code></td> + <td><code>#ff4500</code></td> + <td style="background: orangered;"> </td> + </tr> + <tr> + <td style="background: #da70d6;"> </td> + <td style="text-align: center;"><code>orchid</code></td> + <td><code>#da70d6</code></td> + <td style="background: orchid;"> </td> + </tr> + <tr> + <td style="background: #eee8aa;"> </td> + <td style="text-align: center;"><code>palegoldenrod</code></td> + <td><code>#eee8aa</code></td> + <td style="background: palegoldenrod;"> </td> + </tr> + <tr> + <td style="background: #98fb98;"> </td> + <td style="text-align: center;"><code>palegreen</code></td> + <td><code>#98fb98</code></td> + <td style="background: palegreen;"> </td> + </tr> + <tr> + <td style="background: #afeeee;"> </td> + <td style="text-align: center;"><code>paleturquoise</code></td> + <td><code>#afeeee</code></td> + <td style="background: paleturquoise;"> </td> + </tr> + <tr> + <td style="background: #db7093;"> </td> + <td style="text-align: center;"><code>palevioletred</code></td> + <td><code>#db7093</code></td> + <td style="background: palevioletred;"> </td> + </tr> + <tr> + <td style="background: #ffefd5;"> </td> + <td style="text-align: center;"><code>papayawhip</code></td> + <td><code>#ffefd5</code></td> + <td style="background: papayawhip;"> </td> + </tr> + <tr> + <td style="background: #ffdab9;"> </td> + <td style="text-align: center;"><code>peachpuff</code></td> + <td><code>#ffdab9</code></td> + <td style="background: peachpuff;"> </td> + </tr> + <tr> + <td style="background: #cd853f;"> </td> + <td style="text-align: center;"><code>peru</code></td> + <td><code>#cd853f</code></td> + <td style="background: peru;"> </td> + </tr> + <tr> + <td style="background: #ffc0cb;"> </td> + <td style="text-align: center;"><code>pink</code></td> + <td><code>#ffc0cb</code></td> + <td style="background: pink;"> </td> + </tr> + <tr> + <td style="background: #dda0dd;"> </td> + <td style="text-align: center;"><code>plum</code></td> + <td><code>#dda0dd</code></td> + <td style="background: plum;"> </td> + </tr> + <tr> + <td style="background: #b0e0e6;"> </td> + <td style="text-align: center;"><code>powderblue</code></td> + <td><code>#b0e0e6</code></td> + <td style="background: powderblue;"> </td> + </tr> + <tr> + <td style="background: #bc8f8f;"> </td> + <td style="text-align: center;"><code>rosybrown</code></td> + <td><code>#bc8f8f</code></td> + <td style="background: rosybrown;"> </td> + </tr> + <tr> + <td style="background: #4169e1;"> </td> + <td style="text-align: center;"><code>royalblue</code></td> + <td><code>#4169e1</code></td> + <td style="background: royalblue;"> </td> + </tr> + <tr> + <td style="background: #8b4513;"> </td> + <td style="text-align: center;"><code>saddlebrown</code></td> + <td><code>#8b4513</code></td> + <td style="background: saddlebrown;"> </td> + </tr> + <tr> + <td style="background: #fa8072;"> </td> + <td style="text-align: center;"><code>salmon</code></td> + <td><code>#fa8072</code></td> + <td style="background: salmon;"> </td> + </tr> + <tr> + <td style="background: #f4a460;"> </td> + <td style="text-align: center;"><code>sandybrown</code></td> + <td><code>#f4a460</code></td> + <td style="background: sandybrown;"> </td> + </tr> + <tr> + <td style="background: #2e8b57;"> </td> + <td style="text-align: center;"><code>seagreen</code></td> + <td><code>#2e8b57</code></td> + <td style="background: seagreen;"> </td> + </tr> + <tr> + <td style="background: #fff5ee;"> </td> + <td style="text-align: center;"><code>seashell</code></td> + <td><code>#fff5ee</code></td> + <td style="background: seashell;"> </td> + </tr> + <tr> + <td style="background: #a0522d;"> </td> + <td style="text-align: center;"><code>sienna</code></td> + <td><code>#a0522d</code></td> + <td style="background: sienna;"> </td> + </tr> + <tr> + <td style="background: #87ceeb;"> </td> + <td style="text-align: center;"><code>skyblue</code></td> + <td><code>#87ceeb</code></td> + <td style="background: skyblue;"> </td> + </tr> + <tr> + <td style="background: #6a5acd;"> </td> + <td style="text-align: center;"><code>slateblue</code></td> + <td><code>#6a5acd</code></td> + <td style="background: slateblue;"> </td> + </tr> + <tr> + <td style="background: #708090;"> </td> + <td style="text-align: center;"><code>slategray</code></td> + <td><code>#708090</code></td> + <td style="background: slategray;"> </td> + </tr> + <tr> + <td style="background: #708090;"> </td> + <td style="text-align: center;"><code>slategrey</code></td> + <td><code>#708090</code></td> + <td style="background: slategrey;"> </td> + </tr> + <tr> + <td style="background: #fffafa;"> </td> + <td style="text-align: center;"><code>snow</code></td> + <td><code>#fffafa</code></td> + <td style="background: snow;"> </td> + </tr> + <tr> + <td style="background: #00ff7f;"> </td> + <td style="text-align: center;"><code>springgreen</code></td> + <td><code>#00ff7f</code></td> + <td style="background: springgreen;"> </td> + </tr> + <tr> + <td style="background: #4682b4;"> </td> + <td style="text-align: center;"><code>steelblue</code></td> + <td><code>#4682b4</code></td> + <td style="background: steelblue;"> </td> + </tr> + <tr> + <td style="background: #d2b48c;"> </td> + <td style="text-align: center;"><code>tan</code></td> + <td><code>#d2b48c</code></td> + <td style="background: tan;"> </td> + </tr> + <tr> + <td style="background: #d8bfd8;"> </td> + <td style="text-align: center;"><code>thistle</code></td> + <td><code>#d8bfd8</code></td> + <td style="background: thistle;"> </td> + </tr> + <tr> + <td style="background: #ff6347;"> </td> + <td style="text-align: center;"><code>tomato</code></td> + <td><code>#ff6347</code></td> + <td style="background: tomato;"> </td> + </tr> + <tr> + <td style="background: #40e0d0;"> </td> + <td style="text-align: center;"><code>turquoise</code></td> + <td><code>#40e0d0</code></td> + <td style="background: turquoise;"> </td> + </tr> + <tr> + <td style="background: #ee82ee;"> </td> + <td style="text-align: center;"><code>violet</code></td> + <td><code>#ee82ee</code></td> + <td style="background: violet;"> </td> + </tr> + <tr> + <td style="background: #f5deb3;"> </td> + <td style="text-align: center;"><code>wheat</code></td> + <td><code>#f5deb3</code></td> + <td style="background: wheat;"> </td> + </tr> + <tr> + <td style="background: #f5f5f5;"> </td> + <td style="text-align: center;"><code>whitesmoke</code></td> + <td><code>#f5f5f5</code></td> + <td style="background: whitesmoke;"> </td> + </tr> + <tr> + <td style="background: #9acd32;"> </td> + <td style="text-align: center;"><code>yellowgreen</code></td> + <td><code>#9acd32</code></td> + <td style="background: yellowgreen;"> </td> + </tr> + <tr> + <td>{{SpecName("CSS4 Colors")}}</td> + <td style="background: #639;"> </td> + <td style="text-align: center;"><code>rebeccapurple</code></td> + <td><code>#663399</code></td> + <td style="background: rebeccapurple;"> </td> + </tr> + </tbody> +</table> + +<p>El color <code>rebeccapurple</code> es equivalente al color <code>#639</code>, y se puede encontrar información adicional sobre por qué fue introducidoa en el blog Codepen blog en un post realizado por Trezy "<a href="http://codepen.io/trezy/blog/honoring-a-great-man">Honoring a Great Man</a>."</p> + +<h3 id="Palabra_clave_transparent"><code>Palabra clave transparent</code></h3> + +<p>La palaba <code>transparent</code> 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 <code>rgba(0,0,0,0)</code>.</p> + +<div class="note"><strong>Nota histórica</strong><br> +La palabra clave <code>transparent</code> 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.<br> +<br> +Con el soporte de la opacidad que nos proporcionan los <a class="external" href="http://en.wikipedia.org/wiki/Alpha_compositing" title="http://en.wikipedia.org/wiki/Alpha_compositing">alpha channels</a>, <code>transparent fue redefinido como un color verdadero más en </code>CSS Nivel 3 permitiendo su use en cualquier sitio donde de requiera un valor<code><color></code> , como la propiedad {{Cssxref("color")}}.</div> + +<h3 id="Palabra_clave_currentColor"><code>Palabra clave currentColor</code></h3> + +<p>La palabra clave <code>currentColor</code> 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.</p> + +<p>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 <code>inherit</code> en estos elementos, si es que la hubiera.</p> + +<h4 id="Ejemplo">Ejemplo</h4> + +<p>El color de la una line (un div relleno de color) se adapta al color de su propiedad {Cssxref("color")}} , heredada de su padre.</p> + +<div style="width: 50%;"> +<h5 id="Live_example_1">Live example 1</h5> + +<pre class="brush: html"><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> + Algo más de texto +</div> +</pre> + +<p>{{EmbedLiveSample('Live_example_1')}}</p> + +<h5 id="Live_example_2">Live example 2</h5> + +<pre class="brush: html"><div style="color:blue; border-bottom: 1px dashed currentcolor;"> + 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> </pre> + +<p>{{EmbedLiveSample('Live_example_2')}}</p> +</div> + +<h3 id="rgb()"><a id="rgb" name="rgb"><code>rgb()</code></a></h3> + +<p>Los colores puede ser definidos usando el modelo RGB (rojo-verde-azul) de dos maneras:ways:</p> + +<dl> + <dt>Notación Hexadecimal <code>#RRGGBB</code> ay <code>#RGB</code></dt> + <dd> + <ul style="margin-bottom: 0;"> + <li>"<code>#</code>", seguido de seis caracteres hexadecimales (0-9, A-F).</li> + <li>"<code>#</code>", seguido de tres caracteres hexadecimales (0-9, A-F).</li> + </ul> + La notación de tres dígitos (<code>#RGB</code>) y la de seis (<code>#RRGGBB</code>) son iguales.<br> + Por ejemplo, <code>#f03</code> y <code>#ff0033</code> representan el mismo color.</dd> + <dt>Notación funcional <code>rgb(R,G,B)</code></dt> + <dd>"<code>rgb</code>", seguido por tres valores {{cssxref("<integer>")}} o tres {{cssxref("<percentage>")}} values.<br> + El número entero 255 representa el 100%, y F o FF en notación hexadecimal.</dd> +</dl> + +<pre class="eval">/* Todos estos ejemplos son el mismo color RGB: */ + + #f03 + #F03 + #ff0033 + #FF0033 + rgb(255,0,51) + rgb(255, 0, 51) + <s>rgb(255, 0, 51.2)</s> /* ¡ERROR! No uses número decimales , usa enteros*/ + rgb(100%,0%,20%) + rgb(100%, 0%, 20%) + <s>rgb(100%, 0, 20%)</s> /* ¡ERROR! No mezcles notaciones de enteros y de porcentajes*/ +</pre> + +<h3 id="hsl()"><a id="hsl" name="hsl"><code>hsl()</code></a></h3> + +<p>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.</p> + +<p><strong>El tono (Hue) </strong>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 <strong>rojo=0=360</strong>, y los demas colores están dispersos por el círculo, <strong>verde=120</strong>, <strong>azul=240</strong>, etc. Al ser un ánguilo implítamente -120=240 y 480=120.</p> + +<p>La saturación y el brillo son representados por porcentajes.<br> + <code>100%</code> es <strong>saturacion </strong>completa, y <code>0%</code> es una sombra de gris..<br> + <code>100%</code> <strong>brillo</strong> es blanco, <code>0%</code> negro, y <code>50%</code> es brillo "normal".</p> + +<pre class="brush: css" style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsl(0, 100%,50%) <span style="background-color: hsl(0,100%,50%);"> /* red */ </span> +hsl(30, 100%,50%) <span style="background: hsl(30,100%,50%);"> </span> +hsl(60, 100%,50%) <span style="background: hsl(60,100%,50%);"> </span> +hsl(90, 100%,50%) <span style="background: hsl(90,100%,50%);"> </span> +hsl(120,100%,50%) <span style="background: hsl(120,100%,50%);"> /* green */ </span> +hsl(150,100%,50%) <span style="background: hsl(150,100%,50%);"> </span> +hsl(180,100%,50%) <span style="background: hsl(180,100%,50%);"> </span> +hsl(210,100%,50%) <span style="background: hsl(210,100%,50%);"> </span> +hsl(240,100%,50%) <span style="background: hsl(240,100%,50%);"> /* blue */ </span> +hsl(270,100%,50%) <span style="background: hsl(270,100%,50%);"> </span> +hsl(300,100%,50%) <span style="background: hsl(300,100%,50%);"> </span> +hsl(330,100%,50%) <span style="background: hsl(330,100%,50%);"> </span> +hsl(360,100%,50%) <span style="background: hsl(360,100%,50%);"> /* red */ </span> + +hsl(120,100%,25%) <span style="background: hsl(120,100%,25%);"> /* dark green */ </span> +hsl(120,100%,50%) <span style="background: hsl(120,100%,50%);"> /* green */ </span> +hsl(120,100%,75%) <span style="background: hsl(120,100%,75%);"> /* light green */ </span> + +hsl(120,100%,50%) <span style="background: hsl(120,100%,50%);"> /* green */ </span> +hsl(120, 67%,50%) <span style="background: hsl(120,67%,50%);"> </span> +hsl(120, 33%,50%) <span style="background: hsl(120,33%,50%);"> </span> +hsl(120, 0%,50%) <span style="background: hsl(120,0%,50%);"> </span> + +hsl(120, 60%,70%) <span style="background: hsl(120,60%,70%);"> /* pastel green */ </span> +</pre> + +<h3 id="rgba()"><a id="rgba" name="rgba"><code>rgba()</code></a></h3> + +<p>Podemos definir los colores con el modelo Rojo (red) - Verde (green) - Azul (blue) - alpha (RGBa) usando la notación funcional <code>rgba()</code>. RGBa amplia el modelo RGA añadiendo un canal alfa, permitiendo de esta manera especificar la opacidad de un color.<br> + <strong>a</strong> representa opacidad: 0=transparente; 1=opaco;</p> + +<pre class="brush: css">rgba(255,0,0,0.1) <span style="background: rgba(255,0,0,0.1);"> /* 10% opaque red */ </span> +rgba(255,0,0,0.4) <span style="background: rgba(255,0,0,0.4);"> /* 40% opaque red */ </span> +rgba(255,0,0,0.7) <span style="background: rgba(255,0,0,0.7);"> /* 70% opaque red */ </span> +rgba(255,0,0, 1) <span style="background: rgba(255,0,0,1);"> /* full opaque red */ </span> +</pre> + +<h3 id="hsla()"><a id="hsla" name="hsla"><code>hsla()</code></a></h3> + +<p>Podemos definir los colores usando el modelo saturación tono (hue) - (saturation) - brillo (lightness) (HSLa) usando lla notación funcional <code>hsla()</code>. HSLa amplía el modelo HSL incluyendo el canal alfa, permitiendo de esta manera especificar la opacidad de un color.<br> + <strong>a</strong> es la opacidad: 0=transparente; 1=opaco;</p> + +<pre class="brush: css" style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsla(240,100%,50%,0.05) <span style="background: hsla(240,100%,50%,0.05);"> /* 5% opaque blue */ </span> +hsla(240,100%,50%, 0.4) <span style="background: hsla(240,100%,50%,0.4);"> /* 40% opaque blue */ </span> +hsla(240,100%,50%, 0.7) <span style="background: hsla(240,100%,50%,0.7);"> /* 70% opaque blue */ </span> +hsla(240,100%,50%, 1) <span style="background: hsla(240,100%,50%,1);"> /* full opaque blue */ </span> +</pre> + +<h3 id="Colores_de_Sistema">Colores de Sistema</h3> + +<p>No todos los colores de sistema son soportados por todos los sistemas. {{deprecated_inline}} para usar en páginas web públicas..</p> + +<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0pt 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 15em; background: #eee; -webkit-columns: 15em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;"> + <dt>ActiveBorder</dt> + <dd>Borde de la ventana activa</dd> + <dt>ActiveCaption</dt> + <dd>Título de la ventana activa. Deb usarse con <code>CaptionText</code> como color de fondo</dd> + <dt>AppWorkspace</dt> + <dd>Color de fondo para el interfaz de múltiples documentos.</dd> + <dt>Background</dt> + <dd>Fondo de escritorio.</dd> + <dt>ButtonFace</dt> + <dd>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 <code>ButtonText</code> .</dd> + <dt>ButtonHighlight</dt> + <dd>The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.</dd> + <dt>ButtonShadow</dt> + <dd>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.</dd> + <dt>ButtonText</dt> + <dd>Text on push buttons. Should be used with the <code>ButtonFace</code> or <code>ThreeDFace</code> background color.</dd> + <dt>CaptionText</dt> + <dd>Text in caption, size box, and scrollbar arrow box. Should be used with the <code>ActiveCaption</code> background color.</dd> + <dt>GrayText</dt> + <dd>Gris para el texto deshabilitado:</dd> + <dt>Highlight</dt> + <dd>Elemento(s) seleccionados en un control. Debe ser usado con el color de frente <code>HighlightText.</code></dd> + <dt>HighlightText</dt> + <dd>Texto de los elemento(s) seleccionados en un control. Debe usar con el color de fondo <code>Highlight</code>.</dd> + <dt>InactiveBorder</dt> + <dd>Borde de ventana inactivo.</dd> + <dt>InactiveCaption</dt> + <dd>Inactive window caption. Should be used with the <code>InactiveCaptionText</code> foreground color.</dd> + <dt>InactiveCaptionText</dt> + <dd>Color of text in an inactive caption. Should be used with the <code>InactiveCaption</code> background color.</dd> + <dt>InfoBackground</dt> + <dd>Color de foBackground color for tooltip controls. Should be used with the <code>InfoText</code> foreground color.</dd> + <dt>InfoText</dt> + <dd>Text color for tooltip controls. Should be used with the <code>InfoBackground</code> background color.</dd> + <dt>Menu</dt> + <dd>Fondo del menú. Debe ser usado Menu background. Should be used with the <code>MenuText</code> or <code>-moz-MenuBarText</code> foreground color.</dd> + <dt>MenuText</dt> + <dd>Texto en el menú. Debe ser usado Text in menus. Should be used with the <code>Menu</code> background color.</dd> + <dt>Scrollbar</dt> + <dd>Color de fondo para las barras de scroll.</dd> + <dt>ThreeDDarkShadow</dt> + <dd>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.</dd> + <dt>ThreeDFace</dt> + <dd>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 <code>ButtonText</code> foreground color.</dd> + <dt>ThreeDHighlight</dt> + <dd>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<br> + concentric layers of surrounding border.</dd> + <dt>ThreeDLightShadow</dt> + <dd>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<br> + concentric layers of surrounding border.</dd> + <dt>ThreeDShadow</dt> + <dd>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.</dd> + <dt>Window</dt> + <dd>Fondo de las ventanas. Debe usarse con el color de frente <code>WindowText</code>.</dd> + <dt>WindowFrame</dt> + <dd>Marco de ventana</dd> + <dt>WindowText</dt> + <dd>Texto en las ventanas.Debe usarse con el color de fono de ventana.</dd> +</dl> + +<h3 id="Extensiones_de_Mozilla_al_Sistema_de_Colores">Extensiones de Mozilla al Sistema de Colores</h3> + +<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 17em; background: #eee; -webkit-columns: 17em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;"> + <dt>-moz-ButtonDefault</dt> + <dd>The border color that goes around buttons that represent the default action for a dialog box.</dd> + <dt>-moz-ButtonHoverFace</dt> + <dd>The background color of a button that the mouse pointer is over (which would be <code>ThreeDFace</code> or <code>ButtonFace</code> when the mouse pointer is not over it). Should be used with the <code>-moz-ButtonHoverText</code> foreground color.</dd> + <dt>-moz-ButtonHoverText</dt> + <dd>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 <code>-moz-ButtonHoverFace background</code> color.</dd> + <dt>-moz-CellHighlight</dt> + <dd>Background color for selected item in a tree widget. Should be used with the <code>-moz-CellHighlightText</code> foreground color. See also <code>-moz-html-CellHighlight</code>.</dd> + <dt>-moz-CellHighlightText</dt> + <dd>Text color for a selected item in a tree. Should be used with the <code>-moz-CellHighlight background</code> color. See also <code>-moz-html-CellHighlightText</code>.</dd> + <dt>-moz-Combobox</dt> + <dd>{{Gecko_minversion_inline("1.9.2")}} Background color for combo-boxes. Should be used with the <code>-moz-ComboboxText</code> foreground color. In versions prior to 1.9.2, use <code>-moz-Field</code> instead.</dd> + <dt>-moz-ComboboxText</dt> + <dd>{{Gecko_minversion_inline("1.9.2")}} Text color for combo-boxes. Should be used with the <code>-moz-Combobox</code> background color. In versions prior to 1.9.2, use <code>-moz-FieldText</code> instead.</dd> + <dt>-moz-Dialog</dt> + <dd>Color de fondo para cuadros de diálogo. Debe usarse con el color de frente <code>-moz-DialogText</code></dd> + <dt>-moz-DialogText</dt> + <dd>Text color for dialog boxes. Should be used with the <code>-moz-Dialog</code> background color.</dd> + <dt>-moz-dragtargetzone</dt> + <dt>-moz-EvenTreeRow</dt> + <dd>{{gecko_minversion_inline("1.9")}} Background color for even-numbered rows in a tree. Should be used with the <code>-moz-FieldText</code> foreground color. In Gecko versions prior to 1.9, use <code>-moz-Field</code>. See also <code>-moz-OddTreeRow</code>.</dd> + <dt>-moz-Field</dt> + <dd>Text field background color. Should be used with the <code>-moz-FieldText</code> foreground color.</dd> + <dt>-moz-FieldText</dt> + <dd>Text field text color. Should be used with the <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code>, or <code>-moz-OddTreeRow</code> background color.</dd> + <dt>-moz-html-CellHighlight</dt> + <dd>{{gecko_minversion_inline("1.9")}} Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the <code>-moz-html-CellHighlightText</code> foreground color. Prior to Gecko 1.9, use <code>-moz-CellHighlight</code>.</dd> + <dt>-moz-html-CellHighlightText</dt> + <dd>{{gecko_minversion_inline("1.9")}} Text color for highlighted items in HTML {{HTMLElement("select")}}s. Should be used with the <code>-moz-html-CellHighlight</code> background color. Prior to Gecko 1.9, use <code>-moz-CellHighlightText</code>.</dd> + <dt>-moz-mac-accentdarkestshadow</dt> + <dt>-moz-mac-accentdarkshadow</dt> + <dt>-moz-mac-accentface</dt> + <dt>-moz-mac-accentlightesthighlight</dt> + <dt>-moz-mac-accentlightshadow</dt> + <dt>-moz-mac-accentregularhighlight</dt> + <dt>-moz-mac-accentregularshadow</dt> + <dt>-moz-mac-chrome-active</dt> + <dd>{{Gecko_minversion_inline("1.9.1")}}</dd> + <dt>-moz-mac-chrome-inactive</dt> + <dd>{{Gecko_minversion_inline("1.9.1")}}</dd> + <dt>-moz-mac-focusring</dt> + <dt>-moz-mac-menuselect</dt> + <dt>-moz-mac-menushadow</dt> + <dt>-moz-mac-menutextselect</dt> + <dt>-moz-MenuHover</dt> + <dd>Background color for hovered menu items. Often similar to <code>Highlight</code>. Should be used with the <code>-moz-MenuHoverText</code> or <code>-moz-MenuBarHoverText</code> foreground color.</dd> + <dt>-moz-MenuHoverText</dt> + <dd>Text color for hovered menu items. Often similar to <code>HighlightText</code>. Should be used with the <code>-moz-MenuHover</code> background color.</dd> + <dt>-moz-MenuBarText</dt> + <dd>{{Gecko_minversion_inline("1.9.2")}} Text color in menu bars. Often similar to <code>MenuText</code>. Should be used on top of <code>Menu</code> background.</dd> + <dt>-moz-MenuBarHoverText</dt> + <dd>Color for hovered text in menu bars. Often similar to <code>-moz-MenuHoverText</code>. Should be used on top of <code>-moz-MenuHover</code> background.</dd> + <dt>-moz-nativehyperlinktext</dt> + <dd>{{Gecko_minversion_inline("1.9.1")}} Default platform hyperlink color.</dd> + <dt>-moz-OddTreeRow</dt> + <dd>{{gecko_minversion_inline("1.9")}} Background color for odd-numbered rows in a tree. Should be used with the <code>-moz-FieldText</code> foreground color. In Gecko versions prior to 1.9, use <code>-moz-Field</code>. See also <code>-moz-EvenTreeRow</code>.</dd> + <dt>-moz-win-communicationstext</dt> + <dd>{{gecko_minversion_inline("1.9")}} Should be used for text in objects with <code>{{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;</code>.</dd> + <dt>-moz-win-mediatext</dt> + <dd>{{gecko_minversion_inline("1.9")}} Should be used for text in objects with <code>{{cssxref("-moz-appearance")}}: -moz-win-media-toolbox</code>.</dd> +</dl> + +<h3 id="Extensiones_de_Mozilla_a_las_Preferencias_de_Color">Extensiones de Mozilla a las Preferencias de Color</h3> + +<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; background: #eee;"> + <dt>-moz-activehyperlinktext</dt> + <dd>Preferencias de usuario para el color de texto de los enlaces activos. Debe ser usado con el color de fondo por defecto del documento.</dd> + <dt>-moz-default-background-color</dt> + <dd>{{Gecko_minversion_inline("5.0")}} Preferencias de usuario para el color de fondo del documento.</dd> + <dt>-moz-default-color</dt> + <dd>{{Gecko_minversion_inline("5.0")}} Preferencias de usuario para el color del texto.</dd> + <dt>-moz-hyperlinktext</dt> + <dd>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.</dd> + <dt>-moz-visitedhyperlinktext</dt> + <dd>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.</dd> +</dl> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Colors', '#colorunits', '<color>')}}</td> + <td>{{Spec2('CSS4 Colors')}}</td> + <td>Añadido el color <code>rebeccapurple</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td>Colores de sistema depreciados; añadidos colores SVG; añadidos las notaciones funcionales <code>rgba()</code>, <code>hsl()</code>, <code>hsla().</code></td> + </tr> + <tr style="vertical-align: top;"> + <td style="vertical-align: top;">{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}</td> + <td style="vertical-align: top;">{{Spec2('CSS2.1')}}</td> + <td style="vertical-align: top;">Añadidos el naranja y los colores de sistema.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{SpecName('CSS1', '#color-units', '<color>')}}</td> + <td style="vertical-align: top;">{{Spec2('CSS1')}}</td> + <td style="vertical-align: top;">Definición Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>palabras clave de colores</td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>3.0 <sup>[1]</sup></td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>#RRGGBB</code> | <code>#RGB</code></td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>rgb()</code></td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>hsl()</code></td> + <td>1.0</td> + <td>1.0 (1.5)</td> + <td>9.0</td> + <td>9.5</td> + <td>3.1 (525)</td> + </tr> + <tr> + <td><code>rgba()</code></td> + <td>1.0</td> + <td>3.0 (1.9)</td> + <td>9.0</td> + <td>10.0</td> + <td>3.1 (525)</td> + </tr> + <tr> + <td><code>hsla()</code></td> + <td>1.0</td> + <td>3.0 (1.9)</td> + <td>9.0</td> + <td>10.0</td> + <td>3.1 (525)</td> + </tr> + <tr> + <td><code>currentColor</code></td> + <td>1.0</td> + <td>1.5 (1.8)</td> + <td>9.0</td> + <td>9.5</td> + <td>4.0 (528)</td> + </tr> + <tr> + <td><code>transparent</code></td> + <td>1.0</td> + <td>3.0 (1.9)</td> + <td>9.0 <sup>[2]</sup></td> + <td>10.0</td> + <td>3.1 (525)</td> + </tr> + <tr> + <td><code>rebeccapurple</code></td> + <td>38.0</td> + <td>{{CompatGeckoDesktop("33")}}</td> + <td>11</td> + <td>25.0</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>rgba()</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>rebeccapurple</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("33")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Los colores 'e'-grey (con una e) (<code>grey</code>, <code>darkgrey</code>, <code>darkslategrey</code>, <code>dimgrey</code>, <code>lightgrey</code>, <code>lightslategrey</code>) sólo son soportados a partir de IE 8.0. De IE 3 a IE 7 sólo son soportadas las variantes con 'a': <code>gray</code>, <code>darkgray</code>, <code>darkslategray</code>, <code>dimgray</code>, <code>lightgray</code>, <code>lightslategray</code>.</p> + +<p>[2] IE 7-8 soporta la palabra clave <code>transparent</code> sólo para {{Cssxref("background")}} y {{cssxref("border")}}. <code>color: transparent;</code> es equivalente a negro en IE. IE6 renderiza también como negros los bordes transparentes.</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>La propiedad {{Cssxref("opacity")}} , que permite definir la transparencia a nivel de elemento.</li> + <li>Las propiedades {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}, {{Cssxref("box-shadow")}}.</li> +</ul> diff --git a/files/es/web/css/column-count/index.html b/files/es/web/css/column-count/index.html new file mode 100644 index 0000000000..cc894efa4e --- /dev/null +++ b/files/es/web/css/column-count/index.html @@ -0,0 +1,95 @@ +--- +title: column-count +slug: Web/CSS/column-count +tags: + - CSS + - CSS Multicolumna + - Propiedad CSS + - Referencia +translation_of: Web/CSS/column-count +--- +<div>{{CSSRef}}</div> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>column-count</code></strong> divide el contenido de un elemento en el número de columnas indicado.</p> + +<div>{{EmbedInteractiveExample("pages/css/column-count.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* Keyword value */ +column-count: auto; + +/* <integer> value */ +column-count: 3; + +/* Global values */ +column-count: inherit; +column-count: initial; +column-count: unset;</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>El número de columnas es determinado por otras propiedades CSS, como {{cssxref("column-width")}}.</dd> + <dt><code>{{cssxref("<integer>")}}</code></dt> + <dd>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 <code>auto</code>, se limitará a indicar el número máximo permitido de columnas.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="content-box"> + 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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.content-box { + column-count: 3; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Example', 'auto', 120)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Multicol', '#column-count', 'column-count')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("css.properties.column-count")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño con columnas múltiples</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">Conceptos básicos de Multicol</a></li> +</ul> diff --git a/files/es/web/css/column-span/index.html b/files/es/web/css/column-span/index.html new file mode 100644 index 0000000000..b72bc8859a --- /dev/null +++ b/files/es/web/css/column-span/index.html @@ -0,0 +1,99 @@ +--- +title: column-span +slug: Web/CSS/column-span +tags: + - CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/column-span +--- +<div>{{CSSRef}}</div> + +<p>La propiedad <strong><code>column-span</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> hace posible que un elemento se extienda sobre todas las columnas cuando su valor se establece a <code>all</code>.</p> + +<div>{{EmbedInteractiveExample("pages/css/column-span.html")}}</div> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +column-span: none; +column-span: all; + +/* Global values */ +column-span: inherit; +column-span: initial; +column-span: unset; +</pre> + +<p>A un elemento que se extiende más de una columna se le llama elemento extendido (<em>spanning element)</em>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La propiedad <code>column-span</code> se especifica como una de las palabras clave listadas a continuación.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>El elemento no se extiende en sobre varias columnas.</dd> + <dt><code>all</code></dt> + <dd>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..</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>En este ejemplo, la cabecera se expande sobre todas las columnas del artículo.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><article> + <h2>My Very Special Columns</h2> + <p>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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">article { + columns: 3; +} + +h2 { + column-span: all; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Example', 'auto', 120)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Multicol', '#column-span', 'column-span')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.properties.column-span")}}</p> diff --git a/files/es/web/css/columnas_css/index.html b/files/es/web/css/columnas_css/index.html new file mode 100644 index 0000000000..949f2eca71 --- /dev/null +++ b/files/es/web/css/columnas_css/index.html @@ -0,0 +1,112 @@ +--- +title: Columnas CSS +slug: Web/CSS/Columnas_CSS +tags: + - CSS + - Referencia CSS + - Visión general +translation_of: Web/CSS/CSS_Columns +--- +<div>{{CSSRef}}</div> + +<p><strong>Columnas CSS</strong> es un módulo de CSS que define un diseño multicolumna, permitiendo indicar cómo debe fluir el contenido a través de las columnas y cómo manejar reglas y separaciones.</p> + +<h2 id="Referencia">Referencia</h2> + +<h3 id="Propiedades_CSS">Propiedades CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("break-after")}}</li> + <li>{{cssxref("break-before")}}</li> + <li>{{cssxref("break-inside")}}</li> + <li>{{cssxref("column-count")}}</li> + <li>{{cssxref("column-fill")}}</li> + <li>{{cssxref("column-gap")}}</li> + <li>{{cssxref("column-rule")}}</li> + <li>{{cssxref("column-rule-color")}}</li> + <li>{{cssxref("column-rule-style")}}</li> + <li>{{cssxref("column-rule-width")}}</li> + <li>{{cssxref("column-span")}}</li> + <li>{{cssxref("column-width")}}</li> + <li>{{cssxref("columns")}}</li> +</ul> +</div> + +<h2 id="Guías">Guías</h2> + +<dl> + <dt><a href="/es/docs/Columnas_con_CSS-3">Diseños multicolumna con CSS</a></dt> + <dd>Tutorial paso a paso sobre cómo desarrollar diseños de varias columnas.</dd> +</dl> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Multicol')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}} {{property_prefix('-webkit')}}</td> + <td>{{CompatGeckoDesktop(9)}}{{property_prefix('-moz')}}</td> + <td>10</td> + <td>11.10<br> + 15{{property_prefix('-webkit')}}</td> + <td>3.0 (522){{property_prefix('-webkit')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>2.1{{property_prefix('-webkit')}}</td> + <td>{{compatGeckoMobile(22)}}{{property_prefix('-moz')}}</td> + <td>10</td> + <td>11.5<br> + 32{{property_prefix('-webkit')}}</td> + <td>3.2{{property_prefix('-webkit')}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/comentarios/index.html b/files/es/web/css/comentarios/index.html new file mode 100644 index 0000000000..f09cac662a --- /dev/null +++ b/files/es/web/css/comentarios/index.html @@ -0,0 +1,49 @@ +--- +title: Comentarios +slug: Web/CSS/Comentarios +tags: + - CSS + - Principiante + - Referencia CSS +translation_of: Web/CSS/Comments +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>Los comentarios son usados para añadir notas explicatorias o prevenir que el navegador interprete partes de la hoja de estilos.</p> + +<p>Los comentarios se pueden colocar en cualquier espacio en blanco que se permita en la hoja de estilos.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">/* Comentario */</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="brush:css">/* Comentario de una sola línea */ + +/* +Un comentario +que se extiende +en varias +líneas +*/ +</pre> + +<h2 id="Notas">Notas</h2> + +<p>La sintaxis de comentarios <code>/* */</code> 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 <code><style></code>, se puede usar <code><!-- --></code> 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 <code>/* */</code> estos no pueden ser anidados. En otras palabras, la primera instancia de <code>*/</code> que siga a una instancia de <code>/*</code> cerrará el comentario.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<ul> + <li><a href="http://www.w3.org/TR/CSS21/syndata.html#comments">CSS 2.1 Syntax and basic data types #comments</a></li> +</ul> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/Referencia_CSS">Referencia CSS</a></li> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/es/web/css/comenzando_(tutorial_css)/index.html b/files/es/web/css/comenzando_(tutorial_css)/index.html new file mode 100644 index 0000000000..54997a5f6e --- /dev/null +++ b/files/es/web/css/comenzando_(tutorial_css)/index.html @@ -0,0 +1,40 @@ +--- +title: Comenzando (tutorial CSS) +slug: Web/CSS/Comenzando_(tutorial_CSS) +--- +<p> </p> +<h2 id="Introducción">Introducción</h2> +<p>Este tutorial te introducirá en las Hojas de Estilo en Cascada (CSS).</p> +<p>Este tutorial te guiará a través de las características básicas de CSS con ejemplos prácticos que puedes probar tu mismo desde tu computadora. Está dividido en dos partes.</p> +<ul> <li>La Parte I ilustra las características estándares de CSS que funcionan con los navegadores de Mozilla así como también con la mayoría de navegadores modernos.</li> +</ul> +<ul> <li>La Parte II contiene algunos ejemplos de características básicas que funcionan en Mozilla pero no necesariamente funciona en otros entornos.</li> +</ul> +<p>Este tutorial se base en la <a class=" external" href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">especificación CSS 2.1</a></p> +<h3 id="¿Quienes_deberían_usar_este_tutorial">¿Quienes deberían usar este tutorial?</h3> +<p>Este tutorial es principalmente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia con CSS.</p> +<p>Si eres un principiante en CSS, usa la Parte I de este tutorial para entender y aprender como usar CSS. Luego usa la Parte II para entender el alcance de CSS en Mozilla.</p> +<p>Si conoces algo de CSS, puedes saltarte las partes del tutorial que ya conozcas, y solo usar las partes que te interesan.</p> +<p>Si tienes experiencia con CSS pero no con Mozilla, puedes saltarte a la Parte II.</p> +<h3 id="¿Qué_necesitas_antes_de_empezar">¿Qué necesitas antes de empezar?</h3> +<p>Para obtener el mayor provecho de este tutorial, necesitas un editor para archivos de texto, especialmente para la Parte II, un navegador de Mozilla (Firefox, Camino o SeaMonkey). También debes saber como usarlos de forma básica.</p> +<p>Si no quieres editar archivos, puedes solo leer el tutorial y ver las imágenes, pero es una forma menos efectiva de aprender.</p> +<p>Algunas partes de este tutorial requieren otros programas de Mozilla. Estas partes son opcionales. Si no quieres descargar otros programas de Mozilla, puedes saltarte estas partes.</p> +<ul> <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li> +</ul> +<p><strong>Nota: </strong> CSS provee formas de trabajar con color, así que partes de este tutorial dependen del color. Puedes usar estas partes del tutorial fácilmente si tienes una pantalla a color y puedes visualizar normalmente los colores.</p> +<h3 id="Como_usar_este_tutorial">Como usar este tutorial</h3> +<p>Para usar este tutorial, lee las páginas cuidadosamente y en secuencia. Si te pierdes alguna página, entonces puedes tener dificultades para entender las páginas siguientes.</p> +<p>En cada página, usa la sección <em>Información</em> para entender como funciona CSS. Usa la sección <em>Acción</em> para tratar de usar CSS en tu computadora.</p> +<p>Para probar tu entendimiento, toma los retos al final de cada página. Las soluciones a los retos están enlazados bajo los mismos retos, así que no necesitas mirar las respuestas si no quieres hacerlo.</p> +<p>Para entender CSS con mayor profundidad, lee la información que encuentres en las cajas subtituladas <em>Más detalles</em>. Usa los enlaces allí para encontrar información de referencia acerca de CSS.</p> +<h2 id="Tutorial_Parte_I">Tutorial Parte I</h2> +<p>Una guía de CSS paso a paso.</p> +<ol> <li><strong><a href="/es/CSS/Getting_Started/Que_es_css" title="es/CSS/Getting_Started/Que_es_css">Que es CSS</a></strong></li> <li><a href="/es/CSS/Getting_Started/Por_que_usar_css" title="es/CSS/Getting_Started/Por_que_usar_css"><strong>Por qué usar CSS</strong></a></li> <li><a href="/es/CSS/Getting_Started/Como_funciona_css" title="es/CSS/Getting_Started/Como_funciona_css"><strong>Como funciona CSS</strong></a></li> <li><strong><a href="/es/CSS/Getting_Started/Cascada_y_herencia" title="es/CSS/Getting_Started/Cascada_y_herencia">Cascada y herencia</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Selectores" title="es/CSS/Getting_Started/Selectores">Selectores</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/CSS_legible" title="es/CSS/Getting_Started/CSS_legible">CSS legible</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Estilos_de_texto" title="es/CSS/Getting_Started/Estilos_de_texto">Estilos de texto</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Color" title="es/CSS/Getting_Started/Color">Color</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Contenido" title="es/CSS/Getting_Started/Contenido">Contenido</a> </strong></li> <li><strong><a href="/es/CSS/Getting_Started/Listas" title="es/CSS/Getting_Started/Listas">Listas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Cajas" title="es/CSS/Getting_Started/Cajas">Cajas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Estructura" title="es/CSS/Getting_Started/Estructura">Estructura</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Tablas" title="es/CSS/Getting_Started/Tablas">Tablas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Media" title="es/CSS/Getting_Started/Media">Media</a></strong></li> +</ol> +<h2 id="Tutorial_Parte_II">Tutorial Parte II</h2> +<p>Ejemplos que muestran el alcance de CSS usado con otras tecnologías web y de Mozilla.</p> +<ol> <li><strong><a href="/es/CSS/Getting_Started/Javascript" title="es/CSS/Getting_Started/Javascript">JavaScript</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Graficos_svg" title="es/CSS/Getting_Started/Graficos_svg">Gráficos SVG</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Data_xml" title="es/CSS/Getting_Started/Data_xml">Data XML</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/XBL_bindings" title="es/CSS/Getting_Started/XBL_bindings">XBL bindings</a> </strong></li> <li><strong><a href="/es/CSS/Getting_Started/Interfaces_de_usuario_XUL" title="es/CSS/Getting_Started/Interfaces_de_usuario_XUL">Interfaces de usuario XUL</a></strong></li> +</ol> +<p>{{ CSSTutorialTOC() }}</p> +<p>{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p> diff --git a/files/es/web/css/como_iniciar/index.html b/files/es/web/css/como_iniciar/index.html new file mode 100644 index 0000000000..facb250cb3 --- /dev/null +++ b/files/es/web/css/como_iniciar/index.html @@ -0,0 +1,5 @@ +--- +title: Como iniciar +slug: Web/CSS/Como_iniciar +--- +This page was auto-generated because a user created a sub-page to this page. diff --git a/files/es/web/css/como_iniciar/por_que_usar_css/index.html b/files/es/web/css/como_iniciar/por_que_usar_css/index.html new file mode 100644 index 0000000000..66badd7a3a --- /dev/null +++ b/files/es/web/css/como_iniciar/por_que_usar_css/index.html @@ -0,0 +1,106 @@ +--- +title: Por que usar CSS +slug: Web/CSS/Como_iniciar/Por_que_usar_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p> </p> +<p>Esta página explica por qué los documentos usan CSS. Usas CSS para añadir una hoja de estilos a tu documento de prueba.</p> +<p>Esta es la segunda sección del <a href="/es/CSS/Introducción" title="../../../../es/CSS/Introducci%C3%B3n">tutorial</a>.</p> +<p>Sección anterior: <a href="/es/CSS/Como_iniciar/Que_es_CSS" title="es/CSS/Como_iniciar/Que_es_CSS">Que es CSS</a><br> + Sección siguiente: <a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting Started/How CSS works">How CSS works</a></p> +<h2 id="Información_¿Por_qué_usar_CSS">Información: ¿Por qué usar CSS?</h2> +<p>CSS ayuda a mantener la información de contenido de un documento separado de los detalles de como mostrarlo. Los detalles de como se muestra el documento son conocidos como <em>estilos. </em>Si mantienes los estilos separados del contenido puedes:</p> +<ul> + <li>Evitar duplicación</li> + <li>Hacer el mantenimiento más simple</li> + <li>Usar el mismo contenido con diferentes estilos para diferentes propositos.</li> +</ul> +<table> + <caption> + Ejemplo</caption> + <tbody> + <tr> + <td> + <p>Tu sitio web podría mostrar miles de páginas que se ven similar. Usando CSS, almacenas la información de estilos en archivos comunes que todas las páginas comparten.Cuando un usuario visualiza una página web, el navegador carga la información de estilos junto con el contenido de la página.</p> + <p>Cuando un usuario imprime una página web, podrías proveerle diferente información de estilos que hace que las páginas impresas sean fáciles de leer.</p> + </td> + </tr> + </tbody> +</table> +<p>En general con HTML, usas el lenguaje de marcado para describir la información del contenido del documento, no sus estilos. Usas CSS para especificar sus estilos, no su contenido. (Más adelante en este tutorial, verás algunas excepciones a este acuerdo).</p> +<table> + <caption> + Más detalles</caption> + <tbody> + <tr> + <td> + <p>Un lenguaje de marcado como HTML también provee algunas maneras de especificar estilos.</p> + <p>Por ejemplo en HTML puedes usar una etiqueta <code><b> </code>para hacer acentuar el texto, y puedes especificar un color de fondo de la página en la etiqueta <code><body></code>.</p> + <p>Cuando usas CSS, normalmente evitas usar estas características del lenguaje de marcado así toda la información de estilos de tu documento está en un solo lugar.</p> + </td> + </tr> + </tbody> +</table> +<h2 id="Acción_Creando_una_hoja_de_estilos">Acción: Creando una hoja de estilos</h2> +<ol> + <li>Crea un archivo de texto en el mismo directorio anterior. Este archivo será tu hoja de estilos. Nombrala como: <code>style1.css</code></li> + <li>En tu archivo CSS, copia y pega esta única línea, luego graba el archivo:</li> + <li> + <div> + <pre class="eval">strong {color: red;} +</pre> + </div> + </li> +</ol> +<h3 id="Enlazando_tu_documento_a_tu_hoja_de_estillos">Enlazando tu documento a tu hoja de estillos</h3> +<ol> + <li>Para enlazar tu documento a tu hoja de estilos, edita tu archivo HTML. Añade la línea acentuada aquí:</li> + <li> + <div> + <pre class="eval"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" +"<span class="nowiki">http://www.w3.org/TR/html4/strict.dtd</span>"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; +charset=iso-8859-1"> + <title>Sample document</title> + <strong><link rel="stylesheet" type="text/css" href="style1.css"></strong> + </head> + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </div> + </li> + <li>Graba el archivo y refresca la pantalla del navegador. Esta hoja de estilos hace que las letras inicales sean rojas, como esto: + <table> + <tbody> + <tr> + <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> +<table> + <caption> + Reto</caption> + <tbody> + <tr> + <td>En adición al rojo, CSS permite algunos otros nombres de colores. + <p>Sin mirar la referencia, encuentra cinco o más nombres de colores que funcionen en tu hoja de estilos.</p> + </td> + </tr> + </tbody> +</table> +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Why_use_CSS_colors" title="en/CSS/Getting Started/Challenge solutions#Why use CSS colors">See a solution for the challenge.</a> Ver la solución al reto.</p> +<h2 id="¿Qué_sigue">¿Qué sigue?</h2> +<p>Si tienes alguna dificultad entendiendo esta página, o si tienes comentarios acerca de la misma, por favor contribuye en esta página de <a href="/Talk:en/CSS/Getting_Started/Why_use_CSS%3f" title="Talk:en/CSS/Getting_Started/Why_use_CSS%3f">Discusión</a>.</p> +<p>Ahora que tienes un archivo de ejemplo enlazado a una hoja de estilos separada, estás listo para aprender más acerca de como tu navegador combina ellos cuando muestra el documento: <a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">Como funciona CSS</a>.</p> +<p>{{ CSSTutorialTOC() }}</p> +<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "it": "it/Conoscere_i_CSS/Perch\u00e9_usare_i_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS", "es": "es/CSS/Como_iniciar/Por_que_usar_CSS", "zh-cn": "cn/CSS/Getting_Started/Why_use_CSS" } ) }}</p> diff --git a/files/es/web/css/como_iniciar/que_es_css/index.html b/files/es/web/css/como_iniciar/que_es_css/index.html new file mode 100644 index 0000000000..fb914f0758 --- /dev/null +++ b/files/es/web/css/como_iniciar/que_es_css/index.html @@ -0,0 +1,145 @@ +--- +title: Que es CSS +slug: Web/CSS/Como_iniciar/Que_es_CSS +tags: + - para_revisar +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>En esta página se explica que es CSS. Usted creará un documento simple con el cual trabajará en las próximas páginas del tutorial.</p> + +<p>Esta es la primera sección del tutorial <a href="/es/CSS/Introducción" title="es/CSS/Introducción">Como iniciar</a>.<br> + Siguiente sección: <a href="/es/docs/CSS/Como_iniciar/Por_que_usar_CSS" title="en/CSS/Getting Started/Why use CSS">Por qué usar CSS</a></p> + +<h2 id="Información_¿Qué_es_CSS">Información: ¿Qué es CSS?</h2> + +<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>), traducido literalmente al español, como <em>Hojas de estilo en cascada</em>, es un lenguaje para especificar cómo los documentos se presentan a los usuarios.</p> + +<p>Un <em>documento (document)</em> es una colección de información que está estructurada utilizando un <em>lenguaje de formato (markup language)</em>.</p> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> + <caption>Ejemplos</caption> + <tbody> + <tr> + <td> + <ul> + <li>Una página web como la que estás leyendo, es un documento.<br> + La información que ves en una página web usualmente está estructurada utilizando el lenguaje de formato de documentos de HiperTexto, HTML (HyperText Markup Language).</li> + </ul> + + <ul> + <li>Un cuadro de diálogo en una aplicación Mozilla es un documento.<br> + Los controles de interfaz de usuario que pude ver en los diálogos de control de aplicaciones Mozilla, están estructurados utilizando el lenguaje de formato XUL (XML User-interface Language - Lenguaje XML de interfaces de usuario).</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>En este tutorial, los cuadros con titulo <strong>Más detalles</strong>, como el que está a continuación, contienen información adicional. Si se cuenta con poco tiempo para progresar con el tutorial, entonces pude omitir estos cuadros, quizás retorne a leerlos luego. De lo contrario léalos cuando llegue a ellos y tal vez siga los enlaces que contienen para aprender más.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> + <caption>Más detalles</caption> + <tbody> + <tr> + <td> + <p>Un documento no es lo mismo que un archivo. Y este puede o no estar almacenado en un archivo.</p> + + <p>Por ejemplo, el documento esta leyendo en este momento no está almacenado en un archivo. Cuando su navegador web solicita esta página, el servidor consulta a la base de datos y genera el documento, obteniendo las partes del mismo de diferentes archivos. Sin embargo, en este tutorial se trabajará con documentos que se almacenan en archivos.</p> + + <p>Para más información acerca de documentos y lenguajes de formato, visite otras partes de este sitio web—por ejemplo:</p> + + <table style="background-color: inherit; margin-left: 2em;"> + <tbody> + <tr> + <td><a href="/en/HTML" title="en/HTML">HTML</a></td> + <td>para páginas web</td> + </tr> + <tr> + <td><a href="/en/XML" title="en/XML">XML</a></td> + <td>para documentos estrucurados, en general</td> + </tr> + <tr> + <td><a href="/en/SVG" title="en/SVG">SVG</a></td> + <td>para gráficas</td> + </tr> + <tr> + <td><a href="/en/XUL" title="en/XUL">XUL</a></td> + <td>para interfaces de usuario de Mozilla</td> + </tr> + </tbody> + </table> + + <p>En la parte II de este tutorial podrá ver ejemplos de estos lenguajes de formato.</p> + </td> + </tr> + </tbody> +</table> + +<p><em>Presentar</em> un documento a un usuario significa convertirlo en una forma en que el humano pueda hacer uso de el. Mozilla está diseñado para presentar documentos de manera visual—por ejemplo, en la pantalla de una computadora, en un proyector o en una impresora.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> + <caption>Más detalles</caption> + <tbody> + <tr> + <td>CSS no es sólo para los navegadores web, y no sólo para la presentación visual. En terminos formales CSS, el programa que presenta un documento a un usuario es llamado un <em>agente de usuarios</em> (UA - User Agent). Un navegador es sólo un tipo de UA. Sin embargo, en la parte I de este tutorial, se trabajará únicamente con CSS en un navegador. + <p>Para algunas de las definiciones formales de la terminología relacionda con CSS, consulte el enlace <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definiciones</a> (en ingles) en la especificación CSS.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Acción_Crear_un_documento">Acción: Crear un documento</h2> + +<ol> + <li>Utilice su computador para crear un nuevo directorio y un nuevo archivo de texto allí. El archivo contendrá el documento. + <ol> + <li>Copie y pegue el código HTML que se muestra a continuación. Guarde el archivo con el nombre <code>doc1.html</code> + + <div style="width: 40em;"> + <pre class="deki-transform"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" +"http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; + charset=iso-8859-1"> + <title>Sample document</title> + </head> + + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + <strong>B</strong>heets + </p> + </body> +</html> +</pre> + </div> + </li> + </ol> + </li> + <li>En el navegador web, abra una nueva pestaña o una nueva ventana, y abra el archivo allí. + <p>Debe observar un texto con las letras iniciales en negrita, así:</p> + + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> + </tr> + </tbody> + </table> + + <p>Lo que ve en el navegador puede no lucir exactamente como en la imagen, debido a la configuración de su navegador web y esta wiki. Si existen algunas diferencias en el tipo de fuente, espaciado y los colores que ve, no son importantes.</p> + </li> +</ol> + +<h2 id="¿Qué_sigue">¿Qué sigue?</h2> + +<p>Si ha tenido dificultad para entender esta página, o si tiene comentarios acerca de ella, por favor contribuya con esta en la página de <a href="/Talk:en/CSS/Getting_Started/What_is_CSS%3f" title="Talk:en/CSS/Getting_Started/What_is_CSS?">Discusiones</a>.</p> + +<p>El documento aún no utiliza CSS. En la siguiente página se utilizará CSS para especificar el estilo: <strong><a href="/es/docs/CSS/Como_iniciar/Por_que_usar_CSS" title="en/CSS/Getting_Started/Why_use_CSS?">¿Por qué utilizar CSS?</a></strong></p> + +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Czym_jest_CSS", "pt": "pt/CSS/Como_come\u00e7ar/O_que_\u00e9_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS", "es": "es/CSS/Como_iniciar/Que_es_CSS" } ) }}</p> diff --git a/files/es/web/css/content/index.html b/files/es/web/css/content/index.html new file mode 100644 index 0000000000..624611a97e --- /dev/null +++ b/files/es/web/css/content/index.html @@ -0,0 +1,58 @@ +--- +title: content +slug: Web/CSS/content +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/content +--- +<p> << <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a> +</p> +<h3 id="Resumen" name="Resumen"> Resumen </h3> +<p>La propiedad <code>content</code> se usa junto con los pseudo-elementos <code>:before</code> y <code>:after</code> para generar contenido que se adjunta antes o después de un selector CSS. +</p> +<h3 id="Caracter.C3.ADsticas" name="Caracter.C3.ADsticas"> Características </h3> +<p>En <b>CSS3</b> +</p> +<ul><li> Value: {{ mediawiki.external(' <uri> \',\' ') }}</uri>* {{ mediawiki.external(' normal | none | inhibit | <content-list> ') }}</content-list> +</li><li> Valor inicial: normal +</li><li> Se aplica a: todos los elementos y a <code>::before, ::after, ::alternate, ::marker, ::line-marker, áreas de margin y @footnote</code>. +</li><li> {{ Cssxref("inheritance", "Valor heredado") }}: no +</li><li> Porcentajes: N/A +</li><li> Medio: todos +</li><li> Valor calculada: The specified value with each occurrence of 'normal' expanded as per the prose below. +</li></ul> +<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3> +<pre>p:before +{ +content: url("beep.wav") +} + +img:before +{ +content: attr(alt) +} + +</pre> +<h3 id="Valores" name="Valores"> Valores </h3> +<ul><li> string: Define el contenido de texto. El valor por defecto es "". +</li><li> url: Define una dirección URL +</li><li> counter (name) +</li><li> counter (name, list-style-type) +</li><li> counters (name, string) +</li><li> counters (name, string, list-style-type) </li><li> attr(X): Define un atributo de un selector que será mostrado antes/después del selector. +</li><li> open-quote </li><li> close-quote </li><li> no-open-quote </li><li> no-close-quote +</li></ul> +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3> +<p><a class="external" href="http://www.w3.org/TR/REC-CSS2/generate.html#content">(CSS2 en)</a> +<a class="external" href="http://www.w3.org/TR/CSS21/generate.html#content">(CSS2 1 en)</a> +<a class="external" href="http://www.w3.org/TR/css3-content/#inserting3">(CSS3 en)</a> +</p><p><br> +</p> +<div class="noinclude"> +<p><span class="comment">Categorías</span> +</p><p><span class="comment">Interwiki Languages</span> +</p> +</div> +{{ languages( { "en": "en/CSS/content" } ) }} diff --git a/files/es/web/css/css_animations/detectar_soporte_de_animación_css/index.html b/files/es/web/css/css_animations/detectar_soporte_de_animación_css/index.html new file mode 100644 index 0000000000..11bb0c0076 --- /dev/null +++ b/files/es/web/css/css_animations/detectar_soporte_de_animación_css/index.html @@ -0,0 +1,91 @@ +--- +title: Detectar soporte de animación CSS +slug: Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS +translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +--- +<p>{{CSSRef}}</p> + +<p>Las animaciones de CSS permiten realizar animaciones creativas de contenido usando nada más que CSS. Sin embargo, es posible que hayan momentos en que estas funciones no sean compatibles, y puede que desees manejar ese problema usando código JavaScript. Este artículo, basado en <a class="external" href="http://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/" title="http://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/">la publicación</a> de Chris Heilmann, demuestra una técnica de como hacer esto.</p> + +<h2 id="Prueba_de_la_compatibilidad_de_animaciones_CSS">Prueba de la compatibilidad de animaciones CSS</h2> + +<p>Este código comprueba si el soporte de animaciones CSS esta disponible:</p> + +<pre class="brush: js">var animation = false, + animationstring = 'animation', + keyframeprefix = '', + domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), + pfx = '', + elm = document.createElement('div'); + +if( elm.style.animationName !== undefined ) { animation = true; } + +if( animation === false ) { + for( var i = 0; i < domPrefixes.length; i++ ) { + if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) { + pfx = domPrefixes[ i ]; + animationstring = pfx + 'Animation'; + keyframeprefix = '-' + pfx.toLowerCase() + '-'; + animation = true; + break; + } + } +} +</pre> + +<p>Para empezar, hemos definido algunas variables. Asumimos que las animaciones no son compatibles al establecer la variable <code>animation</code> a <code>false</code>. Establecemos <code>la variable animationstring</code> a <code>animation</code> la cual es la propiedad que queremos establecer mas tarde. Creamos un arreglo (array) sobre los prefijos de navegadores para realizar un bucle, y establecemos la variable <code>pfx</code> a una cadena vacía.</p> + +<p>Luego verificamos si la propiedad de CSS {{ cssxref("animation-name") }} esta establecida en la colección de estilo para el elemento especificado por la variable <code>elm</code>. Esto quiere decir que el navegador soporta animaciones CSS sin ningun prefijo, lo cual, hasta la fecha, ninguno de ellos lo hace.</p> + +<p>Si el navegador no soporta animaciones sin prefijos, y <code>animation</code> sigue siendo <code>false</code>, iteramos todos los posibles prefijos, ya que todos los principales navegadores estan anteponiendo esta propiedad y cambiando su nombre a <code>AnimationName</code> en su lugar.</p> + +<p>Una vez que el código ha terminado de ejecutarse, el valor de <em><code>animation </code></em>será <em><code>false</code> </em>si el soporte de animacion CSS no esta disponible, de otro modo será <em><code>true</code></em>. Si es <em><code>true</code> </em>tanto el nombre de las propiedad de <code>animation</code> y el el prefijo keyframe serán los correctos. Así que si utilizas un nuevo Firefox, la propiedad será <code>MozAnimation</code> y el prefijo keyframe será <code>-moz-</code>, mientras en Chrome será <code>WebkitAnimation</code> y <code>-webkit-</code>. Tenga en cuenta que los navegadores no facilitan el cambio entre <em>camelCase </em>(Capitalizacion medial) y la<em> hyphen-ation</em> (separación).</p> + +<h2 id="Animaciones_utilizando_la_sintaxis_correcta_para_diferentes_navegadores">Animaciones utilizando la sintaxis correcta para diferentes navegadores</h2> + +<p>Ahora que sabes si las animaciones CSS son compatibles o no, podemos animar.</p> + +<pre class="brush: js">if( animation === false ) { + + // animate in JavaScript fallback + +} else { + elm.style[ animationstring ] = 'rotate 1s linear infinite'; + + var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+ + 'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+ + 'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+ + '}'; + + if( document.styleSheets && document.styleSheets.length ) { + + document.styleSheets[0].insertRule( keyframes, 0 ); + + } else { + + var s = document.createElement( 'style' ); + s.innerHTML = keyframes; + document.getElementsByTagName( 'head' )[ 0 ].appendChild( s ); + + } + +} +</pre> + +<p>Este código examina el valor de <em><code>animation</code></em>; si es <em><code>false</code></em>, sabemos que tendremos que recurrir a la alternativa de JavaScript para realizar nuestra animacion. De otra manera, podemos usar JavaScript para crear los efectos de animación CSS deseados.</p> + +<p>Establecer las propiedades de animación es fácil; simplemente actualiza su valor en la colección de estilos. Aunque, añadir <code>keyframes</code> es más complicado, ya que no están definidas usando la sintaxis tradicional de CSS (lo que los hace mas flexible, pero mas difícil desde script).</p> + +<p>Para definir nuestros keyframes usando JavaScript, necesitamos transcribirlos como una cadena CSS. Todo lo que hacemos es crear una variable <code>keyframes</code>, anteponiendo cada atributo tal como se construye. Esta variable, una vez construida, contiene la descripción completa de todos los keyframes necesarios por nuestra secuencia de animación.</p> + +<p>La siguiente tarea es realmente añadir los keyframes al CSS de la página. Lo primeron que hay que hacer es mirar a ver si existe una hoja de estilo en el documento; si es así, sensillamente insertamos el keyframe descrito dentro de la hoja de estilos; esto se hace en las lineas 13-15.</p> + +<p>Si aún no existe una hoja de estilos, se crea un nuevo elemento {{ HTMLElement("style") }} , y su contenido se incorpora al valor de los keyframes. Luego se sinerta el valor {{ HTMLElement("style") }} dentro del{{ HTMLElement("head") }} del documento, añadiendo así la nueva hoja de estilo del document.</p> + +<p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">Ver en el JSFiddle</a></p> + +<h2 id="Ver_tambien">Ver tambien</h2> + +<ul> + <li><a href="es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS" title="en/CSS/CSS animations">Animaciones CSS</a></li> +</ul> diff --git a/files/es/web/css/css_animations/index.html b/files/es/web/css/css_animations/index.html new file mode 100644 index 0000000000..7c953b2359 --- /dev/null +++ b/files/es/web/css/css_animations/index.html @@ -0,0 +1,136 @@ +--- +title: CSS Animations +slug: Web/CSS/CSS_Animations +tags: + - CSS + - CSS Animations + - Experimental + - Overview + - Reference +translation_of: Web/CSS/CSS_Animations +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p><strong>CSS Animations</strong> is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("animation")}}</li> + <li>{{cssxref("animation")}}</li> + <li>{{cssxref("animation-delay")}}</li> + <li>{{cssxref("animation-direction")}}</li> + <li>{{cssxref("animation-duration")}}</li> + <li>{{cssxref("animation-fill-mode")}}</li> + <li>{{cssxref("animation-iteration-count")}}</li> + <li>{{cssxref("animation-name")}}</li> + <li>{{cssxref("animation-play-state")}}</li> + <li>{{cssxref("animation-timing-function")}}</li> +</ul> +</div> + +<h3 id="CSS_At-rules">CSS At-rules</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@keyframes")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Detecting CSS animation support</a></dt> + <dd>Describes a technique for detecting if the browser supports CSS animations.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></dt> + <dd>Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Animations') }}</td> + <td>{{ Spec2('CSS3 Animations') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + 43.0</td> + <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>12{{property_prefix("-o")}}<br> + 12.10<sup>[2]</sup></td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1 {{property_prefix("-webkit")}} [1]<br> + 4.0 {{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.</p> + +<p>[2] See the <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">release notes to Opera 12.50</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related to CSS Animations, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> can trigger animations on user actions.</li> +</ul> + +<p> </p> diff --git a/files/es/web/css/css_animations/tips/index.html b/files/es/web/css/css_animations/tips/index.html new file mode 100644 index 0000000000..1053ef24ac --- /dev/null +++ b/files/es/web/css/css_animations/tips/index.html @@ -0,0 +1,150 @@ +--- +title: Animaciones CSS tips y trucos +slug: Web/CSS/CSS_Animations/Tips +translation_of: Web/CSS/CSS_Animations/Tips +--- +<div>{{cssref}}</div> + +<div>Las Animaciones con CSS hacen posible crear cosas increíbles con los elementos que forman parte de tus documentos y apps . Sin embargo, hay cosas que deseas hacer que no son evidentes, o soluciones inteligentes que quizás no encuentres de inmediato. Este artículo es una colección de tips y trucos que hemos encontrado que podrían hacer más fácil el trabajo, incluido cómo volver a ejecutar una animación detenida.</div> + +<h2 id="Corriendo_una_animación_de_nuevo">Corriendo una animación de nuevo</h2> + +<p>La especificación de CSS Animations no ofrece una forma de ejecutar una animación nuevamente. No hay un método mágico de <code>resetAnimation()</code> en los elementos, y tu no puedes solo configurar el elemento {{cssxref("animation-play-state")}} para <code>"correr"</code> de nuevo. En su lugar debes usar trucos inteligentes para que una animación detenida se reproduzca.</p> + +<p>Aquí te mostramos una forma de hacerlo que sentimos es lo suficientemente estable y confiable para sugerirte</p> + +<h3 id="Contenido_HTML">Contenido HTML </h3> + +<p>Primero, definamos el HTML para un {{HTMLElement("div")}} que deseamos animar y un botón que ejecurara (o repetira) la animación.</p> + +<pre class="brush: html notranslate"><div class="box"> +</div> + +<div class="runButton">Click me to run the animation</div></pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<p>Ahora definiremos la animación en si usando CSS. Algún CSS que no es importante (el estilo del botón "Run" en sí) no se muestran aquí, por brevedad.</p> + +<div class="hidden"> +<pre class="brush: css notranslate">.runButton { + cursor: pointer; + width: 300px; + border: 1px solid black; + font-size: 16px; + text-align: center; + margin-top: 12px; + padding-top: 2px; + padding-bottom: 4px; + color: white; + background-color: darkgreen; + font: 14px "Open Sans", "Arial", sans-serif; +}</pre> +</div> + +<pre class="brush: css notranslate">@keyframes colorchange { + 0% { background: yellow } + 100% { background: blue } +} + +.box { + width: 100px; + height: 100px; + border: 1px solid black; +} + +.changing { + animation: colorchange 2s; +}</pre> + +<p>Aquí hay dos clases. La clase <code>"box"</code> es un descripción básica de la apariencia de la caja, sin ninguna información de la animación incluida. Los detalles de la animación son incluidos en la clase <code>"changing"</code> class, que dice que {{cssxref("@keyframes")}} llamado <code>"colorchange"</code> debe usarse en el transcurso de dos segundo para animar la caja.</p> + +<p>Note que debido a esto, la caja no comienza con ningún efecto de animación en su lugar, por lo que no se animará</p> + +<h3 id="Contenido_JavaScript">Contenido JavaScript</h3> + +<p>Ahora veremos el JavaScript que jace el trabajo. La escencia de la técnica esta en la función <code>play()</code>, que se llama cuando el usuario hace clic en el botón "Run".</p> + +<pre class="brush: js notranslate">function play() { + document.querySelector(".box").className = "box"; + window.requestAnimationFrame(function(time) { + window.requestAnimationFrame(function(time) { + document.querySelector(".box").className = "box changing"; + }); + }); +}</pre> + +<p>Esto se ve raro, ¿cierto? Esto se debe a que la única forma de volver a reproducir una animación es eleminar el efecto de animación, dejar que el documento vuelva a calcular los estilos para que sepa que lo ha hecho y luego volver a agregar el efecto de animación al elemento. Para que eso suceda, tenemos que ser creativos.</p> + +<p>Esto es lo que sucede cuando la función <code>play()</code> es llamada:</p> + +<ol> + <li> La lista de clases CSS de caja se restablece a <code>"box"</code>. Esto tiene el efecto de remover cualquier otra clase recurrente aplicada a la caja, incluida la clase <code>"changing"</code> 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.</li> + <li>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...</li> + <li>Nuestro callback habilmente llama a <code>requestAnimationFrame()</code> ¡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 <code>"changing"</code> de nuevo en la caja, para que el repaint inicie la animación una vez más.</li> +</ol> + +<p>Por supuesto, también necesitamos agregar un controlador de eventos a nuestro botón "Run" para que en verdad haga algo</p> + +<pre class="brush: js notranslate">document.querySelector(".runButton").addEventListener("click", play, false);</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}</p> + +<h2 id="Detener_la_animación">Detener la animación</h2> + +<p>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:</p> + +<ol> + <li>Haga que su animación sea lo más autónoma posible. Esto significa que no se debe confiar en<code>animation-direction: alternate</code>. 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.</li> + <li>Use JavaScript y borre la animación que se esta utilizando cuando se activa el evento <code>animationiteration</code>.</li> +</ol> + +<p>El siguiente demo muestra como puedes lograr las técnicas JavaScript mencionandas anteriormente:</p> + +<pre class="brush: css notranslate">.slidein { + animation-duration: 5s; + animation-name: slidein; + animation-iteration-count: infinite; +} + +.stopped { + animation-name: none; +} + +@keyframes slidein { + 0% { + margin-left: 0%; + } + 50% { + margin-left: 50%; + } + 100% { + margin-left: 0%; + } +} +</pre> + +<pre class="brush: html notranslate"><h1 id="watchme">Click me to stop</h1> +</pre> + +<pre class="brush: js notranslate">let watchme = document.getElementById('watchme') + +watchme.className = 'slidein' +const listener = (e) => { + watchme.className = 'slidein stopped' +} +watchme.addEventListener('click', () => + watchme.addEventListener('animationiteration', listener, false) +) +</pre> + +<p>Demo <a href="https://jsfiddle.net/morenoh149/5ty5a4oy/">https://jsfiddle.net/morenoh149/5ty5a4oy/</a></p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></li> + <li>{{domxref("Window.requestAnimationFrame()")}}</li> +</ul> diff --git a/files/es/web/css/css_animations/usando_animaciones_css/index.html b/files/es/web/css/css_animations/usando_animaciones_css/index.html new file mode 100644 index 0000000000..b9b08bbc0b --- /dev/null +++ b/files/es/web/css/css_animations/usando_animaciones_css/index.html @@ -0,0 +1,351 @@ +--- +title: Usando animaciones CSS +slug: Web/CSS/CSS_Animations/Usando_animaciones_CSS +tags: + - Advanced + - CSS + - CSS Animations + - Example + - Experimental + - Guide +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +<p><span class="diff_add">{{SeeCompatTable}}{{CSSRef}}</span></p> + +<p><strong>Las animaciones CSS3</strong> 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.</p> + +<p>Las animaciones CSS tienen tres ventajas principales sobre las técnicas tradicionales de animación basada en scripts:</p> + +<ol> + <li>Son muy fáciles de usar para animaciones sencillas, puedes hacerlo incluso sin tener conocimientos de Javascript.</li> + <li>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.</li> + <li>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.</li> +</ol> + +<h2 id="Configurando_la_animación">Configurando la animación</h2> + +<p>Para crear una secuencia de animación CSS, tú estilizarás el elemento que quieras animar con la propiedad {{ cssxref("animation") }} y sus sub-propiedades. Con ellas podemos no solo configurar el ritmo y la duración de la animación sino otros detalles sobre la secuencia de la animación. Con ellas <strong>no</strong> configuramos la apariencia actual de la animación, para ello disponemos de {{ cssxref("@keyframes") }} como describiremos más adelante .</p> + +<p>Las subpropiedades de {{ cssxref("animation") }} son:</p> + +<dl> + <dt>{{ cssxref("animation-delay") }}</dt> + <dd>Tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.</dd> + <dt>{{ cssxref("animation-direction") }}</dt> + <dd>Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.</dd> + <dt>{{ cssxref("animation-duration") }}</dt> + <dd>Indica la cantidad de tiempo que la animación consume en completar su ciclo (duración).</dd> + <dt>{{ cssxref("animation-iteration-count") }}</dt> + <dd>El número de veces que se repite. Podemos indicar <code>infinite</code> para repetir la animación indefinidamente.</dd> + <dt>{{ cssxref("animation-name") }}</dt> + <dd>Especifica el nombre de la regla {{ cssxref("@keyframes") }} que describe los fotogramas de la animación.</dd> + <dt>{{ cssxref("animation-play-state") }}</dt> + <dd>Permite pausar y reanudar la secuencia de la animación</dd> + <dt>{{ cssxref("animation-timing-function") }}</dt> + <dd>Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.</dd> + <dt>{{ cssxref("animation-fill-mode") }}</dt> + <dd>Especifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).</dd> +</dl> + +<h2 id="Definiendo_la_secuencia_de_la_animación_con_fotogramas">Definiendo la secuencia de la animación con fotogramas</h2> + +<p>Una vez configurado el tiempo de la animación, necesitamos definir su apariencia. Esto lo haremos estableciendo dos fotogramas más usando la regla {{ cssxref("@keyframes") }}. Cada fotograma describe cómo se muestra cada elemento animado en un momento dado durante la secuencia de la animación.</p> + +<p>Desde que se define el tiempo y el ritmo de la animación, el fotograma usa {{ cssxref("percentage") }} para indicar en qué momento de la secuencia de la animación tiene lugar. 0% es el principio, 100% es el estado final de la animación. Debemos especificar estos dos momentos para que el navegador sepa dónde debe comenzar y finalizar; debido a su importancias, estos dos momentos tienen alias especiales: <code>from</code> y <code>to</code>.</p> + +<p>Además puedes, opcionalmente, incluir fotogramas que describan pasos intermedios entre el punto inicial y final de la animación.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<div class="note"><strong>Nota:</strong> Los siguientes ejemplos no usan ningún prefijo en las propiedades CSS de animación. Los navegadores antiguos pueden necesitarlos. Al hacer click en "Ver el ejemplo vivo" se incluye el prefijo <code>-webkit</code>.</div> + +<h3 id="Haciendo_que_un_texto_se_delice_por_la_ventana_del_navegador">Haciendo que un texto se delice por la ventana del navegador</h3> + +<p>Este sencillo ejemplo da estilos al elemento {{ HTMLElement("p") }} para que el texto se deslice por la pantalla entrando desde el borde derecho de la ventana del navegador.</p> + +<p>Animaciones como esta pueden hacer que la página se vuelva más ancha que la ventana del navegador. Para evitar este problema, pon el elemento que será animado en un contenedor y agrega {{cssxref("overflow")}}<code>:hidden</code> en el contenedor.</p> + +<pre class="brush: css notranslate">p { + animation-duration: 3s; + animation-name: slidein; +} + +@keyframes slidein { + from { + margin-left: 100%; + width: 300% + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<p>El estilo del elemento {{ HTMLElement("p") }} especifica, a través de la propiedad {{ cssxref("animation-duration") }}, que la animación debe durar 3 segundos desde el inicio al fin y que el nombre de los {{ cssxref("@keyframes") }} que definen los fotogramas de la secuencia de la animación es "slidein".</p> + +<p>Si queremos añadir algún estilo personalizado sobre el elemento {{ HTMLElement("p") }} para usarlo en navegadores que no soporten animaciones CSS, también podemos incluirlos. En nuestro ejemplo, no queremos ningún otro estilo personalizado diferente al efecto de la animación.</p> + +<p>Los fotogramas se definen usando la regla {{ cssxref("@keyframes") }}. En nuestro ejemplo, tenemos solo dos fotogramas. El primero de ellos sucede en elt 0% (hemos usado su alias <code>from</code>). Aqui, configuramos el margen izquierdo del elemento, poniendolo al 100% (es decir, en el borde derecho del elemento contenedor), y su ancho al 300% (o tres veces el ancho del elemento contenedor). Esto hace que en el primer fotograma de la animación tengamos el encabezado fuera del borde derecho de la ventana del navegador.</p> + +<p>El segundo (y último) fotograma sucede en el 100% (hemos usado su alias <code>to</code>). Hemos puesto el margen derecho al 0% y el ancho del elemento al 100%. Esto produce que el encabezado, al finalizar la animación, esté en el borde derecho del área de contenido.</p> + +<pre class="brush: html notranslate"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p></pre> + +<p>(Recarga la página para ver la animación, o haz click en el botón CodePen para ver la animación en CodePen)</p> + +<p>{{EmbedLiveSample("Haciendo_que_un_texto_se_delice_por_la_ventana_del_navegador","100%","250")}}</p> + +<h3 id="Añadiendo_otro_fotograma">Añadiendo otro fotograma</h3> + +<p>Vamos a añadir otro fotograma a la animación de nuestro ejemplo anterior. Pongamos que queremos que el tamaño de fuente del encabezado aumente a medida que se mueve durante un tiempo y que después disminuye hasta su tamaño original. Esto es tan sencillo como añadir este fotograma:</p> + +<pre class="brush: css notranslate">75% { + font-size: 300%; + margin-left: 25%; + width: 150%; +} +</pre> + +<pre class="brush: css hidden notranslate">p { + animation-duration: 3s; + animation-name: slidein; +} + +@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre class="brush: html hidden notranslate"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p> +</pre> + +<p>Esto le dice al navegador que en el 75% de la secuencia de la animación, el encabezado tiene un margen izquierdo del 25%, un tamaño de letra del 200% y un ancho del 150%.</p> + +<p>(Recarga la página para ver la animación, o haz click al botón de CodePen para la animación en CodePen)</p> + +<p>{{EmbedLiveSample("Añadiendo_otro_fotograma","100%","250")}}</p> + +<h3 id="Haciendo_que_se_repita">Haciendo que se repita</h3> + +<p>Para hacer que la animación se repita, solo hay que usar la propiedad {{ cssxref("animation-iteration-count") }} e indicarle cuántas veces debe repetirse. En nuestro caso, usamos <code>infinite</code> para que la animación se repita indefinidamente:</p> + +<pre class="brush: css notranslate">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; +} +</pre> + +<pre class="brush: css hidden notranslate">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre class="brush: html hidden notranslate"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p> +</pre> + +<p>{{EmbedLiveSample("Haciendo_que_se_repita","100%","250")}}</p> + +<h3 id="Moviendolo_hacia_adelante_y_hacia_atrás">Moviendolo hacia adelante y hacia atrás</h3> + +<p>Hemos hecho que se repita, pero queda un poco raro que salte al inicio de la animación cada vez que ésta comienza. Queremos que se mueva hacia adelante y hacia atrás en la pantalla. Esto lo conseguimos fácilmente indicando que {{ cssxref("animation-direction") }} es <code>alternate</code>:</p> + +<pre class="brush: css notranslate">p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; + animation-direction: alternate; +} +</pre> + +<pre class="brush: css hidden notranslate">@keyframes slidein { + from { + margin-left: 100%; + width: 300%; + } + + to { + margin-left: 0%; + width: 100%; + } +} +</pre> + +<pre class="brush: html hidden notranslate"><p>The Caterpillar and Alice looked at each other for some time in silence: +at last the Caterpillar took the hookah out of its mouth, and addressed +her in a languid, sleepy voice.</p> +</pre> + +<p>{{EmbedLiveSample("Moviendolo_hacia_adelante_y_hacia_atrás","100%","250")}}</p> + +<h3 id="Usando_la_versión_abreviada_animation">Usando la versión abreviada animation</h3> + +<p>La versión abreviada {{cssxref("animation")}} es usado para ahorrar espacio. Por ejemplo, la regla que hemos usado en este artículo:</p> + +<pre class="notranslate"><code>p { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: infinite; + animation-direction: alternate; +}</code></pre> + +<p>Se puede reemplazar por</p> + +<pre class="notranslate"><code>p { + animation: 3s infinite alternate slidein; +}</code></pre> + +<div class="blockIndicator note"> +<p><strong>Nota: </strong>Puedes encontrar más detalles en la página de referencia {{cssxref("animation")}} </p> +</div> + +<h3 id="Estableciendo_multiples_valores_de_propiedades_animation">Estableciendo multiples valores de propiedades animation</h3> + +<p>Las propiedades de la versión larga de {{cssxref("animation")}} pueden aceptar múltiples valores, separados por comas - esta característica puede ser usada cuando quieres aplicar múltiples animaciones en una solo regla, y establecer por separado duration, iteration-count, etc. para diferentes animaciones. Vamos a ver algunos ejemplos rápidos para explicar las diferentes combinaciones:</p> + +<p>En el primer ejemplo, tenemos tres nombres de animación establecidos, pero solo una duración (duration) y número de iteraciones (iteration-count). En este caso, a las tres animaciones se les da la misma duración y número de iteraciones:</p> + +<pre class="notranslate"><code>animation-name: fadeInOut, moveLeft300px, bounce; +animation-duration: 3s; +animation-iteration-count: 1;</code> +</pre> + +<p>En el segundo ejemplo, tenemos tres valores establecidos en las tres propiedades. En este caso, cada animación se ejecuta con los valores correspondientes en la misma posición en cada propiedad, así por ejemplo <code>fadeInOut</code> tiene una duración de 2.5s y 2 iteraciones, etc.</p> + +<pre class="notranslate"><code>animation-name: fadeInOut, moveLeft300px, bounce; +animation-duration: 2.5s, 5s, 1s; +animation-iteration-count: 2, 1, 5;</code></pre> + +<p>En el tercer caso, hay tres animaciones especificadas, pero solo dos duraciones y número de iteraciones. En los casos en donde no hay valores suficientes para dar un valor separado a cada animación, los valores se repiten de inicio a fin. Así por ejemplo, <code>fadeInOut</code> obtiene una duración de 2.5s y <code>moveLeft300px</code> obtiene una duración de 5s. Ahora tenemos asignados todos los valores de duracion disponibles, así que empezamos desde el inicio de nuevo - por lo tanto <code>bounce</code> tiene una duración de 2.5s. El número de iteraciones (y cualquier otra propiedad que especifiques) será asignados de la misma forma.</p> + +<pre class="notranslate"><code>animation-name: fadeInOut, moveLeft300px, bounce; +animation-duration: 2.5s, 5s; +animation-iteration-count: 2, 1;</code></pre> + +<h3 id="Usando_eventos_de_animación">Usando eventos de animación</h3> + +<p>Podemos tener un control mayor sobre las animaciones (así como información útil sobre ellas) haciendo uso de eventos de animación. Dichos eventos, representados por el objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , se pueden usar para detectar cuándo comienza la animación, cuándo termina y cuándo comienza una iteración. Cada evento incluye el momento en el que ocurrió, así como el nombre de la animación que lo desencadenó.</p> + +<p>Vamos a modificar el ejemplo del texto deslizante para recoger información sobre cada evento cuando suceda y asi podremos echar un vistazo a cómo funcionan.</p> + +<h4 id="Agregando_CSS">Agregando CSS</h4> + +<p>Empezamos creando el CSS para la animación. Esta animación durará 3 segundos, se llama <code>slidein</code>, se repite 3 veces, y alterna de dirección cada vez. En {{cssxref("@keyframes")}}, <code>width</code> y <code>margin-left</code> son manipulados para hacer que el elemento se deslice por la pantalla.</p> + +<pre class="brush: css notranslate">.slidein { + animation-duration: 3s; + animation-name: slidein; + animation-iteration-count: 3; + animation-direction: alternate; +} + +@keyframes slidein { + from { + margin-left:100%; + width:300% + } + + to { + margin-left:0%; + width:100%; + } +}</pre> + +<h4 id="Añadiendo_detectores_de_eventos_a_la_animación">Añadiendo detectores de eventos a la animación</h4> + +<p>Usaremos un poco de Javascript para escuchar los tres posibles eventos de animación. Este código configura nuestros detectores de eventos (event listeners); los llamamos cuando el documento carga por primera vez para configurar todo.</p> + +<pre class="brush: js notranslate">var e = document.getElementById("watchme"); +e.addEventListener("animationstart", listener, false); +e.addEventListener("animationend", listener, false); +e.addEventListener("animationiteration", listener, false); + +e.className = "slidein";</pre> + +<p>Es la forma estándar de detectar eventos en Javascript, si quieres conocer más detalles sobre cómo funciona la detección de eventos, consulta la documentación de {{ domxref("element.addEventListener()") }}.</p> + +<p>La última línea pone la clase <code>slidein</code> al elemento para comenzar la animación. ¿Por qué?. Porque que el evento <code>animationstart</code> se dispara cuando comienza la animación y, en nuestro caso, esto sucedería antes de que nuestro código se hubiera ejecutado y no podríamos crear los detectores de eventos. Para evitarlo, creamos los detectores de eventos antes y añadimos la clase al elemento para iniciar la animación.</p> + +<h4 id="Recibiendo_los_eventos">Recibiendo los eventos</h4> + +<p>Los eventos, al irse disparando, llamarán a la función <code>listener()</code>.</p> + +<pre class="brush: js notranslate">function listener(e) { + var l = document.createElement("li"); + switch(e.type) { + case "animationstart": + l.innerHTML = "Iniciado: tiempo transcurrido " + e.elapsedTime; + break; + case "animationend": + l.innerHTML = "Finalizado: tiempo transcurrido " + e.elapsedTime; + break; + case "animationiteration": + l.innerHTML = "Nueva iteración comenzó a los " + e.elapsedTime; + break; + } + document.getElementById("output").appendChild(l); +} +</pre> + +<p>Este código también es muy sencillo. Miramos en {{ domxref("event.type") }} para saber qué tipo de evento se ha disparado y, en función del tipo de evento, añadimos su correspodiente texto al elemento {{ HTMLElement("ul") }} que usaremos para registrar la actividad de nuestros eventos.</p> + +<p>El resultado, si todo ha ido bien, será algo parecido a esto:</p> + +<ul> + <li>Iniciado: tiempo transcurrido 0</li> + <li>Nueva iteración comenzó a los 3.01200008392334</li> + <li>Nueva iteración comenzó a los 6.00600004196167</li> + <li>Finalizado: tiempo transcurrido 9.234000205993652</li> +</ul> + +<p>Fijémonos en que despues de la iteración final de la animación, el evento <code>animationiteration</code> no se envía, en su lugar se lanza <code>animationend</code>.</p> + +<h4 id="El_HTML">El HTML</h4> + +<p>Solo nos falta mostrar el código HTML necesario para mostrar el ejemplo en la página, incluyendo la lista en la que el script irá insertando la información de los eventos que se vayan disparando.</p> + +<pre class="brush: html notranslate"><h1 id="watchme">Watch me move</h1> +<p> + This example shows how to use CSS animations to make <code>H1</code> + elements move across the page.</p> +<p> + In addition, we output some text each time an animation event fires, + so you can see them in action. +</p> +<ul id="output"> +</ul> +</pre> + +<p>{{EmbedLiveSample('Usando_eventos_de_animación', '600', '300')}}</p> + +<h2 id="Te_puede_interesar_también">Te puede interesar también</h2> + +<ul> + <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> + <li><a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Detecting CSS animation support</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Using CSS transitions</a></li> +</ul> diff --git a/files/es/web/css/css_background_and_borders/border-image_generador/index.html b/files/es/web/css/css_background_and_borders/border-image_generador/index.html new file mode 100644 index 0000000000..3f189b87ea --- /dev/null +++ b/files/es/web/css/css_background_and_borders/border-image_generador/index.html @@ -0,0 +1,2615 @@ +--- +title: Generador Border-image +slug: Web/CSS/CSS_Background_and_Borders/Border-image_generador +tags: + - CSS + - Herramientas +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +<p>Esta herramienta permite generar valores para CSS3 {{cssxref("border-image")}}</p> +<div style="display: none;"> + <h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2> + <h3 id="HTML_Content">HTML Content</h3> + <pre class="brush: html"> <div id="container"> + + <div id="gallery"> + <div id="image-gallery"> + <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png"> + <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png"> + <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png"> + <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png"> + <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png"> + <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg"> + </div> + </div> + + <div class="group section" id="load-actions"> + <div id="toggle-gallery"> </div> + <div class="button" id="load-image"> Upload image </div> + <input> + <div class="button" id="load-remote"> </div> + </div> + + <div class="group section" id="general-controls"> + <div class="name"> Control Box </div> + <div class="separator"></div> + <div class="property"> + <div class="name">scale</div> + <div class="ui-input-slider"> + </div> + </div> + <div class="separator"></div> + <div class="property"> + <div class="name">draggable</div> + <div class="ui-checkbox"></div> + </div> + <div class="property right"> + <div class="name">section height</div> + <div class="ui-input-slider"> + </div> + </div> + </div> + + <div class="group section" id="preview_section"> + <div id="subject"> + <div class="guideline"></div> + <div class="guideline"></div> + <div class="guideline"></div> + <div class="guideline"></div> + </div> + <div id="preview"> </div> + </div> + + + <div class="group section" id="controls"> + + + <div class="category" id="border-slice-control"> + <div class="title"> border-image-slice </div> + <div class="property"> + <div class="name">fill</div> + <div class="ui-checkbox"></div> + </div> + </div> + + + <div class="category" id="border-width-control"> + <div class="title"> border-image-width </div> + </div> + + + <div class="category" id="border-outset-control"> + <div class="title"> border-image-outset </div> + </div> + + + <div class="category" id="aditional-properties"> + <div class="title"> aditional-properties </div> + <div class="property"> + <div class="name"> repeat-x </div> + <div class="ui-dropdown border-repeat"> + <div>repeat</div> + <div>stretch</div> + <div>round</div> + </div> + </div> + <div class="property"> + <div class="name"> repeat-y </div> + <div class="ui-dropdown border-repeat"> + <div>repeat</div> + <div>stretch</div> + <div>round</div> + </div> + </div> + <div class="property"> + <div class="ui-input-slider"> + </div> + </div> + + <div class="property"> + <div class="ui-input-slider"></div> + </div> + <div class="property"> + <div class="ui-input-slider"> + </div> + </div> + </div> + + + <div class="category" id="output"> + <div class="title"> CSS Code </div> + <div class="css-property"> + <span class="name"> border-image-slice: </span> + <span class="value" id="out-border-slice"> </span> + </div> + <div class="css-property"> + <span class="name"> border-image-width: </span> + <span class="value" id="out-border-width"> </span> + </div> + <div class="css-property"> + <span class="name"> border-image-outset: </span> + <span class="value" id="out-border-outset"> </span> + </div> + <div class="css-property"> + <span class="name"> border-image-repeat: </span> + <span class="value" id="out-border-repeat"> </span> + </div> + <div class="css-property"> + <span class="name"> border-image-source: </span> + <span class="value" id="out-border-source"> </span> + </div> + </div> + + </div> + </div></pre> + <h3 id="CSS_Content">CSS Content</h3> + <pre class="brush: css">/* 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; +} + +</pre> + <h3 id="JavaScript_Content">JavaScript Content</h3> + <pre class="brush: js">'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 + }; + +})(); + +</pre> +</div> +<p>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</p> + +<p> </p> diff --git a/files/es/web/css/css_background_and_borders/border-radius_generator/index.html b/files/es/web/css/css_background_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..5f2f982065 --- /dev/null +++ b/files/es/web/css/css_background_and_borders/border-radius_generator/index.html @@ -0,0 +1,1601 @@ +--- +title: Generador de border-radius +slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +tags: + - Herramientas +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +<p>Esta herramienta puede ser usada para generar efectos de {{cssxref("border-radius")}} de CSS3.</p> + +<div style="display: none;"> +<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><div id="container"> + <div class="group section"> + <div id="preview" class="col span_12"> + <div id="subject"> + <div id="top-left" class="radius-container" + data-X="left" data-Y="top"> + </div> + <div id="top-right" class="radius-container" + data-X="right" data-Y="top"> + </div> + <div id="bottom-right" class="radius-container" + data-X="right" data-Y="bottom"> + </div> + <div id="bottom-left" class="radius-container" + data-X="left" data-Y="bottom"> + </div> + + <div id="radius-ui-sliders"> + <div id="tlr" class="ui-input-slider" data-topic="top-left" + data-unit=" px" data-sensivity="2"></div> + + <div id="tlw" class="ui-input-slider" data-topic="top-left-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="tlh" class="ui-input-slider" data-topic="top-left-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="trr" class="ui-input-slider" data-topic="top-right" + data-unit=" px" data-sensivity="2"></div> + + <div id="trw" class="ui-input-slider" data-topic="top-right-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="trh" class="ui-input-slider" data-topic="top-right-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="brr" class="ui-input-slider" data-topic="bottom-right" + data-unit=" px" data-sensivity="2"></div> + + <div id="brw" class="ui-input-slider" data-topic="bottom-right-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="brh" class="ui-input-slider" data-topic="bottom-right-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="blr" class="ui-input-slider" data-topic="bottom-left" + data-unit=" px" data-sensivity="2"></div> + + <div id="blw" class="ui-input-slider" data-topic="bottom-left-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="blh" class="ui-input-slider" data-topic="bottom-left-h" + data-unit=" px" data-sensivity="2"></div> + </div> + </div> + </div> + </div> + <div id="controls" class="group section"> + + <div class="group section"> + <div id="dimensions"> + <div class="ui-input-slider" data-topic="width" data-info="width" + data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div> + + <div class="ui-input-slider" data-topic="height" data-info="height" + data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div> + </div> + + <div id="output"></div> + </div> + + <div class="group section"> + <div id="radius-lock"> + <div class="info"> rounded corner </div> + <div class="ui-checkbox" data-topic='top-left'></div> + <div class="ui-checkbox" data-topic='top-right'></div> + <div class="ui-checkbox" data-topic='bottom-right'></div> + <div class="ui-checkbox" data-topic='bottom-left'></div> + </div> + + <div id="unit-selection"> + <div class="info"> select border units </div> + </div> + </div> + + </div> +</div> +</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">/* GRID OF TEN + * ========================================================================== */ + +.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-container { + 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%; +} + +/* 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 Component + */ + +/* 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: 3px; + 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; +} + +body { + max-width: 1000px; + margin: 0 auto; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + -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; +} + +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/******************************************************************************/ +/******************************************************************************/ +/* + * Preview Area + */ + +#preview { + height: 500px; + border: 1px solid #CCC; + border-radius: 3px; + text-align: center; + overflow: hidden; + position: relative; +} + +#preview .content { + width: 100%; + height: 100%; + display: block; +} + +#preview input { + 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; +} + +.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; +} + +.handle { + 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; +} + +.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; +} + +.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; +} + +.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; +} + + +.radius-container { + position: absolute; + display : block; + z-index: 1; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +/* TOP LEFT */ +#top-left { + top: 0; + left: 0; +} + +#top-left .radius { + border-top-left-radius: 100%; + top: 0; + left: 0; +} + +/* TOP RIGHT */ +#top-right { + top: 0; + right: 0; +} + +#top-right .radius { + border-top-right-radius: 100%; + top: 0; + right: 0; +} + +/* BOTTOM RIGHT */ +#bottom-right { + bottom: 0; + right: 0; +} + +#bottom-right .radius { + border-bottom-right-radius: 100%; + bottom: 0; + right: 0; +} + +/* BOTTOM lEFT */ +#bottom-left { + bottom: 0; + left: 0; +} + +#bottom-left .radius { + border-bottom-left-radius: 100%; + bottom: 0; +} + +/* INPUT SLIDERS */ + +#preview .ui-input-slider { + 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; +} + +#tlr { + top: -30px; + left: -50px; + display: none; +} + +#tlw { + top: -30px; + left: 30px; +} + +#tlh { + top: 20px; + left: -50px; +} + +#trr { + top: -30px; + right: -50px; + display: none; +} + +#trw { + top: -30px; + right: 30px; +} + +#trh { + top: 20px; + right: -50px; +} + +#brr { + bottom: -30px; + right: -50px; + display: none; +} + +#brw { + bottom: -30px; + right: 30px; +} + +#brh { + bottom: 20px; + right: -50px; +} + +#blr { + bottom: -30px; + left: -50px; + display: none; +} + +#blw { + bottom: -30px; + left: 30px; +} + +#blh { + bottom: 20px; + left: -50px; +} + +#preview .ui-input-slider-left, #preview .ui-input-slider-right { + visibility: hidden; +} + +#preview .ui-input-slider-container:hover .ui-input-slider-left { + visibility: visible; +} + +#preview .ui-input-slider-container:hover .ui-input-slider-right { + visibility: visible; +} + +/* + * + */ + +#unit-selection { + 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%; +} + +#unit-selection .dropdown { + 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; +} + +#unit-selection select option { + background: #FFF; + color: #333; +} + +#unit-selection select:hover { + 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; +} + +#unit-selection .unit-top-left { + top: 0; + left: 0; + display: none; +} + +#unit-selection .unit-top-left-w { + top: -22px; + left: 30px; +} + +#unit-selection .unit-top-left-h { + top: 20px; + left: -37px; +} + +#unit-selection .unit-top-right { + top: 0; + right: 0; + display: none; +} + +#unit-selection .unit-top-right-w { + top: -22px; + right: 30px; +} + +#unit-selection .unit-top-right-h { + top: 20px; + right: -37px; +} + +#unit-selection .unit-bottom-right { + bottom: 0; + right: 0; + display: none; +} + +#unit-selection .unit-bottom-right-w { + bottom: -22px; + right: 30px; +} + +#unit-selection .unit-bottom-right-h { + bottom: 20px; + right: -37px; +} + +#unit-selection .unit-bottom-left { + bottom: 0; + left: 0; + display: none; +} + +#unit-selection .unit-bottom-left-w { + bottom: -22px; + left: 30px; +} + +#unit-selection .unit-bottom-left-h { + bottom: 20px; + left: -37px; +} + +/******************************************************************************/ +/******************************************************************************/ + + +#radius-lock { + 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; +} + +#radius-lock .ui-checkbox > label { + 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%; +} + +#radius-lock [data-topic="top-left"] { + top: 10px; + left: 10px; +} + +#radius-lock [data-topic="top-right"] { + top: 10px; + right: 10px; +} + +#radius-lock [data-topic="bottom-right"] { + bottom: 10px; + right: 10px; +} + +#radius-lock [data-topic="bottom-left"] { + bottom: 10px; + left: 10px; +} + +/** + * Controls + */ + +#dimensions { + width: 200px; + color: #444; + float:left; +} + +#dimensions input { + 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; +} + + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js"><code class="language-js">'use strict'; + + +/** + * UI-InputSliderManager + */ + +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 + } + +})(); + +/** + * 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) { + 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(); +}); + +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 + } + +})(); + + +</code></pre> +</div> + +<p>{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}</p> + +<p> </p> diff --git a/files/es/web/css/css_background_and_borders/index.html b/files/es/web/css/css_background_and_borders/index.html new file mode 100644 index 0000000000..87b26bd607 --- /dev/null +++ b/files/es/web/css/css_background_and_borders/index.html @@ -0,0 +1,154 @@ +--- +title: CSS Background and Borders +slug: Web/CSS/CSS_Background_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +--- +<p>{{CSSRef}}</p> + +<p><strong>CSS Background and Borders</strong> is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("background")}}</li> + <li>{{cssxref("background-attachment")}}</li> + <li>{{cssxref("background-clip")}}</li> + <li>{{cssxref("background-color")}}</li> + <li>{{cssxref("background-image")}}</li> + <li>{{cssxref("background-origin")}}</li> + <li>{{cssxref("background-position")}}</li> + <li>{{cssxref("background-repeat")}}</li> + <li>{{cssxref("background-size")}}</li> + <li>{{cssxref("box-shadow")}}</li> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-bottom-left-radius")}}</li> + <li>{{cssxref("border-bottom-right-radius")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-collapse")}}</li> + <li>{{cssxref("border-color")}}</li> + <li>{{cssxref("border-image")}}</li> + <li>{{cssxref("border-image-outset")}}</li> + <li>{{cssxref("border-image-repeat")}}</li> + <li>{{cssxref("border-image-slice")}}</li> + <li>{{cssxref("border-image-source")}}</li> + <li>{{cssxref("border-image-width")}}</li> + <li>{{cssxref("border-left")}}</li> + <li>{{cssxref("border-left-color")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-radius")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-top-left-radius")}}</li> + <li>{{cssxref("border-top-right-radius")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-width")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Using CSS multiple backgrounds</a></dt> + <dd>Explains how to set backgrounds on elements and how they will interact with it.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Scaling background images</a></dt> + <dd>Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html new file mode 100644 index 0000000000..456fdd7484 --- /dev/null +++ b/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html @@ -0,0 +1,56 @@ +--- +title: Usando múltiples fondos con CSS +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - Ejemplo + - Fondos CSS + - Guía + - Intermedio +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +<p>{{CSSRef}}</p> + +<p><span class="seoSummary">Con <a href="/es/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>, puedes aplicar <strong>múltiple fondos</strong> a los elementos. Estos se presentan uno encima del otro, poniendo el primer fondo definido hasta arriba, y el último, hasta abajo.</span> Sólo el último fondo puede incluir color de fondo.</p> + +<p>Especificar fondos múltiples es fácil:</p> + +<pre class="brush: css">.myclass { + background: background1, background 2, ..., backgroundN; +} +</pre> + +<p>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") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>En este ejemplo, tres fondos son apilados: el logo de Firefox, un <a href="/es/docs/Web/CSS/linear-gradient" title="en/CSS/-moz-linear-gradient">gradiente lineal</a>, y una imagen de burbujas:</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="multi_bg_example"></div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.multi_bg_example { + width: 100%; + height: 400px; + background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); + background-repeat: no-repeat, no-repeat, no-repeat; + background-position: bottom right, left, right; + background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); +}</pre> + +<h2 id="Resultado">Resultado</h2> + +<p>(Si la imagen no aparece en CodePen, intenta con el botón TIdy en la sección de CSS)</p> + +<p>{{EmbedLiveSample('Example','100%','400')}}</p> + +<p>Como puedes ver aquí, el logo de Firefox (primero enlistado) está hasta arriba, seguido por el gradiente, que está presentado encima del fondo de burbujas. Cada subpropiedad subsecuente ({{ cssxref("background-repeat") }} y {{ cssxref("background-position") }}) aplican a los fondos correspondientes. Así, el primer valor en la lista para {{ cssxref("background-repeat") }} aplica al primer fondo (el de hasta arriba), etc.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/es/docs/CSS/Using_CSS_gradients" title="en/Using gradients">Usando gradientes con CSS</a></li> +</ul> diff --git a/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html b/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html new file mode 100644 index 0000000000..7e7819542d --- /dev/null +++ b/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html @@ -0,0 +1,3220 @@ +--- +title: Herramienta para seleccionar color +slug: Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color +tags: + - CSS + - Herramientas +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +<div style="display: none;"> +<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"> <div id="container"> + <div id="palette" class="block"> + <div id="color-palette"></div> + <div id="color-info"> + <div class="title"> CSS Color </div> + </div> + </div> + + <div id="picker" class="block"> + <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div> + <div id="picker-samples" sample-id="master"></div> + <div id="controls"> + <div id="delete"> + <div id="trash-can"></div> + </div> + <div id="void-sample" class="icon"></div> + </div> + </div> + + <div id="canvas" data-tutorial="drop"> + <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" + data-max="20" data-sensivity="10"></div> + </div> + </div> + +</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">/* + * COLOR PICKER TOOL + */ + +.ui-color-picker { + 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; +} + +.ui-color-picker .picking-area { + width: 198px; + height: 198px; + margin: 5px; + border: 1px solid #DDD; + position: relative; + float: left; + display: table; +} + +.ui-color-picker .picking-area:hover { + 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: -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; +} + +/* 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; +} + +.ui-color-picker .picker { + 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%; +} + +.ui-color-picker .hue, +.ui-color-picker .alpha { + 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%); +} + +.ui-color-picker .alpha { + 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"); +} + +.ui-color-picker .slider-picker { + 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; +} + +.ui-color-picker .info * { + float: left; +} + +.ui-color-picker .input { + 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; +} + +.ui-color-picker .input input { + 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; +} + +.ui-color-picker .input[data-topic="lightness"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] { + display: none; +} + +.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] { + display: block; +} + +.ui-color-picker .input[data-topic="alpha"] { + margin-top: 10px; + width: 93px; +} + +.ui-color-picker .input[data-topic="alpha"] > .name { + width: 60px; +} + +.ui-color-picker .input[data-topic="alpha"] > input { + float: right; +} + +.ui-color-picker .input[data-topic="hexa"] { + width: auto; + float: right; + margin: 6px 8px 0 0; +} + +.ui-color-picker .input[data-topic="hexa"] > .name { + 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; +} + +/* 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; +} + +.ui-color-picker .preview:before { + 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; +} + +.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; +} + +.ui-color-picker .switch_mode:hover { + background-color: #CCC; + cursor: pointer; +} + +/* + * 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; +} + +/* + * COLOR PICKER TOOL + */ + +body { + max-width: 1000px; + margin: 0 auto; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + box-shadow: 0 0 5px 0 #999; + + -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; + +} + +/** + * 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; +} + +[data-resize='both']:hover { + cursor: nw-resize !important; +} + +[data-resize='width']:hover { + cursor: w-resize !important; +} + +[data-resize='height']:hover { + cursor: n-resize !important; +} + +[data-hidden='true'] { + display: none; +} + +[data-collapsed='true'] { + height: 0 !important; +} + +.block { + display: table; +} + + +/** + * Container + */ +#container { + width: 100%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + display: table; +} + +/** + * Picker Zone + */ + +#picker { + padding: 10px; + width: 980px; +} + +.ui-color-picker { + padding: 3px 5px; + float: left; + border-color: #FFF; +} + +.ui-color-picker .switch_mode { + display: none; +} + +.ui-color-picker .preview-color:hover { + cursor: move; +} + +/** + * Picker Container + */ + +#picker-samples { + width: 375px; + height: 114px; + max-height: 218px; + margin: 0 10px 0 30px; + overflow: hidden; + position: relative; + float: left; + + 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; +} + +#picker-samples .sample:hover { + cursor: pointer; + border-color: #BBB; + transform: scale(1.15); + border-radius: 3px; +} + +#picker-samples .sample[data-active='true'] { + 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; +} + +#picker-samples #add-icon { + 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; +} + +#picker-samples #add-icon:before, +#picker-samples #add-icon:after { + 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%; +} + +#picker-samples #add-icon:after { + 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; +} + +/** + * Controls + */ + +#controls { + width: 110px; + padding: 10px; + float: right; +} + +#controls #picker-switch { + 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; +} + +#controls .icon:hover { + cursor: pointer; +} + +#controls .picker-icon { + 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; +} + +#controls #void-sample[data-active='true'] { + 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; +} + +#controls .switch:hover { + cursor: pointer; +} + +#controls .switch > * { + 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; +} + +/** + * Trash Can + */ + +#delete { + 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; + + 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; + + position: absolute; + top: 10%; + left: 10%; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + transition: all 0.2s; +} + +#delete[drag-state='enter'] { + background-color: #999; +} + +/** + * Color Theme + */ + +#color-theme { + margin: 0 8px 0 0; + border: 1px solid #EEE; + display: inline-block; + float: right; +} + +#color-theme .box { + width: 80px; + height: 92px; + float: left; +} + +/** + * Color info box + */ +#color-info { + 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%; +} + +#color-info .copy-container { + position: absolute; + top: -100%; +} + +#color-info .property { + min-width: 280px; + height: 30px; + margin: 10px 0; + text-align: center; + line-height: 30px; +} + +#color-info .property > * { + float: left; +} + +#color-info .property .type { + 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; +} + +#color-info .property .value:hover { + color: #37994A; +} + +#color-info .property .value:hover + .copy { + 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; +} + +#color-info .property .copy:hover { + background-position: center right; +} + + +/** + * 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; + + -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; +} + +#color-palette .container { + width: 100%; + height: 50px; + line-height: 50px; + overflow: hidden; + float: left; + transition: all 0.5s; +} + +#color-palette .container > * { + float: left; +} + +#color-palette .title { + 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; +} + +#color-palette .palette .sample { + 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; +} + +#color-palette .controls { +} + +#color-palette .controls > * { + float: left; +} + +#color-palette .controls > *:hover { + 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; +} + +#color-palette .controls .lock:hover { + /*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 ; +} + +#color-palette .controls .lock[locked-state='true']:hover { + /*background-image: url('images/lock-hover.png');*/ + background-position: top right; +} + +/** + * Canvas + */ + +#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; +} + +#canvas[data-tutorial='drop'] { + 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%; + + background-image: url('https://mdn.mozillademos.org/files/6075/drop.png'); + background-repeat: no-repeat; + background-position: left 35px top 60%; + + text-align: right; + + border: 3px dashed rgb(221, 221, 221); + border-radius: 15px; + + 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; +} + +#canvas [data-tutorial='dblclick'] { + 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; +} + +#canvas .sample { + 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; +} + +#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; +} + +#canvas .sample:hover > * { + cursor: pointer; + display: block !important; +} + +#canvas .sample .resize-handle { + 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; +} + +#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; +} + + +/** + * Canvas controls + */ + +#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; +} + +#canvas .toggle-bg:hover { + cursor: pointer; +} + +#canvas[data-bg='true'] { + background: none; +} + +#canvas[data-bg='true'] .toggle-bg { + 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; +} + +#zindex input { + border: 1px solid #DDD; + font-size: 16px; + color: #777; +} + +#zindex .ui-input-slider-info { + width: 60px; +} + +#zindex[data-active='true'] { + top: 0; + opacity: 1; +} + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js">'use strict'; + +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); + }; + + 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'; + + 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); + }; + + 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'; + + this.preview_color = preview_color; + + 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'); + + 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); + + input.addEventListener('change', onChangeFunc); + input.addEventListener('click', function() { + this.select(); + }); + + this.subscribe(topic, function(value) { + input.value = value; + }); + }; + + 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'); + + }.bind(this)); + + this.node.appendChild(button); + }; + + /*************************************************************************/ + // 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; + + // 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; + + 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); + + this.color_picker.style.left = x - picker_offset + 'px'; + this.color_picker.style.top = y - picker_offset + 'px'; + + 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; + + 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 + }; + +})(); + + + +/** + * 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, + }; + +})(); + + +'use strict'; + +window.addEventListener("load", function() { + ColorPickerTool.init(); +}); + +var ColorPickerTool = (function ColorPickerTool() { + + /*========== Get DOM Element By ID ==========*/ + + function getElemById(id) { + return document.getElementById(id); + } + + function allowDropEvent(e) { + e.preventDefault(); + } + + /*========== Make an element resizable relative to it's parent ==========*/ + + var UIComponent = (function UIComponent() { + + 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; + + valueX = e.clientX - elem.clientWidth; + valueY = e.clientY - elem.clientHeight; + + 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 resizeEnd = function resizeEnd(e) { + if (e.button !== 0) + return; + + document.body.removeAttribute('data-resize', axis); + document.removeEventListener('mousemove', mouseMove); + document.removeEventListener('mouseup', resizeEnd); + }; + + var handle = document.createElement('div'); + handle.className = 'resize-handle'; + + 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); + }; + + /*========== Make an element draggable relative to it's parent ==========*/ + + var makeDraggable = function makeDraggable(elem, endFunction) { + + var offsetTop; + var offsetLeft; + + elem.setAttribute('data-draggable', 'true'); + + 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 + }; + +})(); + +</pre> +</div> + +<p>{{CSSRef}}</p> + +<p>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).</p> + +<p>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.</p> + +<p>{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</p> + +<p> </p> diff --git a/files/es/web/css/css_colors/index.html b/files/es/web/css/css_colors/index.html new file mode 100644 index 0000000000..586b0e85e4 --- /dev/null +++ b/files/es/web/css/css_colors/index.html @@ -0,0 +1,119 @@ +--- +title: CSS Colors +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Colors + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Color +--- +<div>{{CSSRef}}</div> + +<p><strong>Los colores CSS</strong> son un módulo de CSS que trabaja con colores, tipos de colores y transparencias.</p> + +<h2 id="Referencia">Referencia</h2> + +<h3 id="Propiedades">Propiedades</h3> + +<div class="index"> +<ul> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("opacity")}}</li> +</ul> +</div> + +<h3 id="Tipos_de_datos_CSS">Tipos de datos CSS</h3> + +<p>{{cssxref("<color>")}}</p> + +<h2 id="Guías">Guías</h2> + +<p><em>Ninguna.</em></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Colors')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>En CSS, las gradientes no son colores sino <a href="/en-US/docs/Web/CSS/CSS_Images">imágenes</a>.</li> +</ul> diff --git a/files/es/web/css/css_containment/index.html b/files/es/web/css/css_containment/index.html new file mode 100644 index 0000000000..f0e1bb357d --- /dev/null +++ b/files/es/web/css/css_containment/index.html @@ -0,0 +1,124 @@ +--- +title: CSS Containment +slug: Web/CSS/CSS_Containment +translation_of: Web/CSS/CSS_Containment +--- +<div>{{CSSRef}}</div> +<p> + El objetivo de la espicificación CSS Containment es mejorar el rendimiento de las páginas web permitiendo a los desarrolladores aislar un subárbol del resto de la página. Si el navegador sabe si una parte de la página es independiente, se puede optimizar la renderización y el rendimiento mejora. La especificación define una única propiedad CSS {{cssxref("contain")}}. Este documento relata los objetivos básicos de la especificación.</p> + +<h2 id="Ejemplo_básico">Ejemplo básico</h2> + +<p>Muchas páginas web contienen un número de secciones que don independientes entre sí. Por ejemplo una lista de encabezados de artículo y un contenido, como en el siguiente marcado.</p> + +<pre class="brush: html notranslate"><h1>Mi blog</h1> +<article> + <h2>Encabezado de un bonito artículo</h2> + <p>Contenido del artículo.</p> +</article> +<article> + <h2>Otro encabezado de otro artículo</h2> + <p>Más contenido.</p> +</article></pre> + +<p>Cada artículo tiene la propiedad {{cssxref("contain")}} con valor <code>content</code> aplicado en el CSS.</p> + +<pre class="brush: css notranslate">article { + contain: content; +}</pre> + +<p>Cada artículo es independiente de los demás artículos en la página, y en consecuencia se les ha aplicado <code>contain: content</code> para indicar al navegador que ese es el caso. El navegador puede entonces usar esa información para tomar decisiones sobre cómo renderizar el contenido. Por ejemplo, puede no renderizar artículos que estén fuera del área visible.</p> + +<p>Si aplicamos a cada <code><article></code> la propiedad <code>contain</code> con el valor <code>content</code>, cuando se inserten nuevos elementos el navegador entiende que no necesita hacer <em>relayout </em>o <em>repaint </em>de ningun área que esté fuera del subárbol que contenga el elemento, aunque si aplicamos estilos al <code><article></code> (por ejemplo <code>height: auto</code>), el navegador puede necesitar hacerse cargo de ese cambio de tamaño.</p> + +<p>Se nos ha dicho por medio de la propiedad <code>contain</code> que cada artículo es independiente de los demás.</p> + +<p>El valor <code>content</code> es una clave para referirse al valor <code>layout paint</code>. Dice al navegador que el <em>layout</em> del elemento está totalmente separado del resto de la página, y que todo lo relacionado con el elemento es pintado dentro de sus límites. Nada puede desbordarse visualmente.</p> + +<p>Esta información es algo que normalmente es obvio para el desarrollador a la hora de crear la página web. Sin embargo, los navegadores no pueden adivinar las intenciones del desarrollador y no puede asumir que un <code><article></code> tenga que ser enteramente autocontenido. Esta propiedad, por lo tanto, provee de una buena forma de explicar este hecho al navegador, permitiendo que haga optimizaciones para el rendimiento basados en ese conocimiento.</p> + +<h2 id="Key_concepts_and_terminology">Key concepts and terminology</h2> + +<p>This specification defines only one property, the {{cssxref("contain")}} property. The values for this property indicate the type of containment that you want to apply to that element.</p> + +<h3 id="Layout_containment">Layout containment</h3> + +<pre class="brush: css notranslate">article { + contain: layout; +}</pre> + +<p>Layout is normally scoped to the entire document, which means that if you move one element the entire document needs to be treated as if things could have moved anywhere. By using <code>contain: layout</code> you can tell the browser it only needs to check this element — everything inside the element is scoped to that element and does not affect the rest of the page, and the containing box establishes an independent formatting context.</p> + +<p>In addition:</p> + +<ul> + <li><code>float</code> layout will be performed independently.</li> + <li>Margins won't collapse across a layout containment boundary</li> + <li>The layout container will be a containing block for <code>absolute</code>/<code>fixed</code> position descendants.</li> + <li>The containing box creates a stacking context, therefore {{cssxref("z-index")}} can be used.</li> +</ul> + +<h3 id="Paint_containment">Paint containment</h3> + +<pre class="brush: css notranslate">article { + contain: paint; +}</pre> + +<p>Paint containment essentially clips the box to the padding edge of the principal box. There can be no visible overflow. The same things are true for <code>paint</code> containment as <code>layout</code> containment (see above).</p> + +<p>Another advantage is that if the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box.</p> + +<h3 id="Size_containment">Size containment</h3> + +<pre class="brush: css notranslate">article { + contain: size; +}</pre> + +<p>Size containment does not offer much in the way of performance optimizations when used on its own. However, it means that the size of the element's children cannot affect the size of the element itself — its size is computed as if it had no children.</p> + +<p>If you turn on <code>contain: size</code> you need to also specify the size of the element you have applied this to. It will end up being zero-sized in most cases, if you don't manually give it a size.</p> + +<h3 id="Style_containment">Style containment</h3> + +<pre class="brush: css notranslate">article { + contain: style; +}</pre> + +<p>Despite the name, style containment does not provide scoped styles such as you would get with the <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>. The main use case is to prevent situations where a <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS Counter</a> could be changed in an element, which could then affect the rest of the tree. </p> + +<p>Using <code>contain: style</code> would ensure that the {{cssxref("counter-increment")}} and {{cssxref("counter-set")}} properties created new counters scoped to that subtree only.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: <code>style</code> containment is "at-risk" in the spec and may not be supported everywhere (it's not currently supported in Firefox).</p> +</div> + +<h3 id="Special_values">Special values</h3> + +<p>There are two special values of contain:</p> + +<ul> + <li><code>content</code></li> + <li><code>strict</code></li> +</ul> + +<p>We encountered the first in the example above. Using <code>contain: content</code> turns on <code>layout</code> and <code>paint</code> containment. The specification describes this value as being "reasonably safe to apply widely". It does not apply <code>size</code> containment, so you would not be at risk of a box ending up zero-sized due to a reliance on the size of its children.</p> + +<p>To gain as much containment as possible use <code>contain: strict</code>, which behaves the same as <code>contain: size layout paint</code>, or perhaps the following to also add <code>style</code> containment in browsers that support it:</p> + +<pre class="brush: css notranslate">contain: strict; +contain: strict style;</pre> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<ul> + <li>{{cssxref("contain")}}</li> +</ul> + +<h2 id="External_resources">External resources</h2> + +<ul> + <li><a href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">An Introduction to CSS Containment</a></li> + <li><a href="https://dev.opera.com/articles/css-will-change-property">Everything You Need to Know About the CSS <code>will-change</code> Property</a></li> +</ul> diff --git a/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html new file mode 100644 index 0000000000..154480239b --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -0,0 +1,231 @@ +--- +title: Aligning Items in a Flex Container +slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +tags: + - Align + - CSS + - Flex + - Guía + - Tutorial + - align-content + - align-self + - alineación + - alinear + - flexbox + - justify + - justify-content + - rejillas +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +--- +<p>{{CSSRef}}</p> + +<p class="summary">Una de las razones por las que flexbox atrajo rápidamente el interés de los desarrolladores web es que por primera vez en la web se ha conseguido unas posibilidades completas de alineamiento de elementos. Se habilita la alineación vertical, de modo que por fin existe una manera rápida y facil de centrar una caja. A lo largo de esta guía, vamos a desarrollar un exhaustivo recorrido sobre el funcionamiento de las propiedades de alineamiento y justificación en Flexbox.</p> + +<p><span class="tlid-translation translation"><span title="">Para centrar nuestra caja, usamos la propiedad align-items para alinear nuestro artículo en el eje transversal, que en este caso es el eje del bloque que se ejecuta verticalmente.</span> <span title="">Utilizamos justify-content para alinear el elemento en el eje principal, que en este caso el eje en línea se ejecuta horizontalmente.</span></span></p> + +<p><img alt="A containing element with another box centered inside it." src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p> + + + +<p><span class="tlid-translation translation"><span title="">Puedes echar un vistazo al código de este ejemplo a continuación.</span> <span title="">Cambia el tamaño del contenedor o elemento anidado y el elemento anidado siempre permanece centrado.</span></span></p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p> + +<h2 id="Propiedades_que_controlan_la_alineación."><span class="tlid-translation translation"><span title="">Propiedades que controlan la alineación.</span></span></h2> + +<p><span class="tlid-translation translation"><span title="">Las propiedades que veremos en esta guía son las siguientes.</span></span></p> + +<ul> + <li>{{cssxref("justify-content")}} — <span class="tlid-translation translation"><span title="">controla la alineación de todos los elementos en el eje principal.</span></span></li> + <li>{{cssxref("align-items")}} — <span class="tlid-translation translation"><span title="">controla la alineación de todos los elementos en el eje transversal.</span></span></li> + <li>{{cssxref("align-self")}} — <span class="tlid-translation translation"><span title="">controla la alineación de un elemento flexible individual en el eje transversal.</span></span></li> + <li>{{cssxref("align-content")}} — <span class="tlid-translation translation"><span title="">descrito en la especificación como para "empaquetar líneas flexibles";</span> <span title="">Controla el espacio entre las líneas de flexión en el eje transversal.</span></span></li> +</ul> + +<p><span class="tlid-translation translation"><span title="">También descubriremos cómo se pueden usar los márgenes automáticos para la alineación en flexbox</span></span></p> + +<div class="note"> +<p><span class="tlid-translation translation"><span title="">Nota: Las propiedades de alineación en Flexbox se han colocado en su propia especificación</span></span> — <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. <span class="tlid-translation translation"><span title="">Se espera que esta especificación finalmente reemplace las propiedades tal como se definen en Flexbox Nivel Uno.</span></span></p> +</div> + +<h2 id="El_eje_transversal"><span class="tlid-translation translation"><span title="">El eje transversal</span></span></h2> + +<p><span class="tlid-translation translation"><span title="">Las propiedades </span></span><code>align-items</code><span class="tlid-translation translation"><span title=""> y </span></span><code>align-self</code><span class="tlid-translation translation"><span title=""> controlan la alineación de nuestros elementos flexibles en el eje transversal, en filas si </span></span><code>flex-direction</code><span class="tlid-translation translation"><span title=""> se encuentra en row ó en columnas si </span></span><code>flex-direction se encuentra en</code><span class="tlid-translation translation"><span title=""> column.</span><br> + <br> + <span title="">Estamos haciendo uso de la alineación del eje transversal en el ejemplo de flexión más simple.</span> <span title="">Si agregamos display: flex a un contenedor, todos los elementos secundarios se convierten en elementos flexibles organizados en una fila.</span> <span title="">Todos se estirarán para ser tan altos como el elemento más alto, ya que ese elemento define la altura de los elementos en el eje transversal.</span> <span title="">Si su contenedor flexible tiene una altura establecida, entonces los elementos se extenderán a esa altura, independientemente de la cantidad de contenido en el elemento.</span></span></p> + +<p><img alt="Three items, one with additional text causing it to be taller than the others." src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p> + +<p><img alt="Three items stretched to 200 pixels tall" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p> + + + +<p>La razón por la que los elementos se convierten en la misma altura es que el valor inicial de <code>align-items</code>, la propiedad que controla la alineación en el eje transversal, se establece en <code>stretch</code>.</p> + +<p>Podemos usar otros valores para controlar como se alinean los items:</p> + +<ul> + <li><code>align-items: flex-start</code></li> + <li><code>align-items: flex-end</code></li> + <li><code>align-items: center</code></li> + <li><code>align-items: stretch</code></li> + <li><code>align-items: baseline</code></li> +</ul> + +<p>En el ejemplo en vivo a continuación, el valor de <code>align-items</code> is <code>stretch</code>. Pruebe los otros valores y vea cómo todos los elementos se alinean entre sí en el contenedor flexible.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p> + +<h3 id="Alineando_un_item_individual_con_align-self">Alineando un item individual con align-self</h3> + +<p>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 <code>align-self </code>para apuntar a un solo elemento. La propiedad<code> align-self </code>acepta todos los mismos valores que <code>align-items</code>, además del valor <code>auto</code>, que restablecerá el valor a lo que esté definido en el contenedor flex o flexible..</p> + +<p>En este siguiente ejemplo en vivo, el contenedor flex tiene el elemento de alineación:<code> flex-start</code>, 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 <code>first-child</code>, y se configuró con la propiedad: <code>strecth</code>; otro elemento ha sido alineado, utilizando su clase <code>selected </code> y dando valor a la propiedad <code> align-self: center</code>. Puede cambiar el valor de a<code>lign-items</code> o cambiar los valores de <code>align-self</code> en los elementos individuales para ver cómo funciona esto.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} </p> + +<h3 id="Cambiando_el_eje_principal">Cambiando el eje principal</h3> + +<p>Hasta ahora hemos examinado el comportamiento cuando nuestra <code>flex-direction</code> es <code>row</code>, y mientras trabajamos en un lenguaje escrito de arriba a abajo. Esto significa que el eje principal corre a lo largo de la fila horizontalmente, y nuestra alineación del eje transversal mueve los elementos hacia arriba y hacia abajo.</p> + +<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p> + +<p>Si cambiamos nuestra <code>flex-direction</code> a columna, <code>align-items</code> y <code>align-self</code> van a alinear los items a la derecha y a la izquierda.</p> + +<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p> + +<p>Puede probarlo con el siguiente ejemplo, que tiene un contenedor flexible, con <code>flex-direction: column </code>, y que de lo contrario seria exactamente igual al ejemplo anterior. .</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} </p> + +<h2 id="Alineando_el_contenido_en_el_eje_transversal_la_propiedad_align-content">Alineando el contenido en el eje transversal: la propiedad align-content</h2> + +<p>Hasta ahora hemos estado alineando los elementos, o un elemento individual dentro del área definida por el contenedor flexible. Si tiene un contenedor flexible de varias líneas envuelto, también puede usar la propiedad <code>align-content</code> para controlar la distribucion del espacio entre las filas. En la especificación, esto se describe como <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">empaquetamiento de lineas flexibles</a>.</p> + +<p>Para que <code>align-content</code> funcione necesita una mayor altura en su contenedor flexible que la que requiere para mostrar los items. A partir de ahi el tratara a todos los items como un conjunto, para determinar que sucede con ese espacio libre y y la alineacion de todo el conjunto de elementos que contiene. </p> + +<p>La propiedad <code>align-content</code> acepta los siguientes valores:</p> + +<ul> + <li><code>align-content: flex-start</code></li> + <li><code>align-content: flex-end</code></li> + <li><code>align-content: center</code></li> + <li><code>align-content: space-between</code></li> + <li><code>align-content: space-around</code></li> + <li><code>align-content: stretch</code></li> + <li><code>align-content: space-evenly</code> (not defined in the Flexbox specification)</li> +</ul> + +<p>En el ejemplo en vivo siguiente, el contenedor flexible, tiene una altura de 400 pixels, lo cual es mas de lo que necesita para mostrar nuestros items. El valor de <code>align-content</code> lo que significa que el espacio disponible es compartido entre las lineas flexibles que estan colocadas al ras al inicio y al final del contenedor en el eje transversal. </p> + +<p>Pruebe con otros valores para ver como la propiedad <code>align-content</code> funciona.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p> + +<p>Una vez mas podemos cambiar nuestra <code>flex-direction</code> a <code>column</code> para ver como esta propieda se comporta cuando trabajamos con columnas. Al igual que antes necesitamos suficiente espacio en el eje transversal para dejar algun espacio libre despues de mostrar todos los items </p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p> + +<div class="note"> +<p><strong>Nota</strong>: El valor <code>space-evenly</code> no está definido en las especificaciones de flexbox y la ultima adiccion a las especificaciones de Alineacion de cajas Box Alignment . El soporte del navegador para este valor no es tan bueno como el de los valores definidos en la especificación de flexbox.</p> +</div> + +<p>Revise la <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">documentacion para <code>justify-content</code> en MDN</a> para encontrar más detalles de todos sus valores y el soporte de los navegadores.</p> + +<h2 id="Alineando_contenido_en_el_eje_principal">Alineando contenido en el eje principal</h2> + +<p>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 — <code>justify-content</code>. Esto se debe a que solo podemos trabajar con los items como grupos en el eje principal. Con <code>justify-content</code> controlamos que sucede con el espacion disponible, en caso de que haya más espacio del que se necesita para mostrar los items </p> + +<p>En nuestro ejemplo inicial con <code>display: flex</code> 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 <code>justify-content </code>es <code>flex-star</code>t. Cualquier espacio disponible se coloca al final de los elementos.</p> + +<p><img alt="Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + +<p>La propiedad <code>justify-content</code> accepta el mismo valor que <code>align-content</code>.</p> + +<ul> + <li><code>justify-content: flex-start</code></li> + <li><code>justify-content: flex-end</code></li> + <li><code>justify-content: center</code></li> + <li><code>justify-content: space-between</code></li> + <li><code>justify-content: space-around</code></li> + <li><code>justify-content: stretch</code></li> + <li><code>justify-content: space-evenly</code> (not defined in the Flexbox specification)</li> +</ul> + +<p>En el ejemplo a continuacion el valor de <code>justify-content</code> es <code>space-between</code>. El espacio disponible despues de mostrar los items es distribuido entre estos. El elemento izquierdo y derecho se alinea al ras con el inicio y el final.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} </p> + +<p>Si el eje principal esta en direccion bloque porque <code>flex-direction</code> tiene valor <code>column</code>, entonces <code>justify-content</code> distribuira el espacio entre items, en la misma medida que el posee el espacio en el contenedor flex para ser distribuida, o sea siempre que haya espacio en el contenedor para distribuir. </p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} </p> + +<h3 id="Modos_de_Alineación_y_escritura">Modos de Alineación y escritura</h3> + +<p>Recuerda que con todos estos metodos de alineación los valores de <code>flex-start</code> y <code>flex-end</code> son escritos en modo consciente. Si el valor de <code>justify-content</code> es <code>start</code> y el modo de escritura es izquierda a derecha, como en español o ingles, los elementos se alinearán comenzando en el lado izquierdo del contenedor</p> + +<p><img alt="Three items lined up on the left" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>Sin embargo si el modo de escritura es de derecha a izquierda como en arabe, los elementos o items se alinearán en el extremo derecho del contenedor.</p> + +<p><img alt="Three items lined up from the right" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> + +<p>El ejemplo siguiente tiene la propiedad <code>direction</code> con valor <code>rtl</code> para forzar a los elementos a colocarse de derecha a izquierda. Puedes eliminarlo o cambiar los valores de <code>justify-content</code> para ver como flexbox se comporta cuando el inicio de la direccion dentro de la linea, es a la derecha. </p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p> + +<h2 id="Alineacíon_y_flex-direction">Alineacíon y flex-direction</h2> + +<p>La linea de inicio también cambiará si cambias la propiedad <code>flex-direction</code> — por ejemplo usando <code>row-reverse</code> en vez de <code>row</code>.</p> + +<p>En el ejemplo siguiente tengo items dispuestos con <code>flex-direction: row-reverse</code> y <code>justify-content: flex-end</code>. En lenguaje de izquierda a derecha, estos elementos se alinearan a la izquierda. Prueba a cambiar <code>flex-direction: row-reverse</code> a <code>flex-direction: row</code>. Veras como los elementos ahora se mueven a la derecha. </p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p> + +<p>Considerando que esto puede ser algo confuso, la regla a tener en cuenta es que a no ser que hagas algo para cambiarlo, los items flexible se alinean en la misma direccion que las palabras se ordenan linealmente en el lenguaje de tu documento a lo largo de la linea. <code>flex-start</code> comenzará donde el inicio de la oracion debe comenzar. </p> + +<p><img alt="Diagram showing start on the left and end on the right." src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>Puedes cambiarlo para que aparezcan en dirección de bloque, para el lenguaje de tu documento, seleccionando <code>flex-direction: column</code>. Luego <code>flex-start</code> estará donde la parte superior del primer parrafo de texto comenzaria. </p> + +<p><img alt="Diagram showing start at the top and end at the bottom." src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> + +<p>Si cambias flex-direction a uno de los valores inversos, entonces se distribuirán desde el eje final y en el orden inverso a la forma en que se escriben las palabras en el idioma de su documento. <code>flex-start</code> cambiará al final de ese eje — por lo tanto, a la ubicación donde se ajustarán sus líneas si trabaja en filas, o al final de su último párrafo de texto, en la dirección en bloque.</p> + +<p><img alt="Diagram showing start on the right and end on the left." src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p><img alt="Diagram showing end at the top and start at the bottom" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> + +<h2 id="Usando_auto_margenes_para_la_alineación_en_el_eje_principal">Usando auto margenes para la alineación en el eje principal </h2> + +<p>No tenemos una propiedad <code>justify-items</code> o <code>justify-self</code> disponible en el eje principal para nuestros items, ya que estos son tratados como un grupo en este eje. Sin embargo es posible realizar cierta alineación individual, para separar un elemento o un grupo de elementos de otros, usando automargenes, o margenes automaticos con flebox. </p> + +<p>Un patrón común es una barra de navegación donde algunos elementos clave se alinean a la derecha, con el grupo principal a la izquierda. Podría pensarse que este debería ser un caso de uso para una propiedad de <code>justify-self</code> , sin embargo, considere la imagen a continuación. Tengo tres artículos en un lado y dos en el otro. Si pudiera usar <code>justify-self</code> en el elemento <em>d</em>, también cambiaría la alineación del artículo <em>e</em> que sigue, lo cual puede o no ser mi intención.</p> + +<p><img alt="Five items, in two groups. Three on the left and two on the right." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p> + +<p>En cambio podemos enfocarnos en el item 4 y separarlo de los tres primeros elementos dandole a este un valor al <code>margin-left</code> de <code>auto</code>. El auto margen tomará todo el espacio que puedan en su eje — así es como funciona el centrado de un bloque con los margenes automáticos a derecha e izquierda. Cada lado trata de ocupar tanto espacio como puede, y así el bloque se empuja hacia el medio.</p> + +<p>En este ejemplo en vivo, tenemos elementos flexibles, organizados simplemente en una fila con los valores básicos de flexión, y la clase <code> push</code> tiene <code>margin-left: auto</code>. Puedes intentar eliminarlo o agregar la clase a otro elemento para ver cómo funciona.</p> + + + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p> + +<h2 id="Futuras_caracteristicas_de_alineación_para_Flexbox">Futuras caracteristicas de alineación para Flexbox</h2> + +<p>Al principio de este artículo, expliqué que las propiedades de alineación actualmente contenidas en la especificación de flexbox de Nivel 1 también se incluyen en el Nivel de Alineación de Casillas 3, que puede extender estas propiedades y valores en el futuro. Ya hemos visto un lugar donde esto ha sucedido, con la introducción del <code>space-evenly</code> para las propiedades de <code>align-content</code> y <code>justify-content</code>.</p> + +<p> El módulo de alineación de cuadro también incluye otros métodos para crear espacio entre elementos, como la función de <code>column-gap</code> y <code>ow-gap</code>, como se ve en el <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout"> Diseño de rejillas de CSS</a>. La inclusión de estas propiedades en la Alineación de cajas significa que en el futuro también deberíamos poder utilizar <code>column-gap</code> y <code>row-gap</code> tambien en diseños flexibles. Esto significará que no tendremos que usar márgenes para espaciar los elementos flexibles.</p> + +<p> Mi sugerencia al explorar en profundidad la alineación de flexbox es hacerlo conjuntamente con la alineación en Diseño de rejillas. Ambas especificaciones utilizan las propiedades de alineación que se detallan en la especificación de Alineación de cajas. Puede ver cómo se comportan estas propiedades cuando se trabaja con una cuadrícula en el artículo de MDN <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineación de cajas</a> , y también he comparado cómo funciona la alineación en estas especificaciones en mi <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Hoja de trucos de alineacion de cajas</a>.</p> + + + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Alineación de cajas</a></li> + <li> <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Alineación en Flexbox</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">Alineación de cajs en Diseño de rejillas</a></li> +</ul> diff --git a/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..ca416812f3 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,112 @@ +--- +title: Compatibilidad con versiones anteriores de Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +--- +<div>{{CSSRef}}</div> + +<p class="summary"><span class="notranslate">Flexbox es muy compatible con los navegadores modernos, sin embargo, hay algunos problemas con los que puede encontrarse.</span> <span class="notranslate"> En esta guía, veremos qué tan bien se admite flexbox en los navegadores, y veremos algunos posibles problemas, recursos y métodos para crear soluciones y fallos.</span></p> + +<h2 id="La_historia_de_flexbox"><span class="notranslate">La historia de flexbox</span></h2> + +<p><span class="notranslate">Al igual que con todas las especificaciones CSS, la especificación Flexbox experimentó una gran cantidad de cambios antes de convertirse en la Recomendación de Candidato que tenemos hoy.</span> <span class="notranslate"> Como recomendación de un candidato, no deberíamos ver grandes cambios en este punto de la especificación, sin embargo, este no ha sido el caso con las iteraciones anteriores de flexbox.</span></p> + +<p><span class="notranslate">Flexbox se implementó de forma experimental en varios navegadores web.</span> <span class="notranslate"> En ese momento, el método para crear implementaciones experimentales era utilizar un prefijo de proveedor.</span> <span class="notranslate"> La idea de estos prefijos era permitir que las implementaciones de la especificación fueran probadas y exploradas por ingenieros de navegadores y desarrolladores web por igual sin chocar con otras implementaciones.</span> <span class="notranslate"> La idea no era utilizar las implementaciones experimentales en el código de producción.</span> <span class="notranslate"> Sin embargo, los prefijos finalmente se usaron en el código de producción, y los cambios en la especificación experimental hicieron que las personas necesitaran actualizar sus sitios para mantenerse al día.</span></p> + +<p><span class="notranslate"><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhgJrJ-4Kq-8QScbSc51wpTjPm82pg" rel="noopener">En 2009</a> , la especificación se veía bastante diferente.</span> <span class="notranslate"> Para crear un contenedor flexible, usaría <code>display: box</code> y había una serie de propiedades <code>box-*</code> , que hicieron cosas que reconocerá hoy en flexbox.</span></p> + +<p><span class="notranslate">Hubo una <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhicnum0sG8w9q_jY-H3SvbkxBPHwQ" rel="noopener">actualización de la especificación</a> que actualizó la sintaxis para <code>display: flexbox</code> : esto fue nuevamente prefijado por el proveedor.</span></p> + +<p><span class="notranslate">Finalmente, la especificación se actualizó para definir <code>display: flex</code> como la forma de crear un contenedor de flex.</span> <span class="notranslate"> El soporte del navegador para la versión actualizada de la especificación es excelente a partir de este momento.</span></p> + +<p><span class="notranslate">Existen algunos artículos antiguos que hacen referencia a las versiones anteriores de flexbox, que son bastante fáciles de identificar debido al cambio en la forma en que se crea un contenedor flexible.</span> <span class="notranslate"> Si encuentra algo que se refiere a <code>display: box</code> o <code>display: flexbox</code> esta es información desactualizada.</span></p> + +<h2 id="Estado_en_navegadores"><span class="notranslate">Estado en navegadores</span></h2> + +<p><span class="notranslate">La compatibilidad del navegador para flexbox es excelente, y la mayoría de los navegadores no necesitan un prefijo en este momento.</span> <span class="notranslate"> Safari fue el último de los principales navegadores en eliminar los prefijos, con el lanzamiento de Safari 9 en 2015. Los dos navegadores que aún debe tener en cuenta para la compatibilidad entre navegadores son:</span></p> + +<ul> + <li><span class="notranslate">Internet Explorer 10, que implementó la versión <code>display: flexbox</code> de la especificación con el prefijo <code>-ms-</code> .</span></li> + <li><span class="notranslate">UC Browser, que aún admite la versión 2009 <code>display: box</code> versión de <code>display: box</code> solo con el prefijo <code>-webkit-</code> .</span></li> +</ul> + +<p><span class="notranslate">Tenga en cuenta también que Internet Explorer 11 es compatible con la <code>display: flex</code> moderna <code>display: flex</code> especificación <code>display: flex</code> sin embargo, tiene una serie de errores en la implementación.</span></p> + +<h2 id="Problemas_comunes"><span class="notranslate">Problemas comunes</span></h2> + +<p><span class="notranslate">La mayoría de los problemas con flexbox se relacionan con los cambios en la especificación, tal como se ha desarrollado, y el hecho de que muchos de nosotros intentamos usar una especificación experimental en la producción.</span> <span class="notranslate"> Si está tratando de garantizar la compatibilidad con versiones anteriores de los navegadores, y en particular IE10 y 11, el sitio <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://github.com/philipwalton/flexbugs&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhjo_N9xnO5hhxBBK9uIQrirvCNcew" rel="noopener">Flexbugs</a> es un recurso útil.</span> <span class="notranslate"> Verá que muchos de los errores enumerados se aplican a las versiones antiguas del navegador y se corrigen en los navegadores actuales.</span> <span class="notranslate"> Cada uno de los errores tiene una solución alternativa que puede ahorrarle muchas horas de desconcierto.</span></p> + +<p><span class="notranslate">Si desea incluir navegadores muy antiguos con soporte de flexbox, puede incluir los prefijos de proveedor en su CSS además de la versión no prefijada.</span> <span class="notranslate"> Esto se está volviendo cada vez menos un requisito hoy en día, ya que el apoyo es generalizado.</span> <code> </code></p> + +<pre class="brush: css">.wrapper { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +}</pre> + +<p><span class="notranslate"><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://autoprefixer.github.io/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhgUf9PulOznp3VQPaivCYCaHK66Kw" rel="noopener">Autoprefixer Online</a> es una forma útil de ver qué prefijos se recomiendan, dependiendo de cuántas versiones desee volver con el soporte del navegador.</span> <span class="notranslate"> También puede consultar <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://caniuse.com/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhg8XWV2r6QkTzw5qCNTnuJp_Y5C_g#feat=flexbox" rel="noopener">¿Puedo usar?</a> Para obtener información sobre cuándo se eliminaron los prefijos en los navegadores para tomar su decisión.</span></p> + +<h2 id="Técnicas_de_respaldo_útiles"><span class="notranslate">Técnicas de respaldo útiles</span></h2> + +<p><span class="notranslate">Dado que el uso de flexbox se inicia con el valor de la propiedad de <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/display&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhgSinAc_I4iXIR_wMxppck0UYRiAQ" title="La propiedad de visualización de CSS define el tipo de visualización de un elemento, que consta de las dos cualidades básicas de cómo un elemento genera cuadros: el tipo de visualización externa que define cómo participa el cuadro en el diseño de flujo y el tipo de visualización interna que define cómo los hijos de caja se presentan."><code>display</code></a> , cuando se necesita admitir navegadores muy antiguos que no admiten flexbox en absoluto, se pueden crear fallos sobrescribiendo un método de diseño con otro.</span> <span class="notranslate"> La especificación define lo que sucede si usa otros métodos de diseño en un elemento que luego se convierte en un elemento flexible.</span></p> + +<h3 id="Floated_items">Floated items</h3> + +<blockquote> +<p><span class="notranslate">"Flotar y despejar no crea flotación o espacio libre del elemento flexible, y no lo saque del flujo". <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://www.w3.org/TR/css-flexbox-1/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhjDp2CbMhmsn5qPNrWItombb2edTA#flex-containers" rel="noopener">3. Contenedores flexibles</a></span></p> +</blockquote> + +<p><span class="notranslate">En el siguiente ejemplo en vivo, floté dos bloques y luego configuré <code>display: flex</code> en el contenedor.</span> <span class="notranslate"> Los artículos ahora son artículos flexibles, lo que significa que se estiran a la misma altura.</span> <span class="notranslate"> Cualquier comportamiento de flotación no se aplica.</span></p> + +<p><span class="notranslate">Puede probar el comportamiento alternativo eliminando <code>display: flex</code> del contenedor.</span></p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}</p> + +<h3 id="display_inline-block">display: inline-block</h3> + +<p><span class="notranslate">Una vez que un elemento de <code>inline-block</code> convierte en un elemento flexible, se <code>block</code> y, por lo tanto, el comportamiento de la <code>display: inline-block</code> como preservar el espacio en blanco entre elementos ya no se aplica.</span></p> + +<p><span class="notranslate">Eliminar <code>display: flex</code> para ver el comportamiento de reserva.</span> <span class="notranslate"> Verá un espacio en blanco agregado entre los elementos, que es lo que sucede cuando se usa <code>display: inine-block</code> ya que prefiere el espacio en blanco como otros elementos en línea.</span></p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}</p> + +<h3 id="display_table-">display: table-<em> </em></h3> + +<p><span class="notranslate">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.</span></p> + +<p><span class="notranslate">Si usa <code>display: table-cell</code> en un elemento en su HTML, toma el estilo de una celda de tabla HTML.</span> <span class="notranslate"> CSS crea cuadros anónimos para representar estos elementos para que no necesite envolver cada elemento en un contenedor para representar la fila de la tabla HTML, y un segundo para representar el elemento de la tabla en sí. No puede ver ni diseñar estos cuadros anónimos;</span> <span class="notranslate"> Están allí para arreglar el árbol.</span></p> + +<p><span class="notranslate" style="background-color: #e6ecf9;">Si luego declara <code>display: flex</code> 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.</span></p> + +<blockquote> +<p><span class="notranslate">“Nota: algunos valores de visualización normalmente desencadenan la creación de cuadros anónimos alrededor del cuadro original.</span> <span class="notranslate"> Si dicha caja es un elemento flexible, primero se bloquea y, por lo tanto, no se creará una caja anónima.</span> <span class="notranslate"> 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. "- <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://www.w3.org/TR/css-flexbox-1/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhjDp2CbMhmsn5qPNrWItombb2edTA#flex-items" rel="noopener">4. Elementos Flexibles</a></span></p> +</blockquote> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}</p> + +<h3 id="The_vertical-align_property">The vertical-align property</h3> + +<p><span class="notranslate">El siguiente ejemplo en vivo demuestra el uso de la propiedad de <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhgr6-d_RsAVtumplNGhUEUMAo35sQ" title="La propiedad CSS de alineación vertical establece la alineación vertical de un cuadro en línea o de celda de tabla."><code>vertical-align</code></a> junto con <code>display: inline-block</code> .</span> <span class="notranslate"> Tanto <code>display: table-cell</code> como <code>display: inline-block</code> permiten el uso de esta propiedad.</span> <span class="notranslate"> El uso de <code>vertical-align</code> vertical permite la alineación vertical antes de flexbox.</span> <span class="notranslate"> Flexbox ignora la propiedad, por lo que puede usarla junto con <code>display: table-cell</code> o <code>display: inline-block</code> como respaldo y luego usar de forma segura las propiedades de alineación de caja en flexbox.</span></p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}</p> + +<h2 id="Consultas_de_funciones_y_flexbox"><span class="notranslate">Consultas de funciones y flexbox</span></h2> + +<p><span class="notranslate">Puede usar <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/%2540supports&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhici5EQces8PvRioklpq77xc2SfEA">consultas de funciones</a> para detectar la compatibilidad con flexbox:</span></p> + +<pre class="brush: css">@supports (display: flex) { + // code for supporting browsers +}</pre> + +<p><span class="notranslate">Tenga en cuenta que Internet Explorer 11 no admite consultas de funciones, pero <em>sí</em> admite flexbox.</span> <span class="notranslate"> Si decide que la implementación de IE11 es demasiado defectuosa y desea servirle el diseño alternativo, entonces podría usar consultas de características para servir las reglas de flexbox solo a aquellos navegadores con un buen soporte de flexbox.</span> <span class="notranslate"> Recuerde que si desea incluir versiones de navegadores que tengan flexbox prefijado por el proveedor, deberá incluir la versión prefijada en su consulta de características.</span> <span class="notranslate"> La siguiente consulta de características incluiría UC Browser, que admite consultas de características y sintaxis antigua de flexbox, con el prefijo:</span></p> + +<pre class="brush: css">@supports (display: flex) or (display: -webkit-box) { + // code for supporting browsers +}</pre> + +<p><span class="notranslate">Para obtener más información sobre el uso de consultas de características, consulte <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhhjVsZfMKM6WW4F60-6U_P7RNoSjg" rel="noopener">Uso de consultas de características en CSS</a> en el blog Mozilla Hacks.</span></p> + +<h2 id="Conclusión"><span class="notranslate">Conclusión</span></h2> + +<p><span class="notranslate">Si bien pasé algún tiempo en esta guía analizando posibles problemas y retrocesos, flexbox está muy listo para que lo use en el trabajo de producción.</span> <span class="notranslate"> Esta guía lo ayudará en aquellos casos en los que encuentre un problema o tenga el requisito de admitir navegadores antiguos.</span></p> diff --git a/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html new file mode 100644 index 0000000000..9048cbb739 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html @@ -0,0 +1,133 @@ +--- +title: Casos de uso típicos de Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Casos_de_uso_tipicos_de_Flexbox. +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +<p>{{CSSRef}}</p> + +<p class="summary">En esta guía, analizaremos algunos de los casos de uso comunes de flexbox, en aquellos lugares donde tiene más sentido que otro método de diseño.</p> + +<h2 id="¿Por_qué_elegir_flexbox">¿Por qué elegir flexbox?</h2> + +<p>En un mundo perfecto de compatibilidad con navegadores, la razón por la que elegiría utilizar flexbox es porque desea colocar una colección de elementos en una dirección u otra. Estos son los usos para los que fue diseñado flexbox. Puede leer más sobre la diferencia entre flexbox y CSS Grid Layout en <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relación de Flexbox con respecto a otros métodos de diseño</a>, donde discutimos cómo encaja flexbox en la imagen general de CSS Layout.</p> + +<p>En realidad, a menudo también usamos Flexbox para trabajos que Grid Layout podría realizar mejor, como un respaldo para Grid, y también para obtener capacidades de alineación. Esto es algo que puede cambiar una vez que se implemente Box Alignment en Block Layout. En esta guía analizo algunas de las cosas típicas que podría usar flexbox hoy día.</p> + +<h2 id="Navegación">Navegación</h2> + +<p>Un patrón común para la navegación es tener una lista de elementos mostrada como una barra horizontal. Este patrón, tan básico como parece, era difícil de lograr antes de flexbox. Este es el ejemplo más simple de flexbox, y podría considerarse el caso ideal de uso de flexbox.</p> + +<p>Cuando tenemos un conjunto de elementos que queremos mostrar horizontalmente, podemos terminar con espacio adicional. Necesitamos decidir qué hacer con ese espacio y tener un par de opciones. O bien mostramos el espacio fuera de los elementos, los separamos, por consiguiente, con espacios en blanco entre ellos o alrededor de ellos, o absorbemos el espacio adicional dentro de los elementos, por lo tanto, necesitamos un método para permitir que los elementos crezcan y ocupen este espacio.</p> + +<h3 id="Espacio_distribuido_fuera_de_los_elementos">Espacio distribuido fuera de los elementos</h3> + +<p>Para distribuir el espacio entre o alrededor de los elementos, usamos las propiedades de alineación en flexbox y la propiedad {{cssxref ("justify-content")}}. Puede leer más sobre esta propiedad en <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Alinear elementos en un contenedor flexible</a>, que trata sobre la alineación de elementos en el eje principal.</p> + +<p>En el siguiente ejemplo en vivo, mostramos los elementos en su tamaño natural y utilizando <code>justify-content: space-between</code> crea cantidades iguales de espacio entre los elementos. Puede cambiar la forma en que se distribuye el espacio utilizando el valor <code>space-around</code>, o, donde sea compatible, <code>space-evenly</code>. También puede usar <code>flex-start</code> para colocar el espacio al final de los elementos, <code>flex-end</code> para colocarlo delante de ellos, o <code>center</code> para centrar los elementos de navegación.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}</p> + +<h3 id="Espacio_distribuido_dentro_de_los_elementos">Espacio distribuido dentro de los elementos</h3> + +<p>Un patrón diferente para la navegación sería distribuir el espacio disponible dentro de los elementos, en lugar de crear un espacio entre ellos. En este caso, utilizaríamos las propiedades {{cssxref ("flex")}} para permitir que los elementos crezcan y se reduzcan en proporción entre sí, como se describe en <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Control la proporción de elementos flexibles a lo largo del eje principal</a>.</p> + +<p>Si quisiera que todos mis elementos de navegación tuvieran el mismo ancho, entonces podría usar <code>flex: auto</code>, que es la abreviatura de <code>flex: 1 1 auto,</code> todos los elementos crecen y se contraen desde una flex-basis de auto. Esto significaría que el elemento más largo tendría más espacio.</p> + +<p>En el ejemplo en vivo a continuación, intente cambiar <code>flex: auto</code> a <code>flex: 1</code>. Esta es la abreviatura de <code>flex: 1 1 0</code> y hace que todos los elementos se vuelvan del mismo ancho, ya que están trabajando desde una flex-basis de 0 permitiendo que todo el espacio sea distribuido uniformemente.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}</p> + +<h2 id="Navegación_dividida">Navegación dividida</h2> + +<p>Otra forma de alinear elementos en el eje principal es usar márgenes automáticos. Esto permite el patrón de diseño de una barra de navegación donde un grupo de elementos se alinean a la izquierda y otro grupo se alinea a la derecha.</p> + +<p>Aquí estamos utilizando la técnica de márgenes automáticos descrita en <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#Using_auto_margins_for_main_axis_alignment">Uso de márgenes automáticos para la alineación del eje principal</a>. Los elementos se alinean en el eje principal con <code>flex-start</code> ya que este es el comportamiento inicial de flexbox, y estamos alineando el elemento de la derecha dándole un margen izquierdo de auto. Puede mover la clase de un elemento a otro para cambiar dónde ocurre la división.</p> + +<p>También en este ejemplo, estamos utilizando márgenes en los elementos flexibles para crear un espacio entre los elementos, y un margen negativo en el contenedor para que los elementos aún permanezcan a nivel con los bordes derecho e izquierdo. Hasta que las propiedades <code>gap</code> de la especificación de alineación de caja sea implementada en flexbox, debemos usar márgenes de esta manera si queremos crear un margen entre los elementos.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}</p> + +<h2 id="Centrar_elemento">Centrar elemento</h2> + +<p>Antes de flexbox, los desarrolladores bromeaban con que el problema más difícil en el diseño web era el centrado vertical. Esto ahora se ha hecho sencillo usando las propiedades de alineación en flexbox, como muestra el siguiente ejemplo en vivo.</p> + +<p>Puedes jugar con la alineación, alineando el elemento con el inicio con <code>flex-start</code> o al final con <code>flex-end</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}</p> + +<p>Es posible que en el futuro no tengamos que crear un contenedor en un contenedor flexible solo para centrar un solo elemento, ya que las propiedades de Alineación de cuadro se implementarán en última instancia en el diseño del bloque. Por ahora, sin embargo, si necesita centrar correctamente una cosa dentro de otra, flexbox es la forma de hacerlo. Como en el ejemplo anterior, convierta un contenedor en un contenedor flexible y luego utilice <code>align-items</code> en el elemento principal o apunte el propio elemento de flexión con <code>align-self</code>.</p> + +<h2 id="Diseño_de_tarjeta_empujando_hacia_abajo_el_footer">Diseño de tarjeta empujando hacia abajo el footer</h2> + +<p>Ya sea que use flexbox o CSS Grid para diseñar una lista de componentes de tarjeta, estos métodos de diseño solo funcionan en los elementos directos de los componentes flex o grid. Esto significa que si tiene cantidades variables de contenido, la tarjeta se extenderá hasta la altura del área de la cuadrícula o del contenedor flexible. Cualquier contenido interno usa un diseño de bloque regular, lo que significa que en una tarjeta con menos contenido, el pie de página subirá hasta la parte inferior del contenido en lugar de adherirse a la parte inferior de la tarjeta.</p> + +<p><img alt="Two card components showing that the internals of the component do not stretch with the wrapper." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p> + +<p>Flexbox puede resolver esto. Hacemos de la tarjeta un contenedor flexible, con <code>{{cssxref ("flex-direction")}} :column</code>. A continuación, configuramos el área de contenido con <code>flex: 1</code>, que es la abreviatura de <code>flex: 1 1 0</code>; el elemento puede crecer y reducirse desde una base flexible de 0. Como este es el único elemento que puede crecer, ocupa todo el espacio disponible en el contenedor flexible y empuja el pie de página hacia abajo. Si elimina la propiedad <code>flex</code> del ejemplo en vivo, verá cómo el pie de página se mueve hacia arriba para sentarse directamente debajo del contenido.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}</p> + +<h2 id="Objetos_multimedia">Objetos multimedia</h2> + +<p>El objeto multimedia es un patrón común en el diseño web: este patrón tiene una imagen u otro elemento a un lado y el texto a la derecha. Idealmente, un objeto multimedia debería poder voltearse, moviendo la imagen de izquierda a derecha.</p> + +<p>Vemos este patrón en todas partes, usado para comentarios, y en cualquier lugar que necesitamos para mostrar imágenes y descripciones. Con flexbox podemos permitir que la parte del objeto multimedia que contiene la imagen tome su información de tamaño de la imagen, y luego el cuerpo del objeto multimedia se flexione para ocupar el espacio restante.</p> + +<p>En el ejemplo en vivo a continuación puedes ver nuestro objeto multimedia. He usado las propiedades de alineación para alinear los elementos en el eje transversal con <code>flex-start</code>, y luego establezco el elemento flex <code>.content</code> a <code>flex: 1</code>. Al igual que nuestra columna del patrón de la tarjeta de diseño anterior, usar <code>flex: 1</code> significa que esta parte de la tarjeta puede crecer.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}</p> + +<p>Algunas de las cosas que podría querer probar en este ejemplo en vivo se relacionan con las diferentes formas en que podría desear restringir el objeto multimedia en su diseño.</p> + +<p>Para evitar que la imagen crezca demasiado, agregue un {{cssxref ("max-width")}} a la imagen. Como ese lado del objeto multimedia está usando los valores iniciales de flexbox, puede reducirse pero no crecer, y utiliza una <code>flex-basis</code> de auto. Cualquier {{cssxref ("ancho")}} o ancho máximo aplicado a la imagen se convertirá en la <code>flex-basis</code>.</p> + +<pre class="brush: css">.image img { + max-width: 100px; +} +</pre> + +<p>También puede permitir que ambos lados crezcan y se reduzcan en proporción. Si configura ambos lados a <code>flex: 1</code>, crecerán y se reducirán de una {{cssxref ("flex-basis")}} de 0, por lo que terminará con dos columnas de igual tamaño. Puede tomar el contenido como una guía y configurar ambos para <code>flex: auto</code>, en cuyo caso crecerían y se reducirían con el tamaño del contenido o cualquier tamaño aplicado directamente a los elementos de flexión, como el ancho de la imagen.</p> + +<pre class="brush: css">.media .content { + flex: 1; + padding: 10px; +} + +.image { + flex: 1; +}</pre> + +<p>También puede dar a cada lado diferentes factores {{cssxref ("flex-grow")}}, por ejemplo, configurando el lado con la imagen para <code>flex: 1</code> y el lado del contenido para <code>flex: 3</code>. Esto significará que usan una <code>flex-basis</code> de <code>0</code>, pero distribuye ese espacio a diferentes proporciones según el factor <code>flex-grow</code> que haya asignado. Las propiedades de flexión que utilizamos para hacer esto se describen en detalle en la guía <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlando las proporciones de elementos de flexión a lo largo del eje principal</a>.</p> + +<pre class="brush: css">.media .content { + flex: 3; + padding: 10px; +} + +.image { + flex: 1; +}</pre> + +<h3 id="Volteando_el_objeto_multimedia">Volteando el objeto multimedia</h3> + +<p>Para cambiar la visualización del objeto multimedia de modo que la imagen esté a la derecha y el contenido a la izquierda, podemos usar la propiedad <code>flex-direction</code> configurada para <code>row-reverse</code>. El objeto multimedia ahora se muestra al revés. He logrado esto en el ejemplo en vivo agregando una clase <code>flipped</code> junto con la clase existente <code>.media</code>. Esto significa que puede ver cómo cambia la pantalla eliminando esa clase del html.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}</p> + +<h2 id="Controles_de_formulario">Controles de formulario</h2> + +<p>Flexbox es particularmente útil cuando se trata de estilos de controles de formularios. Los formularios tienen muchas marcas y muchos elementos pequeños que normalmente queremos alinear entre sí. Un patrón común es tener un elemento {{htmlelement ("input")}} asociado con un {{htmlelement ("button")}}, tal vez para un formulario de búsqueda o donde simplemente desea que su visitante ingrese una dirección de correo electrónico.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}</p> + +<p>Puede agregar una etiqueta o un icono a la izquierda tan fácilmente como hicimos clic en el botón derecho. He añadido una etiqueta y aparte, algunos estilos de color de fondo, no tuve que cambiar el diseño. El campo de entrada extensible ahora tiene un poco menos de espacio para actuar, pero utiliza el espacio izquierdo después que se representaron los dos elementos.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}</p> + +<p>Patrones como este pueden hacer que sea mucho más fácil crear una biblioteca de elementos de formulario para su diseño, que se adapte fácilmente a los elementos adicionales que se agregan. Está aprovechando la flexibilidad de flexbox al mezclar elementos que no crecen con los que lo hacen.</p> + +<h2 id="Conclusión">Conclusión</h2> + +<p>Mientras explora los patrones anteriores, es de esperar que haya empezado a ver cómo puede pensar en la mejor manera de utilizar flexbox para lograr el resultado que desea. Muy a menudo tienes más de una opción. Mezcle elementos que no puedan estirarse con aquellos que pueden, use el contenido para informar el tamaño o permita que flexbox comparta espacio en proporción. Tu decides.</p> + +<p>Piense en la mejor manera de presentar el contenido que tiene y luego vea cómo flexbox u otros métodos de diseño pueden ayudarlo a lograrlo.</p> diff --git a/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html new file mode 100644 index 0000000000..38e89c7813 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html @@ -0,0 +1,227 @@ +--- +title: Conceptos Básicos de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +<div>{{CSSRef}}</div> + +<p class="summary">El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Este artículo hace un repaso de las principales características de flexbox, las que exploraremos con mayor detalle en el resto de estas guías.</p> + +<p>Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout de CSS</a>, el cual controla columnas y filas a la vez.</p> + +<p><span style='background-color: #333333; color: #ffffff; font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.5rem;'>Los dos ejes de flexbox</span></p> + +<p>Cuando trabajamos con flexbox necesitamos pensar en términos de dos ejes — el eje principal y el eje cruzado. El eje principal está definido por la propiedad {{cssxref("flex-direction")}}, y el eje cruzado es perpendicular a este. Todo lo que hacemos con flexbox está referido a estos dos ejes, por lo que vale la pena entender cómo trabajan desde el principio.</p> + +<h3 id="El_eje_principal">El eje principal</h3> + +<p>El eje principal está definido por <code>flex-direction</code>, que posee cuatro posibles valores:</p> + +<ul> + <li><code>row</code></li> + <li><code>row-reverse</code></li> + <li><code>column</code></li> + <li><code>column-reverse</code></li> +</ul> + +<p>Si elegimos <code>row</code> o <code>row-reverse</code>, el eje principal correrá a lo largo de la fila según la <strong>dirección de la línea </strong>.</p> + +<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p> + +<p>Al elegir <code>column</code> o <code>column-reverse</code> el eje principal correrá desde el borde superior de la página hasta el final — según la <strong>dirección del bloque</strong>.</p> + +<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p> + +<h3 id="El_eje_cruzado">El eje cruzado</h3> + +<p>El eje cruzado va perpendicular al eje principal, y por lo tanto si <code>flex-direction</code> (del eje principal) es <code>row</code> o <code>row-reverse</code> el eje cruzado irá por las columnas.</p> + +<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p> + +<p>Si el eje principal es <code>column</code> o <code>column-reverse</code> entonces el eje cruzado corre a lo largo de las filas.</p> + +<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p> + +<p>Entender cuál eje es cuál es importante cuando empezamos a mirar la alineación y justificación flexible de los ítems; flexbox posee propiedades que permiten alinear y justificar el contenido sobre un eje o el otro.</p> + +<h2 id="Líneas_de_inicio_y_de_fin">Líneas de inicio y de fin</h2> + +<p>Otra área vital de entendimiento es cómo flexbox no hace suposiciones sobre la manera de escribir del documento. En el pasado, CSS estaba muy inclinado hacia el modo de escritura horizontal y de izquierda a derecha. Los métodos modernos de layout acogen la totalidad de modos de escritura así que no es necesario asumir que una línea de texto empezará arriba del documento y correrá de izquierda a derecha, con nuevas líneas dispuestas una abajo de la otra.</p> + +<p>Puede leer más acerca de la relación que hay entre flexbox y la especificación de los Modos de Escritura en un artículo posterior, sin embargo la siguiente descripción debería ayudar para explicar porqué no se habla de izquierda y derecha ni de arriba o abajo a la hora de describir la dirección en la que fluyen los ítems flex.</p> + +<p>Si <code>flex-direction</code> es <code>row</code> y estoy trabajando en español, entonces el margen inicial del eje principal quedará a la izquierda, y el margen final a la derecha.</p> + +<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>Si fuera a trabajar en árabe, entonces el margen inicial de mi eje principal quedaría a la derecha y el margen final a la izquierda.</p> + +<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> + +<p>En ambos casos el margen inicial del eje cruzado estará en el extremo superior del contenedor flex y el margen final en el extremo inferior, ya que ambos idiomas tiene un modo de escritura horizontal.</p> + +<p>Después de un tiempo, pensar en inicial y final en vez de izquierda y derecha se hará natural, y será útil cuando interactúe con otros métodos de layout tales como el CSS Grid Layout que sigue los mismos patrones.</p> + +<h2 id="El_contenedor_flex">El contenedor flex</h2> + +<p>Un área del documento que contiene un flexbox es llamada <strong>contendedor flex</strong>. Para crear un contenedor flex, establecemos la propiedad del área del contenedor {{cssxref("display")}} como <code>flex</code> o <code>inline-flex</code>. Tan pronto como hacemos esto, los hijos directos de este contenedor se vuelven <strong>ítems flex</strong>. Como con todas las propiedades de CSS, se definen algunos valores iniciales, así que cuando creemos un contenedor flex todos los ítems flex contenidos se comportarán de la siguiente manera.</p> + +<ul> + <li>Los ítems se despliegan sobre una fila (la propiedad <code>flex-direction</code> por defecto es <code>row</code>).</li> + <li>Los ítems empiezan desde el margen inicial sobre el eje principal.</li> + <li>Los ítems no se ajustan en la dimensión principal, pero se pueden contraer.</li> + <li>Los ítems se ajustarán para llenar el tamaño del eje cruzado.</li> + <li>La propiedad {{cssxref("flex-basis")}} es definida como <code>auto</code>.</li> + <li>La propiedad {{cssxref("flex-wrap")}} es definida como <code>nowrap</code>.</li> +</ul> + +<p>El resultado es que todos los ítems se alinearán en una solo fila, usando el tamaño del contenedor como su tamaño en el eje principal. Si hay más ítems de los que caben en el contenedor, estos no pasarán más abajo si no que sobrepasarán el margen. Si hay ítems más altos que otros, todos los ítems serán ajustados en el eje cruzado para alcanzar al mayor.</p> + +<p>Se puede ver en el ejercicio en vivo de abajo cómo luce. Intente editar el ítem o añadir ítems adicionales para así probar el comportamiento inicial de flexbox.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} </p> + +<h3 id="Cambiar_flex-direction">Cambiar flex-direction</h3> + +<p>Al añadir la propiedad {{cssxref("flex-direction")}} en el contenedor flex nos permite cambiar la dirección de cómo los ítems son desplegados. Colocando <code>flex-direction: row-reverse</code> se mantendrá el despliegue a lo largo de la fila, sin embargo el inicio y final quedarán al revés del original.</p> + +<p>Si cambiamos <code>flex-direction</code> a <code>column</code> el eje principal se cambiará y los ítems aparecerán en una columna. Colocando <code>column-reverse</code> las líneas de inicio y fin serán nuevamente puestas al revés.</p> + +<p>El ejemplo en vivo de abajo tiene <code>flex-direction</code> puesto como <code>row-reverse</code>. Pruebe los otros valores — <code>row</code>, <code>column</code> y <code>column-reverse</code> — para ver qué sucede con el contenido.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p> + +<h2 id="Contenedores_flex_Multi-línea_con_flex-wrap">Contenedores flex Multi-línea con flex-wrap</h2> + +<p>Si bien flexbox es un modelo unidimensional, es posible lograr que nuestros ítems flex sean repartidos en varías líneas. Haciendo esto, se deberá considerar cada línea como un nuevo contenedor flex. Cualquier distribución del espacio solo sucederá dentro de esa línea, sin referenciar las líneas colaterales.</p> + +<p>Para lograr repartirse en varias líneas añada la propiedad {{cssxref("flex-wrap")}} con el valor <code>wrap</code>. Cuando los ítems sean demasiados para desplegarlos en una línea, serán repartidos en la línea siguiente. El ejemplo en vivo de abajo contiene ítems que se les ha asignando un ancho, donde el ancho total de los ítems excede al del contenedor flex. Cuando <code>flex-wrap</code> se coloca como <code>wrap</code>, los ítems se repartirán. Al colocarlo como <code>nowrap</code>, el cual es el valor inicial, estos se contraerán para calzar con el contenedor ya que usan los valores iniciales de flexbox que permiten que los ítems se contraigan. Al usar <code>nowrap</code> los ítems podrían salirse del margen si estos no pudieran contraerse, o no contraerse lo suficiente para ser calzados.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p> + +<h2 id="La_abreviatura_flex-flow">La abreviatura flex-flow</h2> + +<p>Se pueden combinar las propiedades <code>flex-direction</code> y <code>flex-wrap</code> en la abreviatura {{cssxref("flex-flow")}} . El primer valor especificado es <code>flex-direction</code> y el segundo valor es <code>flex-wrap</code>.</p> + +<p>En el ejemplo en vivo de abajo intente cambiar el primer valor por uno de los valores permitidos para <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> o <code>column-reverse</code>, y cambie también el segundo valor por <code>wrap</code> y <code>nowrap</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p> + +<h2 id="Propiedades_aplicadas_a_los_ítems_flex">Propiedades aplicadas a los ítems flex</h2> + +<p>Para obtener más control sobre los ítems flex podemos apuntarlos directamente. Hacemos esto a través de tres propiedades:</p> + +<ul> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-basis")}}</li> +</ul> + +<p>Daremos un breve vistazo a estas propiedades en este resumen, y en un próximo artículo ahondaremos sobre su comportamiento.</p> + +<p>Antes de darle sentido a estas propiedades debemos considerar el concepto de <strong>espacio disponible</strong>. Lo que hacemos cuando cambiamos el valor de alguna de estas propiedades es cambiar la forma que se distribuye el espacio disponible entre nuestros ítems. Este concepto de espacio disponible es también importante cuando veamos la alineación de ítems.</p> + +<p>Si tenemos tres ítems con un ancho de 100 pixeles en un contenedor de 500 pixeles de ancho, entonces el espacio que se necesita para colocar nuestros ítems es de 300 pixeles. Esto deja 200 pixeles de espacio disponible. Si no cambiamos los valores iniciales entonces flexbox colocará ese espacio después del último ítem.</p> + +<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + +<p>Si en cambio quisiéramos que los ítems crecieran para llenar ese espacio, entonces necesitaremos un método para distribuir el espacio sobrante entre los ítems. Es justo lo que harán las propiedades <code>flex</code> que aplicaremos a dichos ítems.</p> + +<h3 id="La_propiedad_flex-basis">La propiedad <code>flex-basis</code></h3> + +<p>Con <code>flex-basis</code> se define el tamaño de un ítem en términos del espacio que deja como espacio disponible. El valor inicial de esta propiedad es <code>auto</code> — en este caso el navegador revisa si los ítems definen un tamaño. En el ejemplo de arriba, todos los ítems tienen un ancho de 100 pixeles así que este es usado como <code>flex-basis</code>.</p> + +<p>Si los ítems no tiene un tamaño entonces el tamaño de su contenido es usado como flex-basis. Y por eso, apenas declarado <code>display: flex</code> en el padre a fin de crear ítems flex, todos estos ítems se ubicaron en una sola fila y tomaron solo el espacio necesario para desplegar su contenido.</p> + +<h3 id="La_propiedad_flex-grow">La propiedad <code>flex-grow</code></h3> + +<p>Con la propiedad <code>flex-grow</code> definida como un entero positivo, los ítems flex pueden crecer en el eje principal a partir de <code>flex-basis</code>. Esto hará que el ítem se ajuste y tome todo el espacio disponible del eje, o una proporción del espacio disponible si otro ítem también puede crecer.</p> + +<p>Si le damos a todos los ítems del ejemplo anterior un valor <code>flex-grow</code> de 1 entonces el espacio disponible en el contenedor flex será compartido igualitariamente entre estos ítems y se ajustarán para llenar el contenedor sobre el eje principal.</p> + +<p>Podemos usar flex-grow apropiadamente para distribuir el espacio en proporciones. Si otorgamos al primer ítem un valor <code>flex-grow</code> de 2 y a los otros un valor de 1, entonces 2 partes serán dadas al primer ítem (100px de 200px en el caso del ejemplo de arriba) y 1 parte para cada uno de los restantes (cada uno con 50px de los 200px en total).</p> + +<h3 id="La_propiedad_flex-shrink">La propiedad <code>flex-shrink</code></h3> + +<p>Así como la propiedad <code>flex-grow</code> se encarga de añadir espacio sobre el eje principal, la propiedad <code>flex-shrink</code> controla como se contrae. Si no contamos con suficiente espacio en el contenedor para colocar los ítems y <code>flex-shrink</code> posee un valor entero positivo, el ítem puede contraerse a partir de <code>flex-basis</code>. Así como podemos asignar diferentes valores de <code>flex-grow</code> con el fin que un ítem se expanda más rápido que otros — un ítem con un valor más alto de <code>flex-shrink</code> se contraerá más rápido que sus hermanos que poseen valores menores.</p> + +<p>El tamaño mínimo del ítem tendrá que ser considerado cuando se determine un valor de contracción que pueda funcionar, esto significa que flex-shrink tiene el potencial de comportarse menos consistentemente que flex-grow . Por lo tanto, haremos una revisión más detallada de cómo este algoritmo trabaja en el artículo Controlling Ratios de los ítems sobre el eje principal.</p> + +<div class="note"> +<p>Nótese que los valores de <code>flex-grow</code> y <code>flex-shrink</code> son proporciones. Típicamente si pusiéramos todos los ítems flex: <code>1 1 200px</code> y luego quisiéramos que un ítem creciera al doble, deberíamos ponerlo con flex: <code>2 1 200px</code>. Aunque igualmente podemos colocar flex: <code>10 1 200px</code> y flex: <code>20 1 200px</code> si quisiéramos.</p> +</div> + +<h3 id="Valores_abreviados_para_las_propiedades_flex">Valores abreviados para las propiedades flex</h3> + +<p>Difícilmente veremos la propiedades <code>flex-grow</code>, <code>flex-shrink</code> y <code>flex-basis</code> usadas individualmente; si no que han sido combinadas en la abreviación {{cssxref("flex")}} . La abreviación <code>flex</code> permite establecer los tres valores en este orden: <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p> + +<p>El ejemplo en vivo de más abajo permite probar los diferentes valores de la abreviación flex; recuerde que el primer valor es <code>flex-grow</code>. Dándole un valor positivo significa que el ítem puede crecer. El segundo es <code>flex-shrink</code> — con un valor positivo los ítems pueden contraerse. El valor final es <code>flex-basis</code>; este es el valor que los ítems usan como valor base para crecer y contraerse.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}</p> + +<p>Hay además algunas abreviaturas de valores que cubren la mayoría de los casos de uso. Se ven con frecuencia utilizados en tutoriales, y en muchos casos es todo lo que necesitamos usar. Los valores predefinidos son los siguientes:</p> + +<ul> + <li><code>flex: initial</code></li> + <li><code>flex: auto</code></li> + <li><code>flex: none</code></li> + <li><code>flex: <positive-number></code></li> +</ul> + +<p>Fijando <code>flex: initial</code> el ítem se restablece con los valores iniciales de Flexbox. Es lo mismo que <code>flex: 0 1 auto</code>. En este caso el valor de <code>flex-grow</code> is 0, así que los ítems no crecerán más de su tamaño <code>flex-basis</code> . El valor <code>flex-shrink</code> es 1, así que los ítems pueden contraerse si es necesario en vez de salirse de los márgenes. El valor de <code>flex-basis</code> es <code>auto</code>. Los ítems pueden definir un tamaño en la dimensión del eje principal, o bien obtener su tamaño por el contenido del los mismos.</p> + +<p>Usar <code>flex: auto</code> es lo mismo que usar <code>flex: 1 1 auto</code> , es como con <code>flex:initial</code> pero en este caso los ítems pueden crecer y llenar el contendor así como encoger si se requiere.</p> + +<p>Al usar <code>flex: none</code> se crearán ítems flex totalmente inflexibles. Es como escribir <code>flex: 0 0 auto</code>. Los ítems no pueden ni crecer ni encoger pero serán colocados usando flexbox con <code>flex-basis</code> en <code>auto</code>.</p> + +<p>Una abreviación que es común en tutoriales es <code>flex: 1</code> o <code>flex: 2</code> y más. Es como usar <code>flex: 1 1 0</code>. Los ítems pueden crecer o encoger con un <code>flex-basis</code> de 0.</p> + +<p>Pruebe estas abreviaciones de valores en el ejemplo en vivo de abajo.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 480)}}</p> + +<h2 id="Alineación_justificación_y_distribución_del_espacio_libre_entre_ítems">Alineación, justificación y distribución del espacio libre entre ítems</h2> + +<p>Una característica clave de flexbox es la capacidad de alinear y justificar ítems sobre los ejes principal y cruzado, y distribuir el espacio entre los ítems flex.</p> + +<h3 id="align-items"><code>align-items</code></h3> + +<p>La propiedad {{cssxref("align-items")}} alineará los ítems sobre el eje cruzado.</p> + +<p>El valor inicial para esta propiedad es <code>stretch</code> razón por la cual los ítems se ajustan por defecto a la altura de aquel más alto. En efecto se ajustan para llenar el contenedor flex — el ítem más alto define la altura de este.</p> + +<p>En cambio definimos <code>align-items</code> como <code>flex-start</code> para que los ítems se alineen al comienzo del contenedor flex, <code>flex-end</code> para alinearlos al final, o <code>center</code> para alinearlos al centro. Intente esto en el ejemplo en vivo — He definido en el contenedor flex una altura para que se aprecie que se pueden mover libremente dentro del contenedor. Vea lo que sucede si se coloca el valor align-items como:</p> + +<ul> + <li><code>stretch</code></li> + <li><code>flex-start</code></li> + <li><code>flex-end</code></li> + <li><code>center</code></li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p> + +<h3 id="justify-content"><code>justify-content</code></h3> + +<p>La propiedad {{cssxref("justify-content")}} es usada para alinear los ítems en el eje principal, cuyo <code>flex-direction</code> define la dirección del flujo. El valor inicial es <code>flex-start</code> que alineará los ítems al inicio del margen del contenedor, pero también se podría definir como <code>flex-end</code> para alinearlos al final, o <code>center</code> para alinearlos al centro.</p> + +<p>También podemos usar <code>space-between</code> para tomar todo el espacio sobrante después de que los ítems hayan sido colocados, y distribuir de forma pareja los ítems para que haya un espacio equitativo entre cada ítem. O bien, usamos el valor <code>space-around</code> para crear un espacio equitativo a la derecha e izquierda de cada ítem.</p> + +<p>Pruebe con los siguientes valores de<code>justify-content</code> en el ejemplo en vivo:</p> + +<ul> + <li><code>space-evenly</code></li> + <li><code>flex-start</code></li> + <li><code>flex-end</code></li> + <li><code>center</code></li> + <li><code>space-around</code></li> + <li><code>space-between</code></li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p> + +<p>En un próximo artículo ahondaremos sobre estas propiedades, con el fin de obtener mejor entendimiento de cómo funcionan. Sin embargo, estos sencillos ejemplos serán útiles para la mayoría de los casos de uso.</p> + +<h2 id="Próximos_pasos">Próximos pasos</h2> + +<p>Al final de este artículo usted debería tener un entendimiento de las características básicas de Flexbox. En el próximo artículo veremos cómo esta especificación encaja con las otras partes de CSS.</p> diff --git a/files/es/web/css/css_flexible_box_layout/index.html b/files/es/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..b39db24d68 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,118 @@ +--- +title: Diseño de caja flexible CSS +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +<p>{{CSSRef}}</p> + +<p>El diseño<strong> CSS Flexbox</strong> es un módulo de CSS que define un modelo de caja, optimizado para el diseño de interfaces de usuario. En el diseño flex, los nodos hijo se pueden distribuir en dirección vertical u horizontal y se pueden "flexibilizar" sus tamaños, bien sea rellenando el espacio disponible o encogiéndose para evitar salirse del contorno del nodo padre. Se puede manipular fácilmente tanto la alineación horizontal como la vertical, de los nodos hijo. La anidación de estas cajas (horizontal dentro de vertical o vertical dentro de horizontal) se puede usar para construir diseños en dos dimensiones.</p> + +<h2 id="Ejemplo_Básico">Ejemplo Básico</h2> + +<p>En el siguiente ejemplo, se ha definido un contenedor como <code>display: flex</code>, lo que significa que los tres elementos hijo se convierten en elementos flexibles. <span>El valor de <code>justify-content</code> se ha establecido en <code>space-between</code> para espaciar los elementos de manera uniforme en el eje principal.</span> <span>Se ha colocado una cantidad igual de espacio entre cada elemento, con los elementos izquierdo y derecho alineados con los bordes del contenedor flexible.</span> <span>También puede ver que los elementos se estiran en el eje transversal, debido a que el valor predeterminado de </span><code>align-items</code><span> es <code>stretch</code>.</span> <span>Los elementos se extienden hasta la altura del contenedor flexible, por lo que cada uno de ellos tiene tanta altura como el elemento más alto.</span></p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p> + +<h2 id="Referencia">Referencia</h2> + +<h3 id="Propiedades_CSS">Propiedades CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("align-content")}}</li> + <li>{{cssxref("align-items")}}</li> + <li>{{cssxref("align-self")}}</li> + <li>{{cssxref("flex")}}</li> + <li>{{cssxref("flex-basis")}}</li> + <li>{{cssxref("flex-direction")}}</li> + <li>{{cssxref("flex-flow")}}</li> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-wrap")}}</li> + <li>{{cssxref("justify-content")}}</li> + <li>{{cssxref("order")}}</li> +</ul> +</div> + +<h3 id="Propiedades_de_alineación">Propiedades de alineación</h3> + +<p>Las propiedades <code>align-content</code>, <code>align-self</code>, <code>align-items</code> y <code>justify-content</code> aparecieron inicialmente en la especificación de Flexbox, pero ahora están definidas en Alineación de cuadro y la especificación de Flexbox las refiere a la Especificación de alineación de cuadro para definiciones actualizadas. Las propiedades de alineación adicionales también se definen en Alineación de cuadro.</p> + +<div class="index"> +<ul> + <li>{{cssxref("align-content")}}</li> + <li>{{cssxref("align-items")}}</li> + <li>{{cssxref("align-self")}}</li> + <li>{{cssxref("justify-content")}}</li> + <li>{{cssxref("place-content")}}</li> + <li>{{cssxref("row-gap")}}</li> + <li>{{cssxref("column-gap")}}</li> + <li>{{cssxref("gap")}}</li> +</ul> +</div> + +<h3 id="Entradas_del_glosario">Entradas del glosario</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Glossary/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Glossary/Flex_Container">Flex Container</a></li> + <li><a href="/en-US/docs/Glossary/Flex_Item">Flex Item</a></li> + <li><a href="/en-US/docs/Glossary/Main_Axis">Main Axis</a></li> + <li><a href="/en-US/docs/Glossary/Cross_Axis">Cross Axis</a></li> + <li><a href="/en-US/docs/Glossary/Flex">Flex</a></li> +</ul> +</div> + +<h2 id="Guías">Guías</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Conceptos básicos de Flexbox</a></dt> + <dd>Una visión general de las características de flexbox</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relación de flexbox con otros métodos de diseño.</a></dt> + <dd>Cómo flexbox se relaciona con otros métodos de diseño y otras especificaciones de CSS</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Alinear elementos en un contenedor flexible</a></dt> + <dd>Cómo funcionan las propiedades de Alineación de cuadro con flexbox.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordenando elementos flex</a></dt> + <dd>Explicando las diferentes formas de cambiar el orden y la dirección de los elementos, y cubriendo los problemas potenciales al hacerlo.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Control de proporción de elementos flex a lo largo del eje principal</a></dt> + <dd>Este artículo explica las propiedades de flex-grow, flex-shrink y flex-basis.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Dominar el envoltorio de elementos flex</a></dt> + <dd>Cómo crear contenedores flex con múltiples líneas y controlar la visualización de los elementos en esas líneas.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Casos de uso típicos de flexbox</a></dt> + <dd>Patrones de diseño comunes que son los típicos casos de uso de flexbox.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Compatibilidad con versiones anteriores de Flexbox</a></dt> + <dd>Estado del navegador de flexbox, problemas de interoperabilidad y compatibilidad con navegadores antiguos y versiones de la especificación</dd> +</dl> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Ver_también">Ver también</h2> + +<dl> + <dt><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a></dt> + <dd>una lista comisariada por la comunidad de errores y soluciones del navegador Flexbox</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Combinaciones (Mixins) Flexbox para varios navegadores</a></dt> + <dd>Este artículo proporciona un conjunto de combinaciones(mixins)para aquellos que desean crear experiencias de flexbox en varios navegadores que incluso funcionan en navegadores antiguos que no admiten la sintaxis moderna de flexbox.</dd> +</dl> diff --git a/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html b/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html new file mode 100644 index 0000000000..95804a5da2 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html @@ -0,0 +1,190 @@ +--- +title: Usando flexbox para componer aplicaciones web +slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web +tags: + - Avanzado + - CSS + - Cajas Flexibles CSS + - Ejemplo + - Guía + - Web +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +<p>{{CSSRef}}</p> + +<p>Usar <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">flexbox</a> puede ayudarte a diseñar atractivas composiciones en aplicaciones web que escalen mejor de escritorio a móvil. Pon fin a los elementos flotantes {{HTMLElement("div")}}, <a href="/en-US/docs/Web/CSS/position#Absolute_positioning">el posicionamiento absoluto</a>, y los <em>hacks</em> de JavaScript, y comienza a construir composiciones fluidas en horizontal y vertical en apenas unas líneas de <a href="/es/docs/Web/CSS">CSS</a>. Algunos ejemplos básicos de casos de uso:</p> + +<ul> + <li>Quieres centrar un elemento en la mitad de una página</li> + <li>Quieres un conjunto de contenedores que fluyan verticalmente, uno tras otro</li> + <li>Quieres crear una fila de botones u otros elementos que colapse verticalmente en tamaños menores de pantalla</li> +</ul> + +<p>Este artículo sólo aborda el uso de <em>flexbox</em> con navegadores que soportan la implementación moderna y sin prefijos del estándar. Para información sobre prefijos de proveedores para navegadores más antiguos, por favor lee <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">la guía más general para usar cajas flexibles de CSS</a>.</p> + +<h2 id="Conceptos_básicos">Conceptos básicos</h2> + +<p>Con flexbox puedes hacer que los elementos dentro de cualquier {{HTMLElement("div")}} fluyan estableciendo la propiedad {{cssxref("display")}} como <code>flex</code> y luego dando a la propiedad {{cssxref("flex-flow")}} el valor <code>row</code>, si deseas que los elementos fluyan horizontalmente, o el valor <code>column</code>, si quieres que lo hagan verticalmente. Si estás usando un flexbox horizontal y deseas que tus contenidos queden envueltos verticalmente, especifica además el valor <code>wrap</code>.</p> + +<p>Después, para cada elemento que desees sea parte del flujo de cajas, establece la propiedad {{cssxref("flex")}}. Generalmente querrás utilizar uno de los tres siguientes valores:</p> + +<ul> + <li>Si quieres un elemento que sólo ocupa su ancho asignado, como un botón, utiliza <code>flex: none</code> que se expande a <code>0 0 auto</code>.</li> + <li>Si deseas explícitamente dimensionar un elemento, usa <code>flex: 0 0 <em>tamaño</em></code>. Por ejemplo: <code>flex 0 0 60px</code>.</li> + <li>Si necesitas un elemento que se expanda para rellenar el espacio disponible, compartiendo el espacio igualmente si hay múltiples elementos de este tipo dentro del flujo, utiliza <code>flex: auto</code>. Se expande a <code>1 1 auto</code>.</li> +</ul> + +<p>Por supuesto, hay otras posibilidades, pero estas deberían cubrir los casos de uso básicos. Veamos cómo se aplica esto en algunos ejemplos.</p> + +<h2 id="Centrando_un_elemento_en_una_página">Centrando un elemento en una página</h2> + +<p>Para este caso, el método más sencillo es crear dos cajas flexibles, una dentro de otra. Cada flexbox tendrá tres elementos: dos de ellos conteniendo el elemento centrado y después el propio elemento centrado.</p> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css;">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.horizontal-box { + display: flex; + flex-flow: row; +} +.spacer { + flex: auto; + background-color: black; +} +.centered-element { + flex: none; + background-color: white; +} +</pre> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html;"><div class="vertical-box"> + <div class="spacer"></div> + <div class="centered-element horizontal-box"> + <div class="spacer"></div> + <div class="centered-element">Centered content</div> + <div class="spacer"></div> + </div> + <div class="spacer"></div> +</div> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500) }}</p> + +<h2 id="Haciendo_fluir_verticalmente_un_conjunto_de_contenedores">Haciendo fluir verticalmente un conjunto de contenedores</h2> + +<p>Imagina que tienes la composición de una página con una sección de cabecera, una de contenidos y un pie. La cabecera y el pie deberían tener un tamaño fijo, pero la sección de contenidos se debería redimensionar según el espacio disponible. Esto puede lograrse estableciendo la propiedad {{cssxref("flex")}} del contenido como <code>auto</code> y la misma propiedad {{cssxref("flex")}} de la cabecera y el pie como <code>none</code>.</p> + +<h3 id="Contenido_CSS_2">Contenido CSS</h3> + +<pre class="brush: css;highlight:[8,14,18]">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.fixed-size { + flex: none; + height: 30px; + background-color: black; + text-align: center; +} +.flexible-size { + flex: auto; + background-color: white; +} +</pre> + +<h3 id="Contenido_HTML_2">Contenido HTML</h3> + +<pre class="brush: html;"><div id="document" class="vertical-box"> + <div class="fixed-size"><button id="increase-size">Increase container size</button></div> + <div id="flexible-content" class="flexible-size"></div> + <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div> +</div> +</pre> + +<h3 id="Contenido_JavaScript">Contenido JavaScript</h3> + +<pre class="brush: js;">var height = 400; +document.getElementById('increase-size').onclick=function() { + height += 10; + if (height > 500) height = 500; + document.getElementById('document').style.height = (height + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + height -= 10; + if (height < 300) height = 300; + document.getElementById('document').style.height = (height + "px"); +}</pre> + +<h3 id="Resultado_2">Resultado</h3> + +<p>{{ EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500) }}</p> + +<p>Este ejemplo se ha creado para que clicar en el encabezamiento incremente el tamaño y clicar en el pie lo reduzca. Observa cómo el contenido se redimensiona automática y adecuadamente, mientras las dimensiones del encabezamiento y el pie se mantienen constantes.</p> + +<h2 id="Creando_un_contenedor_que_colapse_horizontalmente">Creando un contenedor que colapse horizontalmente</h2> + +<p>En algunos casos podrías querer componer horizontalmente un conjunto de información donde el tamaño de pantalla lo permita, pero colapsar los contenidos horizontalmente donde no. Esto es bastate sencillo con flexbox. Puedes conseguirlo añadiendo a la propiedad {{cssxref("flex-flow")}} el valor <code>wrap</code>.</p> + +<h3 id="Contenido_CSS_3">Contenido CSS</h3> + +<pre class="brush: css;highlight:[4]">.horizontal-container { + display: flex; + width: 300px; + flex-flow: row wrap; +} +.fixed-size { + flex: none; + width: 100px; + background-color: black; + color: white; + text-align: center; +} +</pre> + +<h3 id="Contenido_HTML_3">Contenido HTML</h3> + +<pre class="brush: html;"><div id="container" class="horizontal-container"> + <div class="fixed-size">Element 1</div> + <div class="fixed-size">Element 2</div> + <div class="fixed-size">Element 3</div> +</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button> +</pre> + +<h3 id="Contenido_JavaScript_2">Contenido JavaScript</h3> + +<pre class="brush: js;">var width = 300; + +document.getElementById('increase-size').onclick=function() { + width += 100; + if (width > 300) width = 300; + document.getElementById('container').style.width = (width + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + width -= 100; + if (width < 100) width = 100; + document.getElementById('container').style.width = (width + "px"); +} +</pre> + +<h3 id="Resultado_3">Resultado</h3> + +<p>{{ EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200) }}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Usando cajas flexibles CSS</a></li> +</ul> diff --git a/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html b/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html new file mode 100644 index 0000000000..7046347011 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html @@ -0,0 +1,375 @@ +--- +title: Usando las cajas flexibles CSS +slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">La propiedad <strong>Flexible Box</strong>, o <strong>flexbox</strong>, de CSS3 es un <a href="https://developer.mozilla.org/es/docs/Web/CSS/Layout_mode">modo de diseño</a> que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad <span style="font-family: courier new,andale mono,monospace;">float</span>, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.</span></p> + +<p>Muchos diseñadores verán que el modelo "caja flexible" es más sencillo de utilizar. Los elementos "hijos" de una "caja flexible" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible. Posicionar los elementos "hijos" es por tanto mucho más sencillo, y los diseños complejos pueden hacerse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Esta independencia afecta intencionadamente únicamente a la representación visual, dejando el orden de locución y navegación a lo que diga el código fuente.</p> + +<div class="note"><strong>Nota:</strong> Aunque la especificación del diseño de "cajas flexibles" de CSS está en fase de "candidata a recomendación", no todos los navegadores la han implementado. La implementación de WebKit requiere el prefijo <code>-webkit</code>; Internet Explorer implementa una versión antigua de la especificación, con prefijo; Opera 12.10 implementa la última versión, sin prefijo. Revisa la tabla de compatibilidad de cada propiedad para saber cuál es el estado actual de compatibilidad.</div> + +<h2 id="El_concepto_de_cajas_flexibles">El concepto de "cajas flexibles"</h2> + +<p>Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.</p> + +<p>El algoritmo del modelo de diseño de "cajas flexibles" no parte de niguna dirección predeterminada, al contrario de lo que ocurre con el modelo "bloque", que asume una disposición vertical de los elementos, o lo que pasa con el modelo "en línea", que asume una disposición horizontal. Mientras que el modelo "bloque" funciona bien para páginas, se queda muy corto cuando se trata de aplicaciones en las que hay que tener en cuenta el cambio de orientación del dispositivo o los cambios de tamaño realizados por los gestos del usuario. El modelo de "cajas flexibles" es más apropiado para diseños de pequeña escala, mientras que el (emergente) modelo "rejilla" es adecuado para diseños de gran escala. Ambos son parte del gran esfuerzo que el "CSS Working Group" está realizando para proveer de mayor interoperabilidad a las aplicaciones web con todo tipo de usuarios, distintos modos de escritura, y otras necesidades de flexibilidad.</p> + +<h2 id="Vocabulario_de_cajas_flexibles">Vocabulario de "cajas flexibles"</h2> + +<p>Aunque al hablar de las "cajas flexibles" nos olvidamos de términos como "horizontal/en línea" y "vertical/bloque", se hace necesario emplear una nueva terminología. Fíjate en el siguiente diagrama para afianzar el vocabulario empleado en sus elementos. Se muestra un contenedor flexible que tiene una <code>flex-direction</code> de tipo <code>row</code>, que significa que los elementos flexibles se muestra uno a continuación del otro horizontalmente a lo largo del eje principal (main axis) de acuerdo con el modo de escritura preestablecido, y en este caso, la dirección en que el texto de los elementos fluye es de izquierda-a-derecha.</p> + +<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p> + +<dl> + <dt>Contenedor flexible (Flex container)</dt> + <dd>El elemento "padre" que contiene los elementos flexibles. Un contenedor flexible se define usando los valores <code>flex</code> o <code>inline-flex</code> en la propiedad <a href="/en/CSS/display" rel="internal" title="display"><code>display</code></a>.</dd> + <dt>Elemento flexible (Flex item)</dt> + <dd> + <p>Cada hijo de un contenedor flex se convierte en un elemento flexible. Si hay texto directamente incluido en el contenedor flexible, se envuelve automáticamente en un elemento flexible anónimo.</p> + </dd> + <dt>Ejes</dt> + <dd> + <p>Cada diseño de "caja flexible" sigue dos ejes. El <strong>eje principal</strong> es el eje a lo largo del cual los elementos flexibles se suceden unos a otros. El <strong>eje secundario</strong> es el eje perpendicular al <strong>eje principal</strong>.</p> + + <ul> + <li>La propiedad <code><a href="/en/CSS/flex-direction" rel="internal" title="flex-direction">flex-direction</a></code> establece el eje principal.</li> + <li>La propiedad <a href="/en/CSS/justify-content" rel="internal" title="en/CSS/justify-content"><code>justify-content</code></a> define cómo los elementos flexibles se disponen a lo largo del eje principal en la línea en curso.</li> + <li>La propiedad <a href="/en/CSS/align-items" title="en/CSS/align-items"><code>align-items</code></a> define cómo los elementos flexibles se disponen a lo largo del eje secundario de la línea en curso.</li> + <li>La propiedad <a href="/en/CSS/align-self" title="en/CSS/align-self"><code>align-self</code></a> define cómo cada elemento flexible se alinea respecto al eje secundario, y sustituye al valor por defecto establecido por <code>align-items.</code></li> + </ul> + </dd> + <dt>Direcciones</dt> + <dd> + <p>Los lados <strong>inicio principal</strong>/<strong>fin principal (main start/main end) </strong>e <strong>inicio secundario</strong>/<strong>fin </strong><strong>secundario (cross start/cross end)</strong> del contenedor flexible describen el origen y final del flujo de los elementos flexibles. Estos siguen el eje principal y secundario según el vector establecido por <code>writing-mode</code> (izquierda-a-derecha, derecha-a-izquierda, etc.).</p> + + <ul> + <li>La propiedad <a href="/en/CSS/order" rel="internal" title="en/CSS/order"><code>order</code></a> asigna elementos a grupos ordinales y determina qué elementos aparecen primero.</li> + <li>La propiedad <a href="/en/CSS/flex-flow" rel="internal" title="flex-flow"><code>flex-flow</code></a> combina las propiedades <a href="/en/CSS/flex-direction" rel="internal" title="flex-direction"><code>flex-direction</code></a> y <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a> para colocar los elementos flexibles.</li> + </ul> + </dd> + <dt>Líneas</dt> + <dd> + <p>Los elementos flexibles pueden disponerse en una sola o varias líneas de acuerdo con la propiedad <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a>, que controla la dirección del eje secundario y la dirección en la que las nuevas líneas se apilan.</p> + </dd> + <dt>Dimensiones</dt> + <dd> + <p>Los términos equivalentes a "altura" y "anchura" usados en los elementos flexibles son <strong>tamaño principal (main size)</strong> and <strong>tamaño secundario (cross size),</strong> que respectivamente siguen al eje principal y al eje secundario del contenedor flexible.</p> + + <ul> + <li>La propiedades <code><a href="/en/CSS/min-height" title="/en/CSS/min-height">min-height</a></code> y <code><a href="/en/CSS/min-width" title="/en/CSS/min-width">min-width</a></code> tienen un nuevo valor, <code>auto</code> que establece el tamaño mínimo de un elemento flexible.</li> + <li>La propiedad <a href="/en/CSS/flex" rel="internal" title="en/CSS/flex"><code>flex</code></a> combina las propiedades <code><a href="/en/CSS/flex-basis" rel="internal" title="en/CSS/flex-basis">flex-basis</a></code>, <a href="/en/CSS/flex-grow" rel="internal" title="en/CSS/flex-grow"><code>flex-grow</code></a>, y <a href="/en/CSS/flex-shrink" rel="internal" title="en/CSS/flex-shrink"><code>flex-shrink</code></a> para establecer el grado de flexibilidad de los elementos flexibles.</li> + </ul> + </dd> +</dl> + +<h2 id="Diseñando_una_caja_flexible">Diseñando una "caja flexible"</h2> + +<p>Para indicar que unos elementos tienen este estilo CSS, asigna la propiedad <a href="/en/CSS/display" title="/en/CSS/display">display</a> así:</p> + +<pre class="brush: css">display : flex</pre> + +<p>o</p> + +<pre class="brush: css">display : inline-flex</pre> + +<p>Haciendo esto, se define el elemento como contenedor flexible y todos sus "hijos" como elementos flexibles. El valor <code>flex</code> hace que el contenedor flexible sea un bloque dentro del elemento "padre" al que pertenezca. El valor <code>inline-flex</code> hace que el contenedor flexible sea un elemento "en línea" dentro del elemento "padre" al que pertenezca.</p> + +<div class="note"><strong>Nota:</strong> Cuando utilices un prefijo para el tipo de navegador, ponlo en la propiedad "display" no en el atributo "display". Por ejemplo, <code>display : -webkit-flex</code>.</div> + +<h2 id="Consideraciones_de_los_elementos_flexibles">Consideraciones de los elementos flexibles</h2> + +<p>El texto que se encuentre directamente dentro de un contenedor flexible, será automáticamente envuelto en un elemento flexible anónimo. Sin embargo, si un elemento flexible contiene solamente espacios en blanco no será mostrado, como si tuviera la propiedad <code style="color: rgb(93,86,54); font-size: 14px;">display:none</code>.</p> + +<p>Los "hijos" de un contenedor flexible que tengan un posicionamiento absoluto, se situarán de manera que su posición estática se determine en referencia a la esquina del <strong>inicio principal (main start)</strong> de su contenedor flexible.</p> + +<p>Actualmente, debido a un problema conocido, asignar <code style="font-size: 14px;">visibility:collapse</code> a un elemento flexible causa que sea tratado como si fuera <code style="font-size: 14px;">display:none</code> en vez de lo que se supone que debería ocurrir, es decir, como si fuera <code style="font-size: 14px;">visibility:hidden</code>. La alternativa mientras se resuelve este problema es usar <code>visibility:hidden</code> para elementos flexibles que deban comportarse como <code>visibility:collapse</code>.</p> + +<p>Los márgenes de elementos flexibles adyacentes no se colapsan. Usando márgenes <code>auto</code> se absorbe el espacio extra vertical y horizontalmente y puede ser utilizado para alinear o separar elementos flexibles adyacentes. Ver <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins" title="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Aligning with 'auto' margins</a> en la especificación "W3C Flexible Box Layout Model" para más detalles al respecto.</p> + +<p>Para asegurar un tamaño mínimo por defecto de los elementos flexibles, usa <code>min-width:auto</code> y/o <code>min-height:auto</code>. Para los elementos flexibles, el valor de atributo <code>auto</code> calcula la mínima anchura/altura del elemento para que no sea menor que la anchura/altura de su contenido, garantizando que el elemento es mostrado suficientemente grande como para que se vea su contenido. Ver {{cssxref("min-width")}} y {{cssxref("min-height")}} para más detalles al respecto.</p> + +<p>Las propiedades de alineación de "cajas flexibles" realizan un "verdadero" centrado en CSS. Esto significa que los elementos flexibles permanecerán centrados, incluso si estos rebasan su contenedor flexible. Esto puede llegar a ser un problema, ya que si sobrepasan el tope superior de la página o el izquierdo (en escritura LTR de izquierda-a-derecha) o el derecho (en escritura RTL de derecha-a-izquierda), no se puede desplazar hacia ese área, incluso habiendo contenido allí. En el futuro, las propiedades de alineación se ampliarán para que tengan una opción "safe" (seguro) para controlar esta situación. De momento, si esto te preocupa, puedes usar los márgenes para conseguir el centrado, ya que estos responderán de modo seguro parando el centrado si se sobrepasan los límites. En vez de usar las propiedades <code>align-</code>, simplemente pon márgenes automáticos en los elementos flexibles que quieras centrar. En vez de usar las propiedades <code>justify-</code>, pon márgenes automáticos en los límites exteriores del primer y último elemento flexible del contenedor flexible. Los márgenes automáticos se adaptarán asumiendo el espacio sobrante, centrando los elementos flexibles donde sobre espacio, y cambiando a alineación normal donde no sobre espacio. Sin embargo, si tratas de reemplazar <code>justify-content</code> con "centrado-basado-en-márgenes" en una "caja flexible" multi-línea, probablemente no funcionará, ya que tendrías que poner márgenes en el primer y último elemento de cada línea. A menos que puedas predecir qué elementos encajarán en cada línea, no tendrás una respuesta fiable usando el "<span style="line-height: inherit;">centrado-basado-en-márgenes</span><span style="line-height: inherit;">" en el eje principal al reemplazar la propiedad </span><code style="font-size: 14px; line-height: inherit;">justify-content</code><span style="line-height: inherit;">.</span></p> + +<p>Recuerda que mientras el orden en que se muestran los elementos es independiente de su orden en el código fuente, esta independecia afecta solamente a la representación visual, y no al orden de locución y navegación que seguirán el orden establecido en el código fuente. Incluso la propiedad {{cssxref("order")}} no afectará a la secuencia de locución ni de navegación. Así que los desarrolladores deben preocuparse del orden de los elementos adecuadamente en el código fuente para que no se deteriore la accesibilidad del documento. </p> + +<h2 id="Propiedades_de_las_cajas_flexibles">Propiedades de las "cajas flexibles"</h2> + +<h3 id="Propiedades_que_no_afectan_a_las_cajas_flexibles">Propiedades que no afectan a las "cajas flexibles"</h3> + +<p>Como las "cajas flexibles" emplean un algoritmo diferente, alguna propiedades no tienen sentido para un contenedor flexible.</p> + +<ul> + <li>Propiedades column-* del <a href="/en/CSS/Using_CSS_multi-column_layouts" title="/en/CSS/Using_CSS_multi-column_layouts">Módulo Multicol</a> no tienen ningún efecto en un elemento flexible.</li> + <li>{{cssxref("float")}} y {{cssxref("clear")}} no tienen ningún efecto en un elemento flexible. Usar <code>float</code> causa que la propiedad <code>display</code> del elemento se comporte como <code>block</code>.</li> + <li>{{cssxref("vertical-align")}} no tiene efecto en la alineación de los elementos flexibles.</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_básico_flex">Ejemplo básico "flex"</h3> + +<p>Este ejemplo básico muestra como aplicar "flexibilidad" a un elemento y como sus "hijos" se comportan flexiblemente. </p> + +<pre class="brush:html;"><!DOCTYPE html> +<html lang="en"> + <head> + <style> + + .flex + { + /* basic styling */ + width: 350px; + height: 200px; + border: 1px solid #555; + font: 14px Arial; + + /* flexbox setup */ + display: -webkit-flex; + -webkit-flex-direction: row; + + display: flex; + flex-direction: row; + } + + .flex > div + { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + + width: 30px; /* To make the transition work nicely. (Transitions to/from + "width:auto" are buggy in Gecko and Webkit, at least. + See http://bugzil.la/731886 for more info.) */ + + -webkit-transition: width 0.7s ease-out; + transition: width 0.7s ease-out; + } + + /* colors */ + .flex > div:nth-child(1){ background : #009246; } + .flex > div:nth-child(2){ background : #F1F2F1; } + .flex > div:nth-child(3){ background : #CE2B37; } + + .flex > div:hover + { + width: 200px; + } + + </style> + + </head> + <body> + <p>Flexbox nuovo</p> + <div class="flex"> + <div>uno</div> + <div>due</div> + <div>tre</div> + </div> + </body> +</html></pre> + +<h3 id="Ejemplo_de_Diseño_del_Santo_Gríal">Ejemplo de "Diseño del Santo Gríal"</h3> + +<p>Este ejemplo muestra como la "caja flexible" proporciona la habilidad de cambiar dinámicamente el diseño para distintas resoluciones de pantalla. El diagrama siguiente ilustra la transformación.</p> + +<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> + +<p>Aquí se muestra el caso en que el diseño de la página adaptado a un navegador tiene que mostrarse óptimamente en un smartphone. No solamente los elementos se reducen de tamaño, sino que el orden en que se muestran también cambia. La "caja flexible" lo hace muy sencillo.</p> + +<pre class="brush:html;"> +<!DOCTYPE html> +<html lang="en"> + <head> + <style> + + body { + font: 24px Helvetica; + background: #999999; + } + + #main { + min-height: 800px; + margin: 0px; + padding: 0px; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row; + flex-flow: row; + } + + #main > article { + margin: 4px; + padding: 5px; + border: 1px solid #cccc33; + border-radius: 7pt; + background: #dddd88; + -webkit-flex: 3 1 60%; + flex: 3 1 60%; + -webkit-order: 2; + order: 2; + } + + #main > nav { + margin: 4px; + padding: 5px; + border: 1px solid #8888bb; + border-radius: 7pt; + background: #ccccff; + -webkit-flex: 1 6 20%; + flex: 1 6 20%; + -webkit-order: 1; + order: 1; + } + + #main > aside { + margin: 4px; + padding: 5px; + border: 1px solid #8888bb; + border-radius: 7pt; + background: #ccccff; + -webkit-flex: 1 6 20%; + flex: 1 6 20%; + -webkit-order: 3; + order: 3; + } + + header, footer { + display: block; + margin: 4px; + padding: 5px; + min-height: 100px; + border: 1px solid #eebb55; + border-radius: 7pt; + background: #ffeebb; + } + + /* Too narrow to support three columns */ + @media all and (max-width: 640px) { + + #main, #page { + -webkit-flex-flow: column; + flex-flow: column; + } + + #main > article, #main > nav, #main > aside { + /* Return them to document order */ + -webkit-order: 0; + order: 0; + } + + #main > nav, #main > aside, header, footer { + min-height: 50px; + max-height: 50px; + } + } + + </style> + </head> + <body> + <header>header</header> + <div id='main'> + <article>article</article> + <nav>nav</nav> + <aside>aside</aside> + </div> + <footer>footer</footer> + </body> +</html></pre> + +<h2 id="Área_de_juego">Área de juego</h2> + +<p>Hay varias áreas de juego de "cajas flexibles" disponibles on-line para experimentar:</p> + +<ul> + <li><a href="http://demo.agektmr.com/flexbox/" title="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li> + <li><a href="http://the-echoplex.net/flexyboxes" title="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li> +</ul> + +<h2 id="Cosas_a_tener_en_mente">Cosas a tener en mente</h2> + +<p>El algoritmo de las "cajas flexibles" puede ser un poco complejo de entender a veces. Hay una serie de cosas a considerar para evitar "sorpresas" cuando se utilizan las "cajas flexibles".</p> + +<p>Las "cajas flexibles" se comportan en función del <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode" title="https://developer.mozilla.org/en-US/docs/CSS/writing-mode">modo de escritura</a> establecido. Esto siginifica que <strong>inicio principal</strong> (<strong>main start</strong>) y <strong>fin principal</strong> (<strong>main end</strong>) se disponen de según la posición de <strong>inicio</strong> (<strong>start</strong>) y <strong>fin</strong> (<strong>end</strong>).</p> + +<p><strong>inicio secundario (cross start)</strong> y <strong>fin secundario</strong> (<strong>cross end)</strong> confían en la definición de la posición <strong>inicio</strong> (<strong>start)</strong> o <strong>antes</strong> (<strong>before)</strong> que depende del valor de <a href="/en/CSS/direction" title="direction"><code>direction</code></a>.</p> + +<p>Los saltos de página son posibles en el diseño de "cajas flexibles" siempre que la propiedad <code>break-</code> lo permita. Las propiedades CSS3 <code>break-after</code>, <code>break-before</code> y <code>break-inside</code> así como las propiedades CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code> y <code>page-break-inside</code> se aceptan en los contenedores flexibles, también en los elementos flexibles que ellos contienen, y también en los elementos que esos elementos flexibles a su vez contienen.</p> + +<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caraterística</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{ CompatGeckoDesktop("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br> + {{ CompatGeckoDesktop("22.0") }}</td> + <td>21.0{{ property_prefix("-webkit") }}</td> + <td>10{{ property_prefix("-ms") }}(partial)</td> + <td>12.1</td> + <td>3.1{{ property_prefix("-webkit") }}(partial)<br> + 6.1{{ property_prefix("-webkit") }}<br> + 9</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caraterística</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{ CompatGeckoMobile("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br> + {{ CompatGeckoMobile("22.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>10{{ property_prefix("-ms") }}(partial)<br> + 11</td> + <td>12.1</td> + <td> + <p>3.2{{ property_prefix("-webkit") }}(partial)<br> + 7.1{{ property_prefix("-webkit") }}<br> + 9.0</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas">Notas</h3> + +<p>[1] Internet Explorer 10 y Safari soportan un antiguo borrador de la especificación que es incompatible. No han sido actualizados para soportar la versión final.</p> + +<p>[2] Firefox soporta solamente la "caja flexible" con una sola línea. Para activar el soporte de "caja flexible" el usuario tiene que cambiar la preferencia about:config "layout.css.flexbox.enabled" a <code>true</code>.</p> + +<p>[3] El navegador de Android hasta la versión 4.3 soporta un borrador antiguo e incompatible de la especificación. Android 4.4 ha sido actualizado para dar soporte a la versión final.</p> + +<p>[4] Mientras que en la implementación inicial en Opera 12.10 <code>flexbox </code>no estaba en el prefijo, obtuvo prefijos en las versiones de la 15 a la 16 de Opera y 15 a 19 de Opera Mobile con {{property_prefix("-webkit")}}. Este prefijo, fue eliminado de nuevo en Opera 17 y Opera Mobile 24.</p> + +<p>[5] Hasta Firefox 29, especificar <code>visibility: collapse</code> en un elemento flex causaba que fuera tratado como si fuera <code>display: none </code>en vez del comportamiento pretendido, tratándolo como si fuera <code>visibility: hidden</code>. El método alternativo sugerido es usar <code>visibility: hidden</code> para los elementos flex que debieran comportarse como si huberan sido designados <code>visibility: collapse</code>. Para más información, ver {{bug(783470)}}.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://github.com/philipwalton/flexbugs">El Proyecto Flexbugs</a> para información de errores en implementación de flexbox en navegadores.</li> +</ul> diff --git a/files/es/web/css/css_flow_layout/index.html b/files/es/web/css/css_flow_layout/index.html new file mode 100644 index 0000000000..45daafc7a4 --- /dev/null +++ b/files/es/web/css/css_flow_layout/index.html @@ -0,0 +1,43 @@ +--- +title: CSS Flow Layout +slug: Web/CSS/CSS_Flow_Layout +translation_of: Web/CSS/CSS_Flow_Layout +--- +<div>{{CSSRef}}</div> + +<p class="summary">El <em>Flujo Normal</em>, o también Flow Layout, es la forma en que los elementos de línea y de bloque son presentados en una página sin que haya cambios en su diseño. El flujo es esencialmente un grupo de elementos que se perciben entre sí e interactúan entre ellos en nuestro diseño. Cuando uno de ellos se encuentra <em>fuera del flujo</em>, éste se comporta de manera independiente.</p> + +<p>In normal flow, <strong>inline</strong> elements display in the inline direction, that is in the direction words are displayed in a sentence according to the <a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">Writing Mode</a> of the document. <strong>Block</strong> elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page.</p> + +<h2 id="Ejemplo_Básico">Ejemplo Básico</h2> + +<p>The following example demonstrates Block and Inline Level boxes. The two paragraph elements with a green border are Block Level, displaying one under the other.</p> + +<p>The first sentence also includes a span element with a blue background. This is inline level and therefore displays in place in the sentence.</p> + +<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p> + +<h2 id="Guides">Guides</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Flow Layout and Writing Modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Flow Layout and Overflow</a></li> +</ul> + +<h2 id="Reference">Reference</h2> + +<h3 id="Glossary_Entries">Glossary Entries</h3> + +<ul> + <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> +</ol> +</section> diff --git a/files/es/web/css/css_fonts/index.html b/files/es/web/css/css_fonts/index.html new file mode 100644 index 0000000000..f3d6ebe59a --- /dev/null +++ b/files/es/web/css/css_fonts/index.html @@ -0,0 +1,148 @@ +--- +title: CSS Fonts +slug: Web/CSS/CSS_Fonts +tags: + - CCS + - CSS Fonts + - Reference +translation_of: Web/CSS/CSS_Fonts +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Fonts</strong> es el modulo CSS que define todo lo relacionado con los recursos tipográficos, sus propiedades y como son cargados. Permite definir el estilo de una fuente, su familia tipográfica, tamaño o peso, y las variantes que puede tener la fuente. También permite definir la altura de una línea.</p> + +<h2 id="Referencia">Referencia</h2> + +<h3 id="Propiedades">Propiedades</h3> + +<div class="index"> +<ul> + <li>{{cssxref("font")}}</li> + <li>{{cssxref("font-family")}}</li> + <li>{{cssxref("font-feature-settings")}}</li> + <li>{{cssxref("font-kerning")}}</li> + <li>{{cssxref("font-language-override")}}</li> + <li>{{cssxref("font-size")}}</li> + <li>{{cssxref("font-size-adjust")}}</li> + <li>{{cssxref("font-stretch")}}</li> + <li>{{cssxref("font-style")}}</li> + <li>{{cssxref("font-synthesis")}}</li> + <li>{{cssxref("font-variant")}}</li> + <li>{{cssxref("font-variant-alternates")}}</li> + <li>{{cssxref("font-variant-caps")}}</li> + <li>{{cssxref("font-variant-east-asian")}}</li> + <li>{{cssxref("font-variant-ligatures")}}</li> + <li>{{cssxref("font-variant-numeric")}}</li> + <li>{{cssxref("font-variant-position")}}</li> + <li>{{cssxref("font-weight")}}</li> + <li>{{cssxref("line-height")}}</li> +</ul> +</div> + +<h3 id="Atributos">Atributos</h3> + +<dl> + <dt>{{cssxref("@font-face")}}</dt> + <dd> + <div class="index"> + <ul> + <li>{{cssxref("@font-face/font-family", "font-family")}}</li> + <li>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</li> + <li>{{cssxref("@font-face/font-style", "font-style")}}</li> + <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li> + <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li> + <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li> + <li>{{cssxref("@font-face/src", "src")}}</li> + <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li> + </ul> + </div> + </dd> + <dt>{{cssxref("@font-feature-values")}}</dt> +</dl> + +<h2 id="Guia">Guia</h2> + +<p><em>None.</em></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font', '')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td> + <p>Definición<br> + inicial</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte<br> + básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html new file mode 100644 index 0000000000..3b0aac0c26 --- /dev/null +++ b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -0,0 +1,613 @@ +--- +title: Colocación automática en diseño de cuadrícula CSS +slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +--- +<p><span class="notranslate">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.</span> <span class="notranslate"> 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.</span> <span class="notranslate"> 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.</span></p> + +<div id="placement_1"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('placement_1', '500', '230') }}</p> +</div> + +<h2 id="Reglas_predeterminadas_para_la_colocación_automática"><span class="notranslate">Reglas predeterminadas para la colocación automática</span></h2> + +<p><span class="notranslate">Como puede ver con el ejemplo anterior, si crea una cuadrícula, todos los elementos secundarios se colocarán uno en cada celda de la cuadrícula.</span> <span class="notranslate"> El flujo predeterminado es organizar los elementos por fila.</span> <span class="notranslate"> La cuadrícula colocará un elemento en cada celda de la fila 1. Si ha creado filas adicionales utilizando la propiedad <code>grid-template-rows</code> , entonces grid continuará colocando elementos en estas filas.</span> <span class="notranslate"> Si la cuadrícula no tiene suficientes filas en la cuadrícula explícita para colocar todos los elementos, se crearán nuevas filas <em>implícitas</em> .</span></p> + +<h3 id="Dimensionar_filas_en_la_cuadrícula_implícita"><span class="notranslate">Dimensionar filas en la cuadrícula implícita</span></h3> + +<p><span class="notranslate">El valor predeterminado para las filas creadas automáticamente en la cuadrícula implícita es que tengan el tamaño automático.</span> <span class="notranslate"> Esto significa que contendrán el contenido agregado a ellos sin causar un desbordamiento.</span></p> + +<p><span class="notranslate">Sin embargo, puede controlar el tamaño de estas filas con la propiedad <code>grid-auto-rows</code> .</span> <span class="notranslate"> Para hacer que todas las filas creadas tengan 100 píxeles de alto, por ejemplo, usaría:</span></p> + + + +<div id="placement_2"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px; +} +</pre> + +<p>{{ EmbedLiveSample('placement_2', '500', '330') }}</p> +</div> + +<p><span class="notranslate">Puede usar <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/minmax&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhjUmn8CALnPlLGqwXvXDDpfMu0Tww" title="La documentación sobre esto aún no se ha escrito; por favor considere contribuir!"><code>minmax()</code></a> en su valor para <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhgNi8Od6ONl2VQi-luh1_WHMnhvGA" title="La propiedad CSS grid-auto-rows especifica el tamaño de una pista de fila de cuadrícula creada implícitamente."><code>grid-auto-rows</code></a> permite la creación de filas de un tamaño mínimo pero luego crecer para ajustarse al contenido si es más alto.</span></p> + +<div id="placement_3"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four + <br>This cell + <br>Has extra + <br>content. + <br>Max is auto + <br>so the row expands. + </div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +</pre> + +<p>{{ EmbedLiveSample('placement_3', '500', '330') }}</p> +</div> + +<p><span class="notranslate">También puede pasar una lista de pistas, esto se repetirá.</span> <span class="notranslate"> La siguiente lista de pistas creará una pista de fila implícita inicial como 100 píxeles y una segunda como <code>200px</code> píxeles.</span> <span class="notranslate"> Esto continuará mientras se agregue contenido a la cuadrícula implícita.</span> <span class="notranslate"> <strong>Las listas de seguimiento no son compatibles con Firefox.</strong></span></p> + +<div id="placement_4"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px 200px; +} +</pre> + +<p>{{ EmbedLiveSample('placement_4', '500', '330') }}</p> +</div> + +<h3 id="Colocación_automática_por_columna"><span class="notranslate">Colocación automática por columna</span></h3> + +<p><span class="notranslate">También puede pedirle a la cuadrícula que coloque automáticamente los elementos por columna.</span> <span class="notranslate"> Usando la propiedad <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhhGAPsqylJcBEC8EgSX7Gqqc-us4Q" title="La propiedad CSS grid-auto-flow controla cómo funciona el algoritmo de colocación automática, especificando exactamente cómo fluyen los elementos colocados automáticamente en la cuadrícula."><code>grid-auto-flow</code></a> con un valor de <code>column</code> .</span> <span class="notranslate"> En este caso, la cuadrícula agregará elementos en las filas que haya definido utilizando <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhiibrTdo1Q-C-swZP-9Hj4FqNhSYA" title="La propiedad CSS grid-template-rows define los nombres de línea y las funciones de tamaño de seguimiento de las filas de la cuadrícula."><code>grid-template-rows</code></a> .</span> <span class="notranslate"> Cuando llena una columna, se moverá a la siguiente columna explícita o creará una nueva pista de columna en la cuadrícula implícita.</span> <span class="notranslate"> Al igual que con las pistas de fila implícitas, estas pistas de columna tendrán el tamaño automático.</span> <span class="notranslate"> Puede controlar el tamaño de las pistas de columna implícitas con <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhisTQnhckNG69vB3s3mdkckl3PnrQ" title="La propiedad CSS grid-auto-columnas especifica el tamaño de una pista de columna de cuadrícula creada implícitamente."><code>grid-auto-columns</code></a> , esto funciona de la misma manera que <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhgNi8Od6ONl2VQi-luh1_WHMnhvGA" title="La propiedad CSS grid-auto-rows especifica el tamaño de una pista de fila de cuadrícula creada implícitamente."><code>grid-auto-rows</code></a> .</span></p> + +<p><span class="notranslate">En el siguiente ejemplo, he creado una cuadrícula con tres pistas de fila de 200 píxeles de altura.</span> <span class="notranslate"> Estoy colocando automáticamente por columna y las columnas creadas tendrán un ancho de columna de 300 píxeles, luego un ancho de columna de 100 píxeles hasta que haya suficientes pistas de columna para contener todos los elementos.</span></p> + + + +<div id="placement_5"> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-rows: repeat(3, 200px); + grid-gap: 10px; + grid-auto-flow: column; + grid-auto-columns: 300px 100px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('placement_5', '500', '640') }}</p> +</div> + +<h2 id="El_orden_de_los_artículos_colocados_automáticamente"><span class="notranslate">El orden de los artículos colocados automáticamente</span></h2> + +<p><span class="notranslate">Una cuadrícula puede contener una mezcla de elementos.</span> <span class="notranslate"> Algunos de los elementos pueden tener una posición en la cuadrícula, pero otros pueden colocarse automáticamente.</span> <span class="notranslate"> Esto puede ser útil, si tiene un orden de documentos que refleja el orden en que los elementos se ubican en la cuadrícula, es posible que no necesite escribir reglas CSS para colocar absolutamente todo.</span> <span class="notranslate"> La especificación contiene una sección larga que detalla el <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://drafts.csswg.org/css-grid/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhht1KzrS4YJdz-dIfSz4pbcik3Zqg#auto-placement-algo" rel="noopener">algoritmo de colocación de elementos de</a> la <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://drafts.csswg.org/css-grid/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhht1KzrS4YJdz-dIfSz4pbcik3Zqg#auto-placement-algo" rel="noopener">cuadrícula</a> , sin embargo, para la mayoría de nosotros solo necesitamos recordar algunas reglas simples para nuestros elementos.</span></p> + +<h3 id="Pedido_de_documentos_modificados"><span class="notranslate">Pedido de documentos modificados</span></h3> + +<p><span class="notranslate">La cuadrícula coloca los elementos a los que no se les ha asignado una posición de cuadrícula en lo que se describe en la especificación como "orden de documento modificado de orden".</span> <span class="notranslate"> Esto significa que si ha utilizado la propiedad del <code>order</code> , los artículos se colocarán por ese orden, no por su orden DOM.</span> <span class="notranslate"> De lo contrario, permanecerán de forma predeterminada en el orden en que se ingresan en el origen del documento.</span></p> + +<h3 id="Artículos_con_propiedades_de_colocación"><span class="notranslate">Artículos con propiedades de colocación</span></h3> + +<p><span class="notranslate">Lo primero que hará la cuadrícula es colocar cualquier elemento que tenga una posición.</span> <span class="notranslate"> En el siguiente ejemplo, tengo 12 elementos de cuadrícula.</span> <span class="notranslate"> El elemento 2 y el elemento 5 se han colocado utilizando una colocación basada en líneas en la cuadrícula.</span> <span class="notranslate"> Puede ver cómo se colocan esos elementos y luego los otros elementos se colocan automáticamente en los espacios.</span> <span class="notranslate"> Los artículos colocados automáticamente se colocarán antes de los artículos colocados en orden DOM, no comienzan después de la posición de un artículo colocado que viene antes que ellos.</span></p> + +<div id="placement_6"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> + <div>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +</pre> + +<p>{{ EmbedLiveSample('placement_6', '500', '450') }}</p> +</div> + +<h3 id="Maneja_artículos_que_abarcan_pistas"><span class="notranslate">Maneja artículos que abarcan pistas</span></h3> + +<p><span class="notranslate">Puede usar las propiedades de ubicación sin dejar de aprovechar la colocación automática.</span> <span class="notranslate"> En el siguiente ejemplo, he agregado al diseño configurando elementos impares para abarcar dos pistas tanto para filas como para columnas.</span> <span class="notranslate"> Hago esto con las propiedades <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhiTUP0c3kBpxu_o_84hDEyxHQeuuA" title="La propiedad CSS de fin de columna de cuadrícula especifica la posición final de un elemento de cuadrícula dentro de la columna de cuadrícula al contribuir una línea, un tramo o nada (automático) a su ubicación de cuadrícula, especificando así el borde del extremo del bloque de su área de cuadrícula."><code>grid-column-end</code></a> y <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhiMYehNwPR_y2q7E_32YoeGI3FJ8w" title="La propiedad CSS de fin de fila de cuadrícula especifica la posición final de un elemento de cuadrícula dentro de la fila de cuadrícula al contribuir una línea, un tramo o nada (automático) a su ubicación de cuadrícula, especificando así el borde final en línea de su área de cuadrícula."><code>grid-row-end</code></a> y establezco el valor de esto para <code>span 2</code> .</span> <span class="notranslate"> Lo que esto significa es que la línea de inicio del artículo se establecerá mediante la colocación automática, y la línea final abarcará dos pistas.</span></p> + +<p><span class="notranslate">Puede ver cómo esto deja huecos en la cuadrícula, en cuanto a los elementos colocados automáticamente si la cuadrícula se encuentra con un elemento que no cabe en una pista, se moverá a la siguiente fila hasta que encuentre un espacio que el elemento pueda caber en.</span></p> + +<div id="placement_7"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> + <div>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; +} +.wrapper div:nth-child(4n+1) { + grid-column-end: span 2; + grid-row-end: span 2; + background-color: #ffa94d; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +</pre> + +<p>{{ EmbedLiveSample('placement_7', '500', '770') }}</p> +</div> + +<h3 id="Llenando_los_huecos"><span class="notranslate">Llenando los huecos</span></h3> + +<p><span class="notranslate">Hasta ahora, aparte de los elementos que hemos colocado específicamente, la cuadrícula siempre avanza y mantiene los elementos en orden DOM.</span> <span class="notranslate"> En general, esto es lo que desea, si está diseñando un formulario, por ejemplo, no desea que las etiquetas y los campos se mezclen para llenar un vacío.</span> <span class="notranslate"> Sin embargo, a veces, estamos diseñando cosas que no tienen un orden lógico y nos gustaría crear un diseño que no tenga huecos.</span></p> + +<p><span class="notranslate">Para hacer esto, agregue la propiedad <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhhGAPsqylJcBEC8EgSX7Gqqc-us4Q" title="La propiedad CSS grid-auto-flow controla cómo funciona el algoritmo de colocación automática, especificando exactamente cómo fluyen los elementos colocados automáticamente en la cuadrícula."><code>grid-auto-flow</code></a> con un valor <code>dense</code> al contenedor.</span> <span class="notranslate"> Esta es la misma propiedad que usa para cambiar el orden de flujo a <code>column</code> , por lo que si estuviera trabajando en columnas agregaría ambos valores <code>grid-auto-flow: column dense</code> .</span></p> + +<p><span class="notranslate">Una vez hecho esto, la grilla ahora rellenará los huecos, a medida que se mueva a través de la grilla, deja huecos como antes, pero luego, si encuentra un elemento que se ajuste a un hueco anterior, lo recogerá y lo sacará del orden DOM para colóquelo en la brecha.</span> <span class="notranslate"> Al igual que con cualquier otro reordenamiento en la cuadrícula, esto no cambia el orden lógico.</span> <span class="notranslate"> El orden de tabulación, por ejemplo, seguirá el orden del documento.</span> <span class="notranslate"> Examinaremos los posibles problemas de accesibilidad de Grid Layout en una guía posterior, pero debe tener cuidado al crear esta desconexión entre el orden visual y el orden de visualización.</span></p> + +<div id="placement_8"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> + <div>Eight</div> + <div>Nine</div> + <div>Ten</div> + <div>Eleven</div> + <div>Twelve</div> +</div> +</pre> + +<pre class="brush: css">.wrapper div:nth-child(4n+1) { + grid-column-end: span 2; + grid-row-end: span 2; + background-color: #ffa94d; +} + .wrapper div:nth-child(2) { + grid-column: 3; + grid-row: 2 / 4; + } + .wrapper div:nth-child(5) { + grid-column: 1 / 3; + grid-row: 1 / 3; +} +.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 100px; + grid-gap: 10px; + grid-auto-flow: dense; +} +</pre> + +<p>{{ EmbedLiveSample('placement_8', '500', '730') }}</p> +</div> + +<h3 id="Elementos_de_cuadrícula_anónimos"><span class="notranslate">Elementos de cuadrícula anónimos</span></h3> + +<p><span class="notranslate">Hay una mención en la especificación de elementos de cuadrícula anónimos.</span> <span class="notranslate"> Estos se crean si tiene una cadena de texto dentro de su contenedor de cuadrícula, que no está envuelta en ningún otro elemento.</span> <span class="notranslate"> En el siguiente ejemplo, tenemos tres elementos de cuadrícula, suponiendo que haya configurado el padre con una clase de <code>grid</code> para <code>display: grid</code> .</span> <span class="notranslate"> El primero es un elemento anónimo, ya que no tiene un marcado adjunto, este elemento siempre se tratará a través de las reglas de colocación automática.</span> <span class="notranslate"> Los otros dos son elementos de cuadrícula encerrados en un div, pueden colocarse automáticamente o puede colocarlos con un método de posicionamiento en su cuadrícula.</span></p> + +<pre class="brush: css"><div class="grid"> + I am a string and will become an anonymous item + <div>A grid item</div> + <div>A grid item</div> +</div> +</pre> + +<p><span class="notranslate">Los elementos anónimos siempre se colocan automáticamente porque no hay forma de orientarlos.</span> <span class="notranslate"> Por lo tanto, si tiene algún texto sin envolver por alguna razón en su cuadrícula, tenga en cuenta que puede aparecer en algún lugar inesperado, ya que se colocará automáticamente de acuerdo con las reglas de colocación automática.</span></p> + +<h3 id="Casos_de_uso_para_la_colocación_automática"><span class="notranslate">Casos de uso para la colocación automática</span></h3> + +<p><span class="notranslate">La colocación automática es útil siempre que tenga una colección de artículos.</span> <span class="notranslate"> Pueden ser elementos que no tienen un orden lógico, como una galería de fotos o una lista de productos.</span> <span class="notranslate"> En ese caso, puede optar por utilizar el modo de embalaje denso para rellenar los agujeros en su cuadrícula.</span> <span class="notranslate"> En mi ejemplo de galería de imágenes tengo algunas imágenes de paisajes y algunas de retratos.</span> <span class="notranslate"> He configurado imágenes de paisajes, con una clase de <code>landscape</code> para abarcar dos pistas de columna.</span> <span class="notranslate"> Luego uso <code>grid-auto-flow: dense</code> para crear una grilla densamente empaquetada.</span></p> + +<div id="placement_9"> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + grid-gap: 10px; + grid-auto-flow: dense; + list-style: none; + margin: 1em auto; + padding: 0; + max-width: 800px; +} +.wrapper li { + border: 1px solid #ccc; +} +.wrapper li.landscape { + grid-column-end: span 2; +} +.wrapper li img { + display: block; + object-fit: cover; + width: 100%; + height: 100%; +} +</pre> + +<pre class="brush: html"><ul class="wrapper"> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> + <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li> + <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li> + <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> + <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> + <li><img src="http://placehold.it/200x300" alt="placeholder"></li> +</ul> +</pre> + +<p>{{ EmbedLiveSample('placement_9', '500', '1300') }}</p> +</div> + +<p><span class="notranslate">La colocación automática también puede ayudarlo a diseñar elementos de interfaz que tengan un orden lógico.</span> <span class="notranslate"> Un ejemplo es la lista de definiciones en el siguiente ejemplo.</span> <span class="notranslate"> 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 <code>dt</code> y <code>dd</code> .</span> <span class="notranslate"> En mi ejemplo, estoy permitiendo la colocación automática para colocar los elementos, sin embargo, tengo clases que comienzan un <code>dt</code> en la columna 1, y <code>dd</code> 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.</span></p> + +<div id="placement_10"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <dl> + <dt>Mammals</dt> + <dd>Cat</dd> + <dd>Dog</dd> + <dd>Mouse</dd> + <dt>Fish</dt> + <dd>Guppy</dd> + <dt>Birds</dt> + <dd>Pied Wagtail</dd> + <dd>Owl</dd> + </dl> +</div> +</pre> + +<pre class="brush: css">dl { + display: grid; + grid-template-columns: auto 1fr; + max-width: 300px; + margin: 1em; + line-height: 1.4; +} +dt { + grid-column: 1; + font-weight: bold; +} +dd { + grid-column: 2; + } +</pre> + +<p>{{ EmbedLiveSample('placement_10', '500', '230') }}</p> +</div> + +<h2 id="¿Qué_no_podemos_hacer_con_la_colocación_automática_todavía"><span class="notranslate">¿Qué no podemos hacer con la colocación automática (todavía)?</span></h2> + +<p><span class="notranslate">Hay un par de cosas que a menudo surgen como preguntas.</span> <span class="notranslate"> Actualmente no podemos hacer cosas como apuntar a cualquier otra celda de la cuadrícula con nuestros artículos.</span> <span class="notranslate"> Es posible que ya se le haya ocurrido un problema relacionado si siguió la última guía sobre líneas con nombre en la cuadrícula.</span> <span class="notranslate"> Sería definir una regla que dijera "colocar elementos automáticamente en la siguiente línea llamada" n ", y la cuadrícula se saltaría otras líneas. Se plantea <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://github.com/w3c/csswg-drafts/issues/796&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhi1X-T_53Yxbg3lSUNap9U7hwWSnQ" rel="noopener">un problema al respecto</a> en el repositorio CSSWG GitHub, y sería bienvenido a agregue sus propios casos de uso a esto.</span></p> + +<p><span class="notranslate">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.</span> <span class="notranslate"> Si lo hace, créelos como problemas o agréguelos a un problema existente que podría resolver su caso de uso.</span> <span class="notranslate"> Esto ayudará a mejorar las futuras versiones de la especificación.</span></p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html new file mode 100644 index 0000000000..445cbac308 --- /dev/null +++ b/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -0,0 +1,703 @@ +--- +title: Box alignment in CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +--- +<p>Si estás familiarizado con <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a> Entonces ya habrás encontrado la forma en que los items flexibles pueden ser alineados correctamente dentro de un contendor flex. Estas propiedades de alineación que encontramos por primera vez en la especificación de flexbox se han trasladado a una nueva especificación llamada <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Esta especificación tiene detalles de cómo debería funcionar la alineación en todos los diferentes métodos de diseño.</p> + +<p>Cada método de diseño que implemente Box Alignment tendrá algunas diferencias debido a que cada método tiene características y restricciones diferentes (y acciones heredadas), por lo que es imposible hacer la alineación exactamente de la misma forma en todos los ámbitos. La especificación Box Alignment tiene detalles para cada método, sin embargo, te decepcionaría si intentaras alinear en muchos métodos en este momento, pues el soporte aún no está disponible para todos los navegadores. Donde sí tenemos soporte de navegador para las propiedades de alineación y distribución de espacio de la especificación Box Alignment es en grid layout.</p> + +<p><span class="seoSummary">Esta guía muestra la forma cómo funciona la alineación de cajas (box alignment) en el diseño de cuadriculas (Grid Layout). Verás mucha similitud en cómo funcionan estás propiedades y valores en flexbox.</span> Debido a que la cuadrícula (grid) es bidimensional y flexbox es unidimensional, existen algunas pequeñas diferencias con las que debes tener cuidado. Así que comenzaremos mirando los dos ejes con los que tratamos cuando alineamos cosas en una cuadricula.</p> + +<h2 id="Los_2_ejes_de_un_diseño_Grid">Los 2 ejes de un diseño Grid</h2> + +<p>Al trabajar con el diseño de cuadrícula, tienes dos ejes disponibles para alinear las cosas: el eje del bloque (block axis) y el eje en línea (inline axis). El eje de bloque es el eje sobre el cual se disponen los bloques en el diseño del bloque. Si tienes dos párrafos en tu página, se mostrara uno debajo del otro, entonces es ésta la dirección que describimos como el eje de bloque (también llamadas columnas, eje "y", eje vertical).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15963/Block_Axis.png" style="height: 306px; width: 940px;"></p> + +<p>El eje en línea (inline axis) se ejecuta a través del eje del bloque, es la dirección en la que se ejecuta el texto en el flujo regular en línea (también llamadas filas, Eje "x", eje horizontal). </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14773/7_Inline_Axis.png" style="height: 306px; width: 940px;"></p> + +<p>Podemos alinear el contenido dentro de las áreas de la cuadrícula o rejilla , y los tracks en estos dos ejes.</p> + +<h2 id="Alineación_de_elementos_en_el_Eje_de_Bloque">Alineación de elementos en el Eje de Bloque </h2> + +<p>Las propiedades {{cssxref("align-self")}} y {{cssxref("align-items")}} controlan la alineación en el eje de bloque. Cuando usamos estas propiedades, estamos cambiando la alineación del elemento dentro del área de la cuadricula (grid) que se ha colocado.</p> + +<p>En el siguiente ejemplo, tengo 4 áreas dentro de mi cuadricula (grid). Puedo usar la propiedad {{cssxref("align-items")}} en el contenedor de la cuadricula (grid container), para alinear los elementos usando uno de los siguientes valores:</p> + +<ul> + <li><code>auto</code></li> + <li><code>normal</code></li> + <li><code>start</code></li> + <li><code>end</code></li> + <li><code>center</code></li> + <li><code>stretch</code></li> + <li><code>baseline</code></li> + <li><code>first baseline</code></li> + <li><code>last baseline</code></li> +</ul> + +<div id="alignment_1"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px; + grid-template-areas: + "a a a a b b b b" + "a a a a b b b b" + "c c c c d d d d" + "c c c c d d d d"; + align-items: start; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_1', '500', '450') }}</p> +</div> + +<p>Ten en mente que una vez establezcas <code>align-self: start</code>, la altura de cada hijo <code><div></code> será determinada por el contenido del <code><div></code>. Esto está en contraste de omitir <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self">align-self</a></code> completamente, en el cual la altura de cada <code><div></code> se extendería hasta llenar el área de la cuadricula.</p> + +<p>La propiedad {{cssxref("align-items")}} establece la propiedad {{cssxref("align-self")}} para todos los elementos hijos de la cuadricula. Esto significa que puedes establecer la propiedad individualmente, usando <code>align-self</code> en cada elemento de la cuadricula.</p> + +<p>En el siguiente ejemplo, estoy usando la propiedad <code>align-self</code> para demostrar los diferentes valores de alineación. La primer área está mostrando la acción por defecto de <code>align-self</code>, el cual es extenderse. El segundo elemento tiene un valor en <code>align-self</code> de <code>start</code>, el tercero <code>end</code> y el cuarto <code>center</code>.</p> + +<div id="alignment_2"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px; + grid-template-areas: + "a a a a b b b b" + "a a a a b b b b" + "c c c c d d d d" + "c c c c d d d d"; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; + align-self: start; +} +.item3 { + grid-area: c; + align-self: end; +} +.item4 { + grid-area: d; + align-self: center; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_2', '500', '450') }}</p> +</div> + +<h3 id="Elementos_con_una_relación_de_aspecto_intrínseco">Elementos con una relación de aspecto intrínseco</h3> + +<p>La especificación determina que la acción por defecto en {{cssxref("align-self")}} es estirarse, excepto para los elementos que tienen una relación de aspecto intrínseco, en este caso ellos funcionan como <code>start</code>. La razón para esto, es que si elemento con una relación de aspecto intrínseco es establecido para estirarse, este por defecto pueda distorsionarlo.</p> + +<p>Esta acción ahora ha sido clarificada en la especificación, con navegadores aún hay que implementar la acción correcta. Hasta que eso pase, te puedes asegurar de que los elementos no se extiendan, como en imagenes, las cuales son hijos directos de la cuadricula, estableciendo {{cssxref("align-self")}} y {{cssxref("justify-self")}} al empezar. Esto se asemejará a la acción correcta una vez implementado.</p> + +<h2 id="Justifying_Items_on_the_Inline_Axis">Justifying Items on the Inline Axis</h2> + +<p>As {{cssxref("align-items")}} and {{cssxref("align-self")}} deal with the alignment of items on the block axis, {{cssxref("justify-items")}} and {{cssxref("justify-self")}} do the same job on the inline axis. The values you can choose from are the same as for <code>align-self</code>.</p> + +<ul> + <li><code>auto</code></li> + <li><code>normal</code></li> + <li><code>start</code></li> + <li><code>end</code></li> + <li><code>center</code></li> + <li><code>stretch</code></li> + <li><code>baseline</code></li> + <li><code>first baseline</code></li> + <li><code>last baseline</code></li> +</ul> + +<p>You can see the same example as used for {{cssxref("align-items")}}, below. This time we are applying the {{cssxref("justify-self")}} property.</p> + +<p>Once again the default is <code>stretch</code>, other than for items with an intrinsic aspect ratio. This means that by default, grid items will cover their grid area, unless you change that by setting alignment. The first item in the example demonstrates this default alignment:</p> + +<div id="alignment_3"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-gap: 10px; + grid-auto-rows: 100px; + grid-template-areas: + "a a a a b b b b" + "a a a a b b b b" + "c c c c d d d d" + "c c c c d d d d"; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; + justify-self: start; +} +.item3 { + grid-area: c; + justify-self: end; +} +.item4 { + grid-area: d; + justify-self: center; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_3', '500', '450') }}</p> +</div> + +<p>As with {{cssxref("align-self")}} and {{cssxref("align-items")}}, you can apply {{cssxref("justify-items")}} to the grid container, to set the {{cssxref("justify-self")}} value for all items.</p> + +<p>The {{cssxref("justify-self")}} and {{cssxref("justify-items")}} properties are not implemented in flexbox. This is due to the one-dimensional nature of <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the {{cssxref("justify-content")}} property.</p> + +<h2 id="Center_an_item_in_the_area">Center an item in the area</h2> + +<p>By combining the align and justify properties we can easily center an item inside a grid area.</p> + +<div id="alignment_4"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 10px; + grid-auto-rows: 200px; + grid-template-areas: + ". a a ." + ". a a ."; +} +.item1 { + grid-area: a; + align-self: center; + justify-self: center; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_4', '500', '480') }}</p> +</div> + +<h2 id="Aligning_the_grid_tracks_on_the_block_axis">Aligning the grid tracks on the block axis</h2> + +<p>If you have a situation where your grid tracks use an area that is smaller than the grid container, then you can align the grid tracks themselves, inside that container. Once again, this operates on the block and inline axes, with {{cssxref("align-content")}} aligning tracks on the block axis, and {{cssxref("justify-content")}} performing alignment on the inline axis. The values for {{cssxref("align-content")}} and {{cssxref("justify-content")}} are:</p> + +<ul> + <li><code>normal</code></li> + <li><code>start</code></li> + <li><code>end</code></li> + <li><code>center</code></li> + <li><code>stretch</code></li> + <li><code>space-around</code></li> + <li><code>space-between</code></li> + <li><code>space-evenly</code></li> + <li><code>baseline</code></li> + <li><code>first baseline</code></li> + <li><code>last baseline</code></li> +</ul> + +<p>In the below example I have a grid container of 500 pixels by 500 pixels. I have defined 3 row and column tracks each of 100 pixels with a 10 pixel gutter. This means that there is space inside the grid container both in the block and inline directions.</p> + +<p>The <code>align-content</code> property is applied to the grid container as it works on the entire grid. The default behavior in grid layout is <code>start</code>, which is why our grid tracks are in the top left corner of the grid, aligned against the start grid lines:</p> + +<div id="alignment_5"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3,100px); + height: 500px; + width: 500px; + grid-gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_5', '500', '520') }}</p> + +<p>If I add <code>align-content</code> to my container, with a value of <code>end</code>, the tracks all move to the end line of the grid container in the block dimension:</p> +</div> + +<div id="alignment_6"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3,100px); + height: 500px; + width: 500px; + grid-gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; + align-content: end; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_6', '500', '520') }}</p> +</div> + +<p>We can also use values for this property that you may be familiar with from flexbox; the space distribution values of <code>space-between</code>, <code>space-around</code> and <code>space-evenly</code>. If we update {{cssxref("align-content")}} to <code>space-between</code>, you can see how the elements on our grid space out:</p> + +<div id="alignment_7"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3,100px); + height: 500px; + width: 500px; + grid-gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; + align-content: space-between; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_7', '500', '520') }}</p> +</div> + +<p>It is worth noting, that using these space distribution values may cause items on your grid to become larger. If an item spans more than one grid track, as further space is added between the tracks, that item needs to become large to absorb the space. We’re always working in a strict grid. Therefore, if you decide to use these values, ensure that the content of your tracks can cope with the extra space, or that you have used alignment properties on the items, to cause them to move to the start rather than stretch.</p> + +<p>In the below image I have placed the grid with <code>align-content</code>, with a value of <code>start</code> alongside the grid when <code>align-content</code> has a value of <code>space-between</code>. You can see how items 1 and 2, which span two row tracks have taken on extra height as they gain the additional space added to the gap between those two tracks:</p> + +<p><img alt="Demonstrating how items become larger if we use space-between." src="https://mdn.mozillademos.org/files/14729/7_space-between.png" style="height: 534px; width: 1030px;"></p> + +<h2 id="Justifying_the_grid_tracks_on_the_row_axis">Justifying the grid tracks on the row axis</h2> + +<p>On the inline axis, we can use {{cssxref("justify-content")}} to perform the same type of alignment that we used {{cssxref("align-content")}} for in the block axis.</p> + +<p>Using the same example, I am setting {{cssxref("justify-content")}} to <code>space-around</code>. This once again causes tracks which span more than one column track to gain extra space:</p> + +<div id="alignment_8"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3,100px); + height: 500px; + width: 500px; + grid-gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; + align-content: space-between; + justify-content: space-around; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_8', '500', '500') }}</p> +</div> + +<h2 id="Alignment_and_auto_margins">Alignment and auto margins</h2> + +<p>Another way to align items inside their area, is to use auto margins. If you have ever centered your layout in the viewport, by setting the right and left margin of the container block to <code>auto</code>, you know that an auto margin absorbs all of the available space. By setting the margin to <code>auto</code> on both sides, it pushes the block into the middle as both margins attempt to take all of the space.</p> + +<p>In this next example, I have given item 1 a left margin of <code>auto</code>. You can see how the content is now pushed over to the right side of the area, as the auto margin takes up remaining space, after room for the content of that item has been assigned:</p> + +<div id="alignment_9"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3,100px); + height: 500px; + width: 500px; + grid-gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; +} +.item1 { + grid-area: a; + margin-left: auto; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Item 1</div> + <div class="item2">Item 2</div> + <div class="item3">Item 3</div> + <div class="item4">Item 4</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('alignment_9', '500', '500') }}</p> +</div> + +<p>You can see how the item is aligned by using the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a>:</p> + +<p><img alt="Image showing auto-margins using the Grid Highlighter." src="https://mdn.mozillademos.org/files/14731/7_auto_margins.png" style="height: 1000px; width: 1000px;"></p> + +<h2 id="Alignment_and_Writing_Modes">Alignment and Writing Modes</h2> + +<p>In all of these examples I have been working in English, which is a left-to-right language. This means that our start lines are top and left of our grid when thinking in physical directions.</p> + +<p>CSS Grid Layout, and the Box Alignment specification are designed to work with writing modes in CSS. This means that if you are working in a right to left language, such as Arabic, the start of the grid would be the top and right, so the default of <code>justify-content: start</code> would be for grid tracks to start on the right hand side of the grid.</p> + +<p>Setting auto margins, using <code>margin-right</code> or <code>margin-left</code> however, or absolutely positioning items using the <code>top</code>, <code>right</code>, <code>bottom</code> and <code>left</code> 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.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/css_grid_layout/conceptos_básicos_del_posicionamiento_con_rejillas/index.html b/files/es/web/css/css_grid_layout/conceptos_básicos_del_posicionamiento_con_rejillas/index.html new file mode 100644 index 0000000000..afb49e2a92 --- /dev/null +++ b/files/es/web/css/css_grid_layout/conceptos_básicos_del_posicionamiento_con_rejillas/index.html @@ -0,0 +1,722 @@ +--- +title: Basic concepts of grid layout +slug: Web/CSS/CSS_Grid_Layout/Conceptos_Básicos_del_Posicionamiento_con_Rejillas +tags: + - CSS + - Guía + - Posicionamiento + - Rejillas CSS +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +<p><a href="/es/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> presenta un sistema de cuadrícula bidimensional para CSS. Las cuadrículas se pueden utilizar para posicionar áreas principales de la página o pequeños elementos de la interfaz de usuario. Este artículo lo introduce a Grid Layout de CSS y la nueva terminología que forma parte de la especificación CSS Grid Layout Nivel 1. Las características mostradas en este resumen se explicarán con mayor detalle en el resto de esta guía.</p> + +<h2 id="¿Qué_es_una_cuadrículagrid">¿Qué es una cuadrícula(grid)?</h2> + +<p>Una cuadrícula es un conjunto de líneas horizontales y verticales que se intersectan - un grupo define columnas y el otro filas. Los elementos se pueden colocar en la cuadrícula respetando estas columnas y filas. El diseño de cuadrícula CSS tiene las siguientes características:</p> + +<h3 id="Tamaños_fijos_y_flexibles">Tamaños fijos y flexibles</h3> + +<p>Usted puede crear una cuadrícula con tamaños fijos, utilizando píxeles, por ejemplo. También se puede crear una cuadrícula utilizando tamaños flexibles con porcentajes o con la nueva unidad de medida <code>fr</code> (fracción), diseñada para este propósito.</p> + +<h3 id="Posicionamiento_de_elementos">Posicionamiento de elementos</h3> + +<p>Puede colocar elementos en una ubicación precisa en la cuadrícula utilizando números de línea, nombres o seleccionando un área de la cuadrícula. Grid también contiene un algoritmo para controlar la ubicación de elementos que no tienen una posición explícita en la cuadrícula.</p> + +<h3 id="Creación_de_líneas_adicionales_para_alojar_contenido">Creación de líneas adicionales para alojar contenido</h3> + +<p>Usted puede definir una cuadrícula explícita con grid layout. La especificación Grid Layout es lo suficientemente flexible como para permitir agregar filas y columnas adicionales cuando sea necesario. Características como la adición de "tantas columnas como caben en un contenedor" también fueron incuidas.</p> + +<h3 id="Control_de_alineación">Control de alineación</h3> + +<p>Grid contiene características de alineación para poder controlar la forma cómo se alinean los elementos una vez colocados en un área de cuadrícula y cómo está alineada toda la cuadrícula.</p> + +<h3 id="Control_de_contenido_superpuesto">Control de contenido superpuesto</h3> + +<p>Se puede colocar más de un elemento en una celda de la cuadrícula o área, las cuales pueden solaparse o superponerse total o parcialmente entre sí. Esta estratificación puede ser controlada con la propiedad {{cssxref("z-index")}}.</p> + +<p>Grid es una poderosa especificación que, cuando se combina con otras partes de CSS como <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, puede ayudarle a crear diseños que antes eran imposibles de construir en CSS. Todo comienza creando una cuadrícula en su <strong>contenedor de cuadrícula</strong>.</p> + +<h2 id="El_contenedor_de_Grid_2">El contenedor de Grid</h2> + +<p>Creamos un <em>contenedor de cuadrícula</em> al declarar <code>display: grid</code> o <code>display: inline-grid</code> en un elemento. Tan pronto como hagamos esto todos los <em>hijos directos</em> de ese elemento se convertirán en <em>elementos de la cuadrícula.</em></p> + +<p>En este ejemplo, se tiene un contenedor div con una clase wrapper y dentro hay cinco elementos hijos.</p> + +<div id="El_contenedor_de_Grid"> +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>Hago de <code>.wrapper</code> un contenedor de cuadrícula.</p> + +<pre class="brush: css">.wrapper { + display: grid; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('El_contenedor_de_Grid', '200', '330') }}</p> +</div> + +<p>Todos los descendientes directos son ahora elementos de la cuadrícula. En un navegador web, usted no verá ninguna diferencia en cómo son mostrados estos elementos antes de convertirlos en una cuadrícula ya que grid ha creado una cuadrícula de una sola columna para los elementos. En este punto usted puede encontrar útil trabajar en Firefox Developer Edition, el cual tiene disponible el <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> (Inspector de cuádricula) como parte de las Herramientas de Desarrollador. Si ve este ejemplo en Firefox e inspecciona la cuadrícula, verá un icono pequeño junto al valor <code>grid</code>. Haga clic sobre este y la cuadrícula de este elemento se superpondrá en la ventana del navegador.</p> + +<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p> + +<p>Mientras usted aprende y luego trabaja con CSS Grid Layout esta herramienta le dará una mejor idea de lo que está sucediendo con sus cuadrículas visualmente.</p> + +<p>Si queremos empezar a hacer esto más parecido a una cuadrícula necesitamos agregar columnas.</p> + +<h2 id="Vias_filas_y_columnas_del_Grid">Vias, filas y columnas del Grid</h2> + +<p>Definimos filas y columnas en nuestra cuadrícula con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}. Éstas definen las vías de la cuadrícula. Una vía de cuadrícula es el área entre las dos líneas -horizontales o verticales- dentro de la cuadrícula. En la imagen inferior se puede ver una vía resaltada - esta es la vía de la primera fila en nuestra cuadrícula.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p> + +<p>Puedo modificar nuestro ejemplo anterior al agregar la propiedad <code>grid-template-columns</code>, para así definir el tamaño (ancho) de las vías de cada columna.</p> + +<p>Ahora he creado una cuadrícula con tres vías por columna de 200 píxeles. Los elementos hijo se posicionarán en esta cuadrícula uno en cada una de las celdas de la cuadrícula.</p> + +<div id="grid_first"> +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 200px 200px 200px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p> +</div> + +<h3 id="La_Unidad_fr_2">La Unidad fr</h3> + +<p>Las vías se pueden definir usando cualquier unidad de medida. Grid también introduce una unidad de longitud adicional para ayudarnos a crear vías de cuadrícula flexibles. La nueva unidad fr representa una fracción del espacio disponible en el contenedor de la cuadrícula. La siguiente definición de cuadrícula crearía tres vias con el mismo ancho, que se expanden y se encogen de acuerdo el espacio disponible.</p> + +<div id="La_Unidad_fr"> +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +</pre> +</div> + +<p>{{ EmbedLiveSample('La_Unidad_fr', '220', '140') }}</p> +</div> + +<p>En el próximo ejemplo creamos una definición con una vía de <code>2fr</code> y luego dos vías de <code>1fr</code>. El espacio disponible se divide en cuatro. Dos partes corresponden a la primera vía y una parte a cada una de las dos vias restantes.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +} +</pre> + +<p>En este ejemplo final mezclamos las vías de tamaño absoluto con unidades de fracción(fr). La primera vía tiene 500 píxeles, por lo que este ancho fijo se sustrae del espacio disponible.El espacio restante se divide en tres y se asigna en proporción a las dos vías flexibles.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 500px 1fr 2fr; +} +</pre> + +<h3 id="Listando_vías_con_la_notación_repeat">Listando vías con la notación <code>repeat()</code></h3> + +<p>Las cuadrículas grandes con muchas vías o celdas pueden utilizar la notación <code>repeat()</code> con el fin de repetir todas o una sección de la lista de vías. Por ejemplo la definición de cuadrícula:</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +</pre> + +<p>También puede ser escrita así:</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<p>La notación de repetición se puede utilizar para una parte del listado de vías. En este siguiente ejemplo he creado una cuadrícula con una vía inicial de 20 píxeles luego una sección repetitiva de 6 vías de <code>1fr</code> y luego una vía final de 20 píxeles.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 20px repeat(6, 1fr) 20px; +} +</pre> + +<p>La notación de repetición toma una lista de vías específicas, por lo tanto, puede utilizarla para crear un patrón de iteración de vías. En el próximo ejemplo, mi cuadrícula consistirá de 10 vías, una vía <code>1fr</code> seguida por una vía <code>2fr</code>, repetida cinco veces.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(5, 1fr 2fr); +} +</pre> + +<h3 id="La_cuadrícula_implícita_y_explícita">La cuadrícula implícita y explícita</h3> + +<p>Al crear nuestra cuadrícula de ejemplo definimos nuestras vías de columna con la propiedad {{cssxref("grid-template-columns")}}, pero dejamos que grid creara filas para el contenido según fuera necesario. Estas filas se crean en la cuadrícula implícita. La cuadrícula explícita consiste en las filas y columnas que se definen con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.</p> + +<p>Si coloca algo fuera de la cuadrícula ya definida, o si debido a la cantidad de contenido, se necesitarán más vías o celdas, entonces grid crea filas y columnas en la cuadrícula implícita. Estas vías varían su tamaño automáticamente de forma predeterminada, así que ajustarán su tamaño basadas en el contenido dentro de ellas.</p> + +<p>También puede definir un tamaño para el conjunto de vías creadas en la cuadrícula implícita con las propiedades {{cssxref("grid-auto-rows")}} y {{cssxref("grid-auto-columns")}}.</p> + +<p>En el siguiente ejemplo usamos <code>grid-auto-rows</code> para asegurar que las vías creadas en la cuadrícula implícita tengan 200 píxeles de alto.</p> + +<div class="brush: html" id="rejilla_implícita_y_explícita"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 200px; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('cuadrícula_implícita_y_explícita', '230', '420') }}</p> +</div> + +<h3 id="Tamaño_de_vía_y_minmax_2">Tamaño de vía y <code>minmax()</code></h3> + +<p>Al configurar una cuadrícula explícita o definir el tamaño de las filas o columnas creadas automáticamente, es posible que desee dar a las vías un tamaño mínimo, pero asegurarse que se expandan para adaptarse a cualquier contenido que se pueda agregar. Por ejemplo, tal vez quiera que mis filas nunca se colapsen a menos de 100 píxeles, pero si mi contenido se extiende a 300 píxeles de altura, me gustaría que la fila se expandiera a esa altura.</p> + +<p>Grid tiene una solución para esto con la función {{cssxref("minmax", "minmax()")}}. En el siguiente ejemplo estoy usando <code>minmax()</code> en el valor de la propiedad {{cssxref("grid-auto-rows")}}. Las filas creadas automáticamente tendrán como mínimo de 100 píxeles de alto y un máximo de auto. El uso de auto significa que el tamaño mirará el tamaño del contenido y se estirará para dar espacio al elemento más alto en una celda en esta fila.</p> + +<div id="Tamaño_de_vía_y_minmax"> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two + <p>I have some more content in.</p> + <p>This makes me taller than 100 pixels.</p> + </div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Tamaño_de_vía_y_minmax', '240', '470') }}</p> +</div> + +<h2 id="Líneas_de_la_cuadrículaEdit">Líneas de la cuadrícula<a class="button section-edit only-icon" href="/es/docs/Web/CSS/CSS_Grid_Layout/Conceptos_B%C3%A1sicos_del_Posicionamiento_con_Rejillas$edit#Líneas_de_Rejilla" rel="nofollow, noindex"><span>Edit</span></a></h2> + +<p>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.</p> + +<p><img alt="Diagram showing numbered grid lines." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p> + +<p>Las líneas están numeradas según el modo de escritura del documento. En un idioma de izquierda a derecha, la línea 1 está al lado izquierdo de la cuadrícula. En un idioma de derecha a izquierda, está en el lado derecho de la cuadrícula. Las líneas también se pueden nombrar, ya veremos cómo hacer esto en una guía posterior de esta serie.</p> + +<h3 id="Posicionando_elementos_de_acuerdo_a_las_líneas">Posicionando elementos de acuerdo a las líneas</h3> + +<p>Estaremos explorando la colocación basada en líneas en detalle en un artículo posterior, el siguiente ejemplo demuestra cómo hacer esto de una manera sencilla. Cuando colocamos un elemento y tomamos como punto de referencia la línea - en lugar de la vía.</p> + +<p>En el siguiente ejemplo, estoy posicionando los dos primeros elementos en la cuadrícula de tres vías de columna, usando las propiedades {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} y {{cssxref("grid-row-end")}}. Trabajando de izquierda a derecha, el primer elemento se coloca partiendo de la línea de la columna 1, y se extiende a la línea de la columna 4, que en nuestro caso es la línea que está mas a la derecha en la cuadrícula. Y comienza en la línea de la fila 1 y termina en la línea de fila la 3, por lo tanto, se extiende sobre dos filas.</p> + +<p>El segundo elemento comienza en la línea de columna 1 de la cuadrícula y se extiende por toda la fila. Este es el valor por defecto, por lo que no necesito especificar la línea final. También se extiende dos vías de fila de la línea de fila 3 a la línea de fila 5. Los otros elementos se colocarán a sí mismos en espacios vacíos en la cuadrícula.</p> + +<div id="Líneas_de_Rejilla"> +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> + <div class="box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 3; + grid-row-end: 5; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Líneas_de_cuadrícula', '230', '420') }}</p> +</div> + +<p>No olvide que puede utilizar <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> en las Herramientas de Desarrollador de Firefox para ver cómo se posicionan los elementos en las líneas de la cuadrícula.</p> + +<h2 id="Celdas_de_cuadrícula">Celdas de cuadrícula</h2> + +<p>Una <em>celda de cuadrícula</em> es la unidad más pequeña en una cuadrícula, conceptualmente es como una celda de tabla. Como vimos en nuestros ejemplos anteriores, una vez que se define una cuadrícula en un padre, los elementos hijo se posicionarán a sí mismos de una vez en cada celda de la cuadrícula definida. En la imagen de abajo he resaltado la primera celda de la cuadrícula.</p> + +<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p> + +<h2 id="Áreas_de_cuadrícula">Áreas de cuadrícula</h2> + +<p>Los elementos pueden extenderse a través de una o más celdas tanto por fila como por columna, lo que crea un <em>área de cuadrícula</em>. Las áreas de la cuadrícula tienen que ser rectangulares - no es posible crear un área en forma de L, por ejemplo. El área de cuadrícula resaltada abarca dos vías de fila y dos de columna.</p> + +<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p> + +<h2 id="Canaletas_2">Canaletas</h2> + +<p>Las canaletas o callejones entre las celdas de la cuadrícula se pueden crear usando las propiedades {{cssxref("grid-column-gap")}} y {{cssxref("grid-row-gap")}}, o la propiedad abreviada {{cssxref("grid-gap")}}. En el siguiente ejemplo estoy creando una brecha de 10 píxeles entre columnas y una brecha de 1em entre filas.</p> + +<div id="Canaletas"> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-column-gap: 10px; + grid-row-gap: 1em; +} +</pre> + +<div class="note"> +<p><strong>Nota:</strong> Los navegadores más antigüos tienen {{cssxref("column-gap")}}, {{cssxref("row-gap")}} y {{cssxref("gap")}} prefijadas con el prefijo <code>grid-</code> como {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} y {{cssxref("grid-gap")}} respectivamente.</p> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + grid-column-gap: 10px; + grid-row-gap: 1em; + + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Canaletas') }}</p> +</div> + +<p>Cualquier espacio utilizado por las brechas se tendrá en cuenta antes de que el espacio sea asignado a las vías <code>fr</code> de longitud flexible y las canaletas intervienen con propósitos de dimensionamiento como una vía de cuadrícula regular, sin embargo, no se puede colocar nada en una brecha. En términos de posicionamiento basado en líneas, la brecha actúa como una línea gruesa.</p> + +<h2 id="Anidamiento_de_cuadrículas">Anidamiento de cuadrículas</h2> + +<p>Un elemento de cuadrícula puede convertirse en un contenedor de cuadrícula. En el ejemplo siguiente tengo la cuadrícula de tres columnas creada anteriormente, con nuestros dos elementos posicionados. En este caso, el primer elemento tiene algunos subelementos. Ya que estos elementos no son descendientes directos de la cuadrícula, no participan en la disposición de la cuadrícula y por lo tanto se muestran en el flujo normal del documento.</p> + +<div id="anidamiento"> +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p> + +<p>Si establezco <code>box1</code> a <code>display: grid</code> puedo darle una definición de vía y también se convertirá en una cuadrícula, los elementos entonces se posicionan en esta nueva cuadrícula.</p> + +<pre class="brush: css">.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; + display: grid; + grid-template-columns: repeat(3, 1fr); +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.box1 { + grid-column: 1 / 4; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('anidamiento', '600', '340') }}</p> + +<p>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 <a class="new" href="/es/docs/Web/CSS/grid-gap" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>grid-gap</code></a> del elemento padre y las líneas de la cuadrícula anidada no se alinean con las líneas de la cuadrícula padre.</p> + +<h3 id="Subgrid">Subgrid</h3> + +<p>En la especificación de grid de nivel 1 hay una característica llamada <em>subgrid</em> que nos permitiría crear cuadrículas anidadas que usan la definición de la vía de la cuadrícula padre.</p> + +<div class="note"> +<p>Las Subgrids aún no están implementadas en ningún navegador y la especificación está sujeta a cambio.</p> +</div> + +<p>En la especificación actual, editaríamos el ejemplo de cuadrícula anidada arriba para usar <code>display: subgrid</code> en lugar de <code>display: grid</code>, y luego eliminar la definición de vía. La cuadrícula anidada utilizará las vías de la cuadrícula principal para posicionar los elementos.</p> + +<p>Cabe señalar que la cuadrícula está anidada en ambas dimensiones — filas y columnas. No hay concepto de la cuadrícula implícita trabajando con subgrids. Esto significa que debe asegurarse de que la cuadrícula padre tenga suficientes vías de fila y columna para todos los subelementos.</p> + +<pre class="brush: css">.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + display: subgrid; +} +</pre> + +<h2 id="Estratificando_elementos_con_z-index">Estratificando elementos con <code>z-index</code></h2> + +<p>Los elementos de cuadrícula pueden ocupar la misma celda. Si volvemos a nuestro ejemplo con elementos posicionados por número de línea, podemos cambiar esto para hacer que dos elementos se superpongan.</p> + +<div id="l_ex"> +<pre class="brush: html"><div class="wrapper"> + <div class="box box1">One</div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 4; +} +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p> + +<p>El elemento <code>box2</code> ahora se superpone a <code>box1</code>, se muestra en la parte superior ya que aparece después en el orden de origen.</p> + +<h3 id="Controlando_el_orden">Controlando el orden</h3> + +<p>Podemos controlar el orden en el que los artículos se apilan utilizando la propiedad z-index - al igual que con los elementos posicionados. Si le damos a <code>box2</code> un <code>z-index</code> más bajo que <code>box1</code>, se mostrará debajo de box1 en la pila.</p> + +<div id="controlando_el_orden"> +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + z-index: 2; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 2; + grid-row-end: 4; + z-index: 1; +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><div class="wrapper"> + <div class="box box1">One</div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('controlando_el_orden', '230', '420') }}</p> + +<h2 id="Siguientes_Pasos">Siguientes Pasos</h2> + +<p>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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">la siguiente parte de esta guía donde realmente nos vamos a adentrar en detalle dentro de CSS Grid Layout</a>.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guías</strong></a> + <ol> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos del posicionamiento con cuadrículas</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación con otros métodos de posicionamiento</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamiento basado en líneas</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Áreas de una plantilla de cuadrícula</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Posicionamiento usando líneas de cuadrícula con nombres</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamiento automático en grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineación de cajas en grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">cuadrículas, valores lógicos y modos de escritura</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout y Accesibilidad</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout y Mejora Progresiva</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Layouts comunes utilizando CSS Grid</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/es/docs/Web/CSS/grid">grid</a></li> + <li><a href="/es/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/es/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/es/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/es/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/es/docs/Glossary/Grid">cuadrícula</a></li> + <li><a href="/es/docs/Glossary/Grid_lines">Líneas de cuadrícula</a></li> + <li><a href="/es/docs/Glossary/Grid_tracks">Pistas de cuadrícula</a></li> + <li><a href="/es/docs/Glossary/Grid_cell">Celda de cuadrícula</a></li> + <li><a href="/es/docs/Glossary/Grid_areas">Áreas de cuadrícula</a></li> + <li><a href="/es/docs/Glossary/Gutters">Canaletas</a></li> + <li><a href="/es/docs/Glossary/Grid_Axis">Ejes de cuadrícula</a></li> + <li><a href="/es/docs/Glossary/Grid_rows">Fila de cuadrícula</a></li> + <li><a href="/es/docs/Glossary/Grid_column">Columna de cuadrícula</a></li> + </ol> + </li> +</ol> +</section> +</div> diff --git a/files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html b/files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html new file mode 100644 index 0000000000..7339530ff1 --- /dev/null +++ b/files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html @@ -0,0 +1,169 @@ +--- +title: CSS Grid Layout y accesibilidad +slug: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility +--- +<p>Los que llevamos en esto del desarrollo web más años de los que queremos recordar podríamos considerar que CSS Grid es un poco como "maquetar con tablas". En los primeros tiempos del diseño web la manera de maquetar la página era usando tablas HTML y "troceando" los elementos dentro de las celdas de esas tablas para crear un diseño. This had some advantages over the “CSS Positioning” that came afterwards, in that we could take advantage of the alignment and full height columns offered by table display. The biggest downside however was that it tied our design to the mark-up, often creating accessibility issues as it did so. In order to lay the design out in the table we often broke up the content in ways that made no sense at all when read out by a screen reader for example.</p> + +<p>In moving to CSS we often spoke about CSS for layout enabling a separation of content and markup and presentation. The ultimate aim being that we could create a semantic and well structured document, then apply CSS to create the layout we desired. Sites such as the <a href="http://www.csszengarden.com/">CSS Zen Garden</a> showcased this ability. The CSS Zen Garden challenged us to take identical markup and create a unique design using CSS.</p> + +<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> does not have the same issues that tables did, our grid structure is defined in CSS rather than in the mark-up. If we need to add an element we can use something with no semantic meaning. On paper grid helps us properly fulfill that promise of content separated from mark-up, however is it possible to go too far with this idea? Is it possible that we could <em>create</em> an accessibility issue through our use of grids?</p> + +<h2 id="Re-ordering_content_in_CSS_Grid_Layout">Re-ordering content in CSS Grid Layout</h2> + +<p>We’ve already seen in these guides that grid gives us power to re-order the content of our page in various ways. We can use the {{cssxref("order")}} property, which will change how items auto-place. We can use <code>grid-auto-flow: dense</code> which will take items visually out of DOM order. We can also position items using line-based placement of grid template areas, without considering their location in the source.</p> + +<p>The <a href="https://drafts.csswg.org/css-grid/#order-accessibility">specification</a> includes a section that covers Reordering and Accessibility. In the introduction to that section are details of what the specification expects browsers to do when the content is visually reordered using Grid Layout.</p> + +<blockquote> +<p>Grid layout gives authors great powers of rearrangement over the document. However, these are not a substitute for correct ordering of the document source. The order property and grid placement do not affect ordering in non-visual media (such as speech). Likewise, rearranging grid items visually does not affect the default traversal order of sequential navigation modes (such as cycling through links, see e.g. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> HTML5).</p> +</blockquote> + +<p>If you reorder things visually using grid layout, this will not change how the items are ordered if the content is being read out by a screen reader, or other text to speech user agent. In addition, the reordering will not change tab order. This means that someone navigating using the keyboard could be tabbing through links on your site and suddenly find themselves jumping from the top to the bottom of the document due to a reordered item being next in line.</p> + +<p>The specification warns authors (the CSSWG term for web developers) not to do this reordering.</p> + +<blockquote> +<p>Authors must use order and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.</p> +</blockquote> + +<p>What does this mean for designing with grid layout in practice?</p> + +<h3 id="Visual_not_logical_re-ordering">Visual not logical re-ordering</h3> + +<p>Any time you reorder things with grid layout – or with flexbox – you only perform <em>visual reordering</em>. The underlying source is what controls things like text to speech, and the tab order of the document. You can see how this works with a very simple example.</p> + +<p>In this example I have used grid to lay out a set of boxes that contain links. I have used the line-based placement properties to position box 1 on the second row of the grid. Visually it now appears as the fourth item in the list. However, if I tab from link to link the tab order still begins with box 1, as it comes first in the source.</p> + +<div id="accessibility_1"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column: 1; + grid-row: 2; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"><a href="">One</a></div> + <div class="box box2"><a href="">Two</a></div> + <div class="box box3"><a href="">Three</a></div> + <div class="box box4"><a href="">Four</a></div> + <div class="box box5"><a href="">Five</a></div> +</div> +</pre> + +<p>{{ EmbedLiveSample('accessibility_1', '500', '330') }}</p> +</div> + +<p>The specification says that in this scenario, if box 1 really makes sense logically in that position, we should go back to our source and make the change there rather than reordering using grid layout. This is what is meant by visual versus logical reordering, logical ordering is important for the meaning and structure of our document, and we should make sure that we preserve that structure.</p> + +<h2 id="How_should_we_approach_accessibility_for_grid_layout">How should we approach accessibility for grid layout?</h2> + +<p>From the specification we know that we need to ensure our document maintains the logical order of our content. How should we approach our development to make sure that we maintain accessibility for the different users and the ways that they interact with our pages?</p> + +<dl> + <dt>Start with a structured and accessible document</dt> + <dd>A grid layout should mean we do not need to change our document source in order to get the layout that we want. Therefore the starting point of your page should be a well structured and accessible source document. As is noted in the CSS Grid Layout specification, this is quite often going to give you a good structure for <em>your smallest screen devices too</em>. If a user is scrolling through a long document on mobile, the priorities for that user quite often map to what should be a priority in the source.</dd> + <dt>Create a responsive, and responsible grid</dt> + <dd>With a solid document you can begin to add your layout, it is likely you will be using <a href="/en-US/docs/Web/CSS/Media_Queries">media queries</a> to create additional columns and make changes for different screen sizes and devices. Grid can be really very useful here, elements deprioritized in the mobile source order can be moved into a sidebar in a desktop layout, for example. The key here is to keep testing, a very simple test is to <em>tab around the document</em>. Does that order still make sense? Check that you do not end up leaping from the top to the bottom of the layout in a peculiar way. If so that would be a sign that you need to address something about the layout.</dd> + <dt>Returning to the source</dt> + <dd>If at any time in the design process you find yourself using grid to relocate the position of an element, consider whether you should return to your document and make a change to the logical order too. The nice thing about using CSS Grid Layout is that you should be able to move an item in the source to match the logical order, without needing to make big changes to your layout. This is a huge improvement over a {{cssxref("float")}}-based layout for example, where document source matters a lot in order to get layouts at different breakpoints. However the onus is on us as developers to remember to go back to our source and update it to maintain logical order.</dd> +</dl> + +<h2 id="Grid_and_the_danger_of_markup_flattening">Grid and the danger of markup flattening</h2> + +<p>Another issue to be aware of in CSS Grid Layout and to a lesser extent in CSS Flexbox, is the temptation to <em>flatten</em> markup. As we have discovered, for an item to become a grid item it needs to be a direct child of the grid container. Therefore, where you have a {{HTMLElement("ul")}} element inside a grid container, <em>that</em> <code>ul</code> becomes a grid item – the child {{HTMLElement("li")}} elements do not.</p> + +<p>If the <code>subgrid</code> value of {{cssxref("display")}} becomes implemented, it would be possible to make these children of a grid item participate in the overall grid layout by declaring the <code>ul</code> element a <em>subgrid</em>. Currently the only way to do this is to use <code>display: contents</code> to cause the box generated by the <code>ul</code> to disappear from the DOM. For more information about this interaction see the guide on the <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a> and the section on <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout#Grid_and_display_contents">display: contents</a></code>.</p> + +<p>Given that interoperable support for <code>display: contents</code> is limited and we do not yet have subgrids, there is a definite temptation when developing a site using CSS Grid Layout to flatten out the markup, to remove semantic elements in order to make it simpler to create a layout. An example would be where some content was semantically marked up as a list but you decide to use a set of {{HTMLElement("div")}} elements instead as then you can have the element to be a direct child of a container set to <code>display: grid</code>. Be aware of this temptation and find ways to develop your design without stripping out the markup. Starting out with a well-structured document is a very good way to avoid the problem, as you will be aware that you are removing semantic elements in order to make the layout work if you actually have to go into the document and do so!</p> + +<h2 id="Further_reading">Further reading</h2> + +<p>There is not a lot of existing material regarding accessibility and CSS Grid Layout. Many of the issues are similar to those raised regarding CSS Flexbox, which also gives methods of reordering content with {{cssxref("flex-direction")}} and the {{cssxref("order")}} property.</p> + +<p>The concept of visual display following document source order is detailed in the <em>WCAG Techniques for Success Criteria – <a href="https://www.w3.org/TR/WCAG20-TECHS/C27.html">Technique C27</a></em>.</p> + +<p>As a way to start thinking about these issues, as you use CSS Grid Layout I would suggest reading <em><a href="http://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox & the Keyboard Navigation Disconnect</a></em> from Léonie Watson. Also <a href="https://www.youtube.com/watch?v=spxT2CmHoPk">the video of Léonie’s presentation from ffconf</a> is helpful to understand more about how screen readers work with the visual representation of things in CSS. Adrian Roselli has also posted regarding <a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">tab order in various browsers</a> – although this was prior to grid support being fully implemented in Firefox.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/css_grid_layout/index.html b/files/es/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..d26c21f5fa --- /dev/null +++ b/files/es/web/css/css_grid_layout/index.html @@ -0,0 +1,251 @@ +--- +title: CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout +--- +<p><strong>CSS Grid layout</strong> contiene funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.</p> + +<p>Al igual que las tablas, el grid layout permite a un autor alinear elementos en columnas y filas. Sin embargo, con CSS grid son posibles muchos más diseños y de forma más sencilla que con las tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían posicionarse para que se solapen y se superpongan, de forma similar a los elementos posicionados en CSS.</p> + +<h2 id="Basic_Example" name="Basic_Example">Ejemplo sencillo</h2> + +<p>El siguiente ejemplo muestra un grid de tres columnas con filas nuevas creadas con un mínimo de 100 píxeles y un máximo automático. Los elementos se han colocado en el grid utilizando posicionamiento en línea.</p> + +<div id="example"> +<div class="hidden"> +<pre class="brush: css notranslate">* {box-sizing: border-box;} +.wrapper { + max-width: 940px; + margin: 0 auto; +} + +.wrapper > div { + border: 2px solid rgb(233,171,88); + border-radius: 5px; + background-color: rgba(233,171,88,.5); + padding: 1em; + color: #d9480f; +}</pre> +</div> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="one">One</div> + <div class="two">Two</div> + <div class="three">Three</div> + <div class="four">Four</div> + <div class="five">Five</div> + <div class="six">Six</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); +} +.one { + grid-column: 1 / 3; + grid-row: 1; +} +.two { + grid-column: 2 / 4; + grid-row: 1 / 3; +} +.three { + grid-column: 1; + grid-row: 2 / 5; +} +.four { + grid-column: 3; + grid-row: 3; +} +.five { + grid-column: 2; + grid-row: 4; +} +.six { + grid-column: 3; + grid-row: 4; +} +</pre> + +<p>{{ EmbedLiveSample('example', '500', '440') }}</p> +</div> + +<h2 id="Referencia">Referencia</h2> + +<h3 id="Propiedades_CSS">Propiedades CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("grid-template-columns")}}</li> + <li>{{cssxref("grid-template-rows")}}</li> + <li>{{cssxref("grid-template-areas")}}</li> + <li>{{cssxref("grid-template")}}</li> + <li>{{cssxref("grid-auto-columns")}}</li> + <li>{{cssxref("grid-auto-rows")}}</li> + <li>{{cssxref("grid-auto-flow")}}</li> + <li>{{cssxref("grid")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row")}}</li> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-area")}}</li> + <li>{{cssxref("row-gap")}}</li> + <li>{{cssxref("column-gap")}}</li> + <li>{{cssxref("gap")}}</li> +</ul> +</div> + +<h3 id="Funciones_CSS">Funciones CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("repeat", "repeat()")}}</li> + <li>{{cssxref("minmax", "minmax()")}}</li> + <li>{{cssxref("fit-content", "fit-content()")}}</li> +</ul> +</div> + +<h3 id="CSS_data_types">CSS data types</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<flex>")}}</li> +</ul> +</div> + +<h3 id="Glosario">Glosario</h3> + +<div class="index"> +<ul> + <li><a href="/es/docs/Glossary/Grid">Grid</a></li> + <li><a href="/es/docs/Glossary/Grid_Lines">Grid Lines</a></li> + <li><a href="/es/docs/Glossary/Grid_Tracks">Grid Tracks</a></li> + <li><a href="/es/docs/Glossary/Grid_Cell">Grid Cell</a></li> + <li><a href="/es/docs/Glossary/Grid_Areas">Grid Area</a></li> + <li><a href="/es/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/es/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/es/docs/Glossary/Grid_Rows">Grid row</a></li> + <li><a href="/es/docs/Glossary/Grid_Column">Grid column</a></li> +</ul> +</div> + +<h2 id="Guías">Guías</h2> + +<div class="index"> +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Layout using line-based placement</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li> +</ul> +</div> + +<h2 id="Recursos_externos">Recursos externos</h2> + +<ul> + <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li> + <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li> + <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li> + <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li> + <li><a href="http://cssgridgarden.com">Grid Garden</a> - Un juego para aprender el grid</li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName("CSS Grid 2") }}</td> + <td>{{ Spec2("CSS Grid 2") }}</td> + <td>Added <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid">subgrids</a>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Grid') }}</td> + <td>{{ Spec2('CSS3 Grid') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<section class="Quick_links" id="Quick_Links"> +<section class="Quick_links" id="Enlaces_Rapidos"> +<ol> + <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guías</strong></a> + <ol> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Propiedades</strong></a> + <ol> + <li><a href="/es/docs/Web/CSS/grid">grid</a></li> + <li><a href="/es/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/es/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/es/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/es/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glosario</strong></a> + <ol> + <li><a href="/es/docs/Glossary/Grid">Grid</a></li> + <li><a href="/es/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/es/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/es/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/es/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/es/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/es/docs/Glossary/Grid_Axis">Grid Axis</a></li> + <li><a href="/es/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/es/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> +</section> diff --git a/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html new file mode 100644 index 0000000000..d477402114 --- /dev/null +++ b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -0,0 +1,597 @@ +--- +title: Realizing common layouts using CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +tags: + - CSS + - CSS Grids + - Guía +translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +--- +<p>Para completar este conjunto de guías de CSS Grid Layout, voy a recorrer algunos diseños diferentes, que demuestran algunas de las diferentes técnicas que puede utilizar al diseñar con grid layout. Vamos a ver un ejemplo usando <a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas"> grid-template-areas</a> un típico sistema de cuadrícula flexible de 12 columnas, y también un listado de productos usando el emplazamiento automático. Como puedes ver en este conjunto de ejemplos, a menudo hay más de una manera de lograr el resultado que deseas con el diseño de cuadrícula. Escoge el método que encuentres más útil para los problemas que estás resolviendo y los diseños que necesitas implementar.</p> + +<h2 id="Responsive_layout_de_1_a_3_columnas_fluidas_usando_grid-template-areas">Responsive layout de 1 a 3 columnas fluidas usando <code>grid-template-areas</code></h2> + +<p>Muchos sitios web son una variación de este tipo de diseño: contenido, barras laterales, un encabezado y un pie de página. En diseños responsivos, es posible que quieras mostrar el diseño en una sola columna, agregando una barra lateral en un punto de interrupción determinado y luego incorporar un diseño de tres columnas para pantallas más amplias.</p> + +<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="https://mdn.mozillademos.org/files/14749/11-responsive-areas.png"></p> + +<p>Voy a crear este layout usando la propiedad <em>named template areas</em> que aprendimos en la guía <em><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em>.</p> + +<p>Mi marcado consiste en un container con elementos en su interior para el header, footer, contenido principal, navegación, sidebar, y un bloque para poner anuncios./p></p> + +<div id="layout_1"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + + .wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; + } + + .wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; + } + + nav ul { + list-style: none; + margin: 0; + padding: 0; + } +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <header class="main-head">The header</header> + <nav class="main-nav"> + <ul> + <li><a href="">Nav 1</a></li> + <li><a href="">Nav 2</a></li> + <li><a href="">Nav 3</a></li> + </ul> + </nav> + <article class="content"> + <h1>Área principal del artículo</h1> + <p>En este diseño, las áreas se muestran en el orden en que están escritas en las pantallas de menos de 500 píxeles de ancho. Pasamos a un diseño de dos columnas, y luego a uno de tres columnas mediante la redefinición de la rejilla y la colocación de los elementos en ella.</p> + </article> + <aside class="side">Sidebar</aside> + <div class="ad">Advertising</div> + <footer class="main-footer">The footer</footer> +</div> +</pre> + +<p>Al usar {{cssxref("grid-template-areas")}} para crear el diseño. A parte de las media queries necesito nombrar las áreas. Nombremos las áreas con la propiedad {{cssxref("grid-area")}} property.</p> + +<pre class="brush: css">.main-head { + grid-area: header; +} +.content { + grid-area: content; +} +.main-nav { + grid-area: nav; +} +.side { + grid-area: sidebar; +} +.ad { + grid-area: ad; +} +.main-footer { + grid-area: footer; +} +</pre> + +<p>Esto no creará ningún diseño, sin embargo, nuestros elementos ahora tienen nombres que podemos utilizar para hacerlo. Al margen de las media queries, ahora voy a configurar el diseño para el ancho móvil. Aquí estoy manteniendo todo en el orden de origen, tratando de evitar cualquier separación entre la fuente y la pantalla, tal y como se describe en la guía <em><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">Grid layout y accesibilidad</a></em>. No he definido ninguna vía de columna o de fila, pero este diseño dicta una sola columna, y las filas se crearán según sea necesario para cada uno de los items de la cuadrícula implícita.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-gap: 20px; + grid-template-areas: + "header" + "nav" + "content" + "sidebar" + "ad" + "footer"; +} +</pre> + +<p>Después de establecer la columna simple para todas los tamaños de pantalla, ahora podemos añadir una <a href="/es/docs/Web/CSS/Media_Queries">media query</a> y redefinir nuestro layout para los casos en los que tuviéramos suficiente pantalla real como para mostrar dos columnas.</p> + +<pre class="brush: css">@media (min-width: 500px) { + .wrapper { + grid-template-columns: 1fr 3fr; + grid-template-areas: + "header header" + "nav nav" + "sidebar content" + "ad footer"; + } + nav ul { + display: flex; + justify-content: space-between; + } +} +</pre> + +<p>Se puede ver la forma del layout en los valores de {{cssxref("grid-template-areas")}}. El <code>header</code> se expande en dos vías de columna, lo mismo que <code>nav</code>. En la tercera vía de fila tenemos el <code>sidebar</code> al costado del <code>content</code>. En la cuarta vía de fila he decidido poner el contenido <code>ad</code> – por tanto aparecerá debajo de sidebar,y a continuación, el <code>footer</code> , debajo del contenido. Estoy utilizando flexbox en la navegación para mostrarlo en una fila espaciada.</p> + +<p>Ahora puedo añadir un punto de ruptura final para pasar a un diseño de tres columnas.</p> + +<pre class="brush: css">@media (min-width: 700px) { + .wrapper { + grid-template-columns: 1fr 4fr 1fr; + grid-template-areas: + "header header header" + "nav content sidebar" + "nav content ad" + "footer footer footer" + } + nav ul { + flex-direction: column; + } +} +</pre> + +<p>El diseño de tres columnas tiene dos columnas laterales de <code>1fr</code> y una columna central que tiene <code>4fr</code> como tamaño de vía. Esto significa que el espacio disponible en el contenedor se divide en 6 y se asigna en proporción a nuestras tres pistas - una parte cada una a las columnas laterales y 4 partes al centro.</p> + +<p>En este diseño estoy mostrando <code>nav</code> en la columna de la izquierda, junto al <code>content</code>. En la columna de la derecha tenemos <code>sidebar</code> y debajo están los anuncios (<code>ad</code>). El <code>footer</code> se extiende a lo largo de la parte inferior del diseño. Luego uso flexbox para mostrar la navegación como una columna.</p> + +<p>{{ EmbedLiveSample('layout_1', '800', '500') }}</p> +</div> + +<p>Este es un ejemplo simple pero demuestra cómo podemos usar un diseño de cuadrícula para reorganizar nuestro diseño para diferentes puntos de ruptura. En particular, estoy cambiando la ubicación de ese bloque de anuncios <code>ad</code>, según corresponda en mis diferentes configuraciones de columna. Este método de nombrar las áreas me parece muy útil en una etapa de prototipado, es fácil jugar con la ubicación de los elementos. Siempre se puede empezar a utilizar la rejilla de esta manera para la creación de prototipos, incluso si no se puede confiar plenamente en ella en producción debido a los navegadores que visitan su sitio.</p> + +<h2 id="Diseño_flexible_de_12-columnas">Diseño flexible de 12-columnas</h2> + +<p>Si has estado trabajando con uno de los muchos frameworks o sistemas de cuadrícula puedes estar acostumbrado a diseñar tu sitio en una cuadrícula flexible de 12 o 16 columnas. Podemos crear este tipo de sistema utilizando CSS Grid Layout. Como ejemplo simple, estoy creando una cuadrícula flexible de 12 columnas que tiene 12 pistas de columna de <code>1fr</code> -unidad, todas tienen una línea de inicio llamada <code>col-start</code>. Esto significa que tendremos doce líneas de cuadrícula llamadas <code>col-start</code>.</p> + +<div id="layout_2"> +<div class="hidden"> +<pre class="brush: css">.wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; +} +.wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(12, [col-start] 1fr); + grid-gap: 20px; +} +</pre> + +<p>Para demostrar cómo funciona este sistema de rejilla tengo 4 ítems hijos dentro de mi wrapper.</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Start column line 1, span 3 column tracks.</div> + <div class="item2">Start column line 6, span 4 column tracks. 2 row tracks.</div> + <div class="item3">Start row 2 column line 2, span 2 column tracks.</div> + <div class="item4">Start at column line 3, span to the end of the grid (-1).</div> +</div> +</pre> + +<p>Entonces puedo ponerlos en la rejilla usando los nombres de las líneas, y la palabra clave span.</p> + +<pre class="brush: css">.item1 { + grid-column: col-start / span 3; +} +.item2 { + grid-column: col-start 6 / span 4 ; + grid-row: 1 / 3; +} +.item3 { + grid-column: col-start 2 / span 2; + grid-row: 2; +} +.item4 { + grid-column: col-start 3 / -1; + grid-row: 3; +} +</pre> + +<p>{{ EmbedLiveSample('layout_2', '800', '400') }}</p> +</div> + +<p>Como se describe en la <a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">guía de líneas con nombre</a>, estamos utilizando la línea con nombre para colocar nuestro ítem. Como tenemos 12 líneas todas con el mismo nombre usamos el nombre, y luego el index de la línea. También puedes usar el propio index de líneas si lo prefieres y evitar el uso de líneas con nombre.</p> + +<p>En lugar de establecer el número de la línea final, he elegido decir cuántas pistas debe expandir este elemento, utilizando la palabra clave span. Me gusta este enfoque, ya que cuando trabajamos con un sistema de diseño de múltiples columnas normalmente pensamos en bloques en términos del número de vías de la cuadrícula que atraviesan, y los ajustamos para diferentes puntos de ruptura. Para ver cómo se alinean los bloques con las vías, utiliza el <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a>. Muestra claramente cómo se colocan nuestros ítems.</p> + +<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="https://mdn.mozillademos.org/files/14753/11-grid-inspector-12col.png"></p> + +<p>Existen algunas diferencias clave sobre cómo funciona un diseño de cuadrícula en los sistemas de cuadrícula que se pueden haber utilizado anteriormente. Como puedes ver, no necesitamos añadir ningún marcado para crear una fila, los sistemas de cuadrícula necesitan hacer esto para evitar que los elementos salten a la fila de arriba. Con CSS Grid Layout, podemos colocar las cosas en filas, sin peligro de que suban a la fila de arriba si se dejan vacías. Debido a esta <em>estricta</em> colocación de columnas y filas, también podemos dejar fácilmente espacio en blanco en nuestro diseño. Tampoco necesitamos clases especiales que tiren o empujen cosas, para que se introduzcan en la rejilla. Todo lo que tenemos que hacer es especificar la línea de inicio y final del ítem.</p> + +<h3 id="Construcción_de_un_diseño_utilizando_el_sistema_de_12_columnas">Construcción de un diseño utilizando el sistema de 12 columnas</h3> + +<p>Para ver cómo funciona este método de diseño en la práctica, podemos crear el mismo diseño que creamos con {{cssxref("grid-template-areas")}}, esta vez utilizando el sistema de cuadrícula de 12 columnas. Comienzo con el mismo marcado que el utilizado para el ejemplo de áreas de plantillas de cuadrícula.</p> + +<div id="layout_3"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + + .wrapper { + max-width: 1024px; + margin: 0 auto; + font: 1.2em Helvetica, arial, sans-serif; + } + + .wrapper > * { + border: 2px solid #f08c00; + background-color: #ffec99; + border-radius: 5px; + padding: 10px; + } + + nav ul { + list-style: none; + margin: 0; + padding: 0; + } +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <header class="main-head">The header</header> + <nav class="main-nav"> + <ul> + <li><a href="">Nav 1</a></li> + <li><a href="">Nav 2</a></li> + <li><a href="">Nav 3</a></li> + </ul> + </nav> + <article class="content"><h1>Área principal del artículo</h1> + <p>En este diseño, las áreas se muestran en el orden en que están escritas en las pantallas de menos de 500 píxeles de ancho. Pasamos a un diseño de dos columnas, y luego a uno de tres columnas mediante la redefinición de la rejilla y la colocación de los elementos en ella.</p></article> + <aside class="side">Sidebar</aside> + <div class="ad">Advertising</div> + <footer class="main-footer">The footer</footer> + </div> +</pre> + +<p>Entonces puedo configurar nuestra cuadrícula, como en el ejemplo del diseño de 12 columnas de arriba.</p> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(12, [col-start] 1fr); + grid-gap: 20px; +} +</pre> + +<p>Una vez más vamos a hacer de este un diseño responsivo, pero esta vez usando líneas con nombre. Cada punto de interrupción utilizará una cuadrícula de 12 columnas, sin embargo, el número de pistas que los ítems expandirán cambiará dependiendo del tamaño de la pantalla.</p> + +<p>Empezamos con el móvil primero, y todo lo que queremos para las pantallas más estrechas es que los elementos permanezcan en el orden de origen, y que todos se expandan a lo largo de la cuadrícula.</p> + +<pre class="brush: css">.wrapper > * { + grid-column: col-start / span 12; +} +</pre> + +<p>En el siguiente punto de ruptura queremos pasar a un diseño de dos columnas. Nuestro encabezado y navegación todavía se extienden por toda la cuadrícula, por lo que no necesitamos especificar ninguna posición para ellos. La barra lateral comienza en la primera línea de la columna llamada col-start, que abarca 3 líneas. Va después de la línea 3 de la fila, ya que la cabecera y la navegación se encuentran en las dos primeras pistas de la fila.</p> + +<p>El panel de anuncios se encuentra debajo de la barra lateral, por lo que comienza en la línea 4 de la fila de la cuadrícula. Luego tenemos el contenido y el pie de página comenzando en col-start 4 y abarcando 9 pistas que los llevan al final de la cuadrícula.</p> + +<pre class="brush: css">@media (min-width: 500px) { + + .side { + grid-column: col-start / span 3; + grid-row: 3; + } + .ad { + grid-column: col-start / span 3; + grid-row: 4; + } + .content, .main-footer { + grid-column: col-start 4 / span 9; + } + nav ul { + display: flex; + justify-content: space-between; + } +} +</pre> + +<p>Finalmente vamos a la versión de tres columnas de este diseño. El encabezado continúa extendiéndose por toda la cuadrícula, pero ahora la navegación se mueve hacia abajo para convertirse en la primera barra lateral, con el contenido y la barra lateral al lado. El pie de página ahora también se extiende por todo el diseño.</p> + +<pre class="brush: css">@media (min-width: 700px) { + .main-nav { + grid-column: col-start / span 2; + grid-row: 2 / 4; + } + .content { + grid-column: col-start 3 / span 8; + grid-row: 2 / 4; + } + .side { + grid-column: col-start 11 / span 2; + grid-row: 2; + } + .ad { + grid-column: col-start 11 / span 2; + grid-row: 3; + } + .main-footer { + grid-column: col-start / span 12; + } + nav ul { + flex-direction: column; + } +} +</pre> + +<p>{{ EmbedLiveSample('layout_3', '800', '450') }}</p> +</div> + +<p>Una vez más el Grid Inspector <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> es útil para ayudarnos a ver cómo ha tomado forma nuestro diseño.</p> + +<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="https://mdn.mozillademos.org/files/14755/11-grid-inspector-12col-layout.png" style="height: 614px; width: 2050px;"></p> + +<p>Algo a tener en cuenta a la hora de crear este diseño es que no hemos necesitado posicionar explícitamente cada elemento en la cuadrícula en cada punto de ruptura. Hemos sido capaces de heredar la colocación establecida para puntos de ruptura anteriores - una ventaja de trabajar " mobile first ". También podemos aprovechar la colocación automática de la rejilla. Al mantener los elementos en un orden lógico, la colocación automática realiza una gran cantidad de trabajo por nosotros al colocar los elementos en la cuadrícula. En el último ejemplo de esta guía crearemos un diseño que se basa totalmente en la colocación automática</p> + +<h2 id="Un_listado_de_productos_con_auto-placement">Un listado de productos con auto-placement</h2> + +<p>Muchos diseños son esencialmente conjuntos de "tarjetas" - listados de productos, galerías de imágenes, etc. Una cuadrícula puede hacer que sea muy fácil crear estos listados de una manera responsiva sin necesidad de añadir <a href="/es/docs/Web/CSS/Media_Queries">media queries</a> para ello. En este siguiente ejemplo estoy combinando CSS Grid y Flexbox Layouts para hacer un sencillo diseño de listado de productos.</p> + +<p>El marcado de mi anuncio es una lista no ordenada de artículos. Cada elemento contiene un encabezado, un texto de altura variable y un enlace para llamar a la acción.</p> + +<div id="layout_4"> +<pre class="brush: html"><ul class="listing"> + <li> + <h2>Item Uno</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> + <li> + <h2>Item Dos</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> + <li class="wide"> + <h2>Item Tres</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p> + <p>Este tiene más texto que los demás.</p> + <p>Un poquito más</p> + <p>¿Podríamos hacer algo diferente con él?</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> + <li> + <h2>Item Cuatro</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> + <li> + <h2>Item Cinco</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> +</ul> +</pre> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + img {max-width: 100%; display: block;} + body { + font: 1.2em Helvetica, arial, sans-serif; + } + a:link, a:visited { + text-decoration: none; + color: #f08c00; + } + + h2 { + background-color: #f08c00; + color: #fff; + text-align: center; + margin: 0; + padding: 20px; + } +</pre> +</div> + +<p>Vamos a crear una cuadrícula con un número flexible de columnas flexibles. Quiero que nunca sean más pequeñas que 200 píxeles, y que luego compartan el espacio restante disponible por igual, de modo que siempre obtengamos pistas de columna de igual ancho. Esto lo logramos con la función <code>minmax()</code> en nuestra notación repeat para el dimensionamiento de pistas.</p> + +<pre class="brush: css">.listing { + list-style: none; + margin: 2em; + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); +} +</pre> + +<p>Tan pronto como añado este CSS, los ítems empiezan a desplegarse como una cuadrícula. Si hago la ventana más pequeña o más ancha, el número de pistas de columna cambia, sin necesidad de añadir puntos de interrupción mediante media queries y redefinir la cuadrícula.</p> + +<p>Luego puedo ordenar el interior de las cajas con un pequeño toque de flexbox. Establezco la lista de ítems como <code>display: flex</code> y la propiedad <code>flex-direction</code> como <code>column</code>. Entonces puedo usar un auto margin en <code>.cta</code> para empujar esta barra hacia abajo hasta el fondo de la caja./p></p> + +<pre class="brush: css">.listing li { + border: 1px solid #ffe066; + border-radius: 5px; + display: flex; + flex-direction: column; +} +.listing .cta { + margin-top: auto; + border-top: 1px solid #ffe066; + padding: 10px; + text-align: center; +} +.listing .body { + padding: 10px; +} +</pre> + +<p>Esta es realmente una de las razones clave por las que usaría flexbox en lugar de grid, si sólo estoy alineando o distribuyendo algo en una sola dimensión, ese es un caso de uso de flexbox.</p> + +<p>{{ EmbedLiveSample('layout_4', '800', '900') }}</p> +</div> + +<p>Todo esto se ve bastante completo ahora, sin embargo, a veces tenemos unas cartas que contienen mucho más contenido que las otras. Podría ser bueno hacer que se expandan a lo largo de dos pistas, y entonces no serán tan altas. Tengo una clase <code>wide</code> en mi ítem más grande, y añado una regla {{cssxref("grid-column-end")}} con el valor <code>span 2</code>. Ahora cuando la rejilla llegue a este ítem, le asignará dos pistas. En algunos puntos de ruptura, esto significa que obtendremos un hueco en la cuadrícula - donde no haya espacio para colocar un elemento de dos pistas.</p> + +<p><img alt="The layout has gaps as there is not space to layout a two track item." src="https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png" style="height: 812px; width: 800px;"></p> + +<p>Puedo hacer que una rejilla rellene esos huecos ajustando {{cssxref("grid-auto-flow")}}<code>: dense</code> 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 <a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility#Visual_not_logical_re-ordering">accesibilidad</a>: el tabulador seguirá el orden de la fuente y no de la visualización reordenada.</p> + +<div id="layout_5"> +<div class="hidden"> +<pre class="brush: html"><ul class="listing"> + <li> + <h2>Item Uno</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> + <li> + <h2>Item Dos</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> + <li class="wide"> + <h2>Item Tres</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p> + <p>Este tiene más texto que los demás.</p> + <p>Un poquito más</p> + <p>¿Podríamos hacer algo diferente con él?</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> + <li> + <h2>Item Cuatro</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> + <li> + <h2>Item Cinco</h2> + <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div> + <div class="cta"><a href="">¡Llamada a la acción!</a></div> + </li> +</ul> +</pre> + +<pre class="brush: css">* {box-sizing: border-box;} + img {max-width: 100%; display: block;} + body { + font: 1.2em Helvetica, arial, sans-serif; + } + a:link, a:visited { + text-decoration: none; + color: #f08c00; + } + + h2 { + background-color: #f08c00; + color: #fff; + text-align: center; + margin: 0; + padding: 20px; + } + +.listing li { + border: 1px solid #ffe066; + border-radius: 5px; + display: flex; + flex-direction: column; +} +.listing .cta { + margin-top: auto; + border-top: 1px solid #ffe066; + padding: 10px; + text-align: center; +} +.listing .body { + padding: 10px; +} +</pre> +</div> + +<pre class="brush: css">.listing { + list-style: none; + margin: 2em; + display: grid; + grid-gap: 20px; + grid-auto-flow: dense; + grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); +} +.listing .wide { + grid-column-end: span 2; +} +</pre> + +<p>{{ EmbedLiveSample('layout_5', '800', '900') }}</p> + +<p>Esta técnica de auto-placement con algunas reglas aplicadas a ciertos ítems es muy útil, y puede ayudarte a lidiar con el contenido que está siendo generado por un CMS, por ejemplo, donde has repetido ítems y quizás puedas añadir una clase a ciertos ítems a medida que son generados en el HTML. with some rules applied to certain items is very useful, and can help you to deal with content that is being output by a CMS for example, where you have repeated items and can perhaps add a class to certain ones as they are rendered into the HTML.</p> +</div> + +<h2 id="Aprender_más">Aprender más</h2> + +<p>La mejor manera de aprender a usar el diseño de la cuadrícula es continuar construyendo ejemplos como los que hemos tratado aquí. Escoge algo que normalmente construyes usando tu framework preferido, o usando floats, y ve si puedes construirlo usando grid. No olvides buscar ejemplos que sean imposibles de construir con los métodos actuales. Eso podría significar inspirarse en revistas u otras fuentes ajenas a la web. Grid Layout abre posibilidades que antes no teníamos, no necesitamos estar atados a los mismos viejos layouts para utilizarlo</p> + +<ul> + <li>Para inspirarte mira <a href="http://labs.jensimmons.com/"><em>Layout Labs</em> de Jen Simmons</a>, ella ha estado creando diseños basados en una variedad de fuentes.</li> + <li>ara obtener patrones de diseño comunes adicionales, consulta <em><a href="http://gridbyexample.com">Grid by Example</a></em>, 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.</li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guías</strong></a> + <ol> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos del posicionamiento con rejillas</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación con otros métodos de posicionamiento</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamiento basado en líneas</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Áreas de una plantilla de rejilla</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Posicionamiento usando líneas de rejilla con nombres</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamiento automático en grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineación de cajas en grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Rejillas, valores lógicos y modos de escritura</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout y Accesibilidad</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout y Mejora Progresiva</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Layouts comunes utilizando CSS Grid</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/es/docs/Web/CSS/grid">grid</a></li> + <li><a href="/es/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/es/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/es/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/es/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/es/docs/Glossary/Grid">Rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_lines">Líneas de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_tracks">Pistas de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_cell">Celda de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_areas">Áreas de rejilla</a></li> + <li><a href="/es/docs/Glossary/Gutters">Canaletas</a></li> + <li><a href="/es/docs/Glossary/Grid_Axis">Ejes de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_rows">Fila de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_column">Columna de rejilla</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html b/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html new file mode 100644 index 0000000000..298da1dc5f --- /dev/null +++ b/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html @@ -0,0 +1,642 @@ +--- +title: Relación de Grid Layout con otros métodos de diseño y posicionamiento - CSS +slug: Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout +tags: + - CSS + - CSS Cuadrícula + - CSS Grids + - CSS Grilla + - CSS Rejilla + - Guía +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +<p>CSS Grid Layout ha sido diseñado para trabajar junto con otros elementos de CSS, como parte de un sistema completo para hacer el diseño. En esta guía explicaré cómo se ajusta <em>Grid</em> junto con otras técnicas que ya se estén usando.</p> + +<div class="note"> +<p>Las traducciones posibles a la palabra Grid en este contexto son: Grilla, Rejilla, Cuadrícula, Malla. Para efecto del contenido será <em>Grid</em>.</p> +</div> + +<h2 id="Grid_y_flexbox">Grid y flexbox</h2> + +<p>La diferencia básica entre CSS Grid Layout y <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox Layout</a> es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo. Sin embargo, las dos especificaciones comparten algunas características comunes, y si ya has aprendido cómo utilizar Flexbox, verás semejanzas que te ayudarán a entender <em>Grid</em>.</p> + +<h3 id="Diseños_de_Una_dimensión_vs._dos_dimensiones">Diseños de Una dimensión vs. dos dimensiones</h3> + +<p>Un ejemplo simple puede demostrar la diferencia entre el diseño de una y dos dimensiones.</p> + +<p>En este primer ejemplo, estoy usando flexbox para diseñar un conjunto de cajas. Tengo cinco ítems-hijos en mi contenedor y les he dado valores a sus propiedades flex para que puedan aumentar y reducirse desde una flex-basis de 200 píxeles.</p> + +<p>También he configurado la propiedad <code>wrap</code>{{cssxref ("flex-wrap")}} , de modo que si el espacio del contenedor se hace demasiado estrecho para mantener esa flex-basis, los ítems se ajustarán (wrap) a una nueva fila.</p> + +<div id="onedtwod"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: flex; + flex-wrap: wrap; +} +.wrapper > div { + flex: 1 1 200px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('onedtwod', '500', '230') }}</p> + +<p>En la imagen se puede ver que dos elementos se han ajustado en una nueva línea. Estos ítems comparten el espacio disponible y no están alineados debajo de los ítems de arriba. Esto es porque cuando envuelves (wrap) flex-ítems, cada nueva fila (o columna si se trabaja por columna) se convierte en un nuevo flex-container. La distribución del espacio ocurre a lo largo de la fila.</p> + +<p>La pregunta típica entonces es cómo conseguir que estos ítems se alineen. Aquí es donde queremos un método de layout bidimensional, queremos controlar la alineación por fila y columna, y es donde entra el grid.</p> + +<h3 id="El_mismo_diseño_con_CSS_Grid_Layout">El mismo diseño con CSS Grid Layout</h3> + +<p>En el siguiente ejemplo construyo el mismo diseño usando Grid. Esta vez tenemos tres pistas de columna de <code>1fr</code>. 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.</p> + +<div class="Two_Dimensional_With_Grid"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +</pre> + +<p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p> +</div> + +<p>Hay una pregunta muy simple para decidir si utilizar grid o flexbox:</p> + +<ul> + <li>¿Necesito controlar el diseño únicamente por filas o por columnas? – usa flexbox</li> + <li>¿Necesito controlar el diseño por filas y por columnas? – usa grid</li> +</ul> + +<h3 id="¿Contenido_fuera_o_layout_dentro">¿Contenido fuera o layout dentro?</h3> + +<p>Además de la distinción unidimensional vs bidimensional, hay otra forma de decidir si es mejor utilizar flexbox o grid para un layout. Flexbox trabaja desde el contenido. Un caso de uso ideal para flexbox es cuando tienes un conjunto de ítems y quieres espaciarlos uniformemente en un contenedor. Dejas que el tamaño del contenido decida cuánto espacio ocupa cada ítem. Si los ítems se envuelven (wrap) en una nueva línea, calcularán su espaciado basándose en su tamaño y el espacio disponible <em>en esa línea</em>.</p> + +<p>Grid funciona desde el layout hacia adentro. Cuando usas CSS Grid Layout creas un diseño y luego colocas elementos en él, o permites que las reglas de auto-placement coloquen los elementos en las celdas de la cuadrícula de acuerdo con esa cuadrícula estricta. Existe la posibilidad de crear pistas que respondan al tamaño del contenido, sin embargo, también cambiarán toda la pista.</p> + +<p>Si estás usando flexbox y estás deshabilitando parte de la flexibilidad, probablemente necesites usar CSS Grid Layout. Un ejemplo sería si estás configurando un ancho de porcentaje en un flex-item para alinearlo con otros ítems de una línea anterior. En ese caso, es probable que Grid sea una mejor opción.</p> + +<h3 id="Alineación_de_Cajas">Alineación de Cajas</h3> + +<p>La característica de Flexbox que fue más emocionante para muchos de nosotros es que nos dio un control de alineación adecuado por primera vez. Hizo fácil centrar una caja en la página. Los flex-ítems pueden estirarse hasta la altura del flex container, lo que significa que son posibles columnas de la misma altura. Estas eran cosas que queríamos hacer desde hace mucho tiempo, y creamos todo tipo de hacks para conseguir al menos el efecto visual.</p> + +<p>Las propiedades de alineación de la especificación de Flexbox se han añadido a una nueva especificación llamada <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Esto significa que pueden utilizarse en otras especificaciones, incluida Grid Layout. En el futuro, es posible que se apliquen también a otros métodos de layout.</p> + +<p>En una guía posterior en esta serie voy a echar un vistazo a Box Alignment y cómo funciona en Grid Layout, sin embargo aquí hay un ejemplo simple comparando Flexbox con Grid.</p> + +<p>El primer ejemplo utiliza flexbox, tengo un contenedor con tres ítems dentro. El {{cssxref("min-height")}} del wrapper es fijo, por lo que está definiendo la altura del flex container. En el flex container he establecido {{cssxref("align-items")}} en <code>flex-end</code> para que los items se alineen al final del flex container. También he establecido la propiedad {{cssxref("align-self")}} en <code>box1</code> para que anule el valor por defecto y se estire a la altura del contenedor, y en <code>box2</code> para que se alinee con el inicio del contenedor flexible.</p> + +<div id="Alineacion_de_cajas"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: flex; + align-items: flex-end; + min-height: 200px; +} +.box1 { + align-self: stretch; +} +.box2 { + align-self: flex-start; +} +</pre> + +<p>{{ EmbedLiveSample('Alineacion_de_cajas', '300', '230') }}</p> +</div> + +<h3 id="Alineación_en_CSS_Grid_Layout">Alineación en CSS Grid Layout</h3> + +<p>En este segundo ejemplo uso Grid para construir el mismo diseño, usando las propiedades de alineación como se aplican en el grid layout. Por eso alineamos a <code>start</code> y a <code>end</code> en vez de a <code>flex-start</code> y<code>flex-end</code>. En grid layout alineamos los ítems dentro de su grid area que en este caso es una celda de la rejilla pero puede ser un área formada por múltiples celdas de rejilla.</p> + +<div id="Alineacion_en_Cssgrid"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3,1fr); + align-items: end; + grid-auto-rows: 200px; +} +.box1 { + align-self: stretch; +} +.box2 { + align-self: start; +} +</pre> + +<p>{{ EmbedLiveSample('Alineacion_en_Cssgrid', '200', '310') }}</p> +</div> + +<h3 id="La_unidad_fr_y_flex-basis">La unidad <code>fr</code> y <code>flex-basis</code></h3> + +<p>Ya hemos visto que la unidad <code>fr</code> asigna a las pistas del grid (tracks) una proporción del espacio disponible en el grid container. La unidad <code>fr</code>combinada con la función {{cssxref("minmax()", "minmax")}} permite un comportamiento muy similar al que tienen las propiedades <code>flex</code> en Flexbox - y todavía mantenemos la posibilidad de crear un layout de dos dimensiones.</p> + +<p>Si volvemos al ejemplo en el que demostré la diferencia entre layouts de una y de dos dimensiones, puedes ver que hay una diferencia con respecto al modo de funcionamiento responsive en cada una de ellas. En la flex-layout si arrastramos nuestra ventana haciéndola cada vez más pequeña, flex box ajusta el número de ítems en cada fila de acuerdo al espacio disponible. Si tenemos mucho espacio los cinco ítems pueden caber en una fila, pero si tenemos un contenedor muy estrecho podríamos tener espacio solo para uno.</p> + +<p>En comparación, la versión grid siempre mantiene tres pistas de columna: son las pistas mismas las que crecen y se encogen, pero siempre hay tres, ya que al crear la rejilla definimos tres.</p> + +<h4 id="Auto-filling_grid_tracks">Auto-filling grid tracks</h4> + +<p>Podemos crear un efecto similar a flexbox, mientras mantenemos el contenido organizado en filas y columnas concretas mediante la creación de una lista de tracks usando la notación repeat y las propiedades <code>auto-fill</code> y <code>auto-fit</code>.</p> + +<p>En el siguiente ejemplo he usado <code>auto-fill</code> en el lugar del número entero de la notación repeat y he establecido la lista de pistas en 200 píxeles. Esto significa que el grid creará tantas columnas de 200 píxeles como quepan en el container.</p> + +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, 200px); +} +</pre> + +<p>{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}</p> + +<h3 id="Una_cantidad_flexible_de_pistas">Una cantidad flexible de pistas</h3> + +<p>Esto no es lo mismo que flexbox, en el ejemplo de flexbox los elementos son más grandes que la base de 200 píxeles antes del envoltorio. Podemos lograr lo mismo en grid combinando <code>auto-fill</code> y la función {{cssxref("minmax()", "minmax")}}. En el siguiente ejemplo configuro pistas que se rellenan automáticamente con <code>minmax</code>. Quiero que mis pistas tengan un mínimo de 200 píxeles, y luego establezco el máximo en <code>1fr</code>. Una vez que el navegador ha calculado cuántas veces caben 200 píxeles en el contenedor - teniendo en cuenta también la cantidad de espacio entre las rejillas ( grid gaps) - tratará como una instrucción el máximo de <code>1fr</code> y repartirá el espacio restante entre los ítems.</p> + +<div id="cantidad_flexible_pistas"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div>One</div> + <div>Two</div> + <div>Three</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); +} +</pre> + +<p>{{ EmbedLiveSample('cantidad_flexible_pistas', '500', '170') }}</p> +</div> + +<p>Ahora tenemos la capacidad de crear una cuadrícula con un número flexible de pistas flexibles, y de ver los ítems dispuestos en la cuadrícula alineados por filas y columnas al mismo tiempo.</p> + +<h2 id="El_grid_y_los_elementos_absolutamente_posicionados">El grid y los elementos absolutamente posicionados</h2> + +<p>Grid interactúa con elementos absolutamente posicionados, lo que puede ser útil si quieres colocar un ítem dentro de una rejilla o de un área de la rejilla. La especificación define el comportamiento cuando un grid container es el bloque contenedor y es el padre del ítem posicionado absolutamente.</p> + +<h3 id="El_grid_container_como_bloque_contenedor">El grid container como bloque contenedor</h3> + +<p>Para hacer que el grid container sea un bloque contenedor es necesario añadir al container la propiedad position con el valor relative, (de la misma manera que harías para cualquier otro bloque contenedor posicionado absolutamente). Una vez hecho esto, si das la propiedad <code>position:</code> <code>absolute</code> a un grid-item se tomará como bloque que contiene el grid container o, si el ítem también tiene una posición de cuadrícula, como el área de la cuadrícula en la que se coloca.</p> + +<p>En el ejemplo de abajo tengo un wrapper que contiene cuatro ítems hijos, el ítem tres está absolutamente posicionado y también está colocado en la cuadrícula usando line-based placement. El grid container tiene <code>position:</code> <code>relative</code> y así se convierte en el contexto de posicionamiento de este elemento.</p> + +<div id="grid_container_como_bloque_contenedor"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3"> + Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado. + </div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4,1fr); + grid-auto-rows: 200px; + grid-gap: 20px; + position: relative; +} +.box3 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + position: absolute; + top: 40px; + left: 40px; +} +</pre> + +<p>{{ EmbedLiveSample('grid_container_como_bloque_contenedor', '500', '330') }}</p> +</div> + +<p>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 <code>top </code> y <code>left</code>. 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.</p> + +<p>Si eliminamos <code>position:</code> <code>absolute</code> de las reglas de <code>.box3</code> podemos ver cómo se mostraría sin el posicionamiento.</p> + +<h3 id="El_grid_container_como_parent">El grid container como parent</h3> + +<p>Si el hijo absolutamente posicionado tiene un grid container como padre pero ese container no crea un nuevo contexto de posicionamiento, entonces se saca del flujo como en el ejemplo anterior. El contexto de posicionamiento será el elemento que cree un contexto de posicionamiento como es común a otros métodos de diseño. En nuestro caso, si eliminamos <code>position:</code> <code>relative</code> del wrapper de arriba, el contexto de posicionamiento es de la ventana de visualización, como se muestra en esta imagen.</p> + +<p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p> + +<p>Una vez más, el ítem ya no participa en el diseño de la cuadrícula en términos de tamaño o cuando otros ítems se colocan automáticamente.</p> + +<h3 id="Con_un_grid_area_como_parent_2">Con un grid area como parent</h3> + +<p>Si el ítem absolutamente posicionado está anidado dentro de un área de cuadrícula, entonces puede crear un contexto de posicionamiento en esa área. En el ejemplo de abajo tenemos nuestra cuadrícula como antes pero esta vez he anidado un ítem dentro de <code>.box3</code> de la cuadrícula.</p> + +<p>He dado a <code>.box3</code> position relative y luego he posicionado el sub-ítem con las propiedades offset. En este caso, el contexto de posicionamiento es el grid area</p> + +<div id="Con_un_grid_area_como_parent"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three + <div class="abspos"> + Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado. + </div> + </div> + <div class="box4">Four</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(4,1fr); + grid-auto-rows: 200px; + grid-gap: 20px; +} +.box3 { + grid-column-start: 2; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; + position: relative; +} +.abspos { + position: absolute; + top: 40px; + left: 40px; + background-color: rgba(255,255,255,.5); + border: 1px solid rgba(0,0,0,0.5); + color: #000; + padding: 10px; +} +</pre> + +<p>{{ EmbedLiveSample('Con_un_grid_area_como_parent', '500', '420') }}</p> +</div> + +<h2 id="Grid_y_display_contents">Grid y <code>display:</code> <code>contents</code></h2> + +<p>Una interacción final con otra especificación de layout que merece la pena destacar es la interacción entre CSS Grid Layout y <code>display:</code> <code>contents</code>. El valor de <code>contents</code> en la propiedad display es un nuevo valor que se describe en <a href="https://drafts.csswg.org/css-display/#box-generation">Display specification</a> de la siguiente manera:</p> + +<blockquote> +<p>“El elemento en sí no genera ninguna caja, pero sus hijos y pseudo-elementos siguen generando cajas como de costumbre. A efectos de generación y layout de cajas, el elemento debe ser tratado como si hubiera sido sustituido por sus hijos y pseudo-elementos en el árbol del documento”</p> +</blockquote> + +<p>Si configuras un ítem como <code>display:</code> <code>contents</code> la caja que normalmente crearía desaparece, y las cajas de los elementos hijo aparecen como si hubieran subido de nivel. Esto significa que los hijos de un grid item pueden convertirse en grid items. . ¿Suena raro? He aquí un ejemplo sencillo. En el siguiente marcado tengo un grid, el primer ítem del grid se establece para que se expanda tres pistas de columna. Contiene tres ítems anidados. Como esos hijos no son hijos directos, no forman parte del grid layout y por tanto se muestran como <code>display</code>:<code>block</code>.</p> + +<div id="Display_Contents_Before"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; +} + +</pre> + +<p>{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}</p> +</div> + +<p>Si ahora añado <code>display:</code> <code>contents</code> 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.</p> + +<div id="Display_Contents_After"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.box { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +</pre> +</div> + +<pre class="brush: html"><div class="wrapper"> + <div class="box box1"> + <div class="nested">a</div> + <div class="nested">b</div> + <div class="nested">c</div> + </div> + <div class="box box2">Two</div> + <div class="box box3">Three</div> + <div class="box box4">Four</div> + <div class="box box5">Five</div> +</div> +</pre> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); +} +.box1 { + grid-column-start: 1; + grid-column-end: 4; + display: contents; +} +</pre> + +<p>{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}</p> +</div> + +<p>Esta puede ser una forma de anidar elementos en la rejilla para que actúen como si fueran parte de la rejilla, y es una forma de sortear algunos de los problemas que resolverían los sub-grid una vez que se implementen. También puedes usar <code>display:</code> <code>contents</code> de manera similar en flexbox para que los ítems anidados se conviertan en flex items.</p> + +<p>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.</p> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guías</strong></a> + <ol> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos del posicionamiento con rejillas</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación con otros métodos de posicionamiento</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamiento basado en líneas</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Áreas de una plantilla de rejilla</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Posicionamiento usando líneas de rejilla con nombres</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamiento automático en grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineación de cajas en grid layout</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Rejillas, valores lógicos y modos de escritura</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout y Accesibilidad</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout y Mejora Progresiva</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Layouts comunes utilizando CSS Grid</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/es/docs/Web/CSS/grid">grid</a></li> + <li><a href="/es/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/es/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/es/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/es/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/es/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/es/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/es/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/es/docs/Glossary/Grid">Rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_lines">Líneas de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_tracks">Pistas de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_cell">Celda de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_areas">Áreas de rejilla</a></li> + <li><a href="/es/docs/Glossary/Gutters">Canaletas</a></li> + <li><a href="/es/docs/Glossary/Grid_Axis">Ejes de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_rows">Fila de rejilla</a></li> + <li><a href="/es/docs/Glossary/Grid_column">Columna de rejilla</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/css_logical_properties/basic_concepts/index.html b/files/es/web/css/css_logical_properties/basic_concepts/index.html new file mode 100644 index 0000000000..a90c3b016f --- /dev/null +++ b/files/es/web/css/css_logical_properties/basic_concepts/index.html @@ -0,0 +1,71 @@ +--- +title: Conceptos básicos de las Propiedades y Valores Lógicos +slug: Web/CSS/CSS_Logical_Properties/Basic_concepts +translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts +--- +<div>{{CSSRef}}</div> + +<p class="summary">La Especificación de Propiedades y Valores Lógicos introduce asignaciones relativas al flujo para muchas de las propiedades y valores en CSS. Este artículo introduce la especificación y explica las propiedades y valores relativos al flujo.</p> + +<h2 id="¿Por_qué_necesitamos_propiedades_lógicas">¿Por qué necesitamos propiedades lógicas?</h2> + +<p>Tradicionalmente CSS ha medido las cosas de acuerdo con las dimensiones físicas de la pantalla. Por lo tanto, decimos que las cajas tienen un ancho<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> ({{CSSxRef("width")}}) y un alto ({{CSSxRef("height")}}), posicionamos elementos</span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, los flotamos, les asignamos bordes, márgenes y rellenos arriba (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">top</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), a la derecha (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">right</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), abajo (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">bottom</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), a la izquierda ( </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">left</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), etc. La </span><a href="https://drafts.csswg.org/css-logical/" style="font-size: 1rem; letter-spacing: -0.00278rem;">especificación de Propiedades y valores Logicos</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> define una asignación de esos valores físicos a su lógica, o flujo relativo — por ejemplo, comienzo (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">start</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) y final (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">end</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) en oposición a izquierda (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">left</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) y derecha (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">right</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) / arriba (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">top</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) y abajo (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">bottom</code>) .</p> + +<p>Un ejemplo de por qué esas asignaciones podrían ser necesarias es el siguiente: tengo el diseño de una pantalla usando CSS Grid, el contenedor de la rejilla tiene un ancho y estoy usando las propiedades {{CSSxRef("align-self")}} y {{CSSxRef("justify-self")}} para alinear los elementos dentro del contenedor. Esas propiedades son de flujo relativo — <code>justify-self: start</code> alinea el elemento al inicio de la dimensión en línea, <code>align-self: start</code> hace lo mismo en la dimensión bloque.</p> + +<p><img alt="A grid in a horizontal writing mode" src="https://mdn.mozillademos.org/files/16338/grid-horizontal-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p> + +<p>Si ahora cambio el modo de escritura para este componente a <code>vertical-rl</code> usando la propiedad {{CSSxRef("writing-mode")}}, la alineación sigue trabajando de la misma forma. La dimensión en línea está ahora de forma vertical y la dimensión bloque de forma horizontal. Sin embargo, la rejilla no se ve igual ya que el ancho asignado para el contenedor es una medida horizontal, vinculada a la posición física y no a la posición lógica o al flujo relativo del texto.</p> + +<p><img alt="A grid in vertical writing mode." src="https://mdn.mozillademos.org/files/16339/grid-vertical-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p> + +<p>Si en lugar de usar la propiedad <code>width</code> usamos la propiedad lógica {{CSSxRef("inline-size")}}, el componente funciona de la misma forma sin importar en qué modo de escritura se encuentre.</p> + +<p><img alt="A grid layout in vertical writing mode" src="https://mdn.mozillademos.org/files/16337/grid-vertical-inline-size-small.png" style="display: block; height: 382px; margin: 0 auto; width: 200px;"></p> + +<p>Puedes probar lo anterior en el siguiente ejemplo en vivo. Cambia la propiedad <code>writing-mode</code> de <code>vertical-rl</code> a <code>horizontal-tb</code> en <code>.box</code> para mirar cómo cambia el diseño con las diferentes propiedades.</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}</p> + +<p>Cuando trabajamos en un sitio con un modo de escritura diferente al predeterminado (horizontal) o por razones creativas, ser capaces de relacionarnos con el flujo del contenido tiene mucho sentido.</p> + +<h2 id="Dimensiones_de_bloque_y_en_línea">Dimensiones de bloque y en línea</h2> + +<p>Dos conceptos claves para trabajar con las propiedades y valores al flujo relativo, son las dimensiones de bloque y en línea. Como vimos anteriormente, los métodos de diseño de CSS como Flexbox y Grid usan los conceptos de bloque (<code>block</code>) y en línea (<code>inline</code>) en vez de usar los conceptos de derecha (<code>right</code>) e izquierda (<code>left</code>) / arriba (<code>top</code>) y abajo (<code>bottom</code>) para alinear elementos.</p> + +<p>La dimensión en línea (<code>inline</code>) es la dimensión a lo largo de la cual se ejecuta una línea de texto en el modo de escritura en uso. Por lo tanto, en un documento en español con el texto ejecutándose horizontalmente de izquierda a derecha o un documento árabe con el texto ejecutándose horizontalmente de derecha a izquierda, la dimensión en línea es <em>horizontal</em>. Si cambiamos a un modo de escritura vertical (por ejemplo, un documento japonés), la dimensión en línea ahora es <em>vertical</em>, ya que las líneas en ese modo de escritura se ejecutan verticalmente.</p> + +<p>La dimensión en bloque es la dimensión en la que los bloques —como los párrafos— se muestran uno después del otro. Tanto en español como en árabe, los bloques se ejecutan verticalmente, mientras que en cualquier modo de escritura vertical se ejecutan horizontalmente.</p> + +<p>El siguiente diagrama muestra las direcciones de bloque y en línea en un modo de escritura horizontal:</p> + +<p><img alt="diagram showing the inline axis running horizontally, block axis vertically." src="https://mdn.mozillademos.org/files/16340/mdn-horizontal.png" style="display: block; height: 382px; margin: 0 auto; width: 521px;"></p> + +<p>El siguiente diagrama muestra las direcciones de bloque y en línea en un modo de escritura vertical:</p> + +<p><img alt="Diagram showing the block axis running horizontally the inline axis vertically." src="https://mdn.mozillademos.org/files/16341/mdn-vertical.png" style="display: block; height: 382px; margin: 0 auto; width: 418px;"></p> + +<h2 id="Soporte_en_navegadores">Soporte en navegadores</h2> + +<p>Las Propiedades y Valores lógicos pueden ser considerados como un par de grupos en términos de la compatibilidad actual del navegador. Algunas de las propiedades son esencialmente asignadas desde la versión física, por ejemplo {{CSSxRef("inline-size")}} por {{CSSxRef("width")}} o {{CSSxRef("margin-inline-start")}} en lugar de {{CSSxRef("margin-left")}}. Esa asignación de propiedades se está comenzando a ver bien en los diferentes navegadores; sin embargo, si miras la página de cada propiedad en la <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties#Reference">referencia en MDN</a>, verás que el único navegador moderno que no cuenta con estas propiedades es Edge.</p> + +<p>Hay otro grupo de estas propiedades lógicas que no tienen una asignación directa con las propiedades físicas existentes. Estas son abreviaturas posibles gracias al hecho de que podemos referirnos a ambos bordes del bloque o dimensión en línea a la vez. Un ejemplo sería {{CSSxRef("margin-block")}}, que es una abreviación de {{CSSxRef("margin-block-start")}} y {{CSSxRef("margin-block-end")}}. Actualmente, estas propiedades no tiene soporte en navegadores.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: CSS Working Group está intentando decidir qué hacer con los valores abreviados de cuatro valores para las propiedades lógicas, por ejemplo, los equivalentes para configurar cuatro propiedades físicas a la vez, como márgenes con la propiedad {{CSSxRef("margin")}}. Necesitaríamos algún tipo de modificador si tuviéramos que reutilizar el margen para las propiedades relativas al flujo. Si deseas leer las sugerencias o comentarlas, el problema relevante de GitHub es <a href="https://github.com/w3c/csswg-drafts/issues/1282">#1282</a>.</p> +</div> + +<h3 id="Pruebas_para_el_soporte_en_navegadores">Pruebas para el soporte en navegadores</h3> + +<p>Puedes probar el soporte de las propiedades y valores lógicos usando <em>feature queries</em>. Por ejemplo, {{CSSxRef("width")}}, prueba para {{CSSxRef("inline-size")}} y, si esto es soportado, establece el ancho (<code>width</code>) en automático (<code>auto</code>) y el tamaño en línea (<code>inline-size</code>) al valor del ancho (<code>width</code>) original.</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineamiento de caja en Grid Layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Alineamiento de caja en Flex Layout</a></li> + <li><a href="https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/">Entendiendo Propiedades y Valores Lógicos</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Modos de escritura</a></li> +</ul> diff --git a/files/es/web/css/css_logical_properties/dimensionamiento/index.html b/files/es/web/css/css_logical_properties/dimensionamiento/index.html new file mode 100644 index 0000000000..a5a9b4063c --- /dev/null +++ b/files/es/web/css/css_logical_properties/dimensionamiento/index.html @@ -0,0 +1,89 @@ +--- +title: Dimensionamiento para propiedades lógicas +slug: Web/CSS/CSS_Logical_Properties/Dimensionamiento +translation_of: Web/CSS/CSS_Logical_Properties/Sizing +--- +<div>{{CSSRef}}</div> + +<p class="summary">En esta guía explicaremos las asignaciones relativas al flujo relativo entre las propiedades de dimensionamiento físico y lógico usados para dimensionar elementos en nuestras páginas.</p> + +<p>Cuando especificamos el tamaño de un ítem, las <a href="https://drafts.csswg.org/css-logical/">Propiedades y Valores Lógicos</a> te dan la habilidad de indicar el dimensionamiento en relación al flujo relativo del texto (en línea y bloque) más bien que dimensionamiento físico con relación a las dimensiones físicas: horizontal y vertical (por ejemplo, left y right). Si bien estas asignaciones de flujo relativo pueden convertirse en el valor predeterminado para muchos de nosotros, en un diseño puede usar el tamaño físico y el tamaño lógico. Es posible que desee que algunas características se relacionen siempre con las dimensiones físicas, independientemente del modo de escritura.</p> + +<h2 id="Asignaciones_para_dimensiones">Asignaciones para dimensiones</h2> + +<p>La siguiente tabla proporciona asignaciones entre propiedades lógicas y físicas. Estas asignaciones asumen que estás en un modo de escritura <code>horizontal-tb</code>, como Inglés o Árabe, en cada caso el ancho ({{CSSxRef("width")}}) sería asignado a {{CSSxRef("inline-size")}}.</p> + +<p>Si tú estás en un modo de escritura vertical, entonces {{CSSxRef("inline-size")}} sería asignado a {{CSSxRef("height")}}.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Propiedades Lógicas</th> + <th scope="col">Propiedades Físicas</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{CSSxRef("inline-size")}}</td> + <td>{{CSSxRef("width")}}</td> + </tr> + <tr> + <td>{{CSSxRef("block-size")}}</td> + <td>{{CSSxRef("height")}}</td> + </tr> + <tr> + <td>{{CSSxRef("min-inline-size")}}</td> + <td>{{CSSxRef("min-width")}}</td> + </tr> + <tr> + <td>{{CSSxRef("min-block-size")}}</td> + <td>{{CSSxRef("min-height")}}</td> + </tr> + <tr> + <td>{{CSSxRef("max-inline-size")}}</td> + <td>{{CSSxRef("max-width")}}</td> + </tr> + <tr> + <td>{{CSSxRef("max-block-size")}}</td> + <td>{{CSSxRef("max-height")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplo_de_ancho_y_alto">Ejemplo de ancho y alto</h2> + +<p>Las asignaciones para el ancho ({{CSSxRef("width")}}) y el alto ({{CSSxRef("height")}}) son {{CSSxRef("inline-size")}}, que establece el largo en la dimensión en línea y {{CSSxRef("block-size")}}, que establece el largo en la dimensión en bloque. Cuando trabajamos en Inglés, si reemplazamos el ancho (<code>width</code>) con <code>inline-size</code> y el alto (<code>height</code>) con <code>block-size</code> dará el mismo diseño.</p> + +<p>En el siguiente ejemplo, establecemos un modo de escritura <code>horizontal-tb</code>. Cambiamos esto por <code>vertical-rl</code> y veremos que el primer ejemplo — cuando usamos <code>width</code> y <code>height</code> — permanece con el mismo tamaño en cada dimensión, a pesar de que el texto se vuelve vertical. El segundo ejemplo — cuando usamos <code>inline-size</code> y <code>block-size</code> — seguirá la dirección del texto como si todo el bloque hubiera girado.</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}</p> + +<h2 id="Ejemplo_de_ancho_y_alto_mínimo">Ejemplo de ancho y alto mínimo</h2> + +<p>También hay asignaciones para {{CSSxRef ("min-width")}} y {{CSSxRef ("min-height")}} — estas son {{CSSxRef ("min-inline-size")}} y {{ CSSxRef ("min-block-size")}}. Estas funcionan de la misma manera que las propiedades de <code>inline-size</code> y <code>block-size</code>, pero establecen un tamaño mínimo en lugar de uno fijo.<br> + <br> + Intente cambiar el siguiente ejemplo a <code>vertical-rl</code>, como en el primer ejemplo, para ver el efecto que tiene. Estoy usando <code>min-height</code> en el primer ejemplo y <code>min-block-size</code> en el segundo.</p> + +<p> </p> + +<p>{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}</p> + +<h2 id="Ejemplo_de_ancho_y_alto_máximo">Ejemplo de ancho y alto máximo</h2> + +<p>Finalmente, puedes usar {{CSSxRef("max-inline-size")}} y {{CSSxRef("max-block-size")}} como reemplazos de {{CSSxRef("max-width")}} y {{CSSxRef("max-height")}}. Intenta jugar con el siguiente ejemplo de la misma manera que antes.</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}</p> + +<h2 id="Palabras_claves_para_redimensionamiento_lógico">Palabras claves para redimensionamiento lógico</h2> + +<p>La propiedad {{CSSxRef("resize")}} establece si un elemento se puede redimensionar o no y si tiene valores físicos de <code>horizontal</code> y <code>vertical</code>. La propiedad <code>resize</code> también tiene valores de palabras clave lógicas. Usar <code>resize: inline</code> permite cambiar el tamaño en la dimensión inline y <code>resize: block</code> permite cambiar el tamaño en la dimensión de bloque.</p> + +<p>El valor de la palabra clave de <code>both</code>para la propiedad de cambio de tamaño funciona ya sea que esté pensando física o lógicamente. Establece ambas dimensiones a la vez. Intenta jugar con el siguiente ejemplo.</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}</p> + +<div class="blockIndicator warning"> +<p><strong>Nota:</strong> <span style="font-size: 1rem; letter-spacing: -0.00278rem;">Tenga en cuenta que actualmente los valores lógicos para el cambio de tamaño solo son compatibles con Firefox.</span></p> + +<p> </p> +</div> diff --git a/files/es/web/css/css_logical_properties/floating_and_positioning/index.html b/files/es/web/css/css_logical_properties/floating_and_positioning/index.html new file mode 100644 index 0000000000..2f1654079f --- /dev/null +++ b/files/es/web/css/css_logical_properties/floating_and_positioning/index.html @@ -0,0 +1,206 @@ +--- +title: Propiedades lógicas para flotantes y posicionamiento +slug: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +--- +<div>{{CSSRef}}</div> + +<div> </div> + +<p class="summary">La <a href="https://drafts.csswg.org/css-logical/">especificación de Propiedades y Valores Lógicos</a> contiene una asignación para los valores físicos {{cssxref("float")}} y {{cssxref("clear")}}, y también para las propiedades de posicionamiento usadas con <a href="/en-US/docs/Web/CSS/CSS_Positioning">positioned layout</a>. Esta guía nos permite saber cómo utilizar estas propiedades.</p> + +<h2 id="Asignando_propiedades_y_valores">Asignando propiedades y valores</h2> + +<p>La tabla a continuación detalla las propiedades y valores discutidos en esta guía junto con sus asignaciones físicas. Estas, asumen un modo de escritura ({{cssxref("writing-mode")}}), con una dirección de izquierda a derecha (left-to-right).</p> + +<p> </p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"> + <p>Propiedad o valor lógico</p> + </th> + <th scope="col"> + <p>Propiedad o valor lógico</p> + </th> + </tr> + </thead> + <tbody> + <tr> + <td> + <p>{{cssxref("float")}}: inline-start</p> + </td> + <td> + <p>{{cssxref("float")}}: left</p> + </td> + </tr> + <tr> + <td> + <p>{{cssxref("float")}}: inline-end</p> + </td> + <td> + <p>{{cssxref("float")}}: right</p> + </td> + </tr> + <tr> + <td> + <p>{{cssxref("clear")}}: inline-start</p> + </td> + <td> + <p>{{cssxref("clear")}}: left</p> + </td> + </tr> + <tr> + <td> + <p>{{cssxref("clear")}}: inline-end</p> + </td> + <td> + <p>{{cssxref("clear")}}: right</p> + </td> + </tr> + <tr> + <td> + <p>{{cssxref("inset-inline-start")}}</p> + </td> + <td> + <p>{{cssxref("left")}}</p> + </td> + </tr> + <tr> + <td> + <p>{{cssxref("inset-inline-end")}}</p> + </td> + <td> + <p>{{cssxref("right")}}</p> + </td> + </tr> + <tr> + <td> + <p>{{cssxref("inset-block-start")}}</p> + </td> + <td> + <p>{{cssxref("top")}}</p> + </td> + </tr> + <tr> + <td> + <p>{{cssxref("inset-block-end")}}</p> + </td> + <td> + <p>{{cssxref("bottom")}}</p> + </td> + </tr> + <tr> + <td> + <p>{{cssxref("text-align")}}: start</p> + </td> + <td> + <p>{{cssxref("text-align")}}: left</p> + </td> + </tr> + <tr> + <td> + <p>{{cssxref("text-align")}}: end</p> + </td> + <td> + <p>{{cssxref("text-align")}}: right</p> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<p>Además de estas propiedades asignadas, hay algunas propiedades abreviadas adicionales que son posibles al poder abordar las dimensiones de bloque y en línea. Estos no tienen mapeo a las propiedades físicas.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"> + <p>Propiedad lógica</p> + </th> + <th scope="col"> + <p>Propósito</p> + </th> + </tr> + </thead> + <tbody> + <tr> + <td> + <p>{{cssxref("inset-inline")}}</p> + </td> + <td> + <p>Establece los dos valores de inserción anteriores para la dimensión en línea simultáneamente.</p> + </td> + </tr> + <tr> + <td> + <p>{{cssxref("inset-block")}}</p> + </td> + <td> + <p>Establece los dos valores de inserción anteriores para la dimensión de bloque simultáneamente.</p> + </td> + </tr> + <tr> + <td> + <p>{{cssxref("inset")}}</p> + </td> + <td> + <p>Establece los cuatro valores de inserción simultáneamente.</p> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Flotante_y_ejemplo_claro">Flotante y ejemplo claro</h2> + +<p>Los valores físicos usados con las propiedades {{cssxref("float")}} y {{cssxref("clear")}} son <code>left</code>, <code>right</code> y <code>both</code>. La especificación de las Propiedades Lógicas definen los valores <code>inline-start</code> y <code>inline-end</code> como asignación para <code>left</code> y <code>right</code>.</p> + +<p>En el ejemplo de abajo tenemos dos cajas — la primera tiene una caja flotante con <code>float: left</code>, la segunda con <code>float: inline-start</code>. Si tu cambias el modo de escritura (<code>writing-mode</code>) a <code>vertical-rl</code> o la dirección (<code>direction</code>) a <code>rtl</code> verás que la caja flotando a la izquierda siempre se queda en la izquierda, mientras que el ítem <code>inline-start</code>-floated sigue la dirección (<code>direction</code>) y el modo de escritura (<code>writing-mode</code>).</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}</p> + +<h2 id="Ejemplo_Propiedades_de_inserción_para_diseño_posicionado">Ejemplo: Propiedades de inserción para diseño posicionado</h2> + +<p>El posicionamiento generalmente nos permite posicionar un elemento de una manera relativa al bloque de contención — esencialmente, insertamos el elemento en relación con el lugar donde caería en función del flujo normal. Para hacer esto, hemos usado popiedades físicas como {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} y {{cssxref("left")}}.</p> + +<p>Estas propiedades toman una longitud o un porcentaje como valor y se relacionan con las dimensiones de la pantalla del usuario.</p> + +<p>Se han creado nuevas propiedades en la especificación de Propiedades Lógicas para cuando desee que el posicionamiento se relacione con el flujo de texto en su modo de escritura. Estos son los siguientes: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}} y {{cssxref("inset-inline-end")}}.</p> + +<p>En el siguiente ejemplo hemos usado las propiedades <code>inset-block-start</code> y <code>inset-inline-end</code> para posicionar la caja azul usando un posicionamiento absoluto dentro del área con el borde punteado de color gris, que tiene <code>position: relative</code>. Podemos cambiar la propiedad de modo de escritura (<code>writing-mode</code>) a <code>vertical-rl</code>, o agregar <code>direction: rtl</code>, y ver cómo el cuadro de flujo relativo se mantiene con la dirección del texto.</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}</p> + +<h2 id="Nuevas_abreviaciones_de_dos-_y_cuatro-valores">Nuevas abreviaciones de dos- y cuatro-valores</h2> + +<p>Al igual que con otras propiedades en la especificación, tenemos algunas propiedades abreviadas nuevas, que permiten configurar dos o cuatro valores a la vez. Estos no tienen una equivalencia directa a propiedades físicas.</p> + +<ul> + <li> + <p>{{cssxref("inset")}} — pone los cuatro lados juntos.</p> + </li> + <li> + <p>{{cssxref("inset-inline")}} — pone los dos en línea juntos.</p> + </li> + <li> + <p>{{cssxref("inset-block")}} — pone los dos bloques juntos.</p> + </li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Los navegadores que han implementado la especificación de propiedades lógicas han implementado hasta ahora las asignaciones directas y no las abreviaturas nuevas. Consulte la sección de datos de compatibilidad del navegador en cada referencia de página de propiedades para obtener más detalles.</p> +</div> + +<h2 id="Ejemplo_Valores_lógicos_para_text-align">Ejemplo: Valores lógicos para text-align</h2> + +<p>La propiedad {{cssxref("text-align")}} tiene valores lógicos que se relacionan con la dirección del texto. — en lugar de usar <code>left</code> y <code>right</code> usamos <code>start</code> y <code>end</code>. En el siguiente ejemplo tenemos <code>text-align: right</code> en el primer bloque y <code>text-align: end</code> en el segundo.</p> + +<p>Si cambias el valor de la dirección (<code>direction</code>) a <code>rtl</code> verás que la alineación permanece a la derecha para el primer bloque, pero va al extremo lógico en el segundo bloque.</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}</p> + +<p>Esto funciona de una manera más consistente cuando se usa la alineación de caja que usa inicio y final en lugar de direcciones físicas para la alineación.</p> diff --git a/files/es/web/css/css_logical_properties/index.html b/files/es/web/css/css_logical_properties/index.html new file mode 100644 index 0000000000..3271fee1c4 --- /dev/null +++ b/files/es/web/css/css_logical_properties/index.html @@ -0,0 +1,172 @@ +--- +title: Propiedades y Valores Lógicos de CSS +slug: Web/CSS/CSS_Logical_Properties +tags: + - CSS + - Propiedades lógicas + - Referencia + - Valores lógicos + - Visión general +translation_of: Web/CSS/CSS_Logical_Properties +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Logical Properties</strong> (las propiedades lógicas en CSS) son un módulo de <a href="/en-US/docs/Web/CSS"><abbr title="Cascading Stylesheets">CSS</abbr></a> que introduce propiedades y valores lógicos, proporcionando la capacidad de controlar el diseño de forma lógica en vez de la asignación de dimensiones físicas de dirección y dimensión.</p> + +<p>Este módulo también define propiedades y valores lógicos para propiedades previamente definidas en <abbr title="Cascading Stylesheets">CSS</abbr> 2.1. Las propiedades lógicas definen una equivalencia a sus propiedades físicas correspondientes. </p> + +<h3 id="Dimensiones_de_bloque_y_en_línea">Dimensiones de bloque y en línea</h3> + +<p>Las propiedades y valores lógicos usan los términos abstractos de bloque (<em>block)</em> y en línea (<em>inline)</em> para describir la dirección en la que fluyen. El sentido físico de estos términos depende del <a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">modo de escritura</a>.</p> + +<dl> + <dt><a id="block-dimension" name="block-dimension">Dimensión de bloque</a></dt> + <dd>Es la dimensión perpendicular al flujo del texto en línea, es decir, la dimensión vertical en un modo de escritura horizontal, y la dimensión horizontal en un modo de escritura vertical. Para el texto estándar en inglés, es la dimensión vertical.</dd> + <dt><a name="inline-dimension">Dimensión en línea</a></dt> + <dd>Es la dimensión paralela al flujo del texto en línea, es decir, la dimensión horizontal en un modo de escritura horizontal, y la dimensión vertical en un modo de escritura vertical. Para el texto estándar en inglés, es la dimensión horizontal.</dd> +</dl> + +<h2 id="Referencia">Referencia</h2> + +<h3 id="Propiedades_para_dimensionamiento">Propiedades para dimensionamiento</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("block-size")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("inline-size")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("max-block-size")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("max-inline-size")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("min-block-size")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("min-inline-size")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<h3 id="Propiedades_para_márgenes_bordes_y_relleno">Propiedades para márgenes, bordes y relleno</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("border-block")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-color")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-end")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-start")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-style")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-block-width")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li> + <li>{{CSSxRef("border-inline")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-color")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-end")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-start")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-style")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-inline-width")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li> + <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li> + <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li> + <li>{{CSSxRef("margin-block")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("margin-block-end")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("margin-block-start")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("margin-inline")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} palabra clave)</span></li> + <li>{{CSSxRef("padding-block")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("padding-block-end")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("padding-block-start")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("padding-inline")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<h3 id="Propiedades_para_flotantes_y_posicionamiento">Propiedades para flotantes y posicionamiento</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("clear")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} palabras claves)</span></li> + <li>{{CSSxRef("float")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} palabras claves)</span></li> + <li>{{CSSxRef("inset")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("inset-block")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("inset-block-end")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("inset-block-start")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("inset-inline")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<h3 id="Otras_propiedades">Otras propiedades</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("caption-side")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} palabras claves)</span></li> + <li>{{CSSxRef("resize")}} {{Experimental_Inline}} (<code>block</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>inline</code> {{Experimental_Inline}} palabras claves)</span></li> + <li>{{CSSxRef("text-align")}} (<code>end</code> {{Experimental_Inline}} y <span style="white-space: nowrap;"><code>start</code> {{Experimental_Inline}} palabras claves)</span></li> +</ul> +</div> + +<h3 id="Propiedades_obsoletas">Propiedades obsoletas</h3> + +<div class="index"> +<ul> + <li>{{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(ahora {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(ahora {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(ahora {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})</span></li> + <li>{{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(ahora {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})</span></li> +</ul> +</div> + +<h2 id="Guías">Guías</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts">Conceptos básicos de propiedades y valores lógicos</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties/Sizing">Propiedades Lógicas para dimensionamiento</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties/Sizing">Propiedades Lógicas para márgenes, bordes y relleno</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Logical_Properties/Sizing">Propiedades Lógicas para flotantes y posicionamiento</a></li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2> + +<p>En general:</p> + +<ul> + <li>Firefox tiene soporte para las propiedades asignadas — donde hay una directa asignación desde la versión física a la versión lógica.</li> + <li>Chrome, desde la versión 69, tiene soporte para las propiedades asignadas.</li> + <li>Edge actualmente no tiene soporte.</li> + <li>Firefox 66 introduce soporte para dos valores abreviados.</li> +</ul> + +<p>Mira la página de la propiedad en específico para tener una información más completa sobre su compatibilidad.</p> diff --git a/files/es/web/css/css_logical_properties/margins_borders_padding/index.html b/files/es/web/css/css_logical_properties/margins_borders_padding/index.html new file mode 100644 index 0000000000..198bf38300 --- /dev/null +++ b/files/es/web/css/css_logical_properties/margins_borders_padding/index.html @@ -0,0 +1,298 @@ +--- +title: 'Propiedades lógicas para márgenes, bordes y rellenos' +slug: Web/CSS/CSS_Logical_Properties/Margins_borders_padding +translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding +--- +<p>{{CSSRef}}</p> + +<p class="summary">La <a href="https://drafts.csswg.org/css-logical/">especificación de Propiedades y Valores Lógicos</a> define asignaciones relativas al flujo para las diversas propiedades de margen, borde, relleno y sus abreviaturas. En esta guía echamos un vistazo a estos.</p> + +<p class="summary">Si ha visto la página principal de <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">Propiedades y Valores Lógicos de CSS</a>, verá que hay una gran cantidad de propiedades en la lista. Esto se debe principalmente al hecho de que hay cuatro valores a largo plazo para cada margen, borde y lado de relleno, más todos los valores abreviados.</p> + +<h2 id="Asignaciones_para_márgenes_bordes_y_rellenos">Asignaciones para márgenes, bordes, y rellenos</h2> + +<p>La especificación detalla la asignación para cada valor lógico con una contraparte física. En la tabla de abajo he dado estos valores asignados asumiendo que el modo de escritura ({{cssxref("writing-mode")}}) en uso es <code>horizontal-tb</code> — con una dirección de izquierda a derecha. La dirección en línea por lo tanto va horizontalmente — izquierda a derecha — y {{cssxref("margin-inline-start")}} debería ser quivalente a {{cssxref("margin-left")}}.</p> + +<p>Si usaste el modo de escritura <code>horizontal-tb</code> con una dirección del texto de derecha a izquierda, entonces {{cssxref("margin-inline-start")}} debería ser el mismo que {{cssxref("margin-right")}}, y en un modo de escritura vertical esto debería ser el mismo que usar {{cssxref("margin-top")}}.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Propiedad Lógica</th> + <th scope="col">Propiedad Física</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref("border-block-end")}}</td> + <td>{{cssxref("border-bottom")}}</td> + </tr> + <tr> + <td>{{cssxref("border-block-end-color")}}</td> + <td>{{cssxref("border-bottom-color")}}</td> + </tr> + <tr> + <td>{{cssxref("border-block-end-style")}}</td> + <td>{{cssxref("border-bottom-style")}}</td> + </tr> + <tr> + <td>{{cssxref("border-block-end-width")}}</td> + <td>{{cssxref("border-bottom-width")}}</td> + </tr> + <tr> + <td>{{cssxref("border-block-start")}}</td> + <td>{{cssxref("border-top")}}</td> + </tr> + <tr> + <td>{{cssxref("border-block-start-color")}}</td> + <td>{{cssxref("border-top-color")}}</td> + </tr> + <tr> + <td>{{cssxref("border-block-start-style")}}</td> + <td>{{cssxref("border-top-style")}}</td> + </tr> + <tr> + <td>{{cssxref("border-block-start-width")}}</td> + <td>{{cssxref("border-top-width")}}</td> + </tr> + <tr> + <td>{{cssxref("border-inline-end")}}</td> + <td>{{cssxref("border-right")}}</td> + </tr> + <tr> + <td>{{cssxref("border-inline-end-color")}}</td> + <td>{{cssxref("border-right-color")}}</td> + </tr> + <tr> + <td>{{cssxref("border-inline-end-style")}}</td> + <td>{{cssxref("border-right-style")}}</td> + </tr> + <tr> + <td>{{cssxref("border-inline-end-width")}}</td> + <td>{{cssxref("border-right-width")}}</td> + </tr> + <tr> + <td>{{cssxref("border-inline-start")}}</td> + <td>{{cssxref("border-left")}}</td> + </tr> + <tr> + <td>{{cssxref("border-inline-start-color")}}</td> + <td>{{cssxref("border-left-color")}}</td> + </tr> + <tr> + <td>{{cssxref("border-inline-start-style")}}</td> + <td>{{cssxref("border-left-style")}}</td> + </tr> + <tr> + <td>{{cssxref("border-inline-start-width")}}</td> + <td>{{cssxref("border-left-width")}}</td> + </tr> + <tr> + <td>{{cssxref("border-start-start-radius")}}</td> + <td>{{cssxref("border-top-left-radius")}}</td> + </tr> + <tr> + <td>{{cssxref("border-start-end-radius")}}</td> + <td>{{cssxref("border-bottom-left-radius")}}</td> + </tr> + <tr> + <td>{{cssxref("border-end-start-radius")}}</td> + <td>{{cssxref("border-top-right-radius")}}</td> + </tr> + <tr> + <td>{{cssxref("border-end-end-radius")}}</td> + <td>{{cssxref("border-bottom-right-radius")}}</td> + </tr> + <tr> + <td>{{cssxref("margin-block-end")}}</td> + <td>{{cssxref("margin-bottom")}}</td> + </tr> + <tr> + <td>{{cssxref("margin-block-start")}}</td> + <td>{{cssxref("margin-top")}}</td> + </tr> + <tr> + <td>{{cssxref("margin-inline-end")}}</td> + <td>{{cssxref("margin-right")}}</td> + </tr> + <tr> + <td>{{cssxref("margin-inline-start")}}</td> + <td>{{cssxref("margin-left")}}</td> + </tr> + <tr> + <td>{{cssxref("padding-block-end")}}</td> + <td>{{cssxref("padding-bottom")}}</td> + </tr> + <tr> + <td>{{cssxref("padding-block-start")}}</td> + <td>{{cssxref("padding-top")}}</td> + </tr> + <tr> + <td>{{cssxref("padding-inline-end")}}</td> + <td>{{cssxref("padding-right")}}</td> + </tr> + <tr> + <td>{{cssxref("padding-inline-start")}}</td> + <td>{{cssxref("padding-left")}}</td> + </tr> + </tbody> +</table> + +<p>Hay también algunas abreviaciones que han sido posibles porque tenemos la capacidad de apuntar ambos bloques o ambos bordes en línea de la caja simultáneamente. Estas abreviaciones no tienen equivalente físico.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Propiedad</th> + <th scope="col">Propósito</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref("border-block")}}</td> + <td>Establece {{cssxref("border-color")}}, {{cssxref("border-style")}}, y {{cssxref("border-width")}} para ambos bordes de bloque.</td> + </tr> + <tr> + <td>{{cssxref("border-block-color")}}</td> + <td>Establece <code>border-color</code> para ambos bordes de bloque.</td> + </tr> + <tr> + <td>{{cssxref("border-block-style")}}</td> + <td>Establece <code>border-style</code> para ambos bordes de bloque.</td> + </tr> + <tr> + <td>{{cssxref("border-block-width")}}</td> + <td>Establece <code>border-width</code> para ambos bordes de bloque.</td> + </tr> + <tr> + <td>{{cssxref("border-inline")}}</td> + <td>Establece <code>border-color</code>, <code>-style</code>, y <code>-width</code> para ambos bordes en línea.</td> + </tr> + <tr> + <td>{{cssxref("border-inline-color")}}</td> + <td>Establece <code>border-color</code> para ambos bordes en línea.</td> + </tr> + <tr> + <td>{{cssxref("border-inline-style")}}</td> + <td>Establece <code>border-style</code> para ambos bordes en línea.</td> + </tr> + <tr> + <td>{{cssxref("border-inline-width")}}</td> + <td>Establece <code>border-width</code> para ambos bordes en línea.</td> + </tr> + <tr> + <td>{{cssxref("margin-block")}}</td> + <td>Establece todos los {{cssxref("margin")}}s en bloque.</td> + </tr> + <tr> + <td>{{cssxref("margin-inline")}}</td> + <td>Establece todos los <code>margin</code>s en línea.</td> + </tr> + <tr> + <td>{{cssxref("padding-block")}}</td> + <td>Establece {{cssxref("padding")}} en bloque.</td> + </tr> + <tr> + <td>{{cssxref("padding-inline")}}</td> + <td>Establece el <code>padding</code> en línea.</td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplo_para_márgenes">Ejemplo para márgenes</h2> + +<p>Las propiedades asignadas para márgenes de {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}}, y {{cssxref("margin-inline-end")}} pueden ser usadas en lugar de sus contrapartes físicas.</p> + +<p>En el siguiente ejemplo, crearemos dos cajas y agregaremos diferentes tamaños de márgenes a cada borde. Hemos agregado un contenedor con un borde para poder hacer el márgen más notorio.</p> + +<p>Una caja usa propiedades físicas y la otra usa propiedades lógicas. Intenta cambiar la propiedad {{cssxref("direction")}} a <code>rtl</code> para hacer que los cuadros se muestren en dirección de derecha a izquierda, los márgenes del primer cuadro permanecerán en el mismo lugar, mientras que los márgenes en la dimensión en línea del segundo cuadro cambiarán.</p> + +<p>También puedes intentar cambiar el modo de escritura (<code>writing-mode</code>) de <code>horizontal-tb</code> a <code>vertical-rl</code>. De nuevo, notarás cómo las márgenes permanecen en el mismo lugar de la primera caja, pero cambia para seguir la dirección del texto en el segundo.</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}</p> + +<h3 id="Abreviaciones_para_márgenes">Abreviaciones para márgenes</h3> + +<p>Como ahora podemos apuntar a ambos lados de la caja — ya sea ambos lados en bloque o ambos lados en línea either — hay nuevas abreviaciones disponibles, {{cssxref("margin-inline")}} y {{cssxref("margin-block")}}, que aceptan dos valores. El primer valor se aplicará al comienzo de esta dimensión y la segunda al final. Si tú solo usas un valor, se aplica para ambos.</p> + +<p>En un modo de escritura horizontal este CSS aplicaría un margen de 5px arriba de la caja y un margen de 10px abajo.</p> + +<pre class="brush: css">.box { + margin-block: 5px 10px; +}</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Las propiedades abreviadas <code>margin-inline</code> y <code>margin-block</code> se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.</p> +</div> + +<h2 id="Ejemplos_para_rellenos_(Paddings)">Ejemplos para rellenos (Paddings)</h2> + +<p>Las propiedades asignadas para rellenos de {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}}, y {{cssxref("padding-inline-end")}} pueden ser usadas en lugar de sus contrapartes físicas.</p> + +<p>En el siguiente ejemplo tenemos dos cajas, una de ellas está usando propiedades de relleno físico y la otra propiedades de relleno lógico. Con un modo de escritura (<code>writing-mode</code>) de <code>horizontal-tb</code>, en ambas cajas aparecerán lo mismo.</p> + +<p>Intenta cambiar la propiedad <code>direction</code> a <code>rtl</code> para hacer que las cajas se muestren en dirección de derecha a izquierda, los rellenos del primer cuadro permanecerán en el mismo lugar, mientras que los rellenos en la dimensión en línea del segundo cuadro cambiarán.</p> + +<p>También puedes intentar cambiar el modo de escritura (<code>writing-mode</code>) de <code>horizontal-tb</code> a <code>vertical-rl</code>. De nuevo, notarás cómo los rellenos permanecen en el mismo lugar de la primera caja, pero cambia para seguir la dirección del texto en el segundo.</p> + +<p>{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}</p> + +<h3 id="Abreviaciones_para_rellenos_(paddings)">Abreviaciones para rellenos (paddings)</h3> + +<p>Como con las márgenes, hay dos abreviaciones para rellenos — {{cssxref("padding-inline")}} y {{cssxref("padding-block")}} — que permiten configurar el relleno a las dimenciones de bloque y en línea, respectivamente.</p> + +<p>En un modo de escritura horizontal este CSS aplicaría un relleno de 5px arriba de la caja y un relleno de 10px abajo:</p> + +<pre class="brush: css">.box { + padding-block: 5px 10px; +}</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Las abreviaciones de las propiedades <code>padding-inline</code> y <code>padding-block</code> se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.</p> +</div> + +<h2 id="Ejemplos_para_bordes">Ejemplos para bordes</h2> + +<p>Las propiedades del borde son la razón principal por la que las propiedades y valores lógicos parecen tener tantas propiedades, ya que tenemos <em>longhands</em> para el color, el ancho y el estilo del borde en cada lado de una caja, junto con las abreviaciones para establecer los tres a la vez por cada lado. Al igual que con el margen y el relleno, tenemos una versión asignada de cada propiedad física.</p> + +<p>El siguiente demo usa algunas <em>longhands </em><span style="font-size: 1rem; letter-spacing: -0.00278rem;">y tres valores de abreviaciones. Como con los otros demos, intenta cambiar la propiedad </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">direction</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> a </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">rtl</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> para que las cajas se muestren en dirección de derecha a izquierda, o cambia el modo de escritura (</span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">writing-mode</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">) de </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">horizontal-tb</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> a </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">vertical-rl</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></p> + +<p>{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}</p> + +<h3 id="Nuevas_abreviaciones_para_bordes">Nuevas abreviaciones para bordes</h3> + +<p>Hay valores abreviados de dos valores para establecer el ancho, el estilo y el color del bloque o dimensión en línea, y valores abreviados de dos valores para establecer los tres valores en la dimensión de bloque o enlínea. El siguiente código, en un modo de escritura horizontal, le dará un borde sólido verde de 2px en la parte superior e inferior del cuadro, y un borde púrpura de puntos de 4px a la izquierda y la derecha.</p> + +<pre class="brush: css">.box { + border-block: 2px solid green; + border-inline-width: 4px; + border-inline-style: dotted; + border-inline-color: rebeccapurple; +}</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Estas dos abreviaciones fueron enviadas en Firefox 66, mira el soporte en los navegadores antes de usar estas propiedades ya que puede que en otros navegadores aún no estén implementadas.</p> +</div> + +<h3 id="Flujo_de_propiedades_relativas_del_border-radius">Flujo de propiedades relativas del border-radius</h3> + +<p> </p> + +<p>La especificación ha agregado recientemente valores relativos al flujo para las longitudes {{cssxref ("border-radius")}}. Estos aún no han sido implementados por ningún navegador. El siguiente ejemplo, en un modo de escritura horizontal, establecería el radio del borde superior derecho en 1em, la parte inferior derecha a 0, la parte inferior izquierda a 20px y la parte superior izquierda a 40px.</p> + +<p> </p> + +<pre class="brush: css">.box { + border-end-start-radius: 1em; + border-end-end-radius: 0; + border-start-end-radius: 20px; + border-start-start-radius: 40px; +}</pre> + +<h2 id="Indicating_logical_values_for_the_4-value_shorthand_syntax">Indicating logical values for the 4-value shorthand syntax</h2> + +<p>La especificación hace una sugerencia para los métodos abreviados de cuatro valores, como la propiedad de <code>margin</code>, sin embargo, la decisión final sobre cómo debe indicarse esto aún no se ha resuelto, y se trata en <a href="https://github.com/w3c/csswg-drafts/issues/1282">este issue</a>.</p> + +<p>El uso de una abreviatura de cuatro valores, como el margen, el relleno o el borde, utilizará actualmente las versiones físicas, por lo que si es importante seguir el flujo del documento, use las propiedades <em>longhand</em> por el momento.</p> + +<p> </p> diff --git a/files/es/web/css/css_modelo_caja/index.html b/files/es/web/css/css_modelo_caja/index.html new file mode 100644 index 0000000000..320800f82e --- /dev/null +++ b/files/es/web/css/css_modelo_caja/index.html @@ -0,0 +1,165 @@ +--- +title: Modelo de Caja de CSS +slug: Web/CSS/CSS_Modelo_Caja +tags: + - CSS + - Modelo de Caja CSS + - Referencia CSS + - Visión general +translation_of: Web/CSS/CSS_Box_Model +--- +<div>{{CSSRef}}</div> + +<p><strong>El modelo de caja CSS </strong> es un módulo CSS que define cajas rectangulares, incluyendo sus rellenos y márgenes, que son generadas para los elementos y que se disponen de acuerdo al modelo de formato visual.</p> + +<h2 id="Referencia">Referencia</h2> + +<h3 id="Propiedades">Propiedades</h3> + +<h4 id="Propiedades_que_controlan_el_flujo_del_contenido_en_una_caja.">Propiedades que controlan el flujo del contenido en una caja.</h4> + +<div class="index"> +<ul> + <li>{{cssxref("box-decoration-break")}}</li> + <li>{{cssxref("box-sizing")}}</li> + <li>{{cssxref("overflow")}}</li> + <li>{{cssxref("overflow-x")}}</li> + <li>{{cssxref("overflow-y")}}</li> +</ul> +</div> + +<h4 id="Propiedades_que_controlan_el_tamaño_de_una_caja.">Propiedades que controlan el tamaño de una caja.</h4> + +<div class="index"> +<ul> + <li>{{cssxref("height")}}</li> + <li>{{cssxref("width")}}</li> + <li>{{cssxref("max-height")}}</li> + <li>{{cssxref("max-width")}}</li> + <li>{{cssxref("min-height")}}</li> + <li>{{cssxref("min-width")}}</li> +</ul> +</div> + +<h4 id="Propiedades_que_controlan_los_márgenes_de_una_caja.">Propiedades que controlan los márgenes de una caja.</h4> + +<div class="index"> +<ul> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-top")}}</li> +</ul> +</div> + +<h4 id="Propiedades_que_controlan_los_rellenos_de_una_caja">Propiedades que controlan los rellenos de una caja</h4> + +<div class="index"> +<ul> + <li>{{cssxref("padding")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-top")}}</li> +</ul> +</div> + +<h4 id="Otras_propiedades">Otras propiedades</h4> + +<div class="index"> +<ul> + <li>{{cssxref("box-shadow")}}</li> + <li>{{cssxref("visibility")}}</li> +</ul> +</div> + +<h2 id="Guías_y_Herramientas">Guías y Herramientas</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt> + <dd>Explica uno de los conceptos fundamentales de CSS, el modelo de caja: describe el significado del margen, del relleno, así como de las diferentes zonas de una caja.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt> + <dd>En determinados casos dos márgenes adyacentes se convierten en uno. Este artículo explica cuando sucede esto y cómo controlarlo.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a></dt> + <dd>Una herramienta interactiva que permite crear sombras y proporciona la síntaxis necesaria para generar dichas sombras usando la propiedad {{cssxref("box-shadow")}}.</dd> +</dl> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Box")}}</td> + <td>{{Spec2("CSS3 Box")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "box.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Definición Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/css_modelo_caja/introducción_al_modelo_de_caja_de_css/index.html b/files/es/web/css/css_modelo_caja/introducción_al_modelo_de_caja_de_css/index.html new file mode 100644 index 0000000000..45571faf77 --- /dev/null +++ b/files/es/web/css/css_modelo_caja/introducción_al_modelo_de_caja_de_css/index.html @@ -0,0 +1,66 @@ +--- +title: Introducción al Modelo de Caja de CSS +slug: Web/CSS/CSS_Modelo_Caja/Introducción_al_modelo_de_caja_de_CSS +tags: + - CSS + - Guía + - Modelo de Caja + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +<div>{{CSSRef}}</div> + +<p><span id="result_box" lang="es">Al diseñar un documento, el motor de representación del navegador representa cada elemento como un cuadro rectangular según el estándar</span><span lang="es"><span> <strong>modelo de caja de CSS</strong>.</span> <span>CSS determina el tamaño, la posición y las propiedades (color, fondo, tamaño del borde, etc.) de estos cuadros.</span></span></p> + +<p><span id="result_box" lang="es"><span>Cada caja se compone de cuatro partes (o áreas), definidas por sus respectivos límites: el <em>límite del contenido</em>, el <em>límite del relleno (padding)</em>, el <em>límite del borde</em> y el <em>límite del margen</em>.</span></span></p> + +<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p> + +<p><a name="content-area"></a><span id="result_box" lang="es"><span>El <strong>área de contenido</strong>, delimitada por el límite del contenido, contiene el contenido "real" del elemento, como lo puede ser texto, imagen o un reproductor de video.</span> <span>Sus dimensiones son el <em>ancho del contenido</em> (o el <em>ancho de la caja de contenido</em>) y la <em>altura del contenido</em> (o la <em>altura de la caja de contenido</em>).</span> <span>A menudo tiene un color de fondo o una imagen de fondo.</span></span></p> + +<p><span id="result_box" lang="es"><span>Si la propiedad </span></span>{{cssxref("box-sizing")}}<span lang="es"><span> está configurada en </span></span><code>content-box</code><span lang="es"><span> (default), el tamaño del área de contenido se puede definir explícitamente con las propiedades de </span></span>{{cssxref("width")}}<span lang="es"><span>, </span></span>{{cssxref("min-width")}}<span lang="es"><span>, </span></span>{{cssxref("max-width")}}<span lang="es"><span>, </span></span>{{ cssxref("height")}}<span lang="es"><span>, </span></span>{{cssxref("min-height")}}<span lang="es"><span> y </span></span>{{cssxref("max-height")}}<span lang="es"><span>.</span></span></p> + +<p><a name="padding-area"></a><span id="result_box" lang="es"><span>El <strong>área de relleno</strong> (padding), delimitada por el límite del relleno, extiende el área de contenido para incluir el relleno del elemento.</span> <span>Sus dimensiones son el <em>ancho de la caja de relleno</em> y la <em>altura de la caja de relleno</em>.</span> <span>Cuando el área de contenido tiene un fondo, se extiende dentro del relleno.</span></span></p> + +<p><span id="result_box" lang="es"><span>El espesor del relleno está determinado por </span></span><span lang="es"><span>las propiedades </span></span>{{cssxref("padding-top")}}<span lang="es"><span>, </span></span>{{cssxref("padding-right")}}<span lang="es"><span>, </span></span>{{cssxref("padding-bottom")}}<span lang="es"><span>, </span></span>{{cssxref("padding-left")}}<span lang="es"><span>, y la propiedad abreviada </span></span>{{cssxref("padding")}}<span lang="es"><span>.</span></span></p> + +<p><a name="border-area"></a><span id="result_box" lang="es"><span>El <strong>área del borde</strong>, delimitada por el límite del borde, extiende el área de relleno para incluir los bordes del elemento.</span> <span>Sus dimensiones son el <em>ancho de la caja del borde</em> y la <em>altura de la caja del borde</em>.</span></span></p> + +<p><span id="result_box" lang="es"><span>El espesor de los bordes está determinado por las propiedades {{cssxref("border-width")}} y la propiedad abreviada {{cssxref("border")}}.</span> <span>Si la propiedad {{cssxref("box-sizing")}} se establece en </span></span><code>border-box</code><span lang="es"><span>, el tamaño del área del borde se puede definir explícitamente con las propiedades {{cssxref("width")}}, {{cssxref("min-</span> <span>width")}}, {{cssxref("max-width")}}, {{cssxref("height")}}, {{cssxref("min-height")}}, y {{cssxref("max</span><span>-height")}}.</span></span></p> + +<p><a name="margin-area"></a><span id="result_box" lang="es"><span>El <strong>área del margen</strong>, 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.</span> <span>Sus dimensiones son el <em>ancho de la caja del margen</em> y la <em>altura de la caja del margen</em>.</span></span></p> + +<p><span id="result_box" lang="es"><span>El tamaño del área del margen está determinado por las propiedades </span></span>{{cssxref("margin-top")}}<span lang="es"><span>, {{cssxref("margin-right")}}, {{cssxref ("margin-bottom")}}, {</span> <span>{cssxref("margin-left")}}, y la propiedad abreviada {{cssxref ("margin")}}.</span> <span>Cuando se produce el</span></span> <a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">colapso del margen</a><span lang="es"><span>, el área del margen no está claramente definida ya que los márgenes se comparten entre las cajas.</span></span></p> + +<p><span id="result_box" lang="es"><span>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</span> <span>el relleno todavía se muestran alrededor del contenido.</span></span></p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td><span id="result_box" lang="es"><span>Aunque está redactado con más precisión, no hay cambio práctico.</span></span></td> + </tr> + <tr> + <td>{{ SpecName("CSS1","#formatting-model")}}</td> + <td>{{ Spec2('CSS1') }}</td> + <td><span class="short_text" id="result_box" lang="es"><span>Definición inicial</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{css_key_concepts}}</li> + <li>Propiedades CSS relacionadas: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li> +</ul> diff --git a/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html b/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..dafdf71855 --- /dev/null +++ b/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html @@ -0,0 +1,96 @@ +--- +title: Entendiendo el colapso de margen +slug: Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing +tags: + - CSS + - CSS Box Model + - Guía + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +<div>{{CSSRef}}</div> + +<p>Los márgenes <a href="/es/docs/Web/CSS/margin-top">Top</a> y <a href="/es/docs/Web/CSS/margin-bottom">bottom</a> de los bloques a veces están combinados (colapsados) en un solo margen cuyo tamaño es el mayor de los márgenes combinados, un comportamiento conocido como <strong>colapso de margen</strong>. Ten en cuenta que los márgenes de <a href="/es/docs/Web/CSS/float">flotantes</a> y elementos con <a href="/es/docs/Web/CSS/position"> posición absoluta</a> nunca colapsan.</p><p></p> + +<p>El colapso de margen ocurre en tres casos básicos:</p> + +<dl> + <dt>Hermanos adjacentes</dt> + <dd>Los márgenes de los hermanos adjacentes son colapsados (excepto cuando el último hermano necesita ser <a href="/es/docs/Web/CSS/clear">limpiado</a> después de usar los flotantes).</dd> + <dt>Padre y primer/último hijo</dt> + <dd>Si no hay un borde, padding, contenido en línea, <a href="/es/docs/Web/Guide/CSS/Block_formatting_context">block formatting context</a> creado, o un <em><a href="/es/docs/Web/CSS/clear">limpiado</a></em> para separar el {{cssxref("margin-top")}} de un bloque del {{cssxref("margin-top")}} de su primer bloque hijo; o no hay borde, padding, contenido en línea, {{cssxref("height")}}, {{cssxref("min-height")}}, o {{cssxref("max-height")}} para separar el {{cssxref("margin-bottom")}} de un bloque del {{cssxref("margin-bottom")}} de su último hijo, entonces esos márgenes colapsan. El margen colapsado termina fuera del padre.</dd> + <dt>Bloques vacíos</dt> + <dd>Si no hay borde, padding, contenido en línea, {{cssxref("height")}}, o {{cssxref("min-height")}} para separar el {{cssxref("margin-top")}} de un bloque de su {{cssxref("margin-bottom")}}, entonces sus márgenes superiores e inferiores colapsan.</dd> +</dl> + <p>Cosas a tener en cuenta:</p> + + +<ul> + <li>Cuando estos casos están combinados ocurrirá un colapso de márgenes más complejo (de más de dos márgenes).</li> + <li>Estas reglas se aplican incluso a márgenes con valor cero, así que el margen del primer/último hijo siempre termina fuera de su padre (de acuerdo a las reglas de arriba) independientemente de que el margen del padre sea o no sea cero.</li> + <li>Cuando se trata de márgenes negativos, el tamaño del margen colapsado es la suma del margen positivo más grande y el margen negativo más pequeño (el más negativo).</li> + <li>Cuando todos los márgenes son negativos, el tamaño del margen colapsado es el margen más pequeño (el más negativo). Esto se aplica tanto a los elementos adyacentes como a los elementos anidados.</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>El margen inferior de este párrafo está colapsado ....</p> +<p>... con el margen superior de este párrafo, lo que deja un margen de<code>1.2rem</code> entre ellos.</p> + +<div>Este elemento padre contiene dos párrafos! + <p>Este párrafo tiene un margen de <code>.4rem</code> entre él y el texto anterior.</p> + <p>Mi margen inferior se colapsa con mi padre, produciendo un margen inferior de <code>2rem</code>.</p> +</div> + +<p>Estoy <code>2rem</code> por debajo del elemento de arriba.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + margin: 2rem 0; + background: lavender; +} + +p { + margin: .4rem 0 1.2rem 0; + background: yellow; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Ejemplos', 'auto', 350)}}</p> + + + +<p> </p> + + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="También_puedes_ver">También puedes ver</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/Referencia_CSS">CSS Reference</a></li> +</ul> +<ul> + <li>{{css_key_concepts}}</li> +</ul> diff --git a/files/es/web/css/css_motion_path/index.html b/files/es/web/css/css_motion_path/index.html new file mode 100644 index 0000000000..4d439b2126 --- /dev/null +++ b/files/es/web/css/css_motion_path/index.html @@ -0,0 +1,78 @@ +--- +title: CSS Motion Path +slug: Web/CSS/CSS_Motion_Path +translation_of: Web/CSS/CSS_Motion_Path +--- +<div>{{CSSRef}}{{seecompattable}}</div> + +<p><strong>Motion Path</strong> es un módulo CSS que permite animar cualquier objeto gráfico a lo largo de una ruta personalizada.</p> + +<p>La idea es que cuando se deseaba animar un elemento que se movía a lo largo de un “path”, anteriormente solo teniamos las propiedades de animación, posición, etc. a nuestra disposición, lo que no era ideal y solo permitía movimientos simples. Con {{cssxref("offset-path")}} puedes definir un "path" específico de cualquier forma que se quiera. Luego se animará a lo largo de ese "path" animando {{cssxref("offset-distance")}}, y variar la rotación en algún punto usando {{cssxref("offset-rotate")}}.</p> + +<h2 id="Ejemplo_básico">Ejemplo básico</h2> + +<pre class="brush: html"><div id="motion-demo"></div> +</pre> + +<pre class="brush: css">#motion-demo { + offset-path: path('M20,20 C20,100 200,0 200,100'); + animation: move 3000ms infinite alternate ease-in-out; + width: 40px; + height: 40px; + background: cyan; +} + +@keyframes move { + 0% { + offset-distance: 0%; + } + 100% { + offset-distance: 100%; + } +}</pre> + +<p>{{EmbedLiveSample('Basic_example', '100%', 150)}}</p> + +<h2 id="Referéncia">Referéncia</h2> + +<h3 id="Propiedades">Propiedades</h3> + +<div class="index"> +<ul> + <li>{{cssxref("offset")}}</li> + <li>{{cssxref("offset-anchor")}}</li> + <li>{{cssxref("offset-distance")}}</li> + <li>{{cssxref("offset-path")}}</li> + <li>{{cssxref("offset-position")}}</li> + <li>{{cssxref("offset-rotate")}}</li> +</ul> +</div> + +<h2 id="Espedificaciones">Espedificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Motion Path Level 1')}}</td> + <td>{{Spec2('Motion Path Level 1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_Browsers">Compatibilidad de Browsers</h2> + +<h3 id="offset_property"><code>offset</code> property</h3> + +<div> + + +<p>{{Compat("css.properties.offset-path")}}</p> +</div> diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html new file mode 100644 index 0000000000..0278b3254f --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html @@ -0,0 +1,179 @@ +--- +title: Agregando z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +<p>« <a href="/es/CSS" title="CSS">CSS</a> « <a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index" title="Understanding CSS z-index">ENTENDIENDO LA PROPIEDAD CSS Z-INDEX</a></p> + +<h3 id="Agregando_cssxref(z-index)">Agregando {{ cssxref("z-index") }}</h3> + +<p>El primer ejemplo, <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title=" javichito Apilando sin z-index">Apilando sin z-index</a>, 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.</p> + +<p>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.</p> + +<div class="warning"> +<p><strong>Precaución:</strong> z-index solo tiene efecto si un elemento es <a href="/es/CSS/position" title="position">posicionado</a>.</p> +</div> + +<ul> + <li><em>bottom: el más lejano al observador</em></li> + <li>...</li> + <li>Capa -3</li> + <li>Capa -2</li> + <li>Capa -1</li> + <li>Capa 0<em>capa de renderizado por defecto</em></li> + <li>Capa 1</li> + <li>Capa 2</li> + <li>Capa 3</li> + <li>...</li> + <li><em>top: el más cercano al observador</em></li> +</ul> + +<div class="note"> +<p><strong>Notas:</strong></p> + +<ul> + <li>Cuando la propiedad z-index no ha sido especificada, los elementos son renderizados en la capa de renderizado por defecto 0 (cero).</li> + <li>Si varios elementos comparten el mismo valor z-index (<em>i.e.</em> están situados en la misma capa), las reglas de apilamiento explicadas en la sección <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title=" javichito Apilando sin z-index">Apilando sin z-index</a> son aplicadas.</li> +</ul> +</div> + +<p>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.</p> + +<p>{{ EmbedLiveSample('Example_source_code', '468', '365', '', 'Web/Guide/CSS/Understanding_z_index/Adding_z-index') }}</p> + +<h3 id="Código_fuente_de_ejemplo"><strong>Código fuente de ejemplo</strong></h3> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8"> + <title>Adding z-index</title> + <style type="text/css"> + + div { + opacity: 0.7; + font: 12px Arial; + } + + span.bold { font-weight: bold; } + + #normdiv { + z-index: 8; + height: 70px; + border: 1px dashed #999966; + background-color: #ffffcc; + margin: 0px 50px 0px 50px; + text-align: center; + } + + #reldiv1 { + z-index: 3; + height: 100px; + position: relative; + top: 30px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; + } + + #reldiv2 { + z-index: 2; + height: 100px; + position: relative; + top: 15px; + left: 20px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; + } + + #absdiv1 { + z-index: 5; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + left: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; + } + + #absdiv2 { + z-index: 1; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + right: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; + } + + </style> +</head> + +<body> + + <br /><br /> + + <div id="absdiv1"> + <br /><span class="bold">DIV #1</span> + <br />position: absolute; + <br />z-index: 5; + </div> + + <div id="reldiv1"> + <br /><span class="bold">DIV #2</span> + <br />position: relative; + <br />z-index: 3; + </div> + + <div id="reldiv2"> + <br /><span class="bold">DIV #3</span> + <br />position: relative; + <br />z-index: 2; + </div> + + <div id="absdiv2"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; + <br />z-index: 1; + </div> + + <div id="normdiv"> + <br /><span class="bold">DIV #5</span> + <br />no positioning + <br />z-index: 8; + </div> + +</body> +</html> +</pre> + +<h3 id="También_puedes_ver">También puedes ver</h3> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title=" javichito Apilando sin z-index">Apilando sin z-index</a> : Reglas de apilamiento por defecto</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float" title="Apilamiento y float">Apilamiento y float</a> : Cómo son manejados los elementos flotantes</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento" title="El contexto de apilamiento">El contexto de apilamiento</a> : Notas sobre el contexto de apilamiento</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento" title="Ejemplo 1 del contexto de apilamiento">Ejemplo 1 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en el último nivel</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento" title="Ejemplo 2 del contexto de apilamiento">Ejemplo 2 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en todos los niveles</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel</li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3> + +<ul> + <li>Autor(es): Paolo Lombardi</li> + <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: November 3rd, 2014</li> +</ul> +</div> + +<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}</p> diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html new file mode 100644 index 0000000000..81b145e1a3 --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html @@ -0,0 +1,144 @@ +--- +title: Apilamiento y float +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float +tags: + - Avanzado + - CSS + - Entendiendo_CSS_z-index + - Guía + - Referencia + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +<div>{{cssref}}</div> + +<h3 id="Apilamiento_y_float">Apilamiento y float</h3> + +<p>Para los bloques flotantes el orden de apilamiento es un poco diferente. Los bloques flotantes son colocados entre bloques no posicionados y bloques posicionados:</p> + +<ol> + <li>Fondo y bordes del elemento raiz</li> + <li>Bloques descendientes en el flujo normal, en orden de aparición (en HTML)</li> + <li>Bloques flotantes</li> + <li>Elementos posicionados descendentemente , en orden de aparición (en HTML)</li> +</ol> + +<p>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.</p> + +<p>Este comportamiento puede ser explicado con una versión mejorada de la lista previa:</p> + +<ol> + <li>Fondo y bordes del elemento raiz</li> + <li>Bloques descendientes en el flujo normal, en orden de aparición (en HTML)</li> + <li>Bloques flotantes</li> + <li>Descendientes en línea en el flujo normal</li> + <li>Elementos posicionados descendentemente , en orden de aparición (en HTML)</li> +</ol> + +<div class="note"><strong>Nota:</strong> 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.)</div> + +<p>{{ EmbedLiveSample('Example_source_code', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }}</p> + +<h2 id="Código_fuente_de_ejemplo"><strong>Código fuente de ejemplo</strong></h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="abs1"> + <b>DIV #1</b><br />position: absolute;</div> + +<div id="flo1"> + <b>DIV #2</b><br />float: left;</div> + +<div id="flo2"> + <b>DIV #3</b><br />float: right;</div> + +<br /> + +<div id="sta1"> + <b>DIV #4</b><br />no positioning</div> + +<div id="abs2"> + <b>DIV #5</b><br />position: absolute;</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + padding: 10px; + text-align: center; +} + +b { + font-family: sans-serif; +} + +#abs1 { + position: absolute; + width: 150px; + height: 200px; + top: 10px; + right: 140px; + border: 1px dashed #900; + background-color: #fdd; +} + +#sta1 { + height: 100px; + border: 1px dashed #996; + background-color: #ffc; + margin: 0px 10px 0px 10px; + text-align: left; +} + +#flo1 { + margin: 0px 10px 0px 20px; + float: left; + width: 150px; + height: 200px; + border: 1px dashed #090; + background-color: #cfc; +} + +#flo2 { + margin: 0px 20px 0px 10px; + float: right; + width: 150px; + height: 200px; + border: 1px dashed #090; + background-color: #cfc; +} + +#abs2 { + position: absolute; + width: 150px; + height: 100px; + top: 130px; + left: 100px; + border: 1px dashed #990; + background-color: #fdd; +}</pre> + +<h3 id="También_puedes_ver">También puedes ver</h3> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title=" javichito Apilando sin z-index">Apilando sin z-index</a> : Reglas de apilamiento por defecto</li> + <li> + <p><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</p> + </li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento" title="El contexto de apilamiento">El contexto de apilamiento</a> : Notas sobre el contexto de apilamiento</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento" title="Ejemplo 1 del contexto de apilamiento">Ejemplo 1 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en el último nivel</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento" title="Ejemplo 2 del contexto de apilamiento">Ejemplo 2 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en todos los niveles</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel</li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3> + +<ul> + <li>Autor(es): Paolo Lombardi</li> + <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: November 3rd, 2014</li> +</ul> +</div> + +<p> </p> diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html new file mode 100644 index 0000000000..def9c5ea8e --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html @@ -0,0 +1,132 @@ +--- +title: Ejemplo 1 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +<p>« <a href="/es/CSS" title="CSS">CSS</a> « <a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index" title="Understanding CSS z-index">ENTENDIENDO LA PROPIEDAD CSS Z-INDEX</a></p> + +<h3 id="Ejemplo_1_del_contexto_de_apilamiento">Ejemplo 1 del contexto de apilamiento</h3> + +<p>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.</p> + +<p>El único contexto de apilamiento es el contexto raíz. Sin la propiedad z-index, los elementos son apilados por orden de ocurrencia.</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p> + +<p>Si a DIV #2 le asignamos un valor z-index positivo (no-cero y no-auto), es renderizado encima de todos los otros DIVs.</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p> + +<p>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.</p> + +<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p> + +<p>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.</p> + +<p>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:</p> + +<ul> + <li>contexto de apilamiento raíz + <ul> + <li>DIV #2 (z-index 1)</li> + <li>DIV #4 (z-index 2)</li> + </ul> + </li> +</ul> + +<div class="note"><strong>Nota:</strong> 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> + +<h2 id="Ejemplo"><strong>Ejemplo</strong></h2> + +<h3 id="HTML"><strong>HTML</strong></h3> + +<pre class="brush: html"><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> + +<br /> + +<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> + +</body></html> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.bold { + font-weight: bold; + font: 12px Arial; +} +#div1, +#div3 { + height: 80px; + position: relative; + border: 1px dashed #669966; + background-color: #ccffcc; + padding-left: 5px; +} +#div2 { + opacity: 0.8; + z-index: 1; + position: absolute; + width: 150px; + height: 200px; + top: 20px; + left: 170px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} +#div4 { + opacity: 0.8; + z-index: 2; + position: absolute; + width: 200px; + height: 70px; + top: 65px; + left: 50px; + border: 1px dashed #000099; + background-color: #ddddff; + text-align: left; + padding-left: 10px; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}</p> + +<h3 id="También_puedes_ver">También puedes ver</h3> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title=" javichito Apilando sin z-index">Apilando sin z-index</a> : Reglas de apilamiento por defecto</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float" title="Apilamiento y float">Apilamiento y float</a> : Cómo son manejados los elementos flotantes</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento" title="El contexto de apilamiento">El contexto de apilamiento</a> : Notas sobre el contexto de apilamiento</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento" title="Ejemplo 2 del contexto de apilamiento">Ejemplo 2 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en todos los niveles</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel<span id="cke_bm_89E" style="display: none;"> </span></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3> + +<ul> + <li>Autor(es): Paolo Lombardi</li> + <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> +</ul> +</div> diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html new file mode 100644 index 0000000000..2955b43b7f --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html @@ -0,0 +1,137 @@ +--- +title: Ejemplo 2 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +<p>« <a href="/es/CSS" title="CSS">CSS</a> « <a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index" title="Understanding CSS z-index">ENTENDIENDO LA PROPIEDAD CSS Z-INDEX</a></p> + +<h3 id="Ejemplo_2_del_contexto_de_apilamiento">Ejemplo 2 del contexto de apilamiento</h3> + +<p>Este es un ejemplo muy simple, pero es la clave para entender el concepto de <em>contexto de apilamiento. </em>Tenemos los mismos 4 DIVs del ejemplo previo, pero ahora las propiedades z-index son asignadas en ambos niveles de la jerarquía.</p> + +<p>{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}</p> + +<p>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.</p> + +<p>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.</p> + +<p>Para entender mejor esta situación, esta es la jerarquía del contexto de apilamiento:</p> + +<ul> + <li>contexto de apilamiento raíz + <ul> + <li>DIV #2 (z-index 2)</li> + <li>DIV #3 (z-index 1) + <ul> + <li>DIV #4 (z-index 10)</li> + </ul> + </li> + </ul> + </li> +</ul> + +<div class="note"><strong>Nota:</strong> 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> + +<h3 id="Código_fuente_de_ejemplo"><strong>Código fuente de ejemplo</strong></h3> + +<pre class="brush: html"><!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"> + +div { font: 12px Arial; } + +span.bold { font-weight: bold; } + +#div2 { z-index: 2; } +#div3 { z-index: 1; } +#div4 { z-index: 10; } + +#div1,#div3 { + height: 80px; + position: relative; + border: 1px dashed #669966; + background-color: #ccffcc; + padding-left: 5px; +} + +#div2 { + opacity: 0.8; + position: absolute; + width: 150px; + height: 200px; + top: 20px; + left: 170px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; +} + +#div4 { + opacity: 0.8; + position: absolute; + width: 200px; + height: 70px; + top: 65px; + left: 50px; + border: 1px dashed #000099; + background-color: #ddddff; + text-align: left; + padding-left: 10px; +} + + +</style></head> + +<body> + + <br /> + + <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: 2; + </div> + </div> + + <br /> + + <div id="div3"><br /> + <span class="bold">DIV #3</span><br /> + position: relative;<br /> + z-index: 1; + <div id="div4"><br /> + <span class="bold">DIV #4</span><br /> + position: absolute;<br /> + z-index: 10; + </div> + </div> + +</body> +</html> +</pre> + +<h3 id="También_puedes_ver">También puedes ver</h3> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title=" javichito Apilando sin z-index">Apilando sin z-index</a> : Reglas de apilamiento por defecto</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float" title="Apilamiento y float">Apilamiento y float</a> : Cómo son manejados los elementos flotantes</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento" title="El contexto de apilamiento">El contexto de apilamiento</a> : Notas sobre el contexto de apilamiento</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento" title="Ejemplo 1 del contexto de apilamiento">Ejemplo 1 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en el último nivel</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel</li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3> + +<ul> + <li>Autor(es): Paolo Lombardi</li> + <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> +</ul> +</div> diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html new file mode 100644 index 0000000000..c41d8b56ad --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html @@ -0,0 +1,183 @@ +--- +title: Ejemplo 3 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> + +<h3 id="Ejemplo_3_del_contexto_de_apilamiento">Ejemplo 3 del contexto de apilamiento</h3> + +<p>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.</p> + +<p>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.</p> + +<p>Si los tres niveles del menú se superponen parcialmente, entonces gestionar el apilamiento se podría convertir en un problema.</p> + +<p>{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }}</p> + +<p>El menú de primer nivel solo tiene posición relativa, así que ningún contexto de apilamiento es creado.</p> + +<p>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.</p> + +<p>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.</p> + +<p>Para entender mejor la situación, esta es la jerarquía del contexto de apilamiento:</p> + +<ul> + <li>contexto de apilamiento raíz + <ul> + <li>NIVEL #1 + <ul> + <li>NIVEL #2 (z-index: 1) + <ul> + <li>NIVEL #3</li> + <li>...</li> + <li>NIVEL #3</li> + </ul> + </li> + <li>NIVEL #2 (z-index: 1)</li> + <li>...</li> + <li>NIVEL #2 (z-index: 1)</li> + </ul> + </li> + <li>NIVEL #1</li> + <li>...</li> + <li>NIVEL #1</li> + </ul> + </li> +</ul> + +<p>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.</p> + +<div class="note"><strong>Nota:</strong> 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.</div> + +<h3 id="Código_fuente_de_ejemplo"><strong>Código fuente de ejemplo</strong></h3> + +<pre class="brush: html"><!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"> + +div { font: 12px Arial; } + +span.bold { font-weight: bold; } + +div.lev1 { + width: 250px; + height: 70px; + position: relative; + border: 2px outset #669966; + background-color: #ccffcc; + padding-left: 5px; +} + +#container1 { + z-index: 1; + position: absolute; + top: 30px; + left: 75px; +} + +div.lev2 { + opacity: 0.9; + width: 200px; + height: 60px; + position: relative; + border: 2px outset #990000; + background-color: #ffdddd; + padding-left: 5px; +} + +#container2 { + z-index: 1; + position: absolute; + top: 20px; + left: 110px; +} + +div.lev3 { + z-index: 10; + width: 100px; + position: relative; + border: 2px outset #000099; + background-color: #ddddff; + padding-left: 5px; +} + +</style></head> + +<body> + +<br /> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> + + <div id="container1"> + + <div class="lev2"> + <br /><span class="bold">LEVEL #2</span> + <br />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> + + </div> + + </div> + + <div class="lev2"> + <br /><span class="bold">LEVEL #2</span> + <br />z-index: 1; + </div> + + </div> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +<div class="lev1"> +<span class="bold">LEVEL #1</span> +</div> + +</body></html> +</pre> + +<h3 id="También_puedes_ver">También puedes ver</h3> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title=" javichito Apilando sin z-index">Apilando sin z-index</a> : Reglas de apilamiento por defecto</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float" title="Apilamiento y float">Apilamiento y float</a> : Cómo son manejados los elementos flotantes</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento" title="El contexto de apilamiento">El contexto de apilamiento</a> : Notas sobre el contexto de apilamiento</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento" title="Ejemplo 1 del contexto de apilamiento">Ejemplo 1 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en el último nivel</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento" title="Ejemplo 2 del contexto de apilamiento">Ejemplo 2 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en todos los niveles</li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3> + +<ul> + <li>Autor(es): Paolo Lombardi</li> + <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> +</ul> +</div> diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html new file mode 100644 index 0000000000..1daf172048 --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html @@ -0,0 +1,231 @@ +--- +title: El contexto de apilamiento +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +<p>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.</p> + +<p>« <a href="/es/CSS" title="CSS">CSS</a> « <a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index" title="Understanding CSS z-index">ENTENDIENDO LA PROPIEDAD CSS Z-INDEX</a></p> + +<h2 id="El_contexto_de_apilamiento">El contexto de apilamiento</h2> + +<p> </p> + +<p>En el ejemplo previo, <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a>, 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.</p> + +<p>Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemento que</p> + +<ul> + <li>sea el elemento raiz (HTML),</li> + <li>tenga posición (absoluta o relativa) con un valor z-index distinto de "auto",</li> + <li>un elemento flex con un valor z-index distinto de "auto", que sea el elemento padre display: flex|inline-flex,</li> + <li>sean elementos con un valor {{cssxref("opacity")}} menor de 1. (Mira <a href="http://www.w3.org/TR/css3-color/#transparency" title="http://www.w3.org/TR/css3-color/#transparency">la especificación de opacity</a>),</li> + <li>elementos con un valor {{cssxref("transform")}} distinto de "none",</li> + <li>elementos con un valor {{cssxref("mix-blend-mode")}} distinto de "normal",</li> + <li>elementos con un valor {{cssxref("filter")}} distinto de "none",</li> + <li>elementos con un valor {{cssxref("perspective")}} distinto de "none",</li> + <li>elementos con un valor {{cssxref("isolation")}} igual a "isolate",</li> + <li><code>position: fixed</code></li> + <li>especifican cualquier atributo superior en <code>{{cssxref("will-change")}} incluso si no especificas valores para estos atributos directamente </code>(Mira <a href="http://dev.opera.com/articles/css-will-change-property/">este post</a>)</li> + <li>elementos con un valor {{cssxref("-webkit-overflow-scrolling")}} igual a "touch"</li> +</ul> + +<p>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.</p> + +<p>En resumen:</p> + +<ul> + <li>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)</li> + <li>Contextos de apilamiento pueden ser contenidos en otros contextos de apilamiento, y juntos crean una jerarquía de contextos de apilamiento</li> + <li>Cada contexto de apilamiento es completamente independiente de sus hermanos: solo los elementos descendientes son considerados cuando el apilamiento es procesado.</li> + <li>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.</li> +</ul> + +<div class="note"><strong>Nota:</strong> 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.</div> + +<h2 id="El_ejemplo"><strong>El ejemplo</strong></h2> + +<p><img alt="Example of stacking rules modified using z-index" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p> + +<p>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:</p> + +<ul> + <li>Raíz + <ul> + <li>DIV #1</li> + <li>DIV #2</li> + <li>DIV #3 + <ul> + <li>DIV #4</li> + <li>DIV #5</li> + <li>DIV #6</li> + </ul> + </li> + </ul> + </li> +</ul> + +<p>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.</p> + +<div class="note"> +<p><strong>Notas:</strong></p> + +<ul> + <li>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.</li> + <li>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.</li> + <li>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.</li> + <li>Una forma fácil de descubrir el <em>orden de renderizado</em> 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): + <ul> + <li>Raíz + <ul> + <li>El valor z-index de DIV #2 es 2</li> + <li>El valor z-index de DIV #3 es 4 + <ul> + <li>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</li> + <li>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</li> + <li>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</li> + </ul> + </li> + <li>El valor z-index de DIV #1 es 5</li> + </ul> + </li> + </ul> + </li> +</ul> +</div> + +<h2 id="Ejemplo"><strong>Ejemplo</strong></h2> + +<h3 id="HTML"><strong>HTML</strong></h3> + +<pre class="brush: 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> +</pre> + +<h3 id="Division_Element_.231" name="Division_Element_.231">CSS</h3> + +<pre class="brush: css">* { + margin: 0; +} +html { + padding: 20px; + font: 12px/20px Arial, sans-serif; +} +div { + opacity: 0.7; + position: relative; +} +h1 { + font: inherit; + font-weight: bold; +} +#div1, +#div2 { + border: 1px dashed #696; + padding: 10px; + background-color: #cfc; +} +#div1 { + z-index: 5; + margin-bottom: 190px; +} +#div2 { + z-index: 2; +} +#div3 { + z-index: 4; + opacity: 1; + position: absolute; + top: 40px; + left: 180px; + width: 330px; + border: 1px dashed #900; + background-color: #fdd; + padding: 40px 20px 20px; +} +#div4, +#div5 { + border: 1px dashed #996; + background-color: #ffc; +} +#div4 { + z-index: 6; + margin-bottom: 15px; + padding: 25px 10px 5px; +} +#div5 { + z-index: 1; + margin-top: 15px; + padding: 5px 10px; +} +#div6 { + z-index: 3; + position: absolute; + top: 20px; + left: 180px; + width: 150px; + height: 125px; + border: 1px dashed #009; + padding-top: 125px; + background-color: #ddf; + text-align: center; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Example', '556', '396') }}</p> + +<h3 id="También_puedes_ver">También puedes ver</h3> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title=" javichito Apilando sin z-index">Apilando sin z-index</a> : Reglas de apilamiento por defecto</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float" title="Apilamiento y float">Apilamiento y float</a> : Cómo son manejados los elementos flotantes</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento" title="Ejemplo 1 del contexto de apilamiento">Ejemplo 1 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en el último nivel</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento" title="Ejemplo 2 del contexto de apilamiento">Ejemplo 2 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en todos los niveles</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel</li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3> + +<ul> + <li>Autor(es): Paolo Lombardi</li> + <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: July 9th, 2005</li> +</ul> +</div> diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/index.html new file mode 100644 index 0000000000..14971890e0 --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/index.html @@ -0,0 +1,47 @@ +--- +title: Entendiendo la propiedad CSS z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index +tags: + - Avanzado + - CSS + - Entendiendo_CSS_Z_Index + - Guía + - Referencia + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +<p>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 <span class="seoSummary">{{cssxref("z-index")}}</span> te permite ajustar el orden de las capas de los objetos cuando el contenido está siendo renderizado.</p> + +<blockquote> +<p style="">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.</p> +</blockquote> + +<p>(de <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p> + +<p>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") }}.</p> + +<p>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 <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> para explicar mejor estas reglas.</p> + +<p>Este artículo va a intentar explicar esas reglas, de una forma más simple y con varios ejemplos.</p> + +<ol> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index" title=" javichito Apilando sin z-index">Apilando sin z-index</a> : Reglas de apilamiento por defecto</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float" title="Apilamiento y float">Apilamiento y float</a> : Cómo son manejados los elementos flotantes</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento" title="El contexto de apilamiento">El contexto de apilamiento</a> : Notas sobre el contexto de apilamiento</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento" title="Ejemplo 1 del contexto de apilamiento">Ejemplo 1 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en el último nivel</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento" title="Ejemplo 2 del contexto de apilamiento">Ejemplo 2 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en todos los niveles</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel</li> +</ol> + +<p><small><em>Nota del autor: Gracias a Wladimir Palant y Rod Whiteley por la revisión.</em></small></p> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3> + +<ul> + <li>Autor(es): Paolo Lombardi</li> + <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a class="external" href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Fecha de última actualización: 9 de Julio del 2005</li> +</ul> +</div> diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..97038e7bae --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html @@ -0,0 +1,141 @@ +--- +title: Apilando sin z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +<p>« <a href="/es/CSS" title="CSS">CSS</a> « <a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index" title="Understanding CSS z-index">ENTENDIENDO LA PROPIEDAD CSS Z-INDEX</a></p> + +<h3 id="Apilando_sin_z-index">Apilando sin z-index</h3> + +<p>Cuando ningún elemento tiene z-index, los elementos son apilados en este orden (de abajo hacia arriba):</p> + +<ol> + <li>El fondo y los bordes del elemento raiz</li> + <li>Bloques descendientes en el flujo normal, en orden de aparición (en HTML)</li> + <li>Elementos posicionados descendentemente, en orden de aparición (en HTML)</li> +</ol> + +<p>En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son apropiadamente dimensionados y posicionados para ilustrar las reglas de apilamiento.</p> + +<div class="note"> +<p><strong>Notas:</strong></p> + +<ul> + <li>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.</li> + <li> + <p>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.</p> + </li> +</ul> +</div> + +<p><img alt="understanding_zindex_01.png" class="default internal" src="/@api/deki/files/910/=understanding_zindex_01.png"></p> + +<p> </p> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css"> .bold { + font-weight: bold; + font: 12px Arial; + } + #normdiv { + height: 70px; + border: 1px dashed #999966; + background-color: #ffffcc; + margin: 0px 50px 0px 50px; + text-align: center; + } + #reldiv1 { + opacity: 0.7; + height: 100px; + position: relative; + top: 30px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; + } + #reldiv2 { + opacity: 0.7; + height: 100px; + position: relative; + top: 15px; + left: 20px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; + } + #absdiv1 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + left: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; + } + #absdiv2 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + right: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; + } +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>(Si la imagen no aparece en CodePen, haz clic en el botón Tidy en la sección CSS)</p> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index') }}</p> + +<h3 id="También_puedes_ver">También puedes ver</h3> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float" title="Apilamiento y float">Apilamiento y float</a> : Cómo son manejados los elementos flotantes</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index" title="Agregando z-index">Agregando z-index</a> : Usando z-index para cambiar el apilamiento por defecto</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento" title="El contexto de apilamiento">El contexto de apilamiento</a> : Notas sobre el contexto de apilamiento</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento" title="Ejemplo 1 del contexto de apilamiento">Ejemplo 1 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en el último nivel</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento" title="Ejemplo 2 del contexto de apilamiento">Ejemplo 2 del contexto de apilamiento</a> : Jerarquía HTML de 2 niveles, z-index en todos los niveles</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento" title="Ejemplo 3 del contexto de apilamiento">Ejemplo 3 del contexto de apilamiento</a> : Jerarquía HTML de 3 niveles, z-index en el segundo nivel</li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h3> + +<ul> + <li>Autor(es): Paolo Lombardi</li> + <li>Este artículo es una traducción al inglés de un artículo que escribí en italiano para <a href="http://www.yappy.it">YappY</a>. He dado el derecho de compartir el contenido bajo <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: November 3rd, 2014</li> +</ul> +</div> + +<p> </p> diff --git a/files/es/web/css/css_positioning/index.html b/files/es/web/css/css_positioning/index.html new file mode 100644 index 0000000000..84e1b5036f --- /dev/null +++ b/files/es/web/css/css_positioning/index.html @@ -0,0 +1,115 @@ +--- +title: Posicionamiento CSS +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS Positioning + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Positioning +--- +<p>{{CSSRef}}</p> + +<p><strong>Posicionamiento CSS</strong> es un módulo de CSS que define cómo posicionar elementos absoluta y relativamente en la página.</p> + +<h2 id="Referencia">Referencia</h2> + +<h3 id="Propiedades_CSS">Propiedades CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("bottom")}}</li> + <li>{{cssxref("clear")}}</li> + <li>{{cssxref("display")}}</li> + <li>{{cssxref("float")}}</li> + <li>{{cssxref("left")}}</li> + <li>{{cssxref("position")}}</li> + <li>{{cssxref("right")}}</li> + <li>{{cssxref("top")}}</li> + <li>{{cssxref("visibility")}}</li> + <li>{{cssxref("z-index")}}</li> +</ul> +</div> + +<h2 id="Guías">Guías</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Entendiendo la propiedad CSS z-index</a></dt> + <dd>Presenta la noción de contexto de apilamiento y explica cómo funciona el ordenamiento en el eje-Z a través de varios ejemplos.</dd> +</dl> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Positioning') }}</td> + <td>{{ Spec2('CSS3 Positioning') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>5.0</td> + <td>6.0</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/css_properties_reference/index.html b/files/es/web/css/css_properties_reference/index.html new file mode 100644 index 0000000000..3c18918a01 --- /dev/null +++ b/files/es/web/css/css_properties_reference/index.html @@ -0,0 +1,314 @@ +--- +title: CSS Properties Reference +slug: Web/CSS/CSS_Properties_Reference +tags: + - CSS + - Estilos + - Propiedades + - Referencia +translation_of: Web/CSS/CSS_Properties_Reference +--- +<h2 id="Propiedades_CSS_Básicas_Referencia">Propiedades CSS Básicas Referencia</h2> + +<p>La siguiente lista es una lista de la propiedades CSS más comunes junto con su equivalente en notación DOM que es cómo son normalmente accedidas desde JavaScript.</p> + +<div class="note"><strong>Note:</strong> Es una lista incompleta. Para descubrir más propiedades CSS visita <a href="/es-ES/docs/Web/CSS/Reference">la referencia principal CSS </a>y and <a class="internal" href="/es-ES/docs/Web/CSS/Mozilla_Extensions">las Extensiones CSS de Mozilla</a>. Los artículos de referencia incluyen ejemplos sobre cómo usar todas estas propiedades.</div> + +<table> + <thead> + <tr> + <th scope="col"><strong>CSS</strong></th> + <th scope="col"><strong>JavaScript</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td>background</td> + <td>background</td> + </tr> + <tr> + <td>background-attachment</td> + <td>backgroundAttachment</td> + </tr> + <tr> + <td>background-color</td> + <td>backgroundColor</td> + </tr> + <tr> + <td>background-image</td> + <td>backgroundImage</td> + </tr> + <tr> + <td>background-position</td> + <td>backgroundPosition</td> + </tr> + <tr> + <td>background-repeat</td> + <td>backgroundRepeat</td> + </tr> + <tr> + <td>border</td> + <td>border</td> + </tr> + <tr> + <td>border-bottom</td> + <td>borderBottom</td> + </tr> + <tr> + <td>border-bottom-color</td> + <td>borderBottomColor</td> + </tr> + <tr> + <td>border-bottom-style</td> + <td>borderBottomStyle</td> + </tr> + <tr> + <td>border-bottom-width</td> + <td>borderBottomWidth</td> + </tr> + <tr> + <td>border-color</td> + <td>borderColor</td> + </tr> + <tr> + <td>border-left</td> + <td>borderLeft</td> + </tr> + <tr> + <td>border-left-color</td> + <td>borderLeftColor</td> + </tr> + <tr> + <td>border-left-style</td> + <td>borderLeftStyle</td> + </tr> + <tr> + <td>border-left-width</td> + <td>borderLeftWidth</td> + </tr> + <tr> + <td>border-right</td> + <td>borderRight</td> + </tr> + <tr> + <td>border-right-color</td> + <td>borderRightColor</td> + </tr> + <tr> + <td>border-right-style</td> + <td>borderRightStyle</td> + </tr> + <tr> + <td>border-right-width</td> + <td>borderRightWidth</td> + </tr> + <tr> + <td>border-style</td> + <td>borderStyle</td> + </tr> + <tr> + <td>border-top</td> + <td>borderTop</td> + </tr> + <tr> + <td>border-top-color</td> + <td>borderTopColor</td> + </tr> + <tr> + <td>border-top-style</td> + <td>borderTopStyle</td> + </tr> + <tr> + <td>border-top-width</td> + <td>borderTopWidth</td> + </tr> + <tr> + <td>border-width</td> + <td>borderWidth</td> + </tr> + <tr> + <td>clear</td> + <td>clear</td> + </tr> + <tr> + <td>clip</td> + <td>clip</td> + </tr> + <tr> + <td>color</td> + <td>color</td> + </tr> + <tr> + <td>cursor</td> + <td>cursor</td> + </tr> + <tr> + <td>display</td> + <td>display</td> + </tr> + <tr> + <td>filter</td> + <td>filter</td> + </tr> + <tr> + <td>float</td> + <td>cssFloat</td> + </tr> + <tr> + <td>font</td> + <td>font</td> + </tr> + <tr> + <td>font-family</td> + <td>fontFamily</td> + </tr> + <tr> + <td>font-size</td> + <td>fontSize</td> + </tr> + <tr> + <td>font-variant</td> + <td>fontVariant</td> + </tr> + <tr> + <td>font-weight</td> + <td>fontWeight</td> + </tr> + <tr> + <td>height</td> + <td>height</td> + </tr> + <tr> + <td>left</td> + <td>left</td> + </tr> + <tr> + <td>letter-spacing</td> + <td>letterSpacing</td> + </tr> + <tr> + <td>line-height</td> + <td>lineHeight</td> + </tr> + <tr> + <td>list-style</td> + <td>listStyle</td> + </tr> + <tr> + <td>list-style-image</td> + <td>listStyleImage</td> + </tr> + <tr> + <td>list-style-position</td> + <td>listStylePosition</td> + </tr> + <tr> + <td>list-style-type</td> + <td>listStyleType</td> + </tr> + <tr> + <td>margin</td> + <td>margin</td> + </tr> + <tr> + <td>margin-bottom</td> + <td>marginBottom</td> + </tr> + <tr> + <td>margin-left</td> + <td>marginLeft</td> + </tr> + <tr> + <td>margin-right</td> + <td>marginRight</td> + </tr> + <tr> + <td>margin-top</td> + <td>marginTop</td> + </tr> + <tr> + <td>overflow</td> + <td>overflow</td> + </tr> + <tr> + <td>padding</td> + <td>padding</td> + </tr> + <tr> + <td>padding-bottom</td> + <td>paddingBottom</td> + </tr> + <tr> + <td>padding-left</td> + <td>paddingLeft</td> + </tr> + <tr> + <td>padding-right</td> + <td>paddingRight</td> + </tr> + <tr> + <td>padding-top</td> + <td>paddingTop</td> + </tr> + <tr> + <td>page-break-after</td> + <td>pageBreakAfter</td> + </tr> + <tr> + <td>page-break-before</td> + <td>pageBreakBefore</td> + </tr> + <tr> + <td>position</td> + <td>position</td> + </tr> + <tr> + <td>stroke-dasharray</td> + <td>strokeDasharray</td> + </tr> + <tr> + <td>stroke-dashoffset</td> + <td>strokeDashoffset</td> + </tr> + <tr> + <td>stroke-width</td> + <td>strokeWidth</td> + </tr> + <tr> + <td>text-align</td> + <td>textAlign</td> + </tr> + <tr> + <td>text-decoration</td> + <td>textDecoration</td> + </tr> + <tr> + <td>text-indent</td> + <td>textIndent</td> + </tr> + <tr> + <td>text-transform</td> + <td>textTransform</td> + </tr> + <tr> + <td>top</td> + <td>top</td> + </tr> + <tr> + <td>vertical-align</td> + <td>verticalAlign</td> + </tr> + <tr> + <td>visibility</td> + <td>visibility</td> + </tr> + <tr> + <td>width</td> + <td>width</td> + </tr> + <tr> + <td>z-index</td> + <td>zIndex</td> + </tr> + </tbody> +</table> diff --git a/files/es/web/css/css_reglas_condicionales/index.html b/files/es/web/css/css_reglas_condicionales/index.html new file mode 100644 index 0000000000..59c2a9b328 --- /dev/null +++ b/files/es/web/css/css_reglas_condicionales/index.html @@ -0,0 +1,99 @@ +--- +title: CSS Reglas Condicionales +slug: Web/CSS/CSS_Reglas_Condicionales +tags: + - CSS + - Referencia +translation_of: Web/CSS/CSS_Conditional_Rules +--- +<div>{{CSSRef}}</div> + +<p>Las<strong> Reglas Condicionales </strong>(At-rules) es un módulo de CSS que permite definir un conjunto de reglas que solo aplicarán con base en las capacidades del procesador o del documento al cual la hoja de estilos está siendo aplicada.</p> + +<h2 id="Referencia">Referencia</h2> + +<h3 id="Reglas_condicionales">Reglas condicionales</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@document")}}</li> + <li>{{cssxref("@media")}}</li> + <li>{{cssxref("@supports")}}</li> + <li>{{cssxref("@import")}}</li> +</ul> +</div> + +<h2 id="Guías">Guías</h2> + +<p><em>None.</em></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Conditional')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td>Definición Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Catacterística</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Catacterística</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/css_transforms/index.html b/files/es/web/css/css_transforms/index.html new file mode 100644 index 0000000000..0467567c73 --- /dev/null +++ b/files/es/web/css/css_transforms/index.html @@ -0,0 +1,145 @@ +--- +title: CSS Transforms +slug: Web/CSS/CSS_Transforms +translation_of: Web/CSS/CSS_Transforms +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p><strong>CSS Transforms</strong> is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("backface-visibility")}}</li> + <li>{{cssxref("perspective")}}</li> + <li>{{cssxref("perspective-origin")}}</li> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("transform-box")}}</li> + <li>{{cssxref("transform-origin")}}</li> + <li>{{cssxref("transform-style")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS transforms</a></dt> + <dd>Step-by-step tutorial about how to transform elements styled with CSS.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transforms') }}</td> + <td>{{ Spec2('CSS3 Transforms') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + 36</p> + </td> + <td>{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("16.0")}}<sup>[2]</sup></td> + <td>9.0{{property_prefix("-ms")}}<sup>[3]</sup><br> + 10.0</td> + <td>10.5{{property_prefix("-o")}}<br> + 12.10<br> + 15.0{{property_prefix("-webkit")}}<br> + 23</td> + <td>3.1{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>3D Support</td> + <td>12.0{{property_prefix("-webkit")}}<br> + 36</td> + <td>10.0{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10.0</td> + <td>15.0{{property_prefix("-webkit")}}<br> + 23</td> + <td>4.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}<sup>[4]</sup></td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<br> + 11.0{{property_prefix("-webkit")}}<sup>[5]</sup></td> + <td>11.5{{property_prefix("-webkit")}}</td> + <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>3D Support</td> + <td>{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>22{{property_prefix("-webkit")}}</td> + <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 14.0 removed the experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.</p> + +<p>[2] Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("<length>")}}, in addition to the standard {{cssxref("<number>")}}.</p> + +<p>[3] Internet Explorer 5.5 or later supports a proprietary <a href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> which can be used to achieve a similar effect.</p> + +<p>Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as <code>-ms-transform:rotate(10deg) translateZ(0);</code> will prevent the entire property from being applied.</p> + +<p>[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a <code>-webkit-transform</code>.</p> + +<p>[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} <a href="https://msdn.microsoft.com/library/jj127312#code-snippet-1">prefixed variant as an alias for the default one</a>.</p> + +<p> </p> diff --git a/files/es/web/css/css_transforms/using_css_transforms/index.html b/files/es/web/css/css_transforms/using_css_transforms/index.html new file mode 100644 index 0000000000..ac73ecaafc --- /dev/null +++ b/files/es/web/css/css_transforms/using_css_transforms/index.html @@ -0,0 +1,225 @@ +--- +title: Uso de CSS transforms +slug: Web/CSS/CSS_Transforms/Using_CSS_transforms +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +<div>{{CSSRef}}</div> + +<p>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.</p> + +<h2 id="Propiedades_de_las_transformaciones_CSS">Propiedades de las transformaciones CSS</h2> + +<p>Se usan dos propiedades principalmente para definir las transformaciones CSS: {{ cssxref("transform") }} y {{ cssxref("transform-origin") }}</p> + +<dl> + <dt>{{ cssxref("transform-origin") }}</dt> + <dd>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.</dd> + <dt>{{ cssxref("transform") }}</dt> + <dd>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.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Esta es una imagen inalterada del logo de MDN:</p> + +<p><img alt="MDN Logo" src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png" style="height: 106px; width: 110px;"></p> + +<h3 id="Ejemplo_Rotando">Ejemplo: Rotando</h3> + +<p>Aquí está el logo MDN en un iframe rotado 90 grados desde su esquina inferior izquierda.</p> + +<pre class="brush: html"><img style="transform: rotate(90deg); + transform-origin: bottom left;" + src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"> +</pre> + +<p>{{ EmbedLiveSample('Ejemplo_Rotando', 'auto', 240, '', 'Web/CSS/CSS_Transforms/Using_CSS_transforms') }}</p> + +<h3 id="Ejemplo_Torciendo_y_desplazando">Ejemplo: Torciendo y desplazando</h3> + +<p>Aquí está el logo MDN torcido 10 grados y desplazado 150 pixels en el eje X.</p> + +<pre class="brush: html"><img style="transform: skewx(10deg) translatex(150px); + transform-origin: bottom left;" + src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"> +</pre> + +<h2 id="Propiedades_CSS_específicas_para_3D">Propiedades CSS específicas para 3D</h2> + +<p>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.</p> + +<h3 id="Definiendo_una_perspectiva">Definiendo una perspectiva</h3> + +<p>El primer elemento a definir es la <em>perspectiva</em>. 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.</p> + +<p>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.</p> + +<div> +<table class="standard-table"> + <tbody> + <tr> + <td><code>perspective:0;</code></td> + <td><code>perspective:250px;</code></td> + </tr> + <tr> + <td> + <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 0; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + <td> + <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 150px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + <td> + <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + <td> + <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 600px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + </tr> + </tbody> +</table> +</div> + +<p>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</p> + +<p>{{ EmbedLiveSample('Definiendo_una_perspectiva', '', '', '', 'Web/CSS/CSS_Transforms/Using_CSS_transforms') }}</p> + +<p>or, pero no siempre es lo adecuado.</p> + +<div> +<table class="standard-table"> + <tbody> + <tr> + <td><code>perspective-origin:150px 150px;</code></td> + <td><code>perspective-origin:50% 50%;</code></td> + <td><code>perspective-origin:-50px -50px;</code></td> + </tr> + <tr> + <td> + <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;"> + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + <td> + <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 50% 50%;"> + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + <td> + <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: -50% -50%;"> + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + </tr> + </tbody> +</table> +</div> + +<p>Una vez has hecho esto, ya puedes trabajar con los elementos en el espacio 3D.</p> + +<h3 id="2D_elements_in_the_3D_space">2D elements in the 3D space</h3> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en/Using_Deviceorientation_In_3D_Transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li> +</ul> diff --git a/files/es/web/css/css_transitions/index.html b/files/es/web/css/css_transitions/index.html new file mode 100644 index 0000000000..1855888e7d --- /dev/null +++ b/files/es/web/css/css_transitions/index.html @@ -0,0 +1,60 @@ +--- +title: CSS Transitions +slug: Web/CSS/CSS_Transitions +tags: + - CSS + - Experimental + - Referencia + - Transiciones CSS + - Vista general +translation_of: Web/CSS/CSS_Transitions +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p><strong>Transiciones CSS </strong>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.</p> + +<h2 id="Referencia">Referencia</h2> + +<h3 id="Propiedades">Propiedades</h3> + +<div class="index"> +<ul> + <li>{{cssxref("transition")}}</li> + <li>{{cssxref("transition-delay")}}</li> + <li>{{cssxref("transition-duration")}}</li> + <li>{{cssxref("transition-property")}}</li> + <li>{{cssxref("transition-timing-function")}}</li> +</ul> +</div> + +<h2 id="Guías">Guías</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definición Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li>Transiciones relacionadas, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> pueden producir animaciones independientemente de los cambios en los valores.</li> +</ul> diff --git a/files/es/web/css/css_types/index.html b/files/es/web/css/css_types/index.html new file mode 100644 index 0000000000..bdb0c5386e --- /dev/null +++ b/files/es/web/css/css_types/index.html @@ -0,0 +1,64 @@ +--- +title: Tipos de datos básicos de CSS +slug: Web/CSS/CSS_Types +tags: + - CSS + - Referencia + - Tipo de Dato CSS + - Visión general +translation_of: Web/CSS/CSS_Types +--- +<div>{{CssRef}}</div> + +<p>Los <strong>tipos de datos básicos de CSS</strong> 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 <a href="https://www.w3.org/TR/css3-values/#component-types">valor de componente</a>.</p> + +<p>En sintaxis formal, los tipos de datos se denotan con una palabra clave colocada entre los signos de desigualdad "<" y ">".</p> + +<h2 id="Referencia">Referencia</h2> + +<div class="index"> +<ul> + <li>{{cssxref("<angle>")}}</li> + <li>{{cssxref("<basic-shape>")}}</li> + <li>{{cssxref("<blend-mode>")}}</li> + <li>{{cssxref("<color>")}}</li> + <li>{{cssxref("<custom-ident>")}}</li> + <li>{{cssxref("<filter-function>")}}</li> + <li>{{cssxref("<flex>")}}</li> + <li>{{cssxref("<frequency>")}}</li> + <li>{{cssxref("<gradient>")}}</li> + <li>{{cssxref("<image>")}}</li> + <li>{{cssxref("<integer>")}}</li> + <li>{{cssxref("<length>")}}</li> + <li>{{cssxref("<number>")}}</li> + <li>{{cssxref("<percentage>")}}</li> + <li>{{cssxref("<position>")}}</li> + <li>{{cssxref("<ratio>")}}</li> + <li>{{cssxref("<resolution>")}}</li> + <li>{{cssxref("<shape-box>")}}</li> + <li>{{cssxref("<single-transition-timing-function>")}}</li> + <li>{{cssxref("<string>")}}</li> + <li>{{cssxref("<time>")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li>{{cssxref("<url>")}}</li> +</ul> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Values') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> diff --git a/files/es/web/css/css_writing_modes/index.html b/files/es/web/css/css_writing_modes/index.html new file mode 100644 index 0000000000..1eb0bb2d15 --- /dev/null +++ b/files/es/web/css/css_writing_modes/index.html @@ -0,0 +1,52 @@ +--- +title: CSS Writing Modes +slug: Web/CSS/CSS_Writing_Modes +translation_of: Web/CSS/CSS_Writing_Modes +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Writing Modes</strong> 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).</p> + +<h2 id="Referencia">Referencia</h2> + +<h3 id="Propiedades">Propiedades</h3> + +<div class="index"> +<ul> + <li>{{cssxref("direction")}}</li> + <li>{{cssxref("glyph-orientation-horizontal")}}</li> + <li>{{cssxref("text-combine-upright")}}</li> + <li>{{cssxref("text-orientation")}}</li> + <li>{{cssxref("unicode-bidi")}}</li> + <li>{{cssxref("writing-mode")}}</li> +</ul> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Writing Modes')}}</td> + <td>{{Spec2('CSS3 Writing Modes')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/es/web/css/cursor/index.html b/files/es/web/css/cursor/index.html new file mode 100644 index 0000000000..d8a0080831 --- /dev/null +++ b/files/es/web/css/cursor/index.html @@ -0,0 +1,322 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - Referencia_CSS +translation_of: Web/CSS/cursor +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>La propiedad <a href="es/CSS/cursor">CSS:cursor</a> especifica el tipo de cursor que se mostrara cuando este se encuentre sobre un elemento.</p> + +<ul> + <li><a href="es/CSS/Valor_inicial">CSS:Valor_inicial</a>:<code> <a href="es/CSS/auto">CSS:auto</a></code></li> + <li>Se aplica a: todos los elementos</li> + <li><a href="es/CSS/inheritance">CSS:inheritance</a>: Si</li> + <li>Porcentaje: N/A</li> + <li>Media: <a href="es/CSS/Media/Visual">CSS:Media:Visual</a>, <a href="es/CSS/Media/Interactivo">CSS:Media:Interactivo</a></li> + <li><a href="es/CSS/Valor_calculado">CSS:Valor_calculado</a>:como sea especificado con URLs relativos convertidos a URLs absolutos.</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">cursor: <std-cursor-name> | <url> [<x> <y>]? [, <url> [<x> <y>]?]* | <a href="es/CSS/inherit">CSS:inherit</a> ; +</pre> + +<pre class="eval">cursor: [<url> [<x> <y>]?,]* <std-cursor-name> ; +</pre> + +<h3 id="Values" name="Values">Values</h3> + +<dl> + <dt><url> {{ mediawiki.external(' ') }}? </dt> + <dd>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 <a href="es/Uso_de_URL_como_valor_de_la_propiedad_cursor">Uso_de_URL_como_valor_de_la_propiedad_cursor</a> para mas detalles.</dd> + <dt><std-cursor-name></dt> + <dd>Algunos nombres de cursores se encuentra en la siguiente tabla.</dd> +</dl> + +<h4 id="Supported_CSS_standard_values" name="Supported_CSS_standard_values">Supported CSS standard values</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Categoría</th> + <th>nombre de CSS</th> + <th>Descripción</th> + </tr> + <tr> + <td rowspan="3">General</td> + <td style="cursor: auto;"><code>auto</code></td> + <td>El browser (user agent) determina el cursor que mostrara basado en el contenido presente.<br> + E.g. equivalent to <code>text</code> when hovering text</td> + </tr> + <tr> + <td style="cursor: default;"><code>default</code></td> + <td>default cursor (typically an arrow)</td> + </tr> + <tr> + <td style="cursor: none;"><code>none</code></td> + <td>no cursor is rendered {{ Fx_minversion_inline(3) }}</td> + </tr> + <tr> + <td rowspan="5">Links & status</td> + <td style="cursor: context-menu;"><code>context-menu</code></td> + <td>cursor indicating that a context menu is available under the cursor</td> + </tr> + <tr> + <td style="cursor: help;"><code>help</code></td> + <td>cursor indicating help is available</td> + </tr> + <tr> + <td style="cursor: pointer;"><code>pointer</code></td> + <td>cursor used when over links (typically a hand)</td> + </tr> + <tr> + <td style="cursor: progress;"><code>progress</code></td> + <td>cursor indicating that the program is busy in the background but the user can still interact with the interface (unlike for <code>wait</code>)</td> + </tr> + <tr> + <td style="cursor: wait;"><code>wait</code></td> + <td>cursor indicating the program is busy (sometimes an hourglass or a watch)</td> + </tr> + <tr> + <td rowspan="4">Selection</td> + <td style="cursor: cell;"><code>cell</code></td> + <td>cursor indicating that cells can be selected</td> + </tr> + <tr> + <td style="cursor: crosshair;"><code>crosshair</code></td> + <td>cross cursor, often used to indicate selection in a bitmap</td> + </tr> + <tr> + <td style="cursor: text;"><code>text</code></td> + <td>cursor indicating text can be selected (typically an I-beam)</td> + </tr> + <tr> + <td style="cursor: vertical-text;"><code>vertical-text</code></td> + <td>cursor indicating that vertical text can be selected (typically a sideways I-beam)</td> + </tr> + <tr> + <td rowspan="5">Drag and drop</td> + <td style="cursor: alias;"><code>alias</code></td> + <td>cursor indicating an alias or shortcut is to be created</td> + </tr> + <tr> + <td style="cursor: copy;"><code>copy</code></td> + <td>cursor indicating that something can be copied</td> + </tr> + <tr> + <td style="cursor: move;"><code>move</code></td> + <td>the hovered object may be moved</td> + </tr> + <tr> + <td style="cursor: no-drop;"><code>no-drop</code></td> + <td>cursor showing that a drop is not allowed at the current location</td> + </tr> + <tr> + <td style="cursor: not-allowed;"><code>not-allowed</code></td> + <td>cursor showing that something cannot be done</td> + </tr> + <tr> + <td rowspan="15">Resize & scrolling</td> + <td style="cursor: all-scroll;"><code>all-scroll</code></td> + <td>cursor showing that something can be scrolled in any direction (panned)</td> + </tr> + <tr> + <td style="cursor: col-resize;"><code>col-resize</code></td> + <td>cursor for resizing columns horizontally</td> + </tr> + <tr> + <td style="cursor: e-resize;"><code>e-resize</code></td> + <td>cursor for resizing the right edge of a box</td> + </tr> + <tr> + <td style="cursor: ew-resize;"><code>ew-resize</code></td> + <td>cursor for resizing left or right</td> + </tr> + <tr> + <td style="cursor: n-resize;"><code>n-resize</code></td> + <td>cursor for resizing the top edge of a box</td> + </tr> + <tr> + <td style="cursor: ne-resize;"><code>ne-resize</code></td> + <td>cursor for resizing the top right corner of a box</td> + </tr> + <tr> + <td style="cursor: nesw-resize;"><code>nesw-resize</code></td> + <td>cursor for resizing in the top-right or bottom-left directions</td> + </tr> + <tr> + <td style="cursor: ns-resize;"><code>ns-resize</code></td> + <td>cursor for resizing up or down</td> + </tr> + <tr> + <td style="cursor: nw-resize;"><code>nw-resize</code></td> + <td>cursor for resizing the top left corner of a box</td> + </tr> + <tr> + <td style="cursor: nwse-resize;"><code>nwse-resize</code></td> + <td>cursor for resizing in the top-left or bottom-right directions</td> + </tr> + <tr> + <td style="cursor: row-resize;"><code>row-resize</code></td> + <td>cursor for resizing rows vertically</td> + </tr> + <tr> + <td style="cursor: s-resize;"><code>s-resize</code></td> + <td>cursor for resizing the bottom edge of a box</td> + </tr> + <tr> + <td style="cursor: se-resize;"><code>se-resize</code></td> + <td>cursor for resizing the bottom right corner of a box</td> + </tr> + <tr> + <td style="cursor: sw-resize;"><code>sw-resize</code></td> + <td>cursor for resizing the bottom left corner of a box</td> + </tr> + <tr> + <td style="cursor: w-resize;"><code>w-resize</code></td> + <td>cursor for resizing the left edge of a box</td> + </tr> + </tbody> +</table> + +<h4 id="Extended_Gecko_CSS_values" name="Extended_Gecko_CSS_values">Extended Gecko CSS values</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>CSS name</th> + <th>Description</th> + <th>Deprecation</th> + </tr> + <tr> + <td style="cursor: -moz-alias;"><code><a href="es/CSS/-moz-alias">-moz-alias</a></code></td> + <td>replaced by standard value <code>alias</code> as described in the previous table</td> + <td>Gecko 1.8a6</td> + </tr> + <tr> + <td style="cursor: -moz-cell;"><code><a href="es/CSS/-moz-cell">-moz-cell</a></code></td> + <td>replaced by standard value <code>cell</code> as described in the previous table</td> + <td>Gecko 1.8a6</td> + </tr> + <tr> + <td style="cursor: -moz-context-menu;"><code><a href="es/CSS/-moz-context-menu">-moz-context-menu</a></code></td> + <td>replaced by standard value <code>context-menu</code> as described in the previous table</td> + <td>Gecko 1.8a6</td> + </tr> + <tr> + <td style="cursor: -moz-copy;"><code><a href="es/CSS/-moz-copy">-moz-copy</a></code></td> + <td>replaced by standard value <code>copy</code> as described in the previous table</td> + <td>Gecko 1.8a6</td> + </tr> + <tr> + <td style="cursor: -moz-grab;"><code><a href="es/CSS/-moz-grab">-moz-grab</a></code></td> + <td>a cursor value that should indicate that an element or an object in a webpage can be grabbed</td> + <td> </td> + </tr> + <tr> + <td style="cursor: -moz-grabbing;"><code><a href="es/CSS/-moz-grabbing">-moz-grabbing</a></code></td> + <td>a cursor value that should indicate that an element or an object is currently being grabbed</td> + <td> </td> + </tr> + <tr> + <td style="cursor: -moz-spinning;"><code><a href="es/CSS/-moz-spinning">-moz-spinning</a></code></td> + <td>replaced by standard value <code>progress</code> as described in the previous table</td> + <td>Gecko 1.7.1</td> + </tr> + <tr> + <td style="cursor: -moz-zoom-in;"><code><a href="es/CSS/-moz-zoom-in">-moz-zoom-in</a></code></td> + <td>used to indicate that an element or an object in a webpage is actually being resized, enlarged or is actually being magnified</td> + <td> </td> + </tr> + <tr> + <td style="cursor: -moz-zoom-out;"><code><a href="es/CSS/-moz-zoom-out">-moz-zoom-out</a></code></td> + <td>used to indicate that an element or an object in a webpage is actually being resized, reduced or is actually being zoomed out</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Examples" name="Examples">Examples</h3> + +<p><a href="/samples/cssref/cursor.html">Ver El Ejemplo Vivo</a></p> + +<pre>Inline: + +<span style="cursor: crosshair">Some Text</span> + +External: + +.pointer { + cursor: pointer; +} +.move { + cursor: move; +} + +</pre> + +<h3 id="Notes" name="Notes">Notes</h3> + +<p>While this property works on older browsers, not all values are fully supported.</p> + +<h3 id="Specifications" name="Specifications">Specifications</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/ui.html#propdef-cursor">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">css3-ui</a></li> +</ul> + +<h3 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Lowest Version (<code><std-cursor-name></code>)</th> + <th>Lowest Version (<code><url></code>)</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + <td>6 (only <code>.cur</code> files)</td> + </tr> + <tr> + <td>Firefox</td> + <td>1.0</td> + <td>1.5</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + <td>8</td> + </tr> + <tr> + <td>Opera</td> + <td>7</td> + <td>-</td> + </tr> + <tr> + <td>Konqueror</td> + <td>3.1</td> + <td>3.1</td> + </tr> + <tr> + <td>Safari</td> + <td>1.2</td> + <td>1.2</td> + </tr> + <tr> + <td>Safari (Win)</td> + <td>3.0</td> + <td>3.0</td> + </tr> + </tbody> +</table> + +<h3 id="See_also" name="See_also">See also</h3> + +<p>{{ languages( { "fr": "fr/CSS/cursor", "pl": "pl/CSS/cursor", "en": "en/CSS/cursor" } ) }}</p> diff --git a/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html b/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html new file mode 100644 index 0000000000..b59b5f677d --- /dev/null +++ b/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html @@ -0,0 +1,39 @@ +--- +title: Uso de URL como valor de la propiedad cursor +slug: Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor +tags: + - CSS + - Todas_las_Categorías +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +<p><a href="/es/Gecko" title="es/Gecko">Gecko</a> 1.8 (<a href="/es/Firefox_1.5_para_Desarrolladores" title="es/Firefox_1.5_para_Desarrolladores">Firefox 1.5</a>, SeaMonkey 1.0) soporta el uso de URLs como valores para la <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/ui.html#propdef-cursor">propiedad cursor</a> (CSS2). Esto nos permite definir la imagen que queremos como puntero del ratón, además podemos usar cualquiera de los formatos gráficos soportados por Gecko.</p> +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> +<p>La sintaxis de esta propiedad es:</p> +<pre class="eval">cursor: [<url>,]* cursor-genérico; +</pre> +<p>Esto es, se pueden indicar cero o más direcciones URL (separadas por comas), que <strong>deben</strong> ser seguidas de uno de los cursores genéricos definidos en la especificación, por ej. <code>help</code> o <code>pointer</code>.</p> +<p>Los siguientes valores están permitidos:</p> +<pre class="eval">cursor: url(foo.cur), url(<span class="nowiki">http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg</span>), help; +</pre> +<p>Primero se intentará cargar <em>foo.cur</em>. Si este archivo no existe o no es válido por alguna otra razón, se probará con <em>firefox.jpg</em>, y si este tampoco puede ser cargado, se usará <em>help</em>.</p> +<p>El soporte a la <a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">sintaxis de CSS3</a> para los valores de cursor fue añadido en Gecko 1.8beta3; por lo tanto en Firefox 1.5 funciona. Esto permite especificar las coordenadas del punto en el que la imagen del cursor es fijada al área activa. Si no se especifican, las coordenadas del punto de contacto son tomadas del propio archivo (para archivos CUR y XBM) o se fijan en la esquina superior izquierda de la imagen.</p> +<p>Un ejemplo de la sintaxis CSS3:</p> +<pre class="eval">cursor: url(<span class="nowiki">http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg</span>), auto; + +cursor: url(<span class="nowiki">http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg</span>) 90 90, auto; +</pre> +<p><br> + El primer número es la coordenada X, y el segundo la coordenada Y. El ejemplo anterior pone el punto de contacto del área activa a (90,90) píxeles de la esquina superior izquierda (0,0).</p> +<h3 id="Limitaciones" name="Limitaciones">Limitaciones</h3> +<p>Pueden usarse todos los formatos gráficos soportados por Gecko. Por lo tanto puede usar imágenes PNG, JPG, CUR, GIF, etc. Sin embargo, ANI no está soportado. Además, si especifica un GIF animado, el cursor usará el GIF, pero sin animación. Esta limitación podría ser superada en futuras versiones.</p> +<p>Gecko no limita el tamaño de los cursores. Sin embargo, quien busque la máxima compatibilidad multiplataforma debería limitarlos a un tamaño de 32x32, los cursores más grandes no funcionarán en Windows 9x (95, 98, MÍ).</p> +<p>Los cursores translúcidos no estan soportados en las versiones de Windows anteriores a XP. Esto es una limitación del sistema operativo. La transparencia funciona en todas las plataformas.</p> +<p>Solo las versiones de Mozilla para Windows, OS/2 y GNU/Linux (usando GTK+ 2.4 o superior) soportan valores URL para los cursores. El soporte en otras plataformas podría ser añadido en futuras versiones: (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})</p> +<h3 id="Compatibilidad_con_otros_navegadores" name="Compatibilidad_con_otros_navegadores">Compatibilidad con otros navegadores</h3> +<p>Microsoft Internet Explorer también soporta URI como valor para la propiedad <code>cursor</code>. Sin embargo, solo soporta los formatos gráficos CUR y ANI. Además, es menos estricto con la sintaxis de la propiedad <code>cursor</code>. Esto significa que declaraciones como:</p> +<pre class="eval">cursor: url(foo.cur); +</pre> +<p>O:</p> +<pre class="eval">cursor: url(foo.cur), pointer, url(bar.cur), auto; +</pre> +<p>funcionarán en MSIE, pero no lo harán en los navegadores basados en Gecko. Para ser compatible con Gecko y actuar conforme a la especificación de CSS2.1, ponga la lista de URIs primero, y ponga siempre <strong>un</strong> cursor genérico <strong>al final</strong>. <span class="comment">: ''To-do: document what MSIE does with CSS 3 hotspot locations''</span></p> diff --git a/files/es/web/css/descendant_combinator/index.html b/files/es/web/css/descendant_combinator/index.html new file mode 100644 index 0000000000..d5d20aa965 --- /dev/null +++ b/files/es/web/css/descendant_combinator/index.html @@ -0,0 +1,97 @@ +--- +title: Los selectores descendientes +slug: Web/CSS/Descendant_combinator +translation_of: Web/CSS/Descendant_combinator +--- +<p>{{ CSSRef() }}</p> +<h2 id="Summary" name="Summary">Sumario</h2> +<p>El <code>␣</code> combinador <font><font>(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.<span class="Apple-converted-space"> </span></font><font>Los selectores descendientes son similares a<span class="Apple-converted-space"> </span></font></font><a href="https://developer.mozilla.org/en/CSS/Child_selectors" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="selectores es / CSS / Niños"><font><font>selectores hijos</font></font></a><font><font><span class="Apple-converted-space"> </span>, pero que no requieren que la relación entre los elementos coincidentes ser estrictamente entre padres e hijos.</font></font></p> +<h2 id="Syntax" name="Syntax">Sintaxis</h2> +<pre class="eval">selector1 selector2 { <em>propiedades de estilos</em> } +</pre> +<h2 id="Example" name="Example">Ejemplo</h2> +<pre class="brush: css">span { background-color: white; } +div span { background-color: DodgerBlue; } +</pre> +<pre class="brush: html"><div> + <span>Span 1. + <span>Span 2.</span> + </span> +</div> +<span>Span 3.</span> +</pre> +<p>{{ EmbedLiveSample('Example', '', '', '') }}</p> +<h2 id="Especificaciones"><span>Especificaciones</span></h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td><a class="external" href="http://www.w3.org/TR/css3-selectors/#general-sibling-combinators" title="http://www.w3.org/TR/css3-selectors/#general-sibling-combinators">Selector CSS Nivel 3</a></td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td> </td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/CSS21/selector.html#descendant-selectors" title="http://www.w3.org/TR/CSS21/selector.html#descendant-selectors">CSS 2.1</a></td> + <td>{{ Spec2('CSS2.1') }}</td> + <td> </td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/CSS1/#contextual-selectors" title="http://www.w3.org/TR/CSS1/#contextual-selectors">CSS 1</a></td> + <td>{{ Spec2('CSS1') }}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Compatibilidad_del_navegador" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.142857142857143rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font>Compatibilidad del navegador</font></font></h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Carracterística</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Carracterística</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="See_also" name="See_also">Ver también</h2> diff --git a/files/es/web/css/direction/index.html b/files/es/web/css/direction/index.html new file mode 100644 index 0000000000..7fc0e0cbb8 --- /dev/null +++ b/files/es/web/css/direction/index.html @@ -0,0 +1,54 @@ +--- +title: direction +slug: Web/CSS/direction +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/direction +--- +<p> +</p><p>{{ CSSRef() }} +</p> +<h3 id="Resumen" name="Resumen"> Resumen </h3> +<p>La propiedad <code>direction</code> 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 <code>dir</code> en HTML) en lugar que directamente en la hoja de estilo CSS. +</p><p>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. +</p> +<ul><li> {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("ltr", "de izquierda a derecha") }} +</li><li> Se aplica a: todos los elementos. +</li><li> {{ Cssxref("inheritance", "Valor heredado") }}: si +</li><li> Porcentajes: n/a +</li><li> Medio: {{ Cssxref("Media:Visual", "visual") }} +</li><li> {{ Cssxref("computed value", "Valor calculado") }}: +</li></ul> +<h3 id="Sintaxis" name="Sintaxis"> Sintaxis </h3> +<pre class="eval">direction: [ ltr | rtl | inherit ] ; +</pre> +<h3 id="Valores" name="Valores"> Valores </h3> +<dl><dt> ltr </dt><dd> Valor por defecto de <code>direction</code>. El contenido, texto y otros elementos fluyen de izquierda a derecha. +</dd><dt> rtl </dt><dd> El contenido, texto y otros elementos van de derecha a izquierda. </dd></dl> +<p>Para que la propiedad <code>direction</code> tenga algún efecto en elementos de tipo en línea (<i>inline</i>), el valor de la propiedad {{ Cssxref("unicode-bidi") }} debe ser <code>embed</code> o <code>override</code>. +</p> +<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3> +<pre class="eval">blockquote { + direction : rtl ; +} +</pre> +<h3 id="Notas" name="Notas"> Notas </h3> +<p>Al contrario que el atributo <code>dir</code> en HTML, la propiedad <code>direction</code> 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. +</p> +<h3 id="Especificaciones" name="Especificaciones"> Especificaciones </h3> +<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#direction">CSS 2.1</a> +</li><li> <a class="external" href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#direction">CSS 3 Text Module</a> +</li></ul> +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3> +<p>{{ Cssxref("unicode-bidi") }} - {{ Cssxref("ltr") }} - {{ Cssxref("rtl") }} +</p><p><br> +</p> +<div class="noinclude"> +<p><span class="comment">Categorías</span> +</p><p><span class="comment">Interwiki Languages</span> +</p> +</div> +{{ languages( { "fr": "fr/CSS/direction", "pl": "pl/CSS/direction", "en": "en/CSS/direction" } ) }} diff --git a/files/es/web/css/display/index.html b/files/es/web/css/display/index.html new file mode 100644 index 0000000000..c5c503619b --- /dev/null +++ b/files/es/web/css/display/index.html @@ -0,0 +1,647 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - CSS Display + - Propiedades CSS +translation_of: Web/CSS/display +--- +<div>{{CSSRef}}</div> + +<p>La propiedad CSS <strong><code>display</code></strong> especifica si un elemento es tratado como <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout" rel="nofollow">block or inline element</a> y el diseño usado por sus hijos, como <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout">flow layout</a>(Diseño de Flujo), <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout" rel="nofollow">grid</a>(Cuadricula) o <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout" rel="nofollow">flex</a>(Flexible). </p> + +<p>Formalmente la propiedad <code>display</code> establece los tipos de visualización interna y externa de un elemento. La tipo externa establece la participacion de un elemento en <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout">flow layout</a>; la tipo interna establece el layout(Diseño) de los hijos. Algunos valores de <code>display</code> estan totalmente definidos con sus especificaciones propias; por ejemplo el detalle de que pasa cuando <code>display: flex</code> es declarado y definido en la especificacion de Modelo Flexible de Caja(Flexible Box Model specification) de CSS. <strong>Vea</strong> la siguientes tablas para mas especificaciones individuales.</p> + +<p>Además de los Diferentes Tipos de caja de Visualizacion, el valor de <code>none</code> permite Desactivar la Visualizacion DE UN Elemento; cuando no se utiliza <code>none</code>, todos los elementos descendentes también quedan desactivados. El documento se procesa como si el elemento no existiera en el árbol de documentos.</p> + +<pre class="brush:css no-line-numbers notranslate">/ * Valores <display-outside> * / + +display: block:; +display: inline; +display: run-in; + +/ * Valores <display-inside> * / +display: flow; +display: flow-root; +display: table; +display: flex; +display: grid; +display: ruby; +display: subgrid; + +/ * Valores <display-outside> más valores <display-inside> * / +display: block flow; +display: inline table; +display: flex run-in; + +/ * Valores <display-listitem> * / +display: list-item; +display: list-item block; +display: list-item inline; +display: list-item flow; +display: list-item flow-root; +display: list-item block flow; +display: list-item block flow-root; +display: flow list-item block; + +/ * Valores <display-internal> * / +display: table-row-group; +display: table-header-group; +display: table-footer-group; +display: table-row; +display: table-cell; +display: table-column-group; +display: table-column; +display: table-caption; +display: ruby-base; +display: ruby-text; +display: ruby-base-container; +display: ruby-text-container; + +/ * Valores <display-box> * / +display: contents; +display: none; + +/ * Valores <display-legacy> * / +display: inline-block; +display: inline-table; +display: inline-flex; +display: inline-grid; + +/ * Valores globales * / +display: heredar; +display: initial; +display: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La propiedad <code>display</code> se especifica mediante valores de palabras clave. Los valores de palabras clave se agrupan en seis categorías:</p> + +<ul> + <li><a href="#display-outside"><display-outside></a></li> + <li><a href="#display-inside"><display-inside></a></li> + <li><a href="#display-listitem"><display-listitem></a></li> + <li><a href="#display-internal"><display-internal></a></li> + <li><a href="#display-box"><display-box></a></li> + <li><a href="#display-legacy"><display-legacy></a></li> +</ul> + +<p>En la actualidad, es mejor especificar <code>display</code> utilizando una sola palabra clave; aunque las últimas especificaciones permiten combinar algunas palabras clave, esto aún no está bien soportado por los navegadores.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><a id="display-outside" name="display-outside"><display-outside></a></dt> + <dd>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: + <table class="standard-table"> + <thead> + <tr> + <td class="header">Valor</td> + <td class="header">Descripción</td> + </tr> + </thead> + <tbody> + <tr> + <td><code>block</code></td> + <td>El elemento genera un cuadro de elemento de bloque.</td> + </tr> + <tr> + <td><code>inline</code></td> + <td>El elemento genera uno o más cuadros de elemento en línea.</td> + </tr> + <tr> + <td><code>run-in</code> {{experimental_inline}}</td> + <td>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.</td> + </tr> + </tbody> + </table> + </dd> + <dt><a id="display-inside" name="display-inside"><display-inside></a></dt> + <dd>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: + <table class="standard-table"> + <thead> + <tr> + <td class="header">Valor</td> + <td class="header">Descripción</td> + </tr> + </thead> + <tbody> + <tr> + <td><code>flow</code> {{experimental_inline}}</td> + <td>El elemento expone su contenido utilizando el diseño de flujo (diseño en bloque y en línea). + <p>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.</p> + + <p>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 <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">contexto de formato de bloque</a> para su contenido o integra su contenido en su contexto de formato padre.</p> + </td> + </tr> + <tr> + <td><code>flow-root</code> {{experimental_inline}}</td> + <td>El elemento genera un cuadro de elemento de bloque que establece un nuevo <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">contexto de formato de bloque</a> .</td> + </tr> + <tr> + <td><code>table</code></td> + <td>Estos elementos se comportan como elementos HTML {{HTMLElement ("table")}}. Define un cuadro de nivel de bloque.</td> + </tr> + <tr> + <td><code>flex</code></td> + <td>El elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">modelo de flexbox</a> .</td> + </tr> + <tr> + <td><code>grid</code></td> + <td>El elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de cuadrícula.</td> + </tr> + <tr> + <td><code>subgrid</code> {{experimental_inline}}</td> + <td>Si el elemento padre tiene <code>display:grid</code>, el elemento en sí y su contenido se establecen de acuerdo con el modelo de cuadrícula.</td> + </tr> + <tr> + <td><code>ruby</code> {{experimental_inline}}</td> + <td>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.</td> + </tr> + </tbody> + </table> + </dd> + <dt><a id="display-listitem" name="display-listitem"><display-listitem></a></dt> + <dd> + <p>El elemento genera un cuadro de bloque para el contenido y un cuadro en línea de elemento de lista independiente.</p> + + <p>Si no se especifica ningún valor <code><display-inside></code>, el tipo de pantalla interna de la caja principal es el predeterminado <code>flow</code>. Si no se especifica ningún valor <code><display-outside></code>, el tipo de pantalla externa de la caja principal tiene el valor predeterminado <code>block</code>.</p> + </dd> + <dt><a id="display-internal" name="display-internal"><display-internal></a></dt> + <dd> + <p>Algunos modelos de disposición, como <span class="css">table y ruby</span>, 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.</p> + + <p>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.</p> + + <table class="standard-table"> + <thead> + <tr> + <td class="header">Valor</td> + <td class="header">Descripción</td> + </tr> + </thead> + <tbody> + <tr> + <td><code>table-row-group</code></td> + <td>Estos elementos se comportan como {{HTMLElement ("tbody")}} Elementos HTML</td> + </tr> + <tr> + <td><code>table-header-group</code></td> + <td>Estos elementos se comportan como elementos HTML de {{HTMLElement ("thead")}}.</td> + </tr> + <tr> + <td><code>table-footer-group</code></td> + <td>Estos elementos se comportan como elementos HTML {{HTMLElement ("tfoot")}}.</td> + </tr> + <tr> + <td><code>table-row</code></td> + <td>Estos elementos se comportan como elementos HTML {{HTMLElement ("tr")}}.</td> + </tr> + <tr> + <td><code>table-cell</code></td> + <td>Estos elementos se comportan como elementos HTML de {{HTMLElement ("td")}}.</td> + </tr> + <tr> + <td><code>table-column-group</code></td> + <td>Estos elementos se comportan como elementos HTML {{HTMLElement ("colgroup")}}.</td> + </tr> + <tr> + <td><code>table-column</code></td> + <td>Estos elementos se comportan como elementos HTML {{HTMLElement ("col")}}.</td> + </tr> + <tr> + <td><code>table-caption</code></td> + <td>Estos elementos se comportan como elementos HTML de {{HTMLElement ("caption")}}.</td> + </tr> + <tr> + <td><code>ruby-base</code> {{experimental_inline}}</td> + <td>Estos elementos se comportan como elementos {{HTMLElement ("rb")}}.</td> + </tr> + <tr> + <td><code>ruby-text</code> {{experimental_inline}}</td> + <td>Estos elementos se comportan como elementos {{HTMLElement ("rt")}}.</td> + </tr> + <tr> + <td><code>ruby-base-container</code> {{experimental_inline}}</td> + <td>Estos elementos se comportan como elementos {{HTMLElement ("rbc")}} generados como cajas anónimas.</td> + </tr> + <tr> + <td><code>ruby-text-container</code> {{experimental_inline}}</td> + <td>Estos elementos se comportan como elementos {{HTMLElement ("rtc")}}.</td> + </tr> + </tbody> + </table> + </dd> + <dt><a id="display-box" name="display-box"><display-box></a></dt> + <dd>Estos valores se definen si un elemento genera cuadros de visualización en absoluto. + <table class="standard-table"> + <thead> + <tr> + <td class="header">Valor</td> + <td class="header">Descripción</td> + </tr> + </thead> + <tbody> + <tr> + <td><code>contents</code> {{experimental_inline}}</td> + <td>Estos elementos no producen una caja específica por sí mismos. Son reemplazados por su pseudo-caja y sus cajas infantiles.</td> + </tr> + <tr> + <td><code>none</code></td> + <td> + <p>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.</p> + + <p>Para que un elemento ocupe el espacio que normalmente tendría, pero sin producir nada, utilice la propiedad {{cssxref("visibility")}}.</p> + </td> + </tr> + </tbody> + </table> + </dd> + <dt><a id="display-legacy" name="display-legacy"><display-legacy></a></dt> + <dd>CSS 2 usó una sintaxis de palabra clave única para la propiedad <code>display</code>, requiriendo palabras clave separadas para variantes de nivel de bloque e inline del mismo modo de disposición. Se definen como sigue: + <table class="standard-table"> + <thead> + <tr> + <td class="header">Valor</td> + <td class="header">Descripción</td> + </tr> + </thead> + <tbody> + <tr> + <td><code>inline-block</code></td> + <td> + <p>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)</p> + + <p>Es equivalente a <code>inline flow-root</code>.</p> + </td> + </tr> + <tr> + <td><code>inline-table</code></td> + <td> + <p>El valor <code>inline-table</code> 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.</p> + + <p>Es equivalente a <code>inline table</code>.</p> + </td> + </tr> + <tr> + <td><code>inline-flex</code></td> + <td> + <p>El elemento se comporta como un elemento en línea y se establece su contenido de acuerdo con el modelo flexbox.</p> + + <p>Es equivalente a <code>inline flex</code>.</p> + </td> + </tr> + <tr> + <td><code>inline-grid</code></td> + <td>El elemento se comporta como un elemento en línea y se establece su contenido de acuerdo con el modelo de cuadrícula.</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2> + +<h3 id="display_none"><code>display: none;</code></h3> + +<p>Al utilizar un valor de <code>none </code>en la propiedad <code>display </code>el elemento se elimina del <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">árbol de accesibilidad</a>. El efecto de esto será que este elemento y sus hijos no serán anunciados a los lectores de pantalla utilizados por no videntes.</p> + +<p>Si deseas ocultar el elemento solo de forma visible, pero que los lectores de accesibilidad lo sigan anunciando, puedes utilizar <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">un método alternativo con una combinación de propiedades de CSS</a>.</p> + +<h3 id="display_contents"><code>display: contents;</code></h3> + +<p>Los navegadores eliminarán el atributo predeterminado de <code>role</code> de cualquier elemento con una propiedad <code>display</code> que tenga un valor de <code>contents</code> del árbol de accesibilidad. Esto causará que los elementos y sus descendientes no sean anunciados a los lectores de pantalla.</p> + +<p>Esto es un bug ya reportado, para encontrar más información por favor referirse a los siguientes artículos</p> + +<ul> + <li><a class="external external-icon" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li> + <li><a class="external external-icon" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents — hiddedevries.nl</a></li> +</ul> + +<h3 id="Tablas">Tablas</h3> + +<p>Al trabajar con una tabla, si la propiedad <code>display</code> cambia al valor de <code>block</code>, <code>grid</code> o <code>flex</code> 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.</p> + +<p>Para más información por favor referirse a los siguientes artículos:</p> + +<ul> + <li><a class="external external-icon" href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/">Short note on what CSS display properties do to table semantics — The Paciello Group</a></li> + <li><a class="external external-icon" href="https://gomakethings.com/hidden-content-for-better-a11y/">Hidden content for better a11y | Go Make Things</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Hide_element" name="Hide_element">Ocultar Elementos</h3> + +<h4 id="Contenido_HTML">Contenido HTML</h4> + +<pre class="brush: html notranslate"><p> Texto visible </ p></pre> + +<h4 id="Contenido_CSS">Contenido CSS</h4> + +<pre class="brush: css notranslate"> display: none;</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample ("Hide_element", 300, 60)}}</p> + +<p><a href="/samples/cssref/display.html">Ver El Ejemplo Vivo</a></p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName ('CSS3 Display', '# the-display-properties', 'display')}}</td> + <td>{{Spec2 ('Pantalla CSS3')}}</td> + <td>Agregado <code>run-in</code>, <code>flow</code>, <code>flow-root</code>, <code>contents</code>, y los valores de varias palabras clave.</td> + </tr> + <tr> + <td>{{SpecName ('CSS3 Ruby', '# ruby-display', 'display')}}</td> + <td>{{Spec2 ('CSS3 Ruby')}}</td> + <td>Agregado <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, y <code>ruby-text-container</code>.</td> + </tr> + <tr> + <td>{{SpecName ('CSS3 Grid', '# grid-containers', 'display')}}</td> + <td>{{Spec2 ('Cuadrícula CSS3')}}</td> + <td>Se agregaron los valores del modelo de cuadrícula.</td> + </tr> + <tr> + <td>{{SpecName ('CSS3 Flexbox', '# flex-containers', 'display')}}</td> + <td>{{Spec2 ('CSS3 Flexbox')}}</td> + <td>Se agregaron los valores del modelo de caja flexible.</td> + </tr> + <tr> + <td>{{SpecName ('CSS2.1', 'visuren.html # display-prop', 'display')}}</td> + <td>{{Spec2 ('CSS2.1')}}</td> + <td>Se agregaron los valores del modelo de tabla e <code>inline-block<em>.</em></code></td> + </tr> + <tr> + <td>{{SpecName ('CSS1', '#display', 'display')}}</td> + <td>{{Spec2 ('CSS1')}}</td> + <td>Definición inicial. Valores básicos: <code>none</code>, <code>block</code>, <code>inline</code>, y <code>list-item</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Cromo</th> + <th>Borde</th> + <th>Firefox (Gecko)</th> + <th>explorador de Internet</th> + <th>Ópera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td><code>none</code>, <code>inline</code>y<code>block</code></td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>7,0</td> + <td>1,0 (85)</td> + </tr> + <tr> + <td><code>inline-block</code></td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>5,5 <sup>[4]</sup></td> + <td>7,0</td> + <td>1,0 (85)</td> + </tr> + <tr> + <td><code>list-item</code></td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>6.0</td> + <td>7,0</td> + <td>1,0 (85)</td> + </tr> + <tr> + <td rowspan="2"><code>run-in</code> {{experimental_inline}}</td> + <td>1,0 [5]</td> + <td rowspan="2">{{CompatVersionUnknown}}</td> + <td rowspan="2">{{CompatNo}}</td> + <td rowspan="2">8,0</td> + <td rowspan="2">7,0</td> + <td>1,0 (85) <sup>[5]</sup></td> + </tr> + <tr> + <td>4.0 Eliminado en 32</td> + <td>5.0 (532.5) Eliminado en 8.0</td> + </tr> + <tr> + <td><code>inline-table</code></td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>8,0</td> + <td>7,0</td> + <td>1,0 (85)</td> + </tr> + <tr> + <td><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-header-group</code>, <code>table-row-group</code>, <code>table-footer-group</code>, <code>table-row</code>, Y<code>table-caption</code></td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>8,0</td> + <td>7,0</td> + <td>1,0 (85)</td> + </tr> + <tr> + <td><code>flex</code></td> + <td> + <p>21.0 {{property_prefix("- webkit")}}</p> + + <p>29,0</p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("18.0")}} <sup>[1]</sup><br> + {{CompatGeckoDesktop("20.0")}}</td> + <td> + <p>10 {{property_prefix("- ms")}} <sup>[8]</sup><br> + 11</p> + </td> + <td>12,50</td> + <td> + <p>6.1 {{property_prefix("- webkit")}}</p> + + <p>9,0</p> + </td> + </tr> + <tr> + <td><code>inline-flex</code></td> + <td>21.0 {{property_prefix("- webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("18.0")}} <sup>[1]</sup><br> + {{CompatGeckoDesktop("20.0")}}</td> + <td>10 {{property_prefix("- ms")}} <sup>[8]</sup><br> + 11</td> + <td>12,50</td> + <td>6.1 {{property_prefix("- webkit")}}</td> + </tr> + <tr> + <td><code>grid</code> {{experimental_inline}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("- ms")}}</td> + <td>{{CompatGeckoDesktop("45.0")}} <sup>[6]</sup></td> + <td>10.0 {{property_prefix("- ms")}}</td> + <td>{{CompatOpera(44)}}</td> + <td>TP</td> + </tr> + <tr> + <td><code>inline-grid</code> {{experimental_inline}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("- ms")}}</td> + <td>{{CompatGeckoDesktop("45.0")}} <sup>[6]</sup></td> + <td>10.0 {{property_prefix("- ms")}}</td> + <td>{{CompatOpera(44)}}</td> + <td>TP</td> + </tr> + <tr> + <td><code>subgrid</code> {{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, <code>ruby-text-container</code> {{Experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("34.0")}} <sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>contents</code> {{experimental_inline}}</td> + <td>{{CompatChrome(58)}} <sup>[7]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("37")}} <sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>flow-root</code></td> + <td>{{CompatChrome(58)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("53.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(45)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Vista web de Android</th> + <th>Chrome para Android</th> + <th>Borde</th> + <th>Firefox Mobile (Gecko)</th> + <th>Teléfono IE</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>7.0 {{property_prefix("- webkit")}}</td> + </tr> + <tr> + <td><code>grid</code> {{experimental_inline}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile (44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>inline-grid</code> {{experimental_inline}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile (44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>flow-root</code></td> + <td>{{CompatChrome(58)}}</td> + <td>{{CompatChrome(58)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile (45)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Para activar el soporte de flexbox, para Firefox 18 y 19, el usuario tiene que cambiar la preferencia about: config "layout.css.flexbox.enabled" con <code>true</code>. Flexbox multilínea son compatibles desde Firefox 28.</p> + +<p>[2] Antes de Firefox 37, el valor <code>contents</code> estaba deshabilitado de forma predeterminada, y podría habilitarse configurando el <code>layout.css.display-contents.enabled</code> con preferencia <code>true</code>. En Firefox 37, se habilitó de forma predeterminada, y en Firefox 53 el pref se eliminó por completo.</p> + +<p>[3] CSS Ruby apoyo está detrás de pref "layout.css.ruby.enabled". El usuario tiene que cambiar este pref un verdadero para activarlo.</p> + +<p>[4] Sólo elementos naturales en línea.</p> + +<p>[5]No hay antes de los elementos en línea.</p> + +<p>[6]El soporte de Grid CSS no está prefijado en las compilaciones Nightly / Alpha y detrás de pref "layout.css.grid.enabled" en las compilaciones Beta / Release.</p> + +<p>[7] En Chrome, el valor <code>contents</code> está actualmente desactivado de forma predeterminada, pero se puede habilitar con el indicador "Experimental Plataforma Web características".</p> + +<p>[8] En IE 10, sólo los valores prefijados especiales, <code>-ms-flexbox</code>y <code>-ms-inline-flexbox</code>, se reconocen.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{cssxref("visibility")}}, {{cssxref("float")}}, {{cssxref("posición")}}</li> + <li>{{cssxref("flex")}}</li> +</ul> diff --git a/files/es/web/css/elemento_reemplazo/index.html b/files/es/web/css/elemento_reemplazo/index.html new file mode 100644 index 0000000000..a8bedc65a2 --- /dev/null +++ b/files/es/web/css/elemento_reemplazo/index.html @@ -0,0 +1,19 @@ +--- +title: Elemento de reemplazo +slug: Web/CSS/Elemento_reemplazo +tags: + - CSS + - CSS Referência + - Intermediate +translation_of: Web/CSS/Replaced_element +--- +<div> + {{CSSRef()}}</div> +<h2 id="Summary">Summary</h2> +<p>Dentro de CSS tenemos los <strong>elementos de reemplazo</strong>, cuya representacion esta fuera del ambito de propio CSS. Son un tipo de objeto externo, por tanto su representacion es independiente de CSS. Algunos objetos que normalmente funcionan como objetos de reemplazo son {{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} o elementos de formulario como {{HTMLElement("textarea")}}, {{HTMLElement("input")}}. Algunos elementos como {{HTMLElement("audio")}} or {{HTMLElement("canvas")}} ejercen como elementos de reemplazo solo en casos especificos. Los objetos insertados a traves de las propiedades CSS {{cssxref("content")}} son <em>objetos de reemplazo anonimos.</em>.</p> +<p>CSS gestiona elementos de reemplazo en casos concretos, por ejemplo al calcular los margenes y algunos <code>auto</code> valores.</p> +<p>Recuerda que algunos elementos de reemplazo, no todos, tienen dimensiones intrinsecas o linea de base establecida, las cuales son utilizadas por propiedades de CSS como {{cssxref("vertical-align")}}.</p> +<h2 id="Ver_tambien">Ver tambien:</h2> +<ul> + <li>{{CSS_key_concepts()}}</li> +</ul> diff --git a/files/es/web/css/env()/index.html b/files/es/web/css/env()/index.html new file mode 100644 index 0000000000..18e6a48310 --- /dev/null +++ b/files/es/web/css/env()/index.html @@ -0,0 +1,27 @@ +--- +title: env() +slug: Web/CSS/env() +tags: + - CSS + - Experimental + - Función CSS + - Variables CSS + - env + - env() +translation_of: Web/CSS/env() +--- +<p><span class="seoSummary">La función <a href="https://developer.mozilla.org/es/docs/Web/CSS">CSS</a> <code><strong>env</strong></code><strong><code>()</code></strong> puede ser utilizada para insertar el valor de una variable de entorno, que sea global para un documento en particular, al contrario de una <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*">propiedad personalizada</a>. Entonces, la funcion env() puede ser utilizada para remplazar el valor en ubicaciones arbitrarias, de la misma manera que la función <a href="https://developer.mozilla.org/es/docs/Web/CSS/var">var()</a>.</span></p> + +<p>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.</p> + +<p>Las Variables de Entorno CSS están actualmente en curso de definición en un borrador de Recomendación: <a href="https://drafts.csswg.org/css-env-1/">CSS Environment Variables Module Level 1</a>.</p> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<div class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si quiere contribuir a estos datos, por favor revisar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y enviarnos una pull request.</div> + +<p>{{Compat("css.properties.custom-property.env")}}</p> +</div> + +<p> </p> diff --git a/files/es/web/css/especificidad/index.html b/files/es/web/css/especificidad/index.html new file mode 100644 index 0000000000..6a42fdb53f --- /dev/null +++ b/files/es/web/css/especificidad/index.html @@ -0,0 +1,239 @@ +--- +title: Especificidad +slug: Web/CSS/Especificidad +tags: + - CSS + - Ejemplo + - Guía + - Principiante + - Web +translation_of: Web/CSS/Specificity +--- +<p>La <strong>especificidad</strong><span> es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de </span><a href="https://developer.mozilla.org/es/CSS/CSS_Reference#Selectors">selectores CSS</a><span>.</span></p> + +<h2 id="¿Cómo_se_calcula">¿Cómo se calcula?</h2> + +<p>La especificidad es un peso (importancia o valor) que se le asigna a una declaración CSS dada, determinada por el número correspondiente de cada <a href="https://developer.mozilla.org/es/docs/Web/CSS/Especificidad#Tipos_de_selectores">tipo de selector</a>. Cuando varias declaraciones tienen igual especificidad, se aplicará al elemento la última declaración encontrada en el CSS. La especificidad solo se aplica cuando el mismo elemento es objetivo de múltiples declaraciones. Según las reglas de CSS, en caso de que un elemento sea objeto de una <a href="https://developer.mozilla.org/es/docs/Web/CSS/Especificidad#Elementos_objetivos_de_una_declaración_directa_vs_estilos_heredados">declaración directa</a>, esta siempre tendrá preferencia sobre las reglas heredadas de su ancestro.</p> + +<div class="note"> +<p><strong>Nota:</strong> La <u>proximidad de elementos</u> en el árbol del documento no tiene efecto en la especificidad.</p> +</div> + +<h3 id="Tipos_de_selectores">Tipos de selectores</h3> + +<p>La siguiente lista de tipos de selectores incrementa en función de la especificidad:</p> + +<ol start="0"> + <li><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/Type_selectors">Selectores de tipo</a> (p.e., <code>h1</code>) y pseudo-elementos (p.e., <code>::before</code>).</li> + <li><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/Class_selectors">Selectores de clase</a> (p.e., <code>.example</code>), selectores de atributos (p.e., <code>[type="radio"]</code>) y pseudo-clases (p.e., <code>:hover</code>).</li> + <li><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/ID_selectors">Selectores de ID</a> (p.e., <code>#example</code>).</li> +</ol> + +<p>El selector universal ({{CSSxRef("Universal_selectors", "*")}}), los combinadores ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator">'<code> </code>'</a>, {{CSSxRef("Column_combinator", "||")}}) y la pseudo-clase de negación ({{CSSxRef(":not", ":not()")}}) no tienen efecto sobre la especificidad. (Sin embargo, los selectores declarados <em>dentro de </em><code>:not()</code> si lo tienen.)</p> + +<p>Para más información, visita <a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Cascada_y_herencia#Especificidad">"Especificidad" en "Cascada y herencia"</a>, también puedes visitar: <a href="https://specifishity.com/">https://specifishity.com</a></p> + +<p>Los estilos <em>inline</em> añadidos a un elemento (p.e., <code>style="font-weight:bold"</code>) siempre sobrescriben a cualquier estilo escrito en hojas de estilo externas, por lo que se puede decir que tienen la mayor especificidad.</p> + +<h3 id="La_excepción_!important">La excepción !important</h3> + +<p>Cuando se emplea <code>important</code> en una declaración de estilo, esta declaración sobrescribe a cualquier otra. Aunque técnicamente <code><font face="Courier New">!important</font></code> no tiene nada que ver con especificidad, interactúa directamente con esta. Sin embargo, el uso de <code><font face="Courier New">!important</font></code> es una <strong>mala práctica</strong> y debería evitarse porque hace que el código sea más difícil de depurar al romper la <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade">cascada (artículo en inglés)</a><strong><em> </em></strong>natural de las hojas de estilo. Cuando dos declaraciones en conflicto con el <code><font face="Courier New">!important</font></code> son aplicadas al mismo elemento, se aplicará la declaración con mayor especificidad. </p> + +<p><strong>Algunas reglas de oro:</strong></p> + +<ul> + <li>Busca <strong>siempre</strong> una manera de emplear la especificidad antes de considerar el uso de <code><font face="Courier New">!important</font></code><font face="Courier New">.</font></li> + <li>Usa <code><font face="Courier New">!important</font></code> <strong>solo </strong>en declaraciones específicas de CSS que sobrescriban CSS externo (de librerías externas como Bootstrap o normalize.css).</li> + <li><strong>Nunca</strong> uses <code>!important</code> cuando estés intentando escribir un plugin/mashup.</li> + <li><strong>Nunca</strong> uses <code>!important</code> en todo el código CSS.</li> +</ul> + +<p><strong>En lugar de usar <code>!important</code>, considera:</strong></p> + +<ol> + <li>Hacer un mejor uso de las propiedades en cascada de CSS.</li> + <li> + <p>Usar reglas más específicas. Indicando uno o más elementos antes del elemento que estás seleccionando, la regla se vuelve más específica y gana mayor prioridad:</p> + + <pre class="brush: html notranslate"><div id="test"> + <span>Text</span> +</div> +</pre> + + <pre class="brush: css notranslate">div#test span { color: green; } +div span { color: blue; } +span { color: red; }</pre> + </li> + <li>Como un caso especial sin sentido para (2), duplicar selectores simples para aumentar la especificidad cuando no tiene nada más que especificar + <pre class="notranslate">#myId#myId span { color: yellow; } +.myClass.myClass span { color: orange; }</pre> + </li> +</ol> + +<h4 id="Cómo_se_debería_usar_!important"><strong>Cómo se debería usar !important:</strong></h4> + +<h5 id="A_Sobrescribiendo_los_estilos_en_linea">A) Sobrescribiendo los estilos en linea</h5> + +<ol> + <li>Tienes un archivo CSS que establece aspectos visuales de tu sitio de manera global.</li> + <li>Tú (u otros) usan estilos inline en los propios elementos. Esto es considerado como una muy mala práctica. </li> +</ol> + +<p><span>En este caso, puedes establecer ciertos estilos en tu archivo CSS global como importantes, superando así los estilos en línea configurados directamente en los elementos. </span></p> + +<p>Ejemplo del mundo real: Algunos <strong>plugins jQuery</strong> muy mal escritos que usan estilos inline.</p> + +<p>B) Otro escenario:</p> + +<pre class="default prettyprint prettyprinted notranslate"><code><span class="com">#someElement p {</span><span class="pln"> + color</span><span class="pun">:</span><span class="pln"> blue</span><span class="pun">;</span><span class="pln"> +</span><span class="pun">}</span><span class="pln"> + +p</span><span class="pun">.</span><span class="pln">awesome </span><span class="pun">{</span><span class="pln"> + color</span><span class="pun">:</span><span class="pln"> red</span><span class="pun">;</span><span class="pln"> +</span><span class="pun">}</span></code></pre> + +<p>¿Cómo haces que los párrafos <code>awesome</code> se vuelvan siempre rojos, incluso los que se encuentren dentro de <code>#someElement</code>? Sin <code>!important</code>, la primera regla tendrá más especificidad y ganará a la segunda.</p> + +<h4 id="Cómo_sobrescribir_!important"><strong>Cómo sobrescribir !important</strong></h4> + +<p>A) Simplemente añade otra regla CSS con <code>!important</code> y, o bien da al selector una especificidad mayor (añadiendo una etiqueta, id o clase al selector), o añadiendo una regla CSS con el mismo selector en un punto posterior al ya existente. Esto funciona porque en caso de empate en especificidad, la última regla prevalece.</p> + +<p>Algunos ejemplos con una gran especificidad:</p> + +<pre class="default prettyprint prettyprinted notranslate"><code><span class="pln">table td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln"> +</span><span class="pun">.</span><span class="pln">myTable td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span><span class="pln"> +</span><span class="com">#myTable td {height: 50px !important;}</span></code></pre> + +<p>B) O añade el mismo selector después de uno existente:</p> + +<pre class="default prettyprint prettyprinted notranslate"><code><span class="pln">td </span><span class="pun">{</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pln"> </span><span class="pun">!</span><span class="pln">important</span><span class="pun">;}</span></code></pre> + +<p>C) O reescribe la regla original para evitar el uso de <code>!important</code>.</p> + +<p><strong>Para más información, visita (en inglés): </strong></p> + +<p><a href="http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css">http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css</a></p> + +<p><a href="http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean">http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean</a></p> + +<p><a href="http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css">http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css</a></p> + +<p><a href="http://stackoverflow.com/questions/11178673/how-to-override-important">http://stackoverflow.com/questions/11178673/how-to-override-important</a></p> + +<p><a href="http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css">http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css</a></p> + +<h3 id="La_excepción_not">La excepción <code>:not</code></h3> + +<p>La pseudo-clase negación :<code>not</code> <em>no</em> es considerada una pseudo-clase para el cálculo de la especificidad. Pero los selectores colocados dentre de ella, si cuentan como selectores normales a la hora de determinar el valor de los <a href="https://developer.mozilla.org/es/docs/Web/CSS/Especificidad#Tipos_de_selectores">tipos de selectores</a>. </p> + +<p>Aquí tienes un pedazo de CSS:</p> + +<pre class="brush: css notranslate">div.outer p { + color:orange; +} +div:not(.outer) p { + color: lime; +} +</pre> + +<p>cuando se usa con el siguiente HTML:</p> + +<pre class="brush: html notranslate"><div class="outer"> + <p>Esto está en el outer div.</p> + <div class="inner"> + <p>Este texto está en el inner div.</p> + </div> +</div> +</pre> + +<p>Debería aparecer en pantalla como:</p> + +<p><span style="color: orange;">Esto está en el outer div<br> + <br> + <span><span style="color: lime;">Este texto está en el inner div</span></span></span></p> + +<h3 id="Especificidad_basada_en_la_forma">Especificidad basada en la forma</h3> + +<p>La especificidad está basada en la forma de un selector. En el siguiente caso, el selector <code>*[id="foo"]</code> cuenta como un atributo selector para la determinación de la especificidad de un selector, incluso cuando se selecciona un ID.</p> + +<p>Las siguientes declaraciones de estilo:</p> + +<pre class="brush: css notranslate">*#foo { + color: green; +} +*[id="foo"] { + color: purple; +} +</pre> + +<p>cuando se usan con este marcador:</p> + +<pre class="brush: html notranslate"><p id="foo">Soy un texto de ejemplo.</p> +</pre> + +<p>Se acabarán viendo así:</p> + +<p style="color: green;">Soy un texto de ejemplo</p> + +<p>Debido a que coincide con el mismo elemento, pero el selector ID tiene una mayor especificidad.</p> + +<h3 id="Ignorancia_de_proximidad_en_el_árbol"><a id="tree-proximity-ignorance" name="tree-proximity-ignorance">Ignora</a>ncia de proximidad en el árbol</h3> + +<p>La proximidad de un elemento con otros a los que se hace referencia en un selector determinado, no tiene impacto en la especificidad. La siguiente declaración de estilo:</p> + +<pre class="brush: css notranslate">body h1 { + color: green; +} +html h1 { + color: purple; +} +</pre> + +<p>Con el siguiente HTML:</p> + +<pre class="brush: html notranslate"><html> +<body> + <h1>¡Aquí va un título!</h1> +</body> +</html> +</pre> + +<p>Se mostrará como:</p> + +<h1 id="¡Aquí_va_un_título!" style="color: purple;">¡Aquí va un título!</h1> + +<p>Porque las dos declaraciones tienen un resultado de tipo de selector igual, pero el selector <code>html h1 </code>se ha declarado después.</p> + +<h3 id="Declaración_directa_vs_estilos_heredados"><a id="directly-targeted-elements" name="directly-targeted-elements">Declaración directa vs estilos heredados</a></h3> + +<p>Los estilos para elementos objetivo de una declaración directa siempre tienen preferencia sobre los estilos heredados, sin importar la especificidad de la regla heredada.</p> + +<pre class="brush: css notranslate" style="font-size: 14px;">#parent { + color: green; +} +h1 { + color: purple; +}</pre> + +<p>Con el siguiente HTML:</p> + +<pre class="brush: html notranslate" style="font-size: 14px;"><html> +<body id="parent"> + <h1>¡Aquí va un título!</h1> +</body> +</html></pre> + +<p>Se verá así:</p> + +<h1 id="¡Aquí_va_un_título!_2" style="color: purple;">¡Aquí va un título!</h1> + +<p>Porque el selector <code>h1</code> selecciona el objetivo de manera específica, pero el color verde simplemente es heredad de su padre.</p> + +<h2 id="Consulta_también_en_inglés">Consulta también (en inglés)</h2> + +<ul> + <li>Specificity Calculator: An interactive website to test and understand your own CSS rules - <a href="https://specificity.keegan.st/">https://specificity.keegan.st/</a></li> + <li>CSS3 Selectors Specificity - <a class="external" href="http://www.w3.org/TR/selectors/#specificity" rel="freelink">http://www.w3.org/TR/selectors/#specificity</a></li> + <li>{{ CSS_key_concepts() }}</li> +</ul> diff --git a/files/es/web/css/filter-function/blur()/index.html b/files/es/web/css/filter-function/blur()/index.html new file mode 100644 index 0000000000..a60e4408eb --- /dev/null +++ b/files/es/web/css/filter-function/blur()/index.html @@ -0,0 +1,40 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur() +tags: + - CSS + - Efectos de Filtro + - Función CSS + - Referencia +translation_of: Web/CSS/filter-function/blur() +--- +<div>{{cssref}}</div> + +<p>La función CSS <strong><code>blur()</code></strong> aplica un <a href="https://en.wikipedia.org/wiki/Gaussian_blur">desenfoque Gaussiano</a> a la imagen de entrada. El resultado es un {{cssxref("<filter-function>")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-blur.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">blur(<em>radio</em>)</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>radio</code></dt> + <dd>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 <code>0</code> deja la entrada sin cambios. El valor de laguna para la interpolación es <code>0</code>.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css notranslate">blur(0) /* Sin efecto */ +blur(8px) /* Desenfoque con 8px de radio */ +blur(1.17rem) /* Desenfoque con 1.17rem de radio */</pre> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{cssxref("<filter-function>")}}</li> +</ul> diff --git a/files/es/web/css/filter-function/brightness()/index.html b/files/es/web/css/filter-function/brightness()/index.html new file mode 100644 index 0000000000..8d51f5d70c --- /dev/null +++ b/files/es/web/css/filter-function/brightness()/index.html @@ -0,0 +1,45 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness() +translation_of: Web/CSS/filter-function/brightness() +--- +<div>{{cssref}}</div> + +<p>La función <strong><code>brightness()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> aplica un multiplicador linear a la imagen, haciendo que su apariencia sea más brallante u oscura. Su resultado es un {{cssxref("<filter-function>")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-brightness.html")}}</div> + +<p class="hidden">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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envie un pull request.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">brightness(<em>valor</em>)</pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>valor</code></dt> + <dd>El brillo resultante, es definido como un {{cssxref("<number>")}} o un {{cssxref("<percentage>")}}. Un valor debajo del <code>100%</code> oscurecerá la imagen, como así un valor superior al <code>100%</code> le dará más brillo. Un valor de <code>0%</code> dará como resultado una imagen completamente negra, siendo el valor de <code>100%</code> una imagen sin cambios. El valor de la Interpolación es <code>1</code>.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css notranslate">brightness(0%) /* Completamente negro */ +brightness(0.4) /* 40% de brillo */ +brightness(1) /* Sin Efecto */ +brightness(200%) /* Doble de Brillo */</pre> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{cssxref("<filter-function>")}}</li> + <li>{{cssxref("filter-function/blur", "blur()")}}</li> + <li>{{cssxref("filter-function/contrast", "contrast()")}}</li> + <li>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</li> + <li>{{cssxref("filter-function/grayscale", "grayscale()")}}</li> + <li>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</li> + <li>{{cssxref("filter-function/invert", "invert()")}}</li> + <li>{{cssxref("filter-function/opacity", "opacity()")}}</li> + <li>{{cssxref("filter-function/saturate", "saturate()")}}</li> + <li>{{cssxref("filter-function/sepia", "sepia()")}}</li> +</ul> diff --git a/files/es/web/css/filter-function/index.html b/files/es/web/css/filter-function/index.html new file mode 100644 index 0000000000..b49712c5d1 --- /dev/null +++ b/files/es/web/css/filter-function/index.html @@ -0,0 +1,65 @@ +--- +title: <filter-function> +slug: Web/CSS/filter-function +tags: + - CSS + - Efectos de Filtro + - Referencia + - Tipos de dato CSS +translation_of: Web/CSS/filter-function +--- +<div>{{cssref}}</div> + +<p>El <a href="/es/docs/Web/CSS/CSS_Types">tipo de datos</a> <a href="/es/docs/Web/CSS">CSS</a> <code><strong><filter-function></strong></code> 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")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>El tipo de datos <code><filter-function></code> 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.</p> + +<dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur">blur()</a></code></dt> + <dd>Difumina la imagen.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness">brightness()</a></code></dt> + <dd>Hace que la imagen sea más brillante o más oscura.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast">contrast()</a></code></dt> + <dd>Aumenta o disminuye el contraste de la imagen.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow">drop-shadow()</a></code></dt> + <dd>Aplica una sombra paralela detrás de la imagen.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale">grayscale()</a></code></dt> + <dd>Convierte la imagen a escala de grises.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate">hue-rotate()</a></code></dt> + <dd>Cambia el tono general de la imagen.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert">invert()</a></code></dt> + <dd>Invierte los colores de la imagen.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity">opacity()</a></code></dt> + <dd>Hace que la imagen sea transparente.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate">saturate()</a></code></dt> + <dd>Super-saturado o desaturado la imagen de entrada.</dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia">sepia()</a></code></dt> + <dd>Convierte la imagen a sepia.</dd> +</dl> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Filters 1.0', '#typedef-filter-function', '<filter-function>') }}</td> + <td>{{ Spec2('Filters 1.0') }}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Propiedades que usan este tipo de datos: {{cssxref("filter")}} y {{cssxref("backdrop-filter")}}</li> +</ul> diff --git a/files/es/web/css/filter-function/url/index.html b/files/es/web/css/filter-function/url/index.html new file mode 100644 index 0000000000..e84d5c30d0 --- /dev/null +++ b/files/es/web/css/filter-function/url/index.html @@ -0,0 +1,32 @@ +--- +title: url() +slug: Web/CSS/filter-function/url +tags: + - CSS + - Referencia +translation_of: Web/CSS/url() +--- +<div>{{cssref}}</div> + +<p>La función de <a href="/es/docs/Web/CSS">CSS</a> <strong><code>url()</code></strong> usa un <a href="/es/docs/Web/SVG/Element/filter"> filtro SVG</a> para cambiar la apariencia en la imagen de entrada.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">url(<em>location</em>)</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>location</code></dt> + <dd>La {{cssxref("<url>")}} de un archivo {{glossary("XML")}} que especifique un filtro SVG, y puede incluir un ancla a un elemento filtro específico.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: css">url(resources.svg#c1)</pre> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{cssxref("<filter-function>")}}</li> +</ul> diff --git a/files/es/web/css/filter/index.html b/files/es/web/css/filter/index.html new file mode 100644 index 0000000000..6ae8e8e2dd --- /dev/null +++ b/files/es/web/css/filter/index.html @@ -0,0 +1,1194 @@ +--- +title: filter +slug: Web/CSS/filter +tags: + - CSS + - Filtro + - Filtro SVG + - Propiedad CSS + - Referencia + - SVG +translation_of: Web/CSS/filter +--- +<p>{{SeeCompatTable}}{{CSSRef}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>filter</code></strong> 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.</p> + +<p>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 <a href="/es/docs/Web/SVG/Element/filter" title="/en/SVG/Element/filter">filtro de un elemento SVG</a>.</p> + +<div class="note"><strong>Nota:</strong> Versiones anteriores (4.0 hasta 9.0) del navegador Internet Explorer de Windows admiten una propiedad <a class="external" href="https://msdn.microsoft.com/es-es/library/ms532853(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx">"filter"</a> no incluida en el estándar que ha quedado en desuso.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">filter: url("filters.svg#filter-id"); +filter: blur(5px); +filter: brightness(0.4); +filter: contrast(200%); +filter: drop-shadow(16px 16px 20px blue); +filter: grayscale(50%); +filter: hue-rotate(90deg); +filter: invert(75%); +filter: opacity(25%); +filter: saturate(30%); +filter: sepia(60%); + +/* Apply multiple filters */ +filter: contrast(175%) brightness(3%); + +/* Global values */ +filter: inherit; +filter: initial; +filter: unset; +</pre> + +<p>Con una función, use el siguiente código:</p> + +<pre class="syntaxbox">filter: <filter-function> [<filter-function>]* | none +</pre> + +<p>Para referenciar a al valor {{SVGElement("filter")}} de un elemento SVG, use el siguiente código:</p> + +<pre class="syntaxbox">filter: url(file.svg#filter-element-id) +</pre> + +<h3 id="Interpolación">Interpolación</h3> + +<p>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.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>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.</p> + +<pre class="brush: 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); +}</pre> + +<p>Ejemplos del uso de la función con el recurso SVG se muestran a continuación.</p> + +<pre class="brush: css">.target { filter: url(#c1); } + +.mydiv { filter: url(commonfilters.xml#large-blur) } +</pre> + +<h2 id="Funciones">Funciones</h2> + +<p>Para utilizar la propiedad CSS <code>filter</code>, 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).</p> + +<h3 id="url()"><code>url()</code></h3> + +<p>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.</p> + +<pre class="brush: css">filter: url(resources.svg#c1) +</pre> + +<h3 id="blur()"><code>blur()</code></h3> + +<p>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 <code>0</code>. El parámetro se especifica como una longitud de CSS, pero no acepta porcentajes.</p> + +<pre class="brush: css">filter: blur(5px) +</pre> + +<div id="blur_example" style="display: none;"> +<pre class="brush: html"> <table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> + <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg id="img3" viewbox="0 0 233 176"> + <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" > + <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> + </filter> + <image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" /> +</svg><div></td> + <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table></pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:blur(5px); + -webkit-filter:blur(5px); + -o-filter:blur(5px); + -ms-filter:blur(5px); + filter:blur(5px); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + height: 100%; + width: 85%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('blur_example','100%','236px','')}}</p> + +<h3 id="brightness()"><code>brightness()</code></h3> + +<p>Se aplica una multiplicación lineal a la imagen, haciendo que parezca más o menos brillante. Un valor de <code>0%</code> convertirá la imagen completamente a negro. Un valor de <code>100%</code> 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 <code>100%</code> aumentarán el brillo de la imagen. El valor lagunar (si no se especifica ningún valor) es <code>1</code> (equivalente a <code>100%</code>).</p> + +<pre class="brush: css">filter: brightness(0.5)</pre> + +<pre class="brush: html"><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></pre> + +<div id="brightness_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> + <td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217"> + <filter id="brightness"> + <feComponentTransfer> + <feFuncR type="linear" slope="2"/> + <feFuncG type="linear" slope="2"/> + <feFuncB type="linear" slope="2"/> + </feComponentTransfer> + </filter> + <image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /> +</svg><div></td> + <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:brightness(2); + -webkit-filter:brightness(2); + -o-filter:brightness(2); + -ms-filter:brightness(2); + filter:brightness(2); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + height:100%; + width: 85%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('brightness_example','100%','231px','')}}</p> + +<h3 id="contrast()"><code>contrast()</code></h3> + +<p>Ajusta el contraste del elemento. Un valor superior a <code>0%</code> creará una imagen completamente gris. Un valor de <code>100%</code> deja al elemento sin cambios. Valores superiores a <code>100%</code> son permitidos, dando como resultado mayor contraste. El valor lagunar de interpolación (si no se especifica ningún valor) es <code>1</code> (equivalente a <code>100%</code>).</p> + +<pre class="brush: css">filter: contrast(200%) +</pre> + +<pre class="brush: html"><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> +</pre> + +<div id="contrast_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151"> + <filter id="contrast"> + <feComponentTransfer> + <feFuncR type="linear" slope="2" intercept="-0.5"/> + <feFuncG type="linear" slope="2" intercept="-0.5"/> + <feFuncB type="linear" slope="2" intercept="-0.5"/> + </feComponentTransfer> + </filter> + <image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /> +</svg><div></td> + <td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:contrast(200%); + -webkit-filter:contrast(200%); + -o-filter:contrast(200%); + -ms-filter:contrast(200%); + filter:contrast(200%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('contrast_example','100%','203px','')}}</p> + +<h3 id="drop-shadow()"><code>drop-shadow()</code></h3> + +<p>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 <code><shadow></code> son los siguientes:</p> + +<dl> + <dt><code><offset-x></code> <code><offset-y></code> <small>(requerido)</small></dt> + <dd>Son dos valores {{cssxref("<length>")}} para establecer la posición de la sobra respecto a la imagen. <code><offset-x></code> especifica la distancia horizontal. Valores negativos establecen la sombra a la izquierda del elemento. <code><offset-y></code> especifica la distancia vertical. Valores negativos establecen la sombra arriba del elemento. Véase {{cssxref("<length>")}} para unidades posibles.<br> + Si ambos valores son <code>0</code>, la sombra será colocada detrás del elemento (y puede generar un efecto de desenfoque si se establecen <code><blur-radius></code> y/o <code><spread-radius></code>).</dd> + <dt><code><blur-radius></code> <small>(opcional)</small></dt> + <dd>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á <code>0</code> (el borde de la sombra es nítido).</dd> + <dt><code><spread-radius></code> <small>(opcional)</small></dt> + <dd>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á <code>0</code> (la sombra tendrá el mismo tamaño del elemento). <br> + Nota: Webkit, y tal vez otros navegadores, no soportan este cuarto valor; si se incluye, no se aplicará el filtro.</dd> + <dt><code><color></code> <small>(opcional)</small></dt> + <dd>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 <code><color></code>.</dd> +</dl> + +<pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre> + +<pre class="brush: html"><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> +</pre> + +<div id="shadow_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187"> + <filter id="drop-shadow"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + <feOffset dx="16" dy="16"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" /> +</svg><div></td> + <td><img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /></td> + </tr> + <tr> + <td><img alt="Test_Form_4 distorded border - Original image" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> + <td><img alt="Test_Form_4 distorded border - Live example" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> + <td> + <div class="svg-container"> + <svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187"> + <filter id="drop-shadow2"> + <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> + <feOffset dx="8" dy="10"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <image xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png<span style="font-size: 1rem;">" filter="url(#drop-shadow2)" width="213px" height="161px" /></span> + </svg> + <div> + </td> + <td><img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: drop-shadow(16px 16px 10px black); + -webkit-filter: drop-shadow(16px 16px 10px black); + -o-filter: drop-shadow(16px 16px 10px black); + -ms-filter: drop-shadow(16px 16px 10px black); + filter: drop-shadow(16px 16px 10px black); +} +#img12 { + width:100%; + height:auto; + -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + -o-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); +} +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +#irregular-shape { + width: 64%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3, #img13 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('shadow_example','100%','300px','')}}</p> + +<h3 id="grayscale()"><code>grayscale()</code></h3> + +<p>Convierte la imagen a escala de grises. El valor del parámetro define la proporción de la conversión. Un valor de <code>100%</code> es completamente a escala de grises. Un valor de <code>0%</code> deja la imagen sin cambios. Valores entre <code>0%</code> y <code>100%</code> son múltiplos lineales de este efecto. Si el parámetro no es incluido, se usa el valor de <code>0</code>.</p> + +<pre class="brush: css">filter: grayscale(100%)</pre> + +<div id="grayscale_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184"> + <filter id="grayscale"> + <feColorMatrix type="matrix" + values="0.2126 0.7152 0.0722 0 0 + 0.2126 0.7152 0.0722 0 0 + 0.2126 0.7152 0.0722 0 0 + 0 0 0 1 0"/> + </filter> + <image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /> +</svg><div></td> + <td><img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:grayscale(100%); + -webkit-filter:grayscale(100%); + -o-filter:grayscale(100%); + -ms-filter:grayscale(100%); + filter:grayscale(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('grayscale_example','100%','209px','')}}</p> + +<h3 id="hue-rotate()"><code>hue-rotate()</code></h3> + +<p>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 <code>0deg</code> deja la imagen sin cambios. Si el parámetro del ángulo no es especiicado, se usa valor de <code>0deg</code>. Aunque no hay valor máximo, el efecto de valores encima de <code>360deg</code> da la vuelta al círculo de colores.</p> + +<pre class="brush: css">filter: hue-rotate(90deg)</pre> + +<div id="huerotate_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" + values="90"/> + </filter> + <image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /> +</svg><div></td> + <td><img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:hue-rotate(90deg); + -webkit-filter:hue-rotate(90deg); + -o-filter:hue-rotate(90deg); + -ms-filter:hue-rotate(90deg); + filter:hue-rotate(90deg); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> + <filter id="svgHueRotate" > + <feColorMatrix type="hueRotate" values="[angle]" /> + <filter /> +</svg></pre> + +<p>{{EmbedLiveSample('huerotate_example','100%','221px','')}}</p> + +<h3 id="invert()"><code>invert()</code></h3> + +<p>Invierte los colores de la imagen. El parámetro define la proporción de la conversión. Un valor de <code>100%</code> invierte completamente la imagen. Un valor de <code>0%</code> deja a la imagen sin cambios. Valores entre <code>0%</code> y <code>100%</code> son múltiplos lineales del efecto. Si el parámetro no es especificado, se usa un valor de <code>0</code>.</p> + +<pre class="brush: css">filter: invert(100%)</pre> + +<div id="invert_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276"> + <filter id="invert"> + <feComponentTransfer> + <feFuncR type="table" tableValues="1 0"/> + <feFuncG type="table" tableValues="1 0"/> + <feFuncB type="table" tableValues="1 0"/> + </feComponentTransfer> + </filter> + <image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /> +</svg><div></td> + <td><img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: invert(100%); + -webkit-filter: invert(100%); + -o-filter: invert(100%); + -ms-filter: invert(100%); + filter: invert(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('invert_example','100%','407px','')}}</p> + +<h3 id="opacity()"><code>opacity()</code></h3> + +<p>Aplica transparencia a la imagen. El valor del parámetro define la proporción de la conversión. Un valor de <code>0%</code> es completamente transparente. Un valor de <code>100%</code> deja la imagen sin cambios. Valores entre <code>0%</code> y <code>100%</code> 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 <code>1</code>. 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.</p> + +<pre class="brush: css">filter: opacity(50%)</pre> + +<div id="opacity_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183"> + <filter id="opacity"> + <feComponentTransfer> + <feFuncA type="table" tableValues="0 0.5"> + </feComponentTransfer> + </filter> + <image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /> +</svg><div></td> + <td><img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: opacity(50%); + -webkit-filter: opacity(50%); + -o-filter: opacity(50%); + -ms-filter: opacity(50%); + filter: opacity(50%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('opacity_example','100%','210px','')}}</p> + +<h3 id="saturate()"><code>saturate()</code></h3> + +<p>Aplica saturación a la imagen. El valor del parámetro define la proporción de la conversión. Un valor de <code>0%</code> es completamente sin saturación. Un valor de <code>100%</code> deja la imagen sin cambios. Otros valores son múltiplos lineales del efecto. Valores por encima de <code>100%</code> son permitidos, dando resultados de sobresaturación. Si no se especifica el parámetro, se usa el valor de <code>1</code>.</p> + +<pre class="brush: css">filter: saturate(200%)</pre> + +<div id="saturate_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239"> + <filter id="saturate"> + <feColorMatrix type="saturate" + values="2"/> + </filter> + <image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /> +</svg><div></td> + <td><img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: saturate(200%); + -webkit-filter: saturate(200%); + -o-filter: saturate(200%); + -ms-filter: saturate(200%); + filter: saturate(200%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p> + +<h3 id="sepia()"><code>sepia()</code></h3> + +<p>Convierte la imagen a sepia. El valor del parámetro define la proporción de la conversión. Un valor de <code>100%</code> es completamente sepia. Un valor de <code>0%</code> deja la imagen sin cambios. Valores entre <code>0%</code> y <code>100%</code> son múltiplos lineales del efecto. Si no se especifica el parámetro, se usa el valor de <code>0</code>.</p> + +<pre class="brush: css">filter: sepia(100%)</pre> + +<div id="sepia_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">SVG Equivalent</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td> + <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194"> + <filter id="sepia"> + <feColorMatrix type="matrix" + values="0.393 0.769 0.189 0 0 + 0.349 0.686 0.168 0 0 + 0.272 0.534 0.131 0 0 + 0 0 0 1 0"/> + </filter> + <image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /> +</svg><div></td> + <td><img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: sepia(100%); + -webkit-filter: sepia(100%); + -o-filter: sepia(100%); + -ms-filter: sepia(100%); + filter: sepia(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('sepia_example','100%','229px','')}}</p> + +<h2 id="Combinando_funciones">Combinando funciones</h2> + +<p>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.</p> + +<pre class="brush: css">filter: contrast(175%) brightness(3%)</pre> + +<div id="combination_example" style="display: none;"> +<pre class="brush: html"><table class="standard-table"> + <thead> + <tr> + <th align="left" scope="col">Original image</th> + <th align="left" scope="col">Live example</th> + <th align="left" scope="col">Static example</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td> + <td><img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /></td> + </tr> + </tbody> +</table> +</pre> + +<pre class="brush: css">html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: contrast(175%) brightness(103%); + -webkit-filter: contrast(175%) brightness(103%); + -o-filter: contrast(175%) brightness(103%); + -ms-filter: contrast(175%) brightness(103%); + filter: contrast(175%) brightness(103%); +} +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +</pre> +</div> + +<p>{{EmbedLiveSample('combination_example','100%','209px','')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}</td> + <td>{{ Spec2('Filters 1.0') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome("18.0")}}{{ property_prefix("-webkit") }} [4]</td> + <td>{{ CompatGeckoDesktop(35) }} [1] [2]</td> + <td>{{ CompatNo() }} [3]</td> + <td>{{CompatOpera("15.0")}}{{ property_prefix("-webkit")}}</td> + <td>{{ CompatSafari("6.0") }}{{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td>En elementos SVG</td> + <td>{{CompatNo}} (See bug 109224)</td> + <td>{{ CompatGeckoDesktop(35) }}</td> + <td>{{ CompatNo}}</td> + <td>{{ CompatNo}}</td> + <td>{{ CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatAndroid("4.4") }}{{ property_prefix("-webkit")}}</td> + <td>{{ CompatGeckoDesktop(35) }} [1] [2]</td> + <td>{{ CompatNo() }}</td> + <td>22.0 {{ CompatVersionUnknown() }}{{ property_prefix("-webkit")}}</td> + <td> + <p>6.0 {{ CompatVersionUnknown() }}{{ property_prefix("-webkit")}}</p> + </td> + </tr> + <tr> + <td>En elementos SVG</td> + <td>{{CompatNo}} (See bug 109224)</td> + <td>{{ CompatGeckoDesktop(35) }}</td> + <td>{{ CompatNo}}</td> + <td>{{ CompatNo}}</td> + <td>{{ CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Antes de Firefox 34, Gecko solo implementa la forma <code>{{ anch("url()") }}</code> de la propiedad <code>filter</code>; como no estaba implementado el encadenamiento, solo se permitía una <code>url()</code> (o cuando la preferencia <code>layout.css.filters.enabled era establecida a </code><code>false</code>).<br> + <br> + [2] Los valores funcionales de <code>filter</code> son controlados por la preferencia <code>layout.css.filters.enabled</code>, pero fue deshabiliada en Firefox 34.</p> + +<p>[3] Internet Explorer 4.0 a 9.0 implementan una propiedad <code>filter</code> que no es estándar. La sintáxis era completamente diferente del estándar, y no está documentada aquí.</p> + +<p>[4] En Chrome 18 a 19, la función <code>saturate()</code> solo toma enteros, en vez de decimales o porcentajes. Este bug fue corregido en Chrome 20 y superiores.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a class="internal" href="/es/docs/Applying_SVG_effects_to_HTML_content" title="En/Applying SVG effects to HTML content">Aplicando efectos de SVG a contenido HTML</a></li> + <li>La propiedad {{ Cssxref("mask") }}</li> + <li><a class="internal" href="/es/docs/SVG" title="En/SVG">SVG</a></li> + <li><a class="external" href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Entendiendo los filtros CSS</a>, artículo en inglés de HTML5Rocks!</li> +</ul> diff --git a/files/es/web/css/fit-content/index.html b/files/es/web/css/fit-content/index.html new file mode 100644 index 0000000000..fc3cceef6f --- /dev/null +++ b/files/es/web/css/fit-content/index.html @@ -0,0 +1,119 @@ +--- +title: fit-content() +slug: Web/CSS/fit-content +tags: + - CSS + - CSS Grid + - Experimental + - Función CSS + - Layout + - Referencia + - Web +translation_of: Web/CSS/fit-content +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La función <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>fit-content()</code></strong> ajusta un tamaño dado a un tamaño disponible de acuerdo a la fórmula: <code>min(<var>maximum size</var>, max(<var>minimum size</var>, <var>argument</var>))</code>.</p> + +<pre class="brush: css no-line-numbers">/* <length> values */ +fit-content(200px) +fit-content(5cm) +fit-content(30vw) +fit-content(100ch) + +/* <percentage> value */ +fit-content(40%) +</pre> + +<p>La función se puede usar como un tamaño de track en las propiedades de <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, donde el tamaño máximo es definido por <code><a href="/en-US/docs/Web/CSS/grid-template-columns#max-content">max-content</a></code> y el mínimo por <code><a href="/en-US/docs/Web/CSS/grid-template-columns#auto">auto</a></code>, el cual es calculado por "<code>auto"</code> (ej. <code><a href="/en-US/docs/Web/CSS/minmax">minmax(auto, max-content)</a></code>), excepto que el tamaño del track se restringe al argumento si éste es mas grande que el "auto" mínimo .</p> + +<p>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.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>Función que acepta un <code><length></code> o un <code><percentage></code> como un argumento.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>Una Longitud Absoluta.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Un porcentaje relativo al espacio disponible en los ejes dados.</dd> + <dd>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.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[3]">#container { + display: grid; + grid-template-columns: fit-content(300px) fit-content(300px) 1fr; + grid-gap: 5px; + box-sizing: border-box; + height: 200px; + width: 100%; + background-color: #8cffa0; + padding: 10px; +} + +#container > div { + background-color: #8ca0ff; + padding: 5px; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="container"> + <div>Item as wide as the content.</div> + <div> + 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></pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Ejemplo", "100%", 200)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Especificación</th> + <th>Estado</th> + <th>Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}</td> + <td>{{Spec2("CSS3 Sizing")}}</td> + <td>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")}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}</td> + <td>{{Spec2("CSS Grid")}}</td> + <td>Define la función cuando es usada como un tamaño de track.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p> </p> + + + +<p>{{Compat("css.properties.grid-template-columns.fit-content")}}</p> + +<p> </p> diff --git a/files/es/web/css/flex-basis/index.html b/files/es/web/css/flex-basis/index.html new file mode 100644 index 0000000000..726241615a --- /dev/null +++ b/files/es/web/css/flex-basis/index.html @@ -0,0 +1,280 @@ +--- +title: flex-basis +slug: Web/CSS/flex-basis +tags: + - CSS + - Cajas Flexibles de CSS + - Propiedad de CSS +translation_of: Web/CSS/flex-basis +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>flex-basis</code></strong> especifíca la base flexible, la cual es el <strong>tamaño inicial </strong>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")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css notranslate">/* Especificar <'width'> */ +flex-basis: 10em; +flex-basis: 3px; +flex-basis: auto; + +/* Palabras clave de dimensionamiento intrínseco */ +flex-basis: fill; +flex-basis: max-content; +flex-basis: min-content; +flex-basis: fit-content; + +/* Tamaño automático basado en el contenido del elemento flexible */ +flex-basis: content; + +/* Global values */ +flex-basis: inherit; +flex-basis: initial; +flex-basis: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>width</code></dt> + <dd>Definido por un número seguido de una unidad absoluta tal como <code>px</code>, <code>mm</code> o <code>pt</code>, o un porcentaje del tamaño principal de un contenedor flexible padre. Los valores negativos no son válidos.</dd> + <dt><code>content</code></dt> + <dd>Indica el dimensionamiento automático, basado en el contenido del elemento flexible.</dd> + <dd> + <div class="note"><strong>Nota: </strong>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 <code>auto</code> junto con un tamaño principal (<a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> o <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a>) en auto.</div> + + <div class="note"> + <p id="comment_text_0"><strong>Nota:</strong> Breve historia</p> + + <ul> + <li>Originalmente, "flex-basis:auto" significa "observa mi propiedad width o height".</li> + <li>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 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1032922" title='RESOLVED FIXED - Rename "flex-basis:auto" to "main-size", while preserving "flex:auto" shorthand value'>bug 1032922</a>.</li> + <li>Después, ese cambio fue revertido en <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1093316" title='RESOLVED FIXED - Back out flexbox "flex-basis:main-size" rename, since the CSSWG removed it from the spec'>bug 1093316</a>, 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).</li> + </ul> + </div> + </dd> +</dl> + +<h3 id="Sintaxis_Formal">Sintaxis Formal</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><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> + +<ul class="container"> + <li class="flex flex6">6: flex-basis test</li> +</ul> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.container { + font-family: arial, sans-serif; + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + flex-wrap: wrap; +} + +.flex { + background: #6AB6D8; + padding: 10px; + margin-bottom: 50px; + border: 3px solid #2E86BB; + color: white; + font-size: 20px; + text-align: center; + position: relative; +} + +.flex:after { + position: absolute; + z-index: 1; + left: 0; + top: 100%; + margin-top: 10px; + width: 100%; + color: #333; + font-size: 18px; +} + +.flex1 { + flex-basis: auto; +} + +.flex1:after { + content: 'auto'; +} + +.flex2 { + flex-basis: -webkit-max-content; + flex-basis: -moz-max-content; + flex-basis: max-content; +} + +.flex2:after { + content: 'max-content'; +} + +.flex3 { + flex-basis: -webkit-min-content; + flex-basis: -moz-min-content; + flex-basis: min-content; +} + +.flex3:after { + content: 'min-content'; +} + +.flex4 { + flex-basis: -webkit-fit-content; + flex-basis: -moz-fit-content; + flex-basis: fit-content; +} + +.flex4:after { + content: 'fit-content'; +} + +.flex5 { + flex-basis: content; +} + +.flex5:after { + content: 'content'; +} + +.flex6 { + flex-basis: -webkit-fill-available; + flex-basis: -moz-available; + flex-basis: fill; +} + +.flex6:after { + content: 'fill/-webkit-fill-available/-moz-available'; +} +</pre> + +<h3 id="Resultados">Resultados</h3> + +<p>{{EmbedLiveSample('Example', '860', '360', '', 'Web/CSS/flex-basis')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Especificación</th> + <th>Estado</th> + <th>Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Definición Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Base</td> + <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("22.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}</td> + <td>11<sup>[2]</sup></td> + <td>12</td> + <td>12.10</td> + <td>7.0{{property_prefix("-webkit")}}<sup>[3]</sup></td> + </tr> + <tr> + <td><code>auto</code></td> + <td>{{CompatGeckoDesktop("18.0")}}</td> + <td>21.0</td> + <td>11</td> + <td>12</td> + <td>12.10</td> + <td>7.0{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>content</code></td> + <td>{{CompatNo}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>12</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Base</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>12.10</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Para acivar el soporte de caja flexible en Firefox 18 y 19, el usuario debe cambiar en preferencias about:config en "layout.css.flexbox.enabled" a <code>true</code>. Firefox soporta flexbox multi-línea desde Firefox 28.</p> + +<p>[2] Cuando no se especifíca <code>flex-basis</code> como <code>auto</code>, Internet Explorer 10-11 (pero no 12+) siempre usa el box model mediante la propiedad <code>content-box</code> para calcular el tamaño de un elemento flexible, incluso si se aplica al elemento la propiedad <a href="/en-US/docs/Web/CSS/box-sizing"><code>box-sizing: border-box</code></a>. Ver <a href="https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box">Flexbug #7</a> para más información.</p> + +<p>[3] Ver <a href="https://developer.apple.com/library/iad/releasenotes/General/WhatsNewInSafari/Articles/Safari_7_0.html">Safari 7.0</a>.</p> + +<p>[4] Ver {{bug("1105111")}}.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li> + <li>{{cssxref("width")}}</li> +</ul> diff --git a/files/es/web/css/flex-direction/index.html b/files/es/web/css/flex-direction/index.html new file mode 100644 index 0000000000..82726b33b6 --- /dev/null +++ b/files/es/web/css/flex-direction/index.html @@ -0,0 +1,158 @@ +--- +title: flex-direction +slug: Web/CSS/flex-direction +tags: + - CCS + - Cajas Flexibles CSS + - Propiedad CSS + - Referencia + - flexbox +translation_of: Web/CSS/flex-direction +--- +<p>{{CSSRef}}</p> + +<p><span lang="es"><span class="hps">La propiedad</span> <span class="hps">CSS</span> <code><strong><span class="atn hps">flex-</span><span>direction</span></strong></code><span> especifica</span> cómo colocar los objetos flexibles <span class="hps">en el contenedor</span> <span class="hps">flexible</span> <span class="hps">definiendo el eje</span> <span class="hps">principal y</span> <span class="hps">la dirección</span> <span class="atn hps">(</span><span>normal o al revés</span><span>)</span><span>.</span></span></p> + +<p>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</p> + +<p><span lang="es"><span class="hps">Tenga en cuenta que</span> <span class="hps">el</span> <span class="hps">valor de</span> <code>row </code><span class="hps">y <code>row-reverse</code></span> <span class="hps">se verán afectados por</span> <span class="hps">la direccionalidad</span> <span class="hps">del contenedor</span> <span class="hps">flexible.</span> <span class="hps">Si</span> <span class="hps">su atributo</span> <code>dir </code><span class="hps">es</span> <code>ltr</code>, <code>row</code><span class="hps"> representa</span> <span class="hps">el eje horizontal</span> <span class="hps">orientado</span> <span class="hps">de izquierda</span> <span class="hps">a derecha,</span> <span class="hps">y <code>row-reverse</code></span> <span class="hps">desde la derecha</span> <span class="hps">hacia la izquierda;</span> <span class="hps">si el atributo</span> <code>dir </code><span class="hps">es</span> <code>rtl</code>, <code>row </code><span class="hps">representa</span> <span class="hps">el</span> <span class="hps">eje orientado</span> <span class="hps">de derecha</span> <span class="hps">a izquierda</span><span>,</span> <span class="hps">y <code>row-reverse</code></span> <span class="hps">de izquierda a</span> <span class="hps">derecha.</span></span></p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* La dirección del texto se presenta en una línea */</span> +<span class="property token">flex-direction</span><span class="punctuation token">:</span> row<span class="punctuation token">;</span> + +<span class="comment token">/* Como <row>, pero al revés */</span> +<span class="property token">flex-direction</span><span class="punctuation token">:</span> row-reverse<span class="punctuation token">;</span> + +<span class="comment token">/* La dirección en la que se apilas las líneas de texto */</span> +<span class="property token">flex-direction</span><span class="punctuation token">:</span> column<span class="punctuation token">;</span> + +<span class="comment token">/* Como <column>, pero al revés */</span> +<span class="property token">flex-direction</span><span class="punctuation token">:</span> column-reverse<span class="punctuation token">;</span> + +<span class="comment token">/* Valores globales */</span> +<span class="property token">flex-direction</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> +<span class="property token">flex-direction</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span> +<span class="property token">flex-direction</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre> + +<h3 id="Valores">Valores</h3> + +<p><span class="short_text" id="result_box" lang="es"><span class="hps">Se aceptan los siguientes</span> <span class="hps">valores:</span></span></p> + +<dl> + <dt><code>row</code></dt> + <dd>El eje principal del contenedor flexible está definido para ser el mismo que la dirección del texto. Los <strong>puntos principales de inicio y final</strong> son los mismos que la dirección del contenido.</dd> + <dt><code>row-reverse</code></dt> + <dd> + <p>Se comporta igual que <code>row</code> pero los <strong>puntos principales de inicio</strong> y <strong>final</strong> son intercambiados.</p> + </dd> + <dt><code>column</code></dt> + <dd>El eje principal del contenedor flexible es el mismo que el eje del bloque. Los <strong>puntos principales de inicio y final</strong> son los mismos que los <strong>puntos de antes y después</strong> del modo escritura.</dd> + <dt><code>column-reverse</code></dt> + <dd>Se comporta igual que <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">column</span></font> pero los <strong>puntos principales de inicio</strong> y <strong>final</strong> son intercambiados.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h4</span><span class="punctuation token">></span></span>Esto es un Column-Reverse<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h4</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>content<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>red<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>lightblue<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>B<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>yellow<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>C<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h4</span><span class="punctuation token">></span></span>Esto es un Row-Reverse<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h4</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>content1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box1<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>red<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box1<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>lightblue<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>B<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box1<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span>yellow<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>C<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="id token">#content</span> </span><span class="punctuation token">{</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span> + <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span> + <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#c3c3c3</span><span class="punctuation token">;</span> + <span class="property token">display</span><span class="punctuation token">:</span> -webkit-flex<span class="punctuation token">;</span> + <span class="property token">-webkit-flex-direction</span><span class="punctuation token">:</span> column-reverse<span class="punctuation token">;</span> + <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span> + <span class="property token">flex-direction</span><span class="punctuation token">:</span> column-reverse<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.box</span> </span><span class="punctuation token">{</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span> + <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="id token">#content1</span> </span><span class="punctuation token">{</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span> + <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">200</span>px<span class="punctuation token">;</span> + <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#c3c3c3</span><span class="punctuation token">;</span> + <span class="property token">display</span><span class="punctuation token">:</span> -webkit-flex<span class="punctuation token">;</span> + <span class="property token">-webkit-flex-direction</span><span class="punctuation token">:</span> row-reverse<span class="punctuation token">;</span> + <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span> + <span class="property token">flex-direction</span><span class="punctuation token">:</span> row-reverse<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.box1</span> </span><span class="punctuation token">{</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span> + <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Example', '', '300', '', 'Web/CSS/flex-direction') }}</p> + +<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2> + +<p>Si utilizas <code>flex-direction</code> con un valor de <code>row-reverse</code> o <code>column-reverse</code> 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):</p> + +<ul> + <li><a class="external external-icon" href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox & the keyboard navigation disconnect — Tink</a></li> + <li><a class="external external-icon" href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" rel="noopener">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specificaciones">Specificaciones</h2> + + + +<table class="standard-table"> + <thead> + <tr> + <th>Especificación</th> + <th>Estado</th> + <th> + <p>Comentario</p> + </th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> + +<p>{{Compat("css.properties.flex-direction")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Guía de CSS Flexbox: <em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Conceptos básicos de Flexbox</a></em></li> + <li>Guía de CSS Flexbox: <em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordenar items flex</a></em></li> +</ul> diff --git a/files/es/web/css/flex-flow/index.html b/files/es/web/css/flex-flow/index.html new file mode 100644 index 0000000000..8d22dbf764 --- /dev/null +++ b/files/es/web/css/flex-flow/index.html @@ -0,0 +1,135 @@ +--- +title: flex-flow +slug: Web/CSS/flex-flow +tags: + - CSS + - CSS Flexible Boxes + - Propiedad CSS + - Referencia +translation_of: Web/CSS/flex-flow +--- +<div>{{ CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>flex-flow</code></strong> es una propiedad atajo para las propiedades individuales <code>flex-direction</code> y <code>flex-wrap</code>.</p> + +<p>{{cssinfo}}</p> + +<p>Para más propiedades e información ve <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Utilizando cajas flexibles CSS</a>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: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: nowrap; +flex-flow: wrap; +flex-flow: wrap-reverse; + +/* flex-flow: <'flex-direction'> and <'flex-wrap'> */ +flex-flow: row nowrap; +flex-flow: column wrap; +flex-flow: column-reverse wrap-reverse; + +/* valores globales */ +flex-flow: inherit; +flex-flow: initial; +flex-flow: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>Ve <a href="/en-US/docs/CSS/flex-direction" title="en-US/docs/CSS/flex-direction"><code>flex-direction</code></a> y <a href="/en-US/docs/CSS/flex-wrap" title="flex-wrap"><code>flex-wrap</code></a> para más detalles de los valores.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush:css;highlight:3">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; +} +</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox','#flex-flow','flex-flow') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>28.0</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>11</td> + <td>12.10</td> + <td>6.1{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>28.0</td> + <td>{{ CompatUnknown() }}</td> + <td>11</td> + <td>12.10</td> + <td>7.1{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Utilizando cajas flexibles CSS</a></li> +</ul> diff --git a/files/es/web/css/flex-grow/index.html b/files/es/web/css/flex-grow/index.html new file mode 100644 index 0000000000..0e1e47f8b7 --- /dev/null +++ b/files/es/web/css/flex-grow/index.html @@ -0,0 +1,194 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +tags: + - CSS + - Elementos flexibles + - Propiedades CSS +translation_of: Web/CSS/flex-grow +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <strong><code>flex-grow</code></strong> de <a href="/en-US/docs/Web/CSS">CSS</a> 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.</p> + +<p>La dirección principal puede ser la altura o el ancho del elemento, dependiendo del valor de {{cssxref("flex-direction")}}. </p> + +<p>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.</p> + +<p>{{cssinfo}}</p> + +<p>Ver <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Usando las cajas flexibles en CSS</a> para más propiedades e información.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* <number> valores */ +flex-grow: 3; +flex-grow: 0.6; + +/* Valores globales */ +flex-grow: inherit; +flex-grow: initial; +flex-grow: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><number></code></dt> + <dd>Ver {{cssxref("<number>")}}. Los valores negativos no son válidos.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<div id="Live_Sample"> +<pre class="brush: 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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#content { + -ms-box-orient: horizontal; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -moz-flex; + display: -webkit-flex; + display: flex; + + -webkit-justify-content: space-around; + justify-content: space-around; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-align-items: stretch; + align-items: stretch; +} + +.box { + flex-grow: 1; + border: 3px solid rgba(0,0,0,.2); +} + +.box1 { + flex-grow: 2; + border: 3px solid rgba(0,0,0,.2); +} +</pre> +</div> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Example', '700px', '300px', '', 'Web/CSS/flex-grow')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox','#flex-grow','flex-grow')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup></td> + <td>21.0{{property_prefix("-webkit")}}</td> + <td>11</td> + <td>12.10</td> + <td>6.1{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>< 0 animate</td> + <td>{{CompatGeckoDesktop("32.0")}}<sup>[2]</sup></td> + <td>49.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatGeckoMobile("18.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>12.10</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>< 0 animate</td> + <td>{{CompatGeckoDesktop("32.0")}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox soporta sólo Caja flexible de línea simple hasta Firefox 27. Para activar el soporte de caja flexible para Firefox 18 y 19, el usuario tiene que cambiar en preferencias about:config el <code>layout.css.flexbox.enabled</code> en <code>true</code>.</p> + +<p>Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añade soporte para un prefijo <code>-webkit</code> en versión porpietaria por razones compatibilidad web bajo la preferencia <code>layout.css.prefixes.webkit</code>, por defecto en <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} la preferencia por defecto está en <code>true</code>.</p> + +<p>[2] Antes de Firefox 32, Gecko no era capaz de animar los valores de inicio o parada en 0<code>(<a href="https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths">Spec</a>, <a href="https://jsbin.com/zacifexuke/edit?html,css,output">Demo</a>)</code>.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Usando las cajas flexibles en CSS</a></li> +</ul> diff --git a/files/es/web/css/flex-shrink/index.html b/files/es/web/css/flex-shrink/index.html new file mode 100644 index 0000000000..01d3740fd3 --- /dev/null +++ b/files/es/web/css/flex-shrink/index.html @@ -0,0 +1,185 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +translation_of: Web/CSS/flex-shrink +--- +<div>{{CSSRef}}</div> + +<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>flex-shrink</code></strong> 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 <code>flex-shrink</code> , cuando el tamaño por defecto de los flex items sea mayor al de su contenedor flex container.</p> + +<pre class="brush:css no-line-numbers">flex-shrink: 2; +flex-shrink: 0.6; + +/* Valores globales */ +flex-shrink: inherit; +flex-shrink: initial; +flex-shrink: unset; +</pre> + +<div class="hidden" id="flex-shrink"> +<pre class="brush: html"><div class="grid"> + <div class="row"> + <div class="cell">flex-shrink: + <div class="container"> + <div class="item small"><strong>0.5</strong> <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at purus vitae ipsum hendrerit vulputate quis vitae risus.</small></p></div> + <div class="item mid"><strong>1</strong> <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at purus vitae ipsum hendrerit vulputate quis vitae risus.</small></p></div> + <div class="item large"><strong>3</strong> <p><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at purus vitae ipsum hendrerit vulputate quis vitae risus.</small></p></div> + </div> + </div> + </div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; + background: #EEE; +} + +.grid { + width: 100%; + height: 100%; + display: flex; + font: 1em monospace; +} + +.row { + display: flex; + flex: 1 auto; + flex-direction: row; + flex-wrap: wrap; +} + +.cell { + margin: .5em; + padding: .5em; + background-color: #FFF; + overflow: hidden; + text-align: left; + flex: 1; +} + +.note { + background: #fff3d4; + padding: 1em; + margin: .5em; + font: .8em sans-serif; + text-align: left; + flex: 1; + white-space: nowrap; +} + +.container { + background: #E4F0F5; + margin-top: .5em; + + display: flex; +} + +.item { + border: 1px solid black; + padding: 1em; +} + +.small { flex-shrink: 0.5; } +.mid { flex-shrink: 1; } +.large { flex-shrink: 3; }</pre> +</div> + +<div>{{EmbedLiveSample("flex-shrink", "100%", 280, "", "", "example-outcome-frame")}}</div> + +<p>{{cssinfo}}</p> + +<p> </p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La propiedad <code>flex-shrink</code> se especifica como un único <code><a href="#<number>"><número></a></code>.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><a id="number" name="number"><code><número</code>></a></dt> + <dd>Véase{{cssxref("<number>")}}. Los valores negativos no son válidos</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<div id="Live_Sample"> +<pre class="brush: 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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#content { + display: flex; + width: 500px; +} + +#content div { + flex-basis: 120px; + border: 3px solid rgba(0,0,0,.2); +} + +.box { + flex-shrink: 1; +} + +.box1 { + flex-shrink: 2; +} +</pre> +</div> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Example', '500px', '300px', '', 'Web/CSS/flex-shrink') }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Especificación</th> + <th>Estado</th> + <th>Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.properties.flex-shrink")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li> +</ul> + +<p><nobr></nobr></p> diff --git a/files/es/web/css/flex-wrap/index.html b/files/es/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..66066fd25e --- /dev/null +++ b/files/es/web/css/flex-wrap/index.html @@ -0,0 +1,121 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +translation_of: Web/CSS/flex-wrap +--- +<p>{{ CSSRef("CSS Flexible Boxes") }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <strong><code>flex-wrap</code></strong> de <a href="/en-US/docs/CSS" title="CSS">CSS</a> 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.</p> + +<p>{{cssinfo}}</p> + +<p>Ver <a href="/es/docs/Web/Guide/CSS/Cajas_flexibles" title="/en/CSS/Using_CSS_flexible_boxes">Usando cajas flexibles CSS</a> para conocer más propiedades e información.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Sintaxis formal</a>: {{csssyntax("flex-wrap")}} +</pre> + +<pre>flex-wrap: nowrap +flex-wrap: wrap +flex-wrap: wrap-reverse + +flex-wrap: inherit +</pre> + +<h3 id="Valores">Valores</h3> + +<p>Se aceptan los siguientes valores:</p> + +<dl> + <dt><code>nowrap</code></dt> + <dd>Los elementos flex son distribuidos en una sola línea, lo cual puede llevar a que se desborde el contenedor flex. El valor <strong>cross-start</strong> es equivalente a <strong>start</strong> o <strong>before</strong> según el valor de {{cssxref("flex-direction")}}.</dd> + <dt><code>wrap</code></dt> + <dd>Los elementos flex son colocados en varias líneas. El valor <strong>cross-start</strong> equivale a <strong>start</strong> o <strong>before</strong> dependiendo del valor <code>flex-direction</code> y <strong>cross-end</strong> implicaría lo opuesto a lo especificado por<strong> cross-start</strong>.</dd> + <dt><code>wrap-reverse</code></dt> + <dd>Actúa como <code>wrap</code> pero <strong>cross-start</strong> y <strong>cross-end</strong> están intercambiados.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush:css;highlight:[2]">element { + flex-wrap: nowrap; +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Especificacion</th> + <th>Estado</th> + <th>Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox', '#flex-wrap', 'flex-wrap') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad">Compatibilidad</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>28.0 {{bug(939901)}}</td> + <td>21.0{{ property_prefix("-webkit") }}</td> + <td>11.0</td> + <td>12.10</td> + <td>6.1{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>28.0 {{bug(939901)}}</td> + <td>4.4</td> + <td>11.0</td> + <td>12.10</td> + <td>7.0{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/Guide/CSS/Cajas_flexibles" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Usando cajas flexibles CSS</a></li> +</ul> diff --git a/files/es/web/css/flex/index.html b/files/es/web/css/flex/index.html new file mode 100644 index 0000000000..9e89e10b6b --- /dev/null +++ b/files/es/web/css/flex/index.html @@ -0,0 +1,208 @@ +--- +title: flex +slug: Web/CSS/flex +translation_of: Web/CSS/flex +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p> </p> + +<p>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.</p> + +<p>{{cssinfo}}</p> + +<p> </p> + +<p>Consulte <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS/">Cómo usar las cajas flexibles de CSS</a> para conocer más propiedades e información.</p> + +<h2 id="Syntax" name="Syntax">Sintáxis</h2> + +<pre class="brush:css">/* 0 0 auto */ +flex: none; + +/* Un valor, número sin unidades: flex-grow */ +flex: 2; + +/* Un valor, width/height: flex-basis */ +flex: 10em; +flex: 30px; +flex: auto; +flex: content; + +/* Dos valores: flex-grow | flex-basis */ +flex: 1 30px; + +/* Dos valores: flex-grow | flex-shrink */ +flex: 2 2; + +/* Tres valores: flex-grow | flex-shrink | flex-basis */ +flex: 2 2 10%; + +/* Valores globales */ +flex: inherit; +flex: initial; +flex: unset; +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code><'flex-grow'></code></dt> + <dd> + <p>Define el <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow">flex-grow</a> 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.</p> + </dd> + <dt><code><'flex-shrink'></code></dt> + <dd>Define el <code><a href="/en-US/docs/Web/CSS/flex-shrink">flex-shrink</a></code> 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.</dd> + <dt><code><'flex-basis'></code></dt> + <dd>Define el <a href="/en-US/docs/CSS/flex-basis" title="CSS/flex-basis"><code>flex-basis</code></a> del elemento flexible. Se acepta cualquier valor válido para las propiedades <code>width</code> y <code>height</code> . Un tamaño preferente de 0 debe tener una unidad para evitar ser interpretado como flexible. El valor predeterminado es 0% cuando se omite.</dd> + <dt><code>none</code></dt> + <dd>Esta palabra clave se computa a <code>0 0 auto</code>.</dd> + <dt> + <h3 id="Sintaxis_normal">Sintaxis normal</h3> + </dt> +</dl> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: css">#flex-container { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; +} + +#flex-container > .flex-item { + -webkit-flex: auto; + flex: auto; +} + +#flex-container > .raw-item { + width: 5rem; +} +</pre> + +<pre class="brush: html"><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> +</pre> + +<div class="hidden"> +<pre class="brush: js">var flex = document.getElementById("flex"); +var raw = document.getElementById("raw"); +flex.addEventListener("click", function() { + raw.style.display = raw.style.display == "none" ? "block" : "none"; +}); +</pre> + +<pre class="brush: css">#flex-container { + width: 100%; + font-family: Consolas, Arial, sans-serif; +} + +#flex-container > div { + border: 1px solid #f00; + padding: 1rem; +} + +#flex-container > .raw-item { + border: 1px solid #000; +} +</pre> +</div> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Example','100%','60')}}</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("20.0")}}<br> + {{CompatGeckoDesktop("28.0")}}<sup>[2]</sup></td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>10.0{{property_prefix("-ms")}}<sup>[3]</sup><br> + 11.0<sup>[3]</sup></td> + <td>12.10</td> + <td> + <p>6.1{{property_prefix("-webkit")}}<br> + 9.0</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown()}}</td> + <td>4.4</td> + <td>11</td> + <td>12.10</td> + <td>7.1{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] En Gecko 18.0 {{geckoRelease("18.0")}} y 19.0 {{geckoRelease("19.0")}} el soporte de cajas flexibles está oculto en las preferencias <code>about:config</code> en <code>layout.css.flexbox.enabled</code>, por defecto en <code>false</code>.</p> + +<p>[2] Las cajas flexibles multi-línea están soportadas desde Gecko 28.0 {{geckoRelease("28.0")}}.</p> + +<p>[3] Internet Explorer 10-11 (pero no 12+) ignora el uso de <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a> en la parte <code>flex-basis</code> de la sintaxis de flex. Esto se puede solucionar mediante el uso de las propiedades normales en lugar de las abreviadas. Ver <a href="https://github.com/philipwalton/flexbugs#8-flex-basis-doesnt-support-calc">Flexbug #8</a> para más info. Además una declaración <code>flex</code> con un valor sin unidad en su parte <code>flex-basis</code> es considerado sintácticamente no valido en esas versiones y por lo tanto será ignorado. Una solución consiste en incluir siempre una unidad en la parte <code>flex-basis</code> del valor abreviador <code>flex</code>. Ver <a href="https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored">Flexbug #4</a> para más info.</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS/">Usar las cajas felxibles de CSS</a></li> +</ul> diff --git a/files/es/web/css/float/index.html b/files/es/web/css/float/index.html new file mode 100644 index 0000000000..26077edca5 --- /dev/null +++ b/files/es/web/css/float/index.html @@ -0,0 +1,241 @@ +--- +title: float +slug: Web/CSS/float +tags: + - CSS + - CSS Float + - CSS Posicionamiento + - CSS Propiedad + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/float +--- +<p>{{CSSRef}}</p> + +<p>La propiedad CSS <code>float</code> 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 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning">posicionamiento absoluto</a>).</p> + +<p>{{EmbedInteractiveExample("pages/css/float.html")}}</p> + +<div class="hidden"> +<p>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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y enviarnos una solicitud de extracción -pull request-.</p> +</div> + +<p>Un elemento <strong>flotante</strong> es un elemento en el que el {{ Cssxref("computed value", "valor calculado") }} de <code>float</code> <em>no</em> es igual a <code>none</code>.</p> + +<p>Como <code>float</code> implica el uso del layout de bloques, este modifica el valor calculado de los valores {{cssxref("display")}} , en algunos casos:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><strong>Valor especificado</strong></th> + <th scope="col"><strong>Valor Computado</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td>inline</td> + <td>block</td> + </tr> + <tr> + <td>inline-block</td> + <td>block</td> + </tr> + <tr> + <td>inline-table</td> + <td>table</td> + </tr> + <tr> + <td>table-row</td> + <td>block</td> + </tr> + <tr> + <td>table-row-group</td> + <td>block</td> + </tr> + <tr> + <td>table-column</td> + <td>block</td> + </tr> + <tr> + <td>table-column-group</td> + <td>block</td> + </tr> + <tr> + <td>table-cell</td> + <td>block</td> + </tr> + <tr> + <td>table-caption</td> + <td>block</td> + </tr> + <tr> + <td>table-header-group</td> + <td>block</td> + </tr> + <tr> + <td>table-footer-group</td> + <td>block</td> + </tr> + <tr> + <td>inline-flex</td> + <td>flex</td> + </tr> + <tr> + <td>inline-grid</td> + <td>grid</td> + </tr> + <tr> + <td>otros</td> + <td>sin cambios</td> + </tr> + </tbody> +</table> + +<p>Nota: Al referirse a una propiedad desde JavaScript como un miembro del objeto <a href="/es/DOM/element#element.style" title="es/DOM/element#element.style">element.style</a>, hay que tener en cuenta que los navegadores modernos soportan <code>float</code> pero en navegadores más antiguos hay que escribir la propiedad como <code>cssFloat</code>, otros navegadores como Internet Explorer 8 y anteriores utilizan <code>styleFloat</code>. Fue una excepción a la regla, que el nombre del miembro DOM sea el nombre <em>camel-case</em> (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" ).</p> + +<h2 id="Sintáxis">Sintáxis</h2> + +<pre class="notranslate">/* Valores clave || Keyword values */ +float: left; +float: right; +float: none; +float: inline-start; +float: inline-end; + +/* Valores globales || Global values */ +float: inherit; +float: initial; +float: unset;</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<p><code><strong>left</strong> </code></p> + +<p>El elemento debe flotar a la izquierda de su bloque contenedor.</p> + +<p><code><strong>right</strong> </code></p> + +<p>El elemento debe flotar a la derecha de su bloque contenedor.</p> + +<p><code><strong>none</strong> </code></p> + +<p>El elemento no deberá flotar.</p> + +<p><strong><code>inline-start</code></strong></p> + +<p>El elemento debe flotar en el costado de inicio de su bloque contenedor. Esto es el lado izquierdo con scripts <code>ltr</code> y el lado derecho con scripts <code>rtl</code>.</p> + +<dl> + <dt><code>inline-end</code></dt> + <dd>El elemento debe flotar en el costado de término de su bloque contenedor . Esto es el lado derecho con scripts <code>ltr</code> y el lado izquierdo con scripts <code>rtl</code>.</dd> +</dl> + +<h2 id="Definición_Formal">Definición Formal</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Sintáxis_Formal">Sintáxis Formal</h2> + +<dl> + <dt> + <pre class="notranslate">{{csssyntax}} +</pre> + </dt> +</dl> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Como_son_ubicados_los_elements_flotantes">Como son ubicados los elements flotantes </h3> + +<p><a href="/samples/cssref/float.html">Ver El Ejemplo Vivo</a></p> + +<p>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 <em>otro elemento flotante.</em></p> + +<p>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.</p> + +<p>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 <code>width: 100% </code>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.</p> + +<p><strong>HTML</strong></p> + +<pre class="notranslate"><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. + 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></pre> + +<p><strong>CSS</strong></p> + +<pre class="notranslate">section { + border: 1px solid blue; + width: 100%; + float: left; +} + +div { + margin: 5px; + width: 50px; + height: 150px; +} + +.left { + float: left; + background: pink; +} + +.right { + float: right; + background: cyan; +}</pre> + +<p><strong>RESULTADO:</strong></p> + +<p>{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}</p> + +<h3 id="Notas" name="Notas">Limpiando (clearing) flotantes:</h3> + +<p>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")}}</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#float">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float">CSS 2.1</a></li> +</ul> + +<h3 id="Compatibilidad_de_navegadores" name="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("clear") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}</p> + +<div class="noinclude"> +<p><span class="comment">Categorías</span></p> + +<p><span class="comment">Interwiki Language</span></p> +</div> diff --git a/files/es/web/css/font-family/index.html b/files/es/web/css/font-family/index.html new file mode 100644 index 0000000000..13a3e01b72 --- /dev/null +++ b/files/es/web/css/font-family/index.html @@ -0,0 +1,61 @@ +--- +title: font-family +slug: Web/CSS/font-family +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/font-family +--- +<p>{{CSSRef}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>La propiedad <code>font-family</code> 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.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="eval">font-family: <familia o nombre genérico> [, <familia o nombre genérico>]* | inherit +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt><nombre de familia o genérico></dt> + <dd>puede ser un <code><nombre de familia></code> o un <code><nombre genérico></code></dd> + <dt>nombre de familia </dt> + <dd>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").</dd> + <dt>nombre genérico </dt> + <dd>Se han definido los siguientes nombres genéricos: <code>serif, sans-serif, cursive, fantasy, monospace</code>. Los nombres genéricos son palabras claves y no deben ponerse entre comillas.</dd> +</dl> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<p><a href="/samples/cssref/font-family.html">Ver El Ejemplo Vivo</a></p> + +<pre>body { font-family: "Gill Sans Extrabold", Helvetica, sans-serif } + +.receipt { font-family: Courier, "Lucida Console", monospace } +</pre> + +<h2 id="Notas" name="Notas">Notas</h2> + +<p>Un nombre genérico debería ser siempre el último de la lista en una propiedad <code>font-family</code>.</p> + +<p>La propiedad <code>font-family</code> especifica una lista de fuentes, desde la prioridad más alta a la más baja. La selección de fuentes <strong>no se detiene</strong> en la primera de la lista que está en el equipo del usuario. Por el contrario la selección de fuentes se realiza<em>carácter a carácter</em>, por lo que, si una fuente seleccionada no tiene el carácter que se quiere mostrar, se recurre a la siguiente.</p> + +<p>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.</p> + +<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#font-family">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#font-family-prop">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2002/WD-css3-fonts-20020802/#font-family-prop">CSS 3</a></li> +</ul> + +<h2 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h2> + +<p>TBD (La mejor manera centralizada en un único cuadro de compatibilidad.)</p> diff --git a/files/es/web/css/font-size-adjust/index.html b/files/es/web/css/font-size-adjust/index.html new file mode 100644 index 0000000000..99d499dd78 --- /dev/null +++ b/files/es/web/css/font-size-adjust/index.html @@ -0,0 +1,60 @@ +--- +title: font-size-adjust +slug: Web/CSS/font-size-adjust +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/font-size-adjust +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>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.</p> + +<p>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).</p> + +<p>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<em>ratio</em> 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 <code><a href="es/CSS/font-size">font-size</a>: 16px; <a href="es/CSS/font-size-adjust">font-size-adjust</a>: 0.5</code>, realmente estamos especificando que las letras minúsculas de la fuente deben tener <code>8px</code> de alto (16px multiplicado por 0.5).</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<p><code>font-size-adjust:</code> <número> | <code>none</code> | {{ Cssxref("inherit") }}</p> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt><code>none</code> </dt> + <dd>Escoge el tamaño de la fuente basándose sólo en función de la propiedad {{ Cssxref("font-size") }}.</dd> + <dt><número> </dt> + <dd> + <p>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<em>número</em> de veces el tamaño de {{ Cssxref("font-size") }}.</p> + + <p>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") }}.</p> + </dd> +</dl> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<p><a href="/samples/cssref/font-size-adjust.html">Ver El Ejemplo Vivo</a></p> + +<pre>p{ + font: 12px Verdana, sans-serif; + font-size-adjust: 0.58; +} + +</pre> + +<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font-size-adjust">CSS 2</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-size-adjust">css3-fonts</a></li> +</ul> + +<h2 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h2> + +<p>Soportado en todas las plataformas a partir de Gecko 1.9 / Firefox 3, pero soportado sólo en Windows bastante antes.</p> diff --git a/files/es/web/css/font-size/index.html b/files/es/web/css/font-size/index.html new file mode 100644 index 0000000000..6b2dffe670 --- /dev/null +++ b/files/es/web/css/font-size/index.html @@ -0,0 +1,69 @@ +--- +title: font-size +slug: Web/CSS/font-size +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/font-size +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>La propiedad <code>font-size</code> 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 <code>em</code> y <code>ex</code>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<p><code>font-size:</code> <code>xx-small</code> | <code>x-small</code> | <code>small</code> | <code>medium</code> | <code>large</code> | <code>x-large</code> | <code>xx-large</code></p> + +<p><code>font-size:</code> <code>smaller</code> | <code>larger</code></p> + +<p><code>font-size:</code> <longitud> | <porcentaje> | {{ Cssxref("inherit") }}</p> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt>xx-small, x-small, small, medium, large, x-large, xx-large </dt> + <dd>un grupo de palabras clave de dimensión absoluta en relación al que determina el usuario como tamaño por defecto (que es <code>medium</code>). De forma parecida a las sentencias HTML <code><font size="1"></code> hasta <code><font size="7"></code> donde el tamaño por defecto es <code><font size="3"></code>.</dd> + <dt>larger, smaller </dt> + <dd>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.</dd> + <dt><a href="es/CSS/length"><longitud></a> </dt> + <dd>una unidad positiva de <a href="es/CSS/length">longitud</a>.</dd> +</dl> + +<dl> + <dt><Porcentaje> </dt> + <dd>un porcentaje positivo del cuerpo de letra del elemento padre.</dd> +</dl> + +<p>Es aconsejable evitar el uso de valores que no sean relativos al tamaño por defecto definido por el usuario, tales como <code>longitud</code> absoluta en unidades distintas a <code>em</code> o <code>ex</code>. Sin embargo, si hay que usar ese tipo de valores, es preferible utilizar unidades <code>px</code> (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.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<p><a href="/samples/cssref/font-size.html">Ver El Ejemplo Vivo</a></p> + +<pre>/* 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 + * del texto. */ +h1 { font-size: 250% } + +/* Ajusta el texto incluido en span a 16px */ +span { font-size: 16px; } +</pre> + +<h2 id="Notas" name="Notas">Notas</h2> + +<p>Las unidades <code>em</code> y <code>ex</code> 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 <code>em</code> y los porcentajes se comportan de igual forma cuando hablamos de {{ Cssxref("font-size") }}.</p> + +<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#font-size">CSS 1 </a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-size">css3-fonts</a></li> +</ul> diff --git a/files/es/web/css/font-style/index.html b/files/es/web/css/font-style/index.html new file mode 100644 index 0000000000..f467769af0 --- /dev/null +++ b/files/es/web/css/font-style/index.html @@ -0,0 +1,152 @@ +--- +title: font-style +slug: Web/CSS/font-style +tags: + - CSS + - Propiedad de CSS + - Referencia + - Tipos de letra de CSS + - Web + - tipo de letra +translation_of: Web/CSS/font-style +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <code>font-style</code> permite definir el aspecto de una familia tipográfica entre los valores: <code>normal</code>, italic (cursiva) y <code>oblique</code>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">font-style: normal; +font-style: italic; +font-style: oblique; + +/* Valores globales */ +font-style: inherit; +font-style: initial; +font-style: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Escoge un tipo de letra clasificado como <code>normal</code> dentro de una {{Cssxref("font-family", "familia de fuente")}}.</dd> + <dt><code>italic</code></dt> + <dd>Escoge un tipo de letra etiquetado como <code>italic</code>, o, si una versión cursiva del tipo de letra no esté disponible, escoge un tipo de letra etiquetado como <code>oblique</code> en lugar de eso.</dd> + <dt><code>oblique</code></dt> + <dd>Escoge un tipo de letra etiquetado como <code>oblique</code>, o, si una versión oblique del tipo de letra no esté disponible, escoge un tipo de letra etiquetado como <code>italic</code> en lugar de eso.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2> + +<p>El ejemplo muestra los valores diferentes de <code>font-style</code>.</p> + +<pre class="brush: html" style="display: none;"><p class="normal">This paragraph is normal.</p> +<p class="italic">This paragraph is italic.</p> +<p class="oblique">This paragraph is oblique.</p> +</pre> + +<pre class="brush: css">.normal { + font-style: normal; +} + +.italic { + font-style: italic; +} + +.oblique { + font-style: oblique; +}</pre> + +<p>{{ EmbedLiveSample('Ejemplo') }}</p> + +<p>Ten en cuenta que no todas las fuentes tienen tipos de letra distintos para <code>oblique</code> y <code>italic</code>, 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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12049/Screen%20Shot%202015-12-05%20at%2008.41.03.png" style="height: 135px; width: 466px;"></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Sin cambio</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Sin cambio</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-style', 'font-style')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Apoyo básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}} [1]</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Apoyo básico</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}} [1]</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Antes de Firefox 44, Gecko no hacía diferencia entre <code>oblique</code> y <code>italic</code>. Desde entonces, Gecko usa el tipo de letra correcto si está disponible.</p> diff --git a/files/es/web/css/font-variant-alternates/index.html b/files/es/web/css/font-variant-alternates/index.html new file mode 100644 index 0000000000..a1995762a0 --- /dev/null +++ b/files/es/web/css/font-variant-alternates/index.html @@ -0,0 +1,155 @@ +--- +title: font-variant-alternates +slug: Web/CSS/font-variant-alternates +tags: + - Fuentes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/font-variant-alternates +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>font-variant-alternates</code></strong> controla el uso de glifos alternos. Estos glifos alternos pueden ser referenciados por nombres alternativos en {{cssxref("@font-feature-values")}}.</p> + +<p>Las reglas-at definen nombres, para un tipo determinado de glifos alternativos (<code>stylistic</code>, <code>styleset</code>, <code>character-variant</code>, <code>swash</code>, <code>ornament</code> o <code>annotation</code>), 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.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">font-variant-alternates: normal; +font-variant-alternates: historical-forms; +font-variant-alternates: stylistic(user-defined-ident); +font-variant-alternates: styleset(user-defined-ident); +font-variant-alternates: character-variant(user-defined-ident); +font-variant-alternates: swash(user-defined-ident); +font-variant-alternates: ornaments(user-defined-ident); +font-variant-alternates: annotation(user-defined-ident); +font-variant-alternates: swash(ident1) annotation(ident2); + +/* Global values */ +font-variant-alternates: initial; +font-variant-alternates: inherit; +font-variant-alternates: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Se deshabilita el uso de glifos alternos.</dd> + <dt><code>historical-forms</code></dt> + <dd>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 <code>hist</code>.</dd> + <dt><code><a name="stylistic()"></a>stylistic()</code></dt> + <dd>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 <code>salt</code>, como <code>salt 2</code>.</dd> + <dt><code><a name="styleset()"></a>styleset()</code></dt> + <dd>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 <code>ssXY</code>, como <code>ss02</code>.</dd> + <dt><code><a name="character-variant()"></a>character-variant()</code></dt> + <dd>Esta función habilita el uso de un conjunto de alternos estilísticos para caracteres. Es muy similar a <code>styleset()</code>, 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 <code>cvXY</code>, como <code>cv02</code>.</dd> + <dt><code><a name="swash()"></a>swash()</code></dt> + <dd>Esta función habilita la muestra de glifos de tipografía <a href="http://en.wikipedia.org/wiki/Swash_%28typography%29">swash</a>. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde a los valores de OpenType <code>swsh</code> y <code>cswh</code>, como <code>swsh 2</code> y <code>cswh 2</code>.</dd> + <dt><code><a name="ornaments()"></a>ornaments()</code></dt> + <dd>Esta función habilita la muestra de ornamentas, que son <a href="http://en.wikipedia.org/wiki/Fleuron_%28typography%29">florones</a> 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 <code>ornm</code>, como <code>ornm 2</code>. + <div class="note"><strong>Nota: </strong>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.</div> + </dd> + <dt><code><a name="annotation()"></a>annotation()</code></dt> + <dd>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 <code>nalt</code>, como <code>nalt 2</code>.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Firefox rocks!</p> +<p class="variant">Firefox rocks!</p> +</pre> + +<h3 id="CSS"><span class="pun">CSS</span></h3> + +<pre class="brush: css">p.variant { + font-family: Leitura Display Swashes; + font-variant-alternates: swash(2); +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p><strong>Nota:</strong> se necesita la fuente Open Type <a href="http://ufonts.com/download/leituradisplay-swashes-opentype/470776.html">Leitura Display Swashes</a> instalada para que este ejemplo funcione</p> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant-alternates') }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-alternates', 'font-variant-alternates')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatGeckoDesktop("34")}} [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatGeckoMobile("34")}}[1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Una implementación experimental estaba disponible desde Gecko 24. Se regía por la preferencia <code>layout.css.font-features.enabled</code>, con valor predeterminado de <code>true</code>, solamente disponible en Nightly y Aurora.</p> diff --git a/files/es/web/css/font-variant/index.html b/files/es/web/css/font-variant/index.html new file mode 100644 index 0000000000..972022db38 --- /dev/null +++ b/files/es/web/css/font-variant/index.html @@ -0,0 +1,47 @@ +--- +title: font-variant +slug: Web/CSS/font-variant +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/font-variant +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>La propiedad <code>font-variant</code> selecciona entre los aspectos <code>normal</code> y <code>small-caps</code> para la {{ Cssxref("font-family", "familia de fuente") }} determinado.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<dl> + <dd><code>font-variant:</code> {{ mediawiki.external('<code>normal</code> | <code>small-caps</code>') }} ;</dd> +</dl> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt>normal</dt> + <dd>Especifica un aspecto de letra normal.</dd> +</dl> + +<dl> + <dt>small-caps</dt> + <dd>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.</dd> +</dl> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<pre>h1 { font-variant: small-caps } +p { font-variant: small-caps} +</pre> + +<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS2/fonts.html#propdef-font-variant">Fuentes en CSS 2 (en)</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-variant">Fuentes en CSS 3 (en)</a></li> +</ul> diff --git a/files/es/web/css/font-weight/index.html b/files/es/web/css/font-weight/index.html new file mode 100644 index 0000000000..747efcfd61 --- /dev/null +++ b/files/es/web/css/font-weight/index.html @@ -0,0 +1,181 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +tags: + - CSS + - Propiedad de CSS + - Referencia + - Tipos de letra de CSS +translation_of: Web/CSS/font-weight +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <strong><code>font-weight</code></strong> de <a href="/en-US/docs/CSS" title="CSS">CSS</a> especifica el peso o grueso de la letra. Algunos tipos de letra sólo están disponibles en <code>normal</code> y <code>bold</code>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css notranslate">font-weight: normal; +font-weight: bold; + +/* Relativo al padre */ +font-weight: lighter; +font-weight: bolder; + +font-weight: 100; +font-weight: 200; +font-weight: 300; +font-weight: 400; +font-weight: 500; +font-weight: 600; +font-weight: 700; +font-weight: 800; +font-weight: 900; + +/* Valores globales */ +font-weight: inherit; +font-weight: initial; +font-weight: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>normal </dt> + <dd>Peso/grueso normal de la fuente. Igual que 400.</dd> + <dt>bold </dt> + <dd>Grueso ancho (<em>negrita</em>). Igual que 700.</dd> + <dt>lighter </dt> + <dd>Corresponde a un tipo de fuente menos grueso que el tipo del elemento padre (dentro de los valores disponibles).</dd> + <dt>bolder </dt> + <dd>Corresponde a un tipo de fuente más grueso que el tipo del elemento padre (dentro de los valores disponibles).</dd> + <dt>100, 200, 300, 400, 500, 600, 700, 800, 900 </dt> + <dd>Pesos numéricos para los tipos de fuente que nos permiten más flexibilidad que <code>normal - bold</code>. 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.</dd> +</dl> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p> + 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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css notranslate">/* Poner texto del párrafo en negrita. */ +p { + font-weight: bold; +} + +/* Poner texto del div a dos pasos más oscuro que lo + normal pero menos que una negrita estándar. */ +div { + font-weight: 600; +} + +/* Sets text enclosed within span tag + to be one step lighter than the parent. */ +span { + font-weight: lighter; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Examples","400","300")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Sin cambio</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Define <code>font-weight</code> como animable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Sin cambio</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Apoyo básico</td> + <td>2.0</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Apoyo básico</td> + <td>1.0</td> + <td>{{CompatGeckoMobile(1.0)}}</td> + <td>6.0</td> + <td>6.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/font/index.html b/files/es/web/css/font/index.html new file mode 100644 index 0000000000..a97451bd1d --- /dev/null +++ b/files/es/web/css/font/index.html @@ -0,0 +1,123 @@ +--- +title: font +slug: Web/CSS/font +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/font +--- +<p>{{CSSRef}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>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.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<p><code>font:</code> [ <<a href="es/CSS/font-style">font-style</a>> || <<a href="es/CSS/font-variant">font-variant</a>> || <<a href="es/CSS/font-weight">font-weight</a>> ]? <<a href="es/CSS/font-size">font-size</a>> [ / <<a href="es/CSS/line-height">line-height</a>> ]? <<a href="es/CSS/font-family">font-family</a>></p> + +<p><code>font:</code> <code>caption</code> | <code>icon</code> | <code>menu</code> | <code>message-box</code> | <code>small-caption</code> | <code>status-bar</code> | <code>-moz-window</code> | <code>-moz-document</code> | <code>-moz-workspace</code> | <code>-moz-desktop</code> | <code>-moz-info</code> | <code>-moz-dialog</code> | <code>-moz-button</code> | <code>-moz-pull-down-menu</code> | <code>-moz-list</code> | <code>-moz-field</code></p> + +<p><code>font:</code> {{ Cssxref("inherit") }}</p> + +<h3 id="Valores" name="Valores">Valores</h3> + +<p>La propiedad {{ Cssxref("font") }} establece los valores individuales tal como se especifica y a las otras su valor inicial.</p> + +<p>Ver las propiedades individuales: {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }} y {{ Cssxref("font-family") }}.</p> + +<p>También se pueden especificar los tipos de letra del sistema usando la propiedad {{ Cssxref("font") }},<em>en lugar</em> de tener que especificar cada propiedad individualmente:</p> + +<dl> + <dt>caption </dt> + <dd>el tipo de letra para elementos de control (por ejemplo: botones, cajas de selección, etc.).</dd> + <dt>icon </dt> + <dd>el tipo de letra usado para etiquetar iconos.</dd> + <dt>menu </dt> + <dd>el tipo de letra usado en menús (por ejemplo: barra de menú o menús desplegables).</dd> + <dt>message-box </dt> + <dd>el tipo de letra usado en cajas de diálogo.</dd> + <dt>small-caption </dt> + <dd>el tipo de letra usado para etiquetar pequeños controles (<small>small control</small>).</dd> + <dt>status-bar </dt> + <dd>el tipo de letra usado en la barra de estado de la ventana.</dd> + <dt>-moz-window </dt> + <dd> </dd> + <dt>-moz-document </dt> + <dd> </dd> + <dt>-moz-workspace </dt> + <dd> </dd> + <dt>-moz-desktop </dt> + <dd> </dd> + <dt>-moz-info </dt> + <dd> </dd> + <dt>-moz-dialog </dt> + <dd> </dd> + <dt>-moz-button </dt> + <dd> </dd> + <dt>-moz-pull-down-menu </dt> + <dd> </dd> + <dt>-moz-list </dt> + <dd> </dd> + <dt>-moz-field </dt> + <dd> </dd> +</dl> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<p><a href="/samples/cssref/font.html">Ver El Ejemplo Vivo</a></p> + +<pre>/* 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 } +</pre> + +<pre>/* 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 } +</pre> + +<pre>/* 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 } +</pre> + +<h2 id="Notas" name="Notas">Notas</h2> + +<p>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.</p> + +<p>Si no se establece un valor concreto, las propiedades tomarán el valor por defecto: <code>normal</code>. Las propiedades que se pueden omitir son: ({{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }} y {{ Cssxref("line-height") }}).</p> + +<p>La propiedad {{ Cssxref("font-size-adjust") }} también se establece a su valor inicial (<code>none</code>) cuando se usa la propiedad general {{ Cssxref("font") }}.</p> + +<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#font">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font">CSS 2</a> (para {{ Cssxref("font-size-adjust") }})</li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-ui/#font">css3-ui</a> (para los nuevos valores de fuentes de sistema])</li> +</ul> + +<h2 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>3</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> diff --git a/files/es/web/css/frequency/index.html b/files/es/web/css/frequency/index.html new file mode 100644 index 0000000000..24d700b2ff --- /dev/null +++ b/files/es/web/css/frequency/index.html @@ -0,0 +1,161 @@ +--- +title: <frequency> +slug: Web/CSS/frequency +tags: + - CSS + - Presentación + - Referencia + - Tipos de datos CSS + - Unidad CSS + - Web +translation_of: Web/CSS/frequency +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p><span class="seoSummary">El tipo de dato <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <code><frequency></code> denota una dimensión en frecuencia, como el tono de una voz hablando.</span> 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.</p> + +<p>Las siguientes unidades deben ser usadas:</p> + +<ul> + <li><code><a id="Hz">Hz</a></code>, que representa una frecuencia en Hertz. Ejemplos: <code>0Hz</code>, <code>1500Hz</code>, <code>10000Hz</code>.</li> + <li><code><a id="kHz">kHz</a></code>, que representa una frecuencia en kilohertz. Ejemplos: <code>0kHz</code>, <code>1.5kHz</code>, <code>10kHz</code>.</li> +</ul> + +<p>Aunque todas las unidades representen la misma frecuencia para el valor <code>0</code>, la unidad no debe ser omitida en ese caso, puesto que no es un valor {{cssxref("length")}}: <code>0</code>, no es válido, y no representa <code>0Hz</code>, <code>0kHz</code>. Aunque las unidades sean insensibles a mayúsculas en CSS, es buena práctica usar una H mayúscula para <code>Hz</code> y <code>kHz</code>, como indica el <a class="external" href="https://es.wikipedia.org/wiki/Sistema_Internacional_de_Unidades" title="http://en.wikipedia.org/wiki/International_System_of_Units">SI</a>, siendo <a class="external" href="http://en.wikipedia.org/wiki/Heinrich_Hertz" title="http://en.wikipedia.org/wiki/Heinrich_Hertz">Hertz</a> un apellido.</p> + +<h2 id="Ejemplos"><span>Ejemplos</span></h2> + +<table class="standard-table"> + <caption>Valores de frecuencia permitidos</caption> + <thead> + <tr> + <th scope="col">Código</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>12Hz</code></td> + <td>Entero positivo.</td> + </tr> + <tr> + <td><code>-456kHz</code></td> + <td>Entero negativo.</td> + </tr> + <tr> + <td><code>4.3Hz</code></td> + <td>No entero.</td> + </tr> + <tr> + <td><code>14KhZ</code></td> + <td>La unidad es insensible al uso de mayúsculas, aunque no se recomienda una representación que no esté acorde al SI.</td> + </tr> + <tr> + <td><code>+0Hz</code></td> + <td>Cero, con un símbolo <code>+ y la unidad</code>.</td> + </tr> + <tr> + <td><code>-0kHz</code></td> + <td>Cero, con un símbolo <code>-</code> y la unidad (Aunque no sea común, es un valor permitido).</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Código</th> + <th scope="col">Significado</th> + </tr> + </thead> + <caption>Valores de frecuencia no permitidos</caption> + <tbody> + <tr> + <td><code>12.0</code></td> + <td>Éste es un tipo {{cssxref("<number>")}}, no un tipo <frequency>, debe tener una unidad.</td> + </tr> + <tr> + <td><code>7 Hz</code></td> + <td>No se permite espacio entre el número {{cssxref("<number>")}} y la unidad.</td> + </tr> + <tr> + <td><code>0</code></td> + <td>El valor cero puede ser escrito sin unidad solo para tipo {{cssxref("<length>")}}, no para <frequency>.</td> + </tr> + </tbody> +</table> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Values', '#frequency', '<frequency>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<p>Este tipo de dato fue introducido inicialmente en <a class="external" href="http://www.w3.org/TR/CSS2/" title="http://www.w3.org/TR/CSS2/">CSS Nivel 2</a> para el ya obsoleto <a href="/en/CSS/Aural" title="aural">grupo de merios aural</a>, donde era usado para definir el tono de la voz. Dicho grupo fue descontinuado desde entonces, pero el tipo de datos <code><frequency></code> ha sido reintroducido en CSS3, aunque ninguna propiedad CSS lo usa por el momento.</p> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Algunas versiones de Opera pueden tener (partialmente) soporte para el grupo de medios aural obsoleto, y con soporte al tipo de datos <code><frequency></code> a través de la propiedad de tono.</p> diff --git a/files/es/web/css/gradiente/index.html b/files/es/web/css/gradiente/index.html new file mode 100644 index 0000000000..ae187f2521 --- /dev/null +++ b/files/es/web/css/gradiente/index.html @@ -0,0 +1,100 @@ +--- +title: <gradient> +slug: Web/CSS/Gradiente +tags: + - CSS + - CSS tipo de datos + - Degradado + - Diseño + - Gradiente + - Referencia + - graficos +translation_of: Web/CSS/gradient +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El tipo de datos <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code><gradient></code> indica un tipo de {{cssxref("<image>")}} que consiste de una transición progresiva entre dos o más colores (Degradado).</p> + +<p>{{EmbedInteractiveExample("pages/css/type-gradient.html")}}</p> + +<p>Un gradiente de CSS no es un {{cssxref("<color>")}} pero tampoco es una imagen con <a href="/es/docs/Web/CSS/image#no_intrinsic" title="CSS/image#no_intrinsic">dimensiones intrínsecas</a>; es decir, que no tiene tamaño natural o preferido, ni una relación preferida. Su tamaño concreto coincidirá con los elementos a los que se aplica.</p> + +<p><strong>Funciones de las Gradientes</strong></p> + +<p>Hay tres tipos de gradientes de color:</p> + +<ul> + <li id="linear-gradient"><em><strong>Linear gradients</strong>(gradiente lineal)</em>, generados por la función {{cssxref("linear-gradient", "linear-gradient()")}}, donde el color se desvanece suavemente a lo largo de una línea imaginaria. + + <pre class="brush: html" style="display: none;">A rainbow made from a gradient +</pre> + + <pre class="brush: css">body { +background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); +background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); +background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); +background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); +background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet); +}</pre> + + <p>{{ EmbedLiveSample('linear-gradient', 600, 20) }}</p> + </li> + <li id="radial-gradient"><em><strong>Radial gradient </strong>(gradientes radiales)</em>, generados por la función {{cssxref("radial-gradient", "radial-gradient()")}}. Cuanto más lejos de un origen sea un punto, más lejos del color original será. + <pre class="brush: html" style="display: none;">Radial gradient + </pre> + + <pre class="brush: css">body { +background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent; +background: radial-gradient(red, yellow, rgb(30, 144, 255)); +} +</pre> + + <p>{{ EmbedLiveSample('radial-gradient', 600, 20) }}</p> + </li> + <li id="repeating-gradient"><em><strong>Repeating gradient </strong>(gradientes de repetición), </em>donde se repiten gradientes lineales o radiales tanto como sea necesario para llenar toda la caja. + <pre class="brush: html" style="display: none;">Repeating gradient +</pre> + + <pre class="brush: css">body { +background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); +background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px); +} </pre> + + <p>{{ EmbedLiveSample('repeating-gradient', 600, 20) }}</p> + </li> +</ul> + +<h2 id="Interpolación">Interpolación</h2> + +<p>Al igual que con cualquier caso de interpolación de colores, los gradientes se calculan en el espacio de color alfa-premultiplicado. Esto impide que sombras de gris inesperadas aparezcan cuando el color o la opacidad están variando. (debe tener en cuenta que los navegadores mas antiguos no tienen incorporado este tipo de comportamient cuando utiliza la palabra clave "<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#transparent_keyword">transparent </a>" del inglés transparente ( para más información hacer clic en el link))</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Especificación</th> + <th>Estado</th> + <th>Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>Cada tipo de gradiente tiene una matriz de compatibilidad diferente. Por favor, consulte cada artículo individualmente.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="Using gradients">Usando Gradientes CSS</a>, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li> +</ul> diff --git a/files/es/web/css/grid-auto-columns/index.html b/files/es/web/css/grid-auto-columns/index.html new file mode 100644 index 0000000000..18d241f7b6 --- /dev/null +++ b/files/es/web/css/grid-auto-columns/index.html @@ -0,0 +1,209 @@ +--- +title: grid-auto-columns +slug: Web/CSS/grid-auto-columns +tags: + - CSS + - CSS Grid + - Experimental + - Propiedades CSS + - Referencia +translation_of: Web/CSS/grid-auto-columns +--- +<p>La propiedad de css <strong><code>grid-auto-columns</code></strong> especifíca el tamaño de una columna de cuadrícula creada implícitamente {{glossary("grid tracks", "track")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}}</div> + +<p class="hidden">La version original interactiva de este artículo se guarda en un repositorio GitHub . If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<p>Si un item grid se posiciona dentro de una columna que no tenga un tamaño explícito para {{cssxref("grid-template-columns")}}, implícito{{glossary("grid", "grid")}}las pistan se crean para sostenerlo. Esto puede suceder posicionándose explícitamente en una columna que está fuera de rango, o mediante el algoritmo de auto colocación creando columnas adicionales.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css no-line-numbers notranslate">/* Keyword values */ +grid-auto-columns: min-content; +grid-auto-columns: max-content; +grid-auto-columns: auto; + +/* <length> values */ +grid-auto-columns: 100px; +grid-auto-columns: 20cm; +grid-auto-columns: 50vmax; + +/* <percentage> values */ +grid-auto-columns: 10%; +grid-auto-columns: 33.3%; + +/* <flex> values */ +grid-auto-columns: 0.5fr; +grid-auto-columns: 3fr; + +/* minmax() values */ +grid-auto-columns: minmax(100px, auto); +grid-auto-columns: minmax(max-content, 2fr); +grid-auto-columns: minmax(20%, 80vmax); + +/* fit-content() values */ +grid-auto-columns: fit-content(400px); +grid-auto-columns: fit-content(5cm); +grid-auto-columns: fit-content(20%); + +/* multiple track-size values */ +grid-auto-columns: min-content max-content auto; +grid-auto-columns: 100px 150px 390px; +grid-auto-columns: 10% 33.3%; +grid-auto-columns: 0.5fr 3fr 1fr; +grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); +grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); + +/* Global values */ +grid-auto-columns: inherit; +grid-auto-columns: initial; +grid-auto-columns: unset; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Es una longitud no negativa.</dd> + <dt><code><percentage></code></dt> + <dd>Es un valor no negativo {{cssxref("percentage", "<percentage>")}} en relación con el tamaño del bloque del contenedor de la grilla. Si el tamaño de bloque del contenedor de cuadrícula es indefinido, el valor porcentual se trata como automático.</dd> + <dt><code><flex></code></dt> + <dd>Es una dimensión -valor- no negativa con la unidad <code>fr</code> especificando el 'factor flex' del espacio entre dos celdas. Si el espacio entre dos celdas está designado como <code><flex></code> tomará una porción del espacio remanente entre celdas en proporción a su 'factor flex' - o flex factor <code>fr</code>-.</dd> + <dd>Si aparece en una función <code>minmax()</code> implica un mínimo automático (ejemplo: <code>minmax(auto, <flex>)</code>).</dd> + <dt><code>max-content</code></dt> + <dd>Es una keyword o palabra clave que representa el contenido máximo de los items que ocupan el espacio de la grid o cuadrilla.</dd> + <dt><code>min-content</code></dt> + <dd>Es una keyword o palabra clave que representa el contenido mínimo de los items que ocupan el espacio de la grid o cuadrilla.</dd> + <dt><code>minmax(min, max)</code></dt> + <dd>Es una notación funcional (una función) que define un rango de tamaño mayor que o igual a <em>min</em> y menor que o igual a <em>max</em>. Si <em>max</em> es menor que <em>min</em>, entonces <em>max</em> será ignorado y la función será tratada como un <em>min</em>. Si establecemos un valor máximo como <code><flex></code>, se define el 'factor flex' del espacio entre las celdas del grid. Si establecemos el valor mínimo como <code><flex></code>, se tratará como cero, o contenido mínimo si el contenedor de la grid/cuadrilla tiene la restricción de valor mínimo (min-content).</dd> + <dt><code>fit-content(<em>argument</em>)</code></dt> + <dd>Representa la fórmula <code>min(max-content, max(auto, <var>argument</var>))</code>, que se calcula similar a <code>auto</code> (por ejemplo: <code>minmax(auto, max-content)</code>), excepto que el <em>track size</em> o espacio entre celdas es mayor que el auto mínimo.</dd> + <dt><code>auto</code></dt> + <dd>Es una palabra reservada -o keyword- que es idéntica a contenido máximo si es un máximo. Como mínimo representa el máximo valor mínimo aceptado (según lo especificado por{{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula que ocupan el espacio de la cuadrícula.</dd> + <dd> + <p class="note">Note: Los valores de tamaño <code>auto</code> (y solo los <code>auto</code>) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}} .</p> + </dd> +</dl> + +<h3 id="Sintaxis_Formal">Sintaxis Formal</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html notranslate"><div id="grid"> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> +</div></pre> + +<h3 id="Contenido_CSS">Contenido CSS </h3> + +<pre class="brush: css; highlight[6] notranslate">#grid { + height: 100px; + display: grid; + grid-template-areas: "a a"; + grid-gap: 10px; + grid-auto-columns: 200px; +} + +#grid > div { + background-color: lime; +} +</pre> + +<h3 id="Resultado">Resultado:</h3> + +<p>{{EmbedLiveSample("Example", "410px", "100px")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-columns", "grid-auto-columns")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página se genera de datos estructurados. Si deseas contribuir conn los datos échale un vistazo a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y solicita descargar el contenido. {{Compat("css.properties.grid-auto-columns")}}</div> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>Propiedades CSS relacionadas: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid")}}</li> + <li>Guía de Layout tipo Grid (en inglés): <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#Sizing_rows_in_the_implicit_grid">Auto-placement in grid layout - sizing rows in the implicit grid</a></em></li> + <li>Video tutorial (inglés): <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><strong><a href="/en-US/docs/Web/CSS/Reference">R</a>eferencia a CSS</strong></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/grid-auto-rows/index.html b/files/es/web/css/grid-auto-rows/index.html new file mode 100644 index 0000000000..b50943f3c2 --- /dev/null +++ b/files/es/web/css/grid-auto-rows/index.html @@ -0,0 +1,204 @@ +--- +title: grid-auto-rows +slug: Web/CSS/grid-auto-rows +tags: + - CSS + - Grilla CSS + - Propiedad CSS +translation_of: Web/CSS/grid-auto-rows +--- +<p>La propiedad <strong><code>grid-auto-rows</code></strong> de CSS especifíca el tamaño de una nueva fila creada de forma implícita.</p> + +<pre class="brush: css no-line-numbers">/* Keyword values */ +grid-auto-rows: min-content; +grid-auto-rows: max-content; +grid-auto-rows: auto; + +/* <length> values */ +grid-auto-rows: 100px; +grid-auto-rows: 20cm; +grid-auto-rows: 50vmax; + +/* <percentage> values */ +grid-auto-rows: 10%; +grid-auto-rows: 33.3%; + +/* <flex> values */ +grid-auto-rows: 0.5fr; +grid-auto-rows: 3fr; + +/* minmax() values */ +grid-auto-rows: minmax(100px, auto); +grid-auto-rows: minmax(max-content, 2fr); +grid-auto-rows: minmax(20%, 80vmax); + +/* multiple track-size values */ +grid-auto-rows: min-content max-content auto; +grid-auto-rows: 100px 150px 390px; +grid-auto-rows: 10% 33.3%; +grid-auto-rows: 0.5fr 3fr 1fr; +grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); +grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); + +/* Global values */ +grid-auto-rows: inherit; +grid-auto-rows: initial; +grid-auto-rows: unset; +</pre> + +<p>Si el elemento de una grilla es ubicado en una fila que no tiene un tamaño explicitado en {{cssxref("grid-template-rows")}}, se crean filas implícitas en la {{glossary("grid", "grilla")}} para ubicarlas. Esto puede suceder al ubicar explícitamente un elemento en una fila que está fuera de rango o por el posicionamiento automático que utiliza el algoritmo para crear líneas adicionales.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Es una medida no negativa.</dd> + <dt><code><percentage></code></dt> + <dd>Es un {{cssxref("percentage", "<percentage>")}} no negativo relativo al tamaño del bloque del contenedor de la grilla. Si el tamaño del bloque del contenedor de la grilla es indefinido, el valor del porcentaje es tratado como <code>auto</code>.</dd> + <dt><code><flex></code></dt> + <dd>Es una dimensión no negativa con la unidad <code>fr</code> especificando el factor flex de la pista (track). Cada pista con valor <code><flex></code> toma una parte del espacio restante en proporción con su factor flex. + <p>Cuando aparece fuera de una notación <code>minmax()</code>, implica un mínimo automático (p.e. <code>minmax(auto, <flex>)</code>).</p> + </dd> + <dt><code>max-content</code></dt> + <dd>representa el largo maximo del contenido de cada uno de los items de la pista en la cuadricula(grid)</dd> + <dt><code>min-content</code></dt> +</dl> + +<p>representa el largo minimo del contenido de cada uno de los items de la pista en la cuadricula(grid)</p> + +<dl> + <dt><code>minmax(minimo, maximo)</code></dt> + <dd>es una notacion funcional que define el rango del tamano, dicho tamano debe ser mayor o igual al (minimo) y menor o igual al (maximo). si el parametro (maximo) es mas pequeno que el parametro (minimo), entonces el parametro (maximo) es ignorado y la funcion se tratara con el parametro (minimo). De otra manera si, a valor <code><flex></code> pone como minimo el factor flex de la pista, sera tratado como cero( or el contenido minimo, si el contenedor grid es inicializado con el tamano minimo permitido ).</dd> +</dl> + +<dl> + <dt><code>auto</code></dt> + <dd>Es una palabra clave que es identica a contenido máximo si es un máximo. Como mínimo representa el valor mínimo más grande (como esté especificado por {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la grilla que ocupan la pista de la grilla.</dd> + <dd> + <p class="note">Nota: los tamaños de la pista <code>auto</code> (y sólo los tamaños de la pista <code>auto</code>) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}}.</p> + </dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><div id="grid"> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> +</div></pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css; highlight[6]">#grid { + width: 200px; + display: grid; + grid-template-areas: "a a"; + grid-gap: 10px; + grid-auto-rows: 100px; +} + +#grid > div { + background-color: lime; +} +</pre> + +<p>{{EmbedLiveSample("Example", "210px", "210px")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-rows", "grid-auto-rows")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.grid-auto-rows")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Related CSS properties: {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid")}}</li> + <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#Sizing_rows_in_the_implicit_grid">Auto-placement in grid layout - sizing rows in the implicit grid</a></em></li> + <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/grid-column-gap/index.html b/files/es/web/css/grid-column-gap/index.html new file mode 100644 index 0000000000..4fb514cc7f --- /dev/null +++ b/files/es/web/css/grid-column-gap/index.html @@ -0,0 +1,157 @@ +--- +title: grid-column-gap +slug: Web/CSS/grid-column-gap +translation_of: Web/CSS/column-gap +--- +<p>La propiedad CSS <strong><code>grid-column-gap</code></strong> especifica el {{glossary("gutters","gutter")}} entre {{glossary("grid columns")}}.</p> + +<pre class="brush: css no-line-numbers">/* <length> values */ +grid-column-gap: 20px; +grid-column-gap: 1em; +grid-column-gap: 3vmin; +grid-column-gap: 0.5cm; + +/* <percentage> value */ +grid-column-gap: 10%; + +/* Global values */ +grid-column-gap: inherit; +grid-column-gap: initial; +grid-column-gap: unset; +</pre> + +<p>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.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>Es el ancho del canal que separa las columnas de la grilla. {{cssxref("<percentage>")}} valores son relativos a la dimensión del elemento.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="grid"> + <div></div> + <div></div> + <div></div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[6]">#grid { + display: grid; + height: 100px; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 100px; + grid-column-gap: 20px; +} + +#grid > div { + background-color: lime; +} +</pre> + +<p>{{EmbedLiveSample("Example", "100%", "100px")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Grid", "#propdef-grid-column-gap", "grid-column-gap")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Definición incial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p> </p> + + + +<p>{{Compat("css.properties.grid-column-gap")}}</p> + +<p> </p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Propiedades CSS relacionadas: {{cssxref("grid-row-gap")}}, {{cssxref("grid-gap")}}</li> + <li>Guía sobre CSS Grid Layout: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Conceptos básicos sobre CSS Grid Layout - Gutters</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><strong> <a href="/en-US/docs/Web/CSS/Reference">Referencia CSS</a></strong></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Diseño CSS Grid</a></li> + <li data-default-state="open"><a href="#"><strong>Guías</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos sobre Diseño CSS Grid </a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación con otros métodos de diseño</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamiento basado en línea</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Propiedades</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-colunms</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glosario</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/grid-gap/index.html b/files/es/web/css/grid-gap/index.html new file mode 100644 index 0000000000..4b0c156d44 --- /dev/null +++ b/files/es/web/css/grid-gap/index.html @@ -0,0 +1,251 @@ +--- +title: grid-gap +slug: Web/CSS/grid-gap +translation_of: Web/CSS/gap +--- +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <code>grid-gap</code> es una propiedad abreviada <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> para {{cssxref("grid-row-gap")}} y {{cssxref("grid-column-gap")}} que especifica los canales entre las filas y las columnas de la cuadrícula.</p> + +<p>Si <'grid-column-gap'> se omite, adquiere el mismo valor que <'grid-row-gap'>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">/* Un valor <longitud> */ +grid-gap: 20px; +grid-gap: 1em; +grid-gap: 3vmin; +grid-gap: 0.5cm; + +/* Un valor <porcentaje> */ +grid-gap: 16%; +grid-gap: 100%; + +/* Dos valores <longitud> */ +grid-gap: 20px 10px; +grid-gap: 1em 0.5em; +grid-gap: 3vmin 2vmax; +grid-gap: 0.5cm 2mm; + +/* Uno o dos valores <porcentaje> */ +grid-gap: 16% 100%; +grid-gap: 21px 82%; + +/* Valores Globales */ +grid-gap: inherit; +grid-gap: initial; +grid-gap: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><longitud></code></dt> + <dd>Es el ancho del calalón que separa las lineas de las rejillas.</dd> + <dt><code><percentage></code></dt> + <dd>Es el ancho del canalón que separa las lineas de las rejillas, en relación con la dimensión del elemento.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div id="grid"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div></pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css; highlight[5]">#grid { + display: grid; + height: 200px; + grid-template: repeat(3, 1fr) / repeat(3, 1fr); + grid-gap: 20px 5px; +} + +#grid > div { + background-color: lime; +} +</pre> + +<p>{{EmbedLiveSample("Example", "100%", "200px")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatOpera(44)}}<sup>[4]</sup></td> + <td>{{CompatNo}}<sup>[6]</sup></td> + </tr> + <tr> + <td><porcentaje> valor</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}<sup>[4]</sup></td> + <td>{{CompatNo}}<sup>[6]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Vista web de Android</th> + <th>Chrome para Android</th> + <th>Firefox Móvil (Gecko)</th> + <th>IE Móvil</th> + <th>Opera Móvil</th> + <th>Safari Móvil</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td> + <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("52.0")}}<sup>[3]</sup></td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><porcentaje> value</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("52.0")}}<sup>[5]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implementado bajo la plataforma web experimental<em> de características de etiquetas</em> en <code>chrome://flags</code> since Chrome 29.0.</p> + +<p>[2] Implemented behind the preference <code>layout.css.grid.enabled</code> since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to <code>false</code>. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.</p> + +<p>[3] Internet Explorer implements an <a href="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/">older version of the specification</a>, which didn't define this property.</p> + +<p>[4] Implemented behind the <em>Enable experimental Web Platform features</em> flag in <code>chrome://flags</code> since Opera 28.0.</p> + +<p>[5] Implemented behind the preference <code>layout.css.grid.enabled</code> since Gecko 49.0 {{geckoRelease("49.0")}}, defaulting to <code>false</code>. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.</p> + +<p>[6] Experimental implementation available in Safari Technological Preview.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related CSS properties: {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}}</li> + <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-colunms</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/grid-template-areas/index.html b/files/es/web/css/grid-template-areas/index.html new file mode 100644 index 0000000000..b97dd3ef69 --- /dev/null +++ b/files/es/web/css/grid-template-areas/index.html @@ -0,0 +1,233 @@ +--- +title: grid-template-areas +slug: Web/CSS/grid-template-areas +translation_of: Web/CSS/grid-template-areas +--- +<p><code>La propiedad CSS grid-template-areas</code> especifica nombres para cada una de las {{glossary("grid areas")}}.</p> + +<pre class="brush: css no-line-numbers">/* Keyword value */ +grid-template-areas: none; + +/* <string> values */ +grid-template-areas: "a b"; +grid-template-areas: "a b b" + "a c d"; + +/* Global values */ +grid-template-areas: inherit; +grid-template-areas: initial; +grid-template-areas: unset; +</pre> + +<p>Estas áreas no están asociadas a ningún elemento particular de la cuadrícula, pero pueden referenciarse desde otras propiedades de posicionamiento en la cuadrícula: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, y sus formas abreviadas {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>El contenedor de la cuadrícula no define ningún nombre para las áreas de la cuadrícula.</dd> + <dt><code><string>+</code></dt> + <dd>Las filas se crean listando líneas de cadenas separadas, mientras que las columnas se reflejan en cada una de las celdas que aparecen en la cadena. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><em><section id="page"> + <header</em>>Header</header> +<em> <nav</em>>Navigation</nav> +<em> <main</em>>Main area</main> +<em> <footer</em>>Footer</footer> +<em></section></em></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css; highlight[5-7]">#page { + display: grid; + width: 100%; + height: 250px; + grid-template-areas: "head head" + "nav main" + "nav foot"; + grid-template-rows: 50px 1fr 30px; + grid-template-columns: 150px 1fr; +} + +#page > header { + grid-area: head; + background-color: #8ca0ff; +} + +#page > nav { + grid-area: nav; + background-color: #ffa08c; +} + +#page > main { + grid-area: main; + background-color: #ffff64; +} + +#page > footer { + grid-area: foot; + background-color: #8cffa0; +} +</pre> + +<h3 id="Result">Result</h3> + +<p><em>{{EmbedLiveSample("Example", "100%", "250px")}}</em></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatOpera(44)}}<sup>[4]</sup></td> + <td>{{CompatSafari(10.1)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td> + <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td> + <td>{{CompatGeckoMobile("52.0")}}<sup>[2]</sup></td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatSafari(10.3)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implemented behind the <em>experimental Web Platform features</em> flag in <code>chrome://flags</code> since Chrome 29.0.</p> + +<p>[2] Implemented behind the preference <code>layout.css.grid.enabled</code> since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to <code>false</code>. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.</p> + +<p>[3] Internet Explorer and Edge implement an <a href="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/">older version of the specification</a>, which doesn't define this property.</p> + +<p>[4] Implemented behind the <em>Enable experimental Web Platform features</em> flag in <code>chrome://flags</code> since Opera 28.0.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}</li> + <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li> + <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-colunms</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/grid-template-columns/index.html b/files/es/web/css/grid-template-columns/index.html new file mode 100644 index 0000000000..4dd982b375 --- /dev/null +++ b/files/es/web/css/grid-template-columns/index.html @@ -0,0 +1,188 @@ +--- +title: grid-template-columns +slug: Web/CSS/grid-template-columns +translation_of: Web/CSS/grid-template-columns +--- +<p>La propiedad CSS <strong><code>grid-template-columns</code></strong> define el nombre de las líneas y las funciones de tamaño de línea de {{glossary("grid column", "grid columns")}}.</p> + +<pre class="brush: css no-line-numbers">/* Keyword value */ +grid-template-columns: none; + +/* <track-list> values */ +grid-template-columns: 100px 1fr; +grid-template-columns: [linename] 100px; +grid-template-columns: [linename1] 100px [linename2 linename3]; +grid-template-columns: minmax(100px, 1fr); +grid-template-columns: fit-content(40%); +grid-template-columns: repeat(3, 200px); + +/* <auto-track-list> values */ +grid-template-columns: 200px repeat(auto-fill, 100px) 300px; +grid-template-columns: minmax(100px, max-content) + repeat(auto-fill, 200px) 20%; +grid-template-columns: [linename1] 100px [linename2] + repeat(auto-fit, [linename3 linename4] 300px) + 100px; +grid-template-columns: [linename1 linename2] 100px + repeat(auto-fit, [linename1] 300px) [linename3]; + +/* Global values */ +grid-template-columns: inherit; +grid-template-columns: initial; +grid-template-columns: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Es una palabra clave que significa que no hay una cuadrícula explícita. Cualquier columna será generada implicitamente y su tamaño sera determinado por la propiedad {{cssxref("grid-auto-columns")}}.</dd> + <dt>{{cssxref("<length>")}}</dt> + <dd>Es una longitud no negativa.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Es un valor no negativo {{cssxref("percentage", "<percentage>")}}, relativo al tamaño del bloque del contenedor grid. Si el tamaño del contenedor de la cuadrícula depende del tamaño de sus vías, entonces el porcentaje debe de tratarse como <code>auto</code>.<br> + Las contribuciones de tamaño intrínseco de la vía puede ser ajustado al tamaño del contenedor de la cuadrícula, e incrementar el tamaño final de la vía por la cantidad mínima que permita mantener el porcentaje.</dd> + <dt>{{cssxref("<flex>")}}</dt> + <dd>Es una dimensión no negativa con la unidad <code>fr</code> especificando el factor de flexibilidad de la vía. Cada vía de tamaño- <code><flex></code> toma un trozo del espacio restante en proporción a su factor de flexibilidad. Cuando aparece en una notación <code>minmax()</code>, implica un mínimo automático (es decir, <code>minmax(auto, <flex>)</code>).</dd> + <dt id="max-content"><code>max-content</code></dt> + <dd>Es una palabra clave representando la mayor contribución máxima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.</dd> + <dt><code>min-content</code></dt> + <dd>Es una palabra clave representando la mayor contribución mínima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.</dd> + <dt>{{cssxref("minmax", "minmax(min, max)")}}</dt> + <dd>Es una notación funcional que define un rango de tamaño, mayor o igual que <em>min</em>, y menor o igual que <em>max</em>. Si <em>max</em> es menor a <em>min</em>, entonces <em>max</em> es ignorado y la función es tratada como <em>min</em>. Como un máximo, un valor <code><flex></code> ajusta el factor de flexibilad de la vía. Es inválido utilizarlo como un mínimo.</dd> + <dt id="auto"><code>auto</code></dt> + <dd>Es una palabra clave que es idéntica al contenido máximo si es un máximo. Como un mínimo representa el mínimo más grande (según lo especificado por {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la vía.</dd> + <dd> + <p class="note">Nota: Los tamaños de vía <code>auto</code> (y sólo los tamaños de vía <code>auto</code> ) pueden ser estirados por las propiedades {{cssxref("justify-content")}}.</p> + </dd> + <dt id="fit-content()"><code>{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}</code></dt> + <dd>Representa la fórmula <code>min(max-content, max(auto, <var>argument</var>))</code>, que se calcula de forma similar a <code>auto</code> (es decir, <code>minmax(auto, max-content)</code>), excepto que el tamaño de la vía se fija a <var>argument</var> si es mayor que el mínimo.</dd> + <dt>{{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}</dt> + <dd>Representa un fragmento repetido de la lista de vías, permitiendo que un gran número de columnas que muestran un patrón recurrente se escriban de una manera más compacta.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">#grid { + display: grid; + width: 100%; + grid-template-columns: 50px 1fr; +} + +#areaA { + background-color: lime; +} + +#areaB { + background-color: yellow; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="grid"> + <div id="areaA">A</div> + <div id="areaB">B</div> +</div></pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Examples", "100%", "20px")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Condición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + + + +<p>{{Compat("css.properties.grid-template-columns")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Propiedades CSS relacionadas: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}</li> + <li>Guía de grid layout: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks">Basic concepts of grid layout - Grid Tracks</a></em></li> + <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>Referencia CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guías</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos de grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación con otros métodos de layouts</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Colocación en línea</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Áreas de plantilla de cuadrícula</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout utilizando líneas de cuadrícula nombradas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-colocacion en grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">BAlineación de cajas en grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, valores lógicos y modos de escritura</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout y Accesibilidad</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout y Mejora Progresiva</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizando layouts comunes con grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Propiedades</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glosario</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/grid-template-rows/index.html b/files/es/web/css/grid-template-rows/index.html new file mode 100644 index 0000000000..b04eed1ea3 --- /dev/null +++ b/files/es/web/css/grid-template-rows/index.html @@ -0,0 +1,215 @@ +--- +title: grid-template-rows +slug: Web/CSS/grid-template-rows +tags: + - CSS + - Propiedad CSS + - Referencia + - grid css +translation_of: Web/CSS/grid-template-rows +--- +<p>La propiedad CSS <strong><code>grid-template-rows</code></strong> define el nombre de las líneas y las funciones de tamaño de línea de {{glossary("grid rows", "grid rows")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css no-line-numbers">/* Keyword value */ +grid-template-rows: none; + +/* <track-list> values */ +grid-template-rows: 100px 1fr; +grid-template-rows: [linename] 100px; +grid-template-rows: [linename1] 100px [linename2 linename3]; +grid-template-rows: minmax(100px, 1fr); +grid-template-rows: fit-content(40%); +grid-template-rows: repeat(3, 200px); +grid-template-rows: subgrid; + +/* <auto-track-list> values */ +grid-template-rows: 200px repeat(auto-fill, 100px) 300px; +grid-template-rows: minmax(100px, max-content) + repeat(auto-fill, 200px) 20%; +grid-template-rows: [linename1] 100px [linename2] + repeat(auto-fit, [linename3 linename4] 300px) + 100px; +grid-template-rows: [linename1 linename2] 100px + repeat(auto-fit, [linename1] 300px) [linename3]; + +/* Global values */ +grid-template-rows: inherit; +grid-template-rows: initial; +grid-template-rows: unset; +</pre> + +<p>Esta propiedad puede especificarse como:</p> + +<ul> + <li>el valor de la palabra clave <code>none</code></li> + <li>o un valor de <code><track-list></code></li> + <li>o un valor de <code><auto-track-list></code>.</li> +</ul> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Es una palabra clave que significa que no hay una cuadrícula explícita. Cualquier fila será generada implicitamente y su tamaño sera determinado por la propiedad {{cssxref("grid-auto-rows")}}.</dd> + <dt>{{cssxref("<length>")}}</dt> + <dd>Es una longitud no negativa.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Es un valor no negativo {{cssxref("percentage", "<percentage>")}}, relativo al tamaño del bloque del contenedor grid. Si el tamaño del contenedor de la cuadrícula depende del tamaño de sus vías, entonces el porcentaje debe de tratarse como <code>auto</code>.<br> + Las contribuciones de tamaño intrínseco de la vía puede ser ajustado al tamaño del contenedor de la cuadrícula, e incrementar el tamaño final de la vía por la cantidad mínima que permita mantener el porcentaje.</dd> + <dt>{{cssxref("<flex_value>","<flex>")}}</dt> + <dd>Es una dimensión no negativa con la unidad <code>fr</code> especificando el factor de flexibilidad de la vía. Cada vía de tamaño- <code><flex></code> toma un trozo del espacio restante en proporción a su factor de flexibilidad. Cuando aparece en una notación <code>minmax()</code>, implica un mínimo automático (i.e. <code>minmax(auto, <flex>)</code>).</dd> + <dt><code>max-content</code></dt> + <dd>Es una palabra clave representando la mayor contribución máxima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.</dd> + <dt><code>min-content</code></dt> + <dd>Es una palabra clave representando la mayor contribución mínima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.</dd> + <dt>{{cssxref("minmax", "minmax(min, max)")}}</dt> + <dd>Es una notación funcional que define un rango de tamaño, mayor o igual que <em>min</em>, y menor o igual que <em>max</em>. Si <em>max</em> es menor a <em>min</em>, entonces <em>max</em> es ignorado y la función es tratada como <em>min</em>. Como un máximo, un valor <code><flex></code> ajusta el factor de flexibilad de la vía. Es inválido utilizarlo como un mínimo.</dd> + <dt><code>auto</code></dt> + <dd>Es una palabra clave que es idéntica al contenido máximo si es un máximo. Como un mínimo representa el mínimo más grande (según lo especificado por {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la vía.</dd> + <dd> + <p class="note">Nota: Los tamaños de vía <code>auto</code> (y sólo los tamaños de vía <code>auto</code> ) pueden ser estirados por las propiedades {{cssxref("align-content")}} and {{cssxref("justify-content")}}.</p> + </dd> + <dt>{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}</dt> + <dd>Representa la fórmula <code>min(max-content, max(auto, <var>argument</var>))</code>, que se calcula de forma similar a <code>auto</code> (es decir, <code>minmax(auto, max-content)</code>), excepto que el tamaño de la vía se fija a <var>argument</var> si es mayor que el mínimo <code>auto</code>.</dd> + <dt>{{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}</dt> + <dd>Representa un fragmento repetido de la lista de vías, permitiendo que un gran número de filas que muestran un patrón recurrente se escriban de una manera más compacta.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid">subgrid</a></dt> + <dd>El valor <code><dfn>subgrid</dfn></code> indica que la cuadrícula adoptara la porción que ocupa su cuadrícula principal (padre) en ese eje. En lugar de ser indicado de forma explícita, los tamaños de la las filas y columnas de la cuadrícula se tomarán de la definición de la cuadrícula superior.</dd> +</dl> + +<div class="blockIndicator warning"> +<p>El valor subgrid es del Nivel 2 de la especificación Grid y actualmente sólo tiene implementaciones en Firefox 71 y posteriores.</p> +</div> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css">#grid { + display: grid; + height: 100px; + grid-template-rows: 30px 1fr; +} + +#areaA { + background-color: lime; +} + +#areaB { + background-color: yellow; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="grid"> + <div id="areaA">A</div> + <div id="areaB">B</div> +</div></pre> + +<h3 id="Result">Result</h3> + +<div class="hidden"> +<p>{{EmbedLiveSample("Examples", "40px", "100px")}}</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-rows", "grid-template-rows")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName("CSS Grid 2", "#subgrids", "subgrid")}}</td> + <td>{{Spec2("CSS Grid 2")}}</td> + <td>Incorpora subgrid</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2> + + + +<p>{{Compat("css.properties.grid-template-rows")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Propiedades CSS relacionadas: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}</li> + <li>Guía de grid layout: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks">Basic concepts of grid layout - Grid Tracks</a></em></li> + <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guías</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Propiedades</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glosario</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/grid/index.html b/files/es/web/css/grid/index.html new file mode 100644 index 0000000000..7a14af42b6 --- /dev/null +++ b/files/es/web/css/grid/index.html @@ -0,0 +1,237 @@ +--- +title: grid +slug: Web/CSS/grid +translation_of: Web/CSS/grid +--- +<p>La propiedad CSS <strong><code>grid</code></strong> es un <a href="/es/docs/Web/CSS/Shorthand_properties">shorthand</a> que permite definir todas las propiedades <em>grid</em> explícitas ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, y {{cssxref("grid-template-areas")}}), implícitas ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, y {{cssxref("grid-auto-flow")}}), y relativas a <em>gutter</em><em> </em>({{cssxref("grid-column-gap")}} y {{cssxref("grid-row-gap")}}) en una sola declaración.</p> + +<pre class="brush: css no-line-numbers">/* <'grid-template'> values */ +grid: none; +grid: "a" 100px "b" 1fr; +grid: [linename1] "a" 100px [linename2]; +grid: "a" 200px "b" min-content; +grid: "a" minmax(100px, max-content) "b" 20%; +grid: 100px / 200px; +grid: minmax(400px, min-content) / repeat(auto-fill, 50px); + +/* <'grid-template-rows'> / + [ auto-flow && dense? ] <'grid-auto-columns'>? values */ +grid: 200px / auto-flow; +grid: 30% / auto-flow dense; +grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; +grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; + +/* [ auto-flow && dense? ] <'grid-auto-rows'>? / + <'grid-template-columns'> values */ +grid: auto-flow / 200px; +grid: auto-flow dense / 30%; +grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); +grid: auto-flow dense 40% / [line1] minmax(20em, max-content); + +/* Global values */ +grid: inherit; +grid: initial; +grid: unset; +</pre> + +<div class="note"> +<p><strong>Nota:</strong> Sólo se pueden especificar las propiedades explícitas <strong><em>o bien</em></strong> las propiedades implícitas en una sola declaración <code>grid</code>. Las sub-propiedades que no se especifican se definen a su valor inicial, como es normal para shorthands. También, las propiedades relativas a gutter se redefinen mediante este shorthand, incluso cuando no pueden ser definidas mediante el mismo.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><'grid-template'></code></dt> + <dd>Define el {{cssxref("grid-template")}} incluyendo {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} y {{cssxref("grid-template-areas")}}.</dd> + <dt><code><'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?</code></dt> + <dd>Implementa un <em>auto-flow</em> asignando los <em>row tracks</em> explícitamente mediante {{cssxref("grid-template-rows")}} (definiendo {{cssxref("grid-template-columns")}} en <code>none</code>) y especificando como auto-repetir los <em>column tracks</em> mediante {{cssxref("grid-auto-columns")}} (definiendo {{cssxref("grid-auto-rows")}} en <code>auto</code>). {{cssxref("grid-auto-flow")}} es seteado en <code>column</code> en consecuencia, con <code>dense</code> si se especifica.<br> + Todas las otras sub-propiedades de <code>grid</code> se redefinen a sus valores iniciales.</dd> + <dt><code>[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'></code></dt> + <dd>Implementa un <em>auto-flow</em> asignando los <em>column tracks</em> explícitamente mediante {{cssxref("grid-template-columns")}} (definiendo {{cssxref("grid-template-rows")}} en <code>none</code>) y especificando como auto-repetir los <em>row tracks</em> mediante {{cssxref("grid-auto-rows")}} (definiendo {{cssxref("grid-auto-columns")}} en <code>auto</code>). {{cssxref("grid-auto-flow")}} es seteado en <code>row</code> en consecuencia, con <code>dense</code> si se especifica.<br> + Todas las otras sub-propiedades de <code>grid</code> se redefinen a sus valores iniciales.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#container { + display: grid; + grid: repeat(2, 60px) / auto-flow 80px; +} + +#container > div { + background-color: #8ca0ff; + width: 50px; + height: 50px; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Example", "100%", 150)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatOpera(44)}}<sup>[4]</sup></td> + <td>{{CompatSafari("10.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td> + <td>{{CompatChrome("57.0")}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatOperaMobile}}</td> + <td>{{CompatSafari("10.3")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implementado detrás del flag <em>experimental Web Platform features</em> en <code>chrome://flags</code> desde Chrome 29.0.</p> + +<p>[2] Implementado detrás de la preferencia <code>layout.css.grid.enabled</code> desde Gecko 40.0 {{geckoRelease("40.0")}}, <code>false</code> por defecto. Desde Gecko 52.0 <code>true</code> por defecto.</p> + +<p>[3] Internet Explorer y Edge implementan una <a href="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/">version antigua de la especificación</a>, que no define el shorthand <code>grid</code>. Ver el <a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid">pedido para actualizar la implementación</a>.</p> + +<p>[4] Implementado detrás del flag <em>Enable experimental Web Platform features</em> en <code>chrome://flags</code> desde Opera 28.0.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Propiedades CSS relacionadas: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li> + <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li> + <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guides</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Properties</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/height/index.html b/files/es/web/css/height/index.html new file mode 100644 index 0000000000..202c379583 --- /dev/null +++ b/files/es/web/css/height/index.html @@ -0,0 +1,231 @@ +--- +title: height +slug: Web/CSS/height +tags: + - Propiedad CSS + - Referencia +translation_of: Web/CSS/height +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>height</code></strong> especifica la altura del area de contenido de un elemento. El <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">área de contenido</a> está <em>dentro</em> del padding, borde, y margen del elemento.</p> + +<p>Las propiedades {{cssxref("min-height")}} y {{cssxref("max-height")}} sobreescriben el valor de {{Cssxref("height")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* Valores clave */ +height: auto; + +/* Valores <length> */ +height: 120px; +height: 10em; + +/* Valores <percentage> */ +height: 75%; + +/* Valores globales */ +height: inherit; +height: initial; +height: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Ver {{cssxref("<length>")}} para unidades disponibles.</dd> + <dt><code><percentage></code></dt> + <dd>Especificado con el tipo {{cssxref("<percentage>")}} como porcentaje de la altura del bloque contenedor</dd> + <dt><code>border-box </code>{{experimental_inline}}</dt> + <dd>Si está presente, el valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} precedente es aplicado a los límites del borde del elemento.</dd> + <dt><code>content-box</code> {{experimental_inline}}</dt> + <dd>Si está presente, el valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} precedente será aplicado a los límites de contenido del elemento.</dd> + <dt><code>auto</code></dt> + <dd>El navegador calculará y seleccionará la altura para el elemento especificado.</dd> + <dt>fill {{experimental_inline}}</dt> + <dd>Use el tamaño <code>fill-available</code> para elementos inline o block, según sea más apropiado para el modo de escritura.</dd> + <dt><code>max-content</code> {{experimental_inline}}</dt> + <dd>La altura preferida intrínseca.</dd> + <dt><code>min-content</code> {{experimental_inline}}</dt> + <dd>La altura mínima intrínseca.</dd> + <dt><code>available</code> {{experimental_inline}}</dt> + <dd>La altura del bloque contenedor menos su margen vertical, borde y padding.</dd> + <dt><code>fit-content</code> {{experimental_inline}}</dt> + <dd>El mayor entre: + <ul> + <li>la altura mínima intrínseca</li> + <li>la menor entre la altura prefereida intrínseca y la altura disponible</li> + </ul> + </dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="red"> + <span>I'm 50 pixels tall.</span> +</div> +<div id="green"> + <span>I'm 25 pixels tall.</span> +</div> +<div id="parent"> + <div id="child"> + <span>I'm half the height of my parent.</span> + </div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 250px; + margin-bottom: 5px; + border: 3px solid #999999; +} + +#red { + height: 50px; +} + +#green { + height: 25px; +} + +#parent { + height: 100px; +} + +#child { + height: 50%; + width: 75%; +} +</pre> + +<p>{{EmbedLiveSample('Example')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Añade las palabras clave <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Incluye <code>height</code> como propiedad que puede ser animada.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Añade soporte para valores {{cssxref("<length>")}} y especifica a qué elementos es aplicable.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#height', 'height')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td> + <td>{{Spec2('CSS3 Sizing')}}</td> + <td>Añade nuevas palabras clave de tamaño para <code>width</code> y <code>height</code></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + <tr> + <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td> + <td>{{CompatChrome(46.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">box model</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li> +</ul> diff --git a/files/es/web/css/herramientas/cubic_bezier_generator/index.html b/files/es/web/css/herramientas/cubic_bezier_generator/index.html new file mode 100644 index 0000000000..b99e7afaa3 --- /dev/null +++ b/files/es/web/css/herramientas/cubic_bezier_generator/index.html @@ -0,0 +1,320 @@ +--- +title: Generador de curvas de bézier +slug: Web/CSS/Herramientas/Cubic_Bezier_Generator +translation_of: Web/CSS/Tools/Cubic_Bezier_Generator +--- +<div id="Tool"> +<div style="display: none;"> +<pre class="brush:html"><html> + <canvas id="bezier" width="336" height="336"> + </canvas> + <form> + <label for="x1">x1 = </label><input onchange="updateCanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'> + <label for="y1">y1 = </label><input onchange="updateCanvas();return true;" type="text" maxlength=6 id="y1" value="0.33" class='field'> + <label for="x2">x2 = </label><input onchange="updateCanvas();return true;" type="text" maxlength=6 id="x2" value="0.14" class='field'> + <label for="y2">y2 = </label><input onchange="updateCanvas();return true;" type="text" maxlength=6 id="y2" value="0.53" class='field'> + <br> + <output id="output">Log</output> + </form> +</html> + </pre> + +<pre class="brush:css">.field { + width: 40px; +} + </pre> + +<pre class="brush:js">function updateCanvas() { + + var x1 = document.getElementById('x1').value; + var y1 = document.getElementById('y1').value; + var x2 = document.getElementById('x2').value; + var y2 = document.getElementById('y2').value; + + drawBezierCurve(x1, y1, x2, y2); +} + +const radius = 4; +// Place needed to draw the rulers +const rulers = 30.5; +const margin = 10.5; +const basic_scale_size = 5; // Size of 0.1 tick on the rulers +var scaling; //LIMITATION: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated +var dragSM = 0; // Drag state machine: 0 = nodrag, others = object being dragged + +function initCanvas() { + // get the canvas element using the DOM + var canvas = document.getElementById('bezier'); + + // Make sure we don't execute when canvas isn't supported + if (canvas.getContext) { + // use getContext to use the canvas for drawing + var ctx = canvas.getContext('2d'); + + scaling = Math.min(canvas.height - rulers - margin, canvas.width - rulers - margin); + + canvas.onmousedown = mouseDown; + canvas.onmouseup = mouseUp; + } else { + alert('You need Safari or Firefox 1.5+ to see this demo.'); + } +} + +function cX(x) { + return x * scaling + rulers; +} + +function reverseX(x) { + return (x - rulers) / scaling; +} + +function lX(x) { + //Used when drawing vertical lines to prevent subpixel blur + var result = cX(x); + return Math.round(result) == result ? result + 0.5 : result; +} + +function cY(y) { + + return (1 - y) * scaling + margin; +} + +function reverseY(y) { + return (margin - y) / scaling + 1; +} + +function lY(y) { + // Used when drawing horizontal lines to prevent subpixel blur + var result = cY(y); + return Math.round(result) == result ? result + 0.5 : result; +} + +function drawBezierCurve(x1, y1, x2, y2) { + + // get the canvas element using the DOM + var canvas = document.getElementById('bezier'); + + // Make sure we don't execute when canvas isn't supported + if (canvas.getContext) { + + // use getContext to use the canvas for drawing + var ctx = canvas.getContext('2d'); + + + + // Clear canvas + ctx.clearRect(0, 0, canvas.width, canvas.height); + + // Draw the rulers + ctx.beginPath(); + ctx.strokeStyle = "black"; + + // Draw the Y axis + ctx.moveTo(cX(0), cY(0)); + ctx.lineTo(cX(1), cY(0)); + ctx.textAlign = "right"; + + for (var i = 0.1; i <= 1; i = i + 0.1) { + ctx.moveTo(-basic_scale_size + cX(0), lY(i)); + if ((i == 0.5) || (i > 0.9)) { + ctx.moveTo(-2 * basic_scale_size + cX(0), lY(i)); + ctx.fillText(Math.round(i * 10) / 10, -3 * basic_scale_size + cX(0), cY(i) + 4); + // Limitation the constant 4 should be font size dependant + } + ctx.lineTo(cX(0), lY(i)); + } + ctx.stroke(); + ctx.closePath(); + ctx.beginPath(); + + // Draw the Y axis label + ctx.save(); + ctx.rotate(-Math.PI / 2); + ctx.textAlign = "left"; + ctx.fillText("Output (Value Ratio)", -cY(0), -3 * basic_scale_size + cX(0)); + ctx.restore(); + + // Draw the X axis + ctx.moveTo(cX(0), cY(0)); + ctx.lineTo(cX(0), cY(1)); + ctx.textAlign = "center"; + for (i = 0.1; i <= 1; i = i + 0.1) { + ctx.moveTo(lX(i), basic_scale_size + cY(0)); + if ((i == 0.5) || (i > 0.9)) { + ctx.moveTo(lX(i), 2 * basic_scale_size + cY(0)); + ctx.fillText(Math.round(i * 10) / 10, cX(i), 4 * basic_scale_size + cY(0)); + // Limitation the constant 4 should be dependant of the font size + } + ctx.lineTo(lX(i), cY(0)); + } + + // Draw the X axis label + ctx.textAlign = "left"; + ctx.fillText("Input (Time Duration Ratio)", cX(0), 4 * basic_scale_size + cY(0)); + // Limitation the constant 4 should be dependant of the font size + ctx.stroke(); + ctx.closePath(); + + // Draw the Bézier Curve + ctx.beginPath(); + ctx.moveTo(cX(0), cY(0)); + ctx.strokeStyle = 'blue'; + ctx.bezierCurveTo(cX(x1), cY(y1), cX(x2), cY(y2), cX(1), cY(1)); + ctx.stroke(); + ctx.closePath(); + + + + // Draw the P2 point (with a line to P0) + ctx.beginPath(); + ctx.strokeStyle = 'red'; + ctx.moveTo(cX(x1), cY(y1)); + ctx.lineTo(cX(0), cY(0)); + ctx.stroke(); + ctx.closePath(); + ctx.beginPath(); + ctx.moveTo(cX(x1), cY(y1)); + ctx.arc(cX(x1), cY(y1), radius, 0, 2 * Math.PI); + ctx.stroke(); + ctx.fillStyle = 'white'; + ctx.fill(); + ctx.closePath(); + + + + // Draw the P3 point (with a line to P1) + ctx.beginPath(); + ctx.strokeStyle = 'red'; + ctx.moveTo(cX(x2), cY(y2)); + ctx.lineTo(cX(1), cY(1)); + ctx.stroke(); + ctx.closePath(); + + ctx.beginPath(); + ctx.moveTo(cX(x2), cY(y2)); + ctx.arc(cX(x2), cY(y2), radius, 0, 2 * Math.PI); + ctx.stroke(); + ctx.fill(); + ctx.closePath(); + + // Draw the P1(1,1) point (with dashed hints) + ctx.beginPath(); + ctx.moveTo(cX(1), cY(1)); + ctx.strokeStyle = 'lightgrey'; + ctx.lineTo(cX(0), cY(1)); + ctx.moveTo(cX(1), cY(1)); + ctx.lineTo(cX(1), cY(0)); + ctx.stroke(); + ctx.closePath(); + + ctx.beginPath(); + ctx.strokeStyle = "black"; + ctx.fillStyle = "black"; + ctx.arc(cX(1), cY(1), radius, 0, 2 * Math.PI); + ctx.fill(); + ctx.stroke(); + ctx.closePath(); + + + // Draw the P0(0,0) point + ctx.beginPath(); + ctx.arc(cX(0), cY(0), radius, 0, 2 * Math.PI); + ctx.fill(); + ctx.stroke(); + ctx.closePath(); + + + } else { + alert('You need Safari or Firefox 1.5+ to see this demo.'); + } +} + +function mouseDown(e) { + + var canvas = document.getElementById('bezier'); + + var x1 = cX(document.getElementById('x1').value); + var y1 = cY(document.getElementById('y1').value); + + var x = e.pageX - canvas.offsetLeft; + var y = e.pageY - canvas.offsetTop; + + var output = document.getElementById('output'); + output.value = "(" + x + "," + y + ") should be (" + x1 + "," + y1 + ")"; + + + if ((x1 + radius >= x) && (x1 - radius <= x) && (y1 + radius >= y) && (y1 - radius <= y)) { + var output = document.getElementById('output'); + output.value = "P1!"; + dragSM = 1; + } + + var x2 = cX(document.getElementById('x2').value); + var y2 = cY(document.getElementById('y2').value); + + if ((x2 + radius >= x) && (x2 - radius <= x) && (y2 + radius >= y) && (y2 - radius <= y)) { + var output = document.getElementById('output'); + output.value = "P2!"; + dragSM = 2; + } + + // If we are starting a drag + if (dragSM != 0) { + canvas.onmousemove = mouseMove; + } +} + +function mouseUp(e) { + + var output = document.getElementById('output'); + output.value = "Mouse up!"; + dragSM = 0; + canvas.onmousemove = null; +} + +function mouseMove(e) { + if (dragSM != 0) { + var canvas = document.getElementById('bezier'); + + var x = e.pageX - canvas.offsetLeft; + var y = e.pageY - canvas.offsetTop; + + var output = document.getElementById('output'); + output.value = "Drag!"; + + if (dragSM == 1) { + var x1 = document.getElementById('x1'); + var y1 = document.getElementById('y1'); + x1.value = reverseX(x); + x1.value = Math.round(x1.value * 10000) / 10000; + y1.value = reverseY(y); + y1.value = Math.round(y1.value * 10000) / 10000; + if (x1.value < 0) { x1.value = 0; } + if (x1.value > 1) { x1.value = 1; } + } else if (dragSM == 2) { + var x2 = document.getElementById('x2'); + var y2 = document.getElementById('y2'); + x2.value = reverseX(x); + x2.value = Math.round(x2.value * 10000) / 10000; + y2.value = reverseY(y); + y2.value = Math.round(y2.value * 10000) / 10000; + if (x2.value < 0) { x2.value = 0; } + if (x2.value > 1) { x2.value = 1; } + } + updateCanvas(); + } +} + +initCanvas(); +updateCanvas(); + </pre> +</div> + +<p>{{draft}}</p> + +<p>Esta es una herramienta de ejemplo que te permitirá editar y ver de manera gráfica una curva de Bézier. Esta no es una herramienta realmente útil, pero ¡lo será!</p> + +<p>{{EmbedLiveSample("Tool", 1000, 2000)}}</p> +</div> + +<p> </p> diff --git a/files/es/web/css/herramientas/index.html b/files/es/web/css/herramientas/index.html new file mode 100644 index 0000000000..59cd1febfa --- /dev/null +++ b/files/es/web/css/herramientas/index.html @@ -0,0 +1,28 @@ +--- +title: Herramientas +slug: Web/CSS/Herramientas +tags: + - CSS +translation_of: Web/CSS/Tools +--- +<div> </div> + +<p><span id="result_box" lang="es"><span>CSS</span> <span>ofrece una serie de</span> <span>características poderosas</span> <span>que puede ser</span> <span>difíciles de usar</span><span>,</span> <span>o tener un gran</span> <span>número de</span> <span>parámetros, por lo</span> <span>que es</span> <span>muy útil</span> <span>visualizarlos</span> <span>mientras se trabaja en</span> <span>ellos.</span> <span>Esta página</span> <span>ofrece</span> <span>enlaces a</span> <span>una serie de herramientas</span> <span>que</span> <span>le ayudarán a construir sus estilos usando estas caracteristicas</span><span>.</span></span></p> + +<p>{{LandingPageListSubpages}}</p> + +<h2 id="Otras_herramientas">Otras herramientas</h2> + +<ul> + <li> + <h4 id="Animación_CSS_-_Stylie">Animación CSS - <a href="http://jeremyckahn.github.io/stylie/">Stylie</a></h4> + </li> + <li><span id="result_box" lang="es"><span>Para</span> <span>comprobar la información de</span> <span>la pantalla del dispositivo</span></span> (helpful in {{Glossary("responsive web design")}}) - <a href="http://mydevice.io">mydevice.io</a></li> + <li>Menus CSS- <a href="http://cssmenumaker.com/">cssmenumaker.com</a></li> +</ul> + +<h2 id="Temas_relacionados">Temas relacionados</h2> + +<ul> + <li><a href="/es/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a></li> +</ul> diff --git a/files/es/web/css/hyphens/index.html b/files/es/web/css/hyphens/index.html new file mode 100644 index 0000000000..98669f5e30 --- /dev/null +++ b/files/es/web/css/hyphens/index.html @@ -0,0 +1,148 @@ +--- +title: hyphens +slug: Web/CSS/hyphens +translation_of: Web/CSS/hyphens +--- +<div>{{CSSRef}}</div> + +<div>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>hyphens</code></strong> especifica cómo deben dividirse las palabras cuando el texto se ajusta a través de múltiples líneas. Puede impedir la separación de sílabas por completo, usar guiones manualmente en puntos específicos del texto o dejar que el navegador inserte los guiones automáticamente donde corresponda.</div> + +<div></div> + +<div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div> + + + +<p>Las reglas de separación silábica son específicas del idioma. En HTML, el idioma es determinado por el atributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code> y los navegadores separarán únicamente si este atributo está presente y si existe un diccionario de separación silábica adecuado. En XML debe usarse el atributo <code><a href="/en-US/docs/Web/SVG/Attribute/xml:lang">xml:lang</a>.</code></p> + +<div class="note"> +<p><strong>Nota:</strong> Las reglas que definen cómo se realiza la separación de sílabas no están explícitamente definidas por la especificación, por lo que esta puede variar de un navegador a otro.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +hyphens: none; +hyphens: manual; +hyphens: auto; + +/* Global values */ +hyphens: inherit; +hyphens: initial; +hyphens: unset; +</pre> + +<p>La propiedad <code>hyphens</code> se especifica con una única palabra de la lista a continuación.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Las palabras no se separan en los finales de línea, incluso si las letras dentro de las palabras sobrepasan el final de la línea. Las líneas solo se distribuyen en el espacio en blanco.</dd> + <dt><code>manual</code></dt> + <dd>Las palabras se separan para el ajuste de línea sólo cuando los caracteres dentro de la palabra sugieren oportunidades de salto de línea. Ver {{anch("Sugiriendo oportunidades de separación de línea")}} más abajo para detalle.</dd> + <dt><code>auto</code></dt> + <dd>El navegador es libre de separar palabras en puntos de separación apropiados, siguiendo cualquiera de las reglas elegidas. Sin embargo, las oportunidades de separación de línea (ver {{anch("Sugiriendo oportunidades de separación de línea")}} más abajo) anularán la separación automática cuando exista.</dd> +</dl> + +<div class="note"> +<p><strong>Nota:</strong> El comportamiento del valor <code>auto</code> dependerá de que el idioma esté bien etiquetado de manera que las reglas de separación silábica puedan ser seleccionadas. Se debe especificar el idioma con el atributo <code>lang</code> de HTML de cara a garantizar que la separación silábica automática se aplique en ese idioma.</p> +</div> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Sugiriendo_oportunidades_de_separación_de_línea">Sugiriendo oportunidades de separación de línea</h2> + +<p>Hay dos caracteres Unicode que pueden ser usados manualmente para especificar un potencial punto de separación de línea dentro del texto:</p> + +<dl> + <dt>U+2010 (HYPHEN)</dt> + <dd>El carácter "fuerte" de separación de línea indica una oportunidad de separación visible. Incluso si la línea no está realmente separada en ese momento, se muestra el guión.</dd> + <dt>U+00AD (SHY)</dt> + <dd>Un carácter invisible y "suave" de separación de línea. Este carácter no se renderiza de manera visible; en lugar de ello, indica la posición en la que el navegador debería separar la palabra en caso de requerir separación de línea. En HTML puedes usar <code>&shy;</code> para insertar una separación "suave".</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Este ejemplo usa tres clases, una por cada posible configuración de la propiedad <code>hyphens</code>.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li><code>none</code>: sin separación; se desbordará si es preciso + <p lang="es" class="none">Una extrema&shy;damente larga palabra</p> + </li> + <li><code>manual</code>: separación sólo en &amp;hyphen; o &amp;shy; (si fuera necesario) + <p lang="es" class="manual">Una extrema&shy;damente larga palabra</p> + </li> + <li><code>auto</code>: separará donde decida el algoritmo (si fuera necesario) + <p lang="enes class="auto">Una extrema&shy;damente larga palabra</p> + </li> +</ul> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + width: 55px; + border: 1px solid black; + } +p.none { + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} +p.manual { + -webkit-hyphens: manual; + -ms-hyphens: manual; + hyphens: manual; +} +p.auto { + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<figure> +<p>{{EmbedLiveSample("Example", "100%", 490)}}</p> +</figure> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}</td> + <td>{{Spec2("CSS3 Text")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div> + + +<p>{{Compat("css.properties.hyphens")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{Cssxref("content")}}</li> +</ul> diff --git a/files/es/web/css/id_selectors/index.html b/files/es/web/css/id_selectors/index.html new file mode 100644 index 0000000000..0f7f177d2f --- /dev/null +++ b/files/es/web/css/id_selectors/index.html @@ -0,0 +1,85 @@ +--- +title: Selectores de ID +slug: Web/CSS/ID_selectors +tags: + - CSS + - Referencia + - Referencia CSS + - Selectores +translation_of: Web/CSS/ID_selectors +--- +<div>{{CSSRef}}</div> + +<p>En un documento HTML, los <strong>selectores de ID</strong> de CSS buscan un elemento basado en el contenido del atributo {{htmlattrxref("ID")}}. El atributo <code>ID</code> del elemento seleccionado debe coincidir exactamente con el valor dado en el selector.</p> + +<pre class="brush: css no-line-numbers">/* El elemento con id="demo" */ +#demo { + border: red 2px solid; +}</pre> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">#id_value { <em>style properties</em> }</pre> + +<p>Nótese que esto es equivalente al siguiente {{Cssxref("Attribute_selectors", "attribute selector")}}:</p> + +<pre class="syntaxbox">[id=id_value] { <em>style properties</em> }</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#identified { + background-color: skyblue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="identified">¡Este div tiene un ID especial!</div> +<div>Este solo es un div regular.</div> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Ejemplo", '100%', 50)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.selectors.id")}}</p> diff --git a/files/es/web/css/image-rendering/index.html b/files/es/web/css/image-rendering/index.html new file mode 100644 index 0000000000..98dae57cdc --- /dev/null +++ b/files/es/web/css/image-rendering/index.html @@ -0,0 +1,108 @@ +--- +title: image-rendering +slug: Web/CSS/image-rendering +translation_of: Web/CSS/image-rendering +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>image-rendering</code></strong> provee una sugerencia al navegador acerca del algoritmo que debe usar para escalar imágenes.</p> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +image-rendering: auto; +image-rendering: crisp-edges; +image-rendering: pixelated; + +/* Global values */ +image-rendering: inherit; +image-rendering: initial; +image-rendering: unset;</pre> + +<p>Esta propiedad aplica tanto al elemento mismo, como a cualquier imagen provista en otra propiedad del elemento. No tiene efecto alguno en imágenes no-escaladas. Por ejemplo, si el tamaño natural de una imágen es <em>100×100px pero el autor de la página especifica sus dimenciones como </em> <code>200×200px</code> (o <code>50×50px</code>), entonces la imágen se escalará (en cualquiér dirección) a sus nuevas dimensiones usando el algoritmo especificado. El escalado podría también aplicar por interacción del usuario (cambiando la escala).</p> + +<div class="note"> +<p>Un Canvas puede proveer una <a href="http://phrogz.net/tmp/canvas_image_zoom.html">solución de respaldo para crisp-edge/optimize-contrast</a> a través de la manipulación manual de datos de la imagen.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><strong>auto</strong></code></dt> + <dd><span class="notranslate">Valor predeterminado, la imagen debe escalarse con un algoritmo que maximice la apariencia de la imagen</span>. En particular, son aceptables los algoritmos de escala que "suavizan" colores, como la interpolación bilinear. So propósito son imágenes de fotografías. Desde la versión 1.9 (Firefox 3.0), Gecko usa<span class="notranslate"> remuestreo</span><em> bilinear</em> (alta calidad).</dd> +</dl> + +<dl> + <dt><code><strong>crisp-edges</strong></code></dt> + <dd><span class="notranslate">La imagen se debe escalar con un algoritmo que preserve el contraste y los bordes de la imagen, y que no suavice los colores ni introduzca borrones en la imagen en el proceso.</span> <span class="notranslate"> Los algoritmos adecuados incluyen algoritmos de escalamiento <em>nearest-neighbor</em> y otros algoritmos de escalabilidad tales como algoritmos <em>2×SaI</em> y <em>hqx-family</em>.</span> <span class="notranslate"> Este valor está destinado a imágenes pixel-art, como en juegos de navegador.</span></dd> + <dt><code><strong>pixelated</strong></code></dt> + <dd><span class="notranslate">Al escalar la imagen, se debe usar el algoritmo de vecino más cercano, de modo que la imagen parezca estar compuesta de píxeles grandes.</span> <span class="notranslate"> Cuando se reduce la escala, esto es lo mismo que 'auto'.</span></dd> +</dl> + +<div class="note"><strong>Nota:</strong> Los valores <code>optimizeQuality</code> y <code>optimizeSpeed</code> presentes en un borrador anterior (y proviniendo de su contraparte SVG) son definidos como sinónimos del valor <code>auto</code>.</div> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush:css;">/* aplica a imágenes GIF y PNG; eviar bordes borrosos */ +img[src$=".gif"], img[src$=".png"] { + image-rendering: crisp-edges; +} +</pre> + +<pre class="brush:css;">div { + background: url(chessboard.gif) no-repeat 50% 50%; + image-rendering: crisp-edges; +}</pre> + +<h3 id="Ejemplos_interactivos">Ejemplos interactivos</h3> + +<h4 id="image-rendering_auto">image-rendering: auto;</h4> + +<p style="image-rendering: auto;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p> + +<h4 id="image-rendering_pixelated_(-ms-interpolation-mode_nearest-neighbor)">image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)</h4> + +<p style="-ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p> + +<h4 id="image-rendering_crisp-edges_(-webkit-optimize-contrast)">image-rendering: crisp-edges; (-webkit-optimize-contrast)</h4> + +<p style="image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: crisp-edges;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota:</strong> Aunque similar al atributo SVG {{svgattr("image-rendering")}}, los valores son bastante diferentes ahora.</p> +</div> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p> </p> + + + +<p>{{Compat("css.properties.image-rendering")}}</p> + +<p> </p> diff --git a/files/es/web/css/image/index.html b/files/es/web/css/image/index.html new file mode 100644 index 0000000000..de998cc146 --- /dev/null +++ b/files/es/web/css/image/index.html @@ -0,0 +1,209 @@ +--- +title: <image> +slug: Web/CSS/image +tags: + - Gráfico + - Imagen CSS + - Tipo de Dato CSS +translation_of: Web/CSS/image +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p class="seoSummary">El tipo de dato <a href="/es/docs/Web/CSS">CSS</a> <code><image></code> representa una imagen 2D. Hay dos tipos de imágenes en CSS: imágenes planas estáticas, generalmente referenciadas usando una URL, e imágenes dinámicamente generadas, como degradados o representaciones de partes del árbol.</p> + +<p>CSS puede manejar diferentes tipos de imágenes:</p> + +<ul> + <li>imágenes con <em>dimensiones intrínsecas</em>, es decir, su tamaño natural, como una imagen jpeg que tiene dimensiones fijas.</li> + <li>imágenes con <em>varias dimensiones intrínsecas</em>, que coexisten en distintas versiones dentro de un archivo, com algunos formatos .ico. En ese caso, la dimensión intrínseca será la de la imagen con área más grande, y con la proporción más próxima al tamaño del contenedor.</li> + <li>imágenes sin dimensiones intrínsecas, pero con <em>una relación de aspecto intrínseca</em>, entre su anchura y altura, como algunas imágenes vectorizadas, en formato SVG, por ejemplo.</li> + <li id="no_intrinsic">imágenes <em><a>sin dimensiones intrínsecas</a>, ni relación de aspecto intrínseca</em>, como un degradado CSS, por ejemplo.</li> +</ul> + +<p>CSS determina el <em>tamaño concreto del objeto</em> usando estas <em>dimensiones intrínsecas</em>, el <em>tamaño específico </em>en propiedades CSS como {{cssxref("width")}}, {{cssxref("height")}} o {{cssxref("background-size")}}, y el <em>tamaño predeterminado del objeto</em> definido por el tipo de propiedad con el que se usa la imagen:</p> + +<table class="standard-table"> + <thead> + <tr> + <th>Tipo de objeto</th> + <th>Tamaño de objeto predeterminado</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref("background-image")}}</td> + <td>El tamaño del área de posicionamiento de fondo de la imagen</td> + </tr> + <tr> + <td>{{cssxref("list-style-image")}}</td> + <td>El tamaño de un caracter de <code>1em</code></td> + </tr> + <tr> + <td>{{cssxref("border-image")}}</td> + <td>El tamaño del área de imagen de borde de un elemento</td> + </tr> + <tr> + <td>{{cssxref("cursor")}}</td> + <td>Un tamaño definido por el navegador que coincida con el tamaño común de un cursor en el sistema en uso</td> + </tr> + <tr> + <td>Contenido reemplazado<br> + como cuando se combina la propiedad CSS {{cssxref("content")}}<br> + con los pseudo-elementos CSS {{cssxref("::after")}} y {{cssxref("::before")}}</td> + <td>Un rectángulo de <code>300px × 150px</code></td> + </tr> + </tbody> +</table> + +<p>El tamaño concreto del objeto es calculado usando los siguientes algoritmos:</p> + +<ul> + <li>Si el tamaño específico define tanto anchura como altura, estos valores son usados como el tamaño concreto del objeto.</li> + <li>Si el tamaño específico define solo anchura o solo altura, el valor faltante es determinado usando la proporción intrínseca (si la hay), las dimensiones intrínsecas (si el valor especificado coincide), o usando el tamaño predeterminado del objeto para ese valor faltante.</li> + <li>Si el valor especificado no define anchura ni altura, el tamaño concreto del objeto será calculado de modo que coincida con la relación de aspecto intrínseca de las imágenes, pero sin exceder el tamaño predeterminado en cualquiera de sus dimensiones. Si la imagen no tiene relación de aspecto intrínseca, se usará la del objeto al que se está aplicando; si el objeto no tiene ninguna, la anchura o altura faltante se tomará del tamaño predeterminado del objeto.</li> +</ul> + +<p>Las imágenes pueden ser usadas en numerosas propiedades CSS, como {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} o {{cssxref("cursor")}}.</p> + +<div class="note"><strong>Nota:</strong> No todos los navegadores soportan algun tipo de imagen o alguna propiedad. Vea la sección de <a href="#Compatibilidad_de_navegadores">compatibilidad de navegadores</a> para una lista detallada.</div> + +<h2 id="Sintáxis">Sintáxis</h2> + +<p>La representación de un tipo de dato CSS <code><image></code> puede ser una de las siguientes:</p> + +<ul> + <li>Una imagen denotada por un tipo de dato {{cssxref("<uri>")}} y la función <code>url()</code>;</li> + <li>Un degradado CSS ({{cssxref("<gradient>")}});</li> + <li>Una parte de la página, definida por la función {{cssxref("element", "element()")}}.</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Estos son valores válidos para imágenes:</p> + +<pre class="brush:css example-good">url(test.jpg) /* La función url(), mientras test.jpg sea una imagen */ +linear-gradient(to bottom, blue, red) /* Un degradado (<gradient>) */ +element(#colonne3) /* Una párte de la página, usando la función element(), + mientras colonne3 sea un identificador CSS existente en la página. */ +</pre> + +<p>Estos son valores incorrectos para imágenes:</p> + +<pre class="brush:css example-bad">cervin.jpg /* Un archivo de imagen debe ser definido usando la función url(). */ +url(report.pdf) /* El archivo indicado en la función url() debe ser una imagen. */ +element(#fakeid) /* Si 'fakeid' no es un identificador CSS existente en la página. */ +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Images', '#typedef-image', '<image>')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td> + <p>Antes de <a href="/es/docs/Web/CSS/CSS3">CSS3</a>, no había un tipo de dato <code><image></code> definido. Las imágenes solo podían ser definidas usando notaciones funcionales <code>url()</code>.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><code><uri></code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code><gradient></code></td> + <td>{{CompatVersionUnknown}}<br> + limited to {{cssxref("background-image")}} & {{cssxref("background")}}{{property_prefix("-moz")}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td>IE 10{{property_prefix("-ms")}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-o")}}</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>element()</code></td> + <td>4.0 (2.0) limited to {{cssxref("background-image")}} & {{cssxref("background")}}{{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><code><uri></code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code><gradient></code></td> + <td>{{CompatVersionUnknown}}<br> + limited to {{cssxref("background-image")}} & {{cssxref("background")}}{{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>element()</code></td> + <td>4.0 (2.0) limited to {{cssxref("background-image")}} & {{cssxref("background")}}{{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/es/docs/CSS/Using_CSS_gradients">Degradados CSS</a>, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient","linear-gradient()")}}, {{cssxref("radial-gradient","radial-gradient()")}}, {{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}}</li> + <li>{{cssxref("element", "element()")}}</li> +</ul> diff --git a/files/es/web/css/ime-mode/index.html b/files/es/web/css/ime-mode/index.html new file mode 100644 index 0000000000..58a8c5b0ed --- /dev/null +++ b/files/es/web/css/ime-mode/index.html @@ -0,0 +1,50 @@ +--- +title: ime-mode +slug: Web/CSS/ime-mode +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/ime-mode +--- +<p> </p> +<p>{{ CSSRef() }} {{ Fx_minversion_header(3) }}</p> +<h3 id="Resumen" name="Resumen">Resumen</h3> +<p>La propiedad <code>ime-mode</code> controla el estado del método de entrada del editor para campos de texto.</p> +<ul> <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("auto", "automático") }}</li> <li>Se aplica a: campos de texto.</li> <li>{{ Cssxref("inheritance", "Valor heredado") }}: no</li> <li>Porcentajes: N/A</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Cssxref("computed value", "Valor calculado") }}:</li> +</ul> +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> +<pre class="eval">ime-mode: <mode> +</pre> +<h3 id="Valores" name="Valores">Valores</h3> +<dl> <dt><code>auto</code> </dt> <dd>No hay cambios en el estado actual del editor. Opción por defecto.</dd> <dt><code>normal</code> </dt> <dd>El estado IME debería ser normal. Este valor puede ser usado en cualquier hoja de estilo del usuario para sobrescribir los parámetros de la página. <em>Este valor no es soportado por Internet Explorer</em>.</dd> <dt><code>active</code> </dt> <dd>El editor de entradas, está inicialmente activo y usado para la entrada de datos, hasta que el usuario lo desactive específicamente. <em>No soportado en Linux</em>.</dd> <dt><code>inactive</code> </dt> <dd>el editor de entradas está inicialmente inactivo, pero el usuario puede activarlo en cualquier momento. <em>No soportado por Linux</em>.</dd> <dt><code>disabled</code> </dt> <dd>El editor de entradas está desactivado y no puede ser activado por el usuario.</dd> +</dl> +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> +<pre><input type="text" name="name" value="initial value" style="ime-mode: disabled"> +</pre> +<p>Este ejemplo inhabilita/desactiva el editor de entradas para este campo. Esto podría ser necesario para los campos que entran datos en una base de datos que no soporta el juego de caracteres extendido, por ejemplo.</p> +<h3 id="Notas" name="Notas">Notas</h3> +<p>A diferencia de Internet Explorer, la implementación de Firefox de <code>ime-mode</code> permite aplicar esta propiedad a los campos de edición de clave de usuario (passwords). Sin embargo, no es la mejor experiencia para el usuario y los campos de clave de usuario deberían desactivar el IME. Los usuarios pueden corregir el comportamiento inapropiado de los sitios que no sigan esta recomendación poniendo la siguiente regla CSS en su archivo de reglas CSS:</p> +<pre>input[type=password] { + ime-mode: auto !important; +} +</pre> +<blockquote> +<div class="note"><strong>Nota:</strong> En general, no es apropiado por un sitio público la manipulación el estado del modo de IME. Esta propiedad debería usarse para aplicaciones web o similares.</div> +</blockquote> +<p>La versión de Gecko 1.9 para Macintosh no es capaz de recuperar el estado previo del IME cuando el campo para el cual se ha desactivado pierde el foco, por tanto, los usuarios de Mac podrían enfadarse cuando se utiliza el valor <code>disabled</code>.</p> +<blockquote> +<div class="note"><strong>Nota:</strong> Desactivar el IME para prevenir la entrada de caracteres extendidos en los formularios no impide que los usuarios puedan pegar caracteres extendidos en los campos del formulario.</div> +</blockquote> +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> +<ul> <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms533883.aspx">Especificaciones de Microsoft</a></li> +</ul> +<h3 id="Compatibilidad_entre_navegadores" name="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h3> +<p>La propiedad <code>ime-mode</code> es soportada en Firefox 3 y posteriores, así como en Internet Explorer.</p> + +<div class="noinclude"> +<p><span class="comment">Categorías</span></p> +<p><span class="comment">Interwiki Languages</span> <a href="/zh_tw/CSS/ime-mode">zh tw:CSS:ime-mode</a></p> +</div> +<p>{{ languages( { "en": "en/CSS/ime-mode", "fr": "fr/CSS/ime-mode", "ja": "ja/CSS/ime-mode", "zh-tw": "zh_tw/CSS/ime-mode" } ) }}</p> diff --git a/files/es/web/css/index.html b/files/es/web/css/index.html new file mode 100644 index 0000000000..25c39d556c --- /dev/null +++ b/files/es/web/css/index.html @@ -0,0 +1,113 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Diseño + - Estilo + - Hojas de Estilo en Cascada + - Hojas de estilo + - Referencia +translation_of: Web/CSS +--- +<p class="summary"><strong>Hojas de Estilo en Cascada</strong> (del inglés<em> </em><em><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</em>) o <strong>CSS</strong> es el lenguaje de <a href="https://wiki.developer.mozilla.org/es/docs/Web/API/StyleSheet">estilos</a> utilizado para describir la presentación de documentos <a href="/es/docs/HTML" title="HTML">HTML</a> o <a href="/es/docs/XML" title="XML">XML</a> (incluyendo varios languages basados en XML como <a href="https://wiki.developer.mozilla.org/es/docs/Web/SVG">SVG</a>, <a href="https://wiki.developer.mozilla.org/es/docs/Web/MathML">MathML</a> o {{Glossary("XHTML")}}). CSS describe como debe ser renderizado el elemento estructurado en la pantalla, en papel, en el habla o en otros medios.</p> + +<p><strong>CSS</strong> es uno de los lenguajes base de la <em>Open Web</em> y posee una <a href="http://www.w3.org/Style/CSS/#specs">especificación estandarizada</a> por parte del W3C. Anteriormente , el desarrollo de varias partes de las especificaciones de CSS era realizado de manera sincrónica, lo que permiía el versionado de las recomendaciones. Probablemente habrás escuchado acerca de CSS1, CSS2.1, CSS3. Sin embargo, CSS4 nunca se ha lanzado como una versión oficial.</p> + +<p>Desde CSS3, el alcance de las especificaciones se incrementó de forma significativa y el progreso de los diferentes modulos de CSS comenzó a mostrar varias diferencias, lo que hizo más efectivo <a href="/es/docs/https://www.w3.org/Style/CSS/current-work">desarrollar y publicar recomendaciones separadas por módulos</a>. En vez de versionar las especificaciones de CSS, la W3C actualmente realiza una captura de las <a href="https://www.w3.org/TR/css//es/docs/">ultimas espcificaciones estables de CSS</a>.</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>Introducción a CSS</span> + + <p>Si eres nuevo en el desarrollo web, asegúrate de leer nuestro artículo de <a href="/es/docs/Learn/Getting_started_with_the_web/CSS_basics">conceptos básicos de CSS</a> para saber qué es CSS y cómo usarlo.</p> + </li> + <li><span>Tutoriales CSS</span> + <p>Nuestra <a href="/es/docs/Learn/CSS">área de aprendizaje de CSS</a> contiene una gran cantidad de tutoriales que te llevan desde el nivel de principiante hasta el nivel de competencia, cubriendo todos los aspectos fundamentales.</p> + </li> + <li><span>Referencia CSS</span> + <p>Nuestra <a href="/es/docs/Web/CSS/Reference">exhaustiva referencia de CSS</a> para desarrolladores web experimentados describe cada propiedad y concepto de CSS.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Tutoriales">Tutoriales</h2> + +<p>Nuestra <a href="/es/docs/Learn/CSS">área de aprendizaje CSS</a> presenta múltiples módulos que enseñan CSS desde cero — no se requieren conocimientos previos.</p> + +<dl> + <dt><a href="/es/docs/Learn/CSS/Introduction_to_CSS">Primeros pasos en CSS</a></dt> + <dd>CSS es utilizado para diseñar y dar estilo a las páginas web, por ejemplo, alterando la fuente, color, tamaño y espaciado del contenido, dividirlo en múltiples columnas o agregar animaciones y otras características decorativas. Este módulo proporciona un suave comienzo hacia el dominio de CSS con los conceptos básicos acerca de su funcionamiento, la sintaxis y la manera en que puedes comenzar a utilizarlo para agregar estilos al HTML.</dd> +</dl> + +<dl> + <dt><a href="/es/docs/Learn/CSS/Building_blocks">Bloques de construcción CSS.</a></dt> + <dd><span class="tlid-translation translation" lang="es"><span title="">Este módulo continúa a partir de donde dejó el módulo de <a href="/es/docs/Learn/CSS/Introduction_to_CSS">primeros pasos de CSS</a>. Ahora que has adquirido familiaridad con el lenguaje y su sintaxis, y has ganado cierta experiencia básica con su uso, es hora de profundizar un poco más.</span> <span title="">Este módulo analiza la cascada y la herencia, todos los tipos de selectores que tenemos disponibles, unidades, tamaño, estilo de fondos y bordes, depuración (<em>debugging</em>) y mucho más. </span></span></dd> + <dd><span class="tlid-translation translation" lang="es"><span title="">El propósito de este módulo es proporcionarte un set de herramientas para escribir CSS competente y ayudarte a entender todas la teoría esencial antes de avanzar hacia cuestiones más específicas como <a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/Styling_text">estilo de textos</a> y <a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/CSS_layout">diseño CSS</a>. </span></span></dd> +</dl> + +<dl> + <dt><a href="/es/docs/Learn/CSS/Styling_text">Estilo de texto</a></dt> + <dd><span class="tlid-translation translation" lang="es"><span title="">Con los conceptos básicos del lenguaje CSS cubiertos, el siguiente tema de CSS en el que debes concentrarte es dar estilo al texto, una de las cosas más comunes que harás con CSS.</span> <span title="">Aquí veremos los fundamentos del estilo del texto, incluida la configuración de la fuente, negrita, cursiva, espaciado entre líneas y letras, sombras y otras características del texto.</span> <span title="">Terminaremos el módulo analizando la aplicación de fuentes personalizadas a tu página y en el estilo de listas y enlaces.</span></span></dd> + <dt><a href="/es/docs/Learn/CSS/CSS_layout">Diseño de CSS</a></dt> + <dd>En este punto ya hemos analizado los fundamentos de CSS, cómo dar estilo al texto y cómo diseñar y manipular las cajas en las que se encuentra el contenido. Ahora es el momento de ver cómo colocar sus cajas en el lugar correcto en relación con la pantalla del dispositivo y entre sí. Hemos cubierto los requisitos previos necesarios para que ahora puedas profundizar en el diseño de CSS, mirando diferentes configuraciones de pantalla, métodos de diseño tradicionales que implican flotación y posicionamiento, y nuevas herramientas de diseño como flexbox, grid y posicionamiento, asi como algunas técnicas de herencia que quizas desees conocer.</dd> + <dt><a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/S%C3%A1bercomo">Uso de CSS para resolver problemas comunes</a></dt> + <dd><span class="tlid-translation translation" lang="es"><span title="">proporciona enlaces a secciones de contenido que explican cómo usar CSS para resolver problemas muy comunes al crear una página web.</span></span></dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="Referencia">Referencia</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Reference">Referencia CSS:</a> Esta referencia exhaustiva para desarrolladores web experimentados describe cada propiedad y concepto de CSS.</li> + <li>Conceptos clave de CSS: + <ul> + <li>La <a href="/es/docs/CSS/Syntax">sintaxis y las formas del lenguaje</a></li> + <li><a href="/es/docs/CSS/Specificity">Especificidad</a>, <a href="/es/docs/CSS/inheritance">herencia</a> y <a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/Cascade">la cascada</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units">Unidades y valores CSS</a></li> + <li><a href="/es/docs/CSS/box_model">Modelo de caja</a> y <a href="/es/docs/CSS/margin_collapsing">colapso de margen</a></li> + <li>El <a href="/es/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a></li> + <li>Contextos de <a href="/es/docs/CSS/Understanding_z-index/The_stacking_context">apilamiento</a> y <a href="/es/docs/CSS/block_formatting_context">formato de bloques</a></li> + <li>Valores <a href="/es/docs/CSS/initial_value">iniciales</a>, <a href="/es/docs/CSS/computed_value">calculados</a>, <a href="/es/docs/CSS/used_value">usados </a>y <a href="/es/docs/CSS/actual_value">actuales</a></li> + <li><a href="/es/docs/Web/CSS/Shorthand_properties">Propiedades abreviadas de CSS</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout">Diseño de caja flexible de CSS</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Grid_Layout">Diseño de cuadrícula CSS (<em>CSS Grid</em>)</a></li> + <li><em><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/Media_Queries">Media queries</a></em></li> + <li><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/animation">Animaciones</a></li> + </ul> + </li> +</ul> + +<h2 class="Tools" id="Cookbook">Cookbook</h2> + +<p><span class="tlid-translation translation" lang="es"><span title="">El <a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/Layout_cookbook">libro de cocina de diseño CSS </a><a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/Layout_cookbook"> </a>tiene como objetivo reunir recetas para patrones de diseño comunes, sobre cosas que puedes necesitar implementar en tus sitios.</span> <span title="">Además de proporcionar código que puedes usar como punto de partida en tus proyectos, estas recetas destacan las diferentes formas en que se pueden usar las especificaciones de diseño y las elecciones que puedes hacer como desarrollador.</span></span></p> + +<h2 class="Tools" id="Herramientas_para_el_desarrollo_de_CSS">Herramientas para el desarrollo de CSS</h2> + +<ul> + <li>Puede usar el <a href="https://jigsaw.w3.org/css-validator/">Servicio de Validación CSS de W3C</a> para verificar si su CSS es válido. Esta es una herramienta de depuración de valor incalculable.</li> + <li>Las <a href="/es/docs/Tools">herramientas para desarrolladores de Firefox</a> te permiten ver y editar el CSS de una página en vivo a través de las herramientas <a href="/es/docs/Tools/Page_Inspector">Inspector </a>y <a href="/es/docs/Tools/Style_Editor">Editor de estilos</a>.</li> + <li>La <a href="https://addons.mozilla.org/es/firefox/addon/60">extensión Web Developer</a> para Firefox le permite rastrear y editar CSS en vivo en sitios vigilados.</li> + <li>La comunidad web ha creado varias <a href="/es/docs/Web/CSS/Tools">herramientas CSS </a>para que las uses.</li> +</ul> + +<h2 id="Meta_errores">Meta errores</h2> + +<ul> + <li>Firefox: {{bug(1323667)}}</li> +</ul> +</div> +</div> +</section> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/Demos_of_open_web_technologies#CSS">Demos de CSS</a>: obtén un impulso creativo explorando ejemplos de las últimas tecnologías de CSS en acción.</li> + <li>Lenguajes web a los que se aplica CSS frecuentemente: <a href="/es/docs/HTML">HTML</a>, <a href="/es/docs/SVG">SVG</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/MathML">MathML,</a> <a href="/es/docs/XHTML">XHTML</a> y <a href="/es/docs/XML">XML</a>.</li> + <li>Tecnologías de Mozilla que hacen un amplio uso de CSS: <a href="/es/docs/Extensions">extensiones</a> y <a href="/es/Add-ons/Themes">temas </a>de <a href="/es/Firefox">Firefox </a>y <a href="/es/docs/Mozilla/Thunderbird">Thunderbird</a>.</li> + <li><a href="https://lists.mozilla.org/listinfo/dev-tech-layout">Lista de correo de Mozilla</a></li> + <li><a href="https://stackoverflow.com/questions/tagged/css">Preguntas de Stackoverflow sobre CSS</a></li> +</ul> diff --git a/files/es/web/css/inherit/index.html b/files/es/web/css/inherit/index.html new file mode 100644 index 0000000000..513c3165c9 --- /dev/null +++ b/files/es/web/css/inherit/index.html @@ -0,0 +1,64 @@ +--- +title: inherit +slug: Web/CSS/inherit +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/inherit +--- +<p><< <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a></p> + + + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p><strong>inherit</strong> es un valor permitido en todas las propiedades CSS. Hace que el elemento al cual se aplica tome el <a href="es/CSS/Valor_calculado">valor calculado</a> de la propiedad de su elemento padre.</p> + +<h4 id="Para_propiedades_heredadas" name="Para_propiedades_heredadas">Para propiedades heredadas</h4> + +<p>Para las propiedades <a href="es/CSS/inheritance#Propiedades_heredadas">heredadas</a>, este valor refuerza el comportamiento del valor por defecto y es necesario sólo para anular otras reglas. Por ejemplo:</p> + +<pre> /* hacer las cabeceras de segundo nivel, verdes */ + h2 { color: green; } + + /* ...pero deja aquellas cabeceras dentro de de la barra lateral con el valor por defecto (el valor que tenga el elemento padre */ + #sidebar h2 { color: inherit; } +</pre> + +<p>Ten en cuenta que en este ejemplo, el elemento <code>h2</code> dentro de sidebar, puede tener un color distinto. Por ejemplo, si alguno de los elementos es un hijo de un elemento div con la siguiente regla:</p> + +<pre class="eval"> div#current { color: blue; } +</pre> + +<p>el elemento será azul.</p> + +<h4 id="Para_propiedades_no_heredadas" name="Para_propiedades_no_heredadas">Para propiedades no heredadas</h4> + +<p>Para las propiedades <a href="es/CSS/inheritance#Propiedades_no_heredadas">no heredadas</a>, este valor especifica un comportamiento que tiene relativamente poco sentido al no reforzar el valor por defecto.</p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>Siempre se hereda desde el elemento padre dentro del árbol del documento, aún cuando el elemento padre no es el bloque contenedor.</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">CSS 2.1</a></li> +</ul> + +<h3 id="Compatibilidad_de_navegadores" name="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p><a href="https://developer.mozilla.org/es/docs/Web/CSS/initial">initial</a></p> + + + +<div class="noinclude"> +<p><span class="comment">Categorías</span></p> + +<p><span class="comment">Interwiki Languages</span></p> +</div> + +<p>{{ languages( { "fr": "fr/CSS/inherit", "en": "en/CSS/inherit" } ) }}</p> diff --git a/files/es/web/css/inheritance/index.html b/files/es/web/css/inheritance/index.html new file mode 100644 index 0000000000..780d5d49ea --- /dev/null +++ b/files/es/web/css/inheritance/index.html @@ -0,0 +1,66 @@ +--- +title: Herencia +slug: Web/CSS/inheritance +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/inheritance +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>El resumen de cada <a href="es/Gu%c3%ada_de_referencia_de_CSS">definición de propiedad CSS</a> indica si esa propiedad es heredada por defecto ("Inherit: Yes") o no ("Inherit: no"). Esto controla lo que sucede al no especificar un valor concreto para una propiedad de un elemento.</p> + +<h3 id="Propiedades_heredadas" name="Propiedades_heredadas">Propiedades heredadas</h3> + +<p>Cuando no se especifica un valor para un elemento de una propiedad <strong>inherited property</strong>, el elemento toma el {{ Cssxref("computed value", "valor calculado") }} de la propiedad de su elemento padre. Sólo los elementos raíz de un documento obtienen el valor {{ Cssxref("initial", "inicial") }} dado en el resumen de la propiedad.</p> + +<p>Un ejemplo característico de una propiedad heredada es la propiedad {{ Cssxref("color") }}. Definida con las siguientes reglas de estilo:</p> + +<pre class="eval"> p { color: green } +</pre> + +<p>y el código HTML siguiente:</p> + +<pre class="eval"> <p>Este párrafo tiene <em>texto enfatizado</em> en su interior.</p> +</pre> + +<p>las palabras "texto enfatizado" aparecerá en verde, ya que el elemento <code>em</code> ha heredado el valor de la propiedad {{ Cssxref("color") }} a partir del elemento <code>p</code>.<em>No</em> recoge el valor inicial de la propiedad (que es el color que es usado por el elemento raíz cuando la página especifica que no hay color).</p> + +<h3 id="Propiedades_no_heredadas" name="Propiedades_no_heredadas">Propiedades no heredadas</h3> + +<p>Si no se especifica un valor para una propiedad no heredada (<em>non-inherited property</em>) (a veces llamada <strong>reset property</strong> en el código Mozilla), el elemento toma el valor {{ Cssxref("initial", "inicial") }} de dicha propiedad (como se especifica en el resumen de ésa propiedad).</p> + +<p>Un ejemplo característico de una propiedad no heredada es la del {{ Cssxref("border", "borde") }}. Definida con las siguientes reglas de estilo:</p> + +<pre class="eval"> p { border: medium solid } +</pre> + +<p>y la etiqueta HTML:</p> + +<pre class="eval"> <p>Este párrafo tiene <em>texto enfatizado</em> en su interior.</p> +</pre> + +<p>las palabras "texto enfatizado" no tendrán borde (ya que el valor inicial del {{ Cssxref("border-style", "estilo de borde") }} es <code>none</code>).</p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>Las palabras de código {{ Cssxref("inherit") }} permiten al autor definir, explícitamente, la posibilidad de herencia. Funciona para las propiedades heredadas y las no heredadas.</p> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("inherit") }}, {{ Cssxref("Valor inicial") }}</p> + +<p> </p> + +<div class="noinclude"> +<p><span class="comment">Categorías</span></p> + +<p><br> + <span class="comment">Interwiki Languages</span></p> +</div> + +<p>{{ languages( { "en": "en/CSS/inheritance", "fr": "fr/CSS/H\u00e9ritage", "ja": "ja/CSS/inheritance", "pl": "pl/CSS/Dziedziczenie" } ) }}</p> diff --git a/files/es/web/css/initial/index.html b/files/es/web/css/initial/index.html new file mode 100644 index 0000000000..aff090e21f --- /dev/null +++ b/files/es/web/css/initial/index.html @@ -0,0 +1,46 @@ +--- +title: initial +slug: Web/CSS/initial +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/initial +--- +<p> <a href="es/Gu%c3%ada_de_referencia_de_CSS">Guía de referencia de CSS</a> +</p><p><br> +</p> +<h3 id="Resumen" name="Resumen"> Resumen </h3> +<p><b>initial</b> es un valor permitido en todas las propiedades CSS. Fuerza la utilización del <a href="es/CSS/Valor_inicial">valor inicial</a> de la propiedad para el elemento al cual se aplica. +</p> +<h4 id="Para_propiedades_no_heredadas" name="Para_propiedades_no_heredadas"> Para propiedades no heredadas </h4> +<p>Para las propiedades <a href="es/CSS/inheritance#propiedades_heredadas_y_no_heredadas">no heredadas</a>, este valor refuerza el comportamiento por defecto y es necesario sólo para sobrescribir otra regla. Por ejemplo: +</p> +<pre class="eval"> /* definimos un borde verde de un encabezamiento de segundo nivel */ + h2 { border: medium solid green } + + /* pero las cabeceras de la barra lateral utilizan el valor inicial de la propiedad <a href="es/CSS/color">color</a> */ + #sidebar h2 { border-color: initial; } + + /* ...en CSS1 se obtiene usando 'border: medium solid' */ +</pre> +<h4 id="Para_propiedades_heredadas" name="Para_propiedades_heredadas"> Para propiedades heredadas </h4> +<p>Para las propiedades <a href="es/CSS/inheritance#propiedades_heredadas_y_no_heredadas">heredadas</a>, se usa menos ya que no refuerza el comportamiento por defecto. +</p> +<h3 id="Especificaciones" name="Especificaciones"> Especificaciones </h3> +<ul><li> <a class="external" href="http://www.w3.org/TR/css3-values/#keywords">css3-values</a> +</li><li> <a class="external" href="http://www.w3.org/TR/css3-cascade/#initial0">css3-cascade</a> +</li></ul> +<h3 id="Compatibilidad" name="Compatibilidad"> Compatibilidad </h3> +<p>Sólo algunas especificaciones son soportadas en Firefox (las cuales se incrementan en cada versión superior) <span class="comment">Únicamente soportado en Firefox algunas propiedades (se incrementa el número en cada versión).</span> +</p> +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3> +<p><a href="es/CSS/inherit">inherit</a> +</p><p><br> +</p> +<div class="noinclude"> +<p><span class="comment">Categorías</span> +</p><p><span class="comment">Interwiki Languages Links</span> +</p> +</div> +{{ languages( { "fr": "fr/CSS/initial", "en": "en/CSS/initial" } ) }} diff --git a/files/es/web/css/inline-size/index.html b/files/es/web/css/inline-size/index.html new file mode 100644 index 0000000000..d39bac491c --- /dev/null +++ b/files/es/web/css/inline-size/index.html @@ -0,0 +1,97 @@ +--- +title: inline-size +slug: Web/CSS/inline-size +translation_of: Web/CSS/inline-size +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>inline-size</code></strong> define el tamaño horizontal o vertical de un bloque de elementos, dependiendo del modo de escritura. Esto corresponde ya sea a la propiedad {{cssxref("width")}} o {{cssxref("height")}}, dependiendo del valor de {{cssxref("writing-mode")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/inline-size.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <length> values */ +inline-size: 300px; +inline-size: 25em; + +/* <percentage> values */ +inline-size: 75%; + +/* Keyword values */ +inline-size: 25em border-box; +inline-size: 75% content-box; +inline-size: max-content; +inline-size: min-content; +inline-size: available; +inline-size: fit-content; +inline-size: auto; + +/* Global values */ +inline-size: inherit; +inline-size: initial; +inline-size: unset; +</pre> + +<p>Si el modo de escritura es verticalmente orientado, el valor de <code>inline-size</code> se relaciona con la altura del elemento; de lo contrario, se relaciona con el ancho del elemento. Una propiedad relacionada es {{cssxref("block-size")}}, que define la otra dimensión del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>inline-size</code> toma los mismos valores de las propiedades {{cssxref("width")}} y {{cssxref("height")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><p class="exampleText">Example text</p> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">.exampleText { + writing-mode: vertical-rl; + background-color: yellow; + inline-size: 110px; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo")}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.inline-size")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("width")}} y {{cssxref("height")}}</li> + <li>{{cssxref("writing-mode")}}</li> +</ul> diff --git a/files/es/web/css/inset-block-end/index.html b/files/es/web/css/inset-block-end/index.html new file mode 100644 index 0000000000..b117a0595c --- /dev/null +++ b/files/es/web/css/inset-block-end/index.html @@ -0,0 +1,99 @@ +--- +title: inset-block-end +slug: Web/CSS/inset-block-end +translation_of: Web/CSS/inset-block-end +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a><span class="seoSummary"> <strong><code>inset-block-end</code></strong> define el desplazamiento de final de bloque lógico de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref ("top")}}, {{cssxref ("right")}}, {{cssxref ("bottom")}}, o {{cssxref ("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.</span></p> + +<div class="note"> +<p><strong>Note</strong>: Antes de Firefox 63 esta propiedad fue implementada como offset-block-end. <a href="https://www.fxsitecompat.com/en-CA/docs/2018/offset-logical-properties-have-been-renamed-to-inset/">Firefox 63 actualizó el nombre de esta propiedad.</a> para que coincida con un cambio en la especificación.</p> +</div> + +<pre class="brush:css no-line-numbers">/* <length> values */ +inset-block-end: 3px; +inset-block-end: 2.4em; + +/* <percentage>s of the width or height of the containing block */ +inset-block-end: 10%; + +/* Keyword value */ +inset-block-end: auto; + +/* Global values */ +inset-block-end: inherit; +inset-block-end: initial; +inset-block-end: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>inset-block-end</code> toma los mismos valores de la propiedad {{cssxref("left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + position: relative; + inset-block-end: 20px; + background-color: #c8c800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.inset-block-end")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades que definen otras inserciones:: {{cssxref("inset-block-start")}}, {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}}</li> + <li>Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/inset-block-start/index.html b/files/es/web/css/inset-block-start/index.html new file mode 100644 index 0000000000..4cd4a2c732 --- /dev/null +++ b/files/es/web/css/inset-block-start/index.html @@ -0,0 +1,99 @@ +--- +title: inset-block-start +slug: Web/CSS/inset-block-start +translation_of: Web/CSS/inset-block-start +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a><span class="seoSummary"> <strong><code>inset-block-start</code></strong> define el desplazamiento de inicio de bloque lógico de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref ("top")}}, {{cssxref ("right")}}, {{cssxref ("bottom")}}, o {{cssxref ("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.</span></p> + +<div class="note"> +<p><strong>Nota</strong>: Antes de Firefox 63 esta propiedad fue implementada como offset-block-start. <a href="https://www.fxsitecompat.com/en-CA/docs/2018/offset-logical-properties-have-been-renamed-to-inset/" rel="noopener">Firefox 63 actualizó el nombre de esta propiedad.</a> para que coincida con un cambio en la especificación.</p> +</div> + +<pre class="brush:css no-line-numbers">/* <length> values */ +inset-block-start: 3px; +inset-block-start: 2.4em; + +/* <percentage>s of the width or height of the containing block */ +inset-block-start: 10%; + +/* Keyword value */ +inset-block-start: auto; + +/* Global values */ +inset-block-start: inherit; +inset-block-start: initial; +inset-block-start: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>inset-block-start</code> toma los mismos valores de la propiedad {{cssxref("left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + position: relative; + inset-block-start: 20px; + background-color: #c8c800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.inset-block-start")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades que definen otras inserciones:: {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}}</li> + <li>Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/inset-block/index.html b/files/es/web/css/inset-block/index.html new file mode 100644 index 0000000000..633a84475d --- /dev/null +++ b/files/es/web/css/inset-block/index.html @@ -0,0 +1,97 @@ +--- +title: inset-block +slug: Web/CSS/inset-block +translation_of: Web/CSS/inset-block +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>inset-block</code></strong> define los bloques lógicos de inicio y fin de las compensaciones de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto. Corresponde a las propiedades {{cssxref ("top")}} y {{cssxref ("bottom")}}, o {{cssxref ("right")}} y {{cssxref ("left")}} dependiendo de las propiedades en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +inset-block: 3px 10px; +inset-block: 2.4em 3em; +inset-block: 10px; /* value applied to start and end */ + +/* <percentage>s of the width or height of the containing block */ +inset-block: 10% 5%; + +/* Keyword value */ +inset-block: auto; + +/* Global values */ +inset-block: inherit; +inset-block: initial; +inset-block: unset; +</pre> + +<p>La abreviación para la otra dimensión {{cssxref("inset-inline")}}, que es una abreviación para {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>inset-block</code> toma los mismos valores de la propiedad {{cssxref("left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + position: relative; + inset-block: 20px 50px; + background-color: #c8c800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block", "inset-block")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.inset-block")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/inset-inline-end/index.html b/files/es/web/css/inset-inline-end/index.html new file mode 100644 index 0000000000..633306a67c --- /dev/null +++ b/files/es/web/css/inset-inline-end/index.html @@ -0,0 +1,99 @@ +--- +title: inset-inline-end +slug: Web/CSS/inset-inline-end +translation_of: Web/CSS/inset-inline-end +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a><span class="seoSummary"> <strong><code>inset-inline-end</code></strong> define la inserción final lógica en línea de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref ("top")}}, {{cssxref ("right")}}, {{cssxref ("bottom")}}, o {{cssxref ("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.</span></p> + +<div class="note"> +<p><strong>Nota</strong>: Antes de Firefox 63 esta propiedad fue implementada como offset-inline-end. <a href="https://www.fxsitecompat.com/en-CA/docs/2018/offset-logical-properties-have-been-renamed-to-inset/" rel="noopener">Firefox 63 actualizó el nombre de esta propiedad.</a> para que coincida con un cambio en la especificación.</p> +</div> + +<pre class="brush:css no-line-numbers">/* <length> values */ +inset-inline-end: 3px; +inset-inline-end: 2.4em; + +/* <percentage>s of the width or height of the containing block */ +inset-inline-end: 10%; + +/* Keyword value */ +inset-inline-end: auto; + +/* Global values */ +inset-inline-end: inherit; +inset-inline-end: initial; +inset-inline-end: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>inset-inline-end</code> toma los mismos valores de la propiedad {{cssxref("left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + position: relative; + inset-inline-end: 20px; + background-color: #c8c800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-end")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.inset-inline-end")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades que definen otras inserciones:: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, y {{cssxref("inset-inline-start")}}</li> + <li>Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/inset-inline-start/index.html b/files/es/web/css/inset-inline-start/index.html new file mode 100644 index 0000000000..ef9b26bc2c --- /dev/null +++ b/files/es/web/css/inset-inline-start/index.html @@ -0,0 +1,99 @@ +--- +title: inset-inline-start +slug: Web/CSS/inset-inline-start +translation_of: Web/CSS/inset-inline-start +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a><span class="seoSummary"> <strong><code>inset-inline-start</code></strong> define la inserción de inicio en línea lógica de un elemento, que se asigna a un desplazamiento físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, o {{cssxref("left")}} dependiendo de la propiedad en los valores definidos para </span>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<div class="note"> +<p><strong>Nota</strong>: Antes de Firefox 63 esta propiedad fue implementada como offset-inline-start. <a href="https://www.fxsitecompat.com/en-CA/docs/2018/offset-logical-properties-have-been-renamed-to-inset/" rel="noopener">Firefox 63 actualizó el nombre de esta propiedad.</a> para que coincida con un cambio en la especificación.</p> +</div> + +<pre class="brush:css no-line-numbers">/* <length> values */ +inset-inline-start: 3px; +inset-inline-start: 2.4em; + +/* <percentage>s of the width or height of the containing block */ +inset-inline-start: 10%; + +/* Keyword value */ +inset-inline-start: auto; + +/* Global values */ +inset-inline-start: inherit; +inset-inline-start: initial; +inset-inline-start: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>inset-inline-start</code> toma los mismos valores de la propiedad {{cssxref("left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + position: relative; + inset-inline-start: 20px; + background-color: #c8c800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.inset-inline-start")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades que definen otras inserciones: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, y {{cssxref("inset-inline-end")}}</li> + <li>Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/inset-inline/index.html b/files/es/web/css/inset-inline/index.html new file mode 100644 index 0000000000..07a9d797d8 --- /dev/null +++ b/files/es/web/css/inset-inline/index.html @@ -0,0 +1,97 @@ +--- +title: inset-inline +slug: Web/CSS/inset-inline +translation_of: Web/CSS/inset-inline +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>inset-inline</code></strong> define los bloques lógicos de inicio y fin de las compensaciones de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto. Corresponde a las propiedades {{cssxref ("top")}} y {{cssxref ("bottom")}}, o {{cssxref ("right")}} y {{cssxref ("left")}} dependiendo de las propiedades en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +inset-inline: 3px 10px; +inset-inline: 2.4em 3em; +inset-inline: 10px; /* value applied to start and end */ + +/* <percentage>s of the width or height of the containing block */ +inset-inline: 10% 5%; + +/* Keyword value */ +inset-inline: auto; + +/* Global values */ +inset-inline: inherit; +inset-inline: initial; +inset-inline: unset; +</pre> + +<p>La abreviación para la otra dimensión es {{cssxref("inset-block")}}, que es la abreviación para {{cssxref("inset-block-start")}}, y {{cssxref("inset-block-end")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>inset-inline</code> toma los mismos valores de la propiedad {{cssxref("left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + position: relative; + inset-inline: 20px 50px; + background-color: #c8c800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline", "inset-inline")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.inset-inline")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/inset/index.html b/files/es/web/css/inset/index.html new file mode 100644 index 0000000000..cd3260e72c --- /dev/null +++ b/files/es/web/css/inset/index.html @@ -0,0 +1,96 @@ +--- +title: inset +slug: Web/CSS/inset +translation_of: Web/CSS/inset +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>inset</code></strong> define el bloque lógico y las compensaciones de inicio y finalización en línea de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref ("top")}} y {{cssxref ("bottom")}}, o {{cssxref ("right")}} y {{cssxref ("left")}} dependiendo de las propiedades en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +inset: 3px 10px 3px 10px; +inset: 2.4em 3em 3em 3em; +inset: 10px; /* value applied to all edges */ + +/* <percentage>s of the width or height of the containing block */ +inset: 10% 5% 5% 5%; + +/* Keyword value */ +inset: auto; + +/* Global values */ +inset: inherit; +inset: initial; +inset: unset; + +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>inset</code> toma los mismos valores de la propiedad {{cssxref("left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + position: relative; + inset: 20px 50px 30px 10px; + background-color: #c8c800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-inset", "inset")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.inset")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/integer/index.html b/files/es/web/css/integer/index.html new file mode 100644 index 0000000000..2075d52e37 --- /dev/null +++ b/files/es/web/css/integer/index.html @@ -0,0 +1,16 @@ +--- +title: <integer> +slug: Web/CSS/integer +translation_of: Web/CSS/integer +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Sumario" name="Sumario">Sumario</h2> + +<p>Un valor entero usado para algunas propiedades CSS que no tiene unidades.</p> + +<h3 id="Usado_en" name="Usado_en">Usado en</h3> + +<ul> + <li>{{ Cssxref("-moz-column-count") }}</li> +</ul> diff --git a/files/es/web/css/introducción/boxes/index.html b/files/es/web/css/introducción/boxes/index.html new file mode 100644 index 0000000000..1feede593a --- /dev/null +++ b/files/es/web/css/introducción/boxes/index.html @@ -0,0 +1,334 @@ +--- +title: Boxes +slug: Web/CSS/Introducción/Boxes +translation_of: Learn/CSS/Building_blocks +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Esta es la sección 11 del Tutorial de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> ; <span id="result_box" lang="es"><span class="hps alt-edited">se describen</span> <span class="hps">cómo se puede</span> <span class="hps">usar CSS para</span> <span class="hps">controlar el espacio</span> <span class="hps">que un elemento</span> <span class="hps">ocupa</span> <span class="hps">cuando se muestra</span><span>.</span> <span class="hps">En</span> <span class="hps">su</span> <span class="hps">documento de ejemplo</span><span>, se cambia el</span> <span class="hps">espacio</span> <span class="hps alt-edited">y se agregan</span> <span class="hps">reglas</span> <span class="hps">decorativos.</span></span></p> + +<h2 class="clearLeft" id="Información_Cajas"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Cajas</span></span></h2> + +<p><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">el navegador muestra</span> <span class="hps">un elemento</span><span>, el elemento</span> <span class="hps alt-edited">ocupa un espacio</span><span>.</span> <span class="hps">Hay</span> <span class="hps">cuatro partes en</span> <span class="hps">el espacio</span> <span class="hps">que ocupa</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">En el centro,</span> <span class="hps">existe</span> <span class="hps">el espacio que el</span> <span class="hps">elemento</span> <span class="hps">necesita para mostrar</span> <span class="hps">su contenido.</span> <span class="hps">Alrededor de</span> <span class="hps">eso, no hay</span> <span class="hps">relleno.</span> <span class="hps alt-edited">En torno</span> <span class="hps alt-edited">de est, hay</span> <span class="hps alt-edited">un borde</span><span>.</span> <span class="hps alt-edited">En torno</span> <span class="hps alt-edited">esto, hay</span> <span class="hps">un margen</span> <span class="hps">que separa</span> <span class="hps alt-edited">este elemento</span> <span class="hps">de otros elementos</span><span>.</span></span></p> + +<table> + <tbody> + <tr> + <td style="width: 22em;"> + <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;">margin</p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> + + <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;">padding</p> + + <div style="background-color: #eee;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> + </div> + </div> + </div> + + <p><span class="short_text" id="result_box" lang="es"><span class="hps">El</span> <span class="hps">gris pálido</span> <span class="hps">muestra</span> <span class="hps">partes del</span> <span class="hps">diseño.</span></span></p> + </td> + <td> + <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;"> </p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> + + <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;"> </p> + + <div style="background-color: #fff;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> + </div> + </div> + </div> + + <p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto es</span> <span class="hps">lo que se ve</span> <span class="hps">en su navegador</span><span>.</span></span></p> + </td> + </tr> + </tbody> +</table> + +<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps alt-edited">relleno, el borde</span> <span class="hps">y</span> <span class="hps alt-edited">el margen</span> <span class="hps">pueden tener diferentes tamaños</span> <span class="hps">en la parte superior</span><span class="alt-edited">, derecha, inferior</span> <span class="hps">e izquierda del</span> <span class="hps">elemento</span><span>.</span> <span class="hps alt-edited">Alguno o</span> <span class="hps">todos estos tamaños</span> <span class="hps">pueden</span> <span class="hps">ser cero</span><span>.</span></span></p> + +<h3 id="Coloreando">Coloreando</h3> + +<p><span id="result_box" lang="es"><span class="hps">El relleno es</span> <span class="hps">siempre</span> <span class="hps">el mismo color que</span> <span class="hps">el elemento del fondo</span><span>.</span> <span class="hps">Así que</span> <span class="hps">cuando se establece el</span> <span class="hps">color de fondo</span><span>, se ve el</span> <span class="hps">color aplicado</span> <span class="hps">al elemento</span> <span class="hps">en sí y su</span> <span class="hps">relleno.</span> <span class="hps">El margen es</span> <span class="hps">siempre</span> <span class="hps">transparente.</span></span></p> + +<table> + <tbody> + <tr> + <td style="width: 22em;"> + <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;">margin</p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> + + <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;">padding</p> + + <div style="background-color: #ded;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> + </div> + </div> + </div> + + <p><span class="short_text" id="result_box" lang="es"><span class="hps">El elemento tiene</span> <span class="hps">un fondo verde</span> <span class="hps">.</span></span></p> + </td> + <td> + <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;"> </p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> + + <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;"> </p> + + <div style="background-color: #efe;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> + </div> + </div> + </div> + + <p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto es</span> <span class="hps">lo que se ve</span> <span class="hps">en su navegador</span><span>.</span></span></p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Borders">Borders</h3> + +<p><span id="result_box" lang="es"><span class="hps">Puede utilizar</span> <span class="hps alt-edited">los bordes</span> <span class="hps">para decorar</span> <span class="hps">elementos con</span> <span class="hps">líneas o cuadros</span><span>.</span><br> + <br> + <span class="hps">Para especificar</span> <span class="hps">la misma</span> <span class="hps">frontera</span> <span class="hps">todo</span> <span class="hps">alrededor de un elemento</span><span>, utilice la </span><span class="hps">propiedad</span></span><span lang="es"><span> </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"border</span><span>")}</span><span>}</span> <span class="hps">.</span> <span class="hps">Especifique</span> <span class="hps">el ancho</span> <span class="hps">(por lo general</span> <span class="hps">en píxeles</span> <span class="hps">para la visualización</span> <span class="hps">en una pantalla</span><span>)</span><span>, el estilo</span><span>, y el color</span><span>.</span><br> + <br> + <span class="hps">Los estilos son</span><span>:</span></span></p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 6em;"> + <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div> + </td> + </tr> + <tr> + <td style="width: 6em;"> + <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div> + </td> + </tr> + </tbody> +</table> + +<p><span id="result_box" lang="es"><span class="hps">También puede establecer</span> <span class="hps">el estilo a </span></span><em><strong><code>none</code> </strong>(</em><span lang="es"><em> </em><span class="hps">ninguno) o</span> </span><strong><em><code>hidden</code> </em></strong><span lang="es"><span class="hps alt-edited">(oculto), </span> <span class="hps">para eliminar</span> <span class="hps">explícitamente</span> <span class="hps">la frontera <code>(</code></span></span><code><em><strong>border </strong></em>)</code><span lang="es"><span>,</span> <span class="hps">o</span> <span class="hps">establecer el color</span> como <span class="hps">transparente</span> <span class="hps">para hacer</span> <span class="hps">la frontera</span> <span class="hps">invisible</span> <span class="hps">sin cambiar</span> <span class="hps">el diseño.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Para especificar</span> <span class="hps alt-edited">los bordes</span> <span class="hps">de uno en uno</span> por separado<span>, utilice las propiedades</span><span>:</span> <span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-top</span><span>")}</span><span class="atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-right</span><span>")}</span><span class="atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-bottom</span><span>")}</span> <span class="hps atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-left</span><span>")}</span><span>}</span><span>.</span> <span class="hps">Usted</span> <span class="hps">puede utilizar estas para</span> <span class="hps">especificar</span> <span class="hps alt-edited">un borde</span> <span class="hps"> solo en un lado</span><span>,</span> <span class="hps">o</span> <span class="hps">diferentes</span> <span class="hps alt-edited">los bordes</span> <span class="hps">en diferentes lados</span><span>.</span></span></p> + +<div class="tuto_example"> +<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Ejemplo</span></span></div> + +<p><br> + <span id="result_box" lang="es"><span class="hps">Esta norma</span> <span class="hps">establece el</span> <span class="hps">color de fondo y</span> <span class="hps">el borde superior</span> <span class="hps">de los elementos de</span> <span class="hps">la etiqueta <code><strong><em>h3</em></strong></code></span><span>:</span></span></p> + +<pre class="brush:css">h3 { + border-top: 4px solid #7c7; /* mid green */ + background-color: #efe; /* pale green */ + color: #050; /* dark green */ + } +</pre> + +<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p> + +<table> + <tbody> + <tr> + <td> + <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Stylish heading</p> + </td> + </tr> + </tbody> +</table> + +<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">hace que</span> <span class="hps">las imágenes</span> sean <span class="hps">fáciles de ver</span><span>, dándoles</span> <span class="hps">un borde</span> <span class="hps">gris medio</span> a <span class="hps">todo</span><span>:</span></span></p> + +<pre class="brush:css">img {border: 2px solid #ccc;} +</pre> + +<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p> + +<table> + <tbody> + <tr> + <td>Image:</td> + <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Márgenes_y_relleno"><span id="result_box" lang="es"><span class="hps">Márgenes y</span> <span class="hps">relleno</span></span></h3> + +<p><br> + <span id="result_box" lang="es"><span class="hps">Use</span> <span class="hps">márgenes y el relleno</span> <span class="hps">para ajustar</span> <span class="hps">las posiciones de</span> <span class="hps">los elementos</span> <span class="hps atn">'</span><span>y crear</span> <span class="hps">el espacio</span> <span class="hps">que les rodea.</span><br> + <br> + <span class="hps">Utilice la propiedad </span></span><span lang="es"><span class="hps"> </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps">"</span></span>margin<span lang="es"><span>")}</span><span>}</span> <span class="hps">o</span> la <span class="hps">propiedad </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps">"</span></span>padding<span lang="es"><span>")}</span><span>}</span> <span class="hps">para establecer</span> <span class="hps">los</span> <span class="hps">márgenes y el </span><span class="hps"> relleno</span> con sus <span class="hps">anchuras</span> <span class="hps">respectivamente.</span><br> + <br> + <span class="hps">Si especifica</span> <span class="hps">una</span> <span class="hps">anchura,</span> <span class="hps">que se aplica</span> <span class="hps">en todo el</span> <span class="hps">elemento</span> <span class="hps">(arriba</span><span>, derecha,</span> <span class="hps">abajo y de izquierda</span><span>)</span><span>.</span><br> + <br> + <span class="hps">Si especifica</span> <span class="hps">dos anchos</span><span>,</span> <span class="hps">la</span> <span class="hps">primera se aplica</span> <span class="hps">a la</span> <span class="hps">parte superior e inferior</span><span>,</span> <span class="hps">la segunda a la</span> <span class="hps">derecha y la izquierda</span><span>.</span><br> + <br> + <span class="hps">Puede especificar</span> <span class="hps">los cuatro</span> <span class="hps">anchos</span> <span class="hps">en el orden</span><span>:</span> <span class="hps">arriba, derecha</span><span>,</span> <span class="hps">abajo, de izquierda</span><span>.</span></span></p> + +<div class="tuto_example"> +<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Ejemplo</span></span></div> + +<p><br> + <span id="result_box" lang="es"><span class="hps">Esta norma</span> <span class="hps">delimita</span> <span class="hps">párrafos con</span> <span class="hps">la </span></span><code><em><strong> class</strong></em></code> <code>remark</code><span lang="es"><span>, dándoles</span> <span class="hps">un borde rojo</span> <span class="hps">a su alrededor.</span><br> + <br> + <span class="hps">El </span></span><code><strong><em>padding </em></strong></code>(relleno)<code><strong><em> </em></strong></code><span lang="es"><span class="hps">separa </span></span><span lang="es"><span class="hps">un poco </span></span><span lang="es"><span class="hps">todo</span> <span class="hps"> el borde</span> <span class="hps">del texto</span> <span class="hps">.</span></span><br> + <br> + <span id="result_box" lang="es"><span class="hps">A</span> <span class="hps">la izquierda una </span> <span class="hps alt-edited">sangría</span> <span class="hps alt-edited">desde el margen</span> <span class="hps">del</span> <span class="hps">párrafo con respecto al</span> <span class="hps">resto del texto <code><em><strong>(</strong></em></code></span></span><code><em><strong>margin-left</strong></em></code><span lang="es"><span><code><em><strong> )</strong></em></code>:</span></span></p> + +<pre class="brush:css">p.remark { + border: 2px solid red; + padding: 4px; + margin-left: 24px; + } +</pre> + +<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p> + +<table> + <tbody> + <tr> + <td> + <p><span class="short_text" id="result_box" lang="es"><span class="hps alt-edited">A continuación</span> <span class="hps">es un párrafo</span> <span class="hps">normal.</span></span></p> + + <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Aqui con la clase remark.</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Más</span> <span class="hps">detalles</span></span></div> + +<p><span id="result_box" lang="es"><span class="hps">Cuando se utiliza</span> <span class="hps">márgenes y el relleno</span> <span class="hps">para ajustar</span> <span class="hps alt-edited">la manera en</span> <span class="hps alt-edited">que los elementos</span> <span class="hps">se disponen</span><span>,</span> <span class="hps">sus</span> <span class="hps">reglas de estilo</span> <span class="hps">interactúan</span> <span class="hps alt-edited">con los estilos</span> <span class="hps">de tu navegador</span> <span class="hps alt-edited">por defecto</span> <span class="hps alt-edited">y pueden ser</span> <span class="hps alt-edited">muy complejas.</span><br> + <br> + <span class="hps">Los distintos navegadores</span> <span class="hps">ponen</span> <span class="hps alt-edited">que los elementos</span> <span class="hps">de manera diferente</span><span>.</span> <span class="hps">Los</span> <span class="hps alt-edited">resultados pueden</span> <span class="hps">ser similar</span> <span class="hps alt-edited">,hasta que nuestro</span> <span class="hps alt-edited">hoja de estilos</span> <span class="hps">cambia las cosas</span><span>.</span> <span class="hps">A veces esto</span> <span class="hps">puede hacer que sus</span> <span class="hps">hojas de estilo</span> <span class="hps alt-edited">den</span> <span class="hps">resultados sorprendentes.</span><br> + <br> + <span class="hps">Para</span> <span class="hps">obtener</span> <span class="hps">el resultado deseado</span><span>, es posible que</span> <span class="hps">tenga que cambiar</span> <span class="hps alt-edited">el marcado</span> <span class="hps">de su</span> <span class="hps">documento.</span> <span class="hps">La</span> <span class="hps">página siguiente de</span> <span class="hps">este tutorial</span> <span class="hps">tiene más</span> <span class="hps">información al respecto.</span><br> + <br> + <span class="hps">Para obtener información</span> <span class="hps">detallada acerca</span> <span class="hps">de relleno</span><span>, márgenes</span> <span class="hps">y bordes</span><span>, consulte</span> <span class="hps">la página de referencia</span> <span class="hps">Modelo de caja</span><span>.</span></span></p> +</div> + +<h2 id="Acción_Agregar_bordes"><span id="result_box" lang="es"><span class="hps">Acción</span><span>:</span> <span class="hps">Agregar bordes</span></span></h2> + +<p>Edite su archivo CSS , <strong><em>style2.css</em></strong>. <span id="result_box" lang="es"><span class="hps alt-edited">Agrega</span> <span class="hps">esta regla</span> <span class="hps">para dibujar una línea</span> <span class="hps">a través de la</span> <span class="hps">página</span> <span class="hps">sobre cada</span> <span class="hps alt-edited">encabezado</span><span>:</span></span></p> + +<pre class="brush:css">h3 {border-top: 1px solid gray;} +</pre> + +<p><span id="result_box" lang="es"><span class="hps">Si usted tomó</span> <span class="hps alt-edited">el cambio </span><span class="hps alt-edited">en la última página</span><span>,</span> <span class="hps alt-edited">modificara la regla</span> <span class="hps">que ha creado,</span> <span class="hps">de lo contrario</span> <span class="hps alt-edited">agregar la</span> <span class="hps alt-edited">nueva regla</span> <span class="hps alt-edited">para añadir espacio</span> <span class="hps">debajo de cada</span> <span class="hps alt-edited">ítem de la lista</span><span>:</span></span></p> + +<pre class="brush:css">li { + list-style: lower-roman; + margin-bottom: 8px; + } +</pre> + +<p><span class="short_text" id="result_box" lang="es"><span class="hps">Actualice el navegador</span> <span class="hps">para ver el resultado</span><span>:</span></span></p> + +<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <ul style=""> + <li style="margin-bottom: 8px;">Arctic</li> + <li style="margin-bottom: 8px;">Atlantic</li> + <li style="margin-bottom: 8px;">Pacific</li> + <li style="margin-bottom: 8px;">Indian</li> + <li style="margin-bottom: 8px;">Southern</li> + </ul> + + <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> +</table> + +<div class="tuto_example"> +<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">El reto</span></span></div> + +<p><br> + <span id="result_box" lang="es"><span class="hps alt-edited">Agrega</span> <span class="hps">una regla a</span> <span class="hps">la hoja de estilos</span><span>, para que</span> <span class="hps alt-edited">aparesca un amplio</span> <span class="hps alt-edited">borde</span> <span class="hps">alrededor de los</span> <span class="hps alt-edited">la lista de océanos, en</span> <span class="hps">un color</span> <span class="hps">que le recuerda</span> <span class="hps">al mar</span><span>, algo</span> <span class="hps">como esto:</span></span></p> + +<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <div style="border: 12px solid #69b; padding-left: 1em;"> + <ul style=""> + <li style="margin-bottom: 8px;">Arctic</li> + <li style="margin-bottom: 8px;">Atlantic</li> + <li style="margin-bottom: 8px;">Pacific</li> + <li style="margin-bottom: 8px;">Indian</li> + <li style="margin-bottom: 8px;">Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<p><span id="result_box" lang="es"><span class="hps atn">(</span><span>No es necesario</span> <span class="hps alt-edited">que coincida con</span> <span class="hps">el ancho</span> <span class="hps">y el color</span> <span class="hps">que se ve aquí</span> <span class="hps">exactamente</span><span>.</span><span>)</span></span></p> +</div> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes">Ver una solución a este desafío.</a></p> + +<h2 id="What_next">What next?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout") }}<span id="result_box" lang="es"><span class="hps">Al especificar</span> <span class="hps">márgenes y el relleno</span><span>, se</span> <span class="hps">modificó el</span> <span class="hps">diseño del documento</span><span>.</span> <span class="hps">En la página siguiente</span> <span class="hps">se cambia</span> el </span><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout">layout</a><span id="result_box" lang="es"><span class="hps"> de su</span> <span class="hps">documento</span> <span class="hps">de otra manera.</span></span></p> diff --git a/files/es/web/css/introducción/cascading_and_inheritance/index.html b/files/es/web/css/introducción/cascading_and_inheritance/index.html new file mode 100644 index 0000000000..64bf0dd443 --- /dev/null +++ b/files/es/web/css/introducción/cascading_and_inheritance/index.html @@ -0,0 +1,124 @@ +--- +title: Cascada y herencia +slug: Web/CSS/Introducción/Cascading_and_inheritance +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/es/docs/Web/CSS/Introduction/How_CSS_works", "Cómo funciona el CSS.")}}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="hps">es</span> <span class="hps">la cuarta sección </span> <span class="alt-edited hps">del</span> <span class="hps">tutorial</span><span> <span class="hps">CSS</span> <span class="hps">Primeros pasos</span>;</span> <span class="hps">que</span> <span class="hps">describe cómo</span> <span class="hps">interactúan</span> <span class="hps">las hojas de estilo</span> <span class="hps">en cascada,</span> <span class="hps">y</span> <span class="hps">cómo los elementos</span> <span class="hps">heredan</span> <span class="hps">el estilo</span> <span class="hps">de sus padres.</span> <span class="alt-edited hps">Usted agrega</span> <span class="hps">a</span> <span class="hps">la hoja de estilos</span> <span class="alt-edited hps">de ejemplo,</span> <span class="hps">utilizando la herencia</span> <span class="alt-edited hps">para alterar</span> <span class="hps">el estilo de</span> <span class="alt-edited hps">muchas partes del</span> <span class="hps">documento</span> <span class="hps">en un solo paso</span><span>.</span></span></p> + +<h2 class="clearLeft" id="Información_Cascada_y_herencia"><span class="short_text" id="result_box" lang="es"><span class="hps">Información</span><span>:</span> <span class="hps">Cascada</span> <span class="hps">y</span> <span class="hps">herencia</span></span></h2> + +<p><span id="result_box" lang="es"><span class="hps">El estilo</span> <span class="hps">final para</span> <span class="hps">un elemento</span> <span class="hps">se puede especificar en</span> <span class="hps">muchos lugares</span> <span class="hps">diferentes</span><span>, que pueden interactuar</span> <span class="hps">de una manera compleja</span><span>.</span> <span class="hps">Esta interacción</span> <span class="hps">compleja</span> <span class="hps">hace</span> <span class="alt-edited hps">el CSS</span> <span class="alt-edited hps">poderoso</span><span>,</span> <span class="alt-edited hps">pero puede también</span> <span class="hps">hacer que sea</span> <span class="hps">confuso y difícil</span> <span class="hps">de depurar.</span></span></p> + +<p><span id="result_box" lang="es"><span class="alt-edited hps">Tres</span> <span class="alt-edited hps">principales fuentes de</span> <span class="hps">información de estilo</span> <span class="alt-edited hps">forman</span> <span class="hps">una <em>cascada</em></span><span>.</span> <span class="alt-edited hps">Estas son:</span></span></p> + +<ul> + <li><span id="result_box" lang="es"><span class="hps">Estilos</span> <span class="hps">por defecto del navegador</span> <span class="hps">para</span> <span class="alt-edited hps">del lenguaje de marcado</span><span>.</span></span></li> + <li><span id="result_box" lang="es"><span class="hps">Estilos</span> <span class="hps">especificados</span> <span class="hps">por un usuario</span> <span class="hps">que está leyendo</span> <span class="hps">el documento</span><span>.</span></span></li> + <li><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">estilos</span> <span class="hps">relacionados en </span><span class="hps">el documento</span> <span class="hps">por su autor</span><span>.</span> <span class="hps">Estos pueden</span> <span class="hps">ser especificados</span> <span class="hps">en tres lugares</span><span>:</span></span> + <ul> + <li><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">un archivo externo</span><span>:</span> <span class="hps">este tutorial</span> <span class="alt-edited hps">aborda</span> <span class="hps">principalmente</span> <span class="hps">este</span> <span class="hps">método para definir</span> <span class="hps">los estilos.</span></span></li> + <li><span id="result_box" lang="es"><span class="hps">En una definición</span> <span class="hps">al principio</span> <span class="hps">del documento</span><span>: utilice</span> <span class="alt-edited hps">este método únicamente</span> <span class="hps">para los estilos</span> <span class="hps">que se utilizan sólo</span> <span class="hps">en esa página</span> <span class="hps">.</span></span></li> + <li><span id="result_box" lang="es"><span class="hps">En un</span> <span class="hps">elemento específico</span> <span class="hps">en el cuerpo</span> <span class="hps">del documento</span><span>:</span> <span class="hps">este</span> <span class="hps">es el método menos</span> <span class="alt-edited hps">fácil de mantener</span><span>,</span> <span class="hps">pero puede ser utilizado</span> <span class="alt-edited hps">para la probar.</span></span></li> + </ul> + </li> +</ul> + +<p><span id="result_box" lang="es"><span class="hps">El estilo del</span> <span class="hps">usuario modifica</span> <span class="hps">el estilo</span> <span class="hps">por defecto del navegador</span><span>.</span> <span class="alt-edited hps">El estilo</span> <span class="hps">del autor del documento</span> <span class="alt-edited hps">a continuación</span> <span class="hps">modifica</span> <span class="hps">el estilo</span> <span class="hps">un poco más.</span> <span class="hps">En este tutorial,</span> <span class="hps">usted es el autor</span> <span class="hps">del documento</span> <span class="alt-edited hps">de ejemplo,</span> <span class="hps">y</span> <span class="hps">solo trabaja</span> <span class="hps">con</span> <span class="hps">hojas de estilo</span> <span class="hps">del autor</span><span>.</span></span></p> + +<div class="tuto_example"> +<div class="tuto_type">Ejemplo</div> + +<p><span id="result_box" lang="es"><span class="hps">Cuando lea este</span> <span class="hps">documento en un navegador</span><span>,</span> <span class="hps">parte del estilo</span> <span class="alt-edited hps">que ves</span> <span class="alt-edited hps">proviene</span> <span class="alt-edited hps">por defecto</span> <span class="hps">de su</span> <span class="alt-edited hps">navegador de</span> <span class="hps">HTML</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Parte del</span> <span class="hps">estilo</span> <span class="hps">podría venir de</span> <span class="alt-edited hps">los ajustes </span></span><span id="result_box" lang="es"><span class="hps">personalizados </span></span><span id="result_box" lang="es"><span class="alt-edited hps">del navegador</span> <span class="hps">o</span> <span class="alt-edited hps">de un archivo</span> <span class="alt-edited hps">de definición de estilo</span> <span class="hps">personalizado.</span> <span class="hps">En Firefox</span><span>, la configuración</span> <span class="hps">se puede personalizar en</span> <span class="alt-edited hps">cuadro de diálogo Preferencias</span><span>, o puede</span> <span class="hps">especificar</span> <span class="hps">estilos</span> <span class="hps">en un archivo</span> </span><span id="result_box" lang="es"><span class="alt-edited hps">denominado</span> </span><span id="result_box" lang="es"><em><code><span class="hps">user Content.css,</span></code></em> <span class="alt-edited hps">archivado </span><span class="hps">en su perfil de</span> <span class="hps">navegador.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Parte del</span> <span class="alt-edited hps">estilo</span> <span class="hps">proviene de</span> <span class="hps">las hojas de estilo</span> <span class="hps">vinculadas al</span> <span class="hps">documento</span> <span class="hps">por el servidor</span></span> wiki.</p> +</div> + +<p><span id="result_box" lang="es"><span class="hps">Al abrir su</span> <span class="hps">documento de muestra</span> <span class="hps">en el navegador,</span> <span class="atn hps">los elementos </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="alt-edited hps">son</span> <span class="alt-edited hps">más relevante que</span> <span class="hps">el</span> <span class="hps">resto del texto</span><span>.</span> <span class="alt-edited hps">Esto viene del</span> <span class="hps">estilo por defecto</span> <span class="hps">del navegador</span> <span class="hps">para HTML</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="atn hps">El elemento </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">son rojos.</span> <span class="alt-edited hps">Esto viene</span> <span class="alt-edited hps">de la</span> <span class="hps">propia hoja de estilos</span> <span class="alt-edited hps">de ejemplo.</span></span></p> + +<p><span id="result_box" lang="es"><span class="atn hps">El elemento </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">también</span> <span class="hps">heredan</span> <span class="hps">gran parte del estilo del elemento </span></span>{{ HTMLElement("p") }}<span lang="es"><span class="hps">,</span> <span class="alt-edited hps">porque ellos son</span> <span class="hps">sus</span> <span class="hps">hijos.</span> <span class="hps">De la misma manera</span><span>,</span> <span class="alt-edited hps">los</span> elementos </span>{{ HTMLElement("p") }}<span lang="es"> <span class="alt-edited hps">heredan</span> <span class="hps">gran parte del estilo</span> <span class="hps">del</span> <span class="hps">elemento</span></span>{{ HTMLElement("body") }}<span lang="es"><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Para los estilos</span> <span class="alt-edited hps">en cascada</span><span class="alt-edited">, las hojas de estilo</span> <span class="hps">del autor</span> <span class="hps">tienen</span> <span class="alt-edited hps">prioridad, </span> <span class="alt-edited hps">ante las hojas de estilo</span> <span class="hps">del lector</span><span>, </span> <span class="hps">por defecto</span> <span class="hps">de tu navegador</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Para los estilos</span> <span class="hps">heredados</span><span>,</span> <span class="hps">el estilo propio de</span> <span class="hps">un nodo</span> <span class="hps">hijo tiene</span> <span class="hps">prioridad sobre</span> <span class="alt-edited hps">estilo</span> <span class="hps">heredado de</span> <span class="hps">su</span> <span class="hps">padre</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Estas no son las</span> <span class="hps">únicas prioridades</span> <span class="hps">que se aplican</span><span>.</span> <span class="alt-edited hps">En una página posterior</span><span class="alt-edited hps"> de este</span> <span class="hps">tutorial se explica</span> <span class="alt-edited hps">mas detalladamente</span><span>.</span></span></p> + +<div class="tuto_details"> +<div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Más</span> <span class="hps">detalles</span></span></div> + +<p><span id="result_box" lang="es"><span class="alt-edited hps">El CSS</span> <span class="hps">también proporciona</span> <span class="hps">una forma para que</span> <span class="hps">el lector</span> <span class="alt-edited hps">pueda anular</span> <span class="hps">el estilo</span> <span class="hps">del autor del documento</span><span>,</span> <span class="hps">mediante el uso de</span> <span class="hps">la palabra clave</span><span>! </span></span><code>!important</code>.</p> + +<p><span id="result_box" lang="es"><span class="hps">Esto significa</span> <span class="hps">que, como</span> <span class="hps">autor del documento</span><span>,</span> <span class="hps">no siempre se puede</span> <span class="hps">predecir con exactitud</span> <span class="hps">lo que sus lectores</span> <span class="hps">van a ver.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">quieres conocer</span> <span class="hps">todos los detalles de</span></span> cascada y herencia mira <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Asignando propiedad de valores, cascada, y herencia</a> <span id="result_box" lang="es"><span class="hps">en</span> <span class="alt-edited hps">las</span> <span class="hps">especificaciones</span> d<span class="alt-edited hps">el CSS</span><span>.</span></span></p> +</div> + +<h2 id="Acción_El_uso_de_la_herencia"><span class="short_text" id="result_box" lang="es"><span class="hps">Acción</span><span>: El uso de</span> <span class="hps">la herencia</span></span> </h2> + +<ol> + <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="alt-edited hps"> CSS</span> <span class="alt-edited hps">de ejemplo.</span></span></li> + <li><span id="result_box" lang="es"><span class="alt-edited hps">Agrega</span> <span class="hps">esta línea</span> <span class="hps">copiando y</span> <span class="hps">pegando</span><span>.</span> <span class="hps">Realmente no</span> <span class="hps">importa si</span> <span class="hps">usted la agrega</span> <span class="hps">por encima o por</span> <span class="hps">debajo de la línea</span> <span class="hps">que está</span><span>.</span> <span class="alt-edited hps">Sin embargo, añadirla</span> <span class="hps">en la parte superior</span> <span class="hps">es más</span> <span class="hps">lógico, porque</span> <span class="hps">en el documento </span><span class="alt-edited hps">el</span> elemento </span>{{ HTMLElement("p") }}<span lang="es"> es el <span class="alt-edited hps">elemento</span> <span class="hps">padre</span> <span class="atn hps">del elemento </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span>:</span></span> + <pre class="brush:css">p {color: blue; text-decoration: underline;} +</pre> + </li> + <li>Ahora actualice el navegador para ver el efecto <span id="result_box" lang="es"><span class="hps">en su</span> <span class="hps">documento de muestra.</span></span> El subrayado afecta todo el texto en el párrafo, incluido las letras iniciales. Los elementos {{ HTMLElement("strong") }} <span id="result_box" lang="es"><span class="hps">han heredado</span> <span class="hps">el estilo</span> <span class="hps">subrayado</span> <span class="hps">de su elemento padre </span></span>{{ HTMLElement("p") }}.<br> + + <p><span id="result_box" lang="es"><span class="hps">Pero</span> <span class="atn hps">los elementos </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">siguen siendo</span> <span class="hps">rojo.</span> <span class="hps">El color rojo</span> <span class="hps">es</span> <span class="hps">su estilo</span><span> </span><span class="hps">propio</span><span>,</span> <span class="hps">por lo que tiene</span> <span class="hps">prioridad sobre</span> <span class="hps">el color azul</span> <span class="hps">de su elemento</span> <span class="hps">padre</span> </span>{{ HTMLElement("p") }}<span lang="es"> <span>.</span></span></p> + </li> +</ol> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> +</table> + +<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;"> + <caption>Antes</caption> + <tbody> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<table style="border: 2px outset #3366bb; padding: 1em;"> + <caption>Después</caption> + <tbody> + <tr> + <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_example"> +<div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Problema</span></span></div> +<span id="result_box" lang="es"><span class="hps">Cambie su</span> hoja de <span class="hps">estilo</span> <span class="hps">de manera que</span> <span class="alt-edited hps">aparecen subrayados</span> <span class="hps">sólo las letras</span> <span class="hps">rojas</span><span>:</span></span> + +<table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p> + +<pre class="brush: css">p {color: blue; } +strong {color: red; text-decoration: underline;} +</pre> + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Ver una solución al desafío.</a></div> + +<h2 id="¿Y_ahora_qué"><span class="short_text" id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectores")}}<span id="result_box" lang="es"><span class="hps">Su</span> <span class="hps">hoja de estilo</span> <span class="hps">de ejemplo especifica</span> <span class="hps">estilos</span> <span class="hps">para las etiquetas</span> <span class="atn hps"><</span><span>p</span><span>></span> <span class="hps">y</span> <span class="hps"><strong</span><span>></span><span>, cambiando el</span> <span class="hps">estilo de</span> <span class="hps">los elementos correspondientes</span> <span class="hps">en todo el documento</span><span>.</span> <span class="hps">La</span> <span class="hps">siguiente sección</span> <span class="hps">describe cómo especificar</span> <span class="hps">el estilo</span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">de manera más selectiva</a></span>.</p> diff --git a/files/es/web/css/introducción/color/index.html b/files/es/web/css/introducción/color/index.html new file mode 100644 index 0000000000..578f1e6898 --- /dev/null +++ b/files/es/web/css/introducción/color/index.html @@ -0,0 +1,363 @@ +--- +title: Color +slug: Web/CSS/Introducción/Color +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p><a class="button previousPage" href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" rel="prev" style="margin: 0px 20px 20px 0px; padding: 5px 11px; border: 0px; color: rgb(77, 78, 83); text-decoration: none; cursor: pointer; display: inline-block; line-height: 1; font-weight: normal; letter-spacing: normal; text-transform: uppercase; border-radius: 4px; box-shadow: rgb(187, 191, 194) 0px -1px inset; float: left; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; white-space: normal; background-color: rgb(234, 239, 242);" title="Los estilos de texto"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">IR A LA SECCIÓN ANTERIOR: </span></font></font><br> + <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">LOS ESTILOS DE TEXTO</span></font></font></a></p> + +<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Esta es la sección octava de la </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="es-es / docs / Web / guía / CSS / Primeros pasos"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS Introducción</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">tutorial; </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">se explica cómo puede especificar el color en CSS. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En su hoja de estilos de muestra, se introduce colores de fondo.</span></font></font></p> + +<h2 class="clearLeft" id="Información_Color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Información: Color</span></font></font></h2> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En este tutorial hasta ahora, se ha utilizado un número limitado de colores con nombre. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS 2 soporta 17 colores con nombre absoluto. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Algunos de los nombres puede que no sea el esperado:</span></font></font></p> + +<table style="border: 0px; margin-left: 2em; text-align: right;"> + <tbody> + <tr> + <td> </td> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: black;"> </td> + <td>gray</td> + <td style="width: 2em; height: 2em; background-color: gray;"> </td> + <td>silver</td> + <td style="width: 2em; height: 2em; background-color: silver;"> </td> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> + </tr> + <tr> + <td>primaries</td> + <td>red</td> + <td style="width: 2em; height: 2em; background-color: red;"> </td> + <td>lime</td> + <td style="width: 2em; height: 2em; background-color: lime;"> </td> + <td>blue</td> + <td style="width: 2em; height: 2em; background-color: blue;"> </td> + </tr> + <tr> + <td>secondaries</td> + <td>yellow</td> + <td style="width: 2em; height: 2em; background-color: yellow;"> </td> + <td>aqua</td> + <td style="width: 2em; height: 2em; background-color: aqua;"> </td> + <td>fuchsia</td> + <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> + </tr> + <tr> + <td> </td> + <td>maroon</td> + <td style="width: 2em; height: 2em; background-color: maroon;"> </td> + <td>orange</td> + <td style="width: 2em; height: 2em; background-color: orange;"> </td> + <td>olive</td> + <td style="width: 2em; height: 2em; background-color: olive;"> </td> + <td>purple</td> + <td style="width: 2em; height: 2em; background-color: purple;"> </td> + <td>green</td> + <td style="width: 2em; height: 2em; background-color: green;"> </td> + <td>navy</td> + <td style="width: 2em; height: 2em; background-color: navy;"> </td> + <td>teal</td> + <td style="width: 2em; height: 2em; background-color: teal;"> </td> + </tr> + </tbody> +</table> + +<p> </p> + +<div class="tuto_details"> +<div class="tuto_type"> +<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Detalles</span></font></font></div> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Su navegador puede soportar muchos más colores con nombre, como:</span></font></font></p> +</div> + +<table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;"> + <tbody> + <tr> + <td>dodgerblue</td> + <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> + <td>peachpuff</td> + <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> + <td>tan</td> + <td style="width: 2em; height: 2em; background-color: tan;"> </td> + <td>firebrick</td> + <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> + <td>aquamarine</td> + <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> + </tr> + </tbody> +</table> + +<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para detalles de esta lista ampliada, consulte: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">SVG palabras clave de color</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en el </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">módulo de colores </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS 3 . </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Tenga cuidado con el uso de nombres de colores;puede que algunos de sus lectores de navegación no lo soporte.</span></font></font></p> +</div> + +<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para una paleta más grande, especificar los componentes rojo, verde y azul del color que desee, utilizando el signo numerico (hash) y tres </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">dígitos </span></font></font><em><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">hexadecimales</span></font></font></em><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> entre los rangos 0 - 9, a - f. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Las letras a - f representan los valores de 10 a 15:</span></font></font></p> + +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: #000;"> </td> + <td><code>#000</code></td> + </tr> + <tr> + <td>pure red</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#f00</code></td> + </tr> + <tr> + <td>pure green</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> + <td><code>#0f0</code></td> + </tr> + <tr> + <td>pure blue</td> + <td style="width: 2em; height: 2em; background-color: #00f;"> </td> + <td><code>#00f</code></td> + </tr> + <tr> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#fff</code></td> + </tr> + </tbody> +</table> + +<p><br> + <span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Para toda la paleta, especificar dos dígitos hexadecimales para cada componente:</span></p> + +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: #000;"> </td> + <td><code>#000000</code></td> + </tr> + <tr> + <td>pure red</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#ff0000</code></td> + </tr> + <tr> + <td>pure green</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> + <td><code>#00ff00</code></td> + </tr> + <tr> + <td>pure blue</td> + <td style="width: 2em; height: 2em; background-color: #00f;"> </td> + <td><code>#0000ff</code></td> + </tr> + <tr> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#ffffff</code></td> + </tr> + </tbody> +</table> + +<p><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Generalmente, usted puede obtener estos códigos hexadecimales de seis dígitos de su programa de gráficos o alguna otra herramienta.</span></p> + +<div class="tuto_example"> +<div class="tuto_type"> +<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Con un poco de práctica, puede ajustar los colores de tres dígitos de forma manual para la mayoría de los propósitos:</span></font></font></p> +</div> + +<table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> + <tbody> + <tr> + <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Comience con el rojo puro:</span></td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#f00</code></td> + </tr> + <tr> + <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(201, 215, 241);">Para que sea más pálido, añadir un poco de verde y azul:</span></td> + <td style="width: 2em; height: 2em; background-color: #f77;"> </td> + <td><code>#f77</code></td> + </tr> + <tr> + <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para hacerlo más naranja, añadir un poco de verde adicional:</span></td> + <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> + <td><code>#fa7</code></td> + </tr> + <tr> + <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para oscurecer, reducir todos sus componentes:</span></td> + <td style="width: 2em; height: 2em; background-color: #c74;"> </td> + <td><code>#c74</code></td> + </tr> + <tr> + <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para reducir su saturación, hacer que sus componentes más iguales:</span></td> + <td style="width: 2em; height: 2em; background-color: #c98;"> </td> + <td><code>#c98</code></td> + </tr> + <tr> + <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Si usted los pone exactamente iguales, se obtiene gris:</span></td> + <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> + <td><code>#ccc</code></td> + </tr> + </tbody> +</table> + +<p><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para un tono pastel como el azul pálido:</span></p> + +<table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> + <tbody> + <tr> + <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Comience con blanco puro:</span></td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#fff</code></td> + </tr> + <tr> + <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Reducir los otros componentes un poco:</span></td> + <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> + <td><code>#eef</code></td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type"> +<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Más detalles</span></font></font></div> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">También puede especificar un color mediante los valores RGB decimales en el rango de 0 - 255, o porcentajes.</span></font></font></p> + +<p><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(244, 244, 244);">Por ejemplo, este es de color granate (rojo oscuro)</span>dark red:</p> +</div> + +<pre class="brush:css language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token function" style="margin: 0px; padding: 0px; border: 0px; color: rgb(221, 74, 104);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">RGB</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> (128, 0, 0)</span></font></font></code></pre> + +<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para más detalles sobre cómo especificar los colores, ver: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/CSS21/syndata.html#color-units" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Colores</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en la Especificación CSS.</span></font></font></p> + +<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para obtener información sobre la adecuación de los colores del sistema como Menú y ThreeDFace, véase: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/CSS21/ui.html#system-colors" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Sistema CSS2 Colores</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en la Especificación CSS.</span></font></font></p> +</div> + +<h3 id="Propiedades_de_Color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 200; font-family: 'Open Sans', sans-serif; line-height: 24px; font-size: 1.71428571428571rem; letter-spacing: -0.5px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Propiedades de Color</span></font></font></h3> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ya ha utilizado </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">la propiedad</span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> color</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en el texto.</span></font></font></p> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">También puede utilizar <code>la</code></span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"><code> </code></span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> para cambiar fondos elementos.</span></font></font></p> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los Fondos (</span></font></font><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Backgrounds </span>) <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">se pueden establecer en </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">transparent</span></code><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"> (transparentes) </span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">para eliminar explícitamente cualquier color, revelando fondo del elemento padre.</span></font></font></p> + +<div class="tuto_example"> +<div class="tuto_type"> +<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">ejemplos de</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cajas de este tutorial utilizan este fondo de color amarillo pálido:</span></font></font></p> + +<pre class="brush:css language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> # fffff4 </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">;</span></font></font></span></code></pre> + +<div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 0px; background: 0px 0px;"> </div> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Más detalles</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cajas utilizan este gris pálido:</span></font></font></p> + +<pre class="brush:css language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> # F4F4F4 </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">;</span></font></font></span></code></pre> +</div> +</div> + +<p> </p> + +<h2 id="Acción_El_uso_de_códigos_de_color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Acción: El uso de códigos de color</span></font></font></h2> + +<ol style="margin: 0px 0px 24px; padding: 0px 0px 0px 40px; border: 0px; list-style-type: decimal; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"> + <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Edite su archivo CSS.</span></font></font></li> + <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Hacer el cambio se muestra aquí en negrita, para dar las letras iniciales un fondo azul claro. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">(La disposición y comentarios en el archivo probablemente difieren del archivo que se muestra aquí. Mantenga la disposición y los comentarios de la forma que prefiera.)</span></font></font> + <pre class="brush:css;highlight:[13] language-css"><code class="language-css"><span class="token comment">/*** CSS Tutorial: Color page ***/</span> + +<span class="token comment">/* page font */</span> +<span class="token selector">body </span><span class="token punctuation">{</span><span class="token property">font</span><span class="token punctuation">:</span> 16px <span class="token string">"Comic Sans MS"</span>, cursive<span class="token punctuation">;</span><span class="token punctuation">}</span> + +<span class="token comment">/* paragraphs */</span> +<span class="token selector">p </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span><span class="token punctuation">}</span> +<span class="token selector">#first </span><span class="token punctuation">{</span><span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span><span class="token punctuation">}</span> + +<span class="token comment">/* initial letters */</span> +<span class="token selector">strong </span><span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> #ddf<span class="token punctuation">;</span> + <span class="token property">font</span><span class="token punctuation">:</span> 200% serif<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + +<span class="token selector">.carrot </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><span class="token punctuation">}</span> +<span class="token selector">.spinach </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 0px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 19px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 38px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 57px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 76px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 95px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 114px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 133px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 152px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 171px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 190px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 209px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 228px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 247px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 266px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 285px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 304px; background: 0px 0px;"> </div> + + <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 323px; background: 0px 0px;"> </div> + + <div class="line-highlight" style=""> </div> + </li> + <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Guarde el archivo y actualizar el navegador para ver el resultado.</span></font></font></li> +</ol> + +<table> + <tbody> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"> + <table style="margin: 0px 0px 24px; padding: 0px; border-width: 1px 0px 0px 1px; border-style: solid; border-color: rgb(224, 224, 220); border-collapse: collapse; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"> + <tbody> + <tr style="margin: 0px; padding: 0px; border: 0px;"> + <td style="margin: 0px; padding: 6px; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(224, 224, 220); text-align: left; font-style: italic; font-variant: normal; font-weight: normal; font-size: 16px; line-height: normal; font-family: 'Comic Sans MS', cursive; color: blue;"><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>C</font></font></strong><font><font> ascading </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: green; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> tyle </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: green; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> heets</font></font></td> + </tr> + <tr style="margin: 0px; padding: 0px; border: 0px;"> + <td style="margin: 0px; padding: 6px; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(224, 224, 220); text-align: left; font-style: normal; font-variant: normal; font-weight: normal; font-size: 16px; line-height: normal; font-family: 'Comic Sans MS', cursive; color: blue;"><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>C</font></font></strong><font><font> ascading </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> tyle </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> heets</font></font></td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<div class="tuto_example"> +<div class="tuto_type"> +<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Desafío</span></font></font></div> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En el archivo CSS, cambiara todos los nombres de los colores a los códigos de color de 3 dígitos sin afectar el resultado.</span></font></font></p> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">(Esto no se puede hacer exactamente, pero usted puede conseguir cerca. Para hacerlo exactamente lo que necesita códigos de 6 dígitos, y hay que buscar la especificación CSS o utilizar una herramienta gráfica para que coincida con los colores.)</span></font></font></p> +<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Color#tutochallenge" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-size: 12px; text-align: right; display: block; font-family: 'Open Sans', sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal;" title="Mostrar una posible solución para el desafío"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver una solución para el desafío.</span></font></font></a></div> +</div> + +<h2 id="¿Y_ahora_qué" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">¿Y ahora qué?</span></font></font></h2> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a class="button nextPage" href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content" rel="next" style="margin: 20px 0px 0px 20px; padding: 5px 11px; border: 0px; color: rgb(77, 78, 83); text-decoration: none; cursor: pointer; display: inline-block; line-height: 1; font-weight: 400; letter-spacing: normal; text-transform: uppercase; border-radius: 4px; box-shadow: rgb(187, 191, 194) 0px -1px inset; float: right; background-color: rgb(234, 239, 242);" title="Contenido"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">IR A LA SIGUIENTE SECCIÓN: </span></font></font><br> + <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CONTENT</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En su documento de muestra y el contenido de su hoja de estilo muestra estrictamente separados los estilo.</span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title="/ En-US / docs / Web / guía / CSS / Getting_Started / contenido"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">siguiente sección</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> explica cómo se puede hacer excepciones a esta estricta separación.</span></font></font></p> diff --git a/files/es/web/css/introducción/how_css_works/index.html b/files/es/web/css/introducción/how_css_works/index.html new file mode 100644 index 0000000000..7940c9a060 --- /dev/null +++ b/files/es/web/css/introducción/how_css_works/index.html @@ -0,0 +1,127 @@ +--- +title: Cómo funciona el CSS +slug: Web/CSS/Introducción/How_CSS_works +tags: + - CSS + - 'CSS:' + - 'CSS:Empezando' + - Diseño + - Guía + - Inicio + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "¿Por qué usar CSS?") }}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="alt-edited hps">tercera parte del</span> </span><span class="seoSummary">tutorial <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">Empezando CSS</a> </span><span id="result_box" lang="es"><span class="hps">explica cómo funciona</span> <span class="hps">el CSS</span> <span class="hps">en el navegador y</span> la finalidad<span class="hps"> del</span> <span class="atn hps">Modelo de Objeto de Documento (</span><span>DOM</span><span>)</span><span>.</span> <span class="hps">Usted también aprenderá</span> <span class="hps">cómo analizar</span> <span class="hps">el documento de</span> <span class="hps">muestra.</span></span></p> + +<h2 class="clearLeft" id="Información_Cómo_funciona_CSS"><span class="short_text" id="result_box" lang="es"><span class="hps">Información</span><span>: Cómo funciona</span> <span class="hps">CSS</span></span></h2> + +<p><span id="result_box" lang="es"><span class="hps">Cuando un</span> <span class="hps">navegador muestra</span> <span class="hps">un documento, debe</span><span class="alt-edited hps"> combinar</span> <span class="hps">el contenido del documento</span> <span class="hps">con la </span><span class="hps">información </span></span><span id="result_box" lang="es"><span class="hps"> </span></span><span id="result_box" lang="es"><span class="hps">de </span></span><span id="result_box" lang="es"><span class="hps">su</span></span><span id="result_box" lang="es"><span class="hps"> estilo</span><span>.</span> Se <span class="hps">procesa</span> <span class="hps">el documento en</span> <span class="hps">dos</span> <span class="hps">etapas</span><span>:</span></span></p> + +<ol> + <li><span id="result_box" lang="es"><span class="hps">El navegador</span> <span class="hps">convierte el</span> <span class="hps">lenguaje de marcado (</span></span><code><strong><em>markup</em></strong></code>)<span lang="es"> <span class="hps">y</span> <span class="alt-edited hps">el</span> <span class="hps">CSS</span> <span class="hps">en el <em><span class="seoSummary"><a href="en-US/docs/DOM" title="en-US/docs/DOM">DOM</a></span></em></span><span class="seoSummary"><strong> </strong></span><span class="hps">(Document Object</span> <span class="hps">Model)</span><span>.</span> <span class="hps">El DOM</span> <span class="hps">representa el documento</span> <span class="hps">en la memoria del</span> <span class="hps">ordenador.</span></span> <span id="result_box" lang="es"><span class="hps">Combina</span> <span class="hps">el contenido del documento</span> <span class="hps">con su estilo</span><span>.</span></span></li> + <li><span id="result_box" lang="es"><span class="hps">El navegador muestra</span> <span class="hps">el contenido de la</span> <span class="hps">DOM</span><span>.</span></span></li> +</ol> + +<p><span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">lenguaje de marcado</span> <span class="hps">utiliza <em>elementos</em></span><em> </em><span class="hps">para definir</span> <span class="hps">la estructura del documento</span><span>.</span> <span class="hps">Usted marca</span> <span class="hps">un elemento</span> <span class="hps">utilizando</span> <span class="hps"><em>etiquetas</em>,</span> <span class="hps">que son cadenas</span> <span class="hps">que comienzan con</span> <span class="hps">'<'</span> <span class="hps">y termina con</span> <span class="hps">'>'</span><span>.</span> <span class="hps">La mayoría de los</span> <span class="hps">elementos</span> <span class="hps">tienen un par de</span> <span class="hps">etiquetas,</span> <span class="hps">una etiqueta de inicio</span> <span class="hps">y</span> <span class="hps">una etiqueta de cierre</span><span>.</span> <span class="hps">Para la</span> <span class="hps">etiqueta de inicio</span><span>, coloque</span> <span class="hps">el nombre del elemento</span> <span class="hps">entre</span> <span class="hps">'<'</span> <span class="atn hps">y '</span><span>>'</span><span>.</span> <span class="hps">Para la</span> <span class="hps">etiqueta final</span><span>, coloque un</span> <span class="hps">'/'</span> <span class="atn hps">después de '</span><span><' y</span> <span class="hps">antes del</span> <span class="hps">nombre del elemento.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Dependiendo del</span> <span class="hps">lenguaje de marcado</span><span>,</span> <span class="hps">algunos</span> <span class="hps">elementos tienen</span> <span class="hps">sólo</span> <span class="hps">una etiqueta de inicio</span><span>,</span> <span class="hps">o</span> <span class="hps">una sola etiqueta</span> <span class="hps">donde el</span> <span class="hps">'/'</span> viene <span class="hps">después del</span> <span class="hps">nombre del elemento.</span> <span class="hps">Un elemento</span> <span class="hps">también</span> <span class="hps">puede ser un contenedor </span><span class="hps">e incluir</span> <span class="hps">otros elementos</span> <span class="hps">entre</span> <span class="hps">su</span> <span class="hps">etiqueta de inicio</span> <span class="hps">y la etiqueta de cierre</span><span>.</span> <span class="alt-edited hps">Sólo recuerda</span> <span class="hps">cerrar</span> <span class="hps">siempre</span> <span class="hps">las</span> <span class="hps">etiquetas</span> <span class="hps">dentro del contenedor.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">DOM</span> <span class="hps">tiene una estructura</span> <span class="hps">en forma de árbol</span><span>.</span> <span class="hps">Cada elemento</span><span>,</span> <span class="hps">atributo</span> <span class="hps">y</span> <span class="hps">extensión de texto</span> <span class="hps">en el</span> <span class="hps">lenguaje de marcado</span> <span class="hps">se convierte en un</span> <span class="hps"><em>nodo </em>de la</span> <span class="hps">estructura de árbol.</span> <span class="hps">Los nodos</span> <span class="hps">se definen por su</span> <span class="hps">relación con otros</span> <span class="hps">nodos DOM</span><span>.</span> <span class="hps">Algunos elementos</span> <span class="hps">son</span> <span class="hps">los padres de los</span> <span class="hps">nodos secundarios</span><span>,</span> <span class="hps">y</span> <span class="hps">los nodos secundarios</span> <span class="hps">tienen hermanos</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Comprender el</span> <span class="hps">DOM</span> <span class="hps">le ayuda a diseñar</span><span>, depurar</span> <span class="hps">y mantener su</span> <span class="hps">CSS</span><span>,</span> <span class="hps">porque el</span> <span class="hps">DOM</span> <span class="hps">es donde su</span> <span class="hps">CSS y</span> <span class="hps">el contenido del documento</span> <span class="hps">se reúnen</span><span>.</span></span></p> + +<div class="tuto_example"> +<div class="tuto_type">Ejemplo</div> +<span id="result_box" lang="es"><span class="hps">En</span> <span class="alt-edited hps">el</span> <span class="hps">documento de ejemplo</span><span>,</span> <span class="alt-edited hps">las</span> <span class="hps">etiqueta <p></span> <span class="hps">y su</span> <span class="hps">etiqueta de cierre</span> <span class="atn hps"><</span><span>/</span> <span class="hps">p></span> <span class="hps">crean un contenedor</span><span>:</span></span> + +<pre class="brush:html"><p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p> +</pre> + +<h2 id="Ejemplo_en_vivo"><span class="short_text" id="result_box" lang="es"><span class="hps">Ejemplo</span> en <span class="hps">vivo</span></span></h2> + +<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p> + +<p><span id="result_box" lang="es"><span class="hps">En el</span> <span class="hps">DOM</span><span>, el nodo</span> <span class="hps">correspondiente P</span> <span class="hps">es</span> <span class="hps">uno de los padres</span><span>.</span> <span class="hps">Sus</span> <span class="hps">hijos</span> <span class="hps">son los nodos</span> <code><em><strong>STRONG </strong></em></code><span class="alt-edited hps">y</span> <span class="hps">los</span> <span class="hps">nodos de texto</span><span>.</span> <span class="hps">Los nodos</span> <code><em><strong>STRONG </strong></em></code></span><span lang="es"><span class="alt-edited hps">son en sí mismos</span> <span class="hps">padres</span><span>,</span> <span class="hps">con</span> <span class="hps">los nodos de texto</span> <span class="hps">como</span> <span class="hps">sus hijos</span><span>:</span></span></p> + +<pre><span style="color: black;">P</span> +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">C</span>" +├─"<span style="color: black;">ascading</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +├─"<span style="color: black;">tyle</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +└─"<span style="color: black;">heets</span>"</pre> +</div> + +<h2 id="Acción_Analizando_un_DOM"><span class="short_text" id="result_box" lang="es"><span class="hps">Acción:</span> <span class="hps">Analizando un</span> <span class="hps">DOM</span></span></h2> + +<h3 id="El_uso_del_Inspector_DOM"><span class="short_text" id="result_box" lang="es"><span class="hps">El uso del Inspector</span> <span class="hps">DOM</span></span></h3> + +<p><span id="result_box" lang="es"><span class="hps">Para analizar un</span> <span class="hps">DOM</span><span>,</span> <span class="hps">se necesita un software</span> <span class="hps">especial.</span> <span class="hps">Usted puede usar</span> el </span><span id="result_box" lang="es"><span class="alt-edited hps">complemento de </span> </span><span id="result_box" lang="es"><span class="hps">Mozilla </span></span><a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) <span id="result_box" lang="es"><span class="hps">para analizar un</span> <span class="hps">DOM</span><span>.</span> <span class="hps">Usted sólo tendrá que</span> <span class="hps">instalar el</span> <span class="atn hps">complemento (</span><span>ver</span> <span class="hps">más detalles abajo)</span><span>.</span></span></p> + +<ol> + <li><span id="result_box" lang="es"><span class="hps">Utilice</span> <span class="hps">el navegador</span> <span class="hps">Mozilla</span> <span class="hps">para abrir</span> <span class="hps">el documento</span> <span class="hps">en versión HTML</span><span>.</span></span></li> + <li><span id="result_box" lang="es"><span class="hps">Desde la barra de</span> <span class="hps">menú de su </span><span class="hps">navegador</span><span>, selecciona</span> <strong><span class="hps">Herramientas></span> <span class="hps">Inspector DOM</span></strong><span>,</span> <span class="hps">o <strong>Herramientas</strong></span><strong><span>></span> <span class="hps">Desarrollo Web></span> <span class="hps">Inspector DOM</span></strong><span>.</span></span> + <div class="tuto_details"> + <div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Más</span> <span class="hps">detalles</span></span></div> + + <p><span id="result_box" lang="es"><span class="hps">Si el navegador</span> <span class="hps">Mozilla</span> <span class="hps">no tiene</span> <span class="hps">Domi</span><span>, puede</span><a href="https://addons.mozilla.org/en-US/firefox/addon/6622/"> instalarlo del sitio de complementos</a> <span class="hps">y reiniciar el</span> <span class="hps">navegador.</span> <span class="hps">Luego regrese</span> <span class="hps">a este</span> <span class="hps">tutorial.</span></span></p> + + <p><span id="result_box" lang="es"><span class="hps">Si no</span> <span class="hps">desea instalar</span> <span class="hps">Domi</span> <span class="hps">(o</span> <span class="hps">estás usando</span> <span class="hps">un navegador que no</span> <span class="hps">Mozilla)</span><span>, puede utilizar</span> <span class="hps">Web</span> <span class="atn hps">X-</span><span>Ray</span> <span class="hps">Goggles,</span> <span class="hps">como se describe en</span> <span class="hps">la siguiente sección.</span> <span class="hps">O bien, puede</span> <span class="hps">omitir esta sección</span> <span class="hps">e ir directamente a</span> <span class="hps">la página siguiente.</span> <span class="hps">Saltarse</span> <span class="hps">esta sección</span> <span class="hps">no interfiere con</span> <span class="hps">el resto del</span> <span class="hps">tutorial.</span></span></p> + </div> + </li> + <li><span id="result_box" lang="es"><span class="alt-edited hps">En el</span> <span class="hps">Domi</span><span>, expanda</span> <span class="hps">los nodos</span> <span class="hps">de su</span> <span class="hps">documento</span> <span class="hps">haciendo clic en</span> <span class="hps">las flechas</span><span>.</span></span> + <p><span id="result_box" lang="es"><strong><span class="hps">Nota</span><span>:</span></strong> <span class="alt-edited hps">El espaciado</span> <span class="alt-edited hps">de su archivo</span> <span class="hps">HTML</span> <span class="alt-edited hps">puede ocasionar</span> <span class="alt-edited hps">que Domi</span> <span class="alt-edited hps">muestre</span> <span class="hps">algunos nodos</span> <span class="hps">de texto vacíos</span><span class="alt-edited">, que se pueden</span> <span class="hps">pasar por alto.</span></span></p> + + <p><span id="result_box" lang="es"><span class="hps">Parte</span> <span class="hps">del resultado</span> <span class="hps">podría tener este aspecto</span><span>, según</span> <span class="alt-edited hps">qué nodos</span> <span class="alt-edited hps">has</span> <span class="alt-edited hps">expandido</span><span>:</span></span></p> + + <pre>│ ▼╴<span style="color: black;">P</span> +│ │ │ ▼╴<span style="color: black;">STRONG</span> +│ │ └<span style="color: darkblue;">#text</span> +│ ├╴<span style="color: darkblue;">#text</span> +│ ►╴<span style="color: black;">STRONG</span> +│ │</pre> + + <p><span id="result_box" lang="es"><span class="alt-edited hps">Cuando selecciona</span> <span class="alt-edited hps">cualquiera de los nodos</span><span>, puede usar</span> <span class="hps">panel de la derecha</span> <span class="hps">de</span> <strong><span class="alt-edited hps"> DOMi </span></strong><span class="hps">para averiguar</span> <span class="hps">más cosas sobre él.</span> <span class="hps">Por ejemplo</span><span>, cuando se selecciona</span> <span class="hps">un nodo de texto</span><span>,</span> <strong><span class="alt-edited hps">DOMi </span></strong></span><span lang="es"><span class="hps">muestra</span> <span class="hps">el texto en el</span> <span class="hps">panel de la derecha</span><span>.</span></span></p> + + <p><span id="result_box" lang="es"><span class="hps">Cuando se selecciona</span> <span class="alt-edited hps">un elemento nodo</span></span>, <span id="result_box" lang="es"><strong><span class="alt-edited hps">DOMi </span></strong><span class="hps">analiza y</span> <span class="hps">ofrece</span> <span class="hps">una enorme cantidad de</span> <span class="hps">información en su</span> <span class="hps">panel de la derecha</span><span>.</span></span> <span id="result_box" lang="es"><span class="alt-edited hps">La información de estilo</span> <span class="hps">es sólo</span> <span class="alt-edited hps">una parte de la información</span> <span class="hps">que proporciona.</span></span></p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Problema</div> + +<p><span id="result_box" lang="es"><span class="alt-edited hps">En el</span> <strong><span class="alt-edited hps">DOMi </span></strong></span><span lang="es"><span>, haga clic</span> <span class="hps">en un nodo</span> </span><code><small>STRONG</small></code>.</p> + +<p><span id="result_box" lang="es"><span class="hps">Utilice</span> el <span class="hps">panel de la derecha</span> <span class="hps">de</span> <span class="alt-edited hps">Domi</span> <span class="hps">para encontrar </span><span class="alt-edited hps">el </span></span><span id="result_box" lang="es"><span class="hps"> nodo de </span></span><span id="result_box" lang="es"><span class="alt-edited hps">color</span><span class="hps"> rojo</span><span>,</span> <span class="hps">y donde</span> <span class="hps">su apariencia </span><span class="hps">es</span> <span class="hps">más relevante que</span> <span class="hps">el texto normal</span><span>.</span></span></p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> +<a class="hideAnswer" href="#challenge">Ocultar solución</a></div> +<a href="#tutochallenge" title="Ver la posible solución para el problema">Ver la solución para el problema.</a></div> + +<h3 id="Utilizando_Web_X-Ray_Goggles"><span class="short_text" id="result_box" lang="es"><span class="hps">Utilizando</span> <span class="hps">Web</span> <span class="hps">X</span><span class="atn">-</span><span>Ray</span> <span class="hps">Goggles</span></span></h3> + +<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a><span id="result_box" lang="es"><span class="hps">muestra</span> <span class="hps">menos información que</span> <strong><code><span class="hps">DOM</span> </code></strong><span class="hps">Inspector</span><span>, pero</span> <span class="hps">es</span> <span class="hps">más fácil de</span> <span class="hps">instalar y utilizar.</span></span></p> + +<ol> + <li><span id="result_box" lang="es"><span class="hps">Ir</span> <span class="hps">a la página principal</span> <span class="hps">de</span> <span class="hps">la </span></span> <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>.</li> + <li><span id="result_box" lang="es"><span class="hps">Arrastre el</span> <span class="hps">enlace</span> <span class="hps">bookmarklet</span> <span class="hps">en esa</span> <span class="hps">página a</span> <span class="hps">tu barra de herramientas</span> <span class="hps">del navegador</span><span>.</span></span></li> + <li><span id="result_box" lang="es"><span class="hps">Abra el documento</span> <span class="hps">en versión HTML</span><span>.</span></span></li> + <li><span id="result_box" lang="es"><span class="alt-edited hps">Active</span> <span class="hps">Web</span> <span class="atn hps">X-</span><span>Ray</span> <span class="hps">Goggles</span> <span class="hps">haciendo clic en el</span> <span class="hps">bookmarklet</span> <span class="hps">en</span> <span class="hps">la barra de herramientas</span><span>.</span></span></li> + <li><span id="result_box" lang="es"><span class="hps">Mueva el</span> <span class="alt-edited hps">puntero del ratón</span> <span class="alt-edited hps">por encima de su</span> <span class="alt-edited hps">documento para comprobar</span> <span class="hps">los</span> <span class="hps">elementos en el documento</span><span>.</span></span></li> +</ol> + +<h2 id="¿Y_ahora_qué"><span class="short_text" id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada y herencia") }}<span id="result_box" lang="es"><span class="alt-edited hps">Si tomaste</span> <span class="alt-edited hps">el reto</span><span class="alt-edited">, usted vera</span> <span class="hps">que</span> <span class="hps">la información de estilo</span> <span class="hps">interactúa</span> en </span><span id="result_box" lang="es"><span class="hps">más de un lugar, </span></span><span id="result_box" lang="es"><span class="hps">para crear el estilo</span> <span class="hps">final de </span><span class="hps">un elemento.</span> <span class="hps">La <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">siguiente página</a></span> <span class="hps">explica</span> <span class="hps">más acerca de estas</span> <span class="hps">interacciones.</span></span></p> diff --git a/files/es/web/css/introducción/index.html b/files/es/web/css/introducción/index.html new file mode 100644 index 0000000000..678ec25622 --- /dev/null +++ b/files/es/web/css/introducción/index.html @@ -0,0 +1,93 @@ +--- +title: Introducción +slug: Web/CSS/Introducción +tags: + - CSS + - 'CSS:Introducción' + - para_revisar +translation_of: Learn/CSS/First_steps +--- +<h2 id="Presentación"><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Presentación</span></span></h2> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Este tutorial es una introducción a las hojas de estilo en cascada (Cascading Style Sheets o CSS).</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Además, te guía a través de las características básicas de CSS con ejemplos prácticos que puedes probar por ti mismo en tu propio equipo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Está dividido en dos partes.</span></span></p> + +<ul> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La parte I ilustra las características estándar de CSS que funcionan en los navegadores Mozilla y también en la mayoría de los navegadores modernos.</span></span></li> +</ul> + +<ul> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La parte II contiene algunos ejemplos de características especiales que funcionan en Mozilla, pero no necesariamente en otros entornos.</span></span></li> +</ul> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El tutorial se basa en la <a class="external" href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">Especificación CSS 2.1</a> .</span></span></p> + +<h3 id="¿Quién_debe_usar_este_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">¿Quién debe usar este tutorial?</span></span></h3> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Este tutorial es sobre todo para los principiantes en CSS, pero también lo puedes usar si tienes alguna experiencia en CSS.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si eres principiante en CSS, usa la parte I de este tutorial para entender CSS y aprender a usarlo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">A continuación, utiliza la parte II para comprender el ámbito de aplicación de CSS en Mozilla.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si sabes algo de CSS, puede omitir las partes de la guía de aprendizaje que ya conoces y sólo utilizar las partes que te interesen.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si tienes experiencia en CSS, pero no en Mozilla, puedes saltar a la parte II.</span></span></p> + +<h3 id="¿Qué_se_necesita_antes_de_empezar"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">¿Qué se necesita antes de empezar?</span></span></h3> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para aprovechar al máximo este tutorial, necesitas un editor para archivos de texto y un navegador Mozilla (Firefox o Mozilla Suite).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">También debes saber cómo utilizarlos de forma básica.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no deseas editar los archivos, entonces puedes leer el tutorial y ver las fotos, pero es una forma menos eficaz de aprender.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Algunas partes del tutorial, que son opcionales, requieren otro software de Mozilla.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no quieres descargar otros software de Mozilla, entonces puedes saltártelas.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El otro software de Mozilla al que hace referencia este tutorial incluye:</span></span></p> + +<ul> + <li><a href="/en/DOM_Inspector" title="en/Dom inspector"><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Inspector DOM</span></span></a></li> +</ul> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota:</strong> CSS ofrece distintas maneras de trabajar con el color, por lo que las partes de este tutorial dependen de él.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Sólo puedes utilizar estas partes del tutorial fácilmente si dispones de una pantalla en color y de visión del color normal.</span></span></p> + +<h3 id="Cómo_utilizar_este_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Cómo utilizar este tutorial</span></span></h3> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para utilizar este tutorial, lee las páginas con atención y en orden.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si se te pasa una página, tal vez te resulte difícil de entender las páginas siguientes.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En cada página, utiliza la sección de <em>Información</em> para entender cómo funciona CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Usa la sección <em>Acción</em> para tratar de usar CSS en tu propio equipo.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para controlar que has comprendido los contenidos, acepta el reto al final de cada página.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las soluciones a los retos están enlazadas debajo de los retos, por lo que no es necesario verlos si no quieres.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para entender CSS en mayor profundidad, lee la información que se encuentra en las cajas con el título <em>Más detalles.</em></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Utiliza los enlaces que hay para encontrar información de referencia acerca de CSS.</span></span></p> + +<h2 id="Parte_I_del_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Parte I del tutorial </span></span></h2> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una guía paso a paso básica para CSS.</span></span></p> + +<ol> + <li><strong><a href="/es/docs/Web/CSS/Como_iniciar/Que_es_CSS" title="es/docs/Web/CSS/Como iniciar/Que es CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Qué es CSS</span></span></a></strong></li> + <li><strong><a href="/es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS" title="es/docs/Web/CSS/Como iniciar/Por que usar CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Por qué usar CSS</span></span></a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting Started/How CSS works"><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cómo funciona CSS</span></span></a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting Started/Cascading and inheritance"><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Cascada y herencia</span></span></a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting Started/Selectors"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Selectores</span></span></a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting Started/Readable CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">CSS legibles </span></span></a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting Started/Text styles"><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Estilos de texto</span></span></a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Color</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting Started/Content"><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-99 goog-gtc-translatable" dir="ltr">Contenido</span></span></a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting Started/Lists"><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Listas</span></span></a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting Started/Boxes"><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Cajas</span></span></a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting Started/Layout"><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Diseño</span></span></a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting Started/Tables"><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Tablas</span></span></a></strong></li> + <li><strong><a href="/es/docs/Web/CSS/Introducción/Media" title="es/docs/Web/CSS/Introducción/Media"><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Multimedia</span></span></a></strong></li> +</ol> + +<h2 id="Parte_II_del_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Parte II del tutorial</span></span></h2> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Ejemplos que muestran el ámbito de aplicación de CSS en Mozilla.</span></span></p> + +<ol> + <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting Started/JavaScript"><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">JavaScript</span></span></a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting Started/XBL bindings"><span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Enlaces XBL</span></span></a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting Started/XUL user interfaces"><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Interfaces de usuario XUL</span></span></a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting Started/SVG graphics"><span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Gráficos SVG</span></span></a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting Started/XML data"><span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Datos XML</span></span></a></strong></li> +</ol> + +<p>{{ languages( { "en": "en/CSS/Getting_Started", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p> diff --git a/files/es/web/css/introducción/layout/index.html b/files/es/web/css/introducción/layout/index.html new file mode 100644 index 0000000000..31a86194bf --- /dev/null +++ b/files/es/web/css/introducción/layout/index.html @@ -0,0 +1,383 @@ +--- +title: Layout +slug: Web/CSS/Introducción/Layout +translation_of: Learn/CSS/CSS_layout +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")}}Esta es la 12ª sección del tutorial CSS Getting Started; Describe algunas maneras de ajustar el diseño de su documento. Cambia el diseño de su documento de ejemplo.</p> + +<h2 class="clearLeft" id="Informacion_Layout">Informacion: Layout</h2> + +<p>Puede utilizar CSS para especificar varios efectos visuales que cambian el diseño de su documento. Algunas de las técnicas para especificar el diseño son avanzadas, y más allá del alcance de este tutorial básico.</p> + +<p>Cuando diseña un diseño para que se vea similar en muchos navegadores, su hoja de estilo interactúa con la hoja de estilo y el motor de diseño predeterminados del navegador de formas que pueden ser complejas. Este es también un tema avanzado, más allá del alcance de este tutorial básico.</p> + +<p>Esta página describe algunas técnicas sencillas que puedes probar.</p> + +<h3 id="Estructura_del_documento">Estructura del documento</h3> + +<p>Si desea controlar el diseño de su documento, es posible que deba cambiar su estructura.</p> + +<p>El lenguaje de marcado del documento puede tener etiquetas de propósito general para crear la estructura. Por ejemplo, en HTML puede utilizar el elemento {{HTMLElement ('div')}} para crear una estructura.</p> + +<div class="tuto_example"> +<div class="tuto_type"> +<p>Ejemplo</p> + +<p>En su documento de ejemplo, los párrafos numerados en el segundo encabezado no tienen un contenedor propio.</p> + +<p>Su hoja de estilo no puede dibujar un borde alrededor de esos párrafos, porque no hay ningún elemento que especificar en el selector.</p> + +<p>Para solucionar este problema estructural, puede agregar una etiqueta {{HTMLElement ('div')}} alrededor de los párrafos. Esta etiqueta es única, por lo que puede identificarse con un atributo id:</p> +</div> + +<pre class="brush:html;highlight:[2,8]"><h3>Numbered paragraphs</h3> +<div id="numbered"> + <p>Lorem ipsum</p> + <p>Dolor sit</p> + <p>Amet consectetuer</p> + <p>Magna aliquam</p> + <p>Autem veleum</p> +</div> +</pre> + +<p>Ahora su hoja de estilos puede utilizar una regla para especificar bordes alrededor de ambas listas:</p> + +<pre class="brush:css">ul, #numbered { + border: 1em solid #69b; + padding-right:1em; +} +</pre> + +<p> El resultado se ve así: </p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </div> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Unidades_de_tamaño">Unidades de tamaño</h3> + +<p>Hasta ahora en este tutorial, se han especificado tamaños en píxeles (px). Estos son apropiados para algunos propósitos en un dispositivo de visualización como una pantalla de computadora. Pero cuando el usuario cambia el tamaño de fuente, su diseño puede parecer incorrecto.</p> + +<p>Para muchos propósitos es mejor especificar tamaños como un porcentaje o en ems (em). Un em es nominalmente el tamaño de la fuente actual (el ancho de una letra m). Cuando el usuario cambia el tamaño de fuente, su diseño se ajusta automáticamente.</p> + +<div class="tuto_example"> +<div class="tuto_type"> +<p>Ejemplo</p> + +<p>El borde a la izquierda de este texto tiene su tamaño especificado en píxeles.</p> + +<p>El borde de la derecha tiene su tamaño especificado en ems.</p> + +<p>En su navegador, cambie el tamaño de la fuente para ver cómo se ajusta el borde de la derecha pero el borde de la izquierda no:</p> +</div> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <div style="">RESIZE ME PLEASE</div> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type"> +<p>Más detalles</p> + +<p>Para otros dispositivos, otras unidades de longitud son apropiadas.</p> + +<p>Hay más información sobre esto en una página posterior de este tutorial.</p> + +<p>Para obtener detalles completos de los valores y unidades que puede utilizar, consulte Valores en la especificación CSS.</p> +</div> +</div> + +<h3 id="Diseño_del_texto">Diseño del texto</h3> + +<p>Dos propiedades especifican cómo está alineado el contenido de un elemento. Puede usarlos para ajustes sencillos de diseño:</p> + +<p>{{Cssxref ('text-align')}}</p> + +<p><br> + Alinea el contenido. Utilice uno de estos valores: izquierda, derecha, centro, justificar<br> + {{Cssxref ('texto-sangría')}}<br> + Indente el contenido en una cantidad que especifique.</p> + +<p>Estas propiedades se aplican a cualquier contenido similar al texto del elemento, no sólo al texto real. Recuerde que son heredados por los hijos del elemento, por lo que es posible que tenga que desactivarlos explícitamente en los niños para evitar resultados sorprendentes.</p> + +<div class="tuto_example"> +<div class="tuto_type"> +<p>Ejemplo</p> + +<p>Para centrar los títulos:</p> +</div> + +<pre class="brush:css">h3 { + border-top: 1px solid gray; + text-align: center; +} +</pre> + +<p>Resultado:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> + </td> + </tr> + </tbody> +</table> + +<p>En un documento HTML, el contenido que ve debajo de un encabezado no está estructuralmente contenido por el encabezado. Así que cuando alineas un encabezado como este, las etiquetas debajo del encabezado no heredan el estilo.</p> +</div> + +<h3 id="Floats">Floats</h3> + +<p>La propiedad {{cssxref ('float')}} fuerza un elemento a la izquierda oa la derecha. Esta es una forma sencilla de controlar su posición y tamaño.</p> + +<p>El resto del contenido del documento fluye normalmente alrededor del elemento flotante. Puede controlar esto usando la propiedad {{cssxref ('clear')}} en otros elementos para hacerlos permanecer alejados de los flotadores.</p> + +<div class="tuto_example"> +<div class="tuto_type"> +<p>Ejemplo</p> + +<p>En el documento de ejemplo, las listas se extienden por la ventana. Puede evitarlo flotando hacia la izquierda.</p> + +<p>Para mantener los encabezados en su lugar, también debe especificar que se mantengan alejados de los flotadores a su izquierda:</p> +</div> + +<pre class="brush:css">ul, #numbered {float: left;} +h3 {clear: left;} +</pre> +</div> + +<p>El resultado sería:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </div> + </td> + </tr> + </tbody> +</table> + +<p>(Un poco de relleno es necesario a la derecha de las cajas, donde el borde es demasiado cerca del texto.)</p> + +<h3 id="Posicionamiento">Posicionamiento</h3> + +<p>Puede especificar la posición de un elemento de cuatro formas especificando la propiedad {{cssxref ('position')}} y uno de los siguientes valores.</p> + +<p>Estas son propiedades avanzadas. Es posible utilizarlos de manera sencilla, por eso se mencionan en este tutorial básico. Pero puede ser difícil usarlos para diseños complejos.</p> + +<p>relativo</p> + +<p><br> + La posición del elemento se desplaza en relación con su posición normal. Utilícelo para desplazar un elemento por una cantidad especificada. A veces se puede utilizar el margen del elemento para lograr el mismo efecto.<br> + fijo<br> + La posición del elemento es fija. Especifique la posición del elemento en relación con la ventana del documento. Incluso si el resto del documento se desplaza, el elemento permanece fijo.<br> + absoluto<br> + La posición del elemento es fija con relación a un elemento padre. Sólo un padre que está posicionado con relativo, fijo o absoluto hará. Puede hacer que cualquier elemento padre sea adecuado especificando position: relative; Para ello sin especificar ningún cambio.<br> + estático<br> + El valor por defecto. Utilice este valor si necesita desactivar la posición de forma explícita.</p> + +<p>Junto con estos valores de la propiedad de posición (a excepción de estática), especifique una o más de las propiedades: superior, derecha, inferior, izquierda, anchura, altura para identificar dónde desea que aparezca el elemento y tal vez también su tamaño.</p> + +<div class="tuto_example"> +<div class="tuto_type"> +<p>Ejemplo</p> + +<p>Para colocar dos elementos uno encima del otro, cree un contenedor principal en el documento con los dos elementos dentro de él:</p> +</div> + +<pre class="brush:html"><div id="parent-div"> + <p id="forward">/</p> + <p id="back">\</p> +</div> +</pre> + +<p>En su hoja de estilos, haga que la posición de los padres sea relativa. No hay necesidad de especificar ningún cambio real. Haga que la posición de los niños sea absoluta:</p> + +<pre class="brush:css">#parent-div { + position: relative; + font: bold 200% sans-serif; +} + +#forward, #back { + position: absolute; + margin:0px; /* no hay margenes alrededor del elemento */ + top: 0px; /* distancia desde la parte superior */ + left: 0px; /* distancia desde la izquierda */ +} + +#forward { + color: blue; +} + +#back { + color: red; +} +</pre> + +<p>El resultado se ve así, con la barra invertida en la parte superior de la barra inclinada:</p> + +<div style="position: relative; left: .33em; font: bold 300% sans-serif;"> +<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> + +<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> +</div> + +<table style="background-color: white; border: 2px outset #3366bb; height: 5em; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type"> +<p>Más detalles</p> + +<p>La historia completa sobre posicionamiento toma dos capítulos complejos en la Especificación CSS: Modelo de formato visual y detalles del modelo de formato Visual.</p> + +<p>Si está diseñando hojas de estilo para trabajar en muchos navegadores, también debe tener en cuenta las diferencias en la forma en que los navegadores interpretan el estándar y quizás errores en versiones concretas de navegadores particulares.</p> +</div> +</div> + +<h2 id="Action_Specifying_layout">Action: Specifying layout</h2> + +<ol> + <li>Cambie el documento de ejemplo, doc2. Html y hoja de estilo, style2. Css, utilizando los ejemplos anteriores en las secciones Estructura de documento y flotantes.</li> + <li>En el ejemplo Flotantes, agregue relleno para separar el texto del borde derecho por 0. 5 em.</li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type"> +<p>Cambios</p> + +<p>Cambie el documento de ejemplo, doc2. Html, agregando esta etiqueta a ella cerca del final, justo antes de &lt;/ body&gt;.</p> +</div> + +<pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> +</pre> + +<p>Si no descargó el archivo de imagen anteriormente en este tutorial, descárguelo ahora y colóquelo en el mismo directorio que los demás archivos de ejemplo:</p> + +<table style="border: 2px solid #cccccc;"> + <tbody> + <tr> + <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td> + </tr> + </tbody> +</table> + +<p>Predecir dónde aparecerá la imagen en el documento. A continuación, actualice su navegador para ver si estaba correcto.</p> + +<p>Agregue una regla a su hoja de estilos que coloque la imagen en la parte superior derecha de su documento.</p> + +<p>Actualiza tu navegador y haz que la ventana sea pequeña. Compruebe que la imagen permanece en la parte superior derecha incluso cuando se desplaza el documento:</p> + +<div style="position: relative; width: 29.5em; height: 18em;"> +<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + +<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> +<ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> +</ul> +</div> + +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + +<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> +<p><strong>1: </strong>Lorem ipsum</p> + +<p><strong>2: </strong>Dolor sit</p> + +<p><strong>3: </strong>Amet consectetuer</p> + +<p><strong>4: </strong>Magna aliquam</p> + +<p><strong>5: </strong>Autem veleum</p> +</div> + +<p style=""> </p> + +<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></div> +</div> +</div> +</div> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout"> See a solution to this challenge.</a></p> + +<h2 id="What_next">What next?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables") }}Usted acaba de cubrir todos los temas en este tutorial básico de CSS. La siguiente página describe selectores más avanzados para reglas CSS y algunas maneras específicas en las que puede diseñar tablas.</p> diff --git a/files/es/web/css/introducción/los_colon_estilos_de_texto/index.html b/files/es/web/css/introducción/los_colon_estilos_de_texto/index.html new file mode 100644 index 0000000000..676ea9caf9 --- /dev/null +++ b/files/es/web/css/introducción/los_colon_estilos_de_texto/index.html @@ -0,0 +1,155 @@ +--- +title: Los estilos de texto +slug: 'Web/CSS/Introducción/Los:estilos_de_texto' +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Esta es la sección séptima del</span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> tutorial</span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="es-es / docs / Web / guía / CSS / Primeros pasos"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS Introducción</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> ; </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">da más ejemplos de estilos de texto.</span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Usted modificara su hoja de estilo de ejemplo para utilizar diferentes fuentes.</span></font></font></p> + +<h2 class="clearLeft" id="Los_estilos_de_texto_Información"><span id="result_box" lang="es"><span class="hps">Los estilos de texto</span><span>: Información</span></span></h2> + +<p><span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">tiene varias propiedades</span> <span class="hps">de</span> </span><span id="result_box" lang="es"><span class="hps">estilo</span><span> de </span></span><span id="result_box" lang="es"><span class="hps">texto</span> <span>.</span></span></p> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Hay una propiedad abreviada conveniente, </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">la fuente</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> , que se puede utilizar para especificar varios aspectos a la vez, por ejemplo:</span></font></font></p> + +<ul style="margin: 0px 0px 24px; padding: 0px 0px 0px 40px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"> + <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Negrita, cursiva, y small-caps (versalita)</span></font></font></li> + <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El tamaño</span></font></font></li> + <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La altura de la línea</span></font></font></li> + <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El tipo de letra</span></font></font></li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type"> +<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div> + +<pre class="brush:css language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token selector" style="margin: 0px; padding: 0px; border: 0px; color: rgb(102, 153, 0);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">p </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">{ </span></font></font></span><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">fuente </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cursiva 75% / 125% </span></font></font><span class="token string" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">"Comic Sans MS"</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> , cursive </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">; </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">}</span></font></font></span></code></pre> +</div> + +<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">establece</span> varias <span class="hps">propiedades de la fuente</span><span class="alt-edited">, poniendo</span> <span class="hps">todos los párrafos</span> <span class="hps">en</span></span> italic.</p> + +<p><span id="result_box" lang="es"><span class="hps">El tamaño de fuente</span> <span class="hps">se establece en</span> <span class="hps">tres cuartas partes del</span> <span class="hps">tamaño</span> </span><span id="result_box" lang="es"><span class="hps">en </span><span class="hps">cada</span></span><span id="result_box" lang="es"> </span><span id="result_box" lang="es"><span class="hps">párrafo</span><span> </span></span><span id="result_box" lang="es"><span class="hps alt-edited">del elemento padre</span><span>,</span> <span class="hps">y</span> <span class="hps alt-edited">el</span> <span class="hps alt-edited">interlíneado</span> <span class="hps">se establece en</span> <span class="hps">125</span><span class="atn">% (</span><span>un poco más</span> <span class="hps">separados</span> <span class="hps">de lo normal)</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">tipo de letra</span> <span class="hps">se establece en</span> <span class="hps">Comic</span> <span class="hps">Sans</span> <span class="hps">MS</span><span>,</span> <span class="hps">pero si</span> <span class="hps">este tipo de letra</span> <span class="hps">no está disponible,</span> <span class="hps">el navegador</span> <span class="hps">utilizará</span> <span class="hps alt-edited">por</span> <span class="hps">defecto</span> <span class="hps">tipografía</span> <span class="hps">cursiva</span> <span class="hps">(</span></span>hand-written<span lang="es"><span>)</span><span>.</span></span></p> + +<p><span lang="es"><span class="hps">La</span> <span class="hps">regla tiene</span> <span class="hps alt-edited">el efecto colateral</span> <span class="hps alt-edited">de desactivar</span> <span class="hps alt-edited">las</span> <span class="hps alt-edited">versalitas</span> <span class="hps">y</span> <span class="hps alt-edited">negritas</span> <span class="hps atn">(</span><span>estableciendo su valor </span><span class="hps alt-edited">en normal)</span><span>:</span></span></p> +</div> + +<h3 id="Tipos_de_fuentes"><span id="result_box" lang="es"><span class="hps alt-edited">Tipos de fuentes</span></span></h3> + +<p><span id="result_box" lang="es"><span class="hps">No se puede predecir</span> <span class="hps">qué</span> tipografías </span><span id="result_box" lang="es"><span class="hps alt-edited">tienen</span><span> </span></span><span id="result_box" lang="es"><span class="hps alt-edited">los lectores de</span> nuestro <span class="hps">documento</span> <span>.</span> <span class="hps">Así que</span> <span class="hps alt-edited">cuando se especifica</span> <span class="hps alt-edited">llos tipos de fuentes </span><span class="hps alt-edited">de las </span><span class="hps alt-edited">letra</span><span>s</span><span>, es</span> <span class="hps">buena</span> <span class="hps alt-edited">idea darle</span> <span class="hps alt-edited">una lista alternativa</span> <span class="hps">en orden de preferencia</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps alt-edited">Finalice la</span> <span class="hps">lista</span> <span class="hps">con uno de los</span> <span class="hps alt-edited">las tipografías</span> por defecto<span class="hps alt-edited">:</span> </span><code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>.</p> + +<p><span lang="es"><span class="hps">Si el</span> <span class="hps">tipo de letra</span> <span class="hps alt-edited">no es compatible con</span> <span class="hps alt-edited">alguna de los caracteres</span> <span class="hps alt-edited">del documento</span><span>, el navegador</span> <span class="hps alt-edited">puede sustituirlos por</span> <span class="hps alt-edited">una tipografía</span> <span class="hps">diferente.</span> <span class="hps">Por ejemplo, el</span> <span class="hps">documento puede contener</span> <span class="hps">caracteres especiales que</span> </span><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">el tipo de letra no admite.</span><span lang="es"> <span class="hps">Si</span> <span class="hps">el navegador puede</span> <span class="hps">encontrar otro</span> <span class="hps alt-edited">tipografía que</span> <span class="hps">tiene esos</span> <span class="hps">caracteres</span><span>,</span> <span class="hps alt-edited">entonces usará</span> <span class="hps">otro</span> <span class="hps alt-edited">tipo de fuente</span></span></p> + +<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar un tipo de letra por sí misma, utilizar el </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-family</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad.</span></font></font></p> + +<h3 id="Los_tamaños_de_la_fuente"><span id="result_box" lang="es"><span title="Font sizes + +">Los tamaños de la fuente</span></span></h3> + +<p><span id="result_box" lang="es"><span title="Browser users can override the default font sizes or change the text size while they read a page, so it makes good sense for you to use relative sizes wherever you can. +">Los usuarios de navegadores pueden anular los tamaños de fuente por defecto o cambiar el tamaño del texto mientras leen una página, así que tiene buen sentido utilizar tamaños relativos donde se pueda.</span></span></p> + +<p><span id="result_box" lang="es"><span title="You can use some built-in values for font sizes, like small, medium and large.">Puede utilizar algunos valores incorporados para tamaños de fuentes, </span></span><code>like</code> <code>small</code>, <code>medium</code> and <code>large</code> (<span id="result_box" lang="es"><span title="You can use some built-in values for font sizes, like small, medium and large.">pequeñas, medianas y grandes)</span></span> . <span id="result_box" lang="es"><span title="You can also use values relative to the font size of the parent element, like: smaller, larger, 150% or 1.5em.">También puede utilizar valores relativos al tamaño de fuente del elemento padre, </span></span>l<code>ike</code><code>: smaller, larger, 150% or 1.5em</code>. ( <span id="result_box" lang="es"><span title="You can also use values relative to the font size of the parent element, like: smaller, larger, 150% or 1.5em.">más pequeño, más grande, 150% o 1.5em.)</span></span>. <span id="result_box" lang="es"><span title='An "em" is equivalent to the width of the letter "m" (for the font size of the parent element);'>Un "em" es equivalente a la anchura de la letra "m" (para el tamaño de fuente del elemento padre); </span><span title="thus 1.5em is one-and-a-half times the size of the font of the parent element. +">así 1.5em es una vez y media el tamaño de la fuente del elemento padre.</span></span></p> + +<p><span id="result_box" lang="es"><span title="If necessary you can specify an actual size, like: 14px (14 pixels) for a display device or 14pt (14 points) for a printer.">Si es necesario, puede especificar como tamaño actual, : 14px (14 píxeles) para un dispositivo de visualización o 14pt (14 puntos) para una impresora.</span></span><span lang="es"><span title="If necessary you can specify an actual size, like: 14px (14 pixels) for a display device or 14pt (14 points) for a printer."> Esto no es accesible para los usuarios con discapacidad visual, ya que no les permite cambiar el tamaño. Una estrategia más accesible es establecer un valor incorporado como mediano en un elemento en la parte superior del documento, y luego fijar tamaños relativos a todos los elementos descendientes.</span></span></p> + +<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar un tamaño de fuente por su cuenta, utilice el </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-size</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad.</span></font></font></p> + +<h3 id="Altura_de_línea">Altura de línea</h3> + +<p><span id="result_box" lang="es"><span class="hps alt-edited">El</span> <span class="hps alt-edited">interlíneado</span> <span class="hps">especifica el</span> <span class="hps">espacio entre líneas</span><span>.</span> <span class="hps">Si el documento tiene</span> <span class="hps">párrafos largos</span> <span class="hps">con</span> <span class="hps">muchas líneas</span><span>,</span> <span class="hps">una separación</span> <span class="hps">más grande de lo</span> <span class="hps">normal,</span> <span class="hps">hace que sea</span> <span class="hps">más fácil de leer</span><span>, especialmente si el</span> <span class="hps">tamaño de la letra</span> <span class="hps">es pequeña</span><span>.</span></span></p> + +<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar una altura de línea por su cuenta, utilice <code>la </code></span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">propiedad </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">line-height</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> .</span></font></font></p> + +<h3 id="Decoración">Decoración</h3> + +<p><span id="result_box" lang="es"><span class="hps alt-edited">La</span> <span class="hps">propiedad independiente </span></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">text-decoration</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><span lang="es"><span class="hps">puede</span> <span class="hps">especificar otros</span> <span class="hps">estilos,</span> <span class="hps">como el</span> <span class="hps">subrayado o</span> <span class="hps">tachado</span><span>.</span> <span class="hps">Usted</span> <span class="hps alt-edited">puede establecerlo en</span> <span class="hps">ninguno</span> ( </span><code>none</code> ) <span lang="es"> <span class="hps alt-edited">para eliminar</span> <span class="hps alt-edited">expresamente</span> <span class="hps">cualquier</span> <span class="hps">decoración.</span></span></p> + +<h3 id="Otras_propiedades">Otras propiedades</h3> + +<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar cursiva por su cuenta, use </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-style" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-style</span></font></font></code></a><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : italic;</span></font></font></code><br> + <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar audaz por su cuenta, use </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-weight</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : bold;</span></font></font></code><br> + <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar los pequeños capitales en su propio, el uso </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-variant</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : small-caps;</span></font></font></code></p> + +<p>Para desactivar o activar cualquiera de estos valores de forma individual, puede especificar su valor como <code>normal</code> <code>o inherit</code>.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mas detalles</div> + +<p><span id="result_box" lang="es"><span class="hps">Puede especificar</span> <span class="hps">estilos de texto</span> <span class="hps alt-edited">de diversas</span> <span class="hps alt-edited">maneras.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Por ejemplo</span><span>,</span> <span class="hps">algunas de las</span> <span class="hps">propiedades mencionadas</span> <span class="hps">aquí</span> <span class="hps">tienen</span> <span class="hps">otros valores</span> <span class="hps">que se pueden utilizar</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">una hoja de estilo</span> <span class="hps">compleja</span><span>,</span> <span class="hps alt-edited">evite utilizar</span> <span class="hps alt-edited">la propiedad </span></span><code>font</code> <code>shorthand</code><span lang="es"><span class="hps">,</span> <span class="hps">debido a sus</span> <span class="hps">efectos secundarios</span> <span class="hps">(resetean </span><span class="hps">otras propiedades</span> <span class="hps">individuales</span><span>)</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps alt-edited">Para obtener mas detalles de</span> <span class="hps">las propiedades</span> <span class="hps">que se relacionan con</span> <span class="hps">las fuentes, </span></span><span lang="es"><span class="hps">ver</span></span><span lang="es"><span class="hps"> las </span><span class="hps">especificación</span>es <span class="hps">CSS</span></span><span lang="es"> </span><span id="result_box" lang="es"><span class="hps">, </span></span><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a><span lang="es"><span class="hps">,</span><span>.</span> <span class="hps alt-edited">Si desea más detalles sobre</span> <span class="hps">la decoración de</span> <span class="hps">texto,</span> <span class="hps">ver</span> </span><a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text </a><span lang="es"><span class="hps">.</span></span></p> + +<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Si no quiere depender de los tipos de letra instalados en los sistemas de los usuarios, puede usar </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(244, 244, 244);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">@ font-face</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> para especificar una fuente en línea. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Sin embargo, esto requiere que los usuarios tengan un navegador que soporte esta regla.</span></font></font></p> +</div> + +<h2 id="Acción_Especificaciónes_de_las_fuentes"><span id="result_box" lang="es"><span>Acción:</span> <span class="hps">Especificaciónes de</span> <span class="hps">las fuentes</span></span></h2> + +<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para un simple documento, puede establecer la fuente del </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="El HTML <body> representa el contenido de un documento HTML. Sólo hay un elemento <body> en un documento."><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">elemento </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"><body></span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> y el resto del documento hereda la configuración.</span></font></font></p> + +<ol> + <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="hps">CSS</span><span>.</span></span></li> + <li><span id="result_box" lang="es"><span class="hps alt-edited">Agregue</span> <span class="hps">la siguiente regla</span> <span class="hps">para cambiar</span> <span class="hps">el tipo de letra</span> <span class="hps">en todo el documento</span><span>.</span> <span class="hps">La</span> <span class="hps">parte superior del archivo</span> <span class="hps">CSS</span> <span class="hps">es</span> <span class="hps alt-edited">el lugar lógico</span> <span class="hps alt-edited">para esto</span><span>, pero no tiene</span> <span class="hps alt-edited">los mismos efectos</span> <span class="hps">donde</span> <span class="hps alt-edited">usted lo ponga</span><span>:</span></span> + <pre class="eval language-html"><code class="language-html">body {font: 16px "Comic Sans MS", cursive;}</code></pre> + + <div class="line-number" style="top: 0px;"> </div> + </li> + <li><span id="result_box" lang="es"><span class="hps alt-edited">Añada</span> <span class="hps">un comentario</span> <span class="hps alt-edited">que explique</span> <span class="hps">la regla, y</span> <span class="hps alt-edited">agregue un espacio en blanco</span> <span class="hps alt-edited">para que coincida con</span> <span class="hps">su diseño</span> <span class="hps">preferido</span><span>.</span></span></li> + <li><span id="result_box" lang="es"><span class="hps">Guarde el archivo y</span> <span class="hps alt-edited">actualice el explorador</span> <span class="hps">para ver el efecto</span><span>.</span> <span class="hps">Si su sistema tiene</span> <span class="hps">Comic</span> <span class="hps">Sans</span> <span class="hps">MS</span><span>,</span> <span class="hps">u otra</span> <span class="hps">fuente cursiva</span> <span class="hps">que no</span> <span class="hps">soporta </span></span>italic<span lang="es"><span class="hps">,</span> <span class="hps">su navegador</span> eligira <span class="hps">un</span> <span class="hps">tipo de letra</span> <span class="hps">diferente para </span></span><span lang="es"><span class="hps alt-edited">la</span> <span class="hps alt-edited">primera línea</span></span><span lang="es"><span class="hps"> del</span> <span class="hps">texto en </span></span>italic<span lang="es"><span class="hps alt-edited">:</span></span> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Desde la barra de menú de su navegador, elija </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver> Tamaño del texto> Aumentar</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> (o </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver> Zoom> Acercar</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> ). </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">A pesar de que ha especificado 16 píxeles en el estilo, un usuario leer el documento se puede cambiar este tamaño.</span></font></font></li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Desafío</div> + +<p><span id="result_box" lang="es"><span class="hps">Sin modificar nada más</span><span>,</span> <span class="hps">hacer</span> <span class="hps">las seis</span> <span class="hps">letras iniciales</span> <span class="hps">dos veces el tamaño</span> <span class="hps">de</span> <span class="hps">letra serif</span> <span class="hps">por defecto del navegador</span><span>:</span></span></p> + +<table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>Add the following style declaration to the <code>strong</code> rule:</p> + +<pre class="brush: css"> font: 200% serif; +</pre> +If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden. + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles#tutochallenge" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-size: 12px; text-align: right; display: block; font-family: 'Open Sans', sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal;" title="Mostrar una posible solución para el desafío"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver una solución para el desafío.</span></font></font></a></div> + +<h2 id="¿Y_ahora_qué"><span id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2> + +<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El documento muestra ya utiliza varios colores con nombre. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="/ En-US / docs / Web / guía / CSS / Getting_Started / Color"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">siguiente sección</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> enumera los nombres de los colores estándar y se explica cómo se puede especificar otros </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">.</span></font></font></strong></p> + +<p> </p> diff --git a/files/es/web/css/introducción/media/index.html b/files/es/web/css/introducción/media/index.html new file mode 100644 index 0000000000..bb7bb0bd23 --- /dev/null +++ b/files/es/web/css/introducción/media/index.html @@ -0,0 +1,394 @@ +--- +title: Media +slug: Web/CSS/Introducción/Media +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +<p>{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables")}}</p> + +<p>Esta es la ultima sección de la primera parte del tutorial de <a href="/es/docs/Web/CSS/Introducción" title="es/docs/Web/CSS/Introducción">Introducción a CSS</a>. Muchas páginas de este tutorial se han enfocado en las propiedades y valores de CSS que especifican como mostrar un documento. Esta sección indaga otra vez en el propósito y la estructura de las hojas de estilo.</p> + +<h2 class="clearLeft" id="Información_Media">Información: Media</h2> + +<p>El propósito de CSS es especificar cómo los documentos son presentados al usuario. La presentación puede tener más de una forma.</p> + +<p>Por ejemplo, probablemente estes leyendo esta página en algún aparato doméstico (un celular, tu pc). Pero también podrías querer proyectarlo para una audiencia mas grande o imprimirlo. Estos medios pueden tener diferentes características. CSS te provee diferentes maneras de presentar un documento en distintos medios.</p> + +<p>Para especificar reglas para un medio en particular, usa {{CSSXref("@media")}} seguido por el tipo de medio, seguido por llaves que encierren las reglas.</p> + +<div class="tuto_example"> +<div class="tuto_type">Ejemplo</div> + +<p>Un documento en un web site tiene una barra de navegación que permite a los usuarios moverse en el sitio.</p> + +<p>En el lenguaje de marcado, el elemento padre de esta área tiene el <strong>id</strong> <code>nav-area</code>. (En {{HTMLVersionInline(5)}}, esto puede ser marcado con el elemento {{HTMLElement("nav")}} en vez de un {{HTMLElement("div")}} con un atributo <strong>id</strong>.)</p> + +<p>Cuando vas a imprimir el documento esa área de navegación no tiene ningún propósito, entonces con las hojas de estilo puedes removerlo completamente:</p> + +<pre class="brush:css">@media print { + #nav-area {display: none;} + } +</pre> +</div> + +<p>Algunos de los tipos de medios comunes son:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>screen</code></td> + <td>Pantalla de computadora</td> + </tr> + <tr> + <td><code>print</code></td> + <td>Medio paginado</td> + </tr> + <tr> + <td style="padding-right: 1em;"><code>projection</code></td> + <td>Pantalla proyectada</td> + </tr> + <tr> + <td><code>all</code></td> + <td>Todos (por defecto)</td> + </tr> + </tbody> +</table> + +<div class="tuto_details"> +<div class="tuto_type">Mas detalles</div> + +<p>Existen otras maneras de especificar un conjunto de reglas para los distintos medios.</p> + +<p>El lenguaje de marcado del documento puede permitir que el tipo de medio sea determinado cuando la hoja de estilo esta enlazada al documento. Por ejemplo, en HTML puedes especificar el tipo de medio con un atributo <code>media</code> en la etiqueta LINK.</p> + +<p>En CSS puedes usar {{CSSXref("@import")}} al inicio de la hoja de estilo para importar otra hoja de estilo de una URL, opcionalmente especificando el tipo de medio.</p> + +<p>Al usar estas técnicas puedes separar las reglas de estilo para los diferentes medios en distintos archivos. Esta es una manera útil de estructurar tus hojas de estilo.</p> + +<p>Para más detalles de los tipos de medio, ve <a href="http://www.w3.org/TR/CSS21/media.html">Media</a> en la especificación de CSS.</p> + +<p>Existen mas ejemplos de la propiedad {{cssxref("display")}} en una página posterior de este tutorial: <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en-US/docs/Web/Guide/CSS/Getting_Started/XML_data">XML data</a>.</p> +</div> + +<h3 id="Imprimir">Imprimir</h3> + +<p>CSS tiene algún soporte especifico para impresión y para medios páginados en general.</p> + +<p>Una regla {{cssxref("@page")}} puede determinar los márgenes de la página. Para impresión de doble cara, puedes definir los márgenes separadamente para <code>@page:left</code> y <code>@page:right</code>.</p> + +<p>Para medios impresios, normalmente usas unidades apropiadas de lonfigutd como pulgadas (<code>in</code>) y puntos (<code>pt</code> = 1/72 inch), o centimetros (<code>cm</code>) y milimetros (<code>mm</code>). Es igualmente apropiado usar ems (<code>em</code>) para conincidir el tamaño de la fuente, y porcentajes (<code>%</code>).</p> + +<p>Tu puedes controlar como los saltos de línea del contenido de un documento, al usar las propiedades {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} y{{cssxref("page-break-inside")}}.</p> + +<div class="tuto_example"> +<div class="tuto_type">Ejemplo</div> + +<p>Esta regla determina los márgenes a una pulgada en todos los lados:</p> + +<pre class="brush:css">@page {margin: 1in;} +</pre> + +<p>Esta regla asegura que cada elemento H1 empiece en una nueva página:</p> + +<pre class="brush:css">h1 {page-break-before: always;} +</pre> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Más detalles</div> + +<p>Para más detalles del soporte de CSS para medios paginados, ver <a href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> en la especificación de CSS.</p> + +<p>Como otras características de CSS, imprimir depende de tu navegador y su configuración. Por ejemplo, Mozilla te suple con unos márgenes por defecto, cabeceras y pies de página cuando imprimes. Cuando otros usuarios imprimen tu documento, probablemente no puedas predecir el navegador y la configuración usada, por lo que no podrás controlar los resutlados completamente.</p> +</div> + +<h3 id="Interfaces_de_Usuario">Interfaces de Usuario</h3> + +<p>CSS tiene algunas propiedades especificas para aparatos que soportanuna interfaz de usuario, como monitores. Esto hace que la apariencia del documento cambie dinámicamente mientras el usuario trabaja con la interfaz.</p> + +<p>No existe un tipo especial de medio para aparatos con interfaz de usuario.</p> + +<p>Si existen cinco selectores especiales:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Selector</strong></td> + <td><strong>Selects</strong></td> + </tr> + <tr> + <td><code>E{{cssxref(":hover")}}</code></td> + <td>Cualquier elemento E que tenga el puntero sobre él</td> + </tr> + <tr> + <td><code>E{{cssxref(":focus")}}</code></td> + <td>Cualquier elemento E que tenga el foco del teclado</td> + </tr> + <tr> + <td><code>E{{cssxref(":active")}}</code></td> + <td>Cualquier elemento E que este envuelto en la acción actual del usuario</td> + </tr> + <tr> + <td><code>E{{cssxref(":link")}}</code></td> + <td>Cualquier elemento E que es un hipervinculo a una URL no visitada por el usuario</td> + </tr> + <tr> + <td><code>E{{cssxref(":visited")}}</code></td> + <td>Cualquier elemento E que es un hipervinculo a una URL que el usuario ya visito</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota: </strong>La información que puede ser obtenida con el selector :visited esta restringida en {{gecko("2.0")}}. Ver <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector" title="en-US/docs/Web/Guide/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a> para más detalles.</p> +</div> + +<p>La propiedad {{cssxref("cursor")}} especifica la forma del puntero: Algunas de las formas comunes son las siguientes.</p> + +<p>Coloca el mouse sobre los items en este lista para ver la forma actual del puntero en tu navegador:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Selector</strong></td> + <td><strong>Selects</strong></td> + </tr> + <tr style="cursor: pointer;"> + <td><code>pointer</code></td> + <td>Indicating a link</td> + </tr> + <tr style="cursor: wait;"> + <td><code>wait</code></td> + <td>Indicating that the program cannot accept input</td> + </tr> + <tr style="cursor: progress;"> + <td><code>progress</code></td> + <td>Indicating that the program is working, but can still accept input</td> + </tr> + <tr style="cursor: default;"> + <td><code>default</code></td> + <td>The default (usually an arrow)</td> + </tr> + </tbody> +</table> + +<p>Una propiedad {{cssxref("outline")}} crea un contorno que a menudo es usado para indicar el foco del teclado. Sus valores son similares a la propiedad {{cssxref("border")}}, excepto que no puedes especificar lados individuales.</p> + +<p>Otras características de las interfaces de usuario son implementadas usando atributos. Por ejemplo, un elemento que esta deshabilitado o es de solo lectura tiene el atributo <strong>disabled</strong> o el atributo <strong>readonly</strong>. Selectores puede especificar estos atributos como cualquier otro, usando corchetes: <code>{{mediawiki.external('disabled')}}</code> o <code>{{mediawiki.external('readonly')}}</code>.</p> + +<div class="tuto_example"> +<div class="tuto_type">Ejemplo</div> + +<p>Estas reglas especifican estilos para un boton que cambia dinámicamente cuando el usuario interactúa con el:</p> + +<pre class="brush:css">.green-button { + background-color:#cec; + color:#black; + border:2px outset #cec; + } + +.green-button[disabled] { + background-color:#cdc; + color:#777; + } + +.green-button:active { + border-style: inset; + } +</pre> + +<p>Esta wiki no soporta una interfaz de usuario en la página, entonces estos botones no hacen "click". A continuación se presentan una imágenes estáticas para ilustrar la idea:</p> + +<table style="background-color: #fff; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <table> + <tbody> + <tr> + <td><span style="background-color: #cdc; border: 2px outset #cec; color: #777; cursor: default; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + <td><span style="background-color: #cec; border: 2px outset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + <td><span style="background-color: #cec; border: 2px inset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + </tr> + <tr style="line-height: 25%;"> + <td> </td> + </tr> + <tr style="font-style: italic;"> + <td>disabled</td> + <td>normal</td> + <td>active</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<p>Un botón completamente funcional también tiene un contorno oscuro alrededor cuando esta por defecto, y un contorno punteado en él cuando tiene el foco del teclado. También podría un efecto flotante (hover) cuando el puntero este sobre el.</p> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Más detalles</div> + +<p>Para más información sobre interfaces de usuario en CSS, ver <a href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> en la especificación de CSS.</p> + +<p>Existe un ejemplo del lenguaje de marcado usado por Mozilla para interfaces de usuario, XUL, en la Parte II de este tutorial.</p> +</div> + +<h2 id="Acción_Imprimir_un_documento">Acción: Imprimir un documento</h2> + +<ol> + <li>Abrir un nuevo documento HTML, <code>doc4.html</code>. Copiar y pegar el contenido de aqui: + + <pre class="brush:html"><!DOCTYPE html> +<html> + <head> + <title>Print sample</title> + <link rel="stylesheet" href="style4.css"> + </head> + <body> + <h1>Section A</h1> + <p>This is the first section...</p> + <h1>Section B</h1> + <p>This is the second section...</p> + <div id="print-head"> + Heading for paged media + </div> + <div id="print-foot"> + Page: + </div> +</body> +</html> +</pre> + </li> + <li>Abrir una nueva hoja de estilo, <code>style4.css</code>. Copiar y pegar el contenido de aqui: + <pre class="brush:css">/*** Print sample ***/ + +/* defaults for screen */ +#print-head, +#print-foot { + display: none; + } + +/* print only */ +@media print { + +h1 { + page-break-before: always; + padding-top: 2em; + } + +h1:first-child { + page-break-before: avoid; + counter-reset: page; + } + +#print-head { + display: block; + position: fixed; + top: 0pt; + left:0pt; + right: 0pt; + + font-size: 200%; + text-align: center; + } + +#print-foot { + display: block; + position: fixed; + bottom: 0pt; + right: 0pt; + + font-size: 200%; + } + +#print-foot:after { + content: counter(page); + counter-increment: page; + } + +} /* end print only */ +</pre> + </li> + <li>Ve este documento en tu navegador; este usa el estilo por defecto de tu navegador.</li> + <li>Imprime (o previsualiza) el documento; la hoja de estilo coloca cada sección en una página separada, y agrega una cabecera y un pie de página por cada una. Si tu navegador soporta contadores, le agregará un número de página al pie. + <table> + <tbody> + <tr> + <td> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 15em;"> + <tbody> + <tr> + <td> + <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div> + + <div style="font-size: 150%; font-weight: bold;">Section A</div> + + <div style="font-size: 75%;">This is the first section...</div> + + <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 15em;"> + <tbody> + <tr> + <td> + <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div> + + <div style="font-size: 150%; font-weight: bold;">Section B</div> + + <div style="font-size: 75%;">This is the second section...</div> + + <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </li> +</ol> + +<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em; width: 100%;"> + <caption>Retos</caption> + <tbody> + <tr> + <td>Mueve las relgas de estilo especificas para imprimir a un archivo CSS separado. + <p>Lee la página de referencia {{CSSXref("@import")}} para buscar detalles de como importar el nuevo archivo CSS especifico para imrpimir dentro de tu hoja de estilo style4.css.</p> + + <p>Haz que las encabezamientos se vuelvan azules cuando el puntero del mouse este sobre ellos.</p> + </td> + </tr> + </tbody> +</table> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Media" title="en-US/docs/Web/Guide/CSS/Getting_started/Challenge_solutions#Media">Ver soluciones a estos retos.</a></p> + +<h2 id="¿Qué_sigue">¿Qué sigue?</h2> + +<p>Si has tenido dificultades entendiendo esta página, o si tienes algún comentario, por favor contribuye en la página de <a href="/Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media">Discussion</a>.</p> + +<p>Hasta aquí, todas las reglas de estilo en este tutorial han estado en archivos especificos. Las reglas y sus valores son fijos. La siguiente página describe como cambiar las reglas dinámicamente al usar un lenguaje de programación: <strong><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript">JavaScript</a></strong></p> diff --git a/files/es/web/css/introducción/selectors/index.html b/files/es/web/css/introducción/selectors/index.html new file mode 100644 index 0000000000..5d63b82547 --- /dev/null +++ b/files/es/web/css/introducción/selectors/index.html @@ -0,0 +1,415 @@ +--- +title: Selectores +slug: Web/CSS/Introducción/Selectors +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="hps">es</span> <span class="hps">la sección</span> <span class="hps">quinta</span> <span class="hps">del</span> </span><span id="result_box" lang="es"><span class="hps">tutoria</span></span><span class="seoSummary"><a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> ;</span><span id="result_box" lang="es"><span class="hps">En él se explica</span> <span class="hps">cómo se puede aplicar</span> <span class="hps">estilos</span> <span class="hps">de forma selectiva</span><span>,</span> <span class="hps">y cómo</span> <span class="hps">los diferentes tipos de</span> <span class="hps">selectores</span> <span class="hps">tener diferentes</span> <span class="hps">prioridades.</span> <span class="hps">Agregar algunos</span> <span class="hps">atributos a</span> <span class="hps">las</span> <span class="hps">etiquetas</span> <span class="hps">en su</span> <span class="hps">documento de muestra</span><span>,</span> <span class="hps">y</span> <span class="hps">utiliza estos</span> <span class="hps">atributos en</span> <span class="hps">su hoja de estilos</span> <span class="hps">de muestra.</span></span></p> + +<h2 class="clearLeft" id="Información_Selectores"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Selectores</span></span></h2> + +<p><br> + <span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">tiene su propia terminología</span> <span class="hps">para describir el</span> <span class="hps">lenguaje CSS</span><span>.</span> <span class="hps">Anteriormente</span> <span class="hps">en este tutorial,</span> <span class="hps">que ha creado</span> <span class="hps">una línea en</span> <span class="hps">su hoja de estilos</span> <span class="hps alt-edited">como esta:</span></span></p> + +<pre class="brush: css">strong { + color: red; +} +</pre> + +<p><span id="result_box" lang="es"><span class="hps">En la terminología de</span> <span class="hps">CSS</span><span>,</span> <span class="hps">toda</span> <span class="hps">esta línea</span> <span class="hps">es una </span></span><em><code><strong>rule </strong></code>(</em><span id="result_box" lang="es"><span class="hps">regla).</span> <span class="hps">Esta regla</span> <span class="hps">comienza con</span> </span><strong><em><code>strong</code></em></strong><span lang="es"><span>, que es un</span> <span class="hps">selector.</span> <span class="hps alt-edited">Permite seleccionar</span> <span class="hps">qué elementos</span> <span class="hps">en el DOM</span> <span class="hps">se aplica la regla</span><span>.</span></span></p> + +<div class="tuto_details"> +<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div> + +<p><span id="result_box" lang="es"><span class="hps">La parte</span> <span class="hps">interior de las</span> <span class="hps">llaves</span> <span class="hps">es la declaración</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps"> L</span><span class="hps alt-edited">a palabra clave es </span></span><span id="result_box" lang="es"><code><em><span class="hps">color</span></em></code>, que </span><span id="result_box" lang="es"><span class="hps alt-edited">es</span> <span class="hps">una propiedad,</span> <span class="hps">y el <code><em>rojo </em></code>es</span> <span class="hps">el valor.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">El punto y coma</span> <span class="hps">después de el</span> <span class="hps">par</span> <span class="hps">propiedad</span><span class="atn">-</span><span>valor</span> <span class="hps">separa los posibles </span><span class="hps">otros pares de </span> <span class="hps">propiedad</span><span>-valor en</span> una <span class="hps">misma declaración.</span></span></p> + +<p> <span id="result_box" lang="es"><span class="hps">Este tutorial</span> <span class="hps">se refiere a</span> <span class="hps">un selector</span> <span class="hps">como</span> </span><em><strong><code>strong</code> </strong></em><span lang="es"><span class="hps">como un</span> <span class="hps">selector de etiquetas</span><span>.</span> <span class="hps">La</span> <span class="hps">especificación</span> <span class="hps">CSS</span> <span class="hps">se refiere a él como</span> <span class="hps">un selector de</span> <span class="hps">tipo <code><strong>(</strong></code></span></span><code><strong> type selector)</strong></code><span lang="es"><span>.</span></span></p> +</div> + +<p><span id="result_box" lang="es"><span class="hps alt-edited">En esta página</span> <span class="hps">del tutorial</span> <span class="hps alt-edited">se explica</span> <span class="hps">más acerca de los</span> <span class="hps">selectores</span> <span class="hps">que se pueden utilizar</span> <span class="hps">en</span> <span class="hps">las reglas CSS</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Además de añadir </span></span><span id="result_box" lang="es"><span class="hps">nombres a las e</span></span><span id="result_box" lang="es"><span class="hps">tiquetas</span> <span>, puede usar </span><span class="hps alt-edited">valores en los atributos</span> de <span class="hps">los selectores</span><span>.</span> <span class="hps">Esto permite que sus</span> <span class="hps">reglas sean</span> <span class="hps">más específicas.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Dos</span> <span class="hps">atributos tienen</span> <span class="hps">un estatus especial</span> <span class="hps">para</span> <span class="hps">CSS</span><span>.</span> <span class="hps">Son</span></span> <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> <code>e </code><a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p> + +<h3 id="Class_Selectores_de_clase">Class: <span id="result_box" lang="es"><span class="hps">Selectores de clase</span></span></h3> + +<p><span id="result_box" lang="es"><span class="hps">Utilice el</span> <span class="hps">atributo</span></span> <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> para <span id="result_box" lang="es"><span class="hps">asignarle a </span></span><span id="result_box" lang="es"><span class="hps">un elemento</span> un nombre de clase<code><strong><em> (class)</em></strong></code></span>. <span id="result_box" lang="es"><span class="hps">Depende de</span><span class="hps">l</span><span class="hps"> nombre que elijas</span> como <span class="hps"><code><strong><em>class</em></strong></code>.</span></span> <span id="result_box" lang="es"><span class="hps">Múltiples</span> <span class="hps">elementos en un documento</span> <span class="hps">pueden tener el mismo</span> <span class="hps">valor de la clase</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">su hoja de estilo</span><span>, escriba</span> <span class="hps atn">un punto (.</span><span>)</span> <span class="hps">antes del </span><span class="hps">nombre de la clase</span>,<span class="hps"> cuando</span> <span class="hps">se utiliza como </span><span class="hps">un selector.</span></span></p> + +<h3 id="Selectores_ID"><span id="result_box" lang="es"><span class="hps alt-edited">Selectores ID</span></span></h3> + +<p><span id="result_box" lang="es"><span class="hps">Utilice el atributo</span> <span class="hps">id en</span> <span class="hps">un elemento</span> <span class="hps">para asignar un</span> <span class="hps alt-edited">identificación para</span> ese <span class="hps">elemento</span><span>.</span> <span class="hps">Depende de</span> usted el <span class="hps">nombre que elija</span> <span class="hps">para el ID</span><span>.</span> <span class="hps">El nombre de</span> <span class="hps">ID</span> <span class="hps">debe ser único</span> <span class="hps">en el documento.</span></span><br> + </p> + +<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">su hoja de estilo</span><span>, escriba un</span> <span class="hps alt-edited">símbolo de almohadilla</span> <span class="hps atn">(</span><span class="alt-edited">#)</span> <span class="hps alt-edited">ante el</span> <span class="hps alt-edited">ID cuando</span> <span class="hps alt-edited">se utiliza esto en</span> <span class="hps">un selector.</span></span></p> + +<div class="tuto_example"> +<div class="tuto_type">Ejemplo</div> + +<p><span id="result_box" lang="es"><span class="hps">Esta etiqueta</span> <span class="hps">HTML</span> <span class="hps">tiene un</span> <span class="hps alt-edited">atributo <code>class</code></span><code> </code><span class="hps">y un atributo</span> <span class="hps"><code>id</code>:</span></span></p> + +<pre class="brush: html"><p class="key" id="principal"> +</pre> + +<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps alt-edited">valor de <code><em><strong>id </strong></em></code>es</span><span class="alt-edited">, <strong>principal</strong>,</span> <span class="hps">debe ser único</span> <span class="hps">en el documento;</span> <span class="hps">pero</span> <span class="hps">otras</span> <span class="hps">etiquetas del documento</span> <span class="hps">puede tener el mismo</span> <span class="hps alt-edited">nombre de la <strong><em><code>class</code></em></strong></span><span>,</span> <span class="hps alt-edited">Key.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">una hoja de estilo</span> <span class="hps">CSS</span><span>,</span> <span class="hps">esta regla</span> <span class="hps">hace que todos</span> <span class="hps">los elementos con la <code><em>class</em></code></span><code><em> </em></code><span class="hps"><code><em><strong>key </strong></em></code>sean verdes</span> <span>.</span> <span class="hps atn">(</span><span>Puede ser que no</span> <span class="hps">todos los sean</span> <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps">()</span><span>}</span> <span class="hps">"p"</span><span>}</span> <span class="hps">elementos.</span><span>)</span></span></p> + +<pre class="brush: css">.key { + color: green; +} +</pre> + +<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">hace que</span> <span class="hps">el </span></span><span id="result_box" lang="es"><span class="hps">único </span></span><span id="result_box" lang="es"><span class="hps"> </span></span><span id="result_box" lang="es"><span class="hps">elemento</span> </span><span id="result_box" lang="es"> <span class="hps alt-edited">de id </span></span><span id="result_box" lang="es"><code><strong><em><span class="hps alt-edited">principal</span></em></strong></code> este en <span class="hps">negrita:</span></span></p> + +<pre class="brush: css">#principal { + font-weight: bolder; +} +</pre> +</div> + +<p><span id="result_box" lang="es"><span class="hps">Si más de una</span> <span class="hps">regla se aplica a</span> <span class="hps">un elemento</span> <span class="hps">y especifica</span> <span class="hps">la misma propiedad,</span> <span class="hps alt-edited">entonces</span> <span class="hps alt-edited">el CSS</span> <span class="hps">da prioridad</span> <span class="hps">a la regla que</span> <span class="hps">tiene el</span> <span class="hps">selector más específico</span><span>.</span> <span class="hps">Un selector</span> <code><em><strong><span class="hps">ID</span> </strong></em></code><span class="hps">es más específico que</span> <span class="hps">un</span> <span class="hps alt-edited">selector de <em><strong><code>class</code></strong></em></span><span>,</span> <span class="hps">que a su vez</span> <span class="hps">es más específico que</span> <span class="hps">un</span> <span class="hps alt-edited">selector (<strong>tag</strong>) de etiquetas</span><span>.</span></span></p> + +<div class="tuto_details"> +<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div> + +<p><span id="result_box" lang="es"><span class="hps">También se pueden combinar</span> <span class="hps">selectores</span><span>, haciendo un</span> <span class="hps">selector más específico</span><span>.</span></span><br> + <br> + Por ejemplo, el selector <strong><em><code>.key</code></em></strong> selecciona <span id="result_box" lang="es"><span class="hps">todos los</span> <span class="hps">elementos que tienen</span> <code><em><strong><span class="hps">key</span> </strong></em></code>como <span class="hps alt-edited">nombre de clase (<strong><em><code>class</code></em></strong></span></span>). El selector <code><em><strong>p</strong></em>.key</code> <span id="result_box" lang="es"><span class="hps">selecciona</span> <span class="hps">sólo el elemento</span></span> {{ HTMLElement("p") }} que tiene de nombre <em><strong><code>key</code></strong></em>.</p> + +<p><span id="result_box" lang="es"><span class="hps">Usted no esta </span><span class="hps">limitado a los dos</span> <span class="hps">atributos especiales</span><span>, </span></span><em><strong><code>class</code> </strong></em><span lang="es"><span class="hps">e <em><code><strong>id</strong></code></em></span><span>.</span> Se p<span class="hps">uede especificar</span> <span class="hps">otros atributos</span> <span class="hps">mediante corchetes</span><span>.</span> <span class="hps">Por ejemplo</span><span>, el selector</span> <span class="hps atn">[</span></span><strong><em><code>type='button'</code></em></strong><span lang="es"><span>] selecciona</span> <span class="hps">todos los</span> <span class="hps">elementos que tienen</span> <span class="hps">un atributo de tipo</span> <span class="hps">con el </span> <span class="hps">valor </span></span><strong><em><code>button</code></em></strong><span lang="es"><span>.</span></span></p> +</div> + +<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">la hoja de estilo</span> <span class="hps">tiene reglas</span> <span class="hps">en conflicto</span> <span class="hps">y son</span> <span class="hps">igualmente específicas</span><span>, entonces</span> <span class="hps alt-edited">el CSS</span> <span class="hps">da</span> <span class="hps">prioridad a</span> <span class="hps alt-edited">la regla que</span> <span class="hps alt-edited">está</span> <span class="hps alt-edited">después en</span> <span class="hps">la hoja de estilos</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">usted tiene un problema</span> <span class="hps alt-edited">con las reglas</span> <span class="hps">en conflicto,</span> <span class="hps alt-edited">trate de resolverlo</span> <span class="hps">haciendo</span> <span class="hps">una de las</span> <span class="hps">normas más específicas</span><span>, para que</span> <span class="hps alt-edited">tenga </span><span class="hps">prioridad.</span> <span class="hps">Si usted no puede</span> <span class="hps">hacer esto</span><span>, trate de mover</span> <span class="hps">una de las reglas</span> mas <span class="hps alt-edited">cerca del</span> <span class="hps">final de</span> <span class="hps">la hoja de estilos</span> <span class="hps">para que tenga</span> la <span class="hps">prioridad.</span></span></p> + +<h3 id="Las_pseudo-clases_de_los_selectores"><span class="short_text" id="result_box" lang="es"><span class="hps atn">Las pseudo-</span><span>clases de</span> los <span class="hps">selectores </span></span></h3> + +<p><span id="result_box" lang="es"><span class="hps">Una</span> <span class="hps">pseudo-clase </span></span> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="en-US/docs/Web/Guide/CSS/Pseudo-classes">pseudo-class</a><span lang="es"> <span class="hps alt-edited">es en CSS</span> <span class="hps">una palabra clave</span> <span class="hps">añadida a</span> <span class="hps">los selectores,</span> <span class="hps">que especifica</span> <span class="hps">un estado especial</span> <span class="hps">del elemento</span> <span class="hps">a seleccionar.</span> <span class="hps">Por ejemplo</span> <span class="hps atn">{</span><span class="atn">{</span><span>Css</span> <span class="hps">Href</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>: hover</span><span>")}</span><span>}</span> <span class="hps">aplicará</span> <span class="hps">un estilo</span> <span class="hps">cuando el</span> <span class="hps">usuario se desplaza sobre</span> <span class="hps">el elemento especificado</span> <span class="hps alt-edited">mediante el selector</span></span>.</p> + +<p><span id="result_box" lang="es"><span class="hps">Las </span></span><code>Pseudo-classes</code><span lang="es"><span>,</span> <span class="hps">junto con</span> <span class="hps">los <code>pseudo-elements</code></span><span>,</span> <span class="hps">permiten aplicar</span> <span class="hps">un estilo</span> <span class="hps">a un elemento</span> <span class="hps">no sólo</span> <span class="hps">en relación con</span> <span class="hps">el contenido</span> <span class="hps">de</span> <span class="hps">la estructura del documento</span><span>,</span> <span class="hps">sino también en relación</span> <span class="hps">a los factores externos</span><span>, como</span> <span class="hps">la historia del</span> <span class="hps atn">navegador </span><span>por ejemplo:</span><span class="hps atn"> (</span><span class="atn">{</span><span class="atn">{</span><span>href</span> <span class="hps">css</span> <span class="hps atn">(</span><span class="hps atn">"</span><span class="hps">: visited</span> <span class="hps">")}</span><span>}</span><span>, )</span><span>,</span> <span class="hps">el estado de</span> <span class="hps">su contenido</span> <span class="hps">(como</span> <span class="hps atn">{</span><span class="atn">{</span><span>ref</span> <span class="hps">css</span> <span class="hps atn">(</span><span>"</span><span>: </span></span>:checked"<span lang="es"><span class="hps">)}</span><span>} en</span> <span class="hps">algunos</span> <span class="hps">elementos de formulario</span><span>)</span><span>,</span> <span class="hps">o</span> <span class="hps">la posición del</span> <span class="hps">ratón</span> <span class="hps">(como</span> <span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps">("</span></span>:hover<span lang="es"> <span class="hps">")}</span><span>}</span> <span class="hps">que le permite saber</span> <span class="hps">si</span> <span class="hps">el ratón está sobre</span> <span class="hps">un elemento o</span> <span class="hps">no).</span> <span class="hps">Para ver</span> <span class="hps">una lista completa de</span> <span class="hps">selectores</span><span>,</span> <span class="hps">visite</span> <span class="hps">especificación</span> <span class="hps">CSS3</span> <span class="hps">Selectores</span> <span class="hps">de trabajo </span></span> <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p> + +<div class="tuto_example"> +<div class="tuto_type"><span class="short_text" id="result_box" lang="es"><span class="hps">Sintaxis</span></span></div> + +<pre class="brush:css">selector:pseudo-class { + property: value; +} +</pre> +</div> + +<h4 id="Listado_de_pseudo-classes">Listado de pseudo-classes:</h4> + +<ul> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":visited") }}</li> + <li>{{ Cssxref(":active") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":last-child") }}</li> + <li>{{ Cssxref(":nth-child") }}</li> + <li>{{ Cssxref(":nth-last-child") }}</li> + <li>{{ Cssxref(":nth-of-type") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":disabled") }}</li> +</ul> + +<h2 id="Información_Los_selectores_basados_en_relaciones_(relationships)"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Los selectores</span> <span class="hps">basados en relaciones </span></span>(relationships)</h2> + +<p><span id="result_box" lang="es"><span class="hps alt-edited">El CSS</span> <span class="hps">tiene algunas</span> <span class="hps">formas de seleccionar</span> <span class="hps">elementos en función de</span> <span class="hps">las</span> <span class="hps">relaciones entre los elementos</span><span>.</span> <span class="hps">Usted</span> <span class="hps">puede utilizar estas para</span> <span class="hps">hacer</span> <span class="hps">selectores</span> <span class="hps alt-edited">que sean más específicos</span><span>.</span></span></p> + +<table id="relselectors"> + <caption><span class="short_text" id="result_box" lang="es"><span class="hps">Selectores</span> <span class="hps">comunes</span> <span class="hps alt-edited">basados en relaciones</span></span></caption> + <tbody> + <tr> + <td style="width: 10em;"><strong>Selector</strong></td> + <td><strong>Selects</strong></td> + </tr> + <tr> + <td><code>A E</code></td> + <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es un descendiente de</span> <span class="hps">un elemento</span> <span class="hps atn">A (</span><span>que</span> <span class="hps">es:</span> <span class="hps alt-edited">un hijo o</span> <span class="hps alt-edited">un hijo</span> <span class="hps alt-edited">de un hijo</span> <span class="hps">etc.</span><span>)</span></span></td> + </tr> + <tr> + <td><code>A > E</code></td> + <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es un hijo de</span> <span class="hps">un elemento A</span></span></td> + </tr> + <tr> + <td><code>E:first-child</code></td> + <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es el primer</span> <span class="hps">hijo de su padre</span></span></td> + </tr> + <tr> + <td><code>B + E</code></td> + <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es</span> <span class="hps">el siguiente hermano</span> <span class="hps">de un elemento</span> <span class="hps">B</span> <span class="hps">(es decir</span><span>:</span> <span class="hps">el</span> <span class="hps">próximo hijo</span> <span class="hps">del mismo</span> <span class="hps">padre)</span></span></td> + </tr> + </tbody> +</table> + +<p><span id="result_box" lang="es"><span class="hps">Usted</span> <span class="hps">puede combinarlas para</span> <span class="hps">expresar relaciones</span> <span class="hps">complejas</span><span>.</span><br> + <br> + <span class="hps">También puede utilizar</span> <span class="hps">el símbolo</span> <span class="hps">asterisco </span></span><span lang="es"> <span class="hps">(*</span><span>)</span> <span class="hps alt-edited">para significar</span> <span class="hps atn">"</span><span>cualquier elemento</span><span>"</span><span>.</span></span></p> + +<div class="tuto_example"> +<div class="tuto_type">Ejemplo</div> + +<p><span id="result_box" lang="es"><span class="hps">Una tabla HTML</span> <span class="hps">tiene</span> <span class="hps">un atributo <strong><em><code>id</code></em></strong></span><span>,</span> <span class="hps">pero sus</span> <span class="hps">filas y</span> <span class="hps alt-edited">las celdas</span> <span class="hps">no tienen</span> <span class="hps">identificadores individuales</span><span>:</span></span></p> + +<pre class="brush: html"><table id="data-table-1"> +... +<tr> +<td>Prefix</td> +<td>0001</td> +<td>default</td> +</tr> +... +</pre> + +<p><span id="result_box" lang="es"><span class="hps">Estas</span> <span class="hps">reglas hacen</span> <span class="hps">que la primera celda de</span> <span class="hps">cada fila</span> sea en <span class="hps">negrita,</span> <span class="hps">y</span> <span class="hps">la segunda celda</span> de <span class="hps">cada fila</span> en la familia de fuente <span class="hps"> monoespaciado</span><span>.</span> <span class="hps alt-edited">Esto</span> <span class="hps alt-edited">sólo afecta a</span> <span class="hps">una</span> <span class="hps alt-edited">tabla concreta</span> <span class="hps alt-edited">del documento:</span></span></p> + +<pre class="brush:css"> #data-table-1 td:first-child {font-weight: bolder;} + #data-table-1 td:first-child + td {font-family: monospace;} +</pre> + +<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p> + +<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table style="width: 18em; margin-right: 2em;"> + <tbody> + <tr> + <td><strong>Prefix</strong></td> + <td><code>0001</code></td> + <td>default</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div> + +<p><span id="result_box" lang="es"><span class="hps">La manera mas </span><span class="hps">habitual es hacer</span><span class="hps alt-edited"> que un</span> <span class="hps alt-edited">selector sea más específico</span><span>, entonces</span> aumentara <span class="hps">su prioridad.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Si utiliza</span> <span class="hps">estas técnicas</span><span>, se evita</span> <span class="hps">la necesidad de especificar</span> <span class="hps">la</span></span> <strong><em><code>class</code> </em></strong><span id="result_box" lang="es"><span class="hps">o</span> <span class="hps">atributos <strong><em><code>ID</code></em></strong></span></span><strong><em><code> </code></em></strong><span id="result_box" lang="es"><span class="hps alt-edited">en muchas</span> <span class="hps">etiquetas</span> <span class="hps alt-edited">del documento.</span> <span class="hps">En su lugar</span><span>, CSS</span> <span class="hps">hace este trabajo.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">En grandes</span> <span class="hps">diseños</span> <span class="hps">donde la velocidad es</span> <span class="hps">importante</span><span>,</span> <span class="hps">usted puede hacer sus</span> <span class="hps">hojas de estilo</span> <span class="hps">más eficiente</span> <span class="hps">evitando</span> <span class="hps">reglas complejas</span> <span class="hps">que dependen de</span> <span class="hps">relaciones entre los elementos</span><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Para más ejemplos</span> <span class="hps">sobre</span> <span class="hps">las tablas</span><span>,</span> <span class="hps">ver</span></span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> <span id="result_box" lang="es"><span class="hps">en</span> <span class="hps">la página</span> <span class="hps">CSS Reference</span><span>.</span></span></p> +</div> + +<h2 id="Action_Using_class_and_ID_selectors">Action: Using class and ID selectors</h2> + +<ol> + <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="hps">HTML</span><span>,</span> <span class="hps">y duplicar</span> <span class="hps">el</span> <span class="hps">párrafo</span> <span class="hps">copiando y</span> <span class="hps">pegando</span><span>.</span></span></li> + <li><span id="result_box" lang="es"><span class="hps">A continuación, agregue los atibutos </span></span> <strong>id</strong> y <strong>class</strong> <span id="result_box" lang="es"><span class="hps">a</span> <span class="hps">la primera copia</span><span>,</span> <span class="hps">y</span> <span class="hps">un atributopara</span> <span class="hps">la segunda copia</span> <span class="hps">como se muestra</span> <span class="hps">a continuación.</span> <span class="hps">Alternativamente</span><span>, copie</span> <span class="hps">y pegue el</span> <span class="hps">archivo entero</span> <span class="hps">de nuevo</span><span>:</span></span> + <pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p id="first"> + <strong class="carrot">C</strong>ascading + <strong class="spinach">S</strong>tyle + <strong class="spinach">S</strong>heets + </p> + <p id="second"> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li><span id="result_box" lang="es"><span class="hps">Ahora edite</span> <span class="hps">su archivo</span> <span class="hps">CSS</span><span>.</span> <span class="hps alt-edited">Reemplazar todo el contenido</span> <span class="hps">con</span><span>:</span></span> + <pre class="brush:css">strong { color: red; } +.carrot { color: orange; } +.spinach { color: green; } +#first { font-style: italic; } +</pre> + </li> + <li><span id="result_box" lang="es"><span class="hps">Guarde los archivos</span> <span class="hps">y</span> <span class="hps">actualizar el navegador</span> <span class="hps">para ver el resultado</span><span>:</span></span> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + + <p><span id="result_box" lang="es"><span class="hps alt-edited">Puede intentar</span> <span class="hps">reordenar las</span> <span class="hps">líneas</span> <span class="hps">en el archivo</span> <span class="hps">CSS</span> <span class="hps alt-edited">de mostrar</span> <span class="hps alt-edited">de que el orden</span> <span class="hps alt-edited">no efecta.</span></span></p> + + <p><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">selectores de <code>class</code></span></span><strong><em><code>.carrot</code></em></strong> and <em><strong><code>.spinach</code></strong></em> <span id="result_box" lang="es"><span class="hps">tienen prioridad sobre</span> <span class="hps">el selector de etiquetas</span></span> <em><strong><code>strong</code></strong></em>.</p> + + <p>El <strong><code><em>ID </em></code></strong>selector<code> #<em>first</em></code><em> </em><span id="result_box" lang="es"><span class="hps">tiene prioridad sobre</span> <span class="hps">los</span> <span class="hps">selectores de clase</span> <span class="hps">y</span> <span class="hps">etiqueta</span><span>.</span></span></p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type"><span class="short_text" id="result_box" lang="es"><span class="hps">Desafíos</span></span></div> + +<ol> + <li><span id="result_box" lang="es"><span class="hps">Sin cambiar</span> <span class="hps">su archivo</span> <span class="hps">HTML</span><span>,</span> <span class="hps alt-edited">agregue una sola</span> <span class="hps">regla para</span> <span class="hps">su archivo</span> <span class="hps">CSS</span> <span class="hps alt-edited">que mantenga</span> <span class="hps">todas las letras</span> <span class="hps">iniciales que</span> <span class="hps">mismo color que</span> <span class="hps">están ahora,</span> <span class="hps">pero</span> <span class="hps alt-edited">hace que</span> <span class="hps">todo el</span> <span class="hps">otro texto</span> <span class="hps">en el segundo párrafo</span> <span class="hps alt-edited">sea azul</span><span>:</span></span> + + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + <li><span id="result_box" lang="es"><span class="hps alt-edited">Ahora cambie</span> <span class="hps">la regla</span> <span class="hps">que acaba de agregar</span> <span class="hps atn">(</span><span>sin cambiar nada más</span><span>)</span><span>,</span> <span class="hps">para hacer</span> <span class="hps alt-edited">que el primer párrafo</span> <span class="hps alt-edited">sea azul</span> <span class="hps">también</span><span>:</span></span> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<ol> + <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below: + + <pre class="brush: css">#second { color: blue; } +</pre> + A more specific selector, <code>p#second</code> also works.</li> + <li>Change the selector of the new rule to be a tag selector using <code>p</code>: + <pre class="brush: css">p { color: blue; } +</pre> + </li> +</ol> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> + +<h2 id="Action_Using_pseudo-classes_selectors">Action: Using pseudo-classes selectors</h2> + +<ol> + <li><span class="short_text" id="result_box" lang="es"><span class="hps alt-edited">Cree un</span> <span class="hps alt-edited">HTML como el siguiente</span><span>:</span></span> + + <pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> + </body> +</html> +</pre> + </li> + <li><span id="result_box" lang="es"><span class="hps">Ahora edite</span> <span class="hps">su archivo</span> <span class="hps">CSS</span><span>.</span> <span class="hps alt-edited">Reemplace todo el contenido</span> <span class="hps">con</span><span>:</span></span> + <pre class="brush: css">a.homepage:link, a.homepage:visited { + padding: 1px 10px 1px 10px; + color: #fff; + background: #555; + border-radius: 3px; + border: 1px outset rgba(50,50,50,.5); + font-family: georgia, serif; + font-size: 14px; + font-style: italic; + text-decoration: none; +} + +a.homepage:hover, a.homepage:focus, a.homepage:active { + background-color: #666; +} +</pre> + </li> + <li><span id="result_box" lang="es"><span class="hps">Guarde los archivos</span> <span class="hps">y</span> <span class="hps alt-edited">actualice el explorador</span> <span class="hps">para ver el resultado</span> <span class="hps atn">(</span><span>poner</span> <span class="hps">el ratón sobre el</span> <span class="hps">siguiente enlace para ver</span> <span class="hps">el efecto</span><span>)</span><span>:</span></span> + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td> + </tr> + </tbody> + </table> + </li> +</ol> + +<h2 id="Acción_Uso_de_selectores_basados_en_las_relaciones_y_pseudo-clases"><span id="result_box" lang="es"><span class="hps">Acción</span><span>: Uso de</span> <span class="hps">selectores</span> <span class="hps">basados</span> <span class="hps">en las relaciones y</span> <span class="hps">pseudo-clases</span></span></h2> + +<p><span id="result_box" lang="es"><span class="hps">Con</span> <span class="hps">selectores</span> <span class="hps">basados</span> <span class="hps">en las relaciones y</span> <span class="hps">pseudo-clases</span> <span class="hps">puede crear</span> <span class="hps">algoritmos </span></span><span id="result_box" lang="es"><span class="hps">complejos</span></span><span id="result_box" lang="es"> en <span class="hps alt-edited">cascada</span> <span class="hps">.</span> <span class="hps">Esto es una técnica</span> <span class="hps">común que se utiliza</span><span>, por ejemplo,</span> <span class="hps">con el fin de</span> <span class="hps">crear menús</span> <span class="hps">desplegables</span> <span class="hps">en </span></span><span id="result_box" lang="es"><span class="hps">puro</span> </span><span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">(es decir</span> <span class="hps">sólo</span> <span class="hps">CSS,</span> <span class="hps">sin necesidad de utilizar</span></span> <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript</a>). <span id="result_box" lang="es"><span class="hps">La esencia</span> <span class="hps">de esta técnica es</span> <span class="hps">la creación de</span> <span class="hps">una regla como</span> <span class="hps">la siguiente</span><span>:</span></span></p> + +<pre class="brush: css">div.menu-bar ul ul { + display: none; +} + +div.menu-bar li:hover > ul { + display: block; +}</pre> + +<p><span id="result_box" lang="es"><span class="hps alt-edited">Aplicararemos a</span> <span class="hps">una estructura de</span> <span class="hps alt-edited">HTML como el siguiente</span><span>:</span></span></p> + +<pre class="brush: html"><div class="menu-bar"> + <ul> + <li> + <a href="example.html">Menu</a> + <ul> + <li> + <a href="example.html">Link</a> + </li> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + </ul> + </li> + </ul> +</div> +</pre> + +<p><span id="result_box" lang="es"><span class="hps">Vea nuestro</span> <span class="hps">ejemplo completo</span></span><a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> <span id="result_box" lang="es"><span class="hps">para una posible</span> referencia<span>.</span></span></p> + +<h2 id="¿Y_ahora_qué"><span id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2> + +<p><span id="result_box" lang="es"><span class="hps">Su</span> <span class="hps alt-edited">hoja de estilos</span> <span class="hps alt-edited">de muestra</span> <span class="hps">está empezando a parecer</span> <span class="hps alt-edited">densa</span> <span class="hps alt-edited">y complicada.</span> <span class="hps">La</span> <span class="hps">siguiente sección</span> <span class="hps">describe</span> <span class="hps">maneras de hacer</span> <span class="hps">CSS</span> <span class="hps">más fácil de leer</span><span>.</span> </span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a>.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p> diff --git a/files/es/web/css/isolation/index.html b/files/es/web/css/isolation/index.html new file mode 100644 index 0000000000..e4e6cf32d4 --- /dev/null +++ b/files/es/web/css/isolation/index.html @@ -0,0 +1,158 @@ +--- +title: Isolation +slug: Web/CSS/isolation +tags: + - CSS + - Composición CSS + - Propieiedad CSS +translation_of: Web/CSS/isolation +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>isolation</code></strong><code> define si el elemento debe crear un nuevo </code>{{glossary("stacking context")}}.</p> + +<p>Esto es especialmente útil en conjunto con {{cssxref("background-blend-mode")}} que solo mezclan fondos en un contexto de apilamiento determinado: permite aislar grupos de elementos de sus fondos más profundos y mezclar sus colores de fondo.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* Keyword values */ +isolation: auto; +isolation: isolate; + +/* Global values */ +isolation: inherit; +isolation: initial; +isolation: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Es un keyword que indica que un nuevo contexto de apilamiento debe ser creado solo si una de las propiedades aplicadas al elemento lo requiere.</dd> + <dt><code>isolate</code></dt> + <dd>Es un keyword que indica que un nuevo contexto de apilamiento debe ser creado.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><div id="b" class="a"> + <div id="d"> + <div class="a c">auto</div> + </div> + <div id="e"> + <div class="a c">isolate</div> + </div> +</div> +</pre> + +<pre class="brush: css">.a { + background-color: rgb(0,255,0); +} +#b { + width: 200px; + height: 210px; +} +.c { + width: 100px; + height: 100px; + border: 1px solid black; + padding: 2px; + mix-blend-mode: difference; +} +#d { + isolation: auto; +} +#e { + isolation: isolate; +}</pre> + +<p>{{ EmbedLiveSample('Examples', "230", "230") }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Compositing', '#isolation', 'Isolation') }}</td> + <td>{{ Spec2('Compositing') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td> + <p class="p1">{{CompatChrome(41.0)}}</p> + </td> + <td>{{CompatGeckoDesktop('36')}}</td> + <td>{{CompatNo()}}</td> + <td>30</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td> + <p class="p1">{{CompatChrome(41.0)}}</p> + </td> + <td>{{CompatGeckoMobile('36')}}</td> + <td>{{CompatNo()}}</td> + <td>36</td> + <td>8.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="También_puedes_ver">También puedes ver</h2> + +<ul> + <li>{{cssxref("<blend-mode>")}}</li> + <li>{{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}</li> +</ul> diff --git a/files/es/web/css/justify-content/index.html b/files/es/web/css/justify-content/index.html new file mode 100644 index 0000000000..56e6af1ff7 --- /dev/null +++ b/files/es/web/css/justify-content/index.html @@ -0,0 +1,222 @@ +--- +title: justify-content +slug: Web/CSS/justify-content +translation_of: Web/CSS/justify-content +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>justify-content</code></strong> define cómo el navegador distribuye el espacio entre y alrededor de los items flex, a lo largo del eje principal de su contenedor.</p> + +<p>El alineamiento se produce luego de que las longitudes y márgenes automáticos son aplicados, lo que significa que, si existe al menos un elemento flexible con {{cssxref("flex-grow")}} diferente a 0, no tendrá efecto ya que no habrá espacio disponible.</p> + +<div class="note"> +<p>No se debe asumir que esta propiedad sólo se aplicará a contenedores flex en el futuro y por lo tanto no ocultarla simplemente estableciendo otro valor para {{cssxref("display")}}. El CSSWG está trabajano para <a href="http://dev.w3.org/csswg/css3-align/#justify-content" title="http://dev.w3.org/csswg/css3-align/#justify-content">extender su uso a cualquier elemento en bloque</a>. La especificación preliminar se encuentra en una etapa muy temprana y aún no está implementada.</p> +</div> + +<div>{{cssinfo}}</div> + +<p>Véase <a href="/es/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a> para más propiedades e información.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* Alinear items flex desde el comienzo */ +justify-content: flex-start; + +/* Alinear items desde el final */ +justify-content: flex-end; + +/* Alinear items en el centro */ +justify-content: center; + +/* Distribuir items uniformemente +El primer item al inicio, el último al final */ +justify-content: space-between; + +/* Distribuir items uniformemente +Los items tienen el mismo espacio a su alrededor */ +justify-content: space-around; + +/* Valores globales */ +justify-content: inherit; +justify-content: initial; +justify-content: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>flex-start</code></dt> + <dd>Los items flex se colocan comenzando desde el <strong>comienzo principal</strong>. El margen del primer item es alineado al ras con el borde del comienzo principal de la línea y cada item siguiente es alineado al ras con el precedente.</dd> + <dt><code>flex-end</code></dt> + <dd>Los items flex se colocan comenzando desde el <strong>final principal</strong>. El margen del último item es alineado al ras con el borde del final principal de la línea y cada item precedente es alineado al ras con el siguiente.</dd> + <dt><code>center</code></dt> + <dd>Los items flex son colocados hacia el centro de la línea. Los items flex se alinean al ras entre sí y en torno al centro de la línea. El espacio entre el borde del comienzo principal de la línea y el primer item es el mismo que el espacio entre el borde del final principal y el último item de la línea.</dd> + <dt><code>space-between</code></dt> + <dd>Los items flex se distribuyen uniformemente sobre la línea. El espaciamiento se hace de tal manera que el espacio adyacente entre dos items es el mismo. El borde del comienzo principal y el borde del final principal se alinean al ras con el borde del primer y último item respectivamente.</dd> + <dt><code>space-around</code></dt> + <dd>Los items flex se alinean uniformemente de tal manera que el espacio entre dos items adyacentes es el mismo. El espacio vacío anterior al primer item y posterior al último item equivale a la mitad del espacio entre dos items adyacentes.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Contenido_HTML"><strong>Contenido HTML</strong></h3> + +<pre class="brush: html"><div id="container"> + <p>justify-content: flex-start</p> + <div id="flex-start"> + <div></div> + <div></div> + <div></div> + </div> + + <p>justify-content: flex-end</p> + <div id="flex-end"> + <div></div> + <div></div> + <div></div> + </div> + + <p>justify-content: center</p> + <div id="center"> + <div></div> + <div></div> + <div></div> + </div> + + <p>justify-content: space-between</p> + <div id="space-between"> + <div></div> + <div></div> + <div></div> + </div> + + <p>justify-content: space-around</p> + <div id="space-around"> + <div></div> + <div></div> + <div></div> + </div> +</div> +</pre> + +<h3 id="CSS"><strong>CSS</strong></h3> + +<pre class="brush: css">#container > div { + display: flex; + font-family: "Courier New", "Lucida Console", monospace; +} + +#container > div > div { + width: 50px; + height: 50px; + background: linear-gradient(-45deg, #788cff, #b4c8ff); +} + +#flex-start { + justify-content: flex-start; +} + +#center { + justify-content: center; +} + +#flex-end { + justify-content: flex-end; +} + +#space-between { + justify-content: space-between; +} + +#space-around { + justify-content: space-around; +} +</pre> + +<p>Resultados en:</p> + +<p>{{ EmbedLiveSample('Ejemplos', 600, 550) }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Especificación</th> + <th>Estado</th> + <th>Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#justify-content', 'justify-content')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soprte básico</td> + <td>{{CompatGeckoDesktop("18.0")}} (behind a pref) [1]<br> + {{CompatGeckoDesktop("20.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}</td> + <td>11</td> + <td>12.10</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soprte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>12.10</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox soporta sólo single-line flexbox hasta Firefox 28. Para activar soporte flexbox, para Firefox 18 y 19, el usuario debe cambiar la preferencia about:config "layout.css.flexbox.enabled" a <code>true</code>.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li> +</ul> diff --git a/files/es/web/css/layout_cookbook/index.html b/files/es/web/css/layout_cookbook/index.html new file mode 100644 index 0000000000..1b46384b51 --- /dev/null +++ b/files/es/web/css/layout_cookbook/index.html @@ -0,0 +1,77 @@ +--- +title: Libro de recetas de maquetación CSS +slug: Web/CSS/Layout_cookbook +translation_of: Web/CSS/Layout_cookbook +--- +<div>{{CSSRef}}</div> + +<p class="summary">El libro de recetas de maquetación CSS tiene como objetivo reunir recetas para patrones de diseño comunes, cosas que podrías necesitar para implementar en tus propios sitios. Además de proporcionar código que puedes utilizar como punto de partida en tus proyectos, estas recetas resaltan las diferentes formas en que se pueden utilizar las especificaciones de diseño y las opciones que puedes tomar como desarrollador.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si es nuevo en el diseño de CSS, es posible que primero quiera echar un vistazo a nuestro <a href="/en-US/docs/Learn/CSS/CSS_layout">módulo de aprendizaje de diseño CSS</a>, ya que esto le dará la base básica que necesita para hacer aquí uso de las recetas.</p> +</div> + +<h2 id="Las_recetas">Las recetas</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Receta</th> + <th scope="col">Descripción</th> + <th scope="col">Metodos de maquetación</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/docs/Web/CSS/Layout_cookbook/Media_objects">Objetos media</a></td> + <td>Una caja con dos-columnas con una imagen en un lado y texto descriptivo en el otro, por ejemplo, una entrada de facebook o un tweet.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, alternativa {{cssxref("float")}}, dimensionamiento {{cssxref("fit-content")}}</td> + </tr> + <tr> + <td><a href="/docs/Web/CSS/Layout_cookbook/Column_layouts">Columnas</a></td> + <td>Cuándo elegir el diseño de varias columnas, flexbox o grid para sus columnas.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Columns">Multicol</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> + </tr> + <tr> + <td><a href="/docs/Web/CSS/Layout_cookbook/Center_an_element">Centrar un elemento</a></td> + <td>Cómo centrar un elemento horizontal y verticalmente.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td> + </tr> + <tr> + <td><a href="/docs/Web/CSS/Layout_cookbook/Sticky_footers">Pies de página pegajosos</a></td> + <td>Creación de un pie de página que se coloca en la parte inferior del contenedor o en la ventana de visualización cuando el contenido es más corto.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> + </tr> + <tr> + <td><a href="/docs/Web/CSS/Layout_cookbook/Split_Navigation">Navegación dividida</a></td> + <td>Un patrón de navegación en el que algunos enlaces se separan visualmente de los demás.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td> + </tr> + <tr> + <td><a href="/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Navegación con migas de pan</a></td> + <td>Crear una lista de enlaces para permitir al visitante navegar de nuevo a través de la jerarquía de la página.</td> + <td> + <p><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></p> + </td> + </tr> + <tr> + <td><a href="/docs/Web/CSS/Layout_cookbook/List_group_with_badges">Lista de grupos con insignias</a></td> + <td>Una lista de elementos con una insignia para mostrar un conteo.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td> + </tr> + <tr> + <td><a href="/docs/Web/CSS/Layout_cookbook/Pagination">Paginación</a></td> + <td>Enlaces a páginas de contenido (como los resultados de búsqueda).</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Card">Tarjeta</a></td> + <td>Un componente de tarjeta, que se muestra en una rejilla de tarjetas.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a></td> + </tr> + </tbody> +</table> + +<h2 id="Aporta_con_una_receta">Aporta con una receta</h2> + +<p>Como con todo en MDN nos encantaría que contribuyeras con una receta en el mismo formato que los que se muestran arriba. <a href="/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe">Revisa esta página</a> para obtener una plantilla y pautas para escribir su propio ejemplo.</p> diff --git a/files/es/web/css/layout_mode/index.html b/files/es/web/css/layout_mode/index.html new file mode 100644 index 0000000000..5e671c9806 --- /dev/null +++ b/files/es/web/css/layout_mode/index.html @@ -0,0 +1,31 @@ +--- +title: Layout mode +slug: Web/CSS/Layout_mode +tags: + - CSS + - Layout + - Referencia +translation_of: Web/CSS/Layout_mode +--- +<div>{{cssref}}</div> + +<p>Un <strong>modo de diseño</strong> <a href="https://developer.mozilla.org/es/docs/Web/CSS">CSS</a>(CSS layout mode), a veces simplemente llamado "<em>layout</em>", es un algoritmo que determina la posición y tamaño de cajas basado en la forma en la que interactúan con sus (elementos) hermanos y padres. Hay varios de ellos:</p> + +<ul> + <li>El <em>block layout</em>, diseñado para presentar documentos. El block layout contiene características de documento-centrado, como la capacidad de <a href="https://developer.mozilla.org/es/docs/Web/CSS/float">flotar</a>(<em>float</em>) elementos o distribuirlos en <em><a href="https://developer.mozilla.org/es/docs/Columnas_con_CSS-3">múltiples columnas.</a></em></li> + <li>El <em>inline layout,</em> diseñado para presentar texto.</li> + <li>El <em>table layout</em>, diseñado para presentar tablas.</li> + <li>El <em>positioned layout</em>, diseñado para posicionar elementos sin demasiada interacción con otros elementos. </li> + <li>El <em><a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox">flexible box layout</a></em>, diseñado para presentar páginas complejas que pueden redimensionarse de forma fluida.</li> + <li>El <em><a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout">grid layout</a></em>, diseñado para presentar elementos relativos a una cuadrícula fija (fixed grid).</li> +</ul> + +<div class="note"> +<p><strong>Nota: </strong>No todas las <a href="https://developer.mozilla.org/es/docs/Web/CSS/Referencia_CSS">propiedades CSS</a> aplican a todos los <em><strong>modos de diseño</strong></em>. La mayoría de ellos aplican a uno o dos de ellos y no tienen efecto si se configuran en un elemento que es parte de otro modo de diseño.</p> +</div> + +<h2 id="Ver_También">Ver También</h2> + +<ul> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/es/web/css/left/index.html b/files/es/web/css/left/index.html new file mode 100644 index 0000000000..8a7912b86d --- /dev/null +++ b/files/es/web/css/left/index.html @@ -0,0 +1,144 @@ +--- +title: left +slug: Web/CSS/left +translation_of: Web/CSS/left +--- +<p>{{CSSRef}}</p> + + +<p>La propiedad <code>left</code> especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).</p> + +<p>Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("position") }}<code>: absolute</code> ó <code>position: fixed</code>), la propiedad left determina la distancia entre el margen izquierdo del elemento y el borde izquierdo de su bloque contenedor.</p> + +<div>{{EmbedInteractiveExample("pages/css/left.html")}}</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="eval notranslate">left: <length> | <percentage> | auto | inherit ; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>Una longitud, un valor negativo, cero, un valor positivo.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Un porcentaje del ancho del bloque contenedor.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">#wrap { + width: 700px; + margin: 0 auto; + background: #5C5C5C; +} + +pre { + white-space: pre; + white-space: pre-wrap; + white-space: pre-line; + word-wrap: break-word; +} + +#example_1 { + width: 200px; + height: 200px; + position: absolute; + left: 20px; + top: 20px; + background-color: #D8F5FF; +} + +#example_2 { + width: 200px; + height: 200px; + position: relative; + top: 0; + right: 0; + background-color: #C1FFDB; + +} +#example_3 { + width: 600px; + height: 400px; + position: relative; + top: 20px; + left: 20px; + background-color: #FFD7C2; +} + +#example_4 { + width:200px; + height:200px; + position:absolute; + bottom:10px; + right:20px; + background-color:#FFC7E4; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="wrap"> + <div id="example_1"> + <pre> + position: absolute; + left: 20px; + top: 20px; + </pre> + <p>The only containing element for this div is the main window, so it positions itself in relation to it.</p> + </div> + + <div id="example_2"> + <pre> + position: relative; + top: 0; + right: 0; + </pre> + <p>Relative position in relation to its siblings.</p> + </div> + + <div id="example_3"> + <pre> + float: right; + position: relative; + top: 20px; + left: 20px; + </pre> + <p>Relative to its sibling div above, but removed from flow of content.</p> + + <div id="example_4"> + <pre> + position: absolute; + bottom: 10px; + right: 20px; + </pre> + <p>Absolute position inside of a parent with relative position</p> + </div> + </div> +</div></pre> + +<p>{{EmbedLiveSample('Ejemplos',1200,650)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/Style/CSS/current-work#positioning">CSS 3</a></li> +</ul> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + + +<p>{{Compat("css.properties.left")}}</p> + + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}</li> +</ul> diff --git a/files/es/web/css/length/index.html b/files/es/web/css/length/index.html new file mode 100644 index 0000000000..1b66b63ef9 --- /dev/null +++ b/files/es/web/css/length/index.html @@ -0,0 +1,332 @@ +--- +title: <length> +slug: Web/CSS/length +tags: + - Referencia + - Tipo de Dato CSS +translation_of: Web/CSS/length +--- +<div>{{CSSRef}}</div> + +<h2 id="Sumario" name="Sumario">Resumen</h2> + +<p>El tipo de dato <a href="/es/docs/Web/CSS">CSS</a> <code><length></code> denota medidas de distancia. Es un valor {{cssxref("<number>")}} seguido por una unidad de longitud (<code>px</code>, <code>em</code>, <code>pc</code>, <code>in</code>, <code>mm</code>, …). Al igual que en cualquier dimensión CSS, no debe haber espacio entre la unidad y el número. La unidad de longitud es opcional después del valor {{cssxref("<number>")}} <code>0</code>.</p> + +<p>Muchas propiedades CSS (<a href="es/CSS_Reference">CSS properties</a>) reciben valores <code><length></code>, como por ejemplo {{ Cssxref("width") }}, {{ Cssxref("margin-top") }}, y {{ Cssxref("font-size") }}.</p> + +<p>Para algunas propiedades, el uso de longitudes negativas es un error de sintaxis, mientras que para algunas propiedades está permitido. Nótese que aunque los valores {{cssxref("<percentage>")}} también son dimensiones CSS y son aceptadas por algunas propiedades CSS que aceptan valores <code><length></code>, no son valores <code><length></code> en sí.</p> + +<h2 id="Interpolación">Interpolación</h2> + +<p>Los valores de tipo <code><length></code> pueden ser interpolados para permitir animaciones. En este caso son interpolados como números reales, de punto flotante. La interpolación sucede en el valor calculado. La velocidad de la interpolación es definida por la función {{cssxref("<timing-function>")}} asociada a la animación.</p> + +<h2 id="Unidades" name="Unidades">Unidades</h2> + +<h3 id="Unidades_de_longitud_relativa">Unidades de longitud relativa</h3> + +<h4 id="Longitudes_relativas_a_la_fuente">Longitudes relativas a la fuente</h4> + +<dl> + <dt><code>em</code></dt> + <dd>Esta unidad representa el tamaño calculado de fuente ({{Cssxref("font-size")}}) del elemento. Si se usa dentro de la propiedad {{Cssxref("font-size")}}, representa el tamaño de fuente <em>heredado</em> por el elemento. + <div class="note">Esta unidad se usa por lo general para crear interfaces escalables, que mantengan el <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm">ritmo vertical de la página</a>, aun cuando el usuario cambie el tamaño de las fuentes. Las propiedades CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} y {{cssxref("margin-top")}} generalemente tienen valores expresados en <strong>em</strong>.</div> + </dd> + <dt><code>ex</code></dt> + <dd>Esta unidad representa la <a href="https://es.wikipedia.org/wiki/Altura_de_la_x">altura de la x</a> de la fuente ({{Cssxref("font")}}) del elemento. En fuentes que incluyen la letra 'x', es generalmente la altura de letras minúsculas en la fuente; <code>1ex ≈ 0.5em </code>en muchas fuentes.</dd> + <dt id="ch"><code>ch</code></dt> + <dd>Esta unidad representa la anchura, o más precisamente, la medida de avance, del glifo '0' (cero, de caracter Unicode U+0030) en la fuente ({{Cssxref("font")}}) del elemento.</dd> + <dt id="rem"><code>rem</code></dt> + <dd>Esta unidad representa el tamaño ({{Cssxref("font-size")}}) del elemento raíz (p.ej. el tamaño de fuente del elemento {{HTMLElement("html")}}). Cuando se aplica a {{Cssxref("font-size")}} del elemento raíz, representa su valor inicial. + <div class="note">Esta unidad es práctica para crear interfaces perfectamente escalables. Si no es soportada por los navegadores, se puede recurrir a unidades <strong>em</strong>, aunque estas son ligeramente más complejas.</div> + </dd> +</dl> + +<h4 id="Longitudes_de_porcentaje_del_viewport">Longitudes de porcentaje del viewport</h4> + +<p>Las longitudes de porcentaje del viewport definen una longitud relativa al tamaño del viewport, que es la porción visible del documento. Solamente los navegadores basados en Gecko actualizan los valores del viewport dinámicamente, cuando el tamaño de éste es modificado (al cambiar el tamaño de la ventana en una computadora de escritorio, o al girar el dispositivo, en teléfonos y tablets).</p> + +<p>En conjunto con <code>overflow:auto</code>, el espacio tomado por barras de desplazamiento no es restado al tamaño del viewport, mientras en el caso de <code>overflow:scroll</code>, sí lo es.</p> + +<p>En un bloque de declaración de la regla-at {{cssxref("@page")}}, el uso de longitudes de viewport es inválido, y la declaración será desechada.</p> + +<dl> + <dt><code>vh</code></dt> + <dd>1/100 de la altura del viewport.</dd> + <dt><code>vw</code></dt> + <dd>1/100 de la anchura del viewport.</dd> + <dt><code>vmin</code></dt> + <dd>1/100 del valor mínimo entre la altura y anchura del viewport.</dd> + <dt><code>vmax</code></dt> + <dd>1/100 del valor máximo entre la altura y anchura del viewport.</dd> +</dl> + +<h3 id="Unidades_de_longitud_absoluta">Unidades de longitud absoluta</h3> + +<dl> +</dl> + +<p>Las unidades de longitud absoluta representan una medida física, y cuando las propiedades físicas del medio de salida son conocidas, como en diseño para impresión. Esto se hace anclando una de las unidades a una unidad física, y definiendo el resto con relación a ésta. La definición del ancla difiere entre dispositivos de baja resolución, como pantallas, y dispositivos de alta resolución, como impresoras.</p> + +<p>Para dispositivos de ppp bajo, la unidad <strong>px</strong> representa el <em>píxel de referencia</em> físico, y el resto son definidos con relación a éste. Así, <code>1in</code> es definido como <code>96px</code>, que equivalen a <code>72pt</code>. La consecuencia de esta definición es que en dichos dispositivos, las longitudes descritas en pulgadas (<code>in</code>), centrímetros (<code>cm</code>), milímetros (<code>mm</code>) no necesariamente conincidirán con la longitud de la unidad física del mismo nombre.</p> + +<p>Para dispositivos de alto ppp, las pulgadas (<code>in</code>), centrímetros (<code>cm</code>), milímetros (<code>mm</code>) son definidos como su contraparte física. De esta forma, la unidad <strong>px</strong> es definida con relación a ellas (1/96 de 1 pulgada).</p> + +<div class="note"> +<p>Los usuarios pueden incrementar el tamaño de fuente por razones de accesibilidad. Para permitir interfaces usables sin importar el tamao de fuente, use únicamente unidades de longitud absolutas cuando las características físicas del medio de salida son conocidas, como imágenes de mapa de bits. Al establecer longitudes relacionadas al tamaño de fuente, es preferible usar unidades relativas, como <code>em</code> o <code>rem</code>.</p> +</div> + +<dl> + <dt id="px"><code>px</code></dt> + <dd>Relativa al dispositivo de visualización.<br> + Para pantallas, generalmente es el tamaño de un píxel (punto) de la pantalla del dispositivo.<br> + Para <em>impresoras</em> y <em>pantallas de muy alta resolución</em>, un píxel CSS implica múltiples píxeles del dispositivo, de modo que el número de píxeles por pulgada se mantenga al rededor de 96.</dd> + <dt id="mm"><code>mm</code></dt> + <dd>Un milímetro.</dd> + <dt id="q"><code>q</code></dt> + <dd>Un cuarto de milímetro (1/40° de centímetro).</dd> + <dt id="cm"><code>cm</code></dt> + <dd>Un centímetro (10 milímetros).</dd> + <dt id="in"><code>in</code></dt> + <dd>Una pulgada (2.54 centímetros).</dd> + <dt id="pt"><code>pt</code></dt> + <dd>Un punto (1/72° de pulgada).</dd> + <dt id="pc"><code>pc</code></dt> + <dd>Una pica (12 puntos).</dd> + <dt id="mozmm"><code>mozmm</code> {{non-standard_inline}}</dt> + <dd>Una unidad experimental que intenta generar exactamente un milímetro, sin importar el tamaño de resolución de la pantalla. Esto raramente será lo que se desea, pero podría ser útil para dispositivos móviles, en particular.</dd> +</dl> + +<h2 id="Unidades_CSS_y_puntos_por_pulgada_(dots-per-inch)">Unidades CSS y puntos por pulgada (dots-per-inch)</h2> + +<p class="note">La unidad <code>in</code> no representa una pulgada física en pantalla, sino <code>96px</code>. Esto significa que sin importar la densidad de píxeles real en pantalla, se asume que serán <code>96ppp</code>. En dispositivos con mayor densidad de píxeles, <code>1in</code> será menor que una pulgada física. De forma similar, <code>mm</code>, <code>cm</code>, y <code>pt</code> no son longitudes absolutas.</p> + +<p>Algunos ejemplos específicos:</p> + +<ul> + <li><code>1in</code> siempre son <code>96px,</code></li> + <li><code>3pt</code> siempre son <code>4px</code>,</li> + <li><code>25.4mm</code> siempre son <code>96px.</code></li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Values', '#lengths', '<length>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Añadidos <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code> y <code>q</code></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '<length>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td><code>pt</code>, <code>pc</code>, <code>px</code> son definidos explícitamente (fueron definidos implícitamente en CSS1)</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#length-units', '<length>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}} </p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1</td> + <td>{{ CompatGeckoDesktop("1.0")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + <tr> + <td><code>ch</code></td> + <td> + <p>27</p> + </td> + <td>{{ CompatGeckoDesktop("1.0")}}<sup>[1]</sup></td> + <td>9.0</td> + <td>20.0</td> + <td>7.0</td> + </tr> + <tr> + <td>ex</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>4 (532.3)</td> + <td>{{ CompatGeckoDesktop("1.9.2")}}</td> + <td>9.0</td> + <td>11.6</td> + <td>4.1</td> + </tr> + <tr> + <td><code>vh, vw</code></td> + <td>20</td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>9.0</td> + <td>20.0</td> + <td>6.0</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td> + <p>20</p> + </td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>9.0<sup>[2]</sup></td> + <td>20.0</td> + <td>6.0</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>26</td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>{{CompatNo}}</td> + <td>20.0</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Longitudes de porcentaje del viewport inválidas en {{cssxref("@page")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("21")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>mozmm</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>1in</code> siempre es <code>96ppp</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>q</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("49.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>7.8</td> + <td>{{CompatUnknown}}</td> + <td>7.1.1</td> + </tr> + <tr> + <td>ex</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>12.0</td> + <td>4.0</td> + </tr> + <tr> + <td><code>vh, vw, vmin</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>6.0</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>1.5</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + <tr> + <td>Longitudes de porcentaje del viewport inválidas en {{cssxref("@page")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("21.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>q</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("49.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] En Gecko 1.0-1.9.0 (Firefox 1.0-3.0)<code> ch</code> era la anchura de 'M', y no funcionaba para las propiedades CSS {{CSSxref("border-width")}} y {{CSSxref("outline-width")}}.</p> + +<p>[2] Internet Explorer implementa esto con el nombre no estándar <code>vm</code>.</p> diff --git a/files/es/web/css/line-height/index.html b/files/es/web/css/line-height/index.html new file mode 100644 index 0000000000..4d5429ef2c --- /dev/null +++ b/files/es/web/css/line-height/index.html @@ -0,0 +1,125 @@ +--- +title: line-height +slug: Web/CSS/line-height +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías + - para_revisar + - páginas_a_traducir +translation_of: Web/CSS/line-height +--- +<pre class="syntaxbox"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">https://developer.mozilla.org/en-US/docs/Web/CSS</a>{{ CSSRef() }} +/*Keyword value*/ +line-height: normal; + +/</pre> + + + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>La propiedad <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <code>line-height</code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS"> </a>establece la altura de una casilla remarcada por líneas. Comúnmente se usa para establecer la distancia entre líneas de texto. A nivel de elementos de bloque, define la altura mínima de las casillas encuadradas por líneas dentro del elemento. En elementos en linea no reemplazables, especifica la altura que se usa para calcular la altura de la casila encuadrada por líneas.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("normal") }}</li> + <li>Aplicable a: todos los elementos.</li> + <li>{{ Cssxref("inheritance", "Valor heredado") }}: sí</li> + <li>Porcentajes: se refieren a tamaño de la fuente del elemento mismo.</li> + <li>Medio: {{ Xref_cssvisual() }}</li> + <li>{{ Cssxref("computed value", "Valor calculado") }}: para los valores <length> y <percentage>, el valor absoluto, en otro caso, como se especifica.</li> +</ul> + +<h2 id="Syntax">Syntax</h2> + + + +<pre><code>/* Keyword value */ +line-height: normal; + +/* Unitless values: usa esta cifra multiplicada por el tamaño de fuente +del elemento */ +line-height: 3.5; + +/* <longitud> valores */ +line-height: 3em; + +/* <porcentaje> valores */ +line-height: 34%; + +/* Valores absolutos */ +line-height: inherit; +line-height: initial; +line-height: unset;</code></pre> + + + +<h3 id="Sintaxis" name="Sintaxis">Valores</h3> + +<dl> + <dt><code>normal </code></dt> + <dd> + <p>Depende del agente del usuario. Los navegadores de escritorio (incluido Firefox) usan un valor por defecto de apenas <strong>1.2,</strong> dependiendo del <code>font-family</code> del elemento.</p> + </dd> + <dt><code><número> </code></dt> + <dd>El valor utilizado es este<code> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number"><número></a></code> sin unidades multiplicado por el propio tamaño de fuente del elemento. El valor calculado es el mismo que el <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number"><número></a></code> especificado. En la mayoría de los casos, esta es la forma preferida de establecer <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/line-height">line-height </a></code>y evitar resultados inesperados debido a la herencia.</dd> + <dt><code><longitud> </code></dt> + <dd>La <a href="https://developer.mozilla.org/es/docs/Web/CSS/length"><longitud> </a>especificada se utiliza en el cálculo de la altura de la casilla encuadrada por líneas. Los valores dados en unidades <code>em</code> pueden producir resultados inesperados (ver ejemplo más abajo).</dd> + <dt><code><porcentaje> </code></dt> + <dd>En relación con el tamaño de fuente del elemento en sí. El valor calculado es este <a href="https://developer.mozilla.org/es/docs/Web/CSS/porcentaje"><porcentaje></a> multiplicado por el tamaño de letra del elemento calculado. Los valores porcentuales pueden producir resultados inesperados (ver el segundo ejemplo a continuación).</dd> +</dl> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre><code>/* Todas las reglas debajo ofrecen la misma line-height resultante */ + +div { line-height: 1.2; font-size: 10pt; } /* número/unitless */ +div { line-height: 1.2em; font-size: 10pt; } /* longitud */ +div { line-height: 120%; font-size: 10pt; } /* porcentaje */ +div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif; } /* font shorthand */</code></pre> + +<p>A menudo es más conveniente establecer el <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/line-height">line-height </a></code> usando {{cssxref("font")}} abreviadamente, como se muestra arriba, pero esto también requiere especificar la propiedad <code>font-family</code>.</p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height">CSS 2.1</a></li> +</ul> + +<h3 id="Compatibilidad_de_navegadores" name="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>?</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("font-size") }}</p> diff --git a/files/es/web/css/linear-gradient()/index.html b/files/es/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..4a68a3b365 --- /dev/null +++ b/files/es/web/css/linear-gradient()/index.html @@ -0,0 +1,261 @@ +--- +title: linear-gradient +slug: Web/CSS/linear-gradient() +tags: + - CSS + - Función CSS + - Imágenes CSS + - Plantilla + - Referencia + - Web + - graficos +translation_of: Web/CSS/linear-gradient() +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La función CSS <code>linear-gradient()</code> crea una imágen la cual representa un degradado lineal de colores. El resultado es un objeto CSS de tipo {{cssxref("<gradient>")}}, que es una forma especial de {{cssxref("<image>")}}.</p> + +<p>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</p> + +<p>Cómo cualquier otro degradado, un degradado lineal no tiene<a href="/en/CSS/image#no_intrinsic"> dimensiones intrínsecas</a>; es decir, no tiene un tamaño natural o predefinido, ni una relación de aspecto. Su tamaño concreto se ajustará al del elemento al cual se le aplica.</p> + +<p>Los gradientes lineales están definidos por un eje, la <em>línea gradiente</em>, donde cada punto representa el inicio de un color diferente. Las líneas perpendiculares a la <em>línea gradiente</em> tienen un único color, para cada punto de la <em>línea gradiente</em>.</p> + +<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p> + +<p>La línea gradiente está definida por el centro de la caja que contiene la imagen gradiente y por un ángulo. El color del gradiente está definido por diferentes puntos; el punto de inicio, el punto de fin y, en el medio, puntos opcionales de cambio de color.</p> + +<p>El punto de inicio es el punto en la línea gradiente donde empieza el color. Está definido por la intersección entre la línea gradiente y su perpendicular, pasando por la esquina del contenedor en el mismo cuadrante.</p> + +<p>De forma similar, el punto de fin es el punto de la línea gradiente donde se alcanza el final del color. También está definido por la intersección entre la línea gradiente y la línea perpendicular generada por la esquina más cercana del contenedor, pero es más fácil encontrarla como la simetría del punto de inicio, cuando el punto de reflección coincide con el centro de la caja contenedora.</p> + +<p>Estas definiciones algo complejas de los puntos de inicio y fin nos llevan a una propiedad interesante llamda <em>magic corners</em> (esquinas mágicas): La esquina más cercana de los puntos de inicio y fin, tienen el mismo color que su respectivos puntos de inicio y fin.</p> + +<p>Se puede especificar más que solamente los colores de los puntos de inicio y fin. Definiendo colores adicionales en los puntos de cambio en la línea gradiente, el desarrollador web puede crear una transición más personalizada entre los colores de inicio y fin, o generar un gradiente de múltiples colores.</p> + +<p>La sintaxis de la función linear-gradient no permite la repetición de gradientes, pero usando puntos de cambio de color, se puede generar un efecto similar. Para una repetición de gradientes real, puede usar la propiedad CSS {{ Cssxref("repeating-linear-gradient") }}.</p> + +<p>When the position of a color-stop point is implicitly defined, it is placed half-way between the point that precedes it and the one that follows it. The position can also be explicitly defined by using a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} CSS data type.</p> + +<div class="note">Gradients are defined as CSS <code><image></code> data types. Therefore they can be used anywhere in CSS where an image data type is required. But, Gecko currently only supports CSS gradients as values of the {{ Cssxref("background-image") }} property, as well as within the shorthand {{ Cssxref("background") }}.<br> +For this reason, <code>linear-gradient</code> won't work on {{ Cssxref("background-color") }} and other properties requesting {{cssxref("<color>")}}.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox notranslate">Formal grammar: linear-gradient( [ <a href="/en-US/CSS/angle" title="angle"><angle></a> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) + \---------------------------------/ \----------------------------/ + Definition of the gradient line List of color stops + + where <code><side-or-corner> = [left | right] || [top | bottom]</code> + and <code><color-stop> = <color> [ <percentage> | <length> ]?</code> +</pre> + +<pre class="notranslate">linear-gradient( 45deg, blue, red ); /* A gradient on 45deg axis starting blue and finishing red */ +linear-gradient( to left top, blue, red); /* A gradient going from the bottom right to the top left starting blue and + finishing red */ + +linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40% + and finishing red */ +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><side-or-corner></code></dt> + <dd>Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, <code>left</code> or <code>right</code>, and the second one the vertical side, <code>top</code> or <code>bottom</code>. The order is not relevant and each of the keyword is optional.<br> + The values <code>to top</code>, <code>to bottom</code>, <code>to left</code> and <code>to right</code> are translated into the angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <code><color-stop></code> will exactly apply to the corner point. This is sometimes called the "<em>magic corner</em>" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.</dd> + <dt><code><angle></code></dt> + <dd>An angle of direction for the gradient. See {{ cssxref("<angle>") }}.</dd> + <dt><code><color-stop></code></dt> + <dd>This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage or a {{cssxref("<length>")}} along the gradient axis).<br> + Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.</dd> +</dl> + +<h3 id="History_of_the_syntax">History of the syntax</h3> + +<p>The syntax of <code>linear-gradient</code> has evolved since the <a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/" title="http://www.webkit.org/blog/175/introducing-css-gradients/">first Apple proposal</a> implemented in 2008:</p> + +<pre class="notranslate"><code>-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)</code> +</pre> + +<p>In the original syntax, the same function was used to create both linear and radial gradients. However, the parameters needed in each case were different, resulting in a syntax that varied with the value of the first parameter. The situation became more complicated if other types of gradients, like conical gradients, were added, requiring the use of functions and non-standard or inconsistent css value specifications. No draft was proposed to the W3C.</p> + +<p>An alternative syntax was proposed and implemented by Mozilla in 2009. In this syntax, two CSS functions would be required; one for linear gradients, and the other for radial gradients. However, this syntax never shipped in a released product. A third syntax was proposed. This third syntax simplified the syntax for linear gradients to:</p> + +<pre class="notranslate">-moz-linear-gradient(<code>[ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> +</pre> + +<p>The new syntax did not require the <code>to()</code>, <code>from()</code>and <code>color-stop()</code> functions, so they were dropped. The order of the <code>top</code>/<code>bottom</code> and <code>left</code>/<code>right</code> keywords was also recognized as unimportant, so Mozilla removed the constraint of having <code>top</code>/<code>bottom</code> defined first. </p> + +<p>But the new syntax had still had one drawback: it allowed only vertical and horizontal gradients. Finally, the syntax below was proposed to the W3C. Following two more changes to solve the limitation on the direction of gradients, it was added to the CSS Images Values and Content Replacement Level 3 draft in 2011.</p> + +<ul> + <li>The support of an {{ cssxref("<angle>") }} as an origin, allowing gradients of any direction.</li> + <li>The definition of the magic corner algorithm which eases the work of Web developers by allowing an easy definition of the exact color at the corners.</li> +</ul> + +<p>The color interpolation is also defined as happening in the pre-multiplied color space, in order to prevent non esthetic grey to appear when using color with different opacity. This syntax was implemented, prefixed, by both Webkit, without dropping the original one, and Trident (IE 10):</p> + +<pre class="notranslate">linear-gradient(<code> [ </code>[ {{cssxref("<angle>")}} | <code>[top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> +</pre> + +<p>Unfortunately, the addition of the {{ cssxref("<angle>") }} values to the syntax introduced an incoherence: the angle indicates a destination, but the keywords indicate a starting point.<a class="external" href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html" title="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html"># </a>This was fixed by a new syntax where the keyword are directions too, and preceded by the <code>to</code> keyword.</p> + +<pre class="notranslate">linear-gradient(<code>[ [ </code>[ {{cssxref("<angle>")}} | to <code>[top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> +</pre> + +<p>This should be the final syntax.</p> + +<p>A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an {{ cssxref("<angle>") }} defined like polar angles, that is with <code>0deg</code> representing the East. To be coherent with the rest of CSS, the specification defines an angle with <code>0deg</code> representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (<code>0deg</code> = East<code>)</code>. They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the <code>to</code> keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Gradient_at_a_45_degree_angle">Gradient at a 45 degree angle</h3> + +<p>Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.</p> + +<p><img alt="lingradexample.png" class="default internal" src="/files/2843/lingradexample.png" style="height: 329px; width: 453px;"></p> + +<h3 id="Gradient_with_multiple_color_stops">Gradient with multiple color stops</h3> + +<p>If the first color-stop does not have a <code><length></code> or <code><percentage></code>, it defaults to 0%. If the last color-stop does not have a <code><length></code> or <code><percentage></code>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.</p> + +<p>Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.</p> + +<div>A rainbow made from a gradient</div> + +<pre class="notranslate">background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); +</pre> + +<h3 id="Repeating_a_linear_gradient">Repeating a linear gradient</h3> + +<p>The <code>linear-gradient</code> does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("repeating-linear-gradient") }}.</p> + +<h3 id="Using_transparency">Using transparency</h3> + +<div>Linear with transparency</div> + +<pre class="notranslate">background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));</pre> + +<p>Gradient backgrounds are not affected by {{ Cssxref("background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of <code>background-size</code>).</p> + +<h2 id="Notes">Notes</h2> + +<p>If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a <code>linear-gradient</code>, the gradient <a class="external" href="http://richard.milewski.org/archives/1014" title="http://richard.milewski.org/archives/1014">won't fill the browser screen unless </a>you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Images', '#linear-gradient-type', 'linear-gradient()') }}</td> + <td>{{ Spec2('CSS3 Images') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera (Presto)</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support(on {{ cssxref("background") }} and {{ cssxref("background-image") }})</td> + <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}<sup><a href="#bc3">[3]</a></sup><br> + {{ CompatGeckoDesktop("16") }}</td> + <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td> + <td>10.0 <sup><a href="#bc1">[1]</a></sup></td> + <td>11.10{{ property_prefix("-o") }} <sup><a href="#bc3">[3]</a></sup></td> + <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td> + </tr> + <tr> + <td>On any properties that accept {{cssxref("<image>")}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Legacy webkit syntax</a>{{ non-standard_inline() }}</td> + <td>{{ CompatNo() }}</td> + <td>3{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>4.0{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup></td> + </tr> + <tr> + <td>Legacy <em>from </em>syntax (without <code>to</code>){{ non-standard_inline() }}</td> + <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc4">[4]</a></sup></td> + <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> + <td>10</td> + <td>11.10{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup></td> + <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2%3E">[2]</a></sup></td> + </tr> + <tr> + <td>Standard syntax (using the <code>to</code> keyword)</td> + <td>16</td> + <td>26.0 (537.27)</td> + <td>10</td> + <td>12.10</td> + <td>6.1</td> + </tr> + </tbody> +</table> + +<p><sup><a name="bc1">[1]</a></sup> Internet Explorer 5.5 through 9.0 supports proprietary <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> + +<p><sup><a name="bc2">[2]</a></sup> WebKit since 528 supports the legacy <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p> + +<p><sup><a name="bc3">[3]</a></sup> Gecko, Opera & Webkit considers {{ cssxref("<angle>") }} to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top.</p> + +<p><sup><a name="bc4">[4]</a></sup> Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a <em>from</em> position. The <code>to</code> syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:</p> + +<pre class="notranslate">linear-gradient(to top left, blue, red);</pre> + +<p>is almost the same as:</p> + +<pre class="notranslate">-moz-linear-gradient(bottom right, blue, red);</pre> + +<p>The legacy syntax, without <code>to</code>, is planned to go away when the prefix is removed.</p> + +<h3 id="Cross-browser_gradients">Cross-browser gradients</h3> + +<p>Considering all prefixes above, here is a gradient from pink to green, top to bottom.</p> + +<pre class="brush: css notranslate">.grad { + background-color: #F07575; /* fallback color if gradients are not supported */ + background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */ + background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */ + background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ + background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */ +} +</pre> + +<p>The -moz- prefixed rules are used for compatibility with older versions (Fx 3.6 to Fx 15). The -webkit-prefix is the only one that still needs to be included for Android 4.3-, iOS up to 6.1, and Safari 6. When using a prefix, do not use 'to'.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a>, {{ cssxref("radial-gradient", "radial-gradient()") }}, {{ cssxref("repeating-linear-gradient", "repeating-linear-gradient()") }}, {{ cssxref("repeating-radial-gradient", "repeating-radial-gradient()") }};</li> + <li>Some properties where it can be used: {{ cssxref("background-image") }}, {{ cssxref("background") }};</li> + <li><a class="external" href="http://lea.verou.me/css3patterns/" title="http://leaverou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a><span class="external">;</span></li> + <li><a class="external" href="http://standardista.com/cssgradients" title="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a>.</li> +</ul> diff --git a/files/es/web/css/list-style-image/index.html b/files/es/web/css/list-style-image/index.html new file mode 100644 index 0000000000..c41f13541c --- /dev/null +++ b/files/es/web/css/list-style-image/index.html @@ -0,0 +1,72 @@ +--- +title: list-style-image +slug: Web/CSS/list-style-image +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/list-style-image +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>La imagen de lista (<code>list-style-image</code>) define la imagen que será utilizada como marcador del <a href="es/HTML/Element/li">listado</a>.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }}</li> + <li>Se aplica a: elementos con 'display: list-item'</li> + <li>{{ Cssxref("inheritance", "Valor heredado") }}: Sí</li> + <li>Porcentajes: n/a</li> + <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li> + <li>{{ Cssxref("computed value", "Valor calculado") }}: URI absoluta o <code>none</code></li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">list-style-image: <uri> | none | inherit +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt><code>uri</code> </dt> + <dd>directorio donde se encuentra la imagen que se utilizará como marcador.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li>Item 1</li> + <li>Item 2</li> +</ul> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">ul { + list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif") +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Ejemplos')}}</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#list-style-image">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-lists/#list-style-image">css3-lists</a></li> +</ul> + +<h3 id="Compatibilidad_con_navegadores" name="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h3> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}</p> + +<p>{{ languages( { "fr": "fr/CSS/list-style-image", "pl": "pl/CSS/list-style-image", "en": "en/CSS/list-style-image" } ) }}</p> diff --git a/files/es/web/css/list-style-position/index.html b/files/es/web/css/list-style-position/index.html new file mode 100644 index 0000000000..823553b62d --- /dev/null +++ b/files/es/web/css/list-style-position/index.html @@ -0,0 +1,97 @@ +--- +title: list-style-position +slug: Web/CSS/list-style-position +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/list-style-position +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>La posición de la lista (<code>list-style-position</code>) especifica donde será colocado el marcador de la lista en relación a la caja principal.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("outside", "outside (afuera)") }}</li> + <li>Se aplica a: elementos con 'display: list-item'</li> + <li>{{ Cssxref("inheritance", "Valor heredado") }}: Sí</li> + <li>Porcentajes: n/a</li> + <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li> + <li>{{ Cssxref("computed value", "Valor calculado") }}: como especificado</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">list-style-position: inside | outside | inherit +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt><code>outside</code> </dt> + <dd>el marcador se encuentra fuera de la caja principal.</dd> + <dt><code>inside</code> </dt> + <dd>el marcador es la primera caja en línea dentro de la caja principal, después de la cual fluye el resto de los elementos.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="one"> List 1 + <li>List Item 1-1</li> + <li>List Item 1-2</li> + <li>List Item 1-3</li> + <li>List Item 1-4</li> +</ul> +<ul class="two"> List 2 + <li>List Item 2-1</li> + <li>List Item 2-2</li> + <li>List Item 2-3</li> + <li>List Item 2-4</li> +</ul> +<ul class="three"> List 3 + <li>List Item 3-1</li> + <li>List Item 3-2</li> + <li>List Item 3-3</li> + <li>List Item 3-4</li> +</ul></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css;">.one { + list-style:square inside; +} + +.two { + list-style-position: outside; + list-style-type: circle; +} + +.three { + list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif"); + list-style-position: inherit; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Ejemplos","200","420")}}</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#list-style-position">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-lists/#list-style-position">css3-lists</a></li> +</ul> + +<h3 id="Compatibilidad_con_navegadores" name="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h3> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}</p> + +<p>{{ languages( { "fr": "fr/CSS/list-style-position", "pl": "pl/CSS/list-style-position", "en": "en/CSS/list-style-position" } ) }}</p> diff --git a/files/es/web/css/list-style-type/index.html b/files/es/web/css/list-style-type/index.html new file mode 100644 index 0000000000..f118ce0358 --- /dev/null +++ b/files/es/web/css/list-style-type/index.html @@ -0,0 +1,117 @@ +--- +title: list-style-type +slug: Web/CSS/list-style-type +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/list-style-type +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>El {{ Cssxref("list-style-type", "tipo de estilo de lista") }} especifica la apariencia del <a href="/es/HTML/Element/li" title="es/HTML/Element/li">listado</a>.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("disc", "disco/punto") }}</li> + <li>Se aplica a: elementos con 'display: list-item'</li> + <li>{{ Cssxref("inheritance", "Valor heredado") }}: Sí</li> + <li>Porcentajes: n/a</li> + <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li> + <li>{{ Cssxref("computed value", "Valor calculado") }}: según se especificó</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval"> list-style-type: <std-list-style-name> | {{ Cssxref("none") }} | {{ Cssxref("inherit") }} ; +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt><std-list-style-name></dt> + <dd>un nombre de estilo de lista estándar: <code>disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha</code></dd> + <dt><code>disc</code></dt> + <dd>un disco.</dd> + <dt><code>circle</code></dt> + <dd>un círculo.</dd> + <dt><code>square</code></dt> + <dd>un cuadrado.</dd> + <dt><code>decimal</code></dt> + <dd>números decimales empezando con 1.</dd> + <dt><code>decimal-leading-zero</code></dt> + <dd>números decimales empezando eventualmente por ceros (por ejemplo: 01, 02, 03, ..., 98, 99).</dd> + <dt><code>lower-roman</code></dt> + <dd>números romanos en minúscula (i, ii, iii, iv, v, etc.).</dd> + <dt><code>upper-roman</code></dt> + <dd>números romanos en mayúscula (I, II, III, IV, V, etc.).</dd> + <dt><code>lower-greek</code></dt> + <dd>letras griegas en minúscula alfa/α, beta/β, gamma/γ, ...</dd> + <dt><code>lower-latin</code></dt> + <dd>letras ASCII en minúscula (a, b, c, ... z).</dd> + <dt><code>upper-latin</code></dt> + <dd>letras ASCII en mayúscula (A, B, C, ... Z).</dd> + <dt><code>armenian</code></dt> + <dd>numeración armenia tradicional (ayb/ayp, ben/pen, gim/keem, ...).</dd> + <dt><code>georgian</code></dt> + <dd>numeración georgiana tradicional (an, ban, gan, ..., he, tan, in, in-an, ...).</dd> + <dt><code>lower-alpha</code></dt> + <dd>es igual que <code>lower-latin</code>.</dd> + <dt><code>upper-alpha</code></dt> + <dd>es igual que <code>upper-latin</code>.</dd> + <dt><code>none</code></dt> + <dd>nada.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">ol.normal { + list-style-type: upper-alpha; +} + +/* or use the shortcut "list-style": */ +ol.shortcut { + list-style: upper-alpha; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ol class="normal">List 1 + <li>Hello</li> + <li>World</li> + <li>What's up?</li> +</ol> + +<ol class="shortcut">List 2 + <li>Looks</li> + <li>Like</li> + <li>The</li> + <li>Same</li> +</ol> +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Ejemplos","200","300")}}</p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>Ésta especificación no define el comportamiento en el caso de una lista con más elementos que la cantidad de letras del alfabeto utilizado. Por ejemplo, después de 26 letras, el resultado con <code>lower-latin</code> no es definido (y continuará como: AA, AB, AC,...). Por eso, para listas largas, es recomendable utilizar números.</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#list-style-type">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-lists/#list-style-type">css3-lists</a></li> +</ul> + +<h3 id="Compatibilidad_con_navegadores" name="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h3> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position") }}</p> diff --git a/files/es/web/css/list-style/index.html b/files/es/web/css/list-style/index.html new file mode 100644 index 0000000000..bf92a28951 --- /dev/null +++ b/files/es/web/css/list-style/index.html @@ -0,0 +1,82 @@ +--- +title: list-style +slug: Web/CSS/list-style +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/list-style +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>La propiedad de estilo de lista (<code>list-style</code>) permite definir de golpe todos los parámetros: {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}, y {{ Cssxref("list-style-position") }}.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales</li> + <li>Se aplica a: elementos con 'display: list-item'</li> + <li>{{ Cssxref("inheritance", "Valor heredado") }}: no</li> + <li>Porcentajes: N/A</li> + <li>Medio: {{ Cssxref("Media:Visual", "visual") }}</li> + <li>{{ Cssxref("computed value", "Valor calculado") }}: ver propiedades individuales</li> +</ul> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<p>list-style: {{ mediawiki.external(' list-style-type || list-style-position || list-style-image ') }} | inherit</p> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt>ver {{ Cssxref("list-style-type", "list-style-type") }}.</dt> + <dt>ver {{ Cssxref("list-style-image", "list-style-image") }}.</dt> + <dt>ver {{ Cssxref("list-style-position", "list-style-position") }}.</dt> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html">List 1 +<ul class="one"> + <li>List Item1</li> + <li>List Item2</li> + <li>List Item3</li> +</ul> +List 2 +<ul class="two"> + <li>List Item A</li> + <li>List Item B</li> + <li>List Item C</li> +</ul> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.one { + list-style: circle; +} + +.two { + list-style: square inside; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Ejemplos')}}</p> + +<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#list-style">CSS 1 (en)</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style">CSS 2.1 (en)</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-lists/#list-style">css3-lists (en)</a></li> +</ul> + +<h2 id="Compatibilidad_con_navegadores" name="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position")}}</p> diff --git a/files/es/web/css/margin-block-start/index.html b/files/es/web/css/margin-block-start/index.html new file mode 100644 index 0000000000..1ec94d7b76 --- /dev/null +++ b/files/es/web/css/margin-block-start/index.html @@ -0,0 +1,99 @@ +--- +title: margin-block-start +slug: Web/CSS/margin-block-start +translation_of: Web/CSS/margin-block-start +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>margin-block-start</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.</p> + +<div>{{EmbedInteractiveExample("pages/css/margin-block-start.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <length> values */ +margin-block-start: 10px; /* An absolute length */ +margin-block-start: 1em; /* relative to the text size */ +margin-block-start: 5%; /* relative to the nearest block container's width */ + +/* Keyword values */ +margin-block-start: auto; + +/* Global values */ +margin-block-start: inherit; +margin-block-start: initial; +margin-block-start: unset; +</pre> + +<p>Esto corresponde a las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, o {{cssxref("margin-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<p>Se relaciona con {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, and {{cssxref("margin-inline-end")}}, que define las otras márgenes del elemento. </p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>margin-block-start</code> toma los mismos valores de la propiedad {{cssxref("margin-left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + margin-block-start: 20px; + background-color: #c8c800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-margin-block-start", "margin-block-start")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.margin-block-start")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/margin-block/index.html b/files/es/web/css/margin-block/index.html new file mode 100644 index 0000000000..680b41219d --- /dev/null +++ b/files/es/web/css/margin-block/index.html @@ -0,0 +1,108 @@ +--- +title: margin-block +slug: Web/CSS/margin-block +translation_of: Web/CSS/margin-block +--- +<p>{{CSSRef}}{{SeeCompatTable}} </p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>margin-block</code></strong> define el bloque lógico de inicio y fin de las márgenes de un elemento, que se asigna a las márgenes físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto.</p> + +<pre class="brush:css no-line-numbers notranslate">/* <length> values */ +margin-block: 10px 20px; /* An absolute length */ +margin-block: 1em 2em; /* relative to the text size */ +margin-block: 5% 2%; /* relative to the nearest block container's width */ +margin-block: 10px; /* sets both start and end values */ + +/* Keyword values */ +margin-block: auto; + +/* Global values */ +margin-block: inherit; +margin-block: initial; +margin-block: unset; +</pre> + + + +<p>Estos valores corresponden a {{CSSxRef("margin-top")}} y {{CSSxRef("margin-bottom")}}, o {{CSSxRef("margin-right")}}, y {{CSSxRef("margin-left")}} depende de los valores definidos para {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, y {{CSSxRef("text-orientation")}}.</p> + +<h2 id="Propiedades_que_lo_constituyen">Propiedades que lo constituyen</h2> + +<p>Los valores se pueden establecer individualmente como {{CSSxRef("margin-block-start")}} y {{CSSxRef("margin-block-end")}}. La propiedad de dirección en línea es {{CSSxRef("margin-inline")}} que establece {{CSSxRef("margin-inline-start")}}, y {{CSSxRef("margin-inline-end")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>margin-block</code> toma los mismos valores de la propiedad {{CSSxRef("margin-left")}}.</p> + +<h3 id="Definición_formal">Definición formal</h3> + +<p>{{cssinfo}}</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Definiendo_el_comienzo_del_bloque_y_el_fin_de_los_margenes">Definiendo el comienzo del bloque y el fin de los margenes</h3> + +<h4 id="HTML"><strong>HTML</strong></h4> + +<pre class="brush: html notranslate"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h4 id="CSS"><strong>CSS</strong></h4> + +<pre class="brush: css notranslate">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + margin-block: 20px 40px; + background-color: #c8c800; +}</pre> + +<h4 id="Resultado"><strong>Resultado</strong></h4> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-margin-block", "margin-block")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<p>{{CSSInfo}}</p> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.margin-block")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, y {{CSSxRef("margin-left")}}</li> + <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/margin-bottom/index.html b/files/es/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..7d2b61a238 --- /dev/null +++ b/files/es/web/css/margin-bottom/index.html @@ -0,0 +1,139 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +translation_of: Web/CSS/margin-bottom +--- +<div>{{CSSRef()}}</div> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p><img alt="The effect of the CSS margin-bottom property on the element box" src="/files/4045/margin-bottom.svg" style="border: 1px solid; float: left; height: 130px; margin-bottom: 1em; margin-right: 1em; padding-right: 0.5em; width: 400px;"><span class="seoSummary">El <code>margin-bottom</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> (<em>margen-inferior</em>) es la propiedad de un elemento que establece el espacio requerido en la parte inferior de un elemento. Tambien se permiten valores negativos.</span></p> + +<p><span class="seoSummary">Esta propiedad no tiene ningun efecto sobre los elementos en linea <em>non-replaced</em> , como {{HTMLElement("tt")}} o {{HTMLElement("span")}}.</span></p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("margin-bottom")}}</pre> + +<pre>margin-bottom: 10px; /* Una longitud absoluta (sin redimension) */ +margin-bottom: 1em; /* Una longitud en relacion con el tamaño del texto */ +margin-bottom: 5%; /* Un margen respecto al ancho de su objeto padre (el que lo contiene) */ +margin-bottom: auto; + +margin-bottom: inherit; /*margen heredado*/ +</pre> + +<h3 id="Values" name="Values">Values</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Specifies a fixed width. See {{cssxref("<length>")}} for possible values.</dd> + <dt><code><percentage></code></dt> + <dd>A {{cssxref("<percentage>")}} always relative to the <strong>width</strong> of the containing block.</dd> + <dt><code>auto</code></dt> + <dd>See {{cssxref("margin")}}.</dd> +</dl> + +<h2 id="Examples" name="Examples">Examples</h2> + +<pre class="brush:css;">.content { margin-bottom: 5%; } +.sidebox { margin-bottom: 10px; } +.logo { margin-bottom: -5px; } +#header { margin-bottom: 1em; } +</pre> + +<div><a href="https://jsfiddle.net/V3hrF">Ver en el JSFiddle</a></div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Box', '#the-margin', 'margin-bottom')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>No significant change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>margin-bottom</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Removes its effect on inline elements.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>auto</code> value</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>6.0 (strict mode)</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/margin-inline-end/index.html b/files/es/web/css/margin-inline-end/index.html new file mode 100644 index 0000000000..2ce32be63e --- /dev/null +++ b/files/es/web/css/margin-inline-end/index.html @@ -0,0 +1,98 @@ +--- +title: margin-inline-end +slug: Web/CSS/margin-inline-end +translation_of: Web/CSS/margin-inline-end +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a><strong> <code>margin-inline-end</code></strong> define el margen final lógico en línea de un elemento, que se asigna a un margen físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. En otras palabras, corresponde a las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} o {{cssxref("margin-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <length> values */ +margin-inline-end: 10px; /* An absolute length */ +margin-inline-end: 1em; /* relative to the text size */ +margin-inline-end: 5%; /* relative to the nearest block container's width */ + +/* Keyword values */ +margin-inline-end: auto; + +/* Global values */ +margin-inline-end: inherit; +margin-inline-end: initial; +margin-inline-end: unset; +</pre> + +<p>Se relaciona con {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, and {{cssxref("margin-inline-start")}}, que define las otras márgenes del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>margin-inline-end</code> toma los mismos valores de la propiedad {{cssxref("margin-left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + margin-inline-end: 20px; + background-color: #c8c800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline-end", "margin-inline-end")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.margin-inline-end")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>{{cssxref("margin-inline-start")}}</li> + <li>Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/margin-inline-start/index.html b/files/es/web/css/margin-inline-start/index.html new file mode 100644 index 0000000000..c0f734b017 --- /dev/null +++ b/files/es/web/css/margin-inline-start/index.html @@ -0,0 +1,96 @@ +--- +title: margin-inline-start +slug: Web/CSS/margin-inline-start +translation_of: Web/CSS/margin-inline-start +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p>The <strong><code>margin-inline-start</code></strong> define el margen de inicio en línea lógico de un elemento, que se asigna a un margen físico según el modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, o {{cssxref("margin-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/margin-inline-start.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <length> values */ +margin-inline-start: 10px; /* An absolute length */ +margin-inline-start: 1em; /* relative to the text size */ +margin-inline-start: 5%; /* relative to the nearest block container's width */ + +/* Keyword values */ +margin-inline-start: auto; + +/* Global values */ +margin-inline-start: inherit; +</pre> + +<p>Se relaciona con {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, and {{cssxref("margin-inline-end")}}, que define las otras márgenes del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>margin-inline-start</code> toma los mismos valores de la propiedad {{cssxref("margin-left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + margin-inline-start: 20px; + background-color: #c8c800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline-start", "margin-inline-start")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.margin-inline-start")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>{{cssxref("margin-inline-end")}}</li> + <li>Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/margin-inline/index.html b/files/es/web/css/margin-inline/index.html new file mode 100644 index 0000000000..9bff11e577 --- /dev/null +++ b/files/es/web/css/margin-inline/index.html @@ -0,0 +1,96 @@ +--- +title: margin-inline +slug: Web/CSS/margin-inline +translation_of: Web/CSS/margin-inline +--- +<p>{{CSSRef}}{{SeeCompatTable}} </p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>margin-inline</code></strong> define los márgenes lógicos de inicio y final en línea de un elemento, que se asignan a márgenes físicos según el modo de escritura, la direccionalidad y la orientación del texto del elemento.</p> + +<pre class="brush:css no-line-numbers notranslate">/* Valores <largo> */ +margin-inline: 10px 20px; /* Un largo absoluto */ +margin-inline: 1em 2em; /* relativo al tamaño del texto */ +margin-inline: 5% 2%; /* relativo al ancho del container del bloque más cercano */ +margin-inline: 10px; /* settear tanto el valor inicial como el final*/ + +/* Valores keyword */ +margin-inline: auto; + +/* Valores globales */ +margin-inline: inherit; +margin-inline: initial; +margin-inline: unset; +</pre> + +<p>Estos valores corresponden a las propiedades {{CSSxRef("margin-top")}} y {{CSSxRef("margin-bottom")}}, o {{CSSxRef("margin-right")}}, y {{CSSxRef("margin-left")}} dependiendo de los valores definidos por {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, y {{CSSxRef("text-orientation")}}.</p> + +<p>Los valores pueden ser establecidos indibidualmente como {{CSSxRef("margin-inline-start")}} y {{CSSxRef("margin-inline-end")}}. La propiedad de dirección de bloque es {{CSSxRef("margin-block")}} que establece {{CSSxRef("margin-block-start")}}, y {{CSSxRef("margin-block-end")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>margin-inline</code> toma los mismos valores de la propiedad {{CSSxRef("margin-left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html notranslate"><div> + <p class="exampleText">Texto de ejemplo</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css notranslate">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + margin-inline: 20px 40px; + background-color: #c8c800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline", "margin-inline")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<p id="Browser_compatibility">{{CSSInfo}}</p> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.margin-inline")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, y {{CSSxRef("margin-left")}}</li> + <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/margin-right/index.html b/files/es/web/css/margin-right/index.html new file mode 100644 index 0000000000..7d7f2b6486 --- /dev/null +++ b/files/es/web/css/margin-right/index.html @@ -0,0 +1,26 @@ +--- +title: margin-right +slug: Web/CSS/margin-right +translation_of: Web/CSS/margin-right +--- +<h3 id="Definicion" name="Definicion">Definicion</h3> +<p>El margen derecho de propiedad establece el margen derecho de un elemento.</p> +<ul> + <li>Nota: Los valores negativos son permitidas.</li> + <li>Heredado: No.</li> +</ul> +<h3 id="Sintaxis_JavaScript" name="Sintaxis_JavaScript">Sintaxis JavaScript</h3> +<p>CSS propiedades también se puede cambiar dinámicamente con una JavaScript. Scripting Sintaxis: object.style.marginRight="10px"</p> +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> +<pre>h1 +{ +margin-right: 10px +} +h2 +{ +margin-right: -20px +} +</pre> +<ul> + <li>Fuente: [<a class="external" href="http://www.w3schools.com/css/pr_margin-right.asp">] </a></li> +</ul> diff --git a/files/es/web/css/margin/index.html b/files/es/web/css/margin/index.html new file mode 100644 index 0000000000..bd0acd9524 --- /dev/null +++ b/files/es/web/css/margin/index.html @@ -0,0 +1,214 @@ +--- +title: margin +slug: Web/CSS/margin +translation_of: Web/CSS/margin +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>margin </code></strong>establece el margen para los cuatro lados. Es una abreviación para evitar tener que establecer cada lado por separado con las otras propiedades de margen: {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }} y {{ cssxref("margin-left") }}.</p> + +<p>También se permiten valores negativos.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* Aplica a todos los cuatro lados */ +margin: 1em; + +/* Vertical | Horizontal */ +margin: 5% auto; + +/* Arriba | Horizontal | Abajo */ +margin: 1em auto 2em; + +/* Arriba | Derecha | Abajo | Izquierda */ +margin: 2px 1em 0 auto; + +/* Valores globales */ +margin: inherit; +margin: initial; +margin: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>Acepta uno, dos , tres o cuatro valores de los siguientes:</p> + +<dl> + <dt><code><length></code></dt> + <dd>Especifica un ancho fijo. Valores negativos son permitidos. Mira {{cssxref("<length>")}} para conocer las posibles unidades.</dd> + <dt><code><percentage></code></dt> + <dd>Un {{cssxref("<percentage>")}} relativo al <strong>ancho </strong>del bloque contenedor. Se permiten valores negativos.</dd> + <dt><code>auto</code></dt> + <dd><code>auto es reemplazado por algún valor</code> apropiado. Por ejemplo, puede usarse para centrar horizontalmente un elemento bloque.<br> + <code>div { width:50%; margin:0 auto; }</code> centrará el div horizontalmente.</dd> +</dl> + +<ul> + <li><strong>Un</strong> único valor aplicará para todos los <strong>cuatro lados</strong>.</li> + <li><strong>Dos</strong> valores aplicarán: El primer valor para <strong>arriba y abajo</strong>, el segundo valor para <strong>izquierda y derecha</strong>.</li> + <li><strong>Tres</strong> valores aplicarán: El primero para <strong>arriba</strong>, el segundo para <strong>izquierda y derecha</strong>, el tercero para <strong>abajo</strong>.</li> + <li><strong>Cuatro </strong>valores aplicarán en sentido de las manecillas del reloj empezando desde arriba. (<strong>Arriba, derecha, abajo, izquierda</strong>)</li> +</ul> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_simple">Ejemplo simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="ex1"> + margin: auto; + background: gold; + width: 66%; +</div> +<div class="ex2"> + margin: 20px 0 0 -20px; + background: gold; + width: 66%; +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight:[2,7]">.ex1 { + margin: auto; + background: gold; + width: 66%; +} +.ex2 { + margin: 20px 0px 0 -20px; + background: gold; + width: 66%; +}</pre> + +<p>{{ EmbedLiveSample('Simple_example') }}</p> + +<h3 id="Otro_ejemplo">Otro ejemplo</h3> + +<pre class="brush: css">margin: 5%; /* 5% para todos los lados */ + +margin: 10px; /* 10px para todos los lados */ + +margin: 1.6em 20px; /* 1.6em arriba y abajo, 20px izquierda y derecha */ + +margin: 10px 3% 1em; /* 10px arriba, 3% izquierda y derecha, 1em abajo */ + +margin: 10px 3px 30px 5px; /* 10px arriba, 3px derecha, 30px abajo, 5px izquierda */ + +margin: 1em auto; /* 1em arriba y abajo, centrado horizontalmente */ + +margin: auto; /* 0px de margen vertical, centrado horizontalmente */ +</pre> + +<h2 id="Centrado_horizontal_con_margin_0_auto">Centrado horizontal con <code>margin: 0 auto;</code></h2> + +<p>Para centrar algo horizontalmente en navegadores modernos, usa <code><a href="/en-US/docs/Web/CSS/display">display</a>: flex; <a href="/en-US/docs/Web/CSS/justify-content">justify-content</a>: center;</code> .</p> + +<p>Sin embargo, en navegadores antiguos como IE8-9, <strong>flexbox</strong> no está disponible. Para poder centrar un elemento horizontalmente con respecto a su contenedor, usa <code>margin: 0 auto;</code></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No significant change</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>margin</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Removes its effect on inline elements.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>auto</code> value</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>6.0 (strict mode)</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="es/docs/Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing">Entendiendo el colapso de margen</a></li> +</ul> diff --git a/files/es/web/css/max-block-size/index.html b/files/es/web/css/max-block-size/index.html new file mode 100644 index 0000000000..5707a6ce0f --- /dev/null +++ b/files/es/web/css/max-block-size/index.html @@ -0,0 +1,178 @@ +--- +title: max-block-size +slug: Web/CSS/max-block-size +translation_of: Web/CSS/max-block-size +--- +<div>{{CSSRef}}{{SeeCompatTable}} </div> + +<p><span class="seoSummary">La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <code><strong>max-block-size</strong></code> especifica el tamaño máximo de un elemento en la dirección opuesta a la de la dirección de escritura según lo especificado por {{cssxref("writing-mode")}}.</span> Esto es, si la dirección de escritura es horizontal, entonces <code>max-block-size</code> es equivalente a {{cssxref("max-height")}}; si la dirección de escritura es vertical, <code>max-block-size</code> es lo mismo que {{cssxref("max-width")}}.</p> + +<p>La longitud máxima de la otra dimensión se especifica usando la propiedad {{cssxref("max-inline-size")}}.</p> + +<p>Esto es útil porque <code>max-width</code> siempre se utiliza para tamaños horizontales y <code>max-height</code> siempre se usa para tamaños verticales, y si necesitas establecer longitudes en función del tamaño del contenido del texto, debes poder hacerlo con la dirección de escritura en mente.</p> + +<p>En cualquier momento usarías normalmente <code>max-height</code> o <code>max-width</code>, en su lugar deberías usar <code>max-block-size</code>para establecer el máximo "height" del contenido (even though this may not be a vertical value) y <code>max-inline-size</code> para establecer el máximo "width" del contenido (aunque esto puede ser más bien vertical en lugar de horizontal). Mira el {{SectionOnPage("/en-US/docs/Web/CSS/writing-mode", "Example")}}, que muestra los diferentes modos de escritura en acción.</p> + +<div>{{EmbedInteractiveExample("pages/css/max-block-size.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <length> values */ +max-block-size: 300px; +max-block-size: 25em; + +/* <percentage> values */ +max-block-size: 75%; + +/* Keyword values */ +max-block-size: none; +max-block-size: max-content; +max-block-size: min-content; +max-block-size: fit-content; +max-block-size: fill-available; + +/* Global values */ +max-block-size: inherit; +max-block-size: initial; +max-block-size: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<p>El valor de la propiedad <code>max-block-size</code> puede ser cualquier valor legal de las popiedades {{cssxref("max-width")}} y {{cssxref("max-height")}}:</p> + +<p>{{page("/en-US/docs/Web/CSS/max-width", "Values")}}</p> + +<h3 id="Cómo_writing-mode_afecta_la_directionalidad">Cómo writing-mode afecta la directionalidad</h3> + +<p>Los valores de <code>writing-mode</code> afecta la asignación de <code>max-block-size</code> a <code>max-width</code> o <code>max-height</code> como sigue:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Valores de <code>writing-mode</code></th> + <th scope="col"><code>max-block-size</code> es equivalente a</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>horizontal-tb</code>, <code>lr</code> {{deprecated_inline}}, <code>lr-tb</code> {{deprecated_inline}}, <code>rl</code> {{deprecated_inline}}, <code>rb</code> {{deprecated_inline}}, <code>rb-rl</code> {{deprecated_inline}}</td> + <td>{{cssxref("max-height")}}</td> + </tr> + <tr> + <td><code>vertical-rl</code>, <code>vertical-lr</code>, <code>sideways-rl</code> {{experimental_inline}}, <code>sideways-lr</code> {{experimental_inline}}, <code>tb</code> {{deprecated_inline}}, <code>tb-rl</code> {{deprecated_inline}}</td> + <td>{{cssxref("max-width")}}</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>The <code>writing-mode</code> values <code>sideways-lr</code> and <code>sideways-rl</code> were removed from the CSS Writing Modes Level 3 specification late in its design process. They may be restored in Level 4.</p> +</div> + +<div class="note"> +<p>The writing modes <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>rb</code>, and <code>rb-tl</code> are no longer allowed in {{Glossary("HTML")}} contexts; they may only be used in {{Glossary("SVG")}} 1.x contexts.</p> +</div> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>En este ejemplo, el mismo texto (las oraciones iniciales del {{interwiki("wikipedia", "Herman Melville", "Herman Melville's")}} novel <em>{{interwiki("wikipedia", "Moby-Dick")}}</em>) es presentado en ambos modos de escritura: <code>horizontal-tb</code> y <code>vertical-rl</code>.</p> + +<p>Todo lo demás sobre las dos cajas es idéntico, incluidos los valores utilizados para {{cssxref("max-block-size")}}.</p> + +<h3 id="Contenido_HTML">Contenido HTML </h3> + +<p>El HTML simplemente establece los dos bloques {{HTMLElement("div")}} que serán presentados con su {{cssxref("writing-mode")}} estableciendo el uso de las clases <code>horizontal</code> o <code>vertical</code>. Ambas cajas comparten la clase <code>standard-box</code>, que simplemente establece colores, relleno, y sus respectivos valores de <code>max-block-size</code>.</p> + +<pre class="brush: html"><p>Writing mode <code>horizontal-tb</code> (the default):</p> +<div class="standard-box horizontal"> + Call me Ishmael. Some years ago—never mind how + long precisely—having little or no money in my + purse, and nothing particular to interest me on + shore, I thought I would sail about a little and see + the watery part of the world. It is a way I have of + driving off the spleen and regulating the + circulation. +</div> + +<p>Writing mode <code>vertical-rl</code>:</p> +<div class="standard-box vertical"> + Call me Ishmael. Some years ago—never mind how + long precisely—having little or no money in my + purse, and nothing particular to interest me on + shore, I thought I would sail about a little and see + the watery part of the world. It is a way I have of + driving off the spleen and regulating the + circulation. +</div></pre> + +<h3 id="Contenido_CSS">Contenido CSS </h3> + +<p>El CSS está definido por tres clases. La primera, <code>standard-box</code>, es aplicada a ambas cajas, como se ve arriba. Proporciona un estilo estándar que incluye los tamaños de bloque mínimo y máximo, tamaño de fuente, etc.</p> + +<p>Después que vienen las clases <code>horizontal</code> y <code>vertical</code>, que agregan las propiedades {{cssxref("writing-mode")}} para la caja, con el valor establecido para <code>horizontal-tb</code> o <code>vertical-rl</code> dependiendo en qué clase se usa.</p> + +<pre class="brush: css">.standard-box { + padding: 4px; + background-color: #abcdef; + color: #000; + font: 16px "Open Sans", "Helvetica", "Arial", sans-serif; + max-block-size: 160px; + min-block-size: 100px; +} + +.horizontal { + writing-mode: horizontal-tb; +} + +.vertical { + writing-mode: vertical-rl; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>Las dos cajas se ven así al final:</p> + +<p>{{EmbedLiveSample("Ejemplo", 600, 850)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.max-block-size")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("max-width")}} y {{cssxref("max-height")}}</li> + <li>Configuración del tamaño máximo de la otra dirección: {{cssxref("max-inline-size")}}</li> + <li>{{cssxref("writing-mode")}}</li> +</ul> diff --git a/files/es/web/css/max-height/index.html b/files/es/web/css/max-height/index.html new file mode 100644 index 0000000000..01c24aa995 --- /dev/null +++ b/files/es/web/css/max-height/index.html @@ -0,0 +1,94 @@ +--- +title: max-height +slug: Web/CSS/max-height +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/max-height +--- +<p> </p> + +<p><< <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a></p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>La propiedad <code>max-height</code> se utiliza para definir la altura máxima de un elemento dado. Impide que el valor de la {{ Cssxref("height", "altura") }} pueda llegar a ser más grande que la de <code>max-height</code>.</p> + +<ul> + <li>{{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }}</li> + <li>Se aplica a : elementos de bloque o remplazados</li> + <li>{{ Cssxref("inheritance", "Valor heredado") }}: no</li> + <li>Porcentajes: se refiere a la altura del bloque contenedor.</li> + <li>Medio: {{ Xref_cssvisual() }}</li> + <li>{{ Cssxref("computed value", "Valor calculado") }}:</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">max-height: <length> | <percentage> +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<ul> + <li><strong>none</strong> : la {{ Cssxref("height", "altura") }} no tiene valor máxima.</li> + <li><strong>length</strong> : puede ser en px, cm, in (píxel, centímetro o inches)</li> + <li><strong>percentage</strong> : % especificado como un porcentaje de la altura del bloque contenedor.</li> +</ul> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval">table { max-width: 75%; } + +form { max-width: none; } +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>{{ Cssxref("max-height") }} sobrescribe {{ Cssxref("height") }}, pero <strong>no</strong> {{ Cssxref("min-height") }}.</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS2/visudet.html#min-max-heights">CSS 2.1</a></li> +</ul> + +<h3 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>6</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("Modelo de caja", "modelo de caja") }}, {{ Cssxref("width", "ancho") }}, {{ Cssxref("-moz-box-sizing", "tamaño de cajas -Mozilla") }}, {{ Cssxref("min-height", "altura mínima") }}, {{ Cssxref("max-height", "altura máxima") }}</p> + +<p> </p> + +<div class="noinclude"> +<p><span class="comment">Categorías</span></p> + +<p><span class="comment">Interwiki Languages</span></p> + +<div class="noinclude"> </div> +</div> + +<p>{{ languages( { "en": "en/CSS/max-height", "fr": "fr/CSS/max-height" } ) }}</p> diff --git a/files/es/web/css/max-inline-size/index.html b/files/es/web/css/max-inline-size/index.html new file mode 100644 index 0000000000..b5406c7dc6 --- /dev/null +++ b/files/es/web/css/max-inline-size/index.html @@ -0,0 +1,94 @@ +--- +title: max-inline-size +slug: Web/CSS/max-inline-size +translation_of: Web/CSS/max-inline-size +--- +<p>{{CSSRef}}{{SeeCompatTable}} </p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>max-inline-size</code></strong> define el tamaño máximo horizontal o vertical de un elemento bloque dependiendo del modo de escritura. Esto corresponde a las propiedades {{cssxref("max-width")}} o {{cssxref("max-height")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}. Si el modo de escritura esta orientado verticalmente, el valor de <code>max-inline-size</code> relacionado al alto máximo del elemento, de lo contrario, se relaciona con el ancho máximo del elemento. Se relaciona con {{cssxref("max-block-size")}}, que define la otra dimensión del elemento.</p> + +<div>{{EmbedInteractiveExample("pages/css/max-inline-size.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <length> values */ +max-inline-size: 300px; +max-inline-size: 25em; + +/* <percentage> values */ +max-inline-size: 75%; + +/* Keyword values */ +max-inline-size: none; +max-inline-size: max-content; +max-inline-size: min-content; +max-inline-size: fit-content; +max-inline-size: fill-available; + +/* Global values */ +max-inline-size: inherit; +max-inline-size: initial; +max-inline-size: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>max-inline-size</code> toma los mismos valores como las propiedades {{cssxref("max-width")}} y {{cssxref("max-height")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML </h3> + +<pre class="brush: html"><p class="exampleText">Example text</p> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS </h3> + +<pre class="brush: css">.exampleText { + writing-mode: vertical-rl; + background-color: yellow; + block-size: 100%; + max-inline-size: 200px; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo")}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-max-inline-size", "max-inline-size")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.max-inline-size")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("max-width")}} y {{cssxref("max-height")}}</li> + <li>{{cssxref("writing-mode")}}</li> +</ul> diff --git a/files/es/web/css/max-width/index.html b/files/es/web/css/max-width/index.html new file mode 100644 index 0000000000..55fa03d4ee --- /dev/null +++ b/files/es/web/css/max-width/index.html @@ -0,0 +1,158 @@ +--- +title: max-width +slug: Web/CSS/max-width +tags: + - Referencia_CSS +translation_of: Web/CSS/max-width +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>max-width</code></strong> <a href="/en-US/docs/CSS">CSS</a> property sets the maximum width of an element. It prevents the <a href="/en-US/docs/Web/CSS/used_value">used value</a> of the {{ Cssxref("width") }} property from becoming larger than the value specified by <code>max-width</code>.</p> + +<pre class="brush:css no-line-numbers">/* <length> value */ +max-width: 3.5em; + +/* <percentage> value */ +max-width: 75%; + +/* Keyword values */ +max-width: none; +max-width: max-content; +max-width: min-content; +max-width: fit-content; +max-width: fill-available; + +/* Global values */ +max-width: inherit; +max-width: initial; +max-width: unset; +</pre> + +<p>{{ Cssxref("max-width") }} overrides {{cssxref("width")}}, but {{ Cssxref("min-width") }} overrides {{ Cssxref("max-width") }}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<h3 id="Values">Values</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>The maximum width, expressed as a {{cssxref("<length>")}}.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>The maximum width, expressed as a {{cssxref("<percentage>")}} of the containing block's width.</dd> +</dl> + +<h4 id="Keyword_values">Keyword values</h4> + +<dl> + <dt><code>none</code></dt> + <dd>The width has no maximum value.</dd> + <dt><code>max-content</code>{{experimental_inline()}}</dt> + <dd>The intrinsic preferred width.</dd> + <dt><code>min-content</code>{{experimental_inline()}}</dt> + <dd>The intrinsic minimum width.</dd> + <dt><code>fill-available</code>{{experimental_inline()}}</dt> + <dd>The containing block's width minus the horizontal margin, border, and padding. (Note that some browsers implement an ancient name for this keyword, <code>available</code>.)</dd> + <dt><code>fit-content</code>{{experimental_inline()}}</dt> + <dd>The same as <code>max-content.</code></dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<p>In this example, the "child" will be either 150 pixels wide or the width of the "parent," whichever is smaller:</p> + +<div id="basic-max-width-demo"> +<pre class="brush: html"><div id="parent"> + <div id="child"> + Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis. + </div> +</div> +</pre> + +<pre class="brush: css">#parent { + background: lightblue; + width: 300px; +} + +#child { + background: gold; + width: 100%; + max-width: 150px; +} +</pre> +</div> + +<p>{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}</p> + +<p>The <code>fit-content</code> value can be used to set the width of an element based on the intrinsic size required by its content:</p> + +<div id="fit-content-demo"> +<pre class="brush: html" style="display: none;"><div id="parent"> + <div id="child"> + Child Text + </div> +</div> +</pre> + +<pre class="brush: css">#parent { + background: lightblue; + width: 300px; +} + +#child { + background: gold; + width: 100%; + max-width: -moz-fit-content; + max-width: -webkit-fit-content; +} +</pre> +</div> + +<p>{{EmbedLiveSample("fit-content-demo", 400, 100)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }}</td> + <td>{{ Spec2('CSS3 Sizing') }}</td> + <td>Adds the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-available</code> keywords.<em> </em>(Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.<em>)</em></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>max-width</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.max-width")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}</li> + <li><a href="/en/CSS/box_model" title="en/CSS/box_model">The box model</a>, {{ Cssxref("box-sizing") }}</li> +</ul> diff --git a/files/es/web/css/media_queries/index.html b/files/es/web/css/media_queries/index.html new file mode 100644 index 0000000000..630dc94b9c --- /dev/null +++ b/files/es/web/css/media_queries/index.html @@ -0,0 +1,107 @@ +--- +title: Media queries +slug: Web/CSS/Media_Queries +translation_of: Web/CSS/Media_Queries +--- +<div>{{CSSRef}}</div> + +<p>Las <strong>consultas de medios</strong> le permiten adaptar su sitio o aplicación dependiendo de la presencia o el valor de varias características y parámetros del dispositivo.</p> + +<p>Son un componente clave del <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Responsive">responsive design</a>. Por ejemplo, una consulta de medios puede reducir el tamaño de la fuente en dispositivos pequeños, aumentar el relleno entre párrafos cuando se ve una página en modo vertical, o aumentar el tamaño de los botones en las pantallas táctiles.</p> + +<p>En <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>, use la {{cssxref ("@ media")}} <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule">at-rule</a> para aplicar condicionalmente parte de una hoja de estilo en función del resultado de una consulta de medios. Use {{cssxref ("@ import")}} para aplicar condicionalmente una hoja de estilo completa.</p> + +<p> </p> + +<h3 id="Consultas_de_medios_en_HTML">Consultas de medios en HTML</h3> + +<p>En <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a>, las consultas de medios se pueden aplicar a varios elementos:</p> + +<p> En el atributo {{HTMLElement ("link")}} {{htmlattrxref ("media", "link")}} del elemento, definen los medios a los que se debe aplicar un recurso vinculado (normalmente CSS).<br> + En el atributo {{HTMLElement ("source")}} {{htmlattrxref ("media", "source")}} del elemento, definen los medios a los que se debe aplicar esa fuente. (Esto solo es válido dentro de los elementos {{HTMLElement ("picture")}}.)<br> + En el atributo {{HTMLElement ("style")}} del elemento {{htmlattrxref ("media", "style")}}, definen los medios a los que se debe aplicar el estilo.</p> + +<p> </p> + +<h3 id="Consultas_de_medios_en_JavaScript">Consultas de medios en JavaScript</h3> + +<p> </p> + +<p>En <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript </a>puede usar el método {{domxref ("Window.matchMedia ()")}} para probar la ventana contra una consulta de medios. También puede usar {{domxref ("MediaQueryList.addListener ()")}} para recibir notificaciones cada vez que cambie el estado de una consulta. Con esta funcionalidad, su sitio o aplicación puede responder a los cambios en la configuración, orientación o estado del dispositivo.</p> + +<p>Puede obtener más información sobre el uso programático de consultas de medios en <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Pruebas de consultas de medios.</a></p> + +<h2 id="Referencias">Referencias</h2> + +<h3 id="At-rules">At-rules</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@import")}}</li> + <li>{{cssxref("@media")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Usando consultas de medios</a></dt> + <dd>Presenta las consultas de los medios, su sintaxis y los operadores y las funciones de los medios que se utilizan para construir expresiones de consulta de los medios.</dd> + <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Probando las consultas de medios programáticamente</a></dt> + <dd>Describe cómo usar las consultas de medios en su código de JavaScript para determinar el estado de un dispositivo, y para configurar escuchas que notifican su código cuando cambian los resultados de las consultas de medios (como cuando el usuario gira la pantalla o cambia el tamaño del navegador).</dd> + <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility">Usando consultas de medios en accesibilidad</a></dt> + <dd>Conozca cómo Media Queries puede ayudar a los usuarios a comprender mejor su sitio web.</dd> +</dl> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS5 Media Queries')}}</td> + <td>{{Spec2('CSS5 Media Queries')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Conditional')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS4 Media Queries')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'media.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidades_con_navegadores">Compatibilidades con navegadores</h2> + +<h3 id="media_rule">@media rule</h3> + +<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data </a>y envíenos una solicitud de extracción.</div> + +<p>{{Compat("css.at-rules.media")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Use {{cssxref ("@ apoya")}} para aplicar estilos que dependen del soporte del navegador para varias tecnologías CSS.</li> +</ul> diff --git a/files/es/web/css/min()/index.html b/files/es/web/css/min()/index.html new file mode 100644 index 0000000000..52f81e5765 --- /dev/null +++ b/files/es/web/css/min()/index.html @@ -0,0 +1,120 @@ +--- +title: min() +slug: Web/CSS/min() +tags: + - CSS + - CSS Function + - CSS Grid + - Calculate + - Compute + - Function + - Layout + - Reference + - min +translation_of: Web/CSS/min() +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/en-US/docs/Web/CSS/CSS_Functionals">función</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>min()</code></strong> permite establecer el valor mas pequeño (mas negativo) de una lista de expresiones separadas por coma como el valor de una propiedad CSS. La función <code>min()</code> puede ser usada donde quiera que {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, o {{CSSxRef("<integer>")}} esté permitido.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-min.html")}}</div> + + + +<p>En el primer ejemplo anterior, el ancho será al menos 200px, pero será menor si el viewport es menor de 400px de ancho (en tal caso 1vw sería 4px, así 50vw sería 200px). En otras palabras, el ancho máximo es 200px. Piensa en el valor de <code>min()</code> como el máximo valor que una propiedad puede tener.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La funcion <code>min()</code> toma uno o mas expresiones separadas por coma como sus parametros, y usa el valor mas pequeño de esas expresiones como su valor.</p> + +<p>Las expresiones pueden ser expresiones matemáticas (usando operadores aritmeticos), valores literales, u otras expresiones, tales como {{CSSxRef("attr", "attr()")}}, que se evaluan a un tipo de argumento válido (like {{CSSxRef("<length>")}}).</p> + +<p>Se pueden usar distintas unidades de medida para cada valor en la expresion, si se desea. Tambien puede usar parentesis para establecer orden de percedencia si lo requiere.</p> + +<ul> + <li>Expresiones matematicas que involucran porcentajes para los anchos y altos en columnas de tabla, grupos de columnas de tabla, filas de tablas, y celdas de tablas en ambos layout fijo y tablas pueden ser tratados como si se hubiera especificado <code>auto</code></li> + <li>Es permitido anidar <code>max()</code> y otros funciones <code>min()</code> como valores de expresiones. Las expresiones son completamente matematicas asi que puede usarse adicion directa, resta, multiplicacion y division sin usar la funcion <code>calc()</code> en si.</li> + <li>La expresion pueden ser valores combinando los operadores de adicion ( + ), resta ( - ), multiplicacion ( * ) y division ( / ) , aplicando las reglas estandares de precedencia de operadores. Asegurese de poner un espacio en cada lado de los operandos de + y -. Los oprandos en la expresion pueden ser cualquier valor de sintaxis <code><length></code>.</li> + <li>Usted puede (y con frecuencia necesitara) combinar los valores <code>min()</code> y <code>max()</code>, o usar <code>min()</code> dentro de las funciones <code>clamp()</code> o <code>calc()</code>.</li> + <li>Usted puede proveer mas de 2 argumentos, si tiene multiples restricciones para aplicar.</li> +</ul> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="Probemas_de_accesibilidad">Probemas de accesibilidad</h2> + +<p>Cuando use <code>min()</code> para establecer el maximo valor de fonr size, asegurese de que la fuente todavia podra ser escalada por lo menos al 200% para mas legibilidad (sin tecnologia asistente como la funcion de zoom).</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Setting_a_maximum_size_for_a_label_and_input">Setting a maximum size for a label and input</h3> + +<p>Otro caso de uso para las funciones CSS es establecer la maxima longitud en controles enformularios responsive: habilitando el ancho de los labels y los inputs para encogerse como lo hace el ancho del formulario</p> + +<p>Veamos algo de CSS:</p> + +<pre class="brush: css; notranslate">input, label { + padding: 2px; + box-sizing: border-box; + display: inline-block; + width: min(40%, 400px); + background-color: pink; +} + +form { + margin: 4px; + border: 1px solid black; + padding: 4px; +} +</pre> + +<p>Aquí, el formulario en si mismo, junto con el margen, borde y padding, será de 100% del ancho de su padre. Declaramos el input y el label para que sean menores ente el 40% del ancho del formulario hasta el padding o de 400px, el que sea menor. En otras palabras, lo mas ancho que el label y el input pueden ser es de 400px. Lo mas estrecho que serán es 40% del ancho del formulario, el cual en pantallas de relojes inteligentes es muy pequeño.</p> + +<pre class="brush: html notranslate"><form> + <label>Escribe algo:</label> + <input type="text"> +</form> +</pre> + +<p>{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Values", "#calc-notation", "min()")}}</td> + <td>{{Spec2("CSS4 Values")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.types.min")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{CSSxRef("calc", "calc()")}}</li> + <li>{{CSSxRef("clamp", "clamp()")}}</li> + <li>{{CSSxRef("max", "max()")}}</li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS Values</a></li> +</ul> diff --git a/files/es/web/css/min-block-size/index.html b/files/es/web/css/min-block-size/index.html new file mode 100644 index 0000000000..91847cba2d --- /dev/null +++ b/files/es/web/css/min-block-size/index.html @@ -0,0 +1,94 @@ +--- +title: min-block-size +slug: Web/CSS/min-block-size +translation_of: Web/CSS/min-block-size +--- +<div>{{CSSRef}}{{SeeCompatTable}} </div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>min-block-size</code></strong> define el tamaño mínimo horizontal o vertical de un elemento de bloque, dependiendo de los modos de escritura. Esto corresponde ya sea a la propiedad {{cssxref("min-width")}} o a la propiedad {{cssxref("min-height")}}, dependiendo del valor de {{cssxref("writing-mode")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/min-block-size.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <length> values */ +min-block-size: 100px; +min-block-size: 5em; + +/* <percentage> values */ +min-block-size: 10%; + +/* Keyword values */ +min-block-size: max-content; +min-block-size: min-content; +min-block-size: fit-content; +min-block-size: fill-available; + +/* Global values */ +min-block-size: inherit; +min-block-size: initial; +min-block-size: unset; +</pre> + +<p>Si el modo de escritura es verticalmente orientado, el valor de <code>min-block-size</code> se relaciona con el mínimo ancho del elemento; de otra manera, se relaciona al mínimo alto del elemento. Una propiedad relacionada es {{cssxref("min-inline-size")}}, que define la otra dimensión del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>min-block-size</code> toma los mismos valores de las propiedades {{cssxref("min-width")}} y {{cssxref("min-height")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML </h3> + +<pre class="brush: html"><p class="exampleText">Example text</p> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS </h3> + +<pre class="brush: css">.exampleText { + writing-mode: vertical-rl; + background-color: yellow; + min-block-size: 200px; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo")}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-min-block-size", "min-block-size")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.min-block-size")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("min-width")}} y {{cssxref("min-height")}}</li> + <li>{{cssxref("writing-mode")}}</li> +</ul> diff --git a/files/es/web/css/min-height/index.html b/files/es/web/css/min-height/index.html new file mode 100644 index 0000000000..d61f0edf4e --- /dev/null +++ b/files/es/web/css/min-height/index.html @@ -0,0 +1,72 @@ +--- +title: min-height +slug: Web/CSS/min-height +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/min-height +--- +<div>{{CSSRef}}</div> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>La propiedad <code>min-height</code> se utiliza para definir la altura mínima de un elemento dado. Impide que el valor de la propiedad {{ Cssxref("height") }} llegue a ser más pequeña que la especificada en la altura mínima (<code>min-height</code>).</p> + +<p>{{cssinfo}}</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h3 id="Values" name="Values">Values</h3> + +<ul> + <li><strong>length</strong> : puede ser en px, cm, in (píxel, centímetro o inches)</li> + <li><strong>percentage</strong> : % especificado como un porcentaje de la altura del bloque contenedor.</li> +</ul> + +<h3 id="Examples" name="Examples">Examples</h3> + +<pre>table {min-height: 75%;} + +form {min-height: 0;} +</pre> + +<h3 id="Notes" name="Notes">Notes</h3> + +<p>{{ Cssxref("min-height") }} tiene prioridad sobre los valores {{ Cssxref("max-height") }} y {{ Cssxref("height") }}.</p> + +<h3 id="Esdpecificaciones" name="Esdpecificaciones">Esdpecificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS2/visudet.html#min-max-heights">CSS 2.1</a></li> +</ul> + +<h3 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>6</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("Modelo de caja", "modelo de caja") }}, {{ Cssxref("width", "ancho") }}, {{ Cssxref("-moz-box-sizing", "tamaño de cajas -Mozilla") }}, {{ Cssxref("min-height", "altura mínima") }}, {{ Cssxref("max-height", "altura máxima") }}</p> diff --git a/files/es/web/css/min-inline-size/index.html b/files/es/web/css/min-inline-size/index.html new file mode 100644 index 0000000000..bf650c31a7 --- /dev/null +++ b/files/es/web/css/min-inline-size/index.html @@ -0,0 +1,95 @@ +--- +title: min-inline-size +slug: Web/CSS/min-inline-size +translation_of: Web/CSS/min-inline-size +--- +<div>{{CSSRef}}{{SeeCompatTable}} </div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>min-inline-size</code></strong> define el tamaño mínimo horizontal o vertical de los elementos en bloque, dependiendo del modo de escritura. Esto corresponde ya sea a la propiedad {{cssxref("min-width")}} o la propiedad {{cssxref("min-height")}}, dependiendo del valor de {{cssxref("writing-mode")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/min-inline-size.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <length> values */ +min-inline-size: 100px; +min-inline-size: 5em; + +/* <percentage> values */ +min-inline-size: 10%; + +/* Keyword values */ +min-inline-size: max-content; +min-inline-size: min-content; +min-inline-size: fit-content; +min-inline-size: fill-available; + +/* Global values */ +min-inline-size: inherit; +min-inline-size: initial; +min-inline-size: unset; +</pre> + +<p>Si el modo de escritura es verticalmente orientado, el valor de <code>min-inline-size</code> se relaciona con el mínimo alto del elemento; de otra manera, se relaciona al mínimo ancho del elemento. Una propiedad relacionada es {{cssxref("min-block-size")}}, que define la otra dimensión del elemento.</p> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>min-inline-size</code> toma los mismos valores de las propiedades {{cssxref("min-width")}} y {{cssxref("min-height")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML </h3> + +<pre class="brush: html"><p class="exampleText">Example text</p> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS </h3> + +<pre class="brush: css">.exampleText { + writing-mode: vertical-rl; + background-color: yellow; + block-size: 5%; + min-inline-size: 200px; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo")}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-min-inline-size", "min-inline-size")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.min-inline-size")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("min-width")}} y {{cssxref("min-height")}}</li> + <li>{{cssxref("writing-mode")}}</li> +</ul> diff --git a/files/es/web/css/min-width/index.html b/files/es/web/css/min-width/index.html new file mode 100644 index 0000000000..efe24d19b1 --- /dev/null +++ b/files/es/web/css/min-width/index.html @@ -0,0 +1,80 @@ +--- +title: min-width +slug: Web/CSS/min-width +tags: + - Referencia_CSS +translation_of: Web/CSS/min-width +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Sumario" name="Sumario">Sumario</h3> + +<p>La propiedad <code>min-width</code> se usa para determinar la anchura mínima de un elemento. Previene que la propiedad {{ Cssxref("width") }} pueda ser inferior que <code>min-width</code>.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: 0</li> + <li>Aplicable a: elementos de tipo bloque.</li> + <li>{{ Xref_cssinherited() }}: no</li> + <li>Porcentajes: se refieren a la anchura del bloque contenedor.</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}:</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<p>min-width: <longitud> | <porcentaje> | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available</p> + +<h3 id="Valores" name="Valores">Valores</h3> + +<ul> + <li><strong>length</strong> : puede ser expresado en px, cm, in</li> + <li><strong>percentage</strong> : expresado con "%" es un porcentaje del ancho del elemento contenedor.</li> + <li><strong>-moz-max-content</strong> : el ancho intrínseco preferido {{ Fx_minversion_inline(3) }}</li> + <li><strong>-moz-min-content</strong> : el ancho intrínseco mínimo {{ Fx_minversion_inline(3) }}</li> + <li><strong>-moz-available</strong> : el ancho del contenedor menos el margen horizontal, borde y padding {{ Fx_minversion_inline(3) }}</li> + <li><strong>-moz-fit-content</strong> : igual que <code>-moz-min-content</code> {{ Fx_minversion_inline(3) }}</li> +</ul> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre>table{min-width: 75%;} + +form{min-width: 0;} +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>{{ Cssxref("min-width") }} sobrescribe los valores de {{ Cssxref("max-width") }} y {{ Cssxref("width") }}.</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS2/visudet.html#min-max-widths">CSS 2.1</a></li> +</ul> + +<h3 id="Compatibilidad_entre_navegadores" name="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>6</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p><a href="es/CSS/box_model">box model</a>, {{ Cssxref("min-height") }}, {{ Cssxref("-moz-box-sizing") }}, {{ Cssxref("width") }}, {{ Cssxref("max-width") }}</p> diff --git a/files/es/web/css/minmax()/index.html b/files/es/web/css/minmax()/index.html new file mode 100644 index 0000000000..eefc519566 --- /dev/null +++ b/files/es/web/css/minmax()/index.html @@ -0,0 +1,214 @@ +--- +title: minmax() +slug: Web/CSS/minmax() +tags: + - CSS + - CSS Grid + - Diseño + - Función CSS + - Referencia + - Rejilla CSS + - Web +translation_of: Web/CSS/minmax() +--- +<p>La función <code><strong>minmax</strong></code><strong><code>()</code></strong> <a href="/en-US/docs/Web/CSS">en CSS</a> define un rango de tamaño mayor o igual que <var>min</var> y menor o igual que <var>max</var>. Se emplea con <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">rejillas CSS</a>.</p> + +<pre class="brush: css no-line-numbers notranslate">/* valores <ancho no-flexible>, <ancho de la banda> */ +minmax(200px, 1fr) +minmax(400px, 50%) +minmax(30%, 300px) +minmax(100px, max-content) +minmax(min-content, 400px) +minmax(max-content, auto) +minmax(auto, 300px) +minmax(min-content, auto) + +/* valores <ancho fijo>, <ancho de la banda> */ +minmax(200px, 1fr) +minmax(30%, 300px) +minmax(400px, 50%) +minmax(50%, min-content) +minmax(300px, max-content) +minmax(200px, auto) + +/* valores <ancho no-flexible>, <ancho fijo> */ +minmax(400px, 50%) +minmax(30%, 300px) +minmax(min-content, 200px) +minmax(max-content, 200px) +minmax(auto, 300px) +</pre> + +<h2 id="Sintáxis">Sintáxis</h2> + +<p>Una función que toma dos parámetros, <em>min</em> y <em>max</em>.</p> + +<p>Cada parámetro puede ser un valor <code><length></code>, <code><percentage></code>, <code><flex></code> o uno de los valores de las palabras clave <code>max-content</code>, <code>min-content</code> o <code>auto</code>.</p> + +<p>Si <var>max</var> < <var>min</var>, entonces <var>max</var> es ignorado y se trata a <code>minmax(min,max)</code> como <var>min</var>. Como un máximo, un valor {{cssxref("flex_value","<flex>")}} establece el factor flex de una banda; no es válido como un mínimo.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>Una medida no negativa.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Un porcentaje no negativo, relativo al tamaño en línea del contenedor de la rejilla en bandas de columna y el tamaño de bloque del contenedor de rejilla en bandas de fila. Si el tamaño del contenedor de la rejilla depende del tamaño de sus bandas, entonces <code><percentage></code> debe ser tratado como <code>auto</code>. El {{glossary("user agent")}} puede ajustar las contribuciones del tamaño implícito de la banda al tamaño del contenedor de rejilla y así incrementar el tamaño final de la banda y así incrementar el tamaño final en la cantidad mínima que resultase al respetar el porcentaje.</dd> + <dt>{{cssxref("<flex>")}}</dt> + <dd>Una dimension no-negativa con la unidad <code>fr</code> especificando el factor flex de la banda. Cada banda de tamaño <code><flex></code> toma una parte del espacio disponible en proporción a su factor flex.</dd> + <dt><code>max-content</code></dt> + <dd>Representa la mayor contribución max-content de los elementos de rejilla que ocupan la banda.</dd> + <dt><code>min-content</code></dt> + <dd>Representa la mayor contribución min-content de los elementos de rejilla que ocupan la banda.</dd> + <dt><code>auto</code></dt> + <dd>Como un máximo, idéntico a <code>max-content</code>. Como un mínimo representa el mayor tamaño mínimo (como se especifica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de rejilla que ocupan la banda.</dd> +</dl> + +<h3 id="Sintáxis_formal">Sintáxis formal</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h3 id="Propiedades_CSS">Propiedades CSS</h3> + +<p>La función <code>minmax()</code> puede ser usada dentro de: </p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> +</ul> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[3] notranslate">#container { + display: grid; + grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px; + grid-gap: 5px; + box-sizing: border-box; + height: 200px; + width: 100%; + background-color: #8cffa0; + padding: 10px; +} + +#container > div { + background-color: #8ca0ff; + padding: 5px; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="container"> + <div> + Elemento tan ancho como el contenido,<br/> + pero de máximo 300 píxeles. + </div> + <div> + Elemento con un ancho flexible, pero con un mínimo de 200 píxeles. + </div> + <div> + Elemento inflexible de 150 píxeles de ancho. + </div> +</div></pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Example", "100%", 200)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Especificación</th> + <th>Estado</th> + <th>Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}</td> + <td>{{Spec2("CSS Grid")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página se generó desde datos estructurados. Si quieres contribuir a los datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request..</div> + +<p>{{Compat("css.properties.grid-template-columns.minmax")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Guía de Grid Layout: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Track_sizing_and_minmax()">Conceptos básicos del diseño con rejilla - tamaño de bandas con minmax()</a></em></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Rejillas CSS, valores lógicos y modos de escritura</a></li> + <li> + <p>Video tutorial: <em><a href="http://gridbyexample.com/video/series-minmax/">Presentando minmax()</a></em></p> + </li> +</ul> + +<section class="Quick_links" id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/Reference"><strong>Referencia CSS</strong></a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> + <li data-default-state="open"><a href="#"><strong>Guías</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Conceptos básicos del diseño con rejillas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relación a otros métodos de diseño</a></li> + <li><a href=" +/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Posicionamiento basado en líneas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Diseño usando lineas con nombre</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Posicionamiento automático en el diseño con rejillas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineamiento de cajas en el diseño con rejillas</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Rejillas, valores lógicos y modos de escritura</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout y la Accesibilidad</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout y una Mejora Progresiva</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Elaborando diseños comunes utilizando rejillas</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Propiedades</strong></a> + <ol> + <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + </ol> + </li> + <li data-default-state="open"><a href="#"><strong>Glosario</strong></a> + <ol> + <li><a href="/en-US/docs/Glossary/Grid">Rejilla</a></li> + <li><a href="/en-US/docs/Glossary/Grid_lines">Líneas de rejilla</a></li> + <li><a href="/en-US/docs/Glossary/Grid_tracks">Bandas de rejilla</a></li> + <li><a href="/en-US/docs/Glossary/Grid_cell">Celdas de rejilla</a></li> + <li><a href="/en-US/docs/Glossary/Grid_areas">Áreas de rejilla</a></li> + <li><a href="/en-US/docs/Glossary/Gutters">Canaletes</a></li> + <li><a href="/en-US/docs/Glossary/Grid_Axis">Eje de rejilla</a></li> + <li><a href="/en-US/docs/Glossary/Grid_rows">Fila</a></li> + <li><a href="/en-US/docs/Glossary/Grid_column">Columna</a></li> + </ol> + </li> +</ol> +</section> diff --git a/files/es/web/css/mozilla_extensions/index.html b/files/es/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..8a6f0cb5bc --- /dev/null +++ b/files/es/web/css/mozilla_extensions/index.html @@ -0,0 +1,616 @@ +--- +title: Extensiones CSS de Mozilla +slug: Web/CSS/Mozilla_Extensions +translation_of: Web/CSS/Mozilla_Extensions +--- +<div>{{CSSRef}}</div> + +<p>Mozilla soporta ciertas extensiones de <a href="/en-US/docs/CSS" title="CSS">CSS</a> con el prefijo<code> -moz-</code>.</p> + +<p>Algunas de estas propiedades han sido incluidas en una especificación de CSS en borrador para incluirlas en la recomendación final, pero aún están en proceso experimental. La propiedad final estándar puede ser diferente de la implementación actual con prefijo. Algunas de estas propiedades no estándares solo son aplicables en elementos XUL.</p> + +<p>Cuando se estandarizan y se añade el soporte para la variante sin prefijo, las propiedades prefijadas se abandonan.</p> + +<h2 id="Propiedades_estándares_prefijadas_de_Mozilla">Propiedades estándares prefijadas de Mozilla</h2> + +<div style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;"><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">A</span> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{Cssxref("-moz-appearance")}}</li> +</ul> +<span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">B</span> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{Cssxref("-moz-background-inline-policy")}}</li> + <li>{{cssxref("box-sizing", "-moz-box-sizing")}}</li> +</ul> +<span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">C D E</span> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{Cssxref("clip-path")}} (aplicado en SVG y otros)</li> + <li>{{Cssxref("-moz-column-count")}}</li> + <li>{{Cssxref("-moz-column-fill")}}</li> + <li>{{Cssxref("-moz-column-gap")}}</li> + <li>{{Cssxref("-moz-column-width")}}</li> + <li>{{Cssxref("-moz-column-rule")}}</li> + <li>{{Cssxref("-moz-column-rule-width")}}</li> + <li>{{Cssxref("-moz-column-rule-style")}}</li> + <li>{{Cssxref("-moz-column-rule-color")}}</li> +</ul> +<span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">F G</span> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{Cssxref("filter")}} (aplicado en SVG y otros)</li> + <li>{{Cssxref("-moz-font-feature-settings")}}</li> + <li>{{cssxref("-moz-font-language-override")}}</li> +</ul> +<span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">H</span> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{Cssxref("-moz-hyphens")}}</li> +</ul> +<span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">I—O</span> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{Cssxref("mask")}} (aplicado en SVG y otros)</li> +</ul> +<span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">P</span> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{Cssxref("pointer-events")}} (aplicado en SVG y otros)</li> +</ul> +<span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">Q—T</span> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{cssxref("-moz-text-align-last")}}</li> + <li>{{Cssxref("text-decoration-color","-moz-text-decoration-color")}}</li> + <li>{{Cssxref("text-decoration-line","-moz-text-decoration-line")}}</li> + <li>{{Cssxref("text-decoration-style","-moz-text-decoration-style")}}</li> +</ul> +</div> + +<h2 id="Propiedades_no_estándar_prefijadas_propietarias_de_Mozilla_(no_usar_en_sitios_web)">Propiedades no estándar prefijadas propietarias de Mozilla (no usar en sitios web)</h2> + +<div style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;"><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">A B</span> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{Cssxref("-moz-binding")}}</li> + <li>{{Cssxref("-moz-border-bottom-colors")}}</li> + <li>{{Cssxref("-moz-border-end")}}</li> + <li>{{Cssxref("-moz-border-end-color")}}</li> + <li>{{Cssxref("-moz-border-end-style")}}</li> + <li>{{Cssxref("-moz-border-end-width")}}</li> + <li>{{Cssxref("-moz-border-left-colors")}}</li> + <li>{{Cssxref("-moz-border-right-colors")}}</li> + <li>{{Cssxref("-moz-border-start")}}</li> + <li>{{Cssxref("-moz-border-start-color")}}</li> + <li>{{Cssxref("-moz-border-start-style")}}</li> + <li>{{Cssxref("-moz-border-start-width")}}</li> + <li>{{Cssxref("-moz-border-top-colors")}}</li> + <li>{{Cssxref("-moz-box-align")}}</li> + <li>{{Cssxref("-moz-box-direction")}}</li> + <li>{{Cssxref("-moz-box-flex")}}</li> + <li>{{Cssxref("-moz-box-ordinal-group")}}</li> + <li>{{Cssxref("-moz-box-orient")}}</li> + <li>{{Cssxref("-moz-box-pack")}}</li> +</ul> + +<p><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">C—F</span></p> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{Cssxref("-moz-float-edge")}}</li> + <li>{{Cssxref("-moz-force-broken-image-icon")}}</li> +</ul> + +<p><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">G H I</span></p> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{Cssxref("-moz-image-region")}}</li> +</ul> + +<p><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">J—M</span></p> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{Cssxref("-moz-margin-end")}}</li> + <li>{{Cssxref("-moz-margin-start")}}</li> +</ul> + +<p><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">N O</span></p> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{cssxref("-moz-orient")}}</li> + <li>{{Cssxref("-moz-outline-radius")}}</li> + <li>{{Cssxref("-moz-outline-radius-bottomleft")}}</li> + <li>{{Cssxref("-moz-outline-radius-bottomright")}}</li> + <li>{{Cssxref("-moz-outline-radius-topleft")}}</li> + <li>{{Cssxref("-moz-outline-radius-topright")}}</li> +</ul> + +<p><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">P Q R</span></p> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{Cssxref("-moz-padding-end")}}</li> + <li>{{Cssxref("-moz-padding-start")}}</li> +</ul> + +<p><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">S</span></p> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{Cssxref("-moz-script-level")}}</li> + <li>{{Cssxref("-moz-script-min-size")}}</li> + <li>{{Cssxref("-moz-script-size-multiplier")}}</li> + <li>{{Cssxref("-moz-stack-sizing")}}</li> +</ul> + +<p><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">T U V</span></p> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{Cssxref("-moz-user-focus")}}</li> + <li>{{Cssxref("-moz-user-input")}}</li> + <li>{{Cssxref("-moz-user-modify")}}</li> + <li>{{Cssxref("-moz-user-select")}}</li> +</ul> + +<p><span style="font-family: georgia,times,times new roman,serif; font-size: 1.6em;">W—Z</span></p> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{Cssxref("-moz-window-shadow")}}</li> +</ul> +</div> + +<h2 id="Propiedades_prefijadas_anteriormente_ahora_estándar">Propiedades prefijadas anteriormente, ahora estándar</h2> + +<ul style="margin-left: 0; padding-left: 0; list-style-type: none;"> + <li>{{Cssxref("animation", "-moz-animation")}} [Aún se acepta la versión con prefijo]</li> + <li>{{Cssxref("animation-delay", "-moz-animation-delay")}} [Aún se acepta la versión con prefijo]</li> + <li>{{Cssxref("animation-direction", "-moz-animation-direction")}} [Aún se acepta la versión con prefijo]</li> + <li>{{Cssxref("animation-duration", "-moz-animation-duration")}} [Aún se acepta la versión con prefijo]</li> + <li>{{Cssxref("animation-fill-mode", "-moz-animation-fill-mode")}} [Aún se acepta la versión con prefijo]</li> + <li>{{Cssxref("animation-iteration-count", "-moz-animation-iteration-count")}} [Aún se acepta la versión con prefijo]</li> + <li>{{Cssxref("animation-name", "-moz-animation-name")}} [Aún se acepta la versión con prefijo]</li> + <li>{{Cssxref("animation-play-state", "-moz-animation-play-state")}} [Aún se acepta la versión con prefijo]</li> + <li>{{Cssxref("animation-timing-function","-moz-animation-timing-function")}} [Aún se acepta la versión con prefijo]</li> + <li>{{Cssxref("backface-visibility", "-moz-backface-visibility")}} [Aún se acepta la versión con prefijo]</li> + <li>{{Cssxref("background-clip", "-moz-background-clip")}}</li> + <li>{{Cssxref("background-origin", "-moz-background-origin")}}</li> + <li>{{Cssxref("background-size", "-moz-background-size")}}</li> + <li>{{Cssxref("border-image","-moz-border-image")}}</li> + <li>{{Cssxref("opacity","-moz-opacity")}}</li> + <li>{{Cssxref("outline","-moz-outline")}}</li> + <li>{{Cssxref("outline-color","-moz-outline-color")}}</li> + <li>{{Cssxref("outline-offset","-moz-outline-offset")}}</li> + <li>{{Cssxref("outline-style","-moz-outline-style")}}</li> + <li>{{Cssxref("outline-width","-moz-outline-width")}}</li> + <li>{{Cssxref("perspective", "-moz-perspective")}} [Aún se acepta la versión con prefijo]</li> + <li>{{Cssxref("perspective-origin","-moz-perspective-origin")}} [Aún se acepta la versión con prefijo]</li> + <li>{{Cssxref("transform", "-moz-transform")}} [Aún se acepta la versión con prefijo]</li> + <li>{{Cssxref("transform-origin", "-moz-transform-origin")}} [Aún se acepta la versión con prefijo]</li> + <li>{{Cssxref("transform-style", "-moz-transform-style")}} [Aún se acepta la versión con prefijo]</li> + <li>{{cssxref("transition", "-moz-transition")}} [Aún se acepta la versión con prefijo]</li> + <li>{{cssxref("transition-delay", "-moz-transition-delay")}} [Aún se acepta la versión con prefijo]</li> + <li>{{cssxref("transition-duration", "-moz-transition-duration")}} [Aún se acepta la versión con prefijo]</li> + <li>{{cssxref("transition-property", "-moz-transition-property")}} [Aún se acepta la versión con prefijo]</li> + <li>{{cssxref("transition-timing-function", "-moz-transition-timing-function")}} [Aún se acepta la versión con prefijo]</li> +</ul> + +<h2 id="Valores">Valores</h2> + +<h3 id="Para_todas_las_propiedades">Para todas las propiedades</h3> + +<ul> + <li>{{cssxref("initial","-moz-initial")}}</li> +</ul> + +<h3 id="-moz-appearance" name="-moz-appearance">{{Cssxref("-moz-appearance")}}</h3> + +<ul style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;"> + <li><code>button</code></li> + <li><code>button-arrow-down</code></li> + <li><code>button-arrow-next</code></li> + <li><code>button-arrow-previous</code></li> + <li><code>button-arrow-up</code></li> + <li><code>button-bevel</code></li> + <li><code>checkbox</code></li> + <li><code>checkbox-container</code></li> + <li><code>checkbox-label</code></li> + <li><code>checkmenuitem</code></li> + <li><code>dialog</code></li> + <li><code>groupbox</code></li> + <li><code>listbox</code></li> + <li><code>menuarrow</code></li> + <li><code>menucheckbox</code></li> + <li><code>menuimage</code></li> + <li><code>menuitem</code></li> + <li><code>menuitemtext</code></li> + <li><code>menulist</code></li> + <li><code>menulist-button</code></li> + <li><code>menulist-text</code></li> + <li><code>menulist-textfield</code></li> + <li><code>menupopup</code></li> + <li><code>menuradio</code></li> + <li><code>menuseparator</code></li> + <li><code>-moz-mac-unified-toolbar</code> {{Fx_minversion_inline(3.5)}}</li> + <li><code>-moz-win-borderless-glass</code></li> + <li><code>-moz-win-browsertabbar-toolbox</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-win-communications-toolbox</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-win-glass</code></li> + <li><code>-moz-win-media-toolbox</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-window-button-box</code></li> + <li><code>-moz-window-button-box-maximized</code></li> + <li><code>-moz-window-button-close</code></li> + <li><code>-moz-window-button-maximize</code></li> + <li><code>-moz-window-button-minimize</code></li> + <li><code>-moz-window-button-restore</code></li> + <li><code>-moz-window-titlebar</code></li> + <li><code>-moz-window-titlebar-maximized</code></li> + <li><code>progressbar</code></li> + <li><code>progresschunk</code></li> + <li><code>radio</code></li> + <li><code>radio-container</code></li> + <li><code>radio-label</code></li> + <li><code>radiomenuitem</code></li> + <li><code>resizer</code></li> + <li><code>resizerpanel</code></li> + <li><code>scale-horizontal</code></li> + <li><code>scalethumb-horizontal</code></li> + <li><code>scalethumb-vertical</code></li> + <li><code>scale-vertical</code></li> + <li><code>scrollbarbutton-down</code></li> + <li><code>scrollbarbutton-left</code></li> + <li><code>scrollbarbutton-right</code></li> + <li><code>scrollbarbutton-up</code></li> + <li><code>scrollbar-small</code></li> + <li><code>scrollbarthumb-horizontal</code></li> + <li><code>scrollbarthumb-vertical</code></li> + <li><code>scrollbartrack-horizontal</code></li> + <li><code>scrollbartrack-vertical</code></li> + <li><code>separator</code></li> + <li><code>spinner</code></li> + <li><code>spinner-downbutton</code></li> + <li><code>spinner-textfield</code></li> + <li><code>spinner-upbutton</code></li> + <li><code>statusbar</code></li> + <li><code>statusbarpanel</code></li> + <li><code>tab</code></li> + <li><code>tabpanels</code></li> + <li><code>tab-scroll-arrow-back</code></li> + <li><code>tab-scroll-arrow-forward</code></li> + <li><code>textfield</code></li> + <li><code>textfield-multiline</code></li> + <li><code>toolbar</code></li> + <li><code>toolbarbutton-dropdown</code></li> + <li><code>toolbox</code></li> + <li><code>tooltip</code></li> + <li><code>treeheadercell</code></li> + <li><code>treeheadersortarrow</code></li> + <li><code>treeitem</code></li> + <li><code>treetwisty</code></li> + <li><code>treetwistyopen</code></li> + <li><code>treeview</code></li> + <li><code>window</code></li> +</ul> + +<h3 id="background-image" name="background-image">{{cssxref("background-image")}}</h3> + +<ul> + <li>Gradientes {{Gecko_minversion_inline("1.9.2")}} + <ul> + <li>{{cssxref("-moz-linear-gradient")}}</li> + <li>{{cssxref("-moz-radial-gradient")}}</li> + </ul> + </li> + <li>Elementos {{gecko_minversion_inline("2.0")}} + <ul> + <li>{{cssxref("-moz-element")}}</li> + </ul> + </li> + <li>Sub-imágenes + <ul> + <li>{{cssxref("-moz-image-rect")}} {{gecko_minversion_inline("2.0")}}</li> + </ul> + </li> +</ul> + +<h3 id="border-color" name="border-color">{{Cssxref("border-color")}}</h3> + +<ul> + <li><code>-moz-use-text-color</code> {{Deprecated_inline}} Usar {{Cssxref("currentColor")}}</li> +</ul> + +<h3 id="border-style and outline-style" name="border-style and outline-style">{{Cssxref("border-style")}} y {{Cssxref("outline-style")}}</h3> + +<ul> + <li><code>-moz-bg-inset | -moz-bg-outset | -moz-bg-solid </code> {{obsolete_inline}} abandonado en Gecko 1.9 (Firefox 3.0)</li> +</ul> + +<h3 id="Xref_csscolorvalue()" name="Xref_csscolorvalue()">Palabras clave de {{cssxref("<color>")}}</h3> + +<ul style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;"> + <li><code>-moz-activehyperlinktext</code></li> + <li><code>-moz-hyperlinktext</code></li> + <li><code>-moz-visitedhyperlinktext</code></li> + <li><code>-moz-buttondefault</code></li> + <li><code>-moz-buttonhoverface</code></li> + <li><code>-moz-buttonhovertext</code></li> + <li><code>-moz-default-background-color</code> {{Gecko_minversion_inline("5.0")}}</li> + <li><code>-moz-default-color</code> {{Gecko_minversion_inline("5.0")}}</li> + <li><code>-moz-cellhighlight</code></li> + <li><code>-moz-cellhighlighttext</code></li> + <li><code>-moz-field</code></li> + <li><code>-moz-fieldtext</code></li> + <li><code>-moz-dialog</code></li> + <li><code>-moz-dialogtext</code></li> + <li><code>-moz-dragtargetzone</code></li> + <li><code>-moz-mac-accentdarkestshadow</code></li> + <li><code>-moz-mac-accentdarkshadow</code></li> + <li><code>-moz-mac-accentface</code></li> + <li><code>-moz-mac-accentlightesthighlight</code></li> + <li><code>-moz-mac-accentlightshadow</code></li> + <li><code>-moz-mac-accentregularhighlight</code></li> + <li><code>-moz-mac-accentregularshadow</code></li> + <li><code>-moz-mac-chrome-active</code> {{Gecko_minversion_inline("1.9.1")}}</li> + <li><code>-moz-mac-chrome-inactive</code> {{Gecko_minversion_inline("1.9.1")}}</li> + <li><code>-moz-mac-focusring</code></li> + <li><code>-moz-mac-menuselect</code></li> + <li><code>-moz-mac-menushadow</code></li> + <li><code>-moz-mac-menutextselect</code></li> + <li><code>-moz-menuhover</code></li> + <li><code>-moz-menuhovertext</code></li> + <li><code>-moz-win-communicationstext</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-win-mediatext</code> {{gecko_minversion_inline(1.9)}}</li> + <li><code>-moz-nativehyperlinktext</code> {{Gecko_minversion_inline("1.9.1")}}</li> +</ul> + +<h3 id="display" name="display">{{Cssxref("display")}}</h3> + +<ul style="-moz-column-width: 13em; -webkit-columns: 13em; columns: 13em;"> + <li><code>-moz-box</code></li> + <li><code>-moz-inline-block</code> {{obsolete_inline}}</li> + <li><code>-moz-inline-box</code></li> + <li><code>-moz-inline-grid</code></li> + <li><code>-moz-inline-stack</code></li> + <li><code>-moz-inline-table</code> {{obsolete_inline}}</li> + <li><code>-moz-grid</code></li> + <li><code>-moz-grid-group</code></li> + <li><code>-moz-grid-line</code></li> + <li><code>-moz-groupbox</code></li> + <li><code>-moz-deck</code></li> + <li><code>-moz-popup</code></li> + <li><code>-moz-stack</code></li> + <li><code>-moz-marker</code></li> +</ul> + +<h3 id="empty-cells" name="empty-cells">{{cssxref("empty-cells")}}</h3> + +<ul> + <li><code>-moz-show-background</code> (valor por defecto en modo no estándar <em>quirks mode</em>)</li> +</ul> + +<h3 id="font" name="font">{{Cssxref("font")}}</h3> + +<ul style="-moz-column-width: 13em; -webkit-columns: 13em; columns: 13em;"> + <li><code>-moz-button</code></li> + <li><code>-moz-info</code></li> + <li><code>-moz-desktop</code></li> + <li><code>-moz-dialog</code> (también un color)</li> + <li><code>-moz-document</code></li> + <li><code>-moz-workspace</code></li> + <li><code>-moz-window</code></li> + <li><code>-moz-list</code></li> + <li><code>-moz-pull-down-menu</code></li> + <li><code>-moz-field</code> (también un color)</li> +</ul> + +<h3 id="font-family" name="font-family">{{Cssxref("font-family")}}</h3> + +<ul> + <li><code>-moz-fixed</code></li> +</ul> + +<h3 id="image-rendering" name="image-rendering">{{Cssxref("image-rendering")}}</h3> + +<ul> + <li>{{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}</li> +</ul> + +<h3 id="xref_csslength()" name="xref_csslength()">{{cssxref("<length>")}}</h3> + +<ul> + <li>{{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}</li> +</ul> + +<h3 id="list-style-type" name="list-style-type">{{Cssxref("list-style-type")}}</h3> + +<ul style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;"> + <li><code>-moz-arabic-indic</code></li> + <li><code>-moz-bengali</code></li> + <li><code>-moz-cjk-earthly-branch</code></li> + <li><code>-moz-cjk-heavenly-stem</code></li> + <li><code>-moz-devanagari</code></li> + <li><code>-moz-ethiopic-halehame</code></li> + <li><code>-moz-ethiopic-halehame-am</code></li> + <li><code>-moz-ethiopic-halehame-ti-er</code></li> + <li><code>-moz-ethiopic-halehame-ti-et</code></li> + <li><code>-moz-ethiopic-numeric</code></li> + <li><code>-moz-gujarati</code></li> + <li><code>-moz-gurmukhi</code></li> + <li><code>-moz-hangul</code></li> + <li><code>-moz-hangul-consonant</code></li> + <li><code>-moz-japanese-formal</code></li> + <li><code>-moz-japanese-informal</code></li> + <li><code>-moz-kannada</code></li> + <li><code>-moz-khmer</code></li> + <li><code>-moz-lao</code></li> + <li><code>-moz-malayalam</code></li> + <li><code>-moz-myanmar</code></li> + <li><code>-moz-oriya</code></li> + <li><code>-moz-persian</code></li> + <li><code>-moz-simp-chinese-formal</code></li> + <li><code>-moz-simp-chinese-informal</code></li> + <li><code>-moz-tamil</code></li> + <li><code>-moz-telugu</code></li> + <li><code>-moz-thai</code></li> + <li><code>-moz-trad-chinese-formal</code></li> + <li><code>-moz-trad-chinese-informal</code></li> + <li><code>-moz-urdu</code></li> +</ul> + +<h3 id="overflow" name="overflow">{{Cssxref("overflow")}}</h3> + +<ul> + <li>{{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}</li> + <li>{{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}</li> + <li>{{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}</li> + <li>{{Cssxref("-moz-hidden-unscrollable")}}</li> +</ul> + +<h3 id="text-align" name="text-align">{{Cssxref("text-align")}}</h3> + +<ul> + <li>{{Cssxref("text-align#Mozilla_Extensions","-moz-center")}}</li> + <li>{{Cssxref("text-align#Mozilla_Extensions","-moz-left")}}</li> + <li>{{Cssxref("text-align#Mozilla_Extensions","-moz-right")}}</li> +</ul> + +<h3 id="text-decoration" name="text-decoration">{{Cssxref("text-decoration")}}</h3> + +<ul> + <li><code>-moz-anchor-decoration</code></li> +</ul> + +<h3 id="-moz-user-select" name="-moz-user-select">{{Cssxref("-moz-user-select")}}</h3> + +<ul> + <li><code>-moz-all</code></li> + <li><code>-moz-none</code></li> +</ul> + +<h3 id="width, min-width, and max-width" name="width, min-width, and max-width">{{Cssxref("width")}}, {{Cssxref("min-width")}} y {{Cssxref("max-width")}}</h3> + +<ul> + <li><code>-moz-min-content</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-fit-content</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-max-content</code> {{Fx_minversion_inline(3)}}</li> + <li><code>-moz-available</code> {{Fx_minversion_inline(3)}}</li> +</ul> + +<h2 id="Pseudoelementos_y_pseudoclases">Pseudoelementos y pseudoclases</h2> + +<ul style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;"> + <li>{{Cssxref("::-moz-anonymous-block")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{Cssxref("::-moz-anonymous-positioned-block")}}</li> + <li>{{cssxref(":-moz-any")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{Cssxref(":-moz-any-link")}} (selecciona :link y :visited)</li> + <li>{{Cssxref(":-moz-bound-element")}}</li> + <li>{{Cssxref(":-moz-broken")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref("::-moz-canvas")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-cell-content")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{Cssxref(":-moz-drag-over")}}</li> + <li>{{Cssxref(":-moz-first-node")}}</li> + <li>{{cssxref("::-moz-focus-inner")}}</li> + <li>{{cssxref("::-moz-focus-outer")}}</li> + <li>{{cssxref(":-moz-focusring")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{cssxref(":-moz-full-screen")}} {{gecko_minversion_inline("9.0")}}</li> + <li>{{cssxref(":-moz-full-screen-ancestor")}} {{gecko_minversion_inline("10.0")}}</li> + <li>{{cssxref(":-moz-handler-blocked")}} {{gecko_minversion_inline("1.9.1")}}</li> + <li>{{cssxref(":-moz-handler-crashed")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{cssxref(":-moz-handler-disabled")}} {{gecko_minversion_inline("1.9.1")}}</li> + <li>{{Cssxref("::-moz-inline-table")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref(":-moz-last-node")}}</li> + <li>{{Cssxref(":-moz-list-bullet")}}</li> + <li>{{cssxref(":-moz-list-number")}}</li> + <li>{{cssxref(":-moz-loading")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-locale-dir(ltr)")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-locale-dir(rtl)")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-lwtheme")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-lwtheme-brighttext")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-lwtheme-darktext")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("::-moz-math-stretchy")}}</li> + <li>{{Cssxref(":-moz-only-whitespace")}}</li> + <li>{{Cssxref("::-moz-page")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-page-sequence")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-pagebreak")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-pagecontent")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref(":-moz-placeholder")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{cssxref("::-moz-placeholder")}} {{gecko_minversion_inline("19")}}</li> + <li>{{Cssxref("::-moz-progress-bar")}}</li> + <li>{{Cssxref("::-moz-range-thumb")}}</li> + <li>{{Cssxref("::-moz-range-track")}}</li> + <li>{{Cssxref(":-moz-read-only")}}</li> + <li>{{Cssxref(":-moz-read-write")}}</li> + <li>{{cssxref("::selection","::-moz-selection")}}</li> + <li>{{Cssxref("::-moz-scrolled-canvas")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-scrolled-content")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{Cssxref("::-moz-scrolled-page-sequence")}} <span class="comment">eg@:- bug 331432</span></li> + <li>{{cssxref(":-moz-suppressed")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{cssxref(":-moz-submit-invalid")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{Cssxref("::-moz-svg-foreign-content")}} <span class="comment">example at <a rel="freelink">resource://gre/res/svg.css</a> , *|*::-moz-svg-foreign-content {display: block !important;position: static !important;}</span></li> + <li>{{Cssxref(":-moz-system-metric(images-in-menus)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(mac-graphite-theme)")}} {{gecko_minversion_inline("1.9.1")}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-end-backward)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-end-forward)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-start-backward)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-start-forward)")}} {{Fx_minversion_inline(3)}}</li> + <li>{{Cssxref(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-system-metric(touch-enabled)")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref(":-moz-system-metric(windows-default-theme)")}} {{Fx_minversion_inline(3)}}</li> + <li>{{Cssxref("::-moz-table")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-cell")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-column")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-column-group")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-outer")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-row")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-table-row-group")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref(":-moz-tree-checkbox")}}</li> + <li>{{Cssxref(":-moz-tree-cell")}}</li> + <li>{{Cssxref(":-moz-tree-cell-text")}}</li> + <li>{{Cssxref(":-moz-tree-cell-text(hover)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-tree-column")}}</li> + <li>{{Cssxref(":-moz-tree-drop-feedback")}}</li> + <li>{{Cssxref(":-moz-tree-image")}}</li> + <li>{{Cssxref(":-moz-tree-indentation")}}</li> + <li>{{Cssxref(":-moz-tree-line")}}</li> + <li>{{Cssxref(":-moz-tree-progressmeter")}}</li> + <li>{{Cssxref(":-moz-tree-row")}}</li> + <li>{{Cssxref(":-moz-tree-row(hover)")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref(":-moz-tree-separator")}}</li> + <li>{{Cssxref(":-moz-tree-twisty")}}</li> + <li>{{Cssxref(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{Cssxref(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}</li> + <li>{{cssxref(":-moz-user-disabled")}} {{gecko_minversion_inline("1.9")}}</li> + <li>{{Cssxref("::-moz-viewport")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{Cssxref("::-moz-viewport-scroll")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> + <li>{{cssxref(":-moz-window-inactive")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{Cssxref("::-moz-xul-anonymous-block")}} <span class="comment">eg@:- <a rel="freelink">resource://gre/res/ua.css</a></span></li> +</ul> + +<h2 id="Reglas_arroba_(At-rules)">Reglas arroba (<em>At-rules</em>)</h2> + +<ul> + <li>{{Cssxref("@-moz-document")}}</li> +</ul> + +<h2 id="Media_Queries">Media Queries</h2> + +<ul style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;"> + <li>{{Cssxref("Media_queries#-moz-images-in-menus","-moz-images-in-menus")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries#-moz-mac-graphite-theme","-moz-mac-graphite-theme")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries#-moz-maemo-classic","-moz-maemo-classic")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries#-moz-device-pixel-ratio","-moz-device-pixel-ratio")}} {{gecko_minversion_inline("2.0")}}</li> + <li>{{Cssxref("Media_queries#-moz-scrollbar-end-backward","-moz-scrollbar-end-backward")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries#-moz-scrollbar-end-forward","-moz-scrollbar-end-forward")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries#-moz-scrollbar-start-backward","-moz-scrollbar-start-backward")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries#-moz-scrollbar-start-forward","-moz-scrollbar-start-forward")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries#-moz-scrollbar-thumb-proportional","-moz-scrollbar-thumb-proportional")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries#-moz-touch-enabled","-moz-touch-enabled")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries#-moz-windows-classic","-moz-windows-classic")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries#-moz-windows-compositor","-moz-windows-compositor")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries#-moz-windows-default-theme","-moz-windows-default-theme")}} {{gecko_minversion_inline("1.9.2")}}</li> + <li>{{Cssxref("Media_queries#-moz-windows-theme","-moz-windows-theme")}} {{gecko_minversion_inline("2.0")}}</li> +</ul> + +<h2 id="Otros">Otros</h2> + +<ul style="-moz-column-width: 20em; -webkit-columns: 20em; columns: 20em;"> + <li>{{Cssxref("-moz-alt-content")}} ({{Bug("11011")}})</li> +</ul> diff --git a/files/es/web/css/normal/index.html b/files/es/web/css/normal/index.html new file mode 100644 index 0000000000..fc9f25382b --- /dev/null +++ b/files/es/web/css/normal/index.html @@ -0,0 +1,10 @@ +--- +title: normal +slug: Web/CSS/normal +translation_of: Web/CSS/font-variant +--- +<h2 id="Sumario" name="Sumario">Sumario</h2> +<p>El valor <i>normal</i> en una propiedad CSS, es normalmente el valor medio de entre los posibles valores que puede tomar. Es el valor por defecto, es decir, el que tiene la propiedad si no establecemos uno distinto.</p> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<p>En la propiedad <code>font-style:</code> <code>normal</code> establece que el tipo de fuente no es <code>italic</code> ni <code>oblique</code>.</p> +<p>El la propiedad <code>font-size:</code> <code>normal</code>se establece al tamaño de la fuente al tamaño que esté establecido en el User Agent.</p> diff --git a/files/es/web/css/number/index.html b/files/es/web/css/number/index.html new file mode 100644 index 0000000000..fcbaad3c7a --- /dev/null +++ b/files/es/web/css/number/index.html @@ -0,0 +1,8 @@ +--- +title: <number> +slug: Web/CSS/number +translation_of: Web/CSS/number +--- +<p>{{ CSSRef() }}</p> + +<p>Un valor para una propiedad CSS, un número incluyendo un valor entero {{ Cssxref("integer") }}.</p> diff --git a/files/es/web/css/object-fit/index.html b/files/es/web/css/object-fit/index.html new file mode 100644 index 0000000000..0239910a6b --- /dev/null +++ b/files/es/web/css/object-fit/index.html @@ -0,0 +1,164 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +tags: + - CSS + - Imágenes CSS + - Layout + - Propiedad CSS + - Referencia + - css layout + - object-fit + - 'recipe:css-property' + - size +translation_of: Web/CSS/object-fit +--- +<div>{{CSSRef}}</div> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>object-fit</code></strong> indica cómo el contenido de un <a href="/es/docs/Web/CSS/Elemento_reemplazo">elemento reemplazado</a>, por ejemplo un {{HTMLElement("img")}} o {{HTMLElement("video")}}, debería redimensionarse para ajustarse a su contenedor.</p> + +<p>Se puede alterar la alineación del contenido del elemento reemplazado utilizando la propiedad {{cssxref("object-position")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La propiedad <code>object-fit</code> se especifica con una de las palabras claves elegidas de la siguiente lista de valores.</p> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt><code>contain</code></dt> + <dd>El contenido reemplazado está dimensionado para mantener su relación de aspecto mientras se ajusta dentro del cuadro de contenido del elemento: su tamaño de objeto concreto se resuelve como una restricción de contenido contra el ancho y la altura utilizados del elemento.</dd> + <dt><code>cover</code></dt> + <dd><span class="tlid-translation translation" lang="es"><span title="">El contenido reemplazado se dimensiona para mantener su relación de aspecto mientras llena el cuadro de contenido completo del elemento.</span> <span title="">Si la relación de aspecto del objeto no coincide con la relación de aspecto de su caja, entonces el objeto se recortará para que se ajuste.</span></span></dd> + <dt><code>fill</code></dt> + <dd>Modifica el tamaño del elemento remplazado para llenar el cuadro de contenido. El objeto completo ocupará todo el espacio de la caja. Si el tamaño del elemento no concuerda con el de su caja, se estirará para llenarlo.</dd> + <dt><code>none</code></dt> + <dd>El contenido reemplazado no se redimensiona.</dd> + <dt><code>scale-down</code></dt> + <dd><span class="tlid-translation translation" lang="es"><span title="">El contenido se dimensiona como si <code>none</code> o <code>contain</code> estuvieran especificados, lo que resultaría en un tamaño de objeto concreto más pequeño.</span></span></dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><section> + <h2>object-fit: fill</h2> + <img class="fill" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <img class="fill narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <h2>object-fit: contain</h2> + <img class="contain" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <img class="contain narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <h2>object-fit: cover</h2> + <img class="cover" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <img class="cover narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <h2>object-fit: none</h2> + <img class="none" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <img class="none narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <h2>object-fit: scale-down</h2> + <img class="scale-down" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> + + <img class="scale-down narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> +</section></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">h2 { + font-family: Courier New, monospace; + font-size: 1em; + margin: 1em 0 0.3em; +} + +div { + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: flex-start; + height: 940px; +} + +img { + width: 150px; + height: 100px; + border: 1px solid #000; +} + +.narrow { + width: 100px; + height: 150px; + margin-top: 10px; +} + +.fill { + object-fit: fill; +} + +.contain { + object-fit: contain; +} + +.cover { + object-fit: cover; +} + +.none { + object-fit: none; +} + +.scale-down { + object-fit: scale-down; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Example', 500, 450) }}</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Definicion inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad</h2> + +<p>{{Compat("css.properties.object-fit")}}</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>Otras propiedades CSS relacionadas con imágenes: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> + <li>{{cssxref("background-size")}}</li> +</ul> diff --git a/files/es/web/css/object-position/index.html b/files/es/web/css/object-position/index.html new file mode 100644 index 0000000000..0d76669bdc --- /dev/null +++ b/files/es/web/css/object-position/index.html @@ -0,0 +1,150 @@ +--- +title: object-position +slug: Web/CSS/object-position +translation_of: Web/CSS/object-position +--- +<div>{{CSSRef}}</div> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p>La propiedad <strong><code>object-position</code></strong> determina el alineamiento del elemento dentro de la caja.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sinstaxis</h2> + +<pre class="brush:css">/* <position> valores */ +object-position: 100px 50px; + +/* Valores globales */ +object-position: inherit; +object-position: initial; +object-position: unset; +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code><position></code></dt> + <dd>{{ cssxref("<position>") }}, este es un valor de cuatro que representa una posición en 2D con respecto a los bordes de la caja. Posiciones Relativas o absolutas pueden presentar compensaciones. Tenga en cuenta que la posición puede ser establecida fuera de la caja.</dd> +</dl> + +<h3 id="Sitaxis_formal">Sitaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<h4 id="Ejemplo_de_HTML">Ejemplo de HTML</h4> + +<pre class="brush: html"><img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/> +<img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/> +</pre> + +<h4 id="Ejemplo_de_CSS">Ejemplo de CSS</h4> + +<pre class="brush: css">img { + width: 150px; + height: 100px; + border: 1px solid #000; + background-color: yellow; + margin-right: 1em; +} + +#object-position-1 { + object-position: 10px; +} + +#object-position-2 { + object-position: 20% 10%; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{ EmbedLiveSample('Example', 360, 120) }}</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td> + <p>Las <code>palabras clave from-image</code> y <code>flip</code> an sido añadidas.</p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Definición incial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>31.0</td> + <td>{{ CompatGeckoDesktop("36") }}</td> + <td>{{CompatNo}}</td> + <td>11.60{{ property_prefix("-o") }}<br> + 19.0</td> + <td>{{ CompatNo }}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>4.4.4</td> + <td>{{ CompatGeckoDesktop("36") }}</td> + <td>{{CompatNo}}</td> + <td>11.5{{ property_prefix("-o") }}<br> + 24</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +<br> +[1] WebKit Nightly fixed in bug <a href="https://bugs.webkit.org/show_bug.cgi?id=122811">122811</a>.</div> + +<h2 id="See_also" name="See_also">Contenido relacionado</h2> + +<ul> + <li>Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> +</ul> diff --git a/files/es/web/css/opacity/index.html b/files/es/web/css/opacity/index.html new file mode 100644 index 0000000000..154e4d7d82 --- /dev/null +++ b/files/es/web/css/opacity/index.html @@ -0,0 +1,216 @@ +--- +title: opacity +slug: Web/CSS/opacity +tags: + - CSS + - CSS Reference + - CSS3 + - css3-color +translation_of: Web/CSS/opacity +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La propiedad CSS <code>opacity</code> define la transparencia de un elemento, esto es, en qué grado se superpone el fondo al elemento.</p> + +<p>Usar esta propiedad con un valor diferente a 1 situa al elemento en un nuevo <a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">contexto de apilamiento</a>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox">opacity: <valor alfanumérico></pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code><alphavalue></code></dt> + <dd>Es un número cuyo valor se encuentra entre 0.0 y 1.0, ambos incluidos. Este valor representa la opacidad. Si el valor se sale de la escala, será ajustado al valor válido más cercano. + <table class="standard-table"> + <tbody> + <tr> + <th>valor</th> + <th>Significado</th> + </tr> + <tr> + <td><code>0</code></td> + <td>El elemento es transparente (invisible).</td> + </tr> + <tr> + <td>Cualquier valor entre 0 y 1</td> + <td>El elemento es translúcido.</td> + </tr> + <tr> + <td><code>1</code></td> + <td>El elemento es opaco (sólido).</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<pre class="brush: css">hbox.example { + opacity: 0.5; /* see the background through the hbox */ +}</pre> + +<h3 id="Live_Example" name="Live_Example">Live Example</h3> + +<pre>pre { /* make the box translucent (20% opaque) */ + border: solid red; + opacity: 0.2; + filter: alpha(opacity=20); /* IE8 and lower */ + zoom: 1; /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ +}</pre> + +<pre>pre { /* make the box translucent (50% opaque) */ + border: solid red; + opacity: 0.5; + filter: alpha(opacity=50); /* IE8 and lower */ + zoom: 1; /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ +}</pre> + +<pre>pre { /* make the box translucent (80% opaque) */ + border: solid red; + opacity: 0.8; + filter: alpha(opacity=80); /* IE8 and lower */ + zoom: 1; /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ +}</pre> + +<h3 id="Different_opacity_with_.3Ahover" name="Different_opacity_with_.3Ahover">Variando la opacidad con :hover</h3> + +<pre class="brush: html"><!doctype html> +<html> +<head> +<style> +img.opacity { + opacity: 1; + filter: alpha(opacity=50); + zoom: 1; + } + +img.opacity:hover { + opacity: 0.5; + filter: alpha(opacity=100); + zoom: 1; + } +</style> +</head> + +<body> +<img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity"> +</body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'opacity') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Define <code>opacity</code> como una animación.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Colors', '#opacity', 'opacity') }}</td> + <td>{{ Spec2('CSS3 Colors') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td rowspan="3">Basic support</td> + <td rowspan="3">1.0</td> + <td rowspan="3">{{ CompatGeckoDesktop("1.7") }}</td> + <td>9.0</td> + <td rowspan="3">9.0</td> + <td rowspan="3">1.2 (125)</td> + </tr> + <tr> + <td>8.0<br> + <code>filter: alpha(opacity=xx)<br> + filter: "alpha(opacity=xx)" </code><br> + (both are synonymous)</td> + </tr> + <tr> + <td>4.0<br> + <code>filter: alpha(opacity=xx)</code></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table" style="height: 156px; width: 827px;"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td rowspan="3">Basic support</td> + <td rowspan="3">1.0</td> + <td rowspan="3">{{ CompatGeckoMobile("1.7") }}</td> + <td>9.0</td> + <td rowspan="3">9.0</td> + <td rowspan="3">3.2</td> + </tr> + <tr> + <td>8.0<br> + <code>filter: alpha(opacity=xx)<br> + filter: "alpha(opacity=xx)" </code><br> + (both are synonymous)</td> + </tr> + <tr> + <td>4.0<br> + <code>filter: alpha(opacity=xx)</code></td> + </tr> + </tbody> +</table> +</div> + +<ul> + <li><strong>History:</strong> Prior to Mozilla 1.7 (Firefox 0.9) the<code> -moz-opacity </code>property was implemented in a non-standard (inherited) way. With Firefox 0.9 the behavior changed and the property was renamed to<code> opacity</code>. Since then<code> -moz-opacity </code>was supported just as an alias for<code> opacity</code>.</li> + <li>Gecko 1.9.1 (Firefox 3.5) and later do not support<code> -moz-opacity</code> and support for <code>MozOpacity</code> in javascript was <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=730532" title="https://bugzilla.mozilla.org/show_bug.cgi?id=730532">removed</a> in Gecko 13. By now, you should be using simply<code> opacity</code>.</li> + <li>Prior to version 9, Internet Explorer does not support <code>opacity</code>, rather it supports <code>filter</code> instead.</li> + <li>IE4 to IE9 supported the extended form <code>progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)</code>.</li> + <li>IE8 introduced <code>-ms-filter</code>, which is synonymous with <code>filter</code>. Both are gone in IE10</li> + <li>Similar to <code>-moz-opacity</code>, <code>-khtml-opacity</code> has been dead since early 2004 (release of Safari 1.2).<br> + Konqueror never had support for <code>-khtml-opacity</code> and had been supporting <code>opacity</code> since version 4.0.</li> +</ul> + +<h2 id="See_also" name="See_also">Más información</h2> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms532910(VS.85).aspx">MSDN Microsoft's filter:alpha(opacity=xx)</a></li> +</ul> diff --git a/files/es/web/css/order/index.html b/files/es/web/css/order/index.html new file mode 100644 index 0000000000..fa8484670f --- /dev/null +++ b/files/es/web/css/order/index.html @@ -0,0 +1,172 @@ +--- +title: order +slug: Web/CSS/order +translation_of: Web/CSS/order +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>order</code></strong> especifica el orden utilizado para disponer los elementos en su contenedor flexible. Los elementos estarán dispuestos en orden ascendente según el valor de <code>order</code>. Los elementos con el mismo valor de <code>order</code> se dispondrán en el orden en el cual aparecen en el código fuente.</p> + +<div class="note"> +<p><strong>Nota</strong>: <code>order</code> sólo pretende afectar el orden visual de los elementos y no su orden lógico u orden de tabulación. <code><strong>order</strong></code> no se debe usar en un medio no visual tal como un speech (sintetizador de voz).</p> +</div> + +<p>{{cssinfo}}</p> + +<p>Ver <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Uso de cajas flexibles de CSS</a> para más propiedades e información.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* Valor numérico incluyendo números negativos */ +order: 5; +order: -5; + +/* Valores Globales */ +order: inherit; +order: initial; +order: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><integer></code></dt> + <dd>Representa el grupo ordinal al que el elemento flexible ha sido asignado.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Aquí tiene un trozo de HTML básico:</p> + +<pre class="brush:html;"><!DOCTYPE html> +<header>...</header> +<div id='main'> + <article>Article</article> + <nav>Nav</nav> + <aside>Aside</aside> +</div> +<footer>...</footer></pre> + +<p>El siguiente código CSS debería crear un diseño clásico de dos barra laterales que rodea a un bloque de contenido. EL Módulo de Diseño de Caja Flexible crea automáticamente bloques de tamaño vertical igual y utiliza todo el espacio horizontal disponible.</p> + +<p><span style='background-color: #fafbfc; font-family: Consolas,Monaco,"Andale Mono",monospace; font-size: 1rem; line-height: 19px; white-space: pre;'>#main { display: flex; text-align:center; }</span></p> + +<pre class="brush:css;">#main > article { flex:1; order: 2; } +#main > nav { width: 200px; order: 1; } +#main > aside { width: 200px; order: 3; }</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Examples' ,'','','','Web/CSS/order') }}</p> + +<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2> + +<p>Utilizar la propiedad <code>order</code> rompe la conexión entre la presentación visual y el order original de los elementos en el DOM. Esto afecta de forma negativa a los usuarios que navegan a través de teclado utilizando, por ejemplo, un lector de pantalla. Si el orden visual (CSS) es importante, entonces los lectores de pantallas no podrán acceder a ese dato y recorrerán los elementos de forma desordenada.</p> + +<p>Para más información por favor, referirse a estos artículos:</p> + +<ul> + <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox & the keyboard navigation disconnect — Tink</a></li> + <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html">Source Order Matters | Adrian Roselli</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Definición Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome(21.0)}}{{property_prefix("-webkit")}}<br> + 29</td> + <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("20.0")}}<sup>[2]</sup></td> + <td> + <p>10.0{{property_prefix("-ms")}}<sup>[3]</sup><br> + 11</p> + </td> + <td>12.10</td> + <td>7 {{property_prefix("-webkit")}}<br> + 9</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("18.0")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("20.0")}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>12.10</td> + <td>7 {{property_prefix("-webkit")}}<br> + 9</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Para activar el soporte Flexbox en Firefox 18 and 19, el usuario debe cambiar en preferencias about:config <code>layout.css.flexbox.enabled</code> a <code>true</code>. Las cajas flexibles multi-línea son soportadas desde Firefox 28.</p> + +<p>Actualmente Firefox cambia incorrectamente el orden de tabulación de los elementos. Ver {{bug("812687")}}.</p> + +<p>[2] Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añade soporte para un prefijo <code>-webkit</code> en versión porpietaria por razones compatibilidad web bajo la preferencia <code>layout.css.prefixes.webkit</code>, por defecto en <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} la preferencia por defecto está en <code>true</code>.</p> + +<p>[3] En Internet Explorer 10, un contenedor flexible se declara usando <code>display:-ms-flexbox</code> y no <code>display:flex</code>. La propiedad está implementada bajo el monbre no-estándar <code>-ms-flex-order</code>.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Uso de cajas flexibles de CSS</a></li> +</ul> diff --git a/files/es/web/css/outline-color/index.html b/files/es/web/css/outline-color/index.html new file mode 100644 index 0000000000..f2d6f9c18c --- /dev/null +++ b/files/es/web/css/outline-color/index.html @@ -0,0 +1,152 @@ +--- +title: outline-color +slug: Web/CSS/outline-color +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline-color +--- +<div><span style="line-height: 1.5;">{{CSSRef}}</span></div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>outline-color</code></strong> establece el color del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites del borde, para resaltar al elemento.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* Valores clave */ +outline-color: invert; +outline-color: red; + +/* Valores globales */ +outline-color: inherit; +outline-color: initial; +outline-color: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><color></code></dt> + <dd>Ver {{cssxref("<color>")}} para las diferentes palabras clave y notaciones de colores.</dd> + <dt><code>invert</code></dt> + <dd>Para asegurarse que el contorno es visible, este valor realiza una inversión del color de fondo. Esto hace el contorno más sobresaliente, sin importar el color de fondo. Nótese que los navegadores pueden no soportar este valor. De ser así, solamente considerarán la declaración como inválida</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html;"><p class="example">My outline is blue, da ba dee.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[3]">.example { + /* primero debe definirse la propiedad "outline" */ + outline: 2px solid; + /* hacer el contorno azul */ + outline-color: #0000FF; +}</pre> + +<h3 id="En_vivo">En vivo:</h3> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/outline-color') }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Sin cambios</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Define <code>outline-color</code> como propiedad que se puede animar.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.8")}} [1]</td> + <td>8.0</td> + <td>7.0</td> + <td>1.2 (125)</td> + </tr> + <tr> + <td>valor <code>invert</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} [2]</td> + <td>8.0</td> + <td>{{CompatNo}} [3]</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] En versiones previas a Gecko 1.8: <code>-moz-outline-color</code>.</p> + +<p>[2] El soporte fue retirado en la versión 3.0 (1.9).</p> + +<p>[3] Soportado en Opera 7 pero el soporte fue retirado en Opera 15 con la adopción del motor Chromium/Blink.</p> diff --git a/files/es/web/css/outline-offset/index.html b/files/es/web/css/outline-offset/index.html new file mode 100644 index 0000000000..85bd0c33d7 --- /dev/null +++ b/files/es/web/css/outline-offset/index.html @@ -0,0 +1,136 @@ +--- +title: outline-offset +slug: Web/CSS/outline-offset +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline-offset +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>outline-offset</code></strong> es usada para establecer el espacio entre un contorno {{ cssxref("outline") }} y el límite o borde de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites de su borde.</p> + +<p>{{cssinfo}}</p> + +<p>El espacio será transparente (el elemento padre determinará el fondo).</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="brush:css">/* Valores <length> */ +outline-offset: 3px; +outline-offset: 0.2em; + +/* Valores globales */ +outline-offset: inherit; +outline-offset: initial; +outline-offset: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length></code></dt> + <dd>La anchura del espacio. Ver {{cssxref("<length>")}} para unidades posibles. Valores negativos colocan el borde dentro del elemento.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">p { + outline: dashed thin; + /* Mueve el contorno 10px lejos del borde */ + outline-offset: 10px; + border:1px solid black; +} +</pre> + +<p>Html</p> + +<pre class="brush: html"><p>outline: offset 10px. Border is solid and outline is dashed</p></pre> + +<p>El código anterior producirá este efecto:</p> + +<p>{{ EmbedLiveSample('Examples', '', '', '') }}</p> + +<p>Otro ejemplo:</p> + +<p><span style="outline-offset: 1px; outline: green solid 3px;"><span style="outline-offset: 1px; outline: blue solid 3px;">outline: multiple offsets;</span></span></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Define <code>outline-offset</code> como propiedad que se puede animar.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{ CompatNo() }}</td> + <td>9.5</td> + <td>1.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/outline-style/index.html b/files/es/web/css/outline-style/index.html new file mode 100644 index 0000000000..68b1f9abd4 --- /dev/null +++ b/files/es/web/css/outline-style/index.html @@ -0,0 +1,263 @@ +--- +title: outline-style +slug: Web/CSS/outline-style +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline-style +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>outline-style</code></strong> es usada para establecer el estilo del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de elementos, fuera de los límites del borde, para resaltar un elemento.</p> + +<p>Por lo general, es más conveniente usar la propiedad de forma reducida {{cssxref("outline")}} en vez de<code> outline-style</code>,<code> outline-width </code>y<code> outline-color</code> por separado.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* Valores clave */ +outline-style: auto; +outline-style: none; +outline-style: dotted; +outline-style: dashed; +outline-style: solid; +outline-style: double; +outline-style: groove; +outline-style: ridge; +outline-style: inset; +outline-style: outset; + +/* Valores globales */ +outline-style: inherit; +outline-style: initial; +outline-style: unset; +</pre> + +<h2 id="Valores">Valores</h2> + +<p><code><br-style> </code>puede ser uno de los siguientes:</p> + +<dl> + <dt>none</dt> + <br> + <dd>Sin contorno ({{Cssxref("outline-width")}} es<code> 0</code>).</dd> + <dt>dotted</dt> + <br> + <dd style="outline: 10px dotted red;">Línea punteada. El contorno es una serie de puntos.</dd> + <dt>dashed</dt> + <br> + <dd style="outline: 10px dashed red;">Línea discontinua. El contorno es una serie de segmentos de línea cortos.</dd> + <dt>solid</dt> + <br> + <dd style="outline: 10px solid red;">El contorno es una línea simple.</dd> + <dt>double</dt> + <br> + <dd style="outline: 10px double red;">El contorno son dos líneas paralelas. El valor de {{Cssxref("outline-width")}} es la suma de los dos líneas y el espacio entre ellas.</dd> + <dt>groove</dt> + <br> + <dd style="outline: 10px groove red;">El contorno parece estar tallado dentro del lienzo.</dd> + <dt>ridge</dt> + <br> + <dd style="outline: 10px ridge red;">Lo opuesto a <code> groove</code>: el contorno parece salir del lienzo.</dd> + <dt>inset</dt> + <br> + <dd style="outline: 10px inset red;">El contorno hace a la caja verse como si estuviera embedida dentro del lienzo.</dd> + <dt>outset</dt> + <br> + <dd style="outline: 10px outset red;">Lo opuesto a <code> inset</code>: el contorno hace a la caja verse como si estuviera saliendo del lienzo.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example_1_-_dotted_and_dashed" name="Example_1_-_dotted_and_dashed">Ejemplo 1 - <code>dotted</code> y <code>dashed</code></h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <div class="dotted"> + <p class="dashed">Outline Demo</p> + </div> +</div> </pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.dotted { + outline-style: dotted; /* same result as "outline: dotted" */ +} +.dashed { + outline-style: dashed; +} + +/* To make the Demo clearer */ +* { outline-width: 10px; padding: 15px; } </pre> + +<p>{{ EmbedLiveSample('Example_1_-_dotted_and_dashed') }}</p> + +<h2 id="Example_2_-_solid_and_double" name="Example_2_-_solid_and_double">Ejemplo 2 - <code>solid</code> y <code>double</code></h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><div> + <div class="solid"> + <p class="double">Outline Demo</p> + </div> +</div> </pre> + +<h3 id="CSS_2">CSS</h3> + +<pre class="brush: css">.solid { + outline-style: solid; +} +.double { + outline-style: double; +} + +/* To make the Demo clearer */ +* { outline-width: 10px; padding: 15px; } </pre> + +<p>{{ EmbedLiveSample('Example_2_-_solid_and_double') }}</p> + +<h2 id="Example_3_-_groove_and_ridge" name="Example_3_-_groove_and_ridge">Ejemplo 3 - <code>groove</code> y <code>ridge</code></h2> + +<h3 id="HTML_3">HTML</h3> + +<pre class="brush: html"><div> + <div class="groove"> + <p class="ridge">Outline Demo</p> + </div> +</div></pre> + +<h3 id="CSS_3">CSS</h3> + +<pre class="brush: css">.groove { + outline-style: groove; +} +.ridge { + outline-style: ridge; +} + +/* To make the Demo clearer */ +* { outline-width: 10px; padding: 15px; }</pre> + +<p>{{ EmbedLiveSample('Example_3_-_groove_and_ridge') }}</p> + +<h2 id="Example_4_-_inset_and_outset" name="Example_4_-_inset_and_outset">Ejemplo 4 - <code>inset</code> y <code>outset</code></h2> + +<h3 id="HTML_4">HTML</h3> + +<pre class="brush: html"><div> + <div class="inset"> + <p class="outset">Outline Demo</p> + </div> +</div></pre> + +<h3 id="CSS_4">CSS</h3> + +<pre class="brush: css">.inset { + outline-style: inset; +} +.outset { + outline-style: outset; +} + +/* To make the Demo clearer */ +* { outline-width: 10px; padding: 15px; }</pre> + +<p>{{ EmbedLiveSample('Example_4_-_inset_and_outset') }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Se añade el valor <code>auto</code></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>1.5 (1.8)<sup>[1]</sup></td> + <td>8.0</td> + <td>7.0</td> + <td>1.2 (125)</td> + </tr> + <tr> + <td><code>auto</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>2.1</td> + <td>{{CompatGeckoMobile("46")}}</td> + <td>10</td> + <td>12</td> + <td>3.2</td> + </tr> + <tr> + <td><code>auto</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] En navegadores anteriores a <a href="/en-US/docs/Gecko">Gecko</a> 1.8 (<a href="/en-US/docs/Firefox_1.5_for_developers">Firefox 1.5</a>) este efecto podía lograrse usando la <a href="/es/docs/Web/CSS/Referencia_CSS/Extensiones_CSS_Mozilla">CSS de Mozilla</a> {{Cssxref("-moz-outline-style")}}.</p> diff --git a/files/es/web/css/outline-width/index.html b/files/es/web/css/outline-width/index.html new file mode 100644 index 0000000000..1b52fef25b --- /dev/null +++ b/files/es/web/css/outline-width/index.html @@ -0,0 +1,176 @@ +--- +title: outline-width +slug: Web/CSS/outline-width +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline-width +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>outline-width</code></strong> es usada para establecer el grosor del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites del borde, para resaltar al elemento:</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* Valores clave */ +outline-width: thin; +outline-width: medium; +outline-width: thick; + +/* Valores <length> */ +outline-width: 1px; +outline-width: 0.1em; + +/* Valores globales */ +outline-width: inherit; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>thin</code></dt> + <dd>Depende del Agente Usuario. Generalmente <strong>1px</strong> en navegadores de escritorio como Firefox.</dd> + <dt><code>medium</code></dt> + <dd>Depende del Agente Usuario. Generalmente <strong>3px</strong> en navegadores de escritorio como Firefox.</dd> + <dt><code>thick</code></dt> + <dd>Depende del Agente Usuario. Generalmente <strong>5px</strong> en navegadores de escritorio como Firefox.</dd> + <dt><code><length></code></dt> + <dd>Ver valores {{cssxref("<length>")}}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><span id="thin">thin</span> +<span id="medium">medium</span> +<span id="thick">thick</span> +<span id="twopixels">2px</span> +<span id="oneex">1ex</span> +<span id="twoem">2em</span> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">span { + outline-style: solid; + display: inline-block; + margin: 20px; +} + +#thin { + outline-width: thin; +} + +#medium { + outline-width: medium; +} + +#thick { + outline-width: thick; +} + +#twopixels { + outline-width: 2px; +} + +#oneex { + outline-width: 1ex; +} + +#twoem { + outline-width: 2em; +} + +</pre> + +<p>{{EmbedLiveSample('Examples', '100%', '80')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Sin cambios</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-width')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Define <code>outline-width</code> como propiedad que puede ser animada.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>1.5 (1.8)<sup>[1]</sup></td> + <td>8.0</td> + <td>7.0</td> + <td>1.2 (125)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] En navegadores previos a <a href="/es/docs/Gecko">Gecko</a> 1.8 (<a href="/es/docs/Firefox_1.5_para_Desarrolladores">Firefox 1.5</a>) se podía lograr esencialmente el mismo efecto usando la <a href="/es/docs/Web/CSS/Referencia_CSS/Extensiones_CSS_Mozilla">Extensión CSS de Mozilla</a> {{Cssxref("-moz-outline-width")}}.</p> diff --git a/files/es/web/css/outline/index.html b/files/es/web/css/outline/index.html new file mode 100644 index 0000000000..288c5fca34 --- /dev/null +++ b/files/es/web/css/outline/index.html @@ -0,0 +1,128 @@ +--- +title: outline +slug: Web/CSS/outline +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline +--- +<div>{{CSSRef}}</div> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>outline</code></strong> es una <a href="/es/docs/Web/CSS/Shorthand_properties">forma reducida</a> para establecer una o más de las propiedades individuales de contorno {{cssxref("outline-style")}}, {{cssxref("outline-width")}} y {{cssxref("outline-color")}} en una sola declaración. En la mayoría de los casos el uso de este atajo es preferible y más conveniente.</p> + +<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div> + +<p>Al igual que con todas las propiedades abreviadas, cualquier subvalor omitido se establecerá en su valor inicial.</p> + +<h3 id="Border_vs_outline">Border vs outline</h3> + +<p>Los bordes y los contornos son muy similares. Sin embargo, los contornos difieren de los bordes de la siguiente manera:</p> + +<ul> + <li>Los contornos no ocupan espacio, son dibujados por encima del elemento. Por lo tanto, su aparición u ocultamiento no causa un redibujado de las cajas. No suma en el tamaño de la caja y no hay movimiento o desplazamiento de los elementos como con {{cssxref("border")}}.</li> + <li>Los contornos pueden no ser rectangulares. Si el elemento se distribuye en varias líneas, el contorno no forma un rectágulo para encerrar a todo el elemento. A <strong>diferencia de los bordes</strong>, el contorno no está abierto en algunos lados: + <p><span style="outline: 2px solid #666666;">Ejemplo: contorno aplicado a<br> + varias líneas</span></p> + + <p><span style="border: 2px solid #666666;">Ejemplo: borde aplicado a<br> + varias líneas</span></p> + </li> +</ul> + +<div style="">{{cssinfo}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre><code>/* style */ +outline: solid; + +/* color | style */ +outline: #f66 dashed; + +/* style | width */ +outline: inset thick; + +/* color | style | width */ +outline: green solid 3px; + +/* Global values */ +outline: inherit; +outline: initial; +outline: unset;</code></pre> + +<h3 id="Valores">Valores</h3> + +<p>Uno, dos o tres valores, en orden arbitrario:</p> + +<dl> + <dt><code><outline-width></code></dt> + <dd>Ver {{Cssxref("outline-width")}}.</dd> + <dt><code><outline-style></code></dt> + <dd>Ver {{Cssxref("outline-style")}}.</dd> + <dt><code><outline-color></code></dt> + <dd>Desde Gecko 1.9 (Firefox 3), es usado el valor de la propiedad {{Cssxref("color")}} del elemento (color de primer plano). Ver {{Cssxref("outline-color")}}.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><a href="#">Este link tiene un estilo especial para el foco</a> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a { + border: 1px solid; + border-radius: 3px; + display: inline-block; + margin: 10px; + padding: 5px; +} + +a:focus { + outline: 4px dotted #e73; + outline-offset: 4px; + background: #ffa; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", "100%", 60)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td>Sin cambios</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div> + + +<p>{{Compat("css.properties.outline")}}</p> +</div> diff --git a/files/es/web/css/overflow-y/index.html b/files/es/web/css/overflow-y/index.html new file mode 100644 index 0000000000..7650175806 --- /dev/null +++ b/files/es/web/css/overflow-y/index.html @@ -0,0 +1,138 @@ +--- +title: overflow-y +slug: Web/CSS/overflow-y +tags: + - CSS + - CSS Modelo de Caja + - Propiedad CSS +translation_of: Web/CSS/overflow-y +--- +<div>{{CSSRef}}</div> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS </a><code>overflow-y</code> define qué se debe mostrar cuando el contenido se desborda de los extremos superior e inferior de un elemento en bloque.</p> + +<div class="blockIndicator note"> +<p>Si {{cssxref("overflow-x")}} es <code>hidden</code>, <code>scroll</code> o <code>auto</code> y esta propiedad es <code>visible</code> (por defecto) se calculará implícitamente como <code>auto</code>.</p> +</div> + +<p>{{EmbedInteractiveExample("pages/css/overflow-y.html")}}</p> + +<div class="hidden"> +<p>El código para este ejemplo interactivo está almacenado en un repositorio de GitHub. Si quieres contribuir con el proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos un pull request.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css"><code>/* Valores con una palabra clave */ +overflow-y: visible; +overflow-y: hidden; +overflow-y: scroll; +overflow-y: auto;</code> + +/* Valores globales */ +overflow-y: inherit; +overflow-y: initial; +overflow-y: unset;</pre> + +<p>La propiedad <code>overflow-y</code> es especificada con una sola palabra clave escogida de la lista de abajo.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>visible</code></dt> + <dd>El contenido no es recortado y puede ser visualizado fuera de los extremos superior e inferior del área de padding.</dd> + <dt><code>hidden</code></dt> + <dd>El contenido es recortado, si es necesario, para que se ajuste verticalmente dentro del área de padding. No se dispone de las barras de desplazamiento.</dd> + <dt><code>scroll</code></dt> + <dd>El contenido es recortado, si es necesario, para que se ajuste verticalmente dentro del área de padding. Los navegadores muestran las barras de desplazamiento independientemente de si el contenido se recorta o no (esto evita que las barras de desplazamiento aparezcan o desaparezcan cuando el contenido cambia). Las impresoras pueden imprimir el contenido desbordado.</dd> + <dt><code>auto</code></dt> + <dd>Depende del cliente. Si el contenido se recorta dentro del área de padding, se vería igual que con la propiedad <code>visible</code>, pero aún determinado por un contexto de formato de bloque. Los navegadores de escritorio proveen barras de desplazamiento si el contenido se desborda.</dd> +</dl> + +<h3 id="Sintaxis_Formal">Sintaxis Formal</h3> + +<pre>{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li><code>overflow-y:hidden</code> — Esconde el texto fuera de la caja + <div id="div1"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + </div> + </li> + + <li><code>overflow-y:scroll</code> — Agrega una barra scroll si se necesita + <div id="div2"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + </div> + </li> + + <li><code>overflow-y:visible</code> — Muestra el texto fuera de la caja si se necesita + <div id="div3"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + </div> + </li> + + <li><code>overflow-y:auto</code> — En la mayoría de los navegadores, equivalente a <code>scroll</code> + <div id="div4"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + </div> + </li> +</ul> + +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#div1, +#div2, +#div3, +#div4 { + border: 1px solid black; + width: 250px; + height: 100px; +} + +#div1 { overflow-y: hidden; margin-bottom: 12px;} +#div2 { overflow-y: scroll; margin-bottom: 12px;} +#div3 { overflow-y: visible; margin-bottom: 120px;} +#div4 { overflow-y: auto; margin-bottom: 120px;} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<figure> +<p>{{EmbedLiveSample("Ejemplo", "100%", "780")}}</p> +</figure> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y') }}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{Compat("css.properties.overflow-y")}}</div> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>Propiedades CSS relacionadads: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-x")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li> +</ul> diff --git a/files/es/web/css/overflow/index.html b/files/es/web/css/overflow/index.html new file mode 100644 index 0000000000..bdc053d2d4 --- /dev/null +++ b/files/es/web/css/overflow/index.html @@ -0,0 +1,118 @@ +--- +title: overflow (excedente) +slug: Web/CSS/overflow +translation_of: Web/CSS/overflow +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Summary" name="Summary">Sumario</h2> + +<p>La propiedad CSS <code>overflow</code> especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.</p> + +<p>Usando la propiedad <code>overflow</code> con un valor distinto a <code>visible</code>, valor por defecto, creará un nuevo <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">contexto de formatos de bloques</a>. Esto es técnicamente necesario debido a que si un elemento flotante interceptara con otros forzaría a reajustar el contenido alrededor de los elementos que se interceden. El reajuste sucedería luego de cada desplazamiento, y llevaría a un desplazamiento demasiado lento.</p> + +<p>Nótese que, cambiando programáticamente el valor de <code>scrollTop</code> al elemento HTML relevante, incluso cuando <code>overflow</code> tenga el valor <code>hidden</code> un elemento podría necesitar ser desplazado.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintáxis formal</a>: {{csssyntax("overflow")}}</pre> + +<pre>overflow: visible +overflow: hidden +overflow: scroll +overflow: auto + +overflow: inherit +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code>visible</code></dt> + <dd>Valor por defecto. El contenido no es recortado, podría ser dibujado fuera de la caja contenedora.</dd> + <dt><code>hidden</code></dt> + <dd>El contenido es recortado y no se muestran barras de posición.</dd> + <dt><code>scroll</code></dt> + <dd>El contenido es recortado y el navegador web usa las barras de desplazamiento, se haya recortado contenido o no. Esto previene cualquier problema con las barras de desplazamiento apareciendo o desapareciendo en un entorno dinámico. Puede que las impresoras impriman contenido excedente.</dd> + <dt><code>auto</code></dt> + <dd>Depende del agente de usuario. Navegadores de escritorio como Firefox proveen barras de desplazamiento si hay contenido excedente.</dd> +</dl> + +<h4 id="Mozilla_Extensions" name="Mozilla_Extensions">Extensiones de Mozilla</h4> + +<dl> + <dt><code>-moz-scrollbars-none </code>{{ obsolete_inline() }}</dt> + <dd>Usar <code>overflow:hidden</code>.</dd> + <dt><code>-moz-scrollbars-horizontal </code>{{ Deprecated_inline() }}</dt> + <dd>Es preferible el uso de {{ Cssxref("overflow-x") }} y {{ Cssxref("overflow-y") }}.</dd> + <dt><code>-moz-scrollbars-vertical </code>{{ Deprecated_inline() }}</dt> + <dd>Es preferible el uso de {{ Cssxref("overflow-x") }} y {{ Cssxref("overflow-y") }}.</dd> + <dt>-moz-hidden-unscrollable {{ non-standard_inline() }}</dt> + <dd>Es usada principalmente para uso interno y por temas. Deshabilita el desplazamiento en elementos XML root y <code><html></code>, <code> <body></code> usando las flechas del teclado o la rueda del ratón.</dd> +</dl> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<pre class="brush: css">p { + width: 12em; + border: dotted; + overflow: visible; /* dibuja barras si es necesario */ +} +</pre> + +<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (por defecto)<br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<pre>p { overflow: hidden; /* no se dibujan barras */ } +</pre> + +<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<pre>p { overflow: scroll; /* se dibujan ambas barras */ } +</pre> + +<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<pre>p { overflow: auto; /* se dibujan barras según se necesite */ } +</pre> + +<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Box', '#overflow1', 'overflow') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>Sin cambios.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad en navegadores</h2> + +<p>{{Compat("css.properties.overflow")}}</p> + +<h2 id="See_also" name="See_also">Véase también</h2> + +<ul> + <li>Propiedades CSS relacionadas: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }} (</li> +</ul> diff --git a/files/es/web/css/padding-block-end/index.html b/files/es/web/css/padding-block-end/index.html new file mode 100644 index 0000000000..f853d3bd67 --- /dev/null +++ b/files/es/web/css/padding-block-end/index.html @@ -0,0 +1,96 @@ +--- +title: padding-block-end +slug: Web/CSS/padding-block-end +translation_of: Web/CSS/padding-block-end +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>padding-block-end</code></strong> define el relleno de final de bloque lógico de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, o {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<p>Esto se relaciona con {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}}, y {{cssxref("padding-inline-end")}}, que define los otros rellenos del elemento.</p> + +<div>{{EmbedInteractiveExample("pages/css/padding-block-end.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <length> values */ +padding-block-end: 10px; /* An absolute length */ +padding-block-end: 1em; /* A length relative to the text size */ + +/* <percentage> value */ +padding-block-end: 5%; /* A padding relative to the block container's width */ + +/* Global values */ +padding-block-end: inherit; +padding-block-end: initial; +padding-block-end: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>padding-block-end</code> toma los mismos valores de la propiedad {{cssxref("padding-left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML </h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS </h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + padding-block-end: 20px; + background-color: #C8C800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block-end", "padding-block-end")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.padding-block-end")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/padding-block-start/index.html b/files/es/web/css/padding-block-start/index.html new file mode 100644 index 0000000000..3beaf5ca81 --- /dev/null +++ b/files/es/web/css/padding-block-start/index.html @@ -0,0 +1,96 @@ +--- +title: padding-block-start +slug: Web/CSS/padding-block-start +translation_of: Web/CSS/padding-block-start +--- +<p>{{CSSRef}}{{SeeCompatTable}}</p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>padding-block-start</code></strong> define el bloque lógico de inicio de relleno de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, or {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<p>Esto se relaciona con {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, y {{cssxref("padding-inline-end")}}, que define los otros rellenos del elemento.</p> + +<div>{{EmbedInteractiveExample("pages/css/padding-block-start.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <length> values */ +padding-block-start: 10px; /* An absolute length */ +padding-block-start: 1em; /* A length relative to the text size */ + +/* <percentage> value */ +padding-block-start: 5%; /* A padding relative to the block container's width */ + +/* Global values */ +padding-block-start: inherit; +padding-block-start: initial; +padding-block-start: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>padding-block-start</code> toma los mismos valores de la propiedad {{cssxref("padding-left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML </h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS </h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + padding-block-start: 20px; + background-color: #C8C800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block-start", "padding-block-start")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.padding-block-start")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/padding-block/index.html b/files/es/web/css/padding-block/index.html new file mode 100644 index 0000000000..c237b61c4b --- /dev/null +++ b/files/es/web/css/padding-block/index.html @@ -0,0 +1,96 @@ +--- +title: padding-block +slug: Web/CSS/padding-block +translation_of: Web/CSS/padding-block +--- +<p>{{CSSRef}}{{SeeCompatTable}} </p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>padding-block</code></strong> define el relleno lógico de inicio y final del bloque de un elemento, que se asigna a las propiedades físicas del relleno según el modo de escritura del elemento, la direccionalidad y la orientación del texto.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +padding-block: 10px 20px; /* An absolute length */ +padding-block: 1em 2em; /* relative to the text size */ +padding-block: 5% 2%; /* relative to the nearest block container's width */ +padding-block: 10px; /* sets both start and end values */ + +/* Keyword values */ +padding-block: auto; + +/* Global values */ +padding-block: inherit; +padding-block: initial; +padding-block: unset; +</pre> + +<p>Estos valores corresponde a las propiedades {{cssxref("padding-top")}} y {{cssxref("padding-bottom")}}, o {{cssxref("padding-right")}}, y {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<p>Los valores pueden ser establecidos individualmente como {{cssxref("padding-block-start")}} y {{cssxref("padding-block-end")}}. La propiedad de dirección en línea es {{cssxref("padding-inline")}} que establece {{cssxref("padding-inline-start")}}, y {{cssxref("padding-inline-end")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">La propiedad </span></font>padding-block</code> toma los mismos valores que la propiedad {{cssxref("padding-left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML </h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS </h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + padding-block: 20px 40px; + background-color: #c8c800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block", "padding-block")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.padding-block")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/padding-bottom/index.html b/files/es/web/css/padding-bottom/index.html new file mode 100644 index 0000000000..8e025a0c83 --- /dev/null +++ b/files/es/web/css/padding-bottom/index.html @@ -0,0 +1,135 @@ +--- +title: padding-bottom +slug: Web/CSS/padding-bottom +translation_of: Web/CSS/padding-bottom +--- +<p>{{CSSRef}}</p> + +<h2 id="Sumario">Sumario</h2> + +<p>La propiedad <strong><code>padding-bottom</code></strong> <a href="https://developer.mozilla.org/en/CSS" title="CSS">CSS</a> establece el espacio de relleno requerido en la parte inferior del elemento. El <a href="https://developer.mozilla.org/en/CSS/box_model#padding">área de padding</a> es el espacio entre el contenido del elemento y su borde. Contrariamente de la propiedad <strong><code>margin-bottom</code></strong>, valores negativos no son válidos.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* <length> values (Valores fijos)*/ +padding-bottom: 0.5em; +padding-bottom: 0; +padding-bottom: 2cm; + +/* <percentage> value (Valores porcentuales)*/ +padding-bottom: 10%; + +/* Global values (Valores globales)*/ +padding-bottom: inherit; +padding-bottom: initial; +padding-bottom: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><length></dt> + <dd>Especifica un valor positivo fijo. Veáse {{cssxref("<length>")}} para más detalles.</dd> + <dt><percentage></dt> + <dd>Especifica un porcentaje con respecto al bloque que lo contiene.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="eval">.content { padding-bottom: 5%; } +.sidebox { padding-bottom: 10px; } +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>padding-bottom</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No change from {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}.</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/padding-inline-end/index.html b/files/es/web/css/padding-inline-end/index.html new file mode 100644 index 0000000000..dd30fe2d15 --- /dev/null +++ b/files/es/web/css/padding-inline-end/index.html @@ -0,0 +1,96 @@ +--- +title: padding-inline-end +slug: Web/CSS/padding-inline-end +translation_of: Web/CSS/padding-inline-end +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>padding-inline-end</code></strong> define el relleno final lógico en línea de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, o {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<p>Esto se relaciona con {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, and {{cssxref("padding-inline-start")}}, que define los otros rellenos del elemento.</p> + +<div>{{EmbedInteractiveExample("pages/css/padding-inline-end.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <length> values */ +padding-inline-end: 10px; /* An absolute length */ +padding-inline-end: 1em; /* A length relative to the text size */ + +/* <percentage> value */ +padding-inline-end: 5%; /* A padding relative to the block container's width */ + +/* Global values */ +padding-inline-end: inherit; +padding-inline-end: initial; +padding-inline-end: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>padding-inline-end</code> toma los mismos valores de la propiedad {{cssxref("padding-left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML </h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS </h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + padding-inline-end: 20px; + background-color: #C8C800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline-end", "padding-inline-end")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.padding-inline-end")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/padding-inline-start/index.html b/files/es/web/css/padding-inline-start/index.html new file mode 100644 index 0000000000..696b045077 --- /dev/null +++ b/files/es/web/css/padding-inline-start/index.html @@ -0,0 +1,96 @@ +--- +title: padding-inline-start +slug: Web/CSS/padding-inline-start +translation_of: Web/CSS/padding-inline-start +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong> <code>padding-inline-start</code></strong> define el relleno de inicio lógico en línea de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, or {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<p>Esto se relaciona con {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, y {{cssxref("padding-inline-end")}}, que define los rellenos de los otros elementos.</p> + +<div>{{EmbedInteractiveExample("pages/css/padding-inline-start.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <length> values */ +padding-inline-start: 10px; /* An absolute length */ +padding-inline-start: 1em; /* A length relative to the text size */ + +/* <percentage> value */ +padding-inline-start: 5%; /* A padding relative to the block container's width */ + +/* Global values */ +padding-inline-start: inherit; +padding-inline-start: initial; +padding-inline-start: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>padding-inline-start</code> toma los mismos valores de la propiedad {{cssxref("padding-left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML </h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS </h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-lr; + padding-inline-start: 20px; + background-color: #C8C800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.padding-inline-start")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/padding-inline/index.html b/files/es/web/css/padding-inline/index.html new file mode 100644 index 0000000000..9e471d734e --- /dev/null +++ b/files/es/web/css/padding-inline/index.html @@ -0,0 +1,96 @@ +--- +title: padding-inline +slug: Web/CSS/padding-inline +translation_of: Web/CSS/padding-inline +--- +<p>{{CSSRef}}{{SeeCompatTable}} </p> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>padding-inline</code></strong> define el relleno en línea lógico de inicio y final de un elemento, que asigna las propiedades de relleno físicas dependiendo del modo de escritura del elemento, direccionalidad, y orientación del texto.</p> + +<pre class="brush:css no-line-numbers">/* <length> values */ +padding-inline: 10px 20px; /* An absolute length */ +padding-inline: 1em 2em; /* relative to the text size */ +padding-inline: 5% 2%; /* relative to the nearest block container's width */ +padding-inline: 10px; /* sets both start and end values */ + +/* Keyword values */ +padding-inline: auto; + +/* Global values */ +padding-inline: inherit; +padding-inline: initial; +padding-inline: unset; +</pre> + +<p>Estos valores corresponden a las propiedades{{cssxref("padding-top")}} y {{cssxref("padding-bottom")}}, o {{cssxref("padding-right")}}, y {{cssxref("padding-left")}} dependiendo de los valores definidos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.</p> + +<p>Los valores pueden ser establecidos individualmente como {{cssxref("padding-inline-start")}} y {{cssxref("padding-inline-end")}}. La propiedad de la dirección bloque es {{cssxref("padding-block")}} que establece {{cssxref("padding-block-start")}}, y {{cssxref("padding-block-end")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>padding-inline</code> toma los mismos valores de la propiedad {{cssxref("padding-left")}}.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML </h3> + +<pre class="brush: html"><div> + <p class="exampleText">Example text</p> +</div> +</pre> + +<h3 id="Contenido_CSS">Contenido CSS </h3> + +<pre class="brush: css">div { + background-color: yellow; + width: 120px; + height: 120px; +} + +.exampleText { + writing-mode: vertical-rl; + padding-inline: 20px 40px; + background-color: #c8c800; +}</pre> + +<p>{{EmbedLiveSample("Ejemplo", 140, 140)}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline", "padding-inline")}}</td> + <td>{{Spec2("CSS Logical Properties")}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("css.properties.padding-inline")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}</li> + <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li> +</ul> diff --git a/files/es/web/css/padding-top/index.html b/files/es/web/css/padding-top/index.html new file mode 100644 index 0000000000..a635951fcc --- /dev/null +++ b/files/es/web/css/padding-top/index.html @@ -0,0 +1,135 @@ +--- +title: padding-top +slug: Web/CSS/padding-top +translation_of: Web/CSS/padding-top +--- +<p>{{CSSRef}}</p> + +<h2 id="Summary" name="Summary">Sumario</h2> + +<p class="brush: js">La propiedad <strong><code>padding-top</code></strong> <a href="/en/CSS" title="CSS">CSS</a> establece el espacio de relleno requerido en la parte superior del elemento. El <a href="/en/CSS/box_model#padding">área de padding</a> es el espacio entre el contenido del elemento y su borde. Contrariamente de la propiedad <strong><code>margin-top</code></strong>, valores negativos no son válidos.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="brush:css">/* <length> values (valores fijos) */ +padding-top: 0.5em; +padding-top: 0; +padding-top: 2cm; + +/* <percentage> value (valores porcentuales) */ +padding-top: 10%; + +/* Global values (valores globales) */ +padding-top: inherit; +padding-top: initial; +padding-top: unset; +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Especifica un valor positivo fijo. Veáse {{cssxref("<length>")}} para más detalles.</dd> + <dt><code><percentage></code></dt> + <dd>Especifica un porcentaje con respecto al bloque que lo contiene.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<pre class="brush: css">.content { padding-top: 5%; } +.sidebox { padding-top: 10px; } +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding-top') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-top') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>padding-top</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No change from {{ Specname('CSS1', '#padding-top', 'padding-top') }}.</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding-top', 'padding-top') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/padding/index.html b/files/es/web/css/padding/index.html new file mode 100644 index 0000000000..fdff58428a --- /dev/null +++ b/files/es/web/css/padding/index.html @@ -0,0 +1,178 @@ +--- +title: padding +slug: Web/CSS/padding +tags: + - Propiedades CSS +translation_of: Web/CSS/padding +--- +<p>{{CSSRef}}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>padding</code></strong> establece el espacio de relleno requerido por todos los lados de un elemento. El <a href="/en/CSS/box_model#padding" title="http://developer.mozilla.org/en/CSS/Box_model#padding">área de padding</a> es el espacio entre el contenido del elemento y su borde (<code>border</code>). No se permiten valores negativos.</p> + +<p>La propiedad padding es un atajo para evitar la asignación de cada lado por separado (<code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>).</p> + +<p>{{EmbedInteractiveExample("pages/css/padding.html")}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Padding crea espacio extra dentro de un elemento. En contraste, <code>margin</code> crea espacio extra <em>alrededor </em>de un elemento.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintaxis formal</a>: {{csssyntax("padding")}}</pre> + +<h3 id="Valores">Valores</h3> + +<p>Esta propiedad puede ser especificada utilizando uno, dos, tres o cuatro de los siguientes valores:</p> + +<dl> + <dt><code><length></code></dt> + <dd>Especifica un ancho fijo no negativo. Ver más detalles {{ cssxref("<length>") }} .</dd> + <dt><code><percentage></code></dt> + <dd>Con respecto a la anchura("width") del bloque que lo contiene.</dd> +</dl> + +<ul> + <li><strong>Uno:</strong> un valor unico se aplica a los 4 lados.</li> + <li><strong>Dos:</strong> el primer valor se aplica a <strong>arriba y abajo</strong>, el segundo valor se aplica a <strong>derecha e izquierda</strong>.</li> + <li><strong>Tres:</strong> el primer valor se aplica a <strong>arriba</strong>, el segundo valor a <strong>derecha e izquierda</strong> y el tercer valor se aplica a <strong>abajo </strong>del elemento.</li> + <li><strong>Cuatro:</strong> el primer valor se aplica a <strong>arriba</strong>, el segundo valor se aplica a la <strong>derecha</strong>, el tercer valor se aplica a <strong>abajo </strong>y el cuarto valor se aplica a la <strong>izquierda</strong>. </li> +</ul> + +<h3 id="Ejemplos">Ejemplos</h3> + +<pre class="brush: css notranslate"> padding: 5%; /* aplica 5% de padding en todos los lados*/ +</pre> + +<pre class="brush: css notranslate"> padding: 10px; /* aplica 10px de padding en todos los lados */ +</pre> + +<pre class="brush: css notranslate"> padding: 10px 20px; /* arriba y abajo, 10px de padding */ + /* izquierda y derecha, 20px de padding */ +</pre> + +<pre class="brush: css notranslate"> padding: 10px 3% 20px; /* arriba, 10px de padding */ + /* izquierda y derecha, 3% de padding */ + /* bottom, 20px padding */ +</pre> + +<pre class="brush: css notranslate"> padding: 1em 3px 30px 5px; /* arriba 1em padding */ + /* derecha 3px padding */ + /* abajo 30px padding */ + /* izquierda 5px padding + /* en dirección de las agujas del reloj */ +</pre> + +<p style="padding: 5% 1em; border: outset currentColor;">border:outset; padding:5% 1em;</p> + +<h2 id="Live_Sample" name="Live_Sample">Ver ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><h4>¡Hola Mundo!</h4> +<h3>El padding es diferente en esta linea.</h3> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">h4{ + background-color: green; + padding: 50px 20px 20px 50px; +} + +h3{ + background-color: blue; + padding: 400px 50px 50px 400px; +} +</pre> + +<p>{{ LiveSampleLink('Live_Sample', 'Live Sample Link') }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>Sin cambio.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Sin cambio.</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding', 'padding') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li> +</ul> diff --git a/files/es/web/css/perspective/index.html b/files/es/web/css/perspective/index.html new file mode 100644 index 0000000000..6ab1d25783 --- /dev/null +++ b/files/es/web/css/perspective/index.html @@ -0,0 +1,196 @@ +--- +title: perspective +slug: Web/CSS/perspective +tags: + - CSS + - Capas + - Propiedad CSS + - Referencia + - Transformaciones CSS + - Web + - graficos +translation_of: Web/CSS/perspective +--- +<p>{{ CSSRef("CSS Transforms") }} {{ SeeCompatTable() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <code>perspective</code> <a href="/en/CSS" title="CSS">CSS</a> determina la distancia entre el plano z=0 y el usuario para dar algo de perspectiva al elemento 3D posicionado. Cada elemento 3D con z>0 se hace más grande y con z<0 se vuelve más pequeño. La intensidad del efecto es determinado por el valor de esta propiedad.</p> + +<p>Parte de los elementos 3D que se encuentran destrás del usuario, es decir que su coordenada del eje z es mayor que el valor de la propiedad perspective de CSS no es dibujada.</p> + +<p>La posición de origen que se usará para la transformación es por defecto colocado en el centro del elemento, pero su posición puede ser cambiada usando la propiedad {{ cssxref("perspective-origin") }}.</p> + +<p>Usando esta propiedad con un valor diferente a 0 y none se crea un nuevo <a href="/en/CSS/Understanding_z-index/The_stacking_context">contexto de apilamiento</a>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintaxis Formal</a>: {{csssyntax("perspective")}}</pre> + +<pre>perspective: none +perspective: 20px /* <longitud> valores */ +perspective: 3.5em + +perspective: inherited +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Es una palabra clave que indica que ninguna transformación de perspectiva será aplicada.</dd> + <dt><code><length></code></dt> + <dd>Es una {{cssxref("<length>")}} dando la distancia desde el usuario al plano z=0. Esta es usada para aplicar una transformación de perspectiva al elemento y su contenido. Si es 0 o un valor negativo, no se aplica una transformación de la perspectiva.</dd> +</dl> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<div> +<table class="standard-table"> + <tbody> + <tr> + <td><code>perspective:250px;</code></td> + <td><code>perspective:350px;</code></td> + <td><code>perspective:500px;</code></td> + </tr> + <tr> + <td> + <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 250px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 250px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 250px; transform-style: preserve-3d; perspective-origin: 150% 150%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + <td> + <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 350px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 350px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 350px; transform-style: preserve-3d; perspective-origin: 150% 150%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + <td> + <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;"> + <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 500px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%; -webkit-perspective: 500px; -webkit-transform-style: preserve-3d; -webkit-perspective-origin: 150% 150%; perspective: 500px; transform-style: preserve-3d; perspective-origin: 150% 150%;"> + <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div> + + <div class="front" style="">1</div> + + <div class="back" style="">2</div> + + <div class="right" style="">3</div> + + <div class="left" style="">4</div> + + <div class="top" style="">5</div> + + <div class="bottom" style="">6</div> + </div> + </div> + </td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especifiación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ Specname('CSS3 Transforms', '#perspective', 'perspective') }}</td> + <td>{{ Spec2('CSS3 Transforms') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>12{{ property_prefix('-webkit') }}</td> + <td>{{ CompatGeckoDesktop("10") }}{{ property_prefix('-moz') }}<br> + {{ CompatGeckoDesktop("16") }}</td> + <td>10</td> + <td>15{{ property_prefix('-webkit') }}</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>3.0{{ property_prefix('-webkit') }}</td> + <td>{{ CompatGeckoMobile("10") }}{{ property_prefix('-moz') }}<br> + {{ CompatGeckoMobile("16") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Usando transformaciones CSS</a></li> +</ul> diff --git a/files/es/web/css/porcentaje/index.html b/files/es/web/css/porcentaje/index.html new file mode 100644 index 0000000000..c6629803fe --- /dev/null +++ b/files/es/web/css/porcentaje/index.html @@ -0,0 +1,126 @@ +--- +title: <percentage> +slug: Web/CSS/porcentaje +translation_of: Web/CSS/percentage +--- +<p>{{CSSRef}}</p> + +<h2 id="Sumario">Sumario</h2> + +<p>Los tipos de dato <code><porcentaje> </code>de <a href="/en/CSS" style="font-size: 14px; line-height: inherit;" title="CSS">CSS</a> representan un valor en forma de porcentaje. Muchas <a href="/en/CSS_Reference">propiedades de CSS</a> pueden tomar valores porcentuales, siempre para definir longitudes con respecto al tamaño de los elementos padre. Los porcentajes estan formados por un <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number"><numero></a> seguido por el signo de porcentaje <code>%</code>. No hay un espacio entre el '%' y el numero.</p> + +<p>Varias propriedades de longitud usan porcentajes, tales como <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width">width</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin">margin</a></code> y <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding">padding</a>. </code>Los porcentajes tambien se pueden ver en <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size">font-size</a>, </code>donde el tamaño del texto esta directamente relacionado al tamaño de su elemento padre.</p> + +<div class="note"><strong>Nota:</strong> Solo los valores calculados son heredados. Entonces, incluso si un valor porcentual es usado en en la propiedad padre, un valor real, como una anchura en pixeles para un valor <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length"><length></a>, </code>sera accesible en la propiedad heredada, no el valor porcentual.</div> + +<h2 id="Interpolación">Interpolación</h2> + +<p>Los valores del tipo de dato <code><porcentaje></code> de CSS pueden ser interpolados en orden de permitir animaciones. En ese caso ellos son interpolados como numeros reales de punto flotante. La velocidad de la interpolación se determina por medio de la <a href="/en/CSS/timing-function">funcion de temporizacion</a> asociada con la animacion.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: html"><div style="background-color:#0000FF;"> + <div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div> + <div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div> +</div> +</pre> + +<p>El codigo de arriba se va a renderizar así:</p> + +<div style="background-color: #0000FF;"> +<div style="width: 50%; margin-left: 20%; background-color: #00FF00;">Width: 50%, Left margin: 20%</div> + +<div style="width: 30%; margin-left: 60%; background-color: #FF0000;">Width: 30%, Left margin: 60%</div> +</div> + +<p> </p> + +<pre class="brush: html"><div style="font-size:18px;"> + Full size text (18px) + <span style="font-size:50%;">50%</span> + <span style="font-size:200%;">200%</span> +</div> +</pre> + +<p>El codigo de arriba de renderizara así:</p> + +<div style="font-size: 18px;">Full size text (18px) <span style="font-size: 50%;">50%</span> <span style="font-size: 200%;">200%</span></div> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificacion</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Values', '#percentages', '<percentage>') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>No hay cambios significantes desde CSS Level 2 (Revision 1)</td> + </tr> + <tr style="vertical-align: top;"> + <td style="vertical-align: top;">{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>') }}</td> + <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td> + <td style="vertical-align: top;">No hay cambios desde CSS Level 1</td> + </tr> + <tr> + <td style="vertical-align: top;">{{ SpecName('CSS1', '#percentage-units', '<percentage>') }}</td> + <td style="vertical-align: top;">{{ Spec2('CSS1') }}</td> + <td style="vertical-align: top;"> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte basico</td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td><=5.0</td> + <td>yes</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte basico</td> + <td>si</td> + <td>si</td> + <td>si</td> + <td>si</td> + <td>si</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/position/index.html b/files/es/web/css/position/index.html new file mode 100644 index 0000000000..c9181f456f --- /dev/null +++ b/files/es/web/css/position/index.html @@ -0,0 +1,305 @@ +--- +title: position +slug: Web/CSS/position +tags: + - Referencia_CSS +translation_of: Web/CSS/position +--- +<div>{{CSSRef}}</div> + +<p>La propiedad <strong><code>position</code></strong> de <a href="/en-US/docs/CSS" title="CSS">CSS</a> especifica cómo un elemento es posicionado en el documento. Las propiedades {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, y {{Cssxref("left")}} determinan la ubicación final de los elementos posicionados.</p> + +<div>{{EmbedInteractiveExample("pages/css/position.html")}}</div> + +<p class="hidden">El código fuente de este ejemplo interactivo se encuentra almacenado en un repositorio de GitHub. Si quisiera contribuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíenos sus contribuciones como un pull request.</p> + +<h3 id="Tipos_de_posicionamiento">Tipos de posicionamiento</h3> + +<ul> + <li>Un <strong>elemento posicionado </strong>es un elemento cuyo valor <a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value">computado</a> de <code>position</code> es <code>relative</code>, <code>absolute</code>, <code>fixed</code>, o <code>sticky</code>. (En otras palabras, cualquiera excepto <code>static</code>).</li> + <li>Un <strong>elemento posicionado relativamente</strong> es un elemento cuyo valor <a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value">computado</a> de <code>position</code> es <code>relative</code>. Las propiedades {{Cssxref("top")}} y {{Cssxref("bottom")}} especifican el desplazamiento vertical desde su posición original; las propiedades {{Cssxref("left")}} y {{Cssxref("right")}} especifican su desplazamiento horizontal.</li> + <li>Un <strong>elemento posicionado absolutamente</strong> es un elemento cuyo valor <a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value">computado</a> de <code>position</code> es <code>absolute</code> o <code>fixed</code>. Las propiedades {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, y {{Cssxref("left")}} especifican el desplazamiento desde los bordes del <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block"> bloque contenedor</a> del elemento. (El bloque contenedor es el ancestro relativo al cual el elemento está posicionado). Si el elemento tiene márgenes, se agregarán al desplazamiento. el elemento establece un nuevo contexto de formato de bloque para su contenido</li> + <li>Un <strong>elemento posicionado fijamente </strong>es un elemento cuyo valor de <code>position </code><a href="/en-US/docs/CSS/computed_value" title="CSS/computed_value">computado</a> es <code>sticky</code>. Es tratado como un elemento posicionado relativamente hasta que su <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> cruza un límite establecido (como por ejemplo dando a {{Cssxref("top")}} cualquier valor distinto de auto), dentro de su flujo principal (o el contenedor dentro del cual se mueve), desde el cual es tratado como "fijo" hasta que alcance el borde opuesto de su <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a>.</li> +</ul> + +<p>La mayoría de las veces, los elementos absolutamente posicionados que tienen su {{Cssxref("height")}} y {{Cssxref("width")}} establecidos en <code>auto</code> son ajustados hasta acomodarse a su contenido. Sin embargo, elementos non-<a href="/en-US/docs/Web/CSS/Replaced_element">replaced</a> y absolutamente posicionados se pueden crear para llenar el espacio vertical disponible, especificando tanto {{Cssxref("top")}} como {{Cssxref("bottom")}}, y dejando {{Cssxref("height")}} sin especificar (es decir, <code>auto</code>). De igual manera se pueden utilizar para llenar el espacio horizontal disponible especificando tanto {{Cssxref("left")}} como {{Cssxref("right")}}, y dando a {{Cssxref("width")}} el valor de <code>auto</code>.</p> + +<p>A excepción del caso anteriormente descrito (de elementos posicionados absolutamente rellenando el espacio disponible):</p> + +<ul> + <li>Si ambos, <code>top</code> y <code>bottom</code> están especificados (técnicamente, no <code>auto</code>), <code>top</code> gana.</li> + <li>Si ambos, <code>left</code> y <code>right</code>, están especificados, <code>left</code> gana cuando {{Cssref("direction")}} es <code>ltr</code> (Inglés, japonés horizontal, etc.) y <code>right</code> gana cuando {{Cssxref("direction")}} es <code>rtl</code> (Persa, árabe, hebreo, etc.).</li> +</ul> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La propiedad <code>position</code> es especificada como una palabra única elegida de la siguiente lista de valores.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt id="static"><code>static</code></dt> + <dd>El elemento es posicionado de acuerdo al flujo normal del documento. Las propiedades {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("z-index")}} <em>no tienen efecto</em>. Este es el valor por defecto.</dd> + <dt id="relative"><code>relative</code></dt> + <dd>El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado <em>con relación a sí mismo</em>, con base en los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. El desplazamiento no afecta la posición de ningún otro elemento; por lo que, el espacio que se le da al elemento en el esquema de la página es el mismo como si la posición fuera <code>static</code>. Este valor crea un nuevo <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento">contexto de apilamiento</a>, donde el valor de <code>z-index</code> no es <code>auto</code>. El efecto que tiene <code>relative</code> sobre los elementos <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, y <code>table-caption</code> no está definido.</dd> + <dt id="absolute"><code>absolute</code></dt> + <dd>El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es posicionado relativo a su ancestro posicionado más cercano, si lo hay; de lo contrario, se ubica relativo al <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> inicial. Su posición final está determinada por los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>.</dd> + <dd>Este valor crea un nuevo <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento">contexto de apilamiento</a> cuando el valor de <code>z-index</code> no es <code>auto</code>. Elementos absolutamente posicionados pueden tener margen, y no colapsan con ningún otro margen.</dd> + <dt id="fixed"><code>fixed</code></dt> + <dd>El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es posicionado con relación al <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> inicial establecido por el {{glossary("viewport")}}, excepto cuando uno de sus ancestros tiene una propiedad <code>transform</code>, <code>perspective</code>, o <code>filter</code> establecida en algo que no sea <code>none</code> (ver <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), en cuyo caso ese ancestro se comporta como el bloque contenedor. (Notar que hay inconsistencias del navegador con <code>perspective</code> y <code>filter</code> contribuyendo a la formación del bloque contenedor.) Su posición final es determinada por los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>.</dd> + <dd>Estos valores siempre crean un nuevo <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento">contexto de apilamiento</a>. En documentos impresos, el elemento se coloca en la misma posición en <em>cada página</em>.</dd> + <dt id="sticky"><code>sticky</code> {{experimental_inline}}</dt> + <dd>El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado <em>con relación a su ancestro que se desplace más cercano y su </em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> (ancestro en nivel de bloque más cercano) incluyendo elementos relacionados a tablas, basados en los valores de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>. El desplazamiento no afecta la posición de ningún otro elmento.</dd> + <dd>Estos valores siempre crean un nuevo <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento">contexto de apilamiento</a>. Nótese que un elemento sticky se "adhiere" a su ancestro más cercano que tiene un "mecanismo de desplazamiento" (creado cuando el <code>overflow</code> es <code>hidden</code>, <code>scroll</code>, <code>auto</code>, o bien <code>overlay</code>), aún si ese ancestro no es el ancestro con desplazamiento más cercano. Esto inhibe efectivamente el comportamiento "sticky" (ver el <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue en W3C CSSWG</a>).</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Relative_positioning" name="Relative_positioning">Posicionamiento relativo</h3> + +<p>Elementos posicionados relativamente son desplazados una cantidad dada de su posición normal en el documento, pero sin que su desplazamiento afecte a otros elementos. En el ejemplo siguiente, nótese cómo los demás elementos se ubican como si "Two" estuviera ocupando el lugar de su ubicación normal.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div class="box" id="one">One</div> +<div class="box" id="two">Two</div> +<div class="box" id="three">Three</div> +<div class="box" id="four">Four</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">.box { + display: inline-block; + width: 100px; + height: 100px; + background: red; + color: white; +} + +#two { + position: relative; + top: 20px; + left: 20px; + background: blue; +} +</pre> + +<p>{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}</p> + +<h3 id="Absolute_positioning" name="Absolute_positioning">Posicionamiento absoluto</h3> + +<p>Los elementos posicionados relativamente se mantienen en el flujo normal del documento. Por el contrario, un elemento posicionado absolutamente es removido del flujoñ de esta manera, los demás elementos se posicionan como si el mismo no existiera. El elemento posicionado absolutamente se posiciona relativamente a su<em>ancestro posicionado más cercano</em> (es decir, el ancestro más cercano que no es <code>static</code>). Si no hay ningún ancestro posicionado se ubica relativo al <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block">bloque contenedor</a> inicial. En el ejemplo siguiente, la caja "Two" no tiene un ancestro posicionado, por lo tanto se posiciona relativo al <code><body></code> del documento.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div class="box" id="one">One</div> +<div class="box" id="two">Two</div> +<div class="box" id="three">Three</div> +<div class="box" id="four">Four</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">.box { + display: inline-block; + width: 100px; + height: 100px; + background: red; + color: white; +} + +#two { + position: absolute; + top: 20px; + left: 20px; + background: blue; +}</pre> + +<p>{{ EmbedLiveSample('Absolute_positioning', '800px', '200px') }}</p> + +<h3 id="Fixed_positioning" name="Fixed_positioning">Posicionamiento fijo</h3> + +<p>El posicionamiento fijo es similar al posicionamiento absoluto, con la excepción de que el bloque contenedor del elemento es el <em>viewport</em>. Esto puede usarse para crear un elemento flotante que se mantiene en la misma posición independientemente del desplazamiento. En el ejemplo siguiente, la caja "One" está fijada a 80 pixels del límite superior de la página y 10 pixels a la izquierda. Aún luego de desplazarse, se mantiene en el mismo lugar relativo al viewport.</p> + +<pre class="brush: html notranslate"><div class="outer"> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. + Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. + Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. + Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. + Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. + </p> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. + Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. + Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. + Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. + Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. + </p> + <div class="box" id="one">One</div> +</div> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css notranslate">.box { + width: 100px; + height: 100px; + background: red; + color: white; +} + +#one { + position: fixed; + top: 80px; + left: 10px; + background: blue; +} + +.outer { + width: 500px; + height: 300px; + overflow: scroll; + padding-left: 150px; +} +</pre> + +<p>{{ EmbedLiveSample('Fixed_positioning', '800px', '300px') }}</p> + +<h3 id="Sticky_positioning" name="Sticky_positioning">Posicionamiento sticky</h3> + +<p>El posicionamiento sticky puede considerarse un híbrido de los posicionamientos relativo y fijo. Un elemento con posicionamiento sticky es tratado como un elemento posicionado relativamente hasta que cruza un umbral especificado, en cuyo punto se trata como fijo hasta que alcanza el límite de su padre. Por ejemplo...</p> + +<pre class="brush: css notranslate">#one { position: sticky; top: 10px; }</pre> + +<p>...posicionaría el elemento con id <em>uno </em>relativamente hasta que el viewport sea desplazado de manera tal que el elemento esté a menos de 10 píxeles del límite superior. Más allá de ese umbral, el elemento sería fijado a 10 píxeles del límite superior.</p> + +<p>Un uso común para el posicionamiento sticky es para los encabezados en una lista alfabética. El encabezado "B" aparecerá justo por debajo de los ítems que comienzan con "A" hasta que se hayan desplazado más allá de la pantalla. En vez de deslizarse fuera de la pantalla como el resto del contenido, el encabezado "B" se mantendrá fijado al límite superior del viewport hasta que todos los ítems "B" se hayan desplazado fuera de la pantalla, en cuyo punto será cubierto por el encabezado "C", y así sucesivamente. Se debe especificar un umbral con al menos uno de <code style="">top</code><span style="">, </span><code style="">right</code><span style="">, </span><code style="">bottom</code><span style="">, or </span><code style="">left</code><span style=""> para que el posicionamiento sticky se comporte de forma esperada. Caso contrario, será indistinguible del posicionamiento relativo.</span></p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html notranslate"><dl> + <div> + <dt>A</dt> + <dd>Andrew W.K.</dd> + <dd>Apparat</dd> + <dd>Arcade Fire</dd> + <dd>At The Drive-In</dd> + <dd>Aziz Ansari</dd> + </div> + <div> + <dt>C</dt> + <dd>Chromeo</dd> + <dd>Common</dd> + <dd>Converge</dd> + <dd>Crystal Castles</dd> + <dd>Cursive</dd> + </div> + <div> + <dt>E</dt> + <dd>Explosions In The Sky</dd> + </div> + <div> + <dt>T</dt> + <dd>Ted Leo &amp; The Pharmacists</dd> + <dd>T-Pain</dd> + <dd>Thrice</dd> + <dd>TV On The Radio</dd> + <dd>Two Gallants</dd> + </div> +</dl> +</pre> + +<h4 id="CSS_4">CSS</h4> + +<pre class="brush: css notranslate">* { + box-sizing: border-box; +} + +dl > div { + background: #FFF; + padding: 24px 0 0 0; +} + +dt { + background: #B8C1C8; + border-bottom: 1px solid #989EA4; + border-top: 1px solid #717D85; + color: #FFF; + font: bold 18px/21px Helvetica, Arial, sans-serif; + margin: 0; + padding: 2px 0 0 12px; + position: -webkit-sticky; + position: sticky; + top: -1px; +} + +dd { + font: bold 20px/45px Helvetica, Arial, sans-serif; + margin: 0; + padding: 0 0 0 12px; + white-space: nowrap; +} + +dd + dd { + border-top: 1px solid #CCC; +} +</pre> + +<p>{{ EmbedLiveSample('Sticky_positioning', '500px', '300px') }}</p> + +<ul> +</ul> + +<h2 id="Consideraciones_de_accesibilidad">Consideraciones de accesibilidad</h2> + +<p>Asegurarse de que los elementos posicionados con valor <code>absolute</code> o <code>fixed</code> no oscurezcan el resto del contenido cuando la página sea ampliada para aumentar el tamaño del texto.</p> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN entendiendo el WCAG, explicaciones de los lineamientos 1.4.</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Presentación visual: Entendiendo SC 1.4.8 | Entendiendo WCAG 2.0</a></li> +</ul> + +<h3 id="Performance_y_accesibilidad">Performance y accesibilidad</h3> + +<p>Los elementos que se desplazan que contienen contenido <code>fixed</code> o <code>sticky</code> content pueden ocasionar problemas de performance y accesibilidad. Mientras un usuario desplaza la página, el navegador debe realizar repaint del contenido sticky o fijo en una nueva locación. Dependiendo del contenido que precisa ser repainted, la performance del navegador y la velocidad de procesamiento del dispositivo, el navegador podría no ser capaz de realizar el repaint a 60 <abbr title="frames per second">fps</abbr>, ocasionando problemas de accesibilidad para personas con sensibilidades y desprolijidad para todos. Una solución es agregar {{cssxref("will-change", "will-change: transform")}} a los elementos posicionados para renderizar el elemento en su propia capa, mejorando la velocidad del repaint y por lo tanto mejorando performance y accesibilidad.</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Status</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td> + <td>{{Spec2('CSS3 Positioning')}}</td> + <td>Añade valor de la propiedad <code>sticky</code>.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad</h2> + +<div class="hidden">La tabla de compatibilidad en esta página es generada por una data estructurada. Si deseas contribuir a la data, por favor entra a <a href="https://github.com/mdn/browser-compat-data" rel="noopener">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div> + +<p>{{Compat("css.properties.position")}}</p> diff --git a/files/es/web/css/preguntas_frecuentes_sobre_css/index.html b/files/es/web/css/preguntas_frecuentes_sobre_css/index.html new file mode 100644 index 0000000000..36c2fa1317 --- /dev/null +++ b/files/es/web/css/preguntas_frecuentes_sobre_css/index.html @@ -0,0 +1,118 @@ +--- +title: Preguntas frecuentes sobre CSS +slug: Web/CSS/Preguntas_frecuentes_sobre_CSS +tags: + - CSS + - Proyecto MDC +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +<h4 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered"><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Mi CSS es válida, pero no se representa correctamente</span></span></h4> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los navegadores utilizan la declaración <code>DOCTYPE</code> para elegir entre mostrar el documento usando un modo que sea más compatible con los estándares de la Web o mostrarlo con los fallos de los navegadores antiguos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El uso de una declaración <code>DOCTYPE</code> correcta y moderna al inicio del código HTML mejorará el cumplimiento de los estándares del navegador.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Los navegadores modernos tienen fundamentalmente dos modos de renderizado:</span></span></p> +<ul> <li><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><em>Quirks mode</em> (Modo no estándar): también se llama el modo de compatibilidad con versiones anteriores y permite que las páginas web heredadas se representen como sus autores habían previsto, siguiendo las normas de representación o renderizado no estándares que usan los navegadores antiguos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los documentos con una declaración <code>DOCTYPE</code> incompleta, incorrecta o faltante o con una declaración <code>DOCTYPE</code> conocida que se usara habitualmente antes de 2001 se representarán en el Modo no estándar.</span></span></li> <li><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><em>Standards Mode</em> (Modo estándar): el navegador intenta seguir estrictamente los estándares del W3C.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Se supone que las nuevas páginas HTML se diseñarán para navegadores compatibles con los estándares, y como resultado, las páginas con una declaración <code>DOCTYPE</code> moderna será renderizada con el Modo estándar.</span></span></li> +</ul> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los navegadores basados en Gecko tienen un tercer <em><a href="/en/Gecko's_"Almost_Standards"_Mode" title="en/Gecko's "Almost Standards" Mode">Modo casi estándar</a></em> que tiene solo una peculiaridades menores.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esta es una lista de las declaraciones <code>DOCTYPE</code> más utilizadas que activarán el Modo estándar o el Modo casi estándar:</span></span></p> +<pre><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN"</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/html4/loose.dtd"></span></span> + +<span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN"</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/html4/strict.dtd"></span></span> + +<span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span></span> + +<span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN"</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span></span> +</pre> +<h4 id="Difference_between_id_and_class" name="Difference_between_id_and_class"><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Diferencia entre <code>id</code> y <code>class</code></span></span></h4> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los elementos HTML pueden tener un atributo <code>id</code> y / o un atributo <code>class</code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El atributo <code>id</code> asigna un nombre a un elemento determinado y debe haber un solo elemento con ese nombre.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El atributo <code>class</code> asigna un elemento a una determinada clase y en general no puede haber más de un elemento con el mismo atributo <code>class</code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">CSS te permite aplicar estilos a un atributo <code>id</code> y / o <code>class</code> concreto.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Utiliza un estilo específico de <code>id</code> cuando desees restringir las reglas de estilo a un bloque o elemento concreto.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este estilo lo usará <strong>un solo</strong> elemento con ese <code>id</code> concreto.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Usa un estilo específico de <code>class</code> cuando desees aplicar las reglas de estilo a una determinada clase de bloques y elementos.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Consulta <a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting Started/Selectors">Selectores CSS</a></span></span></p> +<h4 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value"><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Restaurar el valor de la propiedad predeterminado</span></span></h4> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Debido a que CSS no proporciona una palabra clave "predeterminada", la única manera de restaurar el valor predeterminado de una propiedad es volver a declarar explícitamente dicha propiedad.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por lo tanto, debes tener especial cuidado al escribir reglas de estilo usando selectores (por ejemplo, los selectores por nombre de etiqueta, como <code>p</code> ) que tal vez desees reemplazar con reglas más específicas (como las que usan id o selectores de clase), porque el valor predeterminado original no puede restablecerse automáticamente.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Debido a la naturaleza <em>en cascada</em> de CSS, es una buena práctica definir reglas de estilo de una manera lo más concreta posible para evitar aplicar estilo a elementos a los que no se tenía previsto aplicar.</span></span></p> +<h4 id="Derived_styles" name="Derived_styles"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Estilos derivados</span></span></h4> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">CSS no permite que se defina un estilo según los términos de otro.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">(Consulta la <a class="external" href="http://archivist.incutio.com/viewlist/css-discuss/2685" title="http://archivist.incutio.com/viewlist/css-discuss/2685">nota de Eric Meyer acerca de la postura del Grupo de trabajo)</a>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Sin embargo, la asignación de múltiples clases a un solo elemento puede proporcionar el mismo efecto.</span></span></p> +<h4 id="Assigning_multiple_classes" name="Assigning_multiple_classes"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Asignación de múltiples clases</span></span></h4> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">A los elementos HTML se les pueden asignar varias clases listándolas en el atributo <code>class</code>, con un espacio en blanco para separarlas.</span></span></p> +<pre><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><style type="text/css"></span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.news { background: black; color: white; }</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.today { font-weight: bold; }</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""></style></span></span> + +<span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><div class="news today"></span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">... contenido de las noticias de hoy ...</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""></ div></span></span> +</pre> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si la misma propiedad se declara en ambas reglas, el conflicto se resuelve primero a través de la especificidad, a continuación, según el orden de las declaraciones CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El orden de las clases en el atributo <code>class</code> no es relevante.</span></span></p> +<h4 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work"><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Normas de estilo que no funcionan</span></span></h4> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Las reglas de estilo que son sintácticamente correctas pueden no aplicarse en determinadas situaciones.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Puedes utilizar las <em>Reglas de estilo de CSS</em> del <a href="/en/DOM_Inspector" title="en/DOM Inspector">Inspector DOM</a> para depurar los problemas de este tipo, pero los casos más frecuentes en los que se ignoran las reglas de estilo se enumeran a continuación.</span></span></p> +<h5 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy"><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Jerarquía de los elementos HTML</span></span></h5> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La forma en que se aplican los estilos CSS a los elementos HTML depende también de la jerarquía de los elementos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Es importante recordar que una regla que se aplica a un descendiente reemplaza el estilo del padre, a pesar de la especificidad o la prioridad de las reglas CSS.</span></span></p> +<pre><span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.news { color: black; }</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">. corpName {font-weight: bold; color: red;}</span></span> + +<span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><!-- el texto de la noticia es negro, pero el nombre de la empresa va en rojo y negrita --></span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><div class="news"></span></span> + <span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">(Reuters) <span class="corpName"> General Electric </ span> (GE.NYS) anunció el jueves ...</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""></ div></span></span> +</pre> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el caso de jerarquías HTML complejas, si parece que se ignora una regla, comprueba si el elemento está dentro de otro elemento con un estilo diferente.</span></span></p> +<h5 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule"><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Regla de estilo explícitamente redefinida</span></span></h5> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En las hojas de estilo CSS el orden <strong>es</strong> importante.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si defines una regla y luego vuelves a definirla, se usará la última definición.</span></span></p> +<pre><span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker { font-weight: bold; }</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockSymbol { color: red; }</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/* otras reglas */</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/* otras reglas */</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/* otras reglas */</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-73"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockSymbol { font-weight: normal; }</span></span> + +<span class="goog-gtc-unit" id="goog-gtc-unit-74"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><!-- la mayor parte del texto va en negrita, con excepción de "GE", que va en rojo y no en negrita --></span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-75"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><div id="stockTicker"></span></span> + <span class="goog-gtc-unit" id="goog-gtc-unit-76"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">NYS: <span class="stockSymbol">GE</span> +1.0 ...</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-77"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""></ div></span></span> +</pre> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-78"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para evitar este tipo de errores, intenta definir las reglas solo una vez para un selector determinado y agrupa todas las reglas que pertenecen a ese selector.</span></span></p> +<h5 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property"><span class="goog-gtc-unit" id="goog-gtc-unit-79"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Uso de una propiedad abreviada</span></span></h5> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-80"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Está bien usar las propiedades abreviadas para la definición de reglas de estilo, ya que utiliza una sintaxis muy compacta.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-81"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Usar la abreviatura con sólo algunos atributos es posible y correcto, pero hay que recordar que los atributos no declarados se restablecen a los valores predeterminados automáticamente.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-82"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto significa que una norma anterior para un solo atributo podría ser reemplazada implícitamente.</span></span></p> +<pre><span class="goog-gtc-unit" id="goog-gtc-unit-83"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-84"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockSymbol { font: 14px Arial; color: red; }</span></span> + +<span class="goog-gtc-unit" id="goog-gtc-unit-85"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><div id="stockTicker"></span></span> + <span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">NYS: <span class="stockSymbol">GE</span> +1.0 ...</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-87"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""></ div></span></span> +</pre> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-88"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el ejemplo anterior el problema se produjo en las reglas que pertencían a distintos elementos, pero puede ocurrir también para el mismo elemento, porque el orden de las reglas <strong>es</strong> importante.</span></span></p> +<pre><span class="goog-gtc-unit" id="goog-gtc-unit-89"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker {</span></span> + <span class="goog-gtc-unit" id="goog-gtc-unit-90"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">font-weight: bold;</span></span> + <span class="goog-gtc-unit" id="goog-gtc-unit-91"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">font: 12px Verdana; / * font-weight es ahora normal * /</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-92"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">}</span></span> +</pre> +<h5 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector"><span class="goog-gtc-unit" id="goog-gtc-unit-93"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Uso del selector <code>*</code></span></span></h5> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-94"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El selector <code>*</code> se refiere a cualquier elemento y tiene que utilizarse con especial cuidado.</span></span></p> +<pre><span class="goog-gtc-unit" id="goog-gtc-unit-95"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">body * { font-weight: normal; }</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-96"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker { font: 12px Verdana; }</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-97"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.corpName { font-weight: bold; }</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-98"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockUp { color: red; }</span></span> + +<span class="goog-gtc-unit" id="goog-gtc-unit-99"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><div id="section"></span></span> + <span class="goog-gtc-unit" id="goog-gtc-unit-100"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-101"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""></ div></span></span> +</pre> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-102"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En este ejemplo, el selector <code>body *</code> aplica la regla a todos los elementos dentro del cuerpo (<em>body</em>), en cualquier nivel de jerarquía, incluyendo <em>redtext.</em></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-103"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Así <code>font-weight: bold;</code> aplicada a la clase <em>boldtext</em> se reemplaza por <code>font-weight: normal;</code> aplicada a <em>redtext.</em></span></span></p> +<h5 id="Specificity_in_CSS" name="Specificity_in_CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-104"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Especificidad en CSS</span></span></h5> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-105"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cuando se aplican múltiples reglas a un determinado elemento, la norma escogida depende de su especificidad de estilo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-106"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El estilo en línea (en los atributos HTML <code>style</code>) es lo primero, seguido por los selectores id, a continuación, los selectores class y, finalmente, los selectores element-name.</span></span></p> +<pre><span class="goog-gtc-unit" id="goog-gtc-unit-107"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">div { color: black; }</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-108"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#orange { color: orange; }</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-109"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.green { color: green; }</span></span> + +<span class="goog-gtc-unit" id="goog-gtc-unit-110"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><div id="orange" class="green" style="color: red;">This is red</div></span></span> +</pre> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-111"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Las reglas son más complicadas cuando el selector tiene varias partes.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-112"><span class="goog-gtc-translatable goog-gtc-from-human goog-gtc-ph-missing" dir="ltr" style="">Se puede encontrar más información detallada acerca de cómo se calcula la especificidad del selector en el <a class=" external" href="http://www.w3.org/TR/CSS21/cascade.html#specificity" title="http://www.w3.org/TR/CSS21/cascade.html#specificity">capítulo 6.4.3 de la Especificación CSS 2.1</a></span></span></p> +<h4 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F"><span class="goog-gtc-unit" id="goog-gtc-unit-113"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">¿Qué hacen las propiedades -moz-*?</span></span></h4> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-114"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por favor, consulta la página <a class="internal" href="/en/CSS_Reference/Mozilla_Extensions" title="en/CSS Reference/Mozilla Extensions">Extensiones CSS de Mozilla</a>.</span></span></p> +<p> </p> +<p>{{ languages( { "en": "en/Common_CSS_Questions", "pl": "pl/Cz\u0119ste_pytania_o_CSS", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }}</p> diff --git a/files/es/web/css/primeros_pasos/index.html b/files/es/web/css/primeros_pasos/index.html new file mode 100644 index 0000000000..c6eb218230 --- /dev/null +++ b/files/es/web/css/primeros_pasos/index.html @@ -0,0 +1,39 @@ +--- +title: Primeros pasos +slug: Web/CSS/Primeros_pasos +--- +<p> </p> +<h2 id="Introducción">Introducción</h2> +<p>Este tutorial es una introducción a las hojas de estilo en cascada (CSS).</p> +<p>Te guiará a través de las funcionalidades básicas de CSS con ejemplos prácticos que puedes poner a prueba en tu propio equipo. Tiene dos partes.</p> +<ul> <li>La primera parte ilustra las funcionalidades estándar de CSS que funcionan en los navegadores de Mozilla y en casi todos los navegadores modernos.</li> +</ul> +<ul> <li>La segunda parte contiene algunos ejemplos de funciones especiales que funcionan en Mozilla pero no necesariamente en otros ambientes.</li> +</ul> +<p>El tutorial está basado en la <a class="external" href="http://www.w3.org/TR/CSS21/">especificación 2.1 de CSS 2.1</a>.</p> +<h3 id="¿Quién_debe_usar_este_tutorial">¿Quién debe usar este tutorial?</h3> +<p>Este tutotial es prácticamente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia en CSS.</p> +<p>Si eres un principiante en CSS, usa la primera parte del tutorial para entender CSS y aprender cómo usarlo. Después usa la segunda parte para entender el alcance de CSS en Mozilla.</p> +<p>Si sabes algo de CSS, puedes saltearte las partes del tutorial que ya conoces y sólo leer las partes que te interesen.</p> +<p>Si eres experimentado en CSS pero no en Mozilla, puedes pasar a la segunda parte.</p> +<h3 id="¿Qué_necesitas_antes_de_empezar">¿Qué necesitas antes de empezar?</h3> +<p>Para obtener lo mejor de este tutorial, necesitas un editor de archivos de texto y un navegador basado en Mozilla (Firefox o SeaMonkey). Deberías tener conocimientos básicos de cómo usarlos.</p> +<p>Si no quieres editar archivos, puedes leer el tutorial y mirar las imágenes, pero esa es una forma menos efectiva de aprender.</p> +<p>Unas pequeñas partes del tutorial requieren otros programas de Mozilla. Esas partes son opcionales. Si no quieres descargar otras aplicaciones de Mozilla, puedes saltearte esas partes. El otro software de Mozilla que se referencia en este tutorial incluye:</p> +<ul> <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li> +</ul> +<p><strong>Nota: </strong> CSS brinda formas de trabajar con el color, así que partes de este tutorial dependen del color. Puedes usar estas partes fácilmente si tienes un monitor a color y una visión de colores normal.</p> +<h3 id="Cómo_usar_este_tutorial">Cómo usar este tutorial</h3> +<p>Para usar este tutorial, lee las páginas detenidamente y en orden. Si pierdes una página, podrá resultarte difícil entender las páginas posteriores.</p> +<p>En cada página, usa la sección de <em>Información</em> para entender cómo funciona CSS. Usa la sección <em>Acción</em> para probar el uso de CSS en tu propio equipo.</p> +<p>Para probar que hayas entendido, haz el desafío al final de cada página. Las soluciones a los desafíos están enlazados debajo de ellos, así no necesitas mirarlos si no quieres hacerlo.</p> +<p>Para entender CSS más profundamente, lee la información que encontrarás en las cajas con el título <em>Más detalles</em>. Usa los enlaces que se encuentran allí para buscar información de referencia acerca de CSS.</p> +<h2 id="Primera_parte_del_tutorial">Primera parte del tutorial</h2> +<p>Una guía básica paso a paso de CSS.</p> +<ol> <li><strong><a href="/en/CSS/Getting_Started/What_is_CSS" title="en/CSS/Getting_Started/What_is_CSS">What is CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Why_use_CSS" title="en/CSS/Getting_Started/Why_use_CSS">Why use CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">How CSS works</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting_Started/Cascading_and_inheritance">Cascading and inheritance</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">Selectors</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting_Started/Readable_CSS">Readable CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting_Started/Text_styles">Text styles</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Color</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Content</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting_Started/Lists">Lists</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">Boxes</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting_Started/Tables">Tables</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Media" title="en/CSS/Getting_Started/Media">Media</a></strong></li> +</ol> +<h2 id="Segunda_parte_del_tutorial">Segunda parte del tutorial</h2> +<p>Ejemplos que muestran el alcance del CSS en Mozilla.</p> +<ol> <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></strong></li> +</ol> +<p>{{ languages( { "en": "en/CSS/Getting_Started", "de": "de/CSS/Einführung", "es": "es/CSS/Primeros_pasos", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p> diff --git a/files/es/web/css/pseudo-classes/index.html b/files/es/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..05c4789b5f --- /dev/null +++ b/files/es/web/css/pseudo-classes/index.html @@ -0,0 +1,135 @@ +--- +title: Pseudo-classes +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - Referencia CSS + - Selectores + - pseudo-clases +translation_of: Web/CSS/Pseudo-classes +--- +<p>{{ CSSRef() }}</p> + +<p>Una <strong>pseudoclase CSS</strong> es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Por ejemplo, {{ Cssxref(":hover") }} aplicará un estilo cuando el usuario haga hover sobre el elemento especificado por el selector.</p> + +<pre><code>div:hover { + background-color: #F89B4D; +}</code></pre> + +<p>Las pseudoclases, junto con los pseudoelementos, permiten aplicar un estilo a un elemento no sólo en relación con el contenido del árbol de documento, sino también en relación a factores externos como el historial del navegador ({{ cssxref(":visited") }}, por ejemplo), el estado de su contenido (como {{ cssxref(":checked") }} en algunos elementos de formulario), o la posición del ratón (como {{ cssxref(":hover") }} que permite saber si el ratón está encima de un elemento o no).</p> + +<div class="note"> +<p><strong>Nota:</strong> En lugar de usar pseudoclases, {{cssxref("pseudo-elements")}} puede usarse para dar estilo a una <em>parte específica</em> de un elemento.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">selector:pseudoclase { propiedad: valor; } +</pre> + +<p>Al igual que las clases, se pueden concatenar la cantidad de pseudoclases que se deseen en un selector.</p> + +<h2 id="Indice_de_las_pseudo-clases_estándar">Indice de las pseudo-clases estándar</h2> + +<div class="index"> +<ul> + <li>{{ Cssxref(":active") }}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":default") }}</li> + <li>{{ Cssxref(":dir", ":dir()")}}</li> + <li>{{ Cssxref(":disabled") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":first") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":fullscreen") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":indeterminate") }}</li> + <li>{{ Cssxref(":in-range") }}</li> + <li>{{ Cssxref(":invalid") }}</li> + <li>{{ Cssxref(":lang", ":lang()") }}</li> + <li>{{ Cssxref(":last-child") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":left") }}</li> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":not", ":not()") }}</li> + <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li> + <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li> + <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li> + <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li> + <li>{{ Cssxref(":only-child") }}</li> + <li>{{ Cssxref(":only-of-type") }}</li> + <li>{{ Cssxref(":optional") }}</li> + <li>{{ Cssxref(":out-of-range") }}</li> + <li>{{ Cssxref(":read-only") }}</li> + <li>{{ Cssxref(":read-write") }}</li> + <li>{{ Cssxref(":required") }}</li> + <li>{{ Cssxref(":right") }}</li> + <li>{{ Cssxref(":root") }}</li> + <li>{{ Cssxref(":scope") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":valid") }}</li> + <li>{{ Cssxref(":visited") }}</li> +</ul> +</div> + +<h2 id="Especificaciones"><span>Especificaciones</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Fullscreen') }}</td> + <td>{{ Spec2('Fullscreen') }}</td> + <td>Definido <code>:fullscreen</code>.</td> + </tr> + <tr> + <td>{{ SpecName('HTML WHATWG') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Ningún cambio desde {{ SpecName('HTML5 W3C') }}.</td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Definido <code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code>, and <code>:matches()</code>.<br> + Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS3 Selectors')}} y en {{SpecName('HTML5 W3C')}} (Aunque el significado semántico no fuera absorbido).</td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td>Define el significado semántico en el contexto HTML de <code>:link</code>, <code>:visited</code>, <code>:active</code>, <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, and <code>:indeterminate</code>.<br> + Definido <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code>, y <code>:dir()</code>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Basic UI') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td>Definido <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, y <code>:read-write</code>, pero sin el significado semántico asociado.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definido <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code>, y <code>:not()</code>.<br> + Define la sintaxis de <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, y <code>:indeterminate</code>, pero sin el significado semántico asociado.<br> + Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS2.1')}}.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definido <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, y <code>:focus</code>.<br> + Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS1')}}.</td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definido <code>:link</code>, <code>:visited</code>, y <code>:active</code>, pero sin el significado semántico asociado.</td> + </tr> + </tbody> +</table> diff --git a/files/es/web/css/pseudoelementos/index.html b/files/es/web/css/pseudoelementos/index.html new file mode 100644 index 0000000000..c65b904163 --- /dev/null +++ b/files/es/web/css/pseudoelementos/index.html @@ -0,0 +1,86 @@ +--- +title: Pseudoelementos +slug: Web/CSS/Pseudoelementos +tags: + - CSS + - Pseudo-element + - Pseudo-elementos + - Selectores +translation_of: Web/CSS/Pseudo-elements +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>Al igual que las {{ Cssxref("Pseudo-classes") }}, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento {{ Cssxref("::first-line") }} selecciona solo la primera línea del elemento especificado por el selector.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">selector::pseudo-elemento { propiedad: valor; }</pre> + +<h2 id="Lista_de_pseudoelementos">Lista de pseudoelementos</h2> + +<ul> + <li>{{ Cssxref("::after") }}</li> + <li>{{ Cssxref("::before") }}</li> + <li>{{ Cssxref("::first-letter") }}</li> + <li>{{ Cssxref("::first-line") }}</li> + <li>{{ Cssxref("::selection") }}</li> + <li>{{ Cssxref("::backdrop") }}</li> + <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li> +</ul> + +<h2 id="Notas">Notas</h2> + +<p>De vez en cuando se utilizan dos puntos dobles (::) en vez de solo uno (:). Esto forma parte de CSS3 y de un intento para distinguir pseudo-elementos de pseudo-clases.</p> + +<div class="note"><strong>Nota:</strong> <code>::selection</code> siempre se escribe con dos puntos dobles (::).</div> + +<p class="note">Solo se puede usar un pseudo-elemento por selector. Debe aparecer después del selector simple.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión inferior</th> + <th>Soporta</th> + </tr> + <tr> + <td rowspan="2">Internet Explorer</td> + <td>8.0</td> + <td><code>:pseudoelemento</code></td> + </tr> + <tr> + <td>9.0</td> + <td><code>:pseudoelemento </code>y<code> ::pseudoelemento</code></td> + </tr> + <tr> + <td rowspan="2">Firefox (Gecko)</td> + <td>1.0 (1.0)</td> + <td><code>:pseudoelemento</code></td> + </tr> + <tr> + <td>1.0 (1.5)</td> + <td><code>:pseudoelemento </code>y<code> ::pseudoelemento</code></td> + </tr> + <tr> + <td rowspan="2">Opera</td> + <td>4.0</td> + <td><code>:pseudoelemento</code></td> + </tr> + <tr> + <td>7.0</td> + <td><code>:pseudoelemento </code>y<code> ::pseudoelemento</code></td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td>1.0 (85)</td> + <td><code>:pseudoelemento </code>y<code> ::pseudoelemento</code></td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/es/web/css/quotes/index.html b/files/es/web/css/quotes/index.html new file mode 100644 index 0000000000..138b4dce41 --- /dev/null +++ b/files/es/web/css/quotes/index.html @@ -0,0 +1,86 @@ +--- +title: quotes +slug: Web/CSS/quotes +tags: + - CSS + - Layout + - Maquetación + - Referencia + - Web +translation_of: Web/CSS/quotes +--- +<div>{{CSSRef}}</div> + +<h2 id="Summary" name="Summary">Sumario</h2> + +<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code>quotes</code> indica cómo debe renderizar las citas el navegador.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="brush:css">/* Valor con palabras clave */ +quotes: none; + +/* Valor <string> */ +quotes: "«" "»"; /* Especifica <em>open-quote</em> y <em>close-quote</em> a las marcas de cita francesas */ +quotes: "«" "»" "‹" "›"; /* Especifica dos niveles de marcas de cita */ + +/* Valores globales */ +quotes: inherit; +quotes: initial; +quotes: unset; +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Los valores <code>open-quote</code> y <code>close-quote</code> de la propiedad {{cssxref("content")}} no renderiza marcas de cita.</dd> + <dt><code>[<string> <string>]+</code></dt> + <dd>Uno o más pares de valores {{cssxref("<string>")}} para <code>open-quote</code> y <code>close-quote</code>. El primer par representa el nivel más externo de citación, el segundo par es para el primer nivel anidado, el siguiente par para el siguiente nivel, y así sucesivamente.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<pre class="brush:css">q { quotes: '"' '"' "'" "'" } +q:before { content: open-quote } +q:after { content: close-quote } +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Desde Firefox 3.5, el valor inicial de la propiedad de las citas se puede leer usando <code>-moz-<a class="internal" href="/en-US/docs/CSS/initial" title="en-US/docs/CSS/initial">initial</a></code>. Esto no es posible en versiones anteriores de Firefox.</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Commentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS2.1', 'generate.html#quotes', 'quotes') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad con navegadores</h2> + +{{Compat("css.properties.quotes")}} + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{ Cssxref("content") }}</li> +</ul> diff --git a/files/es/web/css/radial-gradient()/index.html b/files/es/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..097caadf49 --- /dev/null +++ b/files/es/web/css/radial-gradient()/index.html @@ -0,0 +1,299 @@ +--- +title: radial-gradient() +slug: Web/CSS/radial-gradient() +tags: + - Función CSS + - Gráficos(2) + - Imagen CSS +translation_of: Web/CSS/radial-gradient() +--- +<p>{{CSSRef}}</p> + +<p>La función CSS <code>radial-gradient()</code> crea una imagen ({{cssxref("<image>")}}) que representa un gradiente (degradado) de colores, generando un radio desde un origen, el centro (<em>center</em>) del gradiente. El resultado de esta función es un objeto de tipo de dato CSS {{cssxref("<gradient>")}}.</p> + +<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Los gradientes radiales son definidos por su centro (<em>center</em>), el contorno y posición de la <em>figura resultante</em> y los puntos de definición de color (<em>color stops</em>). El gradiente radial consiste, desde su centro hasta su figura resultante y potencialmente más allá, en figuras concénctricas sucesivas de escala uniforme, idénticas en su figura final. Los stops de color son posicionados en un <em>rayo de gradiente virtual</em> que va horizontalmente desde el centro hacia la derecha. La proporción para posicionar los stops de colores es relativa a la intersección entre la figura final y su rayo de gradiente, representando el <code>100%</code>. Cada figura es monocolor, y definida por el color del rayo de gradiente al que cruza.</p> + +<p>Las figuras resultantes solo pueden ser círculos (<code>circle</code>) o elipses (<code>ellipse</code>).</p> + +<p>Como cualquier otro gradiente, un gradiente radial CSS no es un {{cssxref("<color>")}} CSS, sino una imagen <a href="/es/docs/Web/CSS/image#no_intrinsic">sin dimensiones intrínsecas</a>, es decir, no tiene un tamaño natural o predefinido, ni radio. Su tamaño concreto coincidirá con el del elemento al que se aplica.</p> + +<p>La función <code>radial-gradient</code> no permite gradientes repetidos. Para dicha funcionalidad, use la función CSS {{Cssxref("repeating-radial-gradient")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css notranslate">// Definición de la figura +radial-gradient( circle, … ) /* Sinónimo de radial-gradient( circle farthest-corner, … ) */ +radial-gradient( ellipse, … ) /* Sinónimo de radial-gradient( ellipse farthest-corner, … ) */ +radial-gradient( <em><extent-keyword></em>, … ) /* Dibuja un círculo */ +radial-gradient( circle <em>radius</em>, … ) /* Un círculo centrado con longitud dada. Puede ser un porcentaje */ +radial-gradient( ellipse <em>x-axis</em> <em>y-axis</em>, … ) /* Los dos ejes semi-mayores son indicados, horizontal y después vertical */ + +// Definición de la posición de la figura +radial-gradient ( … at <position>, … ) + +// Definición de los stops de colores +radial-gradient ( …, <color-stop>, … ) +radial-gradient ( …, <color-stop>, <color-stop> )</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><position></code></dt> + <dd>Una posición ({{cssxref("<position>")}}), interpretada de la misma forma que {{Cssxref("background-position")}} o {{Cssxref("transform-origin")}}. Si es omitida, su valor predeterminado es <code>center</code>.</dd> + <dt><code><shape></code></dt> + <dd>La figura del gradiente. Puede ser un valor <code>circle</code> (que indica que la figura del gradiente es un círculo con radio constante) o <code>ellipse</code> (que indica que la figura del gradiente es una elipse alineada por ejes). El valor predeterminado es <code>ellipse</code>.</dd> + <dt><code><color-stop></code></dt> + <dd>Representa un color fijo en una posición precisa, su valor está compuesto por un valor {{cssxref("<color>")}}, seguido por una posición opcional (que puede ser de tipo {{cssxref("<percentage>")}} o {{cssxref("<length>")}} a lo largo del rayo de gradiente). Un porcentaje de <code>0%</code>, o una longitud de <code>0</code>, representan el centro del gradiente, mientras que el valor de <code>100%</code> representa la intersección de la figura final con el rayo virtual de gradiente. Los valores porcentuales internos son posicionados linealmente en el rayo gradiente.</dd> + <dt><code><extent-keyword></code></dt> + <dd>Valores clave que describen la longitud de la figura resultante. Los valores posibles son:</dd> + <dd> + <table class="standard-table"> + <tbody> + <tr> + <th>Constante</th> + <th>Descripción</th> + </tr> + <tr> + <td><code>closest-side</code></td> + <td>La figura resultante coincide con el lado de la caja más cercano al centro (para los círculos) o coincide con los lados vertical y horizontal más cercanos al centro (en caso de elipses).</td> + </tr> + <tr> + <td><code>closest-corner</code></td> + <td>El tamaño de la figura resultante coincide exactamente con la esquina de la caja más cercana desde el centro del gradiente.</td> + </tr> + <tr> + <td><code>farthest-side</code></td> + <td>Similar a closest-side, excepto que el tamaño de la figura resultante coincide con el lado de la caja más lejano al centro (o los lados vertical y horizontal).</td> + </tr> + <tr> + <td><code>farthest-corner</code></td> + <td>El tamaño de la figura resultante coincide exactamente con la esquina de la caja más lejana al centro del gradiente.</td> + </tr> + </tbody> + </table> + Los borradores anteriores del estándar incluyeron otras palabras clave (<code>cover</code> y <code>contain</code>) como sinónimos de los estándares <span class="st"><code>farthest-corner</code></span> y <code>closest-side</code> respectivamente. Use solo las palabras clave estándar, pues algunas implementaciones ya no soportan las variantes anteriores.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox notranslate"><code>radial-gradient( + [ [ circle || {{cssxref("<length>")}} ] [ at {{cssxref("<position>")}} ]? , | + [ ellipse || [ <length> | {{cssxref("<percentage>")}} ]{2} ] [ at <position> ]? , | + [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , | + at <position> , + ]? + <color-stop> [ , <color-stop> ]+ +) +where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side + and<code> <color-stop> = <color> [ <percentage> | <length> ]?</code> +</code></pre> + +<h2 id="Example_1" name="Example_1">Ejemplo 1</h2> + +<p>Usando el siguiente código CSS podemos obtener un fondo de elipse en la esquina más lejana (<code>farthest-corner</code>) a <code>45px 45px</code>, cambiando el color de turquesa (<code>#00FFFF</code>), a blanco, a azul (<code>#0000FF</code>):</p> + +<pre class="brush: css notranslate">body { + width: 100vh; + height: 100vh; + background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%); +} </pre> + +<p>{{ EmbedLiveSample('Example_1') }}</p> + +<h2 id="Example_2" name="Example_2">Ejemplo 2</h2> + +<p>Este código generará un fondo de elipse in la esquina más lejana (<code>farthest-corner</code>) a <code>470px 45px</code>, cambiando el color de amarillo (<code>#FFFF80</code>), a marrón pálido, a azul pálido (<code>#E6E6FF</code>):</p> + +<pre class="brush: css notranslate">body { + width: 100vh; + height: 100vh; + background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%); +}</pre> + +<p>{{ EmbedLiveSample('Example_2') }}</p> + +<h2 id="Example_3" name="Example_3">Ejemplo 3</h2> + +<p>Este código generará un fondo de elipse en la esquina más lejana (<code>farthest-corner</code>) a <code>45px 45px</code>, cambiando el color de rojo (<code>#FF0000</code>) a azul (<code>#0000FF</code>):</p> + +<pre class="brush: css notranslate">body { + width: 100vh; + height: 100vh; + background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%); +}</pre> + +<p>{{ EmbedLiveSample('Example_3') }}</p> + +<h2 id="Example_4" name="Example_4">Ejemplo 4</h2> + +<p>Este código producirá un círculo difuso con radio de <code>16px</code>:</p> + +<pre class="brush: css notranslate">body { + width: 100vh; + height: 100vh; + background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px); +} </pre> + +<p>{{ EmbedLiveSample('Example_4') }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}})</td> + <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("16")}}</td> + <td>10.0 (534.16){{property_prefix("-webkit")}}<sup>[2]</sup></td> + <td>10.0<sup>[3]</sup></td> + <td>11.60{{property_prefix("-o")}}</td> + <td>5.1{{property_prefix("-webkit")}}<sup>[2]</sup></td> + </tr> + <tr> + <td>En {{cssxref("border-image")}}</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="http://www.webkit.org/blog/175/introducing-css-gradients/">Sintaxis anterior de webkit</a> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>3{{property_prefix("-webkit")}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0{{property_prefix("-webkit")}}<sup>[2]</sup></td> + </tr> + <tr> + <td>Sintaxis de <code>at</code> (sintaxis estándar final)</td> + <td>{{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("16")}}<sup>[4]</sup></td> + <td>26</td> + <td>10.0</td> + <td>11.60{{property_prefix("-o")}}<sup>[2]</sup><br> + 2.12</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Consejos de interpolación (un porcentaje sin color)</td> + <td>{{CompatGeckoDesktop("36")}}</td> + <td>40</td> + <td> </td> + <td>27</td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}})</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("16")}}</td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>En {{cssxref("border-image")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("29")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="http://www.webkit.org/blog/175/introducing-css-gradients/">Sintaxis anterior de webkit</a> {{non-standard_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Sintaxis de <code>at</code> (sintaxis estándar final)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("10")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("16")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implementado en Firefox 3.6 usando prefijo, y sintaxis anterior. Antes de Firefox 36, Gecko no aplicaba gradientes en espacios de color premultiplicado, provocando que apareciera una sombra gris cuando se usaba con transparencia. Desde Firefox 42, la versión con prefijo puede ser deshabilitada estableciendo la opción <code>layout.css.prefixes.gradients</code> en <code>false</code>.</p> + +<p>[2] Implementado en WebKit usando prefijo, y sintaxis anterior. WebKit desde la versión 528 soporta la función anterior <a href="https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW34"><code>-webkit-gradient(radial,…)</code></a>. Véase también su <a href="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15">soporte actual</a> para gradientes radiales.</p> + +<p>[3] Internet Explorer 5.5 a 9.0 soporta la propiedad exclusiva <a href="https://msdn.microsoft.com/es-es/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> + +<p>[4] Además del soporte sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} incluye soporte para una versión con prefijo <code>-webkit</code> de la función, por razones de compatibilidad, dentro de la opción <code>layout.css.prefixes.webkit</code>, con valor <code>false</code> de forma predeterminada. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esa opción es <code>true</code>.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/es/docs/CSS/Using_CSS_gradients">Usando gradientes con CSS</a>, {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}</li> + <li>Propuesta original de WebKit: <a href="http://webkit.org/blog/175/introducing-css-gradients/">http://webkit.org/blog/175/introducing-css-gradients/</a></li> + <li>Nueva implementación de WebKit: <a href="http://webkit.org/blog/1424/css3-gradients/">http://webkit.org/blog/1424/css3-gradients/</a></li> +</ul> diff --git a/files/es/web/css/referencia_css/index.html b/files/es/web/css/referencia_css/index.html new file mode 100644 index 0000000000..63c52a6cdb --- /dev/null +++ b/files/es/web/css/referencia_css/index.html @@ -0,0 +1,246 @@ +--- +title: Referencia CSS +slug: Web/CSS/Referencia_CSS +tags: + - CSS + - Referencia CSS + - para_revisar +translation_of: Web/CSS/Reference +--- +<div class="note"> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Estamos trabajando sobre este documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si deseas ayudarnos a redactar o mejorar alguna de las páginas listadas a continuación, te animamos a que lo hagas.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si vas a agregar o modificar una página, por favor, ajústate a la plantilla <a href="/en/CSS/CSS_Reference/Property_Template" title="en/CSS Reference/Property Template">Referencia CSS:Plantilla de propiedades </a> y modifica según sea necesario.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-ph-missing goog-gtc-translatable" dir="ltr">La plantilla básica para las páginas de ejemplo se puede encontrar aquí: </span></span> <a class="internal" href="/samples/cssref/TEMPLATE.html" title="https://developer.mozilla.org/samples/cssref/TEMPLATE.html ">samples/cssref/TEMPLATE.html</a>.</p> +<span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Siéntete libre para discutir sobre cualquier pregunta o sugerencia en la página <a href="/Talk:en/CSS_Reference" title="Talk:en/CSS Reference">Talk:CSS Reference</a>.</span></span></div> + +<p><span class="seoSummary">Esta <em>Referencia CSS</em> muestra la sintáxis básica de una regla CSS; lista todas las propiedades estándares <a href="/es/docs/Web/CSS">CSS</a>, <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> y <a href="/es/docs/Web/CSS/Pseudoelementos">pseudo-elementos</a>, <a href="/es/docs/Web/CSS/At-rule">reglas-at</a>, <a href="/es/docs/Web/CSS/length">unidades</a>, y <a href="/es/docs/Web/CSS/Introducci%C3%B3n/Selectors">selectores</a>, todos juntos en <a href="#Keyword_index">orden alfabético</a>, así como los <a href="#Selectors">selectores por tipo</a>; y le permitirá acceso rápido a la información detallada de cada uno de ellos. No solo lista las propiedades de CSS 1 y CSS 2.1, sino que también es una referencia de CSS3 que enlaza cualquier propiedad y concepto de <a href="/es/docs/Web/CSS/CSS3">CSS3</a> estandarizado, o ya establecido. También incluye una breve <a href="#DOM_CSS">referencia DOM-CSS / CSSOM</a>.</span></p> + +<p>Tenga en cuenta que las definiciones de reglas CSS son completamente <a href="https://www.w3.org/TR/css-syntax-3/#intro">basadas en texto</a> (ASCII), mientras que DOM-CSS / CSSOM, el sistema de gestión de reglas, está <a href="https://www.w3.org/TR/cssom/#introduction">basado en objetos</a>.</p> + +<p>Vea también las <a href="/es/docs/Web/CSS/Referencia_CSS/Extensiones_CSS_Mozilla">Extensiones CSS de Mozilla</a> para propiedades específicas de Gecko, que usan el prefijo <code>-moz</code>; y las <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Reference/Webkit_Extensions">Extensiones CSS de WebKit</a> para propiedades específicas de WebKit. Vea <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Vendor-prefixed CSS Property Overview</a> de Peter Beverloo como referencia a todas las propiedades con prefijo.</p> + +<h2 id="Sintaxis_de_regla_básica">Sintaxis de regla básica</h2> + +<p>Se advierte que cualquier error de sintaxis en una definición de regla invalidará la regla por completo.</p> + +<h3 id="Sintaxis_de_regla_de_estilo">Sintaxis de regla de estilo</h3> + +<pre class="syntaxbox"><strong><var>selectorlist</var> { + <var>property</var>: <var>value</var>; </strong> + <var>[more property:value; pairs] </var> +<strong>}</strong> + +...where <var>selectorlist</var> is: <var>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]</var> + +Ver <a href="#Selectors"><em>selector</em></a>, <em><a href="#pelm">pseudo-elemento</a></em>, <a href="#pcls"><em>pseudo-clase</em></a> más abajo. + +</pre> + +<h4 id="Ejemplos_de_reglas_de_estilo">Ejemplos de reglas de estilo</h4> + +<pre class="brush: css">strong { + color: red; +} + +div.menu-bar li:hover > ul { + display: block; +} +</pre> + +<p>Para una introducción de nivel principiante a la sintaxis de los selectores de CSS, consulte <a href="/es/docs/Learn/CSS/Introduction_to_CSS/Selectors">este tutorial</a>. Tenga en cuenta que cualquier error de <a href="/es/docs/Web/CSS/syntax">sintaxis CSS</a> en una definición de regla hace que la regla completa se invalide. El navegador ignora las reglas no válidas. Tenga en cuenta que las definiciones de reglas CSS son totalmente (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">basadas en texto</a>, mientras que DOM-CSS / CSSOM (el sistema de gestión de reglas) está <a href="https://www.w3.org/TR/cssom/#introduction">basado en objetos</a>.</p> + +<h3 id="Sintaxis_de_las_reglas-at_(rules)">Sintaxis de las reglas-at (@rules)</h3> + +<p>Debido a que éstas tienen formatos de estructura variados, revise la sección <a href="/es/docs/Web/CSS/At-rule">reglas-At</a> para ver la sintaxis de la regla deseada.</p> + +<h2 id="Índice_de_palabras_clave">Índice de palabras clave</h2> + +<div class="note"> +<p><strong>Nota:</strong> Los nombres de propiedad en este índice <strong>no</strong> incluyen los <a href="/es/docs/Web/CSS/CSS_Properties_Reference">nombres de JavaScript</a> donde difieren de los nombres estándar de CSS.</p> +</div> + +<div>{{CSS_Ref}}</div> + +<h2 id="Selectores">Selectores</h2> + +<h3 id="Selectores_básicos"><a href="/es/docs/Web/CSS/CSS_Selectors#Basic_selectors">Selectores básicos</a></h3> + +<ul> + <li><a href="/es/docs/Web/CSS/Type_selectors">Selectores de tipo</a> <code>elementname</code></li> + <li><a href="/es/docs/Web/CSS/Class_selectors">Selectores de clase</a> <code>.classname</code></li> + <li><a href="/es/docs/Web/CSS/ID_selectors">Selectores de ID</a> <code>#idname</code></li> + <li><a href="/es/docs/Web/CSS/Universal_selectors">Selectores universales</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li> + <li><a href="/es/docs/Web/CSS/Selectores_atributo">Selectores de atributo</a> <code>[attr=value]</code></li> +</ul> + +<h3 id="Combinadores"><a href="/es/docs/Web/CSS/CSS_Selectors#Combinators">Combinadores</a></h3> + +<ul> + <li><a href="/es/docs/Web/CSS/Selectores_hermanos_adyacentes">Selectores de hermanos adyacentes</a> <code>A + B</code></li> + <li><a href="/es/docs/Web/CSS/Selectores_hermanos_generales">Selectores de hermanos generales</a> <code>A ~ B</code></li> + <li><a href="/es/docs/Web/CSS/Child_selectors">Selectores de hijo</a> <code>A > B</code></li> + <li><a href="/es/docs/Web/CSS/Descendant_selectors">Selectores de descendiente</a> <code>A B</code></li> +</ul> + +<h3 id="Pseudo-clases"><a href="/es/docs/Web/CSS/Pseudo-classes">Pseudo-clases</a></h3> + +<div class="index"> +<ul> + <li id="pcls">{{ Cssxref(":active") }}</li> + <li>{{ Cssxref(':any')}}</li> + <li>{{ Cssxref(':any-link')}}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":default") }}</li> + <li>{{ Cssxref(":defined") }}</li> + <li>{{ Cssxref(":dir", ":dir()")}}</li> + <li>{{ Cssxref(":disabled") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":first") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":fullscreen") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":focus-visible") }}</li> + <li>{{ Cssxref(":host") }}</li> + <li>{{ Cssxref(":host()") }}</li> + <li>{{ Cssxref(":host-context()") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":indeterminate") }}</li> + <li>{{ Cssxref(":in-range") }}</li> + <li>{{ Cssxref(":invalid") }}</li> + <li>{{ Cssxref(":lang", ":lang()") }}</li> + <li>{{ Cssxref(":last-child") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":left") }}</li> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":not", ":not()") }}</li> + <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li> + <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li> + <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li> + <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li> + <li>{{ Cssxref(":only-child") }}</li> + <li>{{ Cssxref(":only-of-type") }}</li> + <li>{{ Cssxref(":optional") }}</li> + <li>{{ Cssxref(":out-of-range") }}</li> + <li>{{ Cssxref(":read-only") }}</li> + <li>{{ Cssxref(":read-write") }}</li> + <li>{{ Cssxref(":required") }}</li> + <li>{{ Cssxref(":right") }}</li> + <li>{{ Cssxref(":root") }}</li> + <li>{{ Cssxref(":scope") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":valid") }}</li> + <li>{{ Cssxref(":visited") }}</li> +</ul> +</div> + +<h3 id="Pseudo-elementos"><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elementos</a></h3> + +<div class="index"> +<ul> + <li id="pelm">{{ Cssxref("::after") }}</li> + <li>{{ Cssxref("::backdrop") }}</li> + <li>{{ Cssxref("::before") }}</li> + <li>{{ Cssxref("::cue") }}</li> + <li>{{ Cssxref("::first-letter") }}</li> + <li>{{ Cssxref("::first-line") }}</li> + <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li> + <li>{{ Cssxref("::selection") }}</li> + <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li> +</ul> +</div> + +<div class="note"> +<p><strong>Ver también:</strong> Una <a href="https://www.w3.org/TR/selectors/#selectors">lista completa de selectores</a> en la especificación de Nivel 3 de Selectores.</p> +</div> + +<h2 id="Conceptos">Conceptos</h2> + +<h3 id="Sintaxis_y_semántica">Sintaxis y semántica</h3> + +<ul> + <li><a href="/es/docs/Web/CSS/Syntax">Sintaxis CSS</a></li> + <li><a href="/es/docs/Web/CSS/At-rule">Reglas-at</a></li> + <li><a href="/es/docs/Web/CSS/Cascade">Cascada</a></li> + <li><a href="/es/docs/Web/CSS/Comments">Comentarios</a></li> + <li><a href="/es/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li> + <li><a href="/es/docs/Web/CSS/inheritance">Herencia</a></li> + <li><a href="/es/docs/Web/CSS/Shorthand_properties">Propiedades abreviadas</a></li> + <li><a href="/es/docs/Web/CSS/Specificity">Especificidad</a></li> + <li><a href="/es/docs/Web/CSS/Value_definition_syntax">Sintaxis de definición de valor</a></li> +</ul> + +<h3 id="Valores">Valores</h3> + +<ul> + <li><a href="/es/docs/Web/CSS/actual_value">Valor actual</a></li> + <li><a href="/es/docs/Web/CSS/computed_value">Valor calculado</a></li> + <li><a href="/es/docs/Web/CSS/initial_value">Valor inicial</a></li> + <li><a href="/es/docs/Web/CSS/resolved_value">Valor resuelto</a></li> + <li><a href="/es/docs/Web/CSS/specified_value">Valor específico</a></li> + <li><a href="/es/docs/Web/CSS/used_value">Valor utilizado</a></li> +</ul> + +<h3 id="Diseño">Diseño</h3> + +<ul> + <li><a href="/es/docs/Web/Guide/CSS/Block_formatting_context">Contexto de formato de bloque</a></li> + <li><a href="/es/docs/Web/CSS/box_model">Modelo de caja</a></li> + <li><a href="/es/docs/Web/CSS/All_About_The_Containing_Block">Containing block</a></li> + <li><a href="/es/docs/Web/CSS/Layout_mode">Modo de diseño</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margen colapsando</a></li> + <li><a href="/es/docs/Web/CSS/Replaced_element">Elementos reemplazados</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Contexto de apilamiento</a></li> + <li><a href="/es/docs/Web/Guide/CSS/Visual_formatting_model">Modelo de formato visual</a></li> +</ul> + +<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2> + +<h3 id="Tipos_de_objetos_principales">Tipos de objetos principales</h3> + +<ul> + <li>document.<a href="/es/docs/Web/API/Document/styleSheets">styleSheets</a></li> + <li>styleSheets[i].<a href="/es/docs/Web/API/CSSRuleList">cssRules</a></li> + <li>cssRules[i].<a href="/es/docs/Web/API/CSSRule/cssText">cssText</a> (selector y estilo)</li> + <li>cssRules[i].<a href="/es/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li> + <li>elem.<a href="/es/docs/Web/API/HTMLElement/style">style</a></li> + <li>elem.style.<a href="/es/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (solo estilo)</li> + <li>elem.<a href="/es/docs/Web/API/Element/className">className</a></li> + <li>elem.<a href="/es/docs/Web/API/Element/classList">classList</a></li> +</ul> + +<h3 id="Métodos_importantes">Métodos importantes</h3> + +<ul> + <li>{{domxref("CSSStyleSheet.insertRule")}}</li> + <li>{{domxref("CSSStyleSheet.deleteRule")}}</li> +</ul> + +<h2 id="Tutoriales_CSS3">Tutoriales CSS3</h2> + +<p>Estas páginas describen las nuevas tecnologías que aparecieron en CSS3, o las de CSS2.1 que no tienen mucho soporte:</p> + +<ul> + <li><a href="/es/docs/CSS/Media_queries">Uso de media queries con CSS</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Uso de contadores con CSS</a></li> + <li><a href="/es/docs/CSS/Using_CSS_gradients">Uso de gradientes con CSS</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Uso de transformaciones con CSS</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS">Uso de animaciones con CSS</a></li> + <li><a href="/es/docs/Web/CSS/Transiciones_de_CSS">Uso de transiciones con CSS</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Uso de múltiples fondos con CSS</a></li> + <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Uso de las cajas flexibles con CSS</a></li> + <li><a href="/es/docs/Columnas_con_CSS-3">Uso de columnas con CSS</a></li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Extensiones CSS de Mozilla</a> (con el prefijo <code>-moz</code>)</li> + <li><a href="/en-US/docs/Web/CSS/Webkit_Extensions">Extensiones CSS de WebKit</a> (principalmente con el prefijo <code>-webkit</code>)</li> + <li><a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">Extensiones CSS de Microsoft</a> (con el prefijo <code>-ms</code>)</li> +</ul> diff --git a/files/es/web/css/referencia_css/mix-blend-mode/index.html b/files/es/web/css/referencia_css/mix-blend-mode/index.html new file mode 100644 index 0000000000..fc213a4ceb --- /dev/null +++ b/files/es/web/css/referencia_css/mix-blend-mode/index.html @@ -0,0 +1,611 @@ +--- +title: mix-blend-mode +slug: Web/CSS/Referencia_CSS/mix-blend-mode +tags: + - CSS +translation_of: Web/CSS/mix-blend-mode +--- +<div>{{CSSRef}}</div> + +<p>La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>mix-blend-mode</code></strong> describe cómo el contenido de un elemento debe mezclarse con el contenido del elemento que está tras él y con el fondo del elemento.</p> + +<div>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers">/* Valores clave */ +mix-blend-mode: normal; +mix-blend-mode: multiply; +mix-blend-mode: screen; +mix-blend-mode: overlay; +mix-blend-mode: darken; +mix-blend-mode: lighten; +mix-blend-mode: color-dodge; +mix-blend-mode: color-burn; +mix-blend-mode: hard-light; +mix-blend-mode: soft-light; +mix-blend-mode: difference; +mix-blend-mode: exclusion; +mix-blend-mode: hue; +mix-blend-mode: saturation; +mix-blend-mode: color; +mix-blend-mode: luminosity; + +/* Valores globales */ +mix-blend-mode: initial; +mix-blend-mode: inherit; +mix-blend-mode: unset; +</pre> + +<h3 id="Values" name="Values">Valores</h3> + +<dl> + <dt>{{cssxref("<blend-mode>")}}</dt> + <dd>El modo de mezcla que debería ser aplicado.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<div class="hidden" id="mix-blend-mode"> +<pre class="brush: html"><div class="grid"> + <div class="col"> + <div class="note">Mezclado aislado (sin mezclar con el fondo)</div> + <div class="row isolate"> + <div class="cell"> normal + <div class="container normal"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <defs> + <linearGradient id="red"> + <stop offset="0" stop-color="hsl(0,100%,50%)" /> + <stop offset="100%" stop-color="hsl(0,0%,100%)" /> + </linearGradient> + <linearGradient id="green"> + <stop offset="0" stop-color="hsl(120,100%,50%)" /> + <stop offset="100%" stop-color="hsl(120,0%,100%)" /> + </linearGradient> + <linearGradient id="blue"> + <stop offset="0" stop-color="hsl(240,100%,50%)" /> + <stop offset="100%" stop-color="hsl(240,0%,100%)" /> + </linearGradient> + </defs> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> multiply + <div class="container multiply"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> darken + <div class="container darken"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> screen + <div class="container screen"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> lighten + <div class="container lighten"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> overlay + <div class="container overlay"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color-dodge + <div class="container color-dodge"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color-burn + <div class="container color-burn"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> hard-light + <div class="container hard-light"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> soft-light + <div class="container soft-light"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> difference + <div class="container difference"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> exclusion + <div class="container exclusion"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> hue + <div class="container hue"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> saturation + <div class="container saturation"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color + <div class="container color"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> luminosity + <div class="container luminosity"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + </div> + + <div class="note">Mezclado global (mezclar con el fondo)</div> + <div class="row"> + <div class="cell"> normal + <div class="container normal"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> multiply + <div class="container multiply"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> darken + <div class="container darken"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> screen + <div class="container screen"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> lighten + <div class="container lighten"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> overlay + <div class="container overlay"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color-dodge + <div class="container color-dodge"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color-burn + <div class="container color-burn"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> hard-light + <div class="container hard-light"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> soft-light + <div class="container soft-light"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> difference + <div class="container difference"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> exclusion + <div class="container exclusion"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> hue + <div class="container hue"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> saturation + <div class="container saturation"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> color + <div class="container color"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + <div class="cell"> luminosity + <div class="container luminosity"> + <div class="group"> + <div class="item firefox"></div> + <svg viewBox="0 0 150 150"> + <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> + <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> + </svg> + </div> + </div> + </div> + </div> + </div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; + background: #EEE; +} + +.grid { + width: 100%; + display: flex; + font: 1em monospace; +} + +.row { + display: flex; + flex: 1 auto; + flex-direction: row; + flex-wrap: wrap; + height: auto; +} + +.col { + display: flex; + flex: 1 auto; + flex-direction: column; + height: auto; +} + +.cell { + margin: .5em; + padding: .5em; + background-color: #FFF; + overflow: hidden; + text-align: center; +} + +.note { + background: #fff3d4; + padding: 1em; + margin: .5em .5em 0; + font: .8em sans-serif; + text-align: left; + white-space: nowrap; +} + +.note + .row .cell { + margin-top: 0; +} + +.container { + position: relative; + background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%), + linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%); + width: 150px; + height: 150px; + margin: 0 auto; +} + +.R { + transform-origin: center; + transform: rotate(-30deg); + fill: url(#red); +} + +.G { + transform-origin: center; + transform: rotate(90deg); + fill: url(#green); +} + +.B { + transform-origin: center; + transform: rotate(210deg); + fill: url(#blue); +} + +.isolate .group { isolation: isolate; } + +.normal .item { mix-blend-mode: normal; } +.multiply .item { mix-blend-mode: multiply; } +.screen .item { mix-blend-mode: screen; } +.overlay .item { mix-blend-mode: overlay; } +.darken .item { mix-blend-mode: darken; } +.lighten .item { mix-blend-mode: lighten; } +.color-dodge .item { mix-blend-mode: color-dodge; } +.color-burn .item { mix-blend-mode: color-burn; } +.hard-light .item { mix-blend-mode: hard-light; } +.soft-light .item { mix-blend-mode: soft-light; } +.difference .item { mix-blend-mode: difference; } +.exclusion .item { mix-blend-mode: exclusion; } +.hue .item { mix-blend-mode: hue; } +.saturation .item { mix-blend-mode: saturation; } +.color .item { mix-blend-mode: color; } +.luminosity .item { mix-blend-mode: luminosity; }</pre> +</div> + +<div>{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}</div> + +<h3 id="Ejemplo_vivo">Ejemplo vivo</h3> + +<pre class="brush: html"><svg> + <g class="isolate"> + <circle cx="40" cy="40" r="40" fill="red"/> + <circle cx="80" cy="40" r="40" fill="lightgreen"/> + <circle cx="60" cy="80" r="40" fill="blue"/> + </g> +</svg></pre> + +<pre class="brush:css">circle { mix-blend-mode: screen; } +.isolate { isolation: isolate; } /* sin aislación, el color de fondo será tenido en cuenta */ +</pre> + +<p>{{EmbedLiveSample("Ejemplo_vivo", "100%", "180")}}</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}</td> + <td>{{ Spec2('Compositing') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.properties.mix-blend-mode")}}</p> + +<h2 id="See_also" name="See_also">Véase también</h2> + +<ul> + <li>{{cssxref("<blend-mode>")}}</li> + <li>{{cssxref("background-blend-mode")}}</li> +</ul> diff --git a/files/es/web/css/repeat()/index.html b/files/es/web/css/repeat()/index.html new file mode 100644 index 0000000000..04b53caa45 --- /dev/null +++ b/files/es/web/css/repeat()/index.html @@ -0,0 +1,147 @@ +--- +title: repeat() +slug: Web/CSS/repeat() +tags: + - CSS + - CSS Grid + - Función CSS + - Layout + - Maquetado + - Referencia + - Web +translation_of: Web/CSS/repeat() +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary">La función <a href="/en-US/docs/Web/CSS">CSS</a> </span><span class="seoSummary"><span class="seoSummary"><code><strong>repeat()</strong></code></span> representa un fragmento repetido de la lista de la pista, permitiendo un gran número de columnas o renglones que exhiben un patrón recurrente para ser escrito de una forma más compacta.</span></p> + +<p>Esta función puede ser usada en las propiedades CSS Grid {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.</p> + +<pre class="brush: css no-line-numbers notranslate">/* <track-repeat> values */ +repeat(4, 1fr) +repeat(4, [col-start] 250px [col-end]) +repeat(4, [col-start] 60% [col-end]) +repeat(4, [col-start] 1fr [col-end]) +repeat(4, [col-start] min-content [col-end]) +repeat(4, [col-start] max-content [col-end]) +repeat(4, [col-start] auto [col-end]) +repeat(4, [col-start] minmax(100px, 1fr) [col-end]) +repeat(4, [col-start] fit-content(200px) [col-end]) +repeat(4, 10px [col-start] 30% [col-middle] auto [col-end]) +repeat(4, [col-start] min-content [col-middle] max-content [col-end]) + +/* <auto-repeat> values */ +repeat(auto-fill, 250px) +repeat(auto-fit, 250px) +repeat(auto-fill, [col-start] 250px [col-end]) +repeat(auto-fit, [col-start] 250px [col-end]) +repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end]) +repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end]) + +/* <fixed-repeat> values */ +repeat(4, 250px) +repeat(4, [col-start] 250px [col-end]) +repeat(4, [col-start] 60% [col-end]) +repeat(4, [col-start] minmax(100px, 1fr) [col-end]) +repeat(4, [col-start] fit-content(200px) [col-end]) +repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) +</pre> + +<h2 id="Síntaxis">Síntaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>Una longitud no negativa.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Un porcentaje no negativo relativo con el tamaño en línea del contenedor de la cuadrícula en las pistas de la cuadrícula de columna, y el tamaño del bloque del contenedor de la cuadrícula en las pistas de la cuadrúcula de la fila. Si el tamaño de la rejilla depende del tamaño de sus pistas, entonces el <code><percentage></code> debe ser tratado como <code>auto</code>. El agente de usuario puede ajustar las contribuciones de tamaño intrínseco de la pista al tamaño del contenedor de la rejilla y aumentar el tamaño final de la pista en la cantidad que resultaría en respetar el porcentaje.</dd> + <dt>{{cssxref("<flex>")}}</dt> + <dd>Una dimensión no negativa con la unidad <code>fr</code> especificando el factor flexible de la pista. Cada pista de tamaño <code><flex></code> comparte el espacio restante en proporción a su factor flex</dd> + <dt><code>max-content </code></dt> + <dd>Representa la contribución mas grande de max-content de los elementos de la cuadrícula ocupando la pista.</dd> + <dt><code>min-content</code></dt> + <dd>Representa la contribución más pequeña min-content de los elementos de la cuadrícula ocupando la pista.</dd> + <dt><code>auto</code></dt> + <dd>Como un máximo, idéntico a <code>max-content</code>. Como un mínimo representa el mayor tamaño mínimo (como se específica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la pista.</dd> + <dt><code>auto-fill</code></dt> + <dd>Si el contenedor de cuadrícula tiene un tamaño definido o máximo en el eje relevante, entonces el número de repeticiones es el mayor entero positivo posible que no hace que la cuadrícula desborde su contenedor de cuadrícula. Tratando cada pista con su función de dimensiones máximo de pista (cada valor se utiliza individualmente para definir <code>grid-template-rows</code> o <code>grid-template-columns</code>), si está definido. De lo contrario, como su función de tamaño mínimo de pista, y teniendo en cuenta la brecha de cuadrícula. Si se desbordara cualquier número de repeticiones, entonces la repetición es <code>1</code>. De lo contrario, si el contenedor de la cuadrícula tiene un tamaño mínimo definido en el eje relevante, el número de repeticiones es el número entero positivo más pequeño posible que cumple ese requisito mínimo. De lo contrario, la lista de pistas especificada se repite solo una vez.</dd> + <dt><code>auto-fit</code></dt> + <dd> + <p>Se comporta igual que el autocompletado <code>auto-fill</code>, excepto que después de colocar los elementos de la cuadrícula se colapsan las pistas vacías repetidas. Una pista vacía es aquella sin elementos de cuadrícula colocados o que se extienden a través de ella. (Esto puede provocar el colapso de todas las pistas, si están todas vacías).</p> + + <p dir="ltr">Una pista colapsada se trata como si tuviera una única función de tamaño de pista fija de <code>0px</code>, y los canales (gutters) a cada lado de ella colapsan.</p> + + <p dir="ltr">Con el fin de encontrar el número de pistas repetidas automáticamente, el agente de usuario distribuye el tamaño de la pista a un valor especificado por el agente de usuario (por ejemplo, <code>1px)</code>, para evitar la división por cero.</p> + </dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[3] notranslate">#container { + display: grid; + grid-template-columns: repeat(2, 50px 1fr) 100px; + grid-gap: 5px; + box-sizing: border-box; + height: 200px; + width: 100%; + background-color: #8cffa0; + padding: 10px; +} + +#container > div { + background-color: #8ca0ff; + padding: 5px; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="container"> + <div> + Este elemento tiene un ancho de 50 pixels. + </div> + <div> + Elemento con un ancho flexible. + </div> + <div> + Este elemento tiene un ancho de 50 pixels. + </div> + <div> + Elemento con un ancho flexible. + </div> + <div> + Este elemento tiene un ancho de 100 pixels. + </div> +</div></pre> + +<h3 id="Resultados">Resultados</h3> + +<p>{{EmbedLiveSample("Example", "100%", 200)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}</td> + <td>{{Spec2("CSS Grid")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + + + +<p>{{Compat("css.properties.grid-template-columns.repeat")}}</p> diff --git a/files/es/web/css/resize/index.html b/files/es/web/css/resize/index.html new file mode 100644 index 0000000000..7f40b09236 --- /dev/null +++ b/files/es/web/css/resize/index.html @@ -0,0 +1,194 @@ +--- +title: resize +slug: Web/CSS/resize +translation_of: Web/CSS/resize +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad resize de CSS permite controlar la capacidad de cambio de tamaño de un elemento.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">/* Keyword values */ +resize: none; +resize: both; +resize: horizontal; +resize: vertical; + +/* Global values */ +resize: inherit; +resize: initial; +resize: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>El elemento no efrece método para que el usuario controle el cambio de tamaño del elemento.</dd> + <dt><code>both</code></dt> + <dd>El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento el cual puede ser tanto horizontal como verticalmente.</dd> + <dt><code>horizontal</code></dt> + <dd>El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento sólo horintalmente.</dd> + <dt><code>vertical</code></dt> + <dd>El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento sólo verticalmente.</dd> +</dl> + +<div class="note"><strong>Nota:</strong> <code>resize</code> no aplica abloques en los cuales la propiedad {{cssxref("overflow")}} es configurada como <code>visible</code>.</div> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Deshabilitando_la_capacidad_de_cambio_de_tamaño_de_areas_de_texto">Deshabilitando la capacidad de cambio de tamaño de areas de texto</h3> + +<h4 id="CSS">CSS</h4> + +<p>Por defecto, los elementos {{HTMLElement("textarea")}} permiten cambiar el tamaño en {{gecko("2.0")}} (Firefox 4). Se puede anular este comportamiento con el CSS mostrado abajo:</p> + +<pre class="brush: css">textarea.example { + resize: none; /* disables resizability */ +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><textarea class="example">Type some text here.</textarea></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Deshabilitando_la_capacidad_de_cambio_de_tamaño_de_areas_de_texto","200","100")}}</p> + +<h3 id="Utilizando_resize_con_elementos_arbitrarios">Utilizando resize con elementos arbitrarios</h3> + +<p>Se puede utilizar la propiedad resize para permitir a cualquier elemento ofrecer el mecanismo para cambiar de tamaño. En el ejemplo de abajo, un bloque {{HTMLElement("div")}} contiene un parrafo (elemento {{HTMLElement("p")}}) que permite cambiar su tamaño:</p> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.resizable { + resize: both; + overflow: scroll; + border: 1px solid black; +} + +div { + height: 300px; + width: 300px; +} + +p { + height: 200px; + width: 200px; +} +</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div class="resizable"> + <p class="resizable"> + This paragraph is resizable, because the CSS resize property is set to 'both' on this + element. + </p> +</div> +</pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample("Utilizando_resize_con_elementos_arbitrarios","450","450")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Espacificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}</td> + <td>{{Spec2('CSS3 Basic UI')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de Navegador</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support (on {{HTMLElement("textarea")}})</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("2.0")}}{{ property_prefix("-moz") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>3.0 (522)</td> + </tr> + <tr> + <td>On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is <code>visible</code>)</td> + <td>4.0</td> + <td>{{ CompatGeckoDesktop("5.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support (on {{HTMLElement("textarea")}})</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is <code>visible</code>)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{HTMLElement("textarea")}}</li> +</ul> diff --git a/files/es/web/css/resolución/index.html b/files/es/web/css/resolución/index.html new file mode 100644 index 0000000000..b480413bb1 --- /dev/null +++ b/files/es/web/css/resolución/index.html @@ -0,0 +1,151 @@ +--- +title: <resolution> +slug: Web/CSS/resolución +tags: + - CSS + - CSS tipo de datos + - Diseño + - Estilos + - Referencia +translation_of: Web/CSS/resolution +--- +<div>{{CSSRef}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El tipo de dato <a href="/en-US/docs/Web/CSS">CSS</a> <code><resolution></code>, usado en <a href="/en-US/docs/Web/Guide/CSS/Media_queries">media queries</a>, define la densidad de píxeles de un dispositivo de salida, su resolución. Es un {{cssxref("<number>")}} inmediatamente seguido por una unidad de resolución (<code>dpi</code>, <code>dpcm</code>, ...). Como para cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.</p> + +<p>En pantallas, la longitud está relacionada a centímetros, pulgadas o píxeles CSS, no en valores físicos.</p> + +<p>Incluso si todas las unidades representan la misma resolución para el valor 0, la unidad no se puede omitir en este caso, ya que no es un {{cssxref("<length>")}}: <code>0</code> es inválida y no representa <code>0dpi</code>, <code>0dpcm</code>, ni <code>0dppx</code>.</p> + +<h2 id="Units" name="Units">Unidades</h2> + +<dl> + <dt><code><a name="dpi">dpi</a></code></dt> + <dd>Esta unidad representa el número de <a href="http://en.wikipedia.org/wiki/Dots_per_inch">dots per inch</a> (ppp en español), puntos por pulgada . A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, <code>1dpi ≈ 0.39dpcm</code>.</dd> + <dt><code><a name="dpcm">dpcm</a></code></dt> + <dd>Esta unidad representa el número de <a href="http://en.wikipedia.org/wiki/Dots_per_centimetre">dots per centimeter</a> (ppc en español), puntos por cm. 1 inch(pulgada) son 2.54 cm, <code>1dpcm ≈ 2.54dpi</code>.</dd> + <dt><code><a name="dppx">dppx</a></code></dt> + <dd>Esta unidad representa el número de puntos por unidad px. Debido a la relación fija de 1:96 CSS para CSS px, 1 px es equivalente a 96 dpi, que corresponde a la resolución predeterminada de las imágenes mostradas en CSS como se define por {{cssxref("image-resolution")}}.</dd> +</dl> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<p>Éstos son algunos de los usos correctos de valores <code><resolution></code>:</p> + +<pre>96dpi Uso correcto: a {{cssxref("<number>")}} (here an {{cssxref("<integer>")}}) followed by the unit. +@media print and (min-resolution: 300dpi) { ... } El uso correcto en el contexto de una <a href="/en-US/docs/Web/Guide/CSS/Media_queries">media query</a>. +</pre> + +<p>Here are some incorrect uses:</p> + +<pre>72 dpi Incorecto: no hay espacios entre {{ cssxref("<number>") }} y la unidad. +ten dpi Incorecto: sólo deben ser utilizados dígitos. +0 Incorecto: la unidad se puede omitir por 0 sólo para valores {{ cssxref("<length>") }}. +</pre> + +<h2 id="Specifications" name="Specifications">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Factorización del tipo en una especificación más genérica. Ningún cambio</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#resolution-units', '<resolution>')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Añadida la unidad <code>dppx</code></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>29</td> + <td>3.5 (1.9.1)<sup>[1]</sup></td> + <td>9</td> + <td>9.5</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + </tr> + <tr> + <td><code>dppx</code></td> + <td>29</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>12.10</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + </tr> + <tr> + <td><code>dppx</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>12.10</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Antes de Firefox 8 (Gecko 8.0), era erroneamente aceptado sólo dimensiones CSS que fueran {{cssxref("<integer>")}} seguidos por la unidad. A partir de esa versión, es compatible con cualquier dimensión ({{cssxref("<number>")}} CSS válido seguido inmediatamente por la unidad).</p> + +<p>[2] El Webkit engine no soporta resolución CSS en la especificación, es necesario el uso del no estandar <code>device-pixel-ratio</code> query para el navegador Safari, ver <a href="https://bugs.webkit.org/show_bug.cgi?id=16832">bug 16832</a>.</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Media_queries">CSS Media Queries</a></li> +</ul> diff --git a/files/es/web/css/resolved_value/index.html b/files/es/web/css/resolved_value/index.html new file mode 100644 index 0000000000..f4da84636d --- /dev/null +++ b/files/es/web/css/resolved_value/index.html @@ -0,0 +1,38 @@ +--- +title: Valor resuelto +slug: Web/CSS/resolved_value +tags: + - CSS + - Referencia CSS +translation_of: Web/CSS/resolved_value +--- +<div>{{cssref}}</div> + +<p>El <strong>valor resuelto</strong> (<strong>resolved value</strong>) de una propiedad CSS es el valor devuelto por {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Para la mayoría de las propiedades, esto es el {{cssxref("computed_value", "valor calculado") }}, pero para algunas propiedades antiguas (incluyendo {{cssxref("width")}} y {{cssxref("height")}}), éste es el {{cssxref("used_value", "valor usado")}}. Véase el enlace a la especificación a continuación para más detalles por propiedad.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSSOM", "#resolved-values", "resolved value")}}</td> + <td>{{Spec2("CSSOM")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/Referencia_CSS">Referencia CSS</a></li> + <li>{{CSS_key_concepts}}</li> + <li>{{domxref("window.getComputedStyle")}}</li> +</ul> diff --git a/files/es/web/css/right/index.html b/files/es/web/css/right/index.html new file mode 100644 index 0000000000..db23189f44 --- /dev/null +++ b/files/es/web/css/right/index.html @@ -0,0 +1,93 @@ +--- +title: right +slug: Web/CSS/right +tags: + - CSS Reference + - NeedsTechnicalReview + - Referencia_CSS +translation_of: Web/CSS/right +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Sumario" name="Sumario">Sumario</h3> + +<p>La propiedad <code>right</code> especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).</p> + +<p>Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("position") }}<code>: absolute</code> ó <code>position: fixed</code>), la propiedad right determina la distancia entre el margen derecho del elemento y el borde derecho de su bloque contenedor.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("auto") }}</li> + <li>Se aplica a: <a href="es/CSS/position">positioned elements</a></li> + <li>{{ Xref_cssinherited() }}: no</li> + <li>Porcentajes: se refiere al ancho del bloque contenedor.</li> + <li>Media: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: valor absoluto, porcentaje ó auto.</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">right: <length> | <percentage> | auto | inherit ; +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt>{{cssxref("<length>")}} </dt> + <dd>Una longitud, puede ser un valor negativo, cero, o un valor positivo.</dd> + <dt>{{cssxref("<percentage>")}} </dt> + <dd>Un porcentaje del ancho del bloque contenedor.</dd> +</dl> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval">div { + position: absolute; + right: 20px; + height: 200px; + border: 1px solid #000; +} +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/Style/CSS/current-work#positioning">CSS 3</a></li> +</ul> + +<h3 id="Compatibilidad_entre_navegadores" name="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>?</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("bottom") }}, {{ Cssxref("left") }}</p> diff --git a/files/es/web/css/rtl/index.html b/files/es/web/css/rtl/index.html new file mode 100644 index 0000000000..1fd8c9f45d --- /dev/null +++ b/files/es/web/css/rtl/index.html @@ -0,0 +1,22 @@ +--- +title: rtl +slug: Web/CSS/rtl +--- +<h3 id="Sumario" name="Sumario"> Sumario </h3> +<p>El valor <i>rtl</i> es el valor que debe usarse para la propiedad CSS:direction si queremos escribir en lenguas táles como el Hebreo o el Árabe. El nombre viene de las iniciales de las palabras en inglés: Right To Left, que indican que el texto y otros elementos se han de representar de derecha a izquierda. +</p><p><br> +</p> +<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3> +<pre class="eval">div { + position: absolute; + right: 20px; + height: 200px; + border: 1px solid #000; + direction: rtl; +} +</pre> +<p><br> +</p> +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3> +<p>{{ Cssxref("direction") }}, {{ Cssxref("ltr") }} +</p> diff --git a/files/es/web/css/scroll-behavior/index.html b/files/es/web/css/scroll-behavior/index.html new file mode 100644 index 0000000000..b7b591d520 --- /dev/null +++ b/files/es/web/css/scroll-behavior/index.html @@ -0,0 +1,165 @@ +--- +title: scroll-behavior +slug: Web/CSS/scroll-behavior +tags: + - CSS + - Propiedad CSS + - Referencia + - Vista CSSOM +translation_of: Web/CSS/scroll-behavior +--- +<div>{{ CSSRef }}</div> + +<p><code>La propiedad CSS<strong> </strong></code><strong><code>scroll-behavior </code></strong><code>especifica el comportamiento del desplazamiento para un elemento con desplazamiento, cuando éste se produce debido a la navegación o a APIs CSSOM<strong>. </strong>Otros desplazamientos, p.ej. aquellos realizados por el usuario, no se ven afectados por esta propiedad. Cuando esta propiedad está especificada en el elemento raíz, se aplica al viewport.</code></p> + +<p>Esta propiedad puede ser ignorada por los agentes de usuario.</p> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +scroll-behavior: auto; +scroll-behavior: smooth; + +/* Global values */ +scroll-behavior: inherit; +scroll-behavior: initial; +scroll-behavior: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<p>Valores</p> + +<dl> + <dt><code>auto</code></dt> + <dd>La caja de desplazamiento realiza el desplazamiento instantáneamente.</dd> + <dt><code>smooth</code></dt> + <dd>La caja se desplaza suavemente, utilizando una función de tiempo definida por el agente de usuario (user-agent) sobre un período de tiempo también definido por éste. Los agentes de usuario seguirán las convenciones de su propia plataforma, en caso de que existan.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Example</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><nav> + <a href="#page-1">1</a> + <a href="#page-2">2</a> + <a href="#page-3">3</a> +</nav> +<scroll-container> + <scroll-page id="page-1">1</scroll-page> + <scroll-page id="page-2">2</scroll-page> + <scroll-page id="page-3">3</scroll-page> +</scroll-container></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a { + display: inline-block; + width: 50px; + text-decoration: none; +} +nav, scroll-container { + display: block; + margin: 0 auto; + text-align: center; +} +nav { + width: 339px; + padding: 5px; + border: 1px solid black; +} +scroll-container { + display: block; + width: 350px; + height: 200px; + overflow-y: scroll; + scroll-behavior: smooth; +} +scroll-page { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + font-size: 5em; +} +</pre> + +<h3 id="Output">Output</h3> + +<p>{{ EmbedLiveSample('Example', "100%", 250) }}</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>61<sup>[1]</sup></td> + <td>{{ CompatGeckoDesktop("36") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("36") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Soportado en Chrome and Opera activando las opciones"<strong>Smooth Scrolling</strong>" o "<strong>Enable experimental web platform features</strong>".</p> diff --git a/files/es/web/css/selectores_atributo/index.html b/files/es/web/css/selectores_atributo/index.html new file mode 100644 index 0000000000..a7b59d03c6 --- /dev/null +++ b/files/es/web/css/selectores_atributo/index.html @@ -0,0 +1,241 @@ +--- +title: Selectores de atributo +slug: Web/CSS/Selectores_atributo +tags: + - Atributos + - CSS + - Selectores + - Selectores de Atributo +translation_of: Web/CSS/Attribute_selectors +--- +<div>{{CSSRef}}</div> + +<p>El <strong>selector de atributos</strong> CSS coincide con los elementos en función de la presencia o el valor de un atributo determinado.</p> + +<pre class="brush: css no-line-numbers">/* Elementos <a> con un atributo title */ +a[title] { + color: purple; +} + +/* Elementos <a> con un href que coincida con "https://example.org" */ +a[href="https://example.org"] { + color: green; +} + +/* Elementos <a> con un href que contenga "example" */ +a[href*="example"] { + font-size: 2em; +} + +/* Elementos <a> con un href que comience con "#" */ +a[href^="#"] { + color: #001978; +} + +/* Elementos <a> con un href que termine en ".org" */ +a[href$=".org"] { + font-style: italic; +} + +/* Elementos <a> cuyo atributo class contenga la palabra "logo" */ +a[class~="logo"] { + padding: 2px; +} +</pre> + +<dl> + <dt><code>[<em>attr</em>]</code></dt> + <dd>Selecciona los elementos que tienen el atributo <em>attr</em>.</dd> + <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> + <dd>Selecciona los elementos cuyo atributo <em>attr</em> tenga exactamente el valor <em>value</em>.</dd> + <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> + <dd> + <p>Selecciona los elementos cuyo atributo <em>attr</em> tenga por valor una lista de palabras separadas por espacios, una de las cuales sea <em>value</em>.</p> + </dd> + <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> + <dd>Selecciona los elementos cuyo atributo <em>attr</em> tenga exactamente el valor <em>value</em> o empiece por <em>value</em> seguido de un guión <code>-</code> (U+002D). Se puede usar para coincidencias de subcódigos en otros idiomas.</dd> + <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> + <dd>Selecciona los elementos cuyo atributo <em>attr</em> tenga un valor prefijado por <em>value</em>.</dd> + <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> + <dd>Selecciona los elementos cuyo atributo <em>attr</em> cuyo valor tiene el sufijo (seguido) de <em>value</em>.</dd> + <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> + <dd>Selecciona los elementos cuyo atributo <em>attr</em> tenga un valor que contenga <em>value</em>.</dd> + <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt> + <dd>Agregar una <code>i</code> (o <code>I</code>) antes del corchete de cierre hace que el valor sea comparado sin distinguir entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).</dd> + <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> s]</code> {{Experimental_Inline}}</dt> + <dd>Agregar una <code>s</code> (o <code>S</code>) antes del corchete de cierre hace que el valor sea comparado distinguiendo entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Enlaces">Enlaces</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a { + color: blue; +} + +/* Enlaces internos, comenzando con "#" */ +a[href^="#"] { + background-color: gold; +} + +/* Enlaces con "example" en cualquier parte de la URL */ +a[href*="example"] { + background-color: silver; +} + +/* Enlaces con "insensitive" en cualquier parte de la URL, + independientemente de las mayúsculas */ +a[href*="insensitive" i] { + color: cyan; +} + +/* Enlaces que terminan en ".org" */ +a[href$=".org"] { + color: red; +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><ul> + <li><a href="#internal">Enlace interno</a></li> + <li><a href="http://example.com">Enlace de ejemplo</a></li> + <li><a href="#InSensitive">Enlace interno insensible Insensitive</a></li> + <li><a href="http://example.org">Ejemplo de enlace .org</a></li> +</ul></pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample('Enlaces')}}</p> + +<h3 id="Idiomas">Idiomas</h3> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">/* Todos los divs con un atributo `lang` están en negrita. */ +div[lang] { + font-weight: bold; +} + +/* Todos los divs en inglés de EE. UU. son azules. */ +div[lang~="en-us"] { + color: blue; +} + +/* Todos los divs en portugués son verdes. */ +div[lang="pt"] { + color: green; +} + +/* Todos los divs en chino son rojos, ya sean + simplificados (zh-CN) o tradicionales (zh-TW). */ +div[lang|="zh"] { + color: red; +} + +/* Todos los divs con `data-lang` Traditional Chinese + son de color púrpura. */ +/* Nota: también puede usar atributos con guiones + sin comillas dobles */ +div[data-lang="zh-TW"] { + color: purple; +} +</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div lang="en-us en-gb en-au en-nz">Hello World!</div> +<div lang="pt">Olá Mundo!</div> +<div lang="zh-CN">世界您好！</div> +<div lang="zh-TW">世界您好！</div> +<div data-lang="zh-TW">?世界您好！</div> +</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample('Idiomas')}}</p> + +<h3 id="Listas_Ordenadas">Listas Ordenadas</h3> + +<p>{{SeeCompatTable}}</p> + +<p><span class="tlid-translation translation" lang="es"><span title="">La especificación HTML requiere que el atributo </span></span>{{htmlattrxref("type", "input")}}<span class="tlid-translation translation" lang="es"><span title=""> distinga entre mayúsculas y minúsculas debido a que se usa principalmente en el elemento </span></span>{{HTMLElement("input")}}<span class="tlid-translation translation" lang="es"><span title="">, tratando de usar selectores de atributos con el atributo </span></span>{{htmlattrxref("type", "ol")}}<span class="tlid-translation translation" lang="es"><span title=""> de una </span></span>{{HTMLElement("ol", "lista ordenada")}}<span class="tlid-translation translation" lang="es"><span title=""> no funciona sin el modificador de mayúsculas y minúsculas</span><span title="">.</span></span></p> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="comment token">/* +Los tipos de lista requieren poder distinguir entre mayúsculas +y minúsculas debido al peculiar comportamiento que tiene HTML +con el atributo "type" +*/ +</span> +<span class="selector token">ol<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">type</span><span class="operator token">=</span><span class="token value">"a"</span><span class="punctuation token">]</span></span></span> <span class="punctuation token">{</span> + <span class="property token">list-style-type</span><span class="punctuation token">:</span> lower-alpha<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">ol<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">type</span><span class="operator token">=</span><span class="token value">"a"</span> <span class="case-sensitivity keyword token">s</span><span class="punctuation token">]</span></span></span> <span class="punctuation token">{</span> + <span class="property token">list-style-type</span><span class="punctuation token">:</span> lower-alpha<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> lime<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">ol<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">type</span><span class="operator token">=</span><span class="token value">"A"</span> <span class="case-sensitivity keyword token">s</span><span class="punctuation token">]</span></span></span> <span class="punctuation token">{</span> + <span class="property token">list-style-type</span><span class="punctuation token">:</span> upper-alpha<span class="punctuation token">;</span> + <span class="property token">background</span><span class="punctuation token">:</span> lime<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html; line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ol</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>A<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Example list<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ol</span><span class="punctuation token">></span></span></code></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("HTML_ordered_lists")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Agrega un modificador para la selección de valores de atributos insensibles a mayúsculas / minúsculas ASCII.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.selectors.attribute")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Seleccionando un solo elemento:{{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}}, o {{domxref("Element.querySelector()")}}</li> + <li>Seleccionar todos los elementos coincidentes:{{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}}, o {{domxref("Element.querySelectorAll()")}}</li> + <li>Todos los métodos anteriores se implementan en base a {{domxref("ParentNode")}} mixin; vea {{domxref("ParentNode.querySelector()")}} y {{domxref("ParentNode.querySelectorAll()")}}</li> +</ul> diff --git a/files/es/web/css/selectores_css/index.html b/files/es/web/css/selectores_css/index.html new file mode 100644 index 0000000000..20baaf25a6 --- /dev/null +++ b/files/es/web/css/selectores_css/index.html @@ -0,0 +1,164 @@ +--- +title: Selectores CSS +slug: Web/CSS/Selectores_CSS +tags: + - CSS + - Referencia + - Selectores + - Selectores de CSS + - Visión general +translation_of: Web/CSS/CSS_Selectors +--- +<div>{{CSSRef}}</div> + +<p>Los <strong>selectores </strong>definen sobre qué elementos se aplicará un conjunto de reglas CSS.</p> + +<h2 id="Selectores_básicos">Selectores básicos</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Selector de tipo</a></dt> + <dd>Selecciona todos los elementos que coinciden con el nombre del elemento especificado.<br> + <strong>Sintaxis:</strong> <code><var>eltname</var></code><br> + <strong>Ejemplo:</strong> <code>input</code> se aplicará a cualquier elemento {{HTMLElement('input')}}.</dd> + <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Selector de clase</a></dt> + <dd>Selecciona todos los elementos que tienen el atributo de <code>class</code> especificado.<br> + <strong>Sintaxis:</strong> <code>.<var>classname</var></code><br> + <strong>Ejemplo:</strong> <code>.index</code> seleccionará cualquier elemento que tenga la clase "<em>index</em>".</dd> + <dt><a href="/en-US/docs/Web/CSS/ID_selectors">Selector de ID</a></dt> + <dd>Selecciona un elemento basándose en el valor de su atributo <code>id</code>. Solo puede haber un elemento con un determinado ID dentro de un documento.<br> + <strong>Sintaxis:</strong> <code>#<var>idname</var></code><br> + <strong>Ejemplo:</strong> <code>#toc</code> se aplicará a cualquier elemento que tenga el ID "<em>toc</em>".</dd> + <dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Selector universal</a></dt> + <dd>Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres.<br> + <strong>Sintaxis:</strong> <code>* ns|* *|*</code><br> + <strong>Ejemplo:</strong> <code>*</code> se aplicará a todos los elementos del documento.</dd> + <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Selector de atributo</a></dt> + <dd>Selecciona elementos basándose en el valor de un determinado atributo.<br> + <strong>Sintaxis:</strong> <code>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</code><br> + <strong>Ejemplo:</strong> <code>[autoplay]</code> seleccionará todos los elementos que tengan el atributo "autoplay" establecido (a cualquier valor).</dd> +</dl> + +<h2 id="Combinadores">Combinadores</h2> + +<dl> + <dt><a href="/es/docs/Web/CSS/Selectores_hermanos_adyacentes">Combinador de hermanos adyacentes</a></dt> + <dd>El combinador <code>+</code> selecciona hermanos adyacentes. Esto quiere decir que el segundo elemento sigue directamente al primero y ambos comparten el mismo elemento padre.<br> + <strong>Sintaxis:</strong> <code><var>A</var> + <var>B</var></code><br> + <strong>Ejemplo:</strong> La regla <code>h2 + p</code> se aplicará a todos los elementos {{HTMLElement('p')}} que siguen directamente a un elemento {{HTMLElement('h2')}}.</dd> + <dt><a href="/es/docs/Web/CSS/Selectores_hermanos_generales">Combinador general de hermanos</a></dt> + <dd>El combinador <code>~</code> selecciona hermanos. Esto quiere decir que el segundo elemento sigue al primero (no necesariamente de forma inmediata) y ambos comparten el mismo elemento padre.<br> + <strong>Sintaxis:</strong> <code><var>A</var> ~ <var>B</var></code><br> + <strong>Ejemplo:</strong> La regla <code>p ~ span</code> se aplicará a todos los elementos {{HTMLElement('span')}} que siguen un elemento {{HTMLElement('p')}}.</dd> + <dt><a href="/es/docs/Web/CSS/Child_selectors">Combinador de hijo </a></dt> + <dd>El combinador <code>></code> selecciona los elementos que son hijos directos del primer elemento.<br> + <strong>Sintaxis:</strong> <code><var>A</var> > <var>B</var></code><br> + <strong>Ejemplo:</strong> La regla <code>ul > li</code> se aplicará a todos los elementos {{HTMLElement('li')}} que son hijos directos de un elemento {{HTMLElement('ul')}}.</dd> + <dt><a href="/es/docs/Web/CSS/Descendant_selectors">Combinador de descendientes</a></dt> + <dd>El combinador <code> </code> (espacio) selecciona los elementos que son descendientes del primer elemento.<br> + <strong>Sintaxis:</strong> <code>A B</code><br> + <strong>Ejemplo:</strong> La regla <code>div span</code> se aplicará a todos los elementos {{HTMLElement('span')}} que están dentro de un elemento {{HTMLElement('div')}}.</dd> + <dt><a href="https://developer.mozilla.org/es/docs/Web/CSS/Column_combinator">Combinador de column</a>a {{Experimental_Inline}}</dt> + <dd>El combinador <code>||</code> selecciona los elementos especificados pertenecientes a una columna.<br> + <strong>Sintaxis:</strong> <code><var>A</var> || <var>B</var></code><br> + <strong>Ejemplo:</strong> <code>col || td</code> seleccionará todos los elementos {{HTMLElement("td")}} que pertenezcan al ámbito de {{HTMLElement("col")}}.</dd> +</dl> + +<h2 id="Pseudoclases"><strong>Pseudoclases</strong></h2> + +<dl> + <dt>Las <a href="/es/docs/Web/CSS/Pseudo-classes">pseudoclases</a> permiten la selección de elementos, basada en información de estado que no está contenida en el árbol de documentos.</dt> + <dd><strong>Ejemplo:</strong> La regla a<code>:visited</code> se aplicará a todos los elementos {{HTMLElement("a")}} que hayan sido visitados por el usuario.</dd> +</dl> + +<h2 id="Pseudoelementos">Pseudoelementos</h2> + +<dl> + <dt> + <p>Los <a href="/es/docs/Web/CSS/Pseudoelementos">pseudoelementos</a> 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.</p> + </dt> + <dd><strong>Ejemplo:</strong> La regla <code>p::first-line</code> se aplicará a la primera línea de texto de todos los elementos {{HTMLElement('p')}}.</dd> +</dl> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Añadidos el combinador de columna <code>||</code>, 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.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Añadidos el combinador <code>~</code> general de hermanos y las pseudoclases de árbol-estructural. Los pseudoelementos creados, usan un prefijo <code>::</code> de dos puntos dobles. Selectores de atributos adicionales.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Añadidos los combinadores <code>></code> de elemento hijo y <code>+</code> de elementos hermanos adyacentes. Añadidos los selectores <strong>universal</strong> y de <strong>atributo</strong>.</td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.5</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html b/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html new file mode 100644 index 0000000000..fe51517a2b --- /dev/null +++ b/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html @@ -0,0 +1,67 @@ +--- +title: 'Usando la pseudo-clase :target en selectores' +slug: 'Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores' +tags: + - CSS + - CSS3 + - Selectores +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +<p><span class="comment">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.</span> {{CSSRef}}</p> + +<p>Como ayuda para identificar el destino de un enlace que apunta a una parte específica de un documento, los <a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">Selectores CSS3</a> incluyen la <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> {{ Cssxref(":target") }}.</p> + +<h3 id="Picking_a_Target" name="Picking_a_Target">Seleccionando un objetivo (target)</h3> + +<p>La pseudo-clase <code>{{ Cssxref(":target") }}</code> es usada para estilizar el elemento objetivo de una URI que contiene un identificador de fragmento. Por ejemplo, la URI <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example</span></code> contiene el identificador de fragmento <code>#Example</code>. En HTML, los identificadores son valores de los atributos <code>id</code> o <code>name</code>, pues ambos comparten el mismo espacio de nombres. Por lo tanto, la URI de ejemplo apuntará al encabezado "Example" en este documento.</p> + +<p>Supongamos que se quiere estilizar cualquier elemento <code>h2</code> que sea el objetivo de una URI, pero no queremos que cualquier otro elemento tenga esos mismos estilos. Es así de simple:</p> + +<pre class="notranslate">h2:target {font-weight: bold;}</pre> + +<p>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 <code>#Example</code>, escribiremos:</p> + +<pre class="notranslate">#Example:target {border: 1px solid black;}</pre> + +<h3 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">Aplicando estilos a todos los elementos objetivo</h3> + +<p>Si lo que se intenta es crear un estilo que cubra a todos los elementos objetivo, se puede usar el selector universal:</p> + +<pre class="notranslate">:target {color: red;} +</pre> + +<h3 id="Example" name="Example">Ejemplo</h3> + +<p>En el siguiente ejemplo, hay cinco enlaces que apuntan a elementos en el mismo documento. Seleccionar el enlace "First", por ejemplo, causará que <code><h1 id="one"></code> 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.</p> + +<div id="example"> +<pre class="notranslate"><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></pre> +</div> + +<h3 id="Conclusion" name="Conclusion">Conclusión</h3> + +<p>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.</p> + +<h3 id="Related_Links" name="Related_Links">Enlaces relacionados</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">Selectores CSS3 #target-pseudo</a></li> + <li><a class="internal" href="/es/CSS/:target" title="En/CSS/:target">Referencia CSS :target</a></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Información del Documento Original</h3> + +<ul> + <li>Autor(es): Eric Meyer, Evangelista de Estándares, Netscape Communications</li> + <li>Información Original de Copyright: Copyright © 2001-2003 Netscape. Todos los derechos reservados.</li> + <li>Nota: El artículo en inglés era originalmente parte del sitio DevEdge.</li> +</ul> +</div> diff --git a/files/es/web/css/selectores_hermanos_adyacentes/index.html b/files/es/web/css/selectores_hermanos_adyacentes/index.html new file mode 100644 index 0000000000..1200c4bd61 --- /dev/null +++ b/files/es/web/css/selectores_hermanos_adyacentes/index.html @@ -0,0 +1,135 @@ +--- +title: Selectores de hermanos adyacentes +slug: Web/CSS/Selectores_hermanos_adyacentes +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Referencia CSS + - Selectores +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +<p>{{CSSRef("Selectors")}}</p> + +<p>Se hace referencia a este selector como selector adyacente o selector del próximo hermano. Sólo seleccionará un elemento especificado que esté inmediatamente después de otro elemento especificado.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">elemento_anterior + elemento_afectado { <em>estilos</em> } +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<div id="Example_1"> +<pre class="brush: css">li:first-of-type + li { + color: red; +} +</pre> + +<pre class="brush: html"><ul> + <li>Uno</li> + <li>Dos</li> + <li>Tres</li> +</ul></pre> +</div> + +<p>{{EmbedLiveSample('Example_1', 200, 100)}}</p> + +<p>Otro caso podría ser dar estilos a un span que se use de pie de foto de los siguientes elementos {{HTMLElement("img")}} :</p> + +<pre class="brush: css">img + span.caption { + font-style: italic; +} +</pre> + +<p>que coincidiría con los siguientes elementos {{HTMLElement("span")}} :</p> + +<pre class="brush: html"><img src="photo1.jpg"><span class="caption">The first photo</span> +<img src="photo2.jpg"><span class="caption">The second photo</span> +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificacion</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>7.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer 7 no actualiza correctamente el estilo cuando un elemento es insertado dinámicamente antes de otro elemento que coincidía con el selector. En Internet Explorer 8, si un elemento es insertado dinámicamente haciendo click en un enlace, el estilo del <code>first-child</code> no se aplica hasta que el enlace pierde el foco.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/Selectores_hermanos_generales">Selectores de hermanos generales</a></li> +</ul> diff --git a/files/es/web/css/selectores_hermanos_generales/index.html b/files/es/web/css/selectores_hermanos_generales/index.html new file mode 100644 index 0000000000..96c87148b9 --- /dev/null +++ b/files/es/web/css/selectores_hermanos_generales/index.html @@ -0,0 +1,117 @@ +--- +title: Selectores de hermanos generales +slug: Web/CSS/Selectores_hermanos_generales +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Referencia CSS + - Selectores +translation_of: Web/CSS/General_sibling_combinator +--- +<div><span class="s1">{{CSSRef("Selectors")}}</span></div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El combinador <code>~</code> separa dos selectores y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox">elemento ~ elemento { <em>estilos</em> } +</pre> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<pre class="brush: css">p ~ span { + color: red; +}</pre> + +<pre class="brush: html"><span>Este span no es rojo.</span> +<p>Aquí hay un párrafo.</p> +<code>Aquí hay algo de código.</code> +<span>Aquí hay un span. Es rojo porque va precedido de un párrafo y ambos comparten el mismo padre.</span></pre> + +<p>{{ EmbedLiveSample('Example', 320, 150) }}</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>7</td> + <td>9</td> + <td>3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="Ver_también">Ver también</h2> + +<p> </p> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Selectores de hermanos adyacentes</a></li> +</ul> diff --git a/files/es/web/css/shorthand_properties/index.html b/files/es/web/css/shorthand_properties/index.html new file mode 100644 index 0000000000..7e6cb6a359 --- /dev/null +++ b/files/es/web/css/shorthand_properties/index.html @@ -0,0 +1,155 @@ +--- +title: Propiedades abreviadas +slug: Web/CSS/Shorthand_properties +tags: + - CSS + - Guía + - Propiedades + - Referencia + - abreviatura + - propiedades abreviadas +translation_of: Web/CSS/Shorthand_properties +--- +<h2 id="Definition" name="Definition">Definición</h2> + +<p>Las <strong><dfn>propiedades abreviadas</dfn></strong> son propiedades CSS que permiten asignar el valor de muchas otras propiedades de CSS al mismo tiempo. Usando una propiedad abreviada ('shorthand'), se pueden escribir hojas de estilo más concisas (y a menudo más legibles), ahorrando tiempo y energía.</p> + +<p>La especificación de CSS define las propiedades abreviadas para agrupar la definición de propiedades en común para el mismo tema. Ejemplo: La propiedad {{cssxref("background")}} de CSS es una propiedad abreviada que puede definir el valor de {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, y {{cssxref("background-position")}}. Similarmente, las propiedades más comúnes relacionadas con las fuentes se pueden definir usando la abreviación {{cssxref("font")}}, y los diferentes márgenes alrededor de una caja pueden ser definidos usando la abreviación {{cssxref("margin")}}.</p> + +<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">Casos especiales delicados</h2> + +<p>Incluso si son convenientes de utilizar, hay algunos casos especiales que mantener en mente al utilizarlos:</p> + +<ol> + <li>Si no se especifica un valor, se le asignará su valor inicial. Suena a algo anecdótico, pero significa que se <strong>sobreescribirán</strong> los valores previamente definidos. Por lo tanto: + + <pre class="brush:css">background-color: red; +background: url(images/bg.gif) no-repeat top right; +</pre> + no pondrá el color en rojo sino al valor por defecto de {{cssxref("background-color")}} , <code>transparent</code>, puesto que la segunda regla tiene precedencia.</li> + <li>Solo los valores de las propiedades individuales pueden heredar. Dado que los valores omitidos son reemplazados por su valor inicial, es imposible permitir la herencia de propiedades individuales omitiéndolas. La palabra clave <code>inherit</code> puede ser aplicada a una propiedad, pero solo como un todo, no como una palabra clave para un valor u otro. Eso significa que la única manera de hacer que un valor específico sea heredado es usar la propiedad a mano con la palabra clave <code>inherit.</code></li> + <li>Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories: + <ol> + <li>Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges: + <table> + <tbody> + <tr> + <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td> + <td><em>The 1-value syntax</em>: <code>border-width: 1em</code> — The unique value represents all edges</td> + </tr> + <tr> + <td><img alt="border2.png" src="/files/3647/border2.png"></td> + <td><em>The 2-value syntax</em>: <code>border-width: 1em 2em</code> — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.</td> + </tr> + <tr> + <td><img alt="border3.png" src="/files/3648/border3.png"></td> + <td><em>The 3-value syntax</em>: <code>border-width: 1em 2em 3em</code> — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge</td> + </tr> + <tr> + <td><img alt="border4.png" src="/files/3649/border4.png"></td> + <td> + <p><em>The 4-value syntax</em>: <code>border-width: 1em 2em 3em 4em</code> — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word <em>trouble</em>: TRBL)</p> + </td> + </tr> + </tbody> + </table> + </li> + <li>Similarly, shorthands handling properties related to corners of a box, like {{cssxref("border-radius")}}, always use a consistent 1-to-4-value syntax representing those corners: + <table> + <tbody> + <tr> + <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td> + <td><em>The 1-value syntax</em>: <code>border-radius: 1em</code> — The unique value represents all corners</td> + </tr> + <tr> + <td><img alt="corner2.png" src="/files/3651/corner2.png"></td> + <td><em>The 2-value syntax</em>: <code>border-radius: 1em 2em</code> — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.</td> + </tr> + <tr> + <td><img alt="corner3.png" src="/files/3652/corner3.png"></td> + <td><em>The 3-value syntax</em>: <code>border-radius: 1em 2em 3em</code> — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner</td> + </tr> + <tr> + <td><img alt="corner4.png" src="/files/3653/corner4.png"></td> + <td> + <p><em>The 4-value syntax</em>: <code>border-radius: 1em 2em 3em 4em</code> — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.</p> + </td> + </tr> + </tbody> + </table> + </li> + </ol> + </li> +</ol> + +<h2 id="Background_Properties" name="Background_Properties">Propiedades Background</h2> + +<p>Un fondo con las siguientes propiedades...</p> + +<pre class="brush:css">background-color: #000; +background-image: url(images/bg.gif); +background-repeat: no-repeat; +background-position: top right;</pre> + +<p>... puede acortarse con una sola declaración:</p> + +<pre class="brush:css">background: #000 url(images/bg.gif) no-repeat top right;</pre> + +<p>(La forma abreviada es realmente equivalente a las propiedades a mano anteriores más <code>background-attachment: scroll</code> y, en CSS3, a algunas propiedades adicionales.)</p> + +<h2 id="Font_Properties" name="Font_Properties">Propiedades Font</h2> + +<p>Las siguientes declaraciones:</p> + +<pre class="brush:css">font-style: italic; +font-weight: bold; +font-size: .8em; +line-height: 1.2; +font-family: Arial, sans-serif;</pre> + +<p>... pueden ser abreviadas como sigue:</p> + +<pre class="brush:css">font: italic bold .8em/1.2 Arial, sans-serif;</pre> + +<p>Esta declaración abreviada es realmente equivalente a las declaraciones a mano anteriores así como también a <code>font-variant: normal</code> y <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p> + +<h2 id="Border_Properties" name="Border_Properties">Propiedades Border</h2> + +<p>Con los bordes, el ancho, color y estílo pueden ser simplificados en una declaración. Por ejemplo,</p> + +<pre class="brush:css">border-width: 1px; +border-style: solid; +border-color: #000;</pre> + +<p>... puede ser simplificada como</p> + +<pre class="brush:css">border: 1px solid #000;</pre> + +<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">Propiedades Margin y Padding</h2> + +<p>Versiones abreviadas de <code>margin</code> y <code>padding</code> funcionan de la misma forma. Las siguientes declaraciones CSS:</p> + +<pre class="brush:css">margin-top: 10px; +margin-right: 5px; +margin-bottom: 10px; +margin-left: 5px;</pre> + +<p>son la misma a la declaración siguiente (note que los valores estan en el sentido de las manecillas del reloj desde arriba: arriba, derecha, abajo e izquierda (TRBL, las consonantes en "trouble", peligro en inglés)). (Norte, Este, Sur, Oeste)</p> + +<pre class="brush:css">margin: 10px 5px 10px 5px;</pre> + +<h2 id="The_universal_shorthand_property" name="The_universal_shorthand_property">La propiedad abreviada universal</h2> + +<p>CSS provee una propiedad abreviada universal, {{cssxref("all")}}, que aplica su valor a toda propiedad en el documento. Su propósito es cambiar el modelo de herencia de las propiedades a uno de los siguientes:</p> + +<p>{{page("/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance", "Controlling_inheritance")}}</p> + +<p>Ver <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a> o <a href="/en-US/docs/Web/CSS/Cascade">Introducing the CSS Cascade</a> para más información acerca de como trabaja la herencia en CSS.</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> + <li>{{css_key_concepts}}</li> + <li>Shorthand properties: {{cssxref("background")}}, {{cssxref("font")}}, {{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-style")}}, {{cssxref("transition")}}, {{cssxref("animation")}}, {{cssxref("transform")}}, {{cssxref("padding")}}, {{cssxref("list-style")}}, {{cssxref("border-radius")}}, {{cssxref("flex")}}.</li> +</ul> diff --git a/files/es/web/css/sintaxis_definición_de_valor/index.html b/files/es/web/css/sintaxis_definición_de_valor/index.html new file mode 100644 index 0000000000..90d5ea8b75 --- /dev/null +++ b/files/es/web/css/sintaxis_definición_de_valor/index.html @@ -0,0 +1,402 @@ +--- +title: Sintaxis de definición de valor +slug: Web/CSS/Sintaxis_definición_de_valor +translation_of: Web/CSS/Value_definition_syntax +--- +<p>{{CSSRef()}}</p> + +<p><span class="seoSummary"><strong>La sintaxis de definición de valores CSS</strong>, una gramática formal, se utiliza para definir el conjunto de valores válidos para una propiedad o función CSS. Además de esta sintaxis, el conjunto de valores válidos puede restringirse aún más mediante restricciones semánticas (por ejemplo, para que un número sea estrictamente positivo).</span></p> + +<p class="summary">La sintaxis de definición describe qué valores están permitidos y las interacciones entre ellos. Un componente puede ser una <em>palabra clave</em>, algunos caracteres <em>literales</em>, ó un valor de tipo de dato de CSS o propiedad CSS.</p> + +<h2 id="Tipos_de_valor_de_los_componentes">Tipos de valor de los componentes</h2> + +<h3 id="Palabras_clave">Palabras clave</h3> + +<h4 id="Palabras_clave_genéricas">Palabras clave genéricas</h4> + +<p>Una palabra clave con significado predefinido aparece literalmente, sin comillas, por ejemplo: <code>auto</code>, <code>smaller</code> or <code>ease-in</code>.</p> + +<h4 id="El_caso_específico_de_inherit_e_initial">El caso específico de <code>inherit</code> e <code>initial</code></h4> + +<p>Todas las propiedades CSS aceptan las palabras clave <code>inherit</code> e <code>initial</code> que son definidas vía CSS. Estas no son mostradas en la definición del valor y están implícitamente definidas.</p> + +<h3 id="Literales">Literales</h3> + +<p>En CSS, unos pocos caracteres pueden aparecer por su cuenta, como la barra ('<code>/</code>') o la coma ('<code>,</code>'), y son usadas en una propiedad o definición para separar sus partes. La coma es a menudo usada para separar valores en enumeraciones, o parámetros en funciones de tipo matemático; la barra a menudo separa partes de el valor que es semánticamente diferente, pero que tiene una sintaxis común. Típicamente, la barra es usada a veces en propiedades abreviadas para separar componentes que son del mismo tipo, pero pertenecen a diferentes propiedades.</p> + +<p>Ambos símbolos aparecen literalmente en una definición de valor.</p> + +<h3 id="Tipos_de_dato">Tipos de dato</h3> + +<h4 id="Tipos_de_dato_básicos">Tipos de dato básicos</h4> + +<p>Un tipo de dato usado vía CSS es definido una sola vez para todos los valores en la especificación. Se llaman <em>tipos de datos básicos, </em>estan representados por su nombre rodeados del símbolo '<code><</code>' y '<code>></code>': {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …</p> + +<h4 id="Tipos_de_dato_no_terminales">Tipos de dato no terminales</h4> + +<p>Tipos de dato poco comunes, llamados <em>tipos de datos no terminales</em>, están también rodeados por '<code><</code>' y '<code>></code>'.</p> + +<p>Los tipos de dato no terminales son de dos tipos::</p> + +<ul> + <li>tipos de datos <em>que comparten el mismo nombre de propiedad</em>, colocados entre comillas . En este caso el tipo de dato comparte el mismo conjunto de valores de la propiedad. A menudo son usados en la definición de propiedades abreviadas.</li> + <li>tipos de datos <em>que no comparten el mismo nombre de la propiedad</em>. Estos tipos de datos son muy cercanos a sus tipos de datos básicos. Ellos solo difieren de los tipos de datos básicos en la ubicación física de su definición: en este caso la definición es usualmente físicamente muy cercana a la definición de la propiedad que la esta usando.</li> +</ul> + +<h2 id="Combinadores_de_los_valores_de_componentes">Combinadores de los valores de componentes</h2> + +<h3 id="Corchetes">Corchetes</h3> + +<p><em>Corchetes </em>encierran varias entidades, combinadores, y multiplicadores, luego los transforman en un solo componente. Son usados para <strong>agrupar componentes para sobreescribir las reglas de precedencia.</strong></p> + +<pre class="syntaxbox"><code>bold [ thin && <length> ]</code></pre> + +<p>El ejemplo empareja con los siguientes valores:</p> + +<ul> + <li><code>bold thin 2vh</code></li> + <li><code>bold 0 thin</code></li> + <li><code>bold thin 3.5em</code></li> +</ul> + +<p>Pero no con:</p> + +<ul> + <li><code>thin bold 3em</code>, porque <code>bold</code> esta yuxtapuesto con el componente definido por los corchetes, debe aparecer antes de él.</li> +</ul> + +<h3 id="Yuxtaposición">Yuxtaposición</h3> + +<p>Colocar varias palabras clave, literales, o tipos de datos, uno al lado del otro, solo separados por uno o varios espacios se llama <em>yuxtaponer. </em>Todos los componentes yuxtapuestos son <strong>obligatorios y deben aparecer en ese orden exacto.</strong></p> + +<pre class="syntaxbox">bold <length> , thin +</pre> + +<p>El ejemplo empareja con los siguientes valores:</p> + +<ul> + <li><code>bold 1em, thin</code></li> + <li><code>bold 0, thin</code></li> + <li><code>bold 2.5cm, thin</code></li> + <li><code>bold 3vh, thin</code></li> +</ul> + +<p>Pero no con:</p> + +<ul> + <li><code>thin 1em, bold</code> porque las entidades deben aparecer en el orden expresado</li> + <li><code>bold 1em thin</code> porque las entidades son obligatorias; la coma que es un literal debe estar presente</li> + <li><code>bold 0.5ms, thin</code> porque los valores <code>ms</code> no son de tipo {{cssxref("<length>")}}</li> +</ul> + +<h3 id="Doble_ampersand">Doble ampersand</h3> + +<p>Separar dos o mas componentes por un <em>doble ampersand</em>, <code>&&</code>, significa que todas esas entidades son <strong>obligatorias pero pueden aparecer en cualquier orden.</strong></p> + +<pre class="syntaxbox">bold && <length> +</pre> + +<p>El ejemplo empareja con los siguientes valores:</p> + +<ul> + <li><code>bold 1em</code></li> + <li><code>bold 0</code></li> + <li><code>2.5cm bold</code></li> + <li><code>3vh bold</code></li> +</ul> + +<p>Pero no con:</p> + +<ul> + <li><code>bold</code> porque ambos componentes deben aparecer en el valor</li> + <li><code>bold 1em bold</code> porque ambos componentes deben aparecer solo una vez</li> +</ul> + +<div class="note"><strong>Nota:</strong> yuxtaposición tiene precedencia sobre el doble ampersand, esto quiere decir que <code>bold thin && <length></code> es equivalente a <code>[ </code><code>bold thin ] && <length></code>. Que describe a <code>bold thin <length></code> ó <code><length></code><code> bold thin</code> pero no a <code>bold <length></code><code> thin</code>.</div> + +<h3 id="Barra_doble">Barra doble</h3> + +<p>Separar dos o mas componentes por una <em>barra doble</em>, <code>||</code>, significa que todas las entidades son opcionales: <strong>al menos una debe estar presente, y pueden aparecer en cualquier orden. </strong>Típicamente ésto es usado para definir los diferentes valores de una <a href="/en-US/docs/CSS/Shorthand_properties" title="/en-US/docs/CSS/Shorthand_properties">propiedad abreviada</a>.</p> + +<pre class="syntaxbox"><'border-width'> || <'border-style'> || <'border-color'> +</pre> + +<p>El ejemplo empareja con los siguientes valores:</p> + +<ul> + <li><code>1em solid blue</code></li> + <li><code>blue 1em</code></li> + <li><code>solid 1px yellow</code></li> +</ul> + +<p>Pero no con:</p> + +<ul> + <li><code>blue yellow</code> porque un componente debe aparecer al menos una vez.</li> + <li><code>bold</code> porque no es una palabra clave permitida como valor de ninguna de las entidades.</li> +</ul> + +<div class="note"><strong>Nota:</strong> el doble ampersand tiene precedencia sobre la barra doble, que significa que <code>bold || thin && <length></code> es equivalente a <code>bold || [ thin && <length> ]</code>. Describe a <code>bold</code>, <code>thin</code>, <code><length></code>, <code>bold thin</code>, <code><length> bold</code>, o <code>thin <length> bold</code> pero no <code>bold <length></code><code> bold thin</code> porque bold, si no es omitido debe colocarse antes o después de el componente<code> thin && <length></code></div> + +<h3 id="Barra_simple">Barra simple</h3> + +<p>Separar dos o mas componentes con <em>una barra simple</em>, <code>|</code>, quiere decir que todas las entidades son opciones exclusivas: <strong>exactamente una de estas opciones debe estar presente. </strong>Esto es tipicamente usado para separar una lista de posibles palabras clave.</p> + +<pre class="syntaxbox"><percentage> | <length> | left | center | right | top | bottom</pre> + +<p>El ejemplo empareja con los siguientes valores:</p> + +<ul> + <li><code>3%</code></li> + <li><code>0</code></li> + <li><code>3.5em</code></li> + <li><code>left</code></li> + <li><code>center</code></li> + <li><code>right</code></li> + <li><code>top</code></li> + <li><code>bottom</code></li> +</ul> + +<p>Pero no</p> + +<ul> + <li><code>center 3%</code> porque solo uno de los componentes debe estar presente</li> + <li><code>3em 4.5em</code> porque un componente debe estar presente máximo una vez.</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> la barra doble tiene precedencia sobre la barra simple, quiere decir que <code>bold | thin || <length></code> es equivalente a <code>bold | [ thin || <length> ]</code>. Describe <code>bold</code>, <code>thin</code>, <code><length></code>, <code><length> thin</code>, o <code>thin <length> </code>pero no <code>bold <length></code><code> </code>porque solo una entidad de cada lado del combinador <code>|</code> puede estar presente.</p> +</div> + +<h2 id="Multiplicadores_de_valores_de_componentes">Multiplicadores de valores de componentes</h2> + +<p>Un multiplicador es un símbolo que indica cuantas veces una entidad precedente puede ser repetida. Sin un multiplicador, una entidad debe aparecer exactamente una vez.</p> + +<p>Note que los multiplicadores no pueden sumarse y tienen precedencia sobre los combinadores.</p> + +<h3 id="Asterisco_(*)">Asterisco (<code>*</code>)</h3> + +<p>El <em>multiplicador asterisco </em>indica que la entidad puede aparecer <strong>cero, una o varias veces.</strong></p> + +<pre class="syntaxbox"><code>bold smaller*</code></pre> + +<p>El ejemplo empareja con los siguientes valores:</p> + +<ul> + <li><code>bold</code></li> + <li><code>bold smaller</code></li> + <li><code>bold smaller smaller</code></li> + <li><code>bold smaller smaller smaller</code> y así sucesivamente</li> +</ul> + +<p>Pero no:</p> + +<ul> + <li><code>smaller</code> porque <code>bold</code> esta yuxtapuesto y debe aparecer antes de la palabra clave <code>smaller</code></li> +</ul> + +<h3 id="Suma_()">Suma (<code>+</code>)</h3> + +<p>El <em>multiplicador suma </em>indica que la entidad puede aparecer <strong>una o varias veces.</strong></p> + +<pre class="syntaxbox"><code>bold smaller+</code></pre> + +<p>El ejemplo empareja con los siguientes valores:</p> + +<ul> + <li><code>bold smaller</code></li> + <li><code>bold smaller smaller</code></li> + <li><code>bold smaller smaller smaller</code> y sucesivamente</li> +</ul> + +<p>Pero no:</p> + +<ul> + <li><code>bold</code> porque <code>smaller</code> debe aparecer al menos una vez</li> + <li><code>smaller</code> porque <code>bold</code> esta yuxtapuesto y debe aparecer antes de cualquier palabra clave <code>smaller</code></li> +</ul> + +<h3 id="Pregunta_()">Pregunta (<code>?</code>)</h3> + +<p>El <em>multiplicador pregunta </em>indica que la entidad es opcional y <strong>debe aparecer cero o una vez</strong></p> + +<pre class="syntaxbox"><code>bold smaller?</code></pre> + +<p>El ejemplo empareja con los siguientes valores:</p> + +<ul> + <li><code>bold</code></li> + <li><code>bold smaller</code></li> +</ul> + +<p>Pero no:</p> + +<ul> + <li><code>bold smaller smaller</code> porque <code>smaller</code> debe aparecer como máximo una vez</li> + <li><code>smaller bold</code> porque <code>bold</code> esta yuxtapuesto y debe aparecer antes de cualquier palabra clave <code>smaller</code></li> +</ul> + +<h3 id="Llaves_(_)">Llaves (<code>{ }</code>)</h3> + +<p>El <em>multiplicador llaves, </em>encierra a dos enteros A y B separados por una coma, indica que la entidad <strong>debe aparecer al menos A veces y como mas B veces</strong></p> + +<pre class="syntaxbox"><code>bold smaller{1,3}</code></pre> + +<p>El ejemplo empareja con los siguientes valores:</p> + +<ul> + <li><code>bold smaller</code></li> + <li><code>bold smaller smaller</code></li> + <li><code>bold smaller smaller smaller</code></li> +</ul> + +<p>Pero no:</p> + +<ul> + <li><code>bold</code> porque <code>smaller</code> debe aparecer al menos una vez</li> + <li><code>bold smaller smaller smaller smaller</code> porque <code>smaller</code> debe aparecer un máximo de tres veces.</li> + <li><code>smaller bold</code> porque <code>bold</code> esta yuxtapuesto u debe aparecer antes de cualquier palabra clave <code>smaller</code></li> +</ul> + +<h3 id="Hash_()">Hash (<code>#</code>)</h3> + +<p>El <em>multiplicador hash</em> indica que la entidad puede repetirse <strong>una o mas veces </strong>(como con el multiplicador de suma) pero cada ocurrencia se <strong>separa por una coma</strong> ('<code>,</code>').</p> + +<pre class="syntaxbox"><code>bold smaller#</code></pre> + +<p>El ejemplo empareja con los siguientes valores:</p> + +<ul> + <li><code>bold smaller</code></li> + <li><code>bold smaller, smaller</code></li> + <li><code>bold smaller, smaller, smaller</code> y así sucesivamente</li> +</ul> + +<p>Pero no:</p> + +<ul> + <li><code>bold</code> porque <code>smaller</code> debe aparecer al menos una vez</li> + <li><code>bold smaller smaller smaller</code> porque las diferentes ocurrencias de <code>smaller</code> deben estar separadas por comas</li> + <li><code>smaller</code> porque <code>bold</code> esta yuxtapuesto y debe aparecer antes de cualquier palabra clave <code>smaller</code></li> +</ul> + +<h2 id="Sumario">Sumario</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Símbolo</th> + <th scope="col">Nombre</th> + <th scope="col">Descripción</th> + <th scope="col">Ejemplo</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4">Combinadores</th> + </tr> + <tr> + <td> </td> + <td>Yuxtaposición</td> + <td>Componentes obligatorios que deben aparecer en el mismo orden</td> + <td><code>solid <length></code></td> + </tr> + <tr> + <td><code>&&</code></td> + <td>Doble ampersand</td> + <td>Componentes obligatorios pero que pueden aparecer en cualquier orden</td> + <td><code>length> && <string></code></td> + </tr> + <tr> + <td><code>||</code></td> + <td>Barra doble</td> + <td>Al menos uno de los componentes debe estar presente, y pueden aparecer en cualquier orden</td> + <td><code><'border-image-outset'> || <'border-image-slice'></code></td> + </tr> + <tr> + <td><code>|</code></td> + <td>Barra simple</td> + <td>Exactamente uno de los componentes debe estar presente</td> + <td><code>smaller | small | normal | big | bigger</code></td> + </tr> + <tr> + <td><code>[ ]</code></td> + <td>Corchetes</td> + <td>Agrupa componentes para sobreescribir las reglas de precedencia</td> + <td><code>bold [ thin && <length> ]</code></td> + </tr> + <tr> + <th colspan="4">Multiplicadores</th> + </tr> + <tr> + <td> </td> + <td>Sin multiplicador</td> + <td>Exactamente 1 vez</td> + <td><code>solid</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>Asterisco</td> + <td>0 or more times</td> + <td><code>bold smaller*</code></td> + </tr> + <tr> + <td><code>+</code></td> + <td>Suma</td> + <td>1 o mas veces</td> + <td><code>bold smaller+</code></td> + </tr> + <tr> + <td><code>?</code></td> + <td>Pregunta</td> + <td>0 o 1 vez (es <em>opcional)</em></td> + <td><code>bold smaller?</code></td> + </tr> + <tr> + <td><code>{A,B}</code></td> + <td>Llaves</td> + <td>Al menos <code>A</code> veces, como mas <code>B</code> veces</td> + <td><code>bold smaller{1,3}</code></td> + </tr> + <tr> + <td><code>#</code></td> + <td>Hash</td> + <td>1 o mas veces, pero cada ocurrencia separada por una coma ('<code>,</code>')</td> + <td><code>bold smaller#</code></td> + </tr> + </tbody> +</table> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>Desde {{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}, añade el multiplicador hash</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Desde {{ SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}, añade el combinador doble ampersand</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{ CSS_key_concepts() }}</li> +</ul> diff --git a/files/es/web/css/specified_value/index.html b/files/es/web/css/specified_value/index.html new file mode 100644 index 0000000000..a13d57f4e1 --- /dev/null +++ b/files/es/web/css/specified_value/index.html @@ -0,0 +1,43 @@ +--- +title: Valor especificado +slug: Web/CSS/specified_value +tags: + - CSS + - Referencia CSS +translation_of: Web/CSS/specified_value +--- +<p>{{CSSRef}}</p> + +<p>El <strong>valor especificado</strong> (<strong>specified value</strong>) de una propiedad CSS es establecido de una de las siguientes maneras:</p> + +<ol> + <li>Si la hoja de estilos del documento tiene un valor especificado para la propiedad, éste será usado. Por ejemplo, si la propiedad {{cssxref("color")}} es establecida con valor <code>green</code>, el color del texto del elemento que corresponda será verde.</li> + <li>Si la hoja de estilos del documento no tiene un valor especificado para la propiedad, se heredará del elemento padre (si es posible). Por ejemplo, si tenemos un párrafo ({{HTMLElement("p")}}) dentro de un {{HTMLElement("div")}}, y el {{HTMLElement("div")}} tiene el valor de su propiedad <code>font</code> como "Arial", y el {{HTMLElement("p")}} no tiene definida la propiedad <code>font</code>, se heredará la fuente Arial.</li> + <li>Si ninguna de las anteriores está disponible, se aplica el valor inicial del elemento segun la especificación CSS.</li> +</ol> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/Referencia_CSS">Referencia CSS</a></li> + <li>{{CSS_key_concepts}}</li> +</ul> diff --git a/files/es/web/css/syntax/index.html b/files/es/web/css/syntax/index.html new file mode 100644 index 0000000000..25ff30fa71 --- /dev/null +++ b/files/es/web/css/syntax/index.html @@ -0,0 +1,81 @@ +--- +title: Sintaxis +slug: Web/CSS/Syntax +tags: + - CSS + - Guía + - Principiante + - Web +translation_of: Web/CSS/Syntax +--- +<div>{{cssref}}</div> + +<p>La meta básica del lenguaje Cascading Stylesheet (CSS) es permitir al motor del navegador pintar elementos de la página con características específicas, como colores, posición o decoración. La sintaxis CSS refleja estas metas y estos son los bloques básicos de construcción.</p> + +<ul> + <li>La <strong>propiedad</strong> que es un identificador, un <em>nombre</em> leíble por humanos, que define qué característica es considerada.</li> + <li> + <p>El <strong>valor</strong> que describe como las características deben ser manejadas por el motor. Cada propiedad tiene un conjunto de valores válidos, definido por una gramática formal, así como un significado semántico, implementados por el motor del navegador.</p> + </li> +</ul> + +<h2 id="Declaraciones_de_CSS">Declaraciones de CSS</h2> + +<p>Configurando propiedades CSS a valores específicos es la función principal del lenguaje del CSS. Una propiedad y su valor son llamados una d<strong>eclaración</strong>, y cualquier motor de CSS calcula qué declaraciones aplican a cada uno de los elementos de una página para mostralos apropiadamente y estilizarlos.</p> + +<p>Ambos propiedades y valores son sensibles a mayúculas y minúsculas en CSS. El par se separa por dos puntos, '<code>:</code>' (<code>U+003A COLON</code>), y los espacios en blanco antes, entre ellos y después, pero no necesariamente dentro de ellos, son ignorados.</p> + +<p><img alt="css syntax - declaration.png" class="default internal" src="/@api/deki/files/6164/=css_syntax_-_declaration.png" style="border: 1px solid black; padding: 1em;"></p> + +<p>Hay más de <a href="/en/CSS/CSS_Reference" title="en/CSS/CSS_Reference">100 propiedades diferentes</a> en CSS y cerca de un número infinito de diferentes valores. No todos los pares de propiedades y valores son permitidos cada propiedad define que valores son válidos. Cuando un valor no es válido para una propiedad específica, la declaración es considerada <em>inválida</em> y es completamente ingorada por el motor del CSS.</p> + +<h2 id="Bloques_de_declaraciones_en_CSS">Bloques de declaraciones en CSS</h2> + +<p>Las declaraciones son agrupada en <strong>bloques</strong>, que es una estructura delimitada por una llave de apertura, '<code>{</code>' (<code>U+007B LEFT CURLY BRACKET</code>), y una de cierre, '<code>}</code>' (<code>U+007D RIGHT CURLY BRACKET</code>). Los bloques en ocasiones puedes anidarse, por lo que las llaves de apertura y cierre deben de coindidir.</p> + +<p><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style="border: 1px solid black; padding: 1em;"></p> + +<p>Esos bloques son naturalmente llamados <strong>bloques de declaraciones</strong> y las declaraciones dentro de ellos están separadas por un punto y coma, '<code>;</code>' (<code>U+003B SEMICOLON</code>). Un bloque de declaración puede estar vacío, que es contener una declaración nula. Los espacios en blanco alrededor de las declaraciones son ignorados. En cuanto a la última declaración de un bloque, esta no necesita terminar en un punto y coma, aunque es usualmente considerado una <em>buena práctica</em> porque previene el olvidar agregarlo cuando se extienda el bloque con otra declaración.</p> + +<p><img alt="css syntax - declarations block.png" class="default internal" src="/@api/deki/files/6166/=css_syntax_-_declarations_block.png" style="border: 1px solid black; padding: 1em;"></p> + +<div class="note">El contenido de un bloque de declaración CSS, que es una lista de declaraciones separadas por un punto y coma, sin las llaves de apertura y cierre, pueden ser colocadas dentro del atributo <code><a href="/en/HTML/Global_attributes#attr-style" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-style">style</a> de HTML</code>.</div> + +<h2 id="Sets_de_reglas_CSS">Sets de reglas CSS</h2> + +<p>Si cada hoja de estilos pudiera aplicar una sól declaración a cada elemento de una página web, sería algo inútil. El verdadero objetivo es aplicar varias declaraciones a distintas partes del documento.</p> + +<p>CSS permite esto asociando condiciones con bloques de declaraciones. Cada declaración (válida) es precedida por un <em>selector</em>, es decir, una condición que selecciona algunos elementos de la página. El bloque que forma el par selector-declaraciones recibe el nombre de <strong>set de reglas</strong>, o simplemente una <strong>regla</strong>.</p> + +<p><img alt="css syntax - ruleset.png" class="default internal" src="/@api/deki/files/6167/=css_syntax_-_ruleset.png" style="border: 1px solid black; padding: 1em;"></p> + +<p>Debido a que un elemento de la página puede ser seleccionado por varios selectores, y, por lo tanto, por varias reglas que pueden contener la misma propiedad más de una vez, con diferentes valores, el estandar CSS define cuál regla tiene precedencia por sobre las otras y debe ser aplicada: esto se conoce como el algoritmo <a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="Cascading and inheritance">cascada</a>.</p> + +<div class="note">Es importante resaltar que si un set de reglas formado por un grupo de selectores es un atajo que reemplaza varios sets de reglas con un solo selector cada una, esto no aplica a la validez del set de reglas en sí.<br> +<br> +Esto tiene una consecuencia importante: si algún selector básico es inválido, como cuando se usa un pseudo-elemento o pseudo-clase inválida, el <em>selector </em>entero es inválido y, por lo tanto, el set de reglas completo es ignorado (por ser inválido también).</div> + +<h2 id="Declaraciones_CSS">Declaraciones CSS</h2> + +<p>Los sets de reglas son los bloques principales de una hoja de estilos, que generalmente consiste en una larga lista de ellos. Pero existe otro tipo de innformación que el autor web puede transmitir en la hoja de estilos, como el set de caracteres, otra hoja de estilos a importar, font face o listar descripciones de contador, entre otros. Se usarán tipos de declaracionnes específicas para esto mismo.</p> + +<p>Una <strong>declaración </strong>es un bloque que empieza con un caracter (no espacio) y termina con la primer llave de cierre o punto y coma (fuera de una cadena, sin escape y no incluñido dentro de otro par de {}. () o []).</p> + +<p><img alt="css syntax - statements Venn diag.png" class="default internal" src="/@api/deki/files/6168/=css_syntax_-_statements_Venn_diag.png" style="padding: 1em;"></p> + +<p>Existen dos tipos de declaraciones:</p> + +<ul> + <li><strong>Sets de reglas </strong>(o <em>reglas</em>) que, como lo visto, asocian una colección de declaraciones CSS a una condición descrita como selector.</li> + <li><strong>Reglas At</strong> que inician con un símbolo '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), seguido de un identificados y luego el resto de la declaración que finaliza con un punto y coma (;) por fuera de un bloque o al inicio del próximo bloque. Cada tipo de <a href="/en/CSS/At-rule" title="At-rule">reglas at</a>, definidas por un identificador, tienen su propia sintaxis interna, y semántica por supuesto. Se utilizan para establecer información de meta datos (como {{ cssxref("@charset") }} o {{ cssxref("@import") }}), información condicional (como {{ cssxref("@media") }} o {{ cssxref("@document") }}), o información descrciptiva (como {{ cssxref("@font-face") }}).</li> +</ul> + +<p>Toda declaración que no es un set de reglas ni una regla at es considerada inválida e ignorada.</p> + +<p><a name="nested_statements">Existe otro grupo de declaraciones: las <strong>declaraciones anidadas</strong>. Estass son declaraciones que pueden ser usadas en un subset específico de reglas at (las <em>reglas de grupo condicionales</em>). Estas declaraciones sólo aplican si una condición específica se cumple: el contenido de la regla at <code>@media</code> se aplica sóllo si el dispositivo en el que el navegaddor se encuentra corriendo cumple dadas condiciones; el contenido de la regla at <code>@document</code> se aplica sólo si la página actual cumple dadas condiciones, y así. En CSS1 y CSS2.1, sólo los sets de reglas pueden ser usados dentro de reglas de grupo condicionales. Esto era muy restrictivo y se dejó de aplicar en </a><a href="/en/CSS/CSS3#Conditionals" title="en/CSS/CSS3#Conditionals"><em>CSS Conditionals Level 3</em></a>. Actualmente, aunque sigue siendo experimental y no es soportado por todos los navegadores, las reglas de grupo condicional pueden contener varios sets de reglas, e incluso, aunque no todas, reglas at.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{ CSS_key_concepts()}}</li> +</ul> diff --git a/files/es/web/css/text-decoration-color/index.html b/files/es/web/css/text-decoration-color/index.html new file mode 100644 index 0000000000..1310ee9c30 --- /dev/null +++ b/files/es/web/css/text-decoration-color/index.html @@ -0,0 +1,148 @@ +--- +title: text-decoration-color +slug: Web/CSS/text-decoration-color +tags: + - Propiedad CSS + - Referencia + - Texto CSS +translation_of: Web/CSS/text-decoration-color +--- +<div>{{ CSSRef }}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <strong><code>text-decoration-color</code></strong> establece el color usado cuando se dibujan subrayados o líneas a través del texto, especificadas por la propiedad {{ cssxref("text-decoration-line") }}. El color especificado será el mismo para los tres tipos de línea.</p> + +<p>CSS no provee un mecanismo directo para especificar un color único para cada tipo de línea. Sin embargo, se puede obtener un efecto similar anidando elementos HTML, aplicando diferente tipo de línea para cada uno (via la propiedad <code>text-decoration-line</code>), y especificando un color de línea (usando <code>text-decoration-color</code>) propio para cada elemento.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">/* valores <color> */ +text-decoration-color: currentColor; +text-decoration-color: red; +text-decoration-color: #00ff00; +text-decoration-color: rgba(255, 128, 128, 0.5); +text-decoration-color: transparent; + +/* Valores globales */ +text-decoration-color: inherit; +text-decoration-color: initial; +text-decoration-color: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><color></code></dt> + <dd>La propiedad <code>color</code> acepta varlos nombres clave y notaciones numéricas. Vea {{cssxref("<color>")}} para más detalles.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css; highlight:[3]">.example { + text-decoration: underline; + text-decoration-color: red; +} +</pre> + +<p>El ejemplo anterior tiene el mismo efecto que el código siguiente, que además añade un estilo para cuando el elemento tiene el puntero del mouse encima.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> +<style> +.example { + font-size: 24px; + text-decoration: underline; + color: red; +} +.example:hover { + color: blue; + text-decoration: line-through; +} +</style> +</head> +<body> +<span class="example"> + <span style="color:black;">texto negro con subrayado rojo, y azul con el cursor encima</span> +</span> +</body> +</html> +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color') }}</td> + <td>{{ Spec2('CSS3 Text Decoration') }}</td> + <td>Definición inicial. La propiedad {{cssxref("text-decoration")}} no era una forma reducida anteriormente</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatGeckoDesktop("6.0") }} - {{ CompatGeckoDesktop("39.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("36.0") }} without prefix</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>7.1 {{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatGeckoMobile("6.0") }} - {{ CompatGeckoMobile("39.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("36.0") }} without prefix</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>8 {{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/text-decoration-line/index.html b/files/es/web/css/text-decoration-line/index.html new file mode 100644 index 0000000000..6fcbbc2d7c --- /dev/null +++ b/files/es/web/css/text-decoration-line/index.html @@ -0,0 +1,100 @@ +--- +title: text-decoration-line +slug: Web/CSS/text-decoration-line +tags: + - Propiedad CSS + - Texto CSS +translation_of: Web/CSS/text-decoration-line +--- +<div>{{CSSRef}}</div> + +<p>La propiedad <a href="/es/docs/CSS">CSS</a> <strong><code>text-decoration-line</code></strong> establece el tipo de decoración de línea que se agregará a un elemento.</p> + +<div>{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}</div> + +<p>When setting multiple line-decoration properties at once, it may be more convenient to use the {{cssxref("text-decoration")}} shorthand property instead.</p> + +<p>La decoración <em>underline</em> posiciona el subrayado debajo del texto, la decoración <em>overline</em> posiciona el subrayado encima del texto, y la decoración <em>line-through</em> posiciona la línea en medio del texto.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* Valores de clave */ +text-decoration-line: none; +text-decoration-line: underline; +text-decoration-line: overline; +text-decoration-line: line-through; +text-decoration-line: underline overline; /* Dos líneas de decoración */ +text-decoration-line: overline underline line-through; /* Múltiples líneas de decoración */ + +/* Valores globales */ +text-decoration-line: inherit; +text-decoration-line: initial; +text-decoration-line: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<p><strong><code>none</code></strong></p> + +<dl> + <dd>No agrega decoración al texto.</dd> + <dt><code>underline</code></dt> + <dd>Cada línea del texto lleva subrayado inferior.</dd> + <dt><code>overline</code></dt> + <dd>Cada línea del texto lleva subrayado superior.</dd> + <dt><code>line-through</code></dt> + <dd>Cada línea del texto lleva una línea atravesando por en medio del mismo.</dd> + <dt><code>blink {{deprecated_inline}}</code></dt> + <dd>El texto parpadea (se alterna entre visible e invisible). Según los ajustes del agente usuario, el texto puede simplemente no parpadear. Este valor está en <strong>desuso</strong>, en favor de las <a href="/es/docs/Web/CSS/animation">Animaciones</a>.</dd> + <dt><code>-moz-anchor-decoration </code>{{non-standard_inline}}</dt> + <dd>El texto es decorado con el estilo de un ancla; no adecuado para contenido web.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><p>¡Aquí hay texto con subrayado inferior rojo ondulado!</p></pre> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css">p { + text-decoration-line: underline; + text-decoration-style: wavy; + text-decoration-color: red; +}</pre> + +<p>{{EmbedLiveSample('example', 300, 50)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-line', 'text-decoration-line')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td>Definición inicial. La propiedad {{cssxref("text-decoration")}} no era una forma reducida anteriormente.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{Compat("css.properties.text-decoration-line")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>When setting multiple line-decoration properties at once, it may be more convenient to use the {{cssxref("text-decoration")}} shorthand property instead.</li> +</ul> diff --git a/files/es/web/css/text-decoration-style/index.html b/files/es/web/css/text-decoration-style/index.html new file mode 100644 index 0000000000..d698913b8f --- /dev/null +++ b/files/es/web/css/text-decoration-style/index.html @@ -0,0 +1,200 @@ +--- +title: text-decoration-style +slug: Web/CSS/text-decoration-style +tags: + - Propiedad CSS + - Texto CSS +translation_of: Web/CSS/text-decoration-style +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>text-decoration-style</code></strong> define el estilo de las líneas especificadas por {{ cssxref("text-decoration-line") }}. El estilo aplica a todas las líneas, no hay manera de establecer diferentes estilos para cada línea definida por <code>text-decoration-line</code>.</p> + +<p>Si la decoración especificada tiene un significado semántico propio, como <em>line-through</em>, que significa que el texto ha sido removido, se recomienda a los autores denotar este significado usando una etiqueta HTML, como {{ HTMLElement("del") }} o {{ HTMLElement("s") }}. Siendo que los navegadores pueden deshabilitar estilos en algunos casos, el significado semántico no desaparecerá en dicha situación.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">/* Valores clave */ +text-decoration-style: solid; +text-decoration-style: double; +text-decoration-style: dotted; +text-decoration-style: dashed; +text-decoration-style: wavy; + +/* Valores globales */ +text-decoration-style: inherit; +text-decoration-style: initial; +text-decoration-style: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>solid double dotted dashed wavy</code></dt> + <dd>Es una de las siguientes palabras clave: + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Palabra clave</th> + <th scope="col">Descripción</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>solid</code></td> + <td>Dibuja una línea simple</td> + <td> </td> + </tr> + <tr> + <td><code>double</code></td> + <td>Dibuja una línea doble</td> + <td> </td> + </tr> + <tr> + <td><code>dotted</code></td> + <td>Dibuja una línea punteada</td> + <td> </td> + </tr> + <tr> + <td><code>dashed</code></td> + <td>Dibuja una línea discontinua</td> + <td> </td> + </tr> + <tr> + <td><code>wavy</code></td> + <td>Dibuja una línea ondulada</td> + <td> </td> + </tr> + <tr> + <td><code>-moz-none</code>{{ non-standard_inline }}<code> </code></td> + <td>No dibuja una línea</td> + <td><strong>No usarse:</strong> usar {{ cssxref("text-decoration-line") }}<code>: none</code> en su lugar</td> + </tr> + </tbody> + </table> + </dd> + <dt><code>inherit</code></dt> + <dd>Es una palabra clave que indica que se reutilice el valor calculado del elemento padre.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css" style="display: none;">.example { + -moz-text-decoration-line: underline; + -moz-text-decoration-style: wavy; + -moz-text-decoration-color: red; + -webkit-text-decoration-line: underline; + -webkit-text-decoration-style: wavy; + -webkit-text-decoration-color: red; +}</pre> + +<pre class="brush: css">.example { + text-decoration-line: underline; + text-decoration-style: wavy; + text-decoration-color: red; +} +</pre> + +<pre class="brush: html"><p class="example">Así se ve el resultado.</p> +</pre> + +<p>{{ EmbedLiveSample('Ejemplos', '', '', '') }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style') }}</td> + <td>{{ Spec2('CSS3 Text Decoration') }}</td> + <td>Definición inicial. La propiedad {{cssxref("text-decoration")}} no era una forma reducida anteriormente.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatGeckoDesktop("6.0") }} - {{CompatGeckoDesktop("39.0")}}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("36.0") }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td>wavy</td> + <td>{{ CompatGeckoDesktop("6.0") }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatGeckoMobile("6.0") }}- {{CompatGeckoMobile("39.0")}}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("36.0") }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + <tr> + <td>wavy</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatGeckoMobile("6.0") }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/text-decoration/index.html b/files/es/web/css/text-decoration/index.html new file mode 100644 index 0000000000..7a3675657b --- /dev/null +++ b/files/es/web/css/text-decoration/index.html @@ -0,0 +1,202 @@ +--- +title: text-decoration +slug: Web/CSS/text-decoration +tags: + - Propiedad CSS + - Texto CSS +translation_of: Web/CSS/text-decoration +--- +<div>{{CSSRef}}</div> + +<p>La propiedad CSS <strong><code>text-decoration</code></strong> se usa para establecer el formato de texto a subrayado (<code>underline</code>) y suprarrayado (<code>overline</code>), tachado (<code>line-through</code>) o parpadeo (<code>blink</code>). El subrayado y el suprarrayado son posicionados bajo el texto, mientras la línea a través de éste se posiciona por encima.</p> + +<p>Las decoraciones de texto se dibujan a través de los elementos descendientes. Esto significa que no es posible deshabilitar la decoración en un descendiente si la propiedad se especifica en un elemento ancestro. Por ejemplo, en el código <code><p>Este texto tiene <em>algunas palabras enfatizadas</em> en él.</p></code>, la regla de estilos <code>p { text-decoration: underline; }</code> causará que el párrafo entero tenga subrayado. La regla <code>em { text-decoration: none; }</code> no causará ningún cambio; el párrafo entero seguirá subrayado. Sin embargo, la regla <code>em { text-decoration: overline; }</code> causará una segunda decoración que aparecerá sobre "algunas palabras enfatizadas".</p> + +<div class="note style-wrap"> +<p><strong>Nota: </strong>El Nivel 3 de Decoraciones de Texto transformó esta propiedad en la forma reducida de las tres propiedades nuevas {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, y {{cssxref("text-decoration-style")}}. Como en cualquier otra propiedad reducida, esto significa que restaura sus valores a los predeterminados si no son definidos explícitamente en la propiedad.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">/* Valores clave */ +text-decoration: none; /* Sin decoración */ +text-decoration: underline red; /* Subrayado rojo */ +text-decoration: underline wavy red; /* Subrayado rojo ondulado */ + +/* Valores globales */ +text-decoration: inherit; +text-decoration: initial; +text-decoration: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<p>La propiedad <code>text-decoration</code> es una forma reducida, y puede usar los valores de cada una de las propiedades de la forma larga: {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, y {{cssxref("text-decoration-style")}}</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">h1.under { + text-decoration: underline; +} +h1.over { + text-decoration: overline; +} +p.line { + text-decoration: line-through; +} +p.blink { + text-decoration: blink; +} +a.none { + text-decoration: none; +} +p.underover { + text-decoration: underline overline; +} +</pre> + +<pre class="brush: html" style="display: none;"><h1 class="under">Underlined Header</h1> +<p class="line">If you want to strike out text, use line-through.</p> +<p class="blink">This text might blink for you - if you use Explorer, it will not.</p> +<h1 class="over">and now an overlined header.</h1> +<p>This <a class="none" href="textdecoration.html">link will not be underlined</a>, as most links are by default. Be careful with removing the text decoration on links since most users depend on the underline to signify a hyperlink.</p> +<p class="underover">This text has both underline and overline.</p> +</pre> + +<p>{{EmbedLiveSample('Examples','100%','310')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td> + <p>Transformada a propiedad reducida. Soporte agregado para el valor de {{cssxref('text-decoration-style')}}.</p> + </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Sin cambios significativos</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>1.0</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + <tr> + <td>valor <code>blink</code></td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + {{CompatGeckoDesktop("23.0")}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>4.0<br> + 15.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td>Propiedad reducida</td> + <td>{{CompatGeckoDesktop("6.0")}}<sup>[3]</sup><br> + {{CompatGeckoDesktop("36.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>valor <code>blink</code></td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + {{CompatGeckoDesktop("23.0")}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>4.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td>Propiedad reducida</td> + <td>{{CompatGeckoMobile("6.0")}}<sup>[3]</sup><br> + {{CompatGeckoMobile("36.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>8<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] El valor <code>blink</code> no tiene ningún efecto.</p> + +<p>[2] Safari no soporta {{cssxref("text-decoration-style")}}.</p> + +<p>[3] Esta versión de Gecko tiene una implementación parcial.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>El atributo {{cssxref("list-style")}} controla la apariencia de los items en listas {{HTMLElement("ol")}} y {{HTMLElement("ul")}} de HTML.</li> +</ul> diff --git a/files/es/web/css/text-emphasis-color/index.html b/files/es/web/css/text-emphasis-color/index.html new file mode 100644 index 0000000000..10c814748e --- /dev/null +++ b/files/es/web/css/text-emphasis-color/index.html @@ -0,0 +1,103 @@ +--- +title: text-emphasis-color +slug: Web/CSS/text-emphasis-color +tags: + - CSS + - Colores HTML + - Decoración de Texto CSS + - Estilizando HTML + - Estilos CSS + - Propiedad CSS + - Referencia + - text-decoration-color + - Énfasis de Texto +translation_of: Web/CSS/text-emphasis-color +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">La propiedad <a href="/es/docs/Web/CSS">CSS</a> <strong><code>text-emphasis-color</code></strong> (que podría traducirse como color del texto con énfasis) define el color de las marcas de énfasis. Este valor también puede definirse usando el atajo {{cssxref("text-emphasis")}}</span></p> + +<pre class="brush:css no-line-numbers">/* Valor inicial*/ +text-emphasis-color: currentColor; + +/* <color> */ +text-emphasis-color: #555; +text-emphasis-color: blue; +text-emphasis-color: rgba(90, 200, 160, 0.8); +text-emphasis-color: transparent; + +/* Valores globales */ +text-emphasis-color: inherit; +text-emphasis-color: initial; +text-emphasis-color: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintáxis">Sintáxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><color></code></dt> + <dd>Define el color de las marcas de énfasis. Si ningún color es declarado, el color por defecto es <code>currentColor</code> (color actual).</dd> +</dl> + +<h3 id="Sintáxis_Formal">Sintáxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">h3 { + text-emphasis-color: #555; + text-emphasis-style: "*"; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Este es un ejemplo:</p> + +<h3>Esto está marcado con énfasis!</h3> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Examples", 450, 100)}}Ejemplo incrustado en vivo</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-color-property', 'text-emphasis')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> + + + +<p>{{Compat("css.properties.text-emphasis-color")}}</p> + +<h2 id="Ver_También">Ver También</h2> + +<ul> + <li>El tipo de dato {{cssxref("<color>")}}.</li> + <li>Las otras propiedades de marcas de énfasis relacioanadas: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis')}}, y {{cssxref("text-emphasis-position")}}.</li> + <li>Otras propiedades relacionadas al color: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}}</li> + <li><a href="/es/docs/Web/HTML/Aplicar_Color">Aplicando color a los elementos HTML utilizando CSS.</a></li> +</ul> diff --git a/files/es/web/css/text-emphasis/index.html b/files/es/web/css/text-emphasis/index.html new file mode 100644 index 0000000000..94979eb8af --- /dev/null +++ b/files/es/web/css/text-emphasis/index.html @@ -0,0 +1,178 @@ +--- +title: text-emphasis +slug: Web/CSS/text-emphasis +translation_of: Web/CSS/text-emphasis +--- +<div> +<p>La <strong>propiedad</strong> <strong><a href="https://developer.mozilla.org/es/docs/Web/CSS">CSS</a></strong> de <strong>text-emphasis</strong>, es una propiedad <em>abreviada</em> para establecer los valores de <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style">text-empahasis-style</a> y <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color">text-emphasis-color</a>, en una sola declaración.</p> + +<p>Esta <strong>propiedad</strong> aplicara el énfasis a cada carácter especificado en el texto del elemento, a excepción de caracteres separados como espacios y caracteres de control .</p> +</div> + +<pre class="brush:css no-line-numbers">/* Valor Inicial */ +text-emphasis: none; /* No emphasis marks */ + +/* <string> valor */ +text-emphasis: 'x'; +text-emphasis: '点'; +text-emphasis: '\25B2'; +text-emphasis: '*' #555; +text-emphasis: 'foo'; /* Should NOT use. It may be computed to or rendered as 'f' only */ + +/* Valor de la Palabra Clave */ +text-emphasis: filled; +text-emphasis: open; +text-emphasis: filled sesame; +text-emphasis: open sesame; + +/* Valor de la Palabra clave combinada con un color */ +text-emphasis: filled sesame #555; + +/* Valores Globales */ +text-emphasis: inherit; +text-emphasis: initial; +text-emphasis: unset; +</pre> + +<p>La propiedad <strong>text-emphasis</strong> es diferente a la propiedad <a href="https://developer.mozilla.org/es/docs/Web/CSS/text-decoration">text-decoration</a>.</p> + +<p><a href="https://developer.mozilla.org/es/docs/Web/CSS/text-decoration">Text-decoration</a> no hereda y la decoración se aplica atreves de todo el elemento. Sin embargo, la propiedad <strong>test-emphasis</strong> si hereda, lo que significa que es posible cambiar el <strong>énfasis</strong> para los descendientes.</p> + +<p>The size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and <code>text-emphasis</code> may affect line height when the current leading is not enough for the marks.</p> + +<div class="note"> +<p><code>text-emphasis</code> doesn't reset the value of {{cssxref("text-emphasis-position")}}. This is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. In the very rare cases when this is needed, the property {{cssxref("text-emphasis-position")}}.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>No emphasis marks.</dd> + <dt><code>filled</code></dt> + <dd>The shape is filled with solid color. If neither <code>filled</code> nor <code>open</code> is present, this is the default.</dd> + <dt><code>open</code></dt> + <dd>The shape is hollow.</dd> + <dt><code>dot</code></dt> + <dd>Display small circles as marks. The filled dot is <code>'•'</code> (<code>U+2022</code>), and the open dot is <code>'◦'</code> (<code>U+25E6</code>).</dd> + <dt><code>circle</code></dt> + <dd>Display large circles as marks. The filled circle is <code>'●'</code> (<code>U+25CF</code>), and the open circle is <code>'○'</code> (<code>U+25CB</code>). This is the default shape in horizontal writing modes when no other shape is given.</dd> + <dt><code>double-circle</code></dt> + <dd>Display double circles as marks. The filled double-circle is <code>'◉'</code> (<code>U+25C9</code>), and the open double-circle is <code>'◎'</code> (<code>U+25CE</code>).</dd> + <dt><code>triangle</code></dt> + <dd>Display triangles as marks. The filled triangle is <code>'▲'</code> (<code>U+25B2</code>), and the open triangle is <code>'△'</code> (<code>U+25B3</code>).</dd> + <dt><code>sesame</code></dt> + <dd>Display sesames as marks. The filled sesame is <code>'﹅'</code> (<code>U+FE45</code>), and the open sesame is <code>'﹆'</code> (<code>U+FE46</code>). This is the default shape in vertical writing modes when no other shape is given.</dd> + <dt><code><string></code></dt> + <dd>Display the given string as marks. Authors should not specify more than one<em> character</em> in <code><string></code>. The UA may truncate or ignore strings consisting of more than one grapheme cluster.</dd> + <dt><code><color></code></dt> + <dd>Defines the color of the mark. If no color is present, it defaults to <code>currentColor</code>.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="A_heading_with_emphasis_shape_and_color">A heading with emphasis shape and color</h3> + +<p>This example draws a heading with triangles used to emphasize each character.</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">h2 { + text-emphasis: triangle #D55; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h2>This is important!</h2></pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("46")}}<sup>[1]</sup></td> + <td>25.0{{property_prefix("-webkit")}}</td> + <td>{{CompatNo()}}</td> + <td>15.0{{property_prefix("-webkit")}}</td> + <td>6.1{{property_prefix("-webkit")}}<br> + 7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("46")}}<sup>[1]</sup></td> + <td>4.4{{property_prefix("-webkit")}}</td> + <td>{{CompatNo()}}</td> + <td>33{{property_prefix("-webkit")}}</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Firefox 45, it wasn't activated by default: in <code>about:config</code>, the user has to set the preference <code>layout.css.text-emphasis.enabled</code> to <code>true</code>. Activated by default in Firefox 46, this preference was removed in Firefox 49.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>The longhand properties {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}.</li> + <li>The {{cssxref('text-emphasis-position')}} property allowing to define the position of the emphasis marks.</li> +</ul> diff --git a/files/es/web/css/text-orientation/index.html b/files/es/web/css/text-orientation/index.html new file mode 100644 index 0000000000..82b6f3295b --- /dev/null +++ b/files/es/web/css/text-orientation/index.html @@ -0,0 +1,104 @@ +--- +title: text-orientation +slug: Web/CSS/text-orientation +tags: + - CSS + - Formas de Escritura CSS + - Orientacion del Texto CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/text-orientation +--- +<div>{{CSSRef}}</div> + +<p>La propiedad <a href="/en-US/docs/Web/CSS">CSS </a><strong><code>text-orientation</code></strong> define la orientación del texto en una línea de escritura. Ésta propiedad sólo tiene efecto en modo vertical, ésto es, cuando {{cssxref("writing-mode")}} no está establecido cómo <code>horizontal-tb</code>. Ésta propiedad CSS es util para controlar la forma en que se muestran los lenguajes que utilizan escritura vertical, y tambien para construir encabezados verticales para tablas.</p> + +<pre class="brush:css no-line-numbers">/* Palabras clave valor */ +text-orientation: mixed; +text-orientation: upright; +text-orientation: sideways-right; +text-orientation: sideways; +text-orientation: use-glyph-orientation; + +/* Valores globales */ +text-orientation: inherit; +text-orientation: initial; +text-orientation: unset; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La propiedad <code>text-orientation</code> puede tener cómo valor una de las palabras clave listadas a continuación.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>mixed</code></dt> + <dd>Rota los caracteres de escritura horizontal 90° en sentido de las manecillas del reloj. Establece los caracteres de escritura vertical de forma natural. Este es el valor por defecto.</dd> + <dt><code>upright</code></dt> + <dd>Establece los caracteres de escritura horizontal de forma natural (pero se presentan de arriba hacia abajo), de igual manera establece de forma natural los glifos para escritura vertical. Note que ésta palabra clave causa que todos los caracteres sean considerados de forma izquierda-a-derecha: el valor utilizado para {{cssxref("direction")}} es forzado a ser <code>ltr</code>.</dd> + <dt><code>sideways</code></dt> + <dd>Causa que los caracteres sean presentados de la forma en que se presentarían de manera horizontal, pero con la línea de escritura rotada 90° en sentido de las manecillas del reloj.</dd> + <dt><code>sideways-right</code></dt> + <dd>Un alias para <code>sideways</code> que se mantiene para propositos de compatibilidad.</dd> + <dt><code>use-glyph-orientation</code></dt> + <dd>En elementos SVG, ésta palabra clave produce que sea utilizado el valor de las propiedades SVG desaprobadas <code>glyph-orientation-vertical</code> y <code>glyph-orientation-horizontal</code>.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Lorem ipsum dolet semper quisquam.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + writing-mode: vertical-rl; + text-orientation: upright; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Writing Modes', '#text-orientation', 'text-orientation')}}</td> + <td>{{Spec2('CSS3 Writing Modes')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p> </p> + + + +<p>{{Compat("css.properties.text-orientation")}}</p> + +<p> </p> + +<h2 id="Vea_tambien">Vea tambien</h2> + +<ul> + <li>Las otras propiedades CSS relacionadas con escritura vertical: {{cssxref("writing-mode")}}, {{cssxref("text-combine-upright")}}, y {{cssxref("unicode-bidi")}}.</li> +</ul> diff --git a/files/es/web/css/text-overflow/index.html b/files/es/web/css/text-overflow/index.html new file mode 100644 index 0000000000..3d559cae8f --- /dev/null +++ b/files/es/web/css/text-overflow/index.html @@ -0,0 +1,308 @@ +--- +title: text-overflow +slug: Web/CSS/text-overflow +translation_of: Web/CSS/text-overflow +--- +<div>{{CSSRef}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>text-overflow</code></strong> determina como el contenido que se desborda y que no es mostrado, va a hacérsele notar a los usuarios. Puede ser cortado, mostrar una elipsis ('<code>…</code>', <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>), o mostrar una cadena de texto personalizada.</p> + +<div>{{EmbedInteractiveExample("pages/css/text-overflow.html")}}</div> + +<p>La propiedad <code>text-overflow</code> no fuerza a que ocurra un desbordamiento. Para hacer que un texto desborde a su contenedor debes poner algunas otras propiedades de CSS. Por ejemplo:</p> + +<pre class="brush: css no-line-numbers notranslate">overflow: hidden; +white-space: nowrap;</pre> + +<p>La propiedad <code>text-overflow</code> solo afecta al contenido que está rebasando un elemento de contenedor en bloque en su dirección de progresión <em>inline</em> (no así, a un texto que rebase por el <em>bottom </em>del contenedor, por).</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La propiedad <code>text-overflow</code> ha de ser especificada usando uno o dos valores. Si se define solo un valor, este determinará el comportamiento del <em>overflow </em>para el final de la línea (el extremo derecho en un texto izquierda-a-derecha o el extremo izquierdo en un texto derecha-a-izquierda). Si se definen dos valores, el primero hará referencia al comportamiento <em>overflow</em> para para el extremo izquierdo y el segundo al extremo derecho de la línea.</p> + +<p>Cada valor se especificará como una de las siguientes opciones:</p> + +<ul> + <li>Una palabra clave: <code><a href="#clip">clip</a></code>, <code><a href="#ellipsis">ellipsis</a></code>, <code><a href="#fade">fade</a></code></li> + <li>La función <code><a href="#fade( <length> | <percentage> )">fade()</a></code>, que recibe {{cssxref("<length>")}} o {{cssxref("<percentage>")}} para controlar la distancia de desvanecimiento</li> + <li>Un <code><a href="#<string>"><string></a></code>.</li> +</ul> + +<h3 id="Values">Values</h3> + +<dl> + <dt><a id="clip" name="clip"><code>clip</code></a></dt> + <dd>The default for this property. This keyword value will truncate the text at the limit of the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">content area</a>, therefore the truncation can happen in the middle of a character. To clip at the transition between characters you can specify <code>text-overflow</code> as an empty string, if that is supported in your target browsers: <code>text-overflow: '';</code>.</dd> + <dt><a id="ellipsis" name="ellipsis"><code>ellipsis</code></a></dt> + <dd>This keyword value will display an ellipsis (<code>'…'</code>, <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) to represent clipped text. The ellipsis is displayed inside the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">content area</a>, decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped.</dd> + <dt><a id="<string>" name="<string>"><code><string></code></a> {{experimental_inline}}</dt> + <dd>The {{cssxref("<string>")}} to be used to represent clipped text. The string is displayed inside the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">content area</a>, shortening the size of the displayed text. If there is not enough space to display the string itself, it is clipped.</dd> + <dt><a id="fade" name="fade"><code>fade</code></a> {{experimental_inline}}</dt> + <dd>This keyword clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.</dd> + <dt><a id="fade( <length> | <percentage> )" name="fade( <length> | <percentage> )"><code>fade( <length> | <percentage> )</code></a> {{experimental_inline}}</dt> + <dd>This function clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.</dd> + <dd>The argument determines the distance over which the fade effect is applied. The {{cssxref("<percentage>")}} is resolved against the width of the line box. Values lower than <code>0</code> are clipped to <code>0</code>. Values greater than the width of the line box are clipped to the width of the line box.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}} +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">p { + width: 200px; + border: 1px solid; + padding: 2px 5px; + + /* BOTH of the following are required for text-overflow */ + white-space: nowrap; + overflow: hidden; +} + +.overflow-visible { + white-space: initial; +} + +.overflow-clip { + text-overflow: clip; +} + +.overflow-ellipsis { + text-overflow: ellipsis; +} + +.overflow-string { + /* Not supported in most browsers, + see the 'Browser compatibility' section below */ + text-overflow: " [..]"; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Examples', 300, 220, '', 'Web/CSS/text-overflow')}}</p> + +<table class="standard-table"> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="col" style="width: 15em;">CSS value</th> + <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: ltr</code></th> + <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: rtl</code></th> + </tr> + <tr> + <th scope="col">Expected Result</th> + <th scope="col">Live result</th> + <th scope="col">Expected Result</th> + <th scope="col">Live result</th> + </tr> + </thead> + <tbody> + <tr> + <td><em>visible overflow</em></td> + <td style="font-family: monospace;">1234567890</td> + <td style="direction: ltr;"> + <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="">1234567890</span></div> + </td> + <td style="font-family: monospace;">0987654321</td> + <td> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: clip</code></td> + <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip.png" class="default internal" src="/@api/deki/files/6056/=t-o_clip.png"></td> + <td style="direction: ltr;"> + <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">123456</div> + </td> + <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip_rtl.png" class="default internal" src="/@api/deki/files/6057/=t-o_clip_rtl.png"></td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;"><span style="">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ''</code></td> + <td style="font-family: monospace;">12345</td> + <td style="direction: ltr;"> + <div style="">123456</div> + </td> + <td style="font-family: monospace;">54321</td> + <td style="direction: rtl;"> + <div style=""><span style="">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ellipsis</code></td> + <td style="font-family: monospace;">1234…</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="">1234567890</span></div> + </td> + <td style="font-family: monospace;">…4321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: '.'</code></td> + <td style="font-family: monospace;">1234.</td> + <td style="direction: ltr;"> + <div style=""><span style="">1234567890</span></div> + </td> + <td style="font-family: monospace;">.4321</td> + <td style="direction: rtl;"> + <div style=""><span style="">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: clip clip</code></td> + <td style="font-family: monospace;">123456</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="">1234567890</span></div> + </td> + <td style="font-family: monospace;">654321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: clip ellipsis</code></td> + <td style="font-family: monospace;">1234…</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="">1234567890</span></div> + </td> + <td style="font-family: monospace;">6543…</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: clip '.'</code></td> + <td style="font-family: monospace;">1234.</td> + <td style="direction: ltr;"> + <div style=""><span style="">1234567890</span></div> + </td> + <td style="font-family: monospace;">6543.</td> + <td style="direction: rtl;"> + <div style=""><span style="">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ellipsis clip</code></td> + <td style="font-family: monospace;">…3456</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="">1234567890</span></div> + </td> + <td style="font-family: monospace;">…4321</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ellipsis ellipsis</code></td> + <td style="font-family: monospace;">…34…</td> + <td style="direction: ltr;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="">1234567890</span></div> + </td> + <td style="font-family: monospace;">…43…</td> + <td style="direction: rtl;"> + <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ellipsis '.'</code></td> + <td style="font-family: monospace;">…34.</td> + <td style="direction: ltr;"> + <div style=""><span style="">1234567890</span></div> + </td> + <td style="font-family: monospace;">…43.</td> + <td style="direction: rtl;"> + <div style=""><span style="">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ',' clip</code></td> + <td style="font-family: monospace;">,3456</td> + <td style="direction: ltr;"> + <div style=""><span style="">1234567890</span></div> + </td> + <td style="font-family: monospace;">,4321</td> + <td style="direction: rtl;"> + <div style=""><span style="">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ',' ellipsis</code></td> + <td style="font-family: monospace;">,34…</td> + <td style="direction: ltr;"> + <div style=""><span style="">1234567890</span></div> + </td> + <td style="font-family: monospace;">,43…</td> + <td style="direction: rtl;"> + <div style=""><span style="">1234567890</span></div> + </td> + </tr> + <tr> + <td><code>text-overflow: ',' '.'</code></td> + <td style="font-family: monospace;">,34.</td> + <td style="direction: ltr;"> + <div style=""><span style="">1234567890</span></div> + </td> + <td style="font-family: monospace;">,53.</td> + <td style="direction: rtl;"> + <div style=""><span style="">1234567890</span></div> + </td> + </tr> + </tbody> +</table> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 UI', '#text-overflow', 'text-overflow')}}</td> + <td>{{Spec2('CSS4 UI')}}</td> + <td>Added the values <code><string></code> and <code>fade</code> and the <code>fade()</code> function</td> + </tr> + <tr> + <td>{{SpecName('CSS3 UI', '#text-overflow', 'text-overflow')}}</td> + <td>{{Spec2('CSS3 UI')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>A previous version of this interface reached the <em>Candidate Recommendation</em> status. As some not-listed-at-risk features needed to be removed, the spec was demoted to the <em>Working Draft</em> level, explaining why browsers implemented this property unprefixed, though not at the CR state.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.text-overflow")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Related CSS properties: {{cssxref("overflow")}}, {{cssxref("white-space")}}</li> + <li>CSS properties that control line breaks in words: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}</li> +</ul> diff --git a/files/es/web/css/text-shadow/index.html b/files/es/web/css/text-shadow/index.html new file mode 100644 index 0000000000..1e0cd7ee53 --- /dev/null +++ b/files/es/web/css/text-shadow/index.html @@ -0,0 +1,197 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +tags: + - Propiedad CSS + - Texto CSS +translation_of: Web/CSS/text-shadow +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <strong><code>text-shadow</code></strong> agrega sombra al texto. Acepta una lista de sombras separadas por coma, para aplicarlas al texto y a la propiedad {{cssxref("text-decoration","text-decorations")}} del elemento.</p> + +<p>Cada sombra es especificada como un ófset del texto, junto con valores de color y radio de difuminación opcionales.</p> + +<p>Múltiples sombras son aplicadas del frente al fondo, en el mismo orden que sean definidas.</p> + +<p>Esta propiedad aplica para los <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a> {{cssxref("::first-line")}} y {{cssxref("::first-letter")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">/* offset-x | offset-y | blur-radius | color */ +text-shadow: 1px 1px 2px black; + +/* color | offset-x | offset-y | blur-radius */ +text-shadow: #CCC 1px 0 10px; + +/* offset-x | offset-y | color */ +text-shadow: 5px 5px #558ABB; + +/* color | offset-x | offset-y */ +text-shadow: white 2px 5px; + +/* offset-x | offset-y +/* Se usan los valores predeterminados para color y blur-radius */ +text-shadow: 5px 10px; + +/* Valores globales */ +text-shadow: inherit; +text-shadow: initial; +text-shadow: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><color></dt> + <dd>Opcional. Puede ser especificado antes o después de los valores de offset. Si el color no es especificado, se usa el predeterminado del agente usuario. {{note("Para asegurar consistencia entre navegadores, se recomienda especificar un color explícito.")}}</dd> + <dt><offset-x> <offset-y></dt> + <dd>Requeridos. Estos valores <code>length</code> especifican el ófset de la sombra del texto. <code><offset-x></code> especifica la distancia horizontal; un valor negativo pone la sombra a la izquierda del texto. <code><offset-y></code> especifica la distancia vertical; un valor negativo pone la sombra encima del texto. Si ambos valores son <code>0</code>, la sombra es colocada detrás del texto (y puede generar un efecto de difuminado cuando se define el valor <code><blur-radius></code>).<br> + Para más detalles de las unidades que se pueden usar, véase {{cssxref("length")}}.</dd> + <dt><blur-radius></dt> + <dd>Opcional. Éste es un valor {{cssxref("length")}}. Si no se especifica, su valor predeterminado es <code>0</code>. Mientras más alto sea el valor, mayor será la difuminación; la sombra se vuelve más amplia y clara.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<div id="Example1"> +<pre class="brush: css">.red-text-shadow { + text-shadow: red 0 -2px; +}</pre> + +<pre class="brush: html"><p class="red-text-shadow"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo + inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. +</p></pre> +</div> + +<p>{{EmbedLiveSample('Example1', '689px', '90px')}}</p> + +<div id="Example2"> +<pre class="brush:css">.white-with-blue-shadow { + text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; + color: white; + font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif; +}</pre> + +<pre class="brush: html"><p class="white-with-blue-shadow"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore + veritatis et quasi architecto beatae vitae dicta sunt explicabo. +</p></pre> +</div> + +<p>{{EmbedLiveSample('Example2', '689px', '180px')}}</p> + +<div id="Example3"> +<pre class="brush:css">.gold-on-gold { + text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px, + rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px, + rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; + color: gold; + background: gold; +}</pre> + +<pre class="brush: html"><p class="gold-on-gold"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore + veritatis et quasi architecto beatae vitae dicta sunt explicabo. +</p></pre> +</div> + +<p>{{EmbedLiveSample('Example3', '689px', '90px')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Incluye <code>text-shadow</code> en la lista de propiedades que pueden ser animadas.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td>La propiedad CSS <code>text-shadow</code> fue <a class="external" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">inadecuadamente definida en CSS2</a> y descartada en CSS2 (Nivel 1). La especificación del Módulo de Textos Nivel 3 de CSS mejoró y clarificó la sintaxis. Más adelante fue movido al nuevo borrador de trabajo del <a href="http://www.w3.org/TR/2012/WD-css-text-decor-3-20121113/">Módulo de Textos Nivel 3 de CSS</a>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>2.0</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td> + <td>10<sup>[3]</sup></td> + <td>9.5<sup>[2]</sup></td> + <td>1.1 (100)<sup>[4]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko teóricamente soporta sombras de texto infinitas (no lo intente). Gecko 2 {{geckoRelease("2.0")}} y superiores limitan el radio de difuminación a 300 por razones de rendimiento. Si el valor <color> no es especificado, Gecko usará el valor de la propiedad {{cssxref("color")}} del elemento.</p> + +<p>[2] Opera soporta un máximo de 6-9 sombras de texto por motivos de rendimiento. El radio de difuminación está limitado a 100px. Opera 9.5 a 10.1 utiliza el antiguo orden en reversa de dibujado (CSS2, la primera sombra en aplicar es la última que se define).</p> + +<p>[3] Internet Explorer 5.5 soporta la propiedad <a class="external" href="http://msdn.microsoft.com/en-us/library/ms673539(loband).aspx"><code>Shadow</code> and <code>DropShadow</code> Filter</a> de Microsoft.</p> + +<p>[4] En Safari, cualquier sombra que no especifique explícitamente un color es transparente. Safari 1.1 a 3.2 sólo soportan una sombra de texto (muestra la primera definida en la propiedad e ignora al resto). Safari 4.0 (WebKit 528) y superiores soportan múltiples sombras de texto.<br> + Konqueror soporta sombras de texto desde la versión 3.4.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{cssxref("box-shadow")}}</li> +</ul> diff --git a/files/es/web/css/text-transform/index.html b/files/es/web/css/text-transform/index.html new file mode 100644 index 0000000000..342d952edf --- /dev/null +++ b/files/es/web/css/text-transform/index.html @@ -0,0 +1,499 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +tags: + - CSS + - Layout + - Propiedad CSS + - Referencia + - Texto +translation_of: Web/CSS/text-transform +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <strong><code>text-transform</code></strong> especifica el cambio entre mayúsculas y minúsculas del texto de un elemento. Puede ser usada para que un texto aparezca completamente en mayúsculas, en minúsculas, o con la primera letra de cada palabra en mayúscula.</p> + +<p>La propiedad <code>text-transform</code> toma en cuenta las reglas específicas del idioma, como:</p> + +<ul> + <li> + <p>en lenguas turcas, como turco (<code>tr</code>), azerí (<code>az</code>), tártaro de Crimea (<code>crh</code>), tártaro de Volga (<code>tt</code>), y baskir (<code>ba</code>), hay dos tipos de i, con y sin punto, y dos pares de mayúscula/minúscula: <code>i</code>/<code>İ</code> e <code>ı</code>/<code>I</code>.</p> + </li> + <li> + <p>En alemán (<code>de</code>), la <code>ß</code> se vuelve <code>SS</code> en mayúsculas.</p> + </li> + <li> + <p>En holandés (<code>nl</code>), el dígrafo <code>ij</code> se vuelve <code>IJ</code>, aún con <code>text-transform: capitalize</code>, que solamente convierte la primera letra de una palabra en mayúsculas.</p> + </li> + <li> + <p>En griego (<code>el</code>), las vocales pierden su acento cuando la palabra completa está en mayúsculas (<code>ά</code>/<code>Α</code>), excepto por la eta disyuntiva (<code>ή</code>/<code>Ή</code>). Además, los diptongos con acento en la primera vocal cambian el acento por diéresis en la segunda vocal (<code>άι</code>/<code>ΑΪ</code>).</p> + </li> + <li> + <p>En griego (<code>el</code>), el caracter sigma en minúscula tiene dos formas: <code>σ</code> y <code>ς</code>. <code>ς</code> es usada solamente cuando la sigma termina la palabra. Cuando se aplica <code>text-transform: lowercase</code> a una sigma mayúscula (<code>Σ</code>), el navegador necesita elegir la minúscula correcta de acuerdo con el contexto.</p> + </li> +</ul> + +<p>Por otro lado, algunas reglas de mapeo específicas no son tomada en cuenta por ningun navegador, como:</p> + +<ul> + <li>en gaélico (<code>ga</code>), una letra prefijo se mantiene en minúsculas cuando la inicial base es convertida a mayúscula, así, en este ejemplo, el símbolo <code>h-</code> no debería cambiar a mayúscula: <code>text-transform: uppercase</code> cambiará <code>Meud na h-aplacaid</code> a <code>MEUD NA H-APLACAID</code>, lo cual viola las reglas ortográficas, cuando debería ser <code>MEUD NA h-APLACAID.</code></li> +</ul> + +<p>El idioma es definido por el atributo HTML <code>lang</code> o el atributo <code>xml:lang</code>.</p> + +<p>El soporte para estos casos específicos varía de un navegador a otro, véase la <a href="#Compatibilidad_de_navegadores">tabla de compatibilidad de navegadores</a>.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintáxis">Sintáxis</h2> + +<pre class="brush: css">/* Valores clave */ +text-transform: capitalize; +text-transform: uppercase; +text-transform: lowercase; +text-transform: none; +text-transform: full-width; + +/* Valores globales */ +text-transform: inherit; +text-transform: initial; +text-transform: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>capitalize</code></dt> + <dd> + <p>Es una palabra clave que fuerza a que la primera <em>letra</em> de cada palabra sea convertida a mayúscula. EL resto de caracteres no es modificado; eso significa que mantienen su tamaño original, como haya sido escrito en el texto del elemento. Una letra es cualquier caracter Unicode que sea parte de la categoría general de Letras o Números {{experimental_inline}}: esto excluye cualquier signo de puntuación o símbolos al principio de la palabra.</p> + + <div class="note">Los autores no deben esperar que <code class="css">capitalize</code> siga las convenciones de título específicas del lenguaje (como lo es en inglés el excluir artículos).</div> + </dd> + <dt><code>uppercase</code></dt> + <dd>Es una palabra clave que fuerza a todos los caracteres a ser convertidos a mayúsculas.</dd> + <dt><code>lowercase</code></dt> + <dd>Es una palabra clave que fuerza a todos los caracteres a ser convertidos a minúsculas.</dd> + <dt><code>none</code></dt> + <dd>Es una palabra clave que previene que sea cambiado el tamaño de los caracteres.</dd> + <dt><code>full-width</code> {{experimental_inline}}</dt> + <dd>Es una palabra clave que fuerza que la escritura de un caracter, principalmente ideogramas y del alfabeto latín, abarque el espacio dentro de un cuadro, permitiendo que queden alineados al alfabeto asiático del este (como el chino o japonés).</dd> + +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="none" name="none"><code>none</code></h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> +</p></code> +<p>text-transform: none + <strong><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span></strong> +</p> +</pre> + +<pre class="brush: css">span { + text-transform: none; +} +strong { float: right; }</pre> + +<p>Esto muestra ninguna transformación de texto.</p> + +<p>{{ EmbedLiveSample('none', '100%', '100px') }}</p> + +<h3 id="capitalize_(General)" name="capitalize_(General)"><code>capitalize</code> (General)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> +</p></code> +<p>text-transform: capitalize +<code> <strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: capitalize; +} +strong { float: right; }</pre> + +<p>Esto muestra un texto con la primera letra de cada palabra en mayúsculas.</p> + +<p>{{ EmbedLiveSample('capitalize_(General)', '100%', '100px') }}</p> + +<h3 id="capitalize_(Punctuation)" name="capitalize_(Punctuation)"><code>capitalize</code> (Puntuación)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code><code></strong> +</p></code> +<p>text-transform: capitalize + <code><strong></code><span><code>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: capitalize; +} +strong { float: right; }</pre> + +<p>Esto muestra cómo la puntuación inicial de una palabra es ignorada. La palabra clave busca la primera letra, que es el primer caracter Unicode que forma parte de la categoría general de Letras o Números.</p> + +<p>{{ EmbedLiveSample('capitalize_(Punctuation)', '100%', '100px') }}</p> + +<h3 id="capitalize_(Symbols)" name="capitalize_(Symbols)"><code>capitalize</code> (Símbolos)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code><code></strong> +</p></code> +<p>text-transform: capitalize + <code><strong></code><span><code>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: capitalize; +} +strong { float: right; }</pre> + +<p>Esto muestra cómo los símbolos iniciales son ignorados. La palabra clave busca la primera letra, que es primera caracter Unicode que forma parte de la categoría general de Letras o Números.</p> + +<p>{{ EmbedLiveSample('capitalize_(Symbols)', '100%', '100px') }}</p> + +<h3 id="capitalize_(Dutch_ij_digraph)" name="capitalize_(Dutch_ij_digraph)"><code>capitalize</code> (Dígrafo <em>ij</em> holandés)</h3> + +<pre class="brush: html"><p>Initial String + <strong lang="nl"><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code><code></strong> +</p></code> +<p>text-transform: capitalize + <code><strong></code><span lang="nl"><code>The Dutch word: "<span lang="nl">ijsland</span>" starts with a digraph.</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: capitalize; +} +strong { float: right; }</pre> + +<p>Esto muestra cómo el dígrafo holandés <em>ij</em> debe ser manejado como una sola letra.</p> + +<p>{{ EmbedLiveSample('capitalize_(Dutch_ij_digraph)', '100%', '100px') }}</p> + +<h3 id="uppercase_(General)" name="uppercase_(General)"><code>uppercase</code> (General)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code></strong> +</p></code> +<p>text-transform: uppercase + <code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: uppercase; +} +strong { float: right; }</pre> + +<p>Esto muestra la transformación de texto a mayúsculas.</p> + +<p>{{ EmbedLiveSample('uppercase_(General)', '100%', '100px') }}</p> + +<h3 id="uppercase_(Greek_Vowels)" name="uppercase_(Greek_Vowels)"><code>uppercase</code> (Vocales griegas)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code><code></strong> +</p></code> +<p>text-transform: uppercase + <code><strong></code><span><code>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: uppercase; +} +strong { float: right; }</pre> + +<p>Esto muestra cómo las vocales griegas, excepto la disyuntiva <em>eta</em> no deben tener acento, y el acento de la primera vocal en un par de vocales se convierte a diéresis en la segunda vocal.</p> + +<p>{{ EmbedLiveSample('uppercase_(Greek_Vowels)', '100%', '100px') }}</p> + +<h3 id="lowercase_(General)" name="lowercase_(General)"><code>lowercase</code> (General)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code><code></strong> +</p></code> +<p>text-transform: lowercase + <code><strong></code><span><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: lowercase; +} +strong { float: right; }</pre> + +<p>Esto muestra la transformación de texto a minúsculas.</p> + +<p>{{ EmbedLiveSample('lowercase_(General)', '100%', '100px') }}</p> + +<h3 id="lowercase_(Greek_Σ)" name="lowercase_(Greek_Σ)"><code>lowercase</code> (Σ griega)</h3> + +<pre class="brush: html"><p>Initial String + <strong><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code><code></strong> +</p></code> +<p>text-transform: lowercase + <code><strong></code><span><code>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</code></span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: lowercase; +} +strong { float: right; }</pre> + +<p>Esto muestra cómo el caracter griego sigma (<code>Σ</code>) es trsnformado a sigma minúscula regular (<code>σ</code>) o a la variante de final de palabra (<code>ς</code>), conforme al contexto.</p> + +<p>{{ EmbedLiveSample('lowercase_(Greek_Σ)', '100%', '100px') }}</p> + +<h3 id="full-width_(General)" name="full-width_(General)"><code>full-width</code> (General)</h3> + +<pre class="brush: html"><p>Initial String + <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~<code></strong> +</p></code> +<p>text-transform: full-width + <code><strong></code><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span><code></strong></code> +</p></pre> + +<pre class="brush: css">span { + text-transform: full-width; +} +strong { width: 100%; float: right; }</pre> + +<p>Algunos caracteres existen en dos formas, de anchura normal y de anchura completa, con diferentes puntos de código en Unicode. La versión de anchura completa es usada para facilitar la mezcla con caracteres ideográficos asiáticos.</p> + +<p>{{ EmbedLiveSample('full-width_(General)', '100%', '175px') }}</p> + +<h2 id="Sobre_Accesibilidad">Sobre Accesibilidad</h2> + +<p>Usuarios con discapacidades cognitivas como dislexia pueden encontrar dificultad al leer textos largos cuando se aplica la propiedad <code>text-transform</code> con el valor de <code>uppercase</code>.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS4 Text')}}</td> + <td>De {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}, se añade la palabra clave <code>full-size-kana</code> y permite que la palabra clave <code>full-width</code> sea usada junto con otro valor.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>De {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, se extienden las letras a cualquier caracter unicode en la categoría general de Números o Letras. Modifica el comportamiento de <code>capitalize</code> para aplicarse a la primera letra de la palabra, ignorando símbolos iniciales. Añade la palabra clave <code>full-width</code> para facilitar la mezcla entre caracteres ideográficos y caracteres alfabéticos.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>De {{SpecName('CSS1', '#text-transform', 'text-transform')}}, extiende las letras a alfabetos no latinos bicamerales</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0</td> + </tr> + <tr> + <td><code>capitalize</code> (versión de CSS3)</td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("14")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td><code>full-size-kana</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>full-width</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("19")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ß</code> → <code>SS</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>i</code> → <code>İ</code> e <code>ı</code> → <code>I</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("14")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Dígrafo holandés <code>IJ</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("14")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Letras griegas acentuadas</td> + <td>30</td> + <td>{{CompatGeckoDesktop("15")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>Σ</code> → <code>σ</code> o término de palabra <code>ς</code></td> + <td>30</td> + <td>{{CompatGeckoDesktop("14")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + <tr> + <td><code>capitalize</code> (versión de CSS3)</td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + <td>{{CompatGeckoMobile("14")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td><code>full-size-kana</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>full-width</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>ß</code> → <code>SS</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>i</code> → <code>İ</code> e <code>ı</code> → <code>I</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("14")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Dígrafo holandés <code>IJ</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("14")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Letras griegas acentuadas</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>Σ</code> → <code>σ</code> o término de palabra <code>ς</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("14")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] La palabra clave <code>capitalize</code> fue pobremente especificada en CSS 1 y CSS 2.1. Había diferencias entre navegadores en la forma en que se calculaba la primera letra (Firefox consideraba - y _ como letras, pero los otros navegadores no. Tango Webkit como Gecko consideraban incorrectamente símbolos basados en letra, por ejemplo <code>ⓐ,</code> como letras reales. Internet Explorer 9 fue el que se apegó más a la definición de CSS 2, pero con algunos casos extraños). Definiendo detalladamente el comportamiento correcto, el Nivel 3 de Textos CSS clarifica estas confusiones. La línea <code>capitalize</code> en la tabla de compatibilidad de navegadores contiene la versión de los distintos motores en la que comenzaron a soportar este comportamiento mejor definido.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{cssxref("font-variant")}}</li> +</ul> diff --git a/files/es/web/css/texto_css/index.html b/files/es/web/css/texto_css/index.html new file mode 100644 index 0000000000..f0c3c934b6 --- /dev/null +++ b/files/es/web/css/texto_css/index.html @@ -0,0 +1,123 @@ +--- +title: Texto CSS +slug: Web/CSS/Texto_CSS +tags: + - CSS + - Texto CSS + - Vista general +translation_of: Web/CSS/CSS_Text +--- +<div>{{CSSRef}}</div> + +<p><strong>Texto CSS </strong> 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.</p> + +<h2 id="Referencia">Referencia</h2> + +<h3 id="Propiedades">Propiedades</h3> + +<div class="index"> +<ul> + <li>{{cssxref("hyphens")}}</li> + <li>{{cssxref("letter-spacing")}}</li> + <li>{{cssxref("line-break")}}</li> + <li>{{cssxref("overflow-wrap")}}</li> + <li>{{cssxref("tab-size")}}</li> + <li>{{cssxref("text-align")}}</li> + <li>{{cssxref("text-align-last")}}</li> + <li>{{cssxref("text-indent")}}</li> + <li>{{cssxref("text-size-adjust")}}</li> + <li>{{cssxref("text-transform")}}</li> + <li>{{cssxref("white-space")}}</li> + <li>{{cssxref("word-break")}}</li> + <li>{{cssxref("word-spacing")}}</li> + <li>{{cssxref("word-wrap")}}</li> +</ul> +</div> + +<h2 id="Guías">Guías</h2> + +<p><em>None.</em></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Logical Properties')}}</td> + <td>{{Spec2('CSS Logical Properties')}}</td> + <td>Actualiza varias propiedades para que sean independientes de la direccionalidad del texto.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición Inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>3</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/css/time/index.html b/files/es/web/css/time/index.html new file mode 100644 index 0000000000..9bdf3f145d --- /dev/null +++ b/files/es/web/css/time/index.html @@ -0,0 +1,84 @@ +--- +title: <time> +slug: Web/CSS/time +tags: + - CSS + - Presentación + - Referencia + - Tipo de Dato CSS + - Web +translation_of: Web/CSS/time +--- +<div>{{CSSRef}}</div> + +<p>El <a href="/es/docs/Web/CSS/CSS_Types">tipo de dato</a> <strong><code><time></code></strong> de <a href="/es/docs/Web/CSS">CSS</a> representa un valor de tiempo expresado en segundos o milisegundos. Se usa en {{cssxref("animation")}}, {{cssxref("transition")}} y propiedades relacionadas.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>El tipo de datos <code><time></code> consta de un {{cssxref("<number>")}} seguido de una de las unidades enumeradas a continuación. Opcionalmente, puede estar precedido por un solo signo <code>+</code> o <code>-</code> . Al igual que con todas las dimensiones, no hay espacio entre la unidad literal y el número.</p> + +<div class="note"> +<p><strong>Nota:</strong> Aunque el número <code>0</code> es siempre el mismo independientemente de la unidad, la unidad no se puede omitir. En otras palabras, <code>0</code> no es válido y no representa <code>0s</code> o <code>0ms</code>.</p> +</div> + +<h3 id="Unidades">Unidades</h3> + +<dl> + <dt><strong><code id="s">s</code></strong></dt> + <dd>Representa un tiempo en segundos. Ejemplos: <code>0s</code>, <code>1.5s</code>, <code>-60s</code>.</dd> + <dt><strong><code id="ms">ms</code></strong></dt> + <dd>Representa un tiempo en milisegundos. Ejemplos: <code>0ms</code>, <code>150.25ms</code>, <code>-60000ms</code>.</dd> +</dl> + +<div class="note"> +<p><strong>Nota:</strong> Nota: La conversión entre <code>s</code> y <code>ms</code> sigue la lógica <code>1s</code> = <code>1000ms</code>.</p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Tiempos_válidos">Tiempos válidos</h3> + +<pre>12s Entero positivo +-456ms Entero negativo +4.3ms No entero +14mS La unidad no distingue entre mayúsculas y minúsculas, aunque no se recomiendan letras mayúsculas. ++0s Cero con un signo + y una unidad +-0ms Cero con un signo - y una unidad +</pre> + +<h3 id="Tiempos_inválidos">Tiempos inválidos</h3> + +<pre class="example-bad">0 Aunque el cero sin unidades está permitido para <length>, no es válido para <time>. +12.0 Este es un <number>, no un <time>, porque le falta una unidad. +7 ms No se permite espacio entre el número y la unidad. +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Values','#time','<time>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Definición normativa de <code>s</code> y <code>ms</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1','aural.html#times','<time>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición informal de <code>s</code> y <code>ms</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.types.time")}}</p> diff --git a/files/es/web/css/top/index.html b/files/es/web/css/top/index.html new file mode 100644 index 0000000000..7e5e36ef80 --- /dev/null +++ b/files/es/web/css/top/index.html @@ -0,0 +1,138 @@ +--- +title: Top +slug: Web/CSS/top +tags: + - CSS + - CSS Reference + - Referencia_CSS + - Todas_las_Categorías + - para_revisar + - páginas_a_traducir +translation_of: Web/CSS/top +--- +<p>{{ CSSRef() }}</p> + +<h3 id="Sumario" name="Sumario">Sumario</h3> + +<p>La propiedad <code>top</code> especifica parte de la posición de un elemento posicionado. No tiene efecto en elementos no posicionados.</p> + +<p>Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("position") }}<code>: absolute</code> o {{ Cssxref("position") }}<code>: fixed</code>), determina la distancia entre el borde superior del elemento y el borde superior del bloque que lo contiene.</p> + +<p>Para los elementos con una posición relativa (aquellos que tienen la propiedad {{ Cssxref("position") }}<code>: relative</code>), determina el desplazamiento hacia abajo que tendrá el elemento con respecto a su posición normal.</p> + +<p>Cuando se define tanto la propiedad <code>top </code>como {{cssxref("bottom")}} para un elemento, y {{cssxref("height")}} no se ha definido, tiene un valor <code>auto </code>o 100%, tanto la distancia <code>top </code>como {{cssxref("bottom")}} se respetan. Si {{cssxref("height")}} está definida, la aplicación de la propiedad <code>top </code>tiene precedencia y {{cssxref("bottom")}} será ignorada.</p> + +<ul> + <li>{{ Xref_cssinitial() }}: {{ Cssxref("auto") }}</li> + <li>Aplicable a: <a href="/es/CSS/position" title="es/CSS/position">Posicionar Elementos</a></li> + <li>{{ Xref_cssinherited() }}: no</li> + <li>Porcentajes: se refieren a la altura del bloque contenedor.</li> + <li>Medio: {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }}: valor absoluto, porcentaje ó auto.</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval notranslate"> top: <longitud> | <porcentaje> | auto | inherit +</pre> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="notranslate"> /* se puede también usar unidades px para posicionar body para luego operar con el div */ + body{ + width: 100%; + height: 100%; + } + /* ahora podemos operar con unidades de porcentajes (con al 100% respecto de body) */ + div{ + position:absolute; + left:15%; + top:30%; + bottom:30%; + width:70%; + height:40%; + text-align:left; + border: 3px rgb(0,0,0) solid; + } +</pre> + +<pre class="notranslate"> <?xml version="1.0" encoding="utf-8"?> + <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> + <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> + <head> + <meta http-equiv="Content-Type" content="application/xhtml+xml" /> + <title>Mozzila.org height top left width porcentaje CSS</title> + <style type="text/css"> + /* se puede también usar unidades px para posicionar body para luego operar con el div */ + body{ + width: 100%; + height: 100%; + } + /* ahora podemos operar con unidades de porcentajes (con respecto al 100% del body) */ + div{ + position:absolute; + left:15%; + top:30%; + bottom:30%; + width:70%; + height:40%; + text-align:left; + border: 3px rgb(0,0,0) solid; + } + </style> + </head> + <body> + <center> + <div> + ...Contenido... + </div> + </center> + + </body> + </html> +</pre> + +<h3 id="Notas" name="Notas"></h3> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/Style/CSS/current-work#positioning">CSS 3</a></li> +</ul> + +<h3 id="Compatibilidad_entre_navegadores" name="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegador</th> + <th>Versión mínima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>?</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>?</td> + </tr> + <tr> + <td>Opera</td> + <td>?</td> + </tr> + <tr> + <td>Safari</td> + <td>?</td> + </tr> + </tbody> +</table> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("position") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}, {{ Cssxref("left") }}</p> diff --git a/files/es/web/css/transform-function/index.html b/files/es/web/css/transform-function/index.html new file mode 100644 index 0000000000..2e6a49bd81 --- /dev/null +++ b/files/es/web/css/transform-function/index.html @@ -0,0 +1,191 @@ +--- +title: transform-function +slug: Web/CSS/transform-function +tags: + - Transformaciones CSS +translation_of: Web/CSS/transform-function +--- +<p>{{CSSRef}}</p> + +<p>El tipo de dato CSS <code><transform-function></code> denota una función por aplicar a la representación de un elemento para modificarlo. Generalmente, dicha transformación puede ser expresada por matrices, y la imagen resultante puede ser determinada usando multiplicación de matrices en cada punto.</p> + +<h2 id="Coordenadas_para_graficos_2D">Coordenadas para graficos 2D</h2> + +<p><span style="line-height: 1.5;">Existen varios modelos de coordenadas utilizados para describir la transformación. Las más habituales son el sistema de coordenadas cartesiano y las coordenadas homogéneas.</span></p> + +<h3 id="Coordenadas_Cartesianas"><span class="external"><span style="font-size: 1.714285714285714rem;">Coordenadas </span>Cartesianas</span></h3> + +<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a>En las <a class="external" href="https://es.wikipedia.org/wiki/Coordenadas_cartesianas">Cordenadas cartesianas</a>, cada punto del <a class="external" href="https://es.wikipedia.org/wiki/Geometr%C3%ADa_euclidiana">espacio Euclidiano</a> es descrito usando dos valores, la abscisa y la ordenada. El origen, el <code>(0, 0)</code> es la esquina superior izquierda del elemento. <span style="line-height: 1.5;">A diferencia de la convención geométrica habitual, y como la mayoría de los casos en los gráficos por computadora, el eje y (ordenada) va hacia abajo. Cada punto se describe matemáticamente utilizando la notación vectorial <code>(x, y)</code>.</span></p> + +<p><span style="line-height: 1.5;">Cada función lineal es descrita usando una matriz 2x2 de la siguiente manera:</span></p> + +<div style="text-align: center;"> +<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p> +</div> + +<p>Aplicar la transformación consiste en hacer, por cada punto, la multiplicación de matrices entre ambos:</p> + +<div style="text-align: center;"><a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png"><img src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="height: 32px; width: 189px;"></a>.</div> + +<p>Es posible aplicar varias transformaciones en una fila:</p> + +<div style="text-align: center;"><a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png"><img src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="height: 32px; width: 313px;"></a>.</div> + +<p>Con esta notación, es posible describir, y por lo tanto componer, las transformaciones más comunes: rotación, escala o transvección. De hecho, todas las transformaciones que son funciones lineales pueden ser descritas. Una transformación mayor no es lineal y por lo tanto debe ser tratada de forma especial cuando se usa esta notación: traslación. El vector de traslación (tx, ty) debe ser expresado de forma separada, como dos parámetros adicionales.</p> + +<p>Las <a class="external" href="https://es.wikipedia.org/wiki/Coordenadas_homog%C3%A9neas">coordenadas homogéneas</a> de <a class="external" href="https://es.wikipedia.org/wiki/August_M%C3%B6bius">Möbius</a> en <a class="external" href="https://es.wikipedia.org/wiki/Geometr%C3%ADa_proyectiva">geometría proyectiva</a> llevan a transformaciones matriciales de 3x3 que, aunque son más complejas e inusuales para quienes no son especialistas, no sufren de la limitación de traslación, puesto que puede ser expresada como funciones lineales en esta álgebra, quitando la necesidad de casos especiales.</p> + +<h2 id="Funciones_que_definen_transformaciones">Funciones que definen transformaciones</h2> + +<p>Existen varias funciones disponibles para describir transformaciones en CSS. Cada una aplica una operación geométrica, en 2D o 3D:</p> + +<dl> + <dt>{{cssxref("transform-function/matrix","matrix()")}}</dt> + <dd>La función <code>matrix()</code> especifica una matriz de transformación 2D homogénea , comprendida por los seis valores especificados. Los valores constantes de dichas matrices son implícitos, y no son enviados como parámetros; los otros parámetros son descritos en orden de columna principal.</dd> + <dd><code>matrix(a, b, c, d, tx, ty)</code> es la forma reducida de <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</dd> + <dt>{{cssxref("transform-function/matrix3d","matrix3d()")}}</dt> + <dd>La función <code>matrix3d()</code> describe una transformación 3D como una matriz 4x4 homogénea. Los 16 parámetros son descritos en orden de columna principal.</dd> + <dt>{{cssxref("transform-function/perspective","perspective()")}}</dt> + <dd>La función <code>perspective()</code> define la distancia entre el plano z=0 y el usuario, para dar cierta perspectiva al elemento posicionado en tercera dimensión. Cada elemento 3D con z>0 se vuelve más grande; cada elemento 3D con z<0 se vuelve más pequeño. La magnitud del efecto se determina por el valor de esta propiedad.</dd> + <dt>{{cssxref("transform-function/rotate","rotate()")}}</dt> + <dd>La función <code>rotate()</code> define una transformación que mueve al elemento al rededor de un punto fijo (especificado por la propiedad {{Cssxref("transform-origin")}}) sin deformarlo. La cantidad de movimiento es definida por el ángulo especificado; si es positivo, el movimiento será en sentido de las manecillas del reloj, y si es negativo, será en sentido opuesto. Una rotación de 180° es llamada <em>reflexión de punto</em>.</dd> + <dt>{{cssxref("transform-function/rotate3d","rotate3d()")}}</dt> + <dd>La función <code>rotate3d()</code> describe una transformación que mueve al elemento al rededor de un eje fijo sin deformarlo. La cantidad de movimiento es definido por el ángulo especificado; si es positivo, el movimiento será en sentido de las manecillas del reloj, y si es negativo, será en sentido opuesto. Al contrario de las rotaciones en el plano, la composición de las rotaciones 3D es generalmente no conmutativa; esto significa que el orden en el que se aplican las rotaciones es crucial.</dd> + <dt>{{cssxref("transform-function/rotateX","rotateX()")}}</dt> + <dd>La función <code>rotateX()</code> describe una transformación que mueve el elemento al rededor de su eje de las abscisas sin deformarlo. La cantidad de movimiento es definida por el ángulo especificado; si es positivo, el movimiento será en sentido de las manecillas del reloj, y si es negativo, será en sentido opuesto. El eje de rotación pasa por el origen, definido por la propiedad cssxref("transform-origin") }}.</dd> + <dd><code>rotateX(a)</code> es la forma reducida de <code>rotate3D(1, 0, 0, a)</code>.</dd> + <dt>{{cssxref("transform-function/rotateY","rotateY()")}}</dt> + <dd>La función <code>rotateY()</code> describe una transformación que mueve el elemento al rededor de su eje de las ordenadas sin deformarlo. La cantidad de movimiento es definida por el ángulo especificado; si es positivo, el movimiento será en sentido de las manecillas del reloj, y si es negativo, será en sentido opuesto. El eje de rotación pasa por el origen, definido por la propiedad {{ cssxref("transform-origin") }}.</dd> + <dd><code>rotateY(a)</code> es la forma reducida de <code>rotate3D(0, 1, 0, a)</code>.</dd> + <dt>{{cssxref("transform-function/rotateZ","rotateZ()")}}</dt> + <dd>La función <code>rotateZ()</code> describe una transformación que mueve el elemento al rededor de su eje Z sin deformarlo. La cantidad de movimiento es definida por el ángulo especificado; si es positivo, el movimiento será en sentido de las manecillas del reloj, y si es negativo, será en sentido opuesto. El eje de rotación pasa por el origen, definido por la propiedad {{ cssxref("transform-origin") }}.</dd> + <dd><code>rotateZ(a)</code> es la forma corta de <code>rotate3D(0, 0, 1, a)</code>.</dd> + <dt>{{cssxref("transform-function/scale","scale()")}}</dt> + <dd>La función <code>scale()</code> modifica el tamaño del elemento. Puede aumentar o disminuir su tamaño, y ya que la cantidad de escalada es definida por un vector, puede hacerlo más hacia una dirección que a otra. Esta transformación se caracteriza por un vector cuyas coordenadas definen qué tanto se escalará hacia cada dirección. Si ambas coordenadas del vector son iguales, el ajuste es uniforme, o isotrópico, y la figura del elemento es conservada. En ese caso, la función de escalada define una homotecia.</dd> + <dt>{{cssxref("transform-function/scale3d","scale3d()")}}</dt> + <dd>La función <code>scale3d()</code> modifica el tamaño de un elemento. Siendo que la cantidad de escalada es definida por un vector, puede cambiar el tamaño a diferentes dimensiones en diferentes escalas. Esta transformación se caracteriza por un vector cuyas coordenadas definen qué tanto se escalará hacia cada dirección. Si las tres coordenadas del vector son iguales, el ajuste es uniforme, o isotrópico, y la figura del elemento es conservada. En ese caso, la función de escalada define una homotecia.</dd> + <dt>{{cssxref("transform-function/scaleX","scaleX()")}}</dt> + <dd>La función <code>scaleX()</code> modifica la abscisa de cada punto del elemento con base en un factor constante, excepto si dicho factor es <code>1</code>, en cuyo caso la función es la transformación de identidad. La escalada no es isotrópica y los ángulos del elemento no son conservados. <code>scaleX(-1)</code> define una <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">simetría axial</a> con un eje vertical pasando por el origen (según sea sea especificado en la propiedad {{cssxref("transform-origin")}}).</dd> + <dd><code>scaleX(sx)</code> es la forma corta de <code>scale(sx, 1)</code> o de <code>scale3d(sx, 1, 1)</code>.</dd> + <dt>{{cssxref("transform-function/scaleY","scaleY()")}}</dt> + <dd>La función <code>scaleY()</code> modifica la ordenada de cada punto del elemento con base en un factor constante, excepto si el factor es <code>1</code>, en cuyo caso la función es una transformación de identidad. La escalada no es isotrópica y los ángulos del elemento no son conservados. <code>scaleY(-1)</code> define una <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">simetría axial</a> con un eje horizontal pasando por el origen (según sea especificado en la propiedad {{cssxref("transform-origin")}}).</dd> + <dd><code>scaleY(sy)</code> es la forma corta de <code>scale(1, sy)</code> o de <code>scale3d(1, sy, 1)</code>.</dd> + <dt>{{cssxref("transform-function/scaleZ","scaleZ()")}}</dt> + <dd>La función <code>scaleZ()</code> modifica la coordenada Z de cada punto del elemento con base en un factor constante, excepto si el factor es <code>1</code>, en cuyo caso la función es una transformación de identidad. La escalada no es isotrópica y los ángulos del elemento no son conservados. <code>scaleZ(-1)</code> define una <a class="external" href="https://en.wikipedia.org/wiki/Axial_symmetry">simetría axial</a> al rededor del eje Z, pasando por el origen (según sea especificado en la propiedad {{cssxref("transform-origin")}}).</dd> + <dd><code>scaleZ(sz)</code> es la forma corta de <code>scale3d(1, 1, sz)</code>.</dd> + <dt>{{cssxref("transform-function/skew","skew()")}}</dt> + <dd>La función <code>skew()</code> es un mapeo de cizallamiento, o transvección, distorsionando cada punto del elemento con base en cierto ángulo en cada dirección. Esto se hace incrementando cada coordenada por un valor proporcionado para el ángulo especificado y en distancia hacia el origen. Mientras más lejos del origen, mientras más alejado esté del punto, mayor será el valor que se agrega.</dd> + <dt>{{cssxref("transform-function/skewX","skewX()")}}</dt> + <dd>La función <code>skewX()</code> es una transvección horizontal, que distorsiona cada punto de un elemento con base en cierto ángulo en dirección horizontal. Esto se hace incrementando la coordenada abscisa por un valor proporcionado al ángulo especificado, y en distancia hacia el origen. Mientras más lejos esté del origen, mientras más lejano esté el punto, mayor será el valor que se agrega.</dd> + <dt>{{cssxref("transform-function/skewY","skewY()")}}</dt> + <dd>La función <code>skewY()</code> es una transvección vertical, que distorsiona cada punto de un elemento con base en cierto ángulo en dirección vertical. Esto se hace incrementando la coordenada ordenada por un valor proporcionado al ángulo especificado, y en distancia hacia el origen. Mientras más lejos esté del origen, mientras más lejano esté el punto, mayor será el valor que se agrega.</dd> + <dt>{{cssxref("transform-function/translate","translate()")}}</dt> + <dd>La función <code>translate()</code> mueve la posición del elemento sobre el plano. Esta transformación se caracteriza por un vector cuyas coordenadas definen qué tanto se moverá en cada dirección.</dd> + <dt>{{cssxref("transform-function/translate3d","translate3d()")}}</dt> + <dd>La función <code>translate3d()</code> mueve la posición del elemento dentro de un espacio tridimensional. Esta transformación se caracteriza por un vector tridimensional, cuyas coordenadas definen qué tanto se moverá en cada dirección.</dd> + <dt>{{cssxref("transform-function/translateX","translateX()")}}</dt> + <dd>La función <code>translateX()</code> mueve el elemento horizontalmente sobre el plano. Esta transformación se caracteriza por un valor {{cssxref("<length>")}} que define qué tanto se moverá horizontalmente.</dd> + <dd><code>translateX(tx)</code> es la forma reducida de <code>translate(tx, 0)</code>.</dd> + <dt>{{cssxref("transform-function/translateY","translateY()")}}</dt> + <dd>La función <code>translateY()</code> mueve el elemento verticalmente sobre el plano. Esta transformación se caracteriza por un valor {{cssxref("<length>")}} que define qué tanto se moverá verticalmente.</dd> + <dd><code>translateY(ty)</code> es la forma reducida de <code>translate(0, ty)</code>.</dd> + <dt>{{cssxref("transform-function/translateZ","translateZ()")}}</dt> + <dd>La función <code>translateZ()</code> mueve el elemento a través del eje Z en el espacio tridimensional. Esta transformación se caracteriza por un valor {{cssxref("<length>")}} que define qué tanto se moverá.</dd> + <dd><code>translateZ(tz)</code> es la forma reducida de <code>translate3d(0, 0, tz)</code>.</dd> +</dl> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td> + <td>9.0<sup>[2]</sup></td> + <td>10.5</td> + <td>3.1</td> + </tr> + <tr> + <td>Soporte de 3D</td> + <td>12.0</td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>10.0</td> + <td>15.0</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatAndroid(2.1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>11.5</td> + <td>3.2</td> + </tr> + <tr> + <td>Soporte de 3D</td> + <td>{{CompatAndroid(3.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>22</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 14.0 quitó el soporte experimental para <code>skew()</code>, pero se reintrodujo en Gecko 15.0 por razones de compatibilidad. Siendo no estándar, y probablemente removido en el futuro, no se recomienda usarlo.</p> + +<p>Antes de Firefox 16, los valores de traslación de <code>matrix()</code> y <code>matrix3d()</code> podían ser valores {{cssxref("length")}}, además del valor estándar {{cssxref("number")}}.</p> + +<p>[2] Internet Explorer 5.5 y superiores soportan la propiedad exclusiva <a href="https://msdn.microsoft.com/es-es/library/ms533014(VS.85,loband).aspx">Matrix Filter</a>, la cual puede ser usada para lograr un efecto similar.</p> + +<p>Internet Explorer 9.0 e inferiores no tienen soporte para transformaciones 3D. Combinar transformaciones 3D y 2D, como <code>-ms-transform: rotate(10deg) translateZ(0);</code>, hará que la propiedad completa sea descartada.</p> diff --git a/files/es/web/css/transform-function/rotate()/index.html b/files/es/web/css/transform-function/rotate()/index.html new file mode 100644 index 0000000000..65c97a27fc --- /dev/null +++ b/files/es/web/css/transform-function/rotate()/index.html @@ -0,0 +1,79 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate() +tags: + - CSS + - NeedsCompatTable + - Referencia + - Transformaciones CSS +translation_of: Web/CSS/transform-function/rotate() +--- +<div>{{CSSRef}}</div> + +<p>La función <a href="/es/docs/">CSS</a> <code><strong>rotate()</strong></code> define una transformación que gira un elemento alrededor de un punto fijo en un plano 2D sin deformarlo.</p> + +<p>El punto fijo alrededor del cual gira el elemento, mencionado anteriormente, también se conoce como el <strong>origen de transformación</strong>. Se establece de manera predeterminada en el centro del elemento, pero se puede personalizar utilizando la propiedad {{ cssxref("transform-origin") }}.</p> + +<p>La cantidad de rotación generada por la propiedad <code>rotate()</code> se define mediante un {{cssxref("<angle>")}}. Si es positivo, el movimiento serán en el sentido de las agujas del reloj; si es negativo, en sentido contrario a las agujas. Una rotación de 180° se llama centro de simetría.</p> + +<p><img src="https://mdn.mozillademos.org/files/12113/rotate.png" style="height: 175px; width: 258px;"></p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox notranslate">rotate(<em>a</em>) +</pre> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt><em>a</em></dt> + <dd>es un {{ cssxref("<angle>") }} que representa en ángulo de rotación. Un ángulo positivo representa un rotación en el sentido del reloj y un ángulo negativo representa una rotación en sentido contrario a las agujas del reloj.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Coordenadas cartesianas en ℝ<sup>2</sup></th> + <th scope="col">Coordenadas homgéneas en ℝℙ<sup>2</sup></th> + <th scope="col">Coordinadas cartesianas en ℝ<sup>3</sup></th> + <th scope="col">Coordenadas homgéneas en ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td> + <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>foo</p> +<p class="transformed">bar</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">p { + width: 50px; + height: 50px; + background-color: teal; +} + +.transformed{ + /* idéntico a rotateZ(45deg); */ + transform: rotate(45deg); + background-color: blue; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Examples","100%","200")}}</p> diff --git a/files/es/web/css/transform-function/rotate3d()/index.html b/files/es/web/css/transform-function/rotate3d()/index.html new file mode 100644 index 0000000000..86c5f44399 --- /dev/null +++ b/files/es/web/css/transform-function/rotate3d()/index.html @@ -0,0 +1,121 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d() +tags: + - CSS + - Funciones CSS + - Referencia +translation_of: Web/CSS/transform-function/rotate3d() +--- +<div>{{CSSRef}}</div> + +<p>La función <code>rotate3d()</code> de CSS define una transformación que mueve el elemento alrededor de un eje fijo sin deformarlo. La cantidad de movimiento está definida por el ángulo especificado; si es positivo, el movimiento será en el sentido de las agujas del reloj, si es negativo, será contrario a las agujas del reloj.</p> + +<p>En el espacio tridimencional, las rotaciones tienen tres grados de libertad, que describen un ángulo de rotación. El ángulo de rotación está definido por un vector [x, y, z] y pasa por el origen (como lo define la propiedad {{ cssxref("transform-origin") }} de CSS. Si el vector no está <em>normalizado</em>, lo que significa que la suma del cuadrado de sus tres coordenadas no es igual a 1, el mismo será normalizado internamente. Un vector no-normalizable, como es el caso del vector nulo, [0, 0, 0], causará que la rotación no sea aplicada, sin que esto invalide la propiedad CSS en su totalidad.</p> + +<div class="note">Contrario a las rotaciones en el plano, la composición de las rotaciones 3D normalmente no es conmutativa; lo que significa que el orden en el que dichas rotaciones son aplicadas es crucial.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La cantidad de rotación creada por <code>rotate3d()</code> está especificada por tres {{cssxref("<number>")}}s y un {{cssxref("<angle>")}}. El <code><number></code>s representa las coordenadas x, y y z del vector, denotando los ejes de la rotación. El <code><angle></code> representa el angulo de rotación; si es positivo el movimiento será en el sentido de las agujas del reloj; si es negativo será en el sentido opuesto.</p> + +<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) +</pre> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt><em>x</em></dt> + <dd>Es un {{cssxref("<number>")}} que describe la coordenada-x del vector y denota el eje de rotación.</dd> + <dt><em>y</em></dt> + <dd>Es un {{cssxref("<number>")}} que describe la coordenada-y del vector y denota el eje de rotación.</dd> + <dt><em>z</em></dt> + <dd>Es un {{cssxref("<number>")}} que describe la coordenada-z del vector y denota el eje de rotación.</dd> + <dt><em>a</em></dt> + <dd>Es un {{ cssxref("<angle>") }} que representa el ángulo de rotación. Un valor positivo indica una rotación en el sentido de las agujas del reloj, un valor negativo indica una rotación en sentido contrario a las agujas del reloj.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Coordenadas cartesianas en ℝ<sup>2</sup></th> + <th scope="col">Coordenadas homogéneas en ℝℙ<sup>2</sup></th> + <th scope="col">Coordenadas cartesianas en ℝ<sup>3</sup></th> + <th scope="col">Coordenadas homogéneas en ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2">Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano.</td> + <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sen(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sen(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sen(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sen(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td> + <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Rotar_sobre_el_eje-X">Rotar sobre el eje-X</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>foo</p> +<p class="transformed">bar</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">p { + width: 50px; + height: 50px; + background-color: teal; +} + +.transformed{ + transform: rotate3d(1,0,0,60deg); + background-color: blue; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Rotating_on_the_X-axis","100%","200")}}</p> + +<h3 id="Rotar_sobre_un_eje_personalizado">Rotar sobre un eje personalizado</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>foo</p> +<p class="transformed">bar</p></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">p { + width: 50px; + height: 50px; + background-color: teal; +} + +.transformed{ + transform: rotate3d(1, 2, -1, 192deg); + background-color: blue; +} +</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample("Rotating_on_a_custom_axis","100%","200")}}</p> + +<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2> + +<p>Por favor vea el tipo de datos <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> para información sobre compatibilidad.</p> + +<h2 id="Ver_también">Ver también</h2> + +<p> </p> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> + +<p> </p> diff --git a/files/es/web/css/transform-function/scale()/index.html b/files/es/web/css/transform-function/scale()/index.html new file mode 100644 index 0000000000..81a0e24714 --- /dev/null +++ b/files/es/web/css/transform-function/scale()/index.html @@ -0,0 +1,122 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale() +tags: + - CSS Scale + - scale() + - scaleX() + - scaleY() +translation_of: Web/CSS/transform-function/scale() +--- +<div>{{CSSRef}}</div> + +<p>La función CSS <code>scale()</code> define una transformación que modifica el tamaño de un elemento en el plano 2D. Debido a que la cantidad de escalado está definida por un vector, puede cambiar el tamaño de la dimensiones horizontal y vertical a diferentes escalas. Su resultado es un dato tipo {cssxref("<transform-function>")}} .</p> + +<p><img src="https://mdn.mozillademos.org/files/12115/scale.png" style="height: 325px; width: 392px;"></p> + +<p>Esta transformación de escalado se caracteriza por un vector bidimensional. Sus coordenadas definen cuanto escalamiento se realiza en cada dirección. Sí ambas coordenadas son iguales, la escala es uniforme (isotrópica) y la relación de aspecto del elemento se conserva (esta es una transformación homotética).</p> + +<p>Cuando un valor de coordenadas está fuera del rango [-1, 1], el elemento crece a lo largo de esa dimensión; cuando está dentro, se encoge. Si es negativo, el resultado es un reflejo de punto en esa dimensión. Un valor de 1 no tiene ningún efecto.</p> + +<div class="note">La función scale() solo se escala en 2d. Para escalar en 3D se utiliza la función scale3d() en su lugar.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La función scale () se especifica con uno o dos valores, que representan la cantidad de escala que se aplicará en cada dirección.</p> + +<pre class="syntaxbox">scale(<em>sx</em>) scale(<em>sx</em>, <em>sy</em>) +</pre> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt><em>sx</em></dt> + <dd>Es un {{cssxref("<número>")}} representando la abscisa del vector de escala.</dd> + <dt><em>sy</em></dt> + <dd>Es un {{cssxref("<número>")}} representado la ordenada de la escala del vector. Si no está presente, su valor por defecto es <em><strong>sx</strong></em>, llevando a una escala uniforme preservando la curva del elemento.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Coordenadas Cartesianas en ℝ<sup>2</sup></th> + <th scope="col">Coordenadas Homogéneas en ℝℙ<sup>2</sup></th> + <th scope="col">Coordenadas Cartesianas en ℝ<sup>3</sup></th> + <th scope="col">Coordenadas Homogéneas en ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td> + <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[sx 0 0 sy 0 0]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Escalar_las_dimensiones_X_e_Y_al_mismo_tiempo">Escalar las dimensiones X e Y al mismo tiempo</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><code><div>Normal</div> +<div class="scaled">Scaled</div></code></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css"><code>div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scale(0.7); /* Igual que: scaleX(0.7) scaleY(0.7) */ + background-color: pink; +}</code></pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}</p> + +<h3 id="Escalando_dimensiones_X_e_Y_por_separado_y_trasladando_el_origen">Escalando dimensiones <em>X</em> e <em>Y</em> por separado y trasladando el origen</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre><code><div>Normal</div> +<div class="scaled">Scaled</div></code></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre><code>div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scale(2, 0.5); /* Igual que: scaleX(2) scaleY(0.5) */ + transform-origin: left; + background-color: pink; +}</code></pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}</p> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>Please see the <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> data type for compatibility info.</p> + +<h2 id="También_puede_ver">También puede ver</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> + <li><code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code></li> +</ul> diff --git a/files/es/web/css/transform-function/translate()/index.html b/files/es/web/css/transform-function/translate()/index.html new file mode 100644 index 0000000000..26562a503c --- /dev/null +++ b/files/es/web/css/transform-function/translate()/index.html @@ -0,0 +1,146 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate() +tags: + - CSS + - CSS Function + - CSS Transforms + - Función CSS + - Referencia +translation_of: Web/CSS/transform-function/translate() +--- +<div>{{CSSRef}}</div> + +<p>La function de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>translate()</code></strong> recoloca un elemento en el eje horizontal y/o vertical. Su resultado es de tipo {{cssxref("<transform-function>")}}.</p> + +<p><img src="https://mdn.mozillademos.org/files/12121/translate.png" style="height: 195px; width: 249px;"></p> + +<p>Esta transformacion esta compuesta por un vector bidimensional cuyas coordenadas definen cuanto se movera el elemente en cada dirección.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>La function <code>translate()</code> esta especificada con uno o dos valores.</p> + +<pre class="syntaxbox notranslate">translate(tx) + +translate(tx, ty) +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>tx</code></dt> + <dd>Es un {{cssxref("<length>")}} que representa la absisa (coordenada x) del vector de translación.</dd> + <dt><code>ty</code></dt> + <dd>Es un {{cssxref("<length>")}} que representa las ordenadas (coordenada y) del vector de translación. Si no se especifica, su valor es 0. Por ejemplo, <code>translate(2)</code> es equivalente a <code>translate(2, 0)</code>.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Coordenadas cartesianas en ℝ<sup>2</sup></th> + <th scope="col">Coordenadas homogeneas en ℝℙ<sup>2</sup></th> + <th scope="col"> + <p>Coordenadas cartesianas en ℝ<sup>3</sup></p> + </th> + <th scope="col">Coordenadas homogeneas en ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p>Una translación no es una transformación lineal en ℝ<sup>2</sup> y no puede ser representada usando una matriz de coordenadas cartesianas.</p> + </td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 1 tx ty]</code></td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Translación_en_un_solo_eje">Translación en un solo eje</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div>Estático</div> +<div class="moved">Movido</div> +<div>Estático</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px); /* Equivalente a translateX(10px) */ + background-color: pink; +} +</pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}</p> + +<h3 id="Translación_combinada_en_los_ejes_X_e_Y">Translación combinada en los ejes X e Y</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><div>Estático</div> +<div class="moved">Movido</div> +<div>Estático</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px, 10px); + background-color: pink; +} +</pre> + +<h4 id="Resultado_2">Resultado</h4> + +<p>{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>Ver el tipo de datos <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> para la información de compatibilidad.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/es/web/css/transform-function/translatey()/index.html b/files/es/web/css/transform-function/translatey()/index.html new file mode 100644 index 0000000000..5d01de73be --- /dev/null +++ b/files/es/web/css/transform-function/translatey()/index.html @@ -0,0 +1,117 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY() +tags: + - Funciones CSS + - Referencia + - Transformaciones CSS +translation_of: Web/CSS/transform-function/translateY() +--- +<div>{{CSSRef}}</div> + +<p>La función <strong><code>translateY()</code></strong> de <a href="/en-US/docs/Web/CSS">CSS</a> reposiciona un elemento verticalmente dentro del plano bidimensional. Su resultado es de tipo {{cssxref("<transform-function>")}}.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12125/translateY.png" style="height: 195px; width: 243px;"></p> + +<div class="note"> +<p><strong>Nota:</strong> <code>translateY(ty)</code> es equivalente a <code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(0, ty)</code> o <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(0, ty, 0)</code>.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">/* <length-percentage> values */ +transform: translateY(200px); +transform: translateY(50%); +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>El valor es de tipo {{cssxref("<length>")}} o {{cssxref("<percentage>")}}, representando el ordinal del vector de traslación. Un valor en porcentaje es relativo a la altura de la caja de referencia definida por la propiedad {{cssxref("transform-box")}}.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Coordenadas cartesianas en ℝ<sup>2</sup></th> + <th scope="col">Coordenadas homogéneas en ℝℙ<sup>2</sup></th> + <th scope="col">Coordenadas cartesianas en ℝ<sup>3</sup></th> + <th scope="col">Coordenadas homogéneas en ℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="2"> + <p>Una traslación no es una transformación linear en ℝ<sup>2 </sup> y no puede ser representada usando una matriz de coordenada cartesiana.</p> + </td> + <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + <td colspan="1" rowspan="2"><math> <math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></math></td> + <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td> + </tr> + <tr> + <td><code>[1 0 0 1 0 t]</code></td> + </tr> + </tbody> +</table> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">translateY({{cssxref("<length-percentage>")}}) +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Static</div> +<div class="moved">Moved</div> +<div>Static</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateY(10px); + background-color: pink; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Ejemplos", 250, 250)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}</td> + <td>{{Spec2("CSS3 Transforms")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>Por favor, véase el tipo <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> para información de compatibilidad.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/es/web/css/transform-function/translatez()/index.html b/files/es/web/css/transform-function/translatez()/index.html new file mode 100644 index 0000000000..75ee9ac918 --- /dev/null +++ b/files/es/web/css/transform-function/translatez()/index.html @@ -0,0 +1,126 @@ +--- +title: translateZ() +slug: Web/CSS/transform-function/translateZ() +tags: + - 3D + - CSS +translation_of: Web/CSS/transform-function/translateZ() +--- +<div>{{CSSRef}}</div> + +<p>La función <strong><code>translateZ()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> reposiciona un elemento a lo largo del eje-z (z-axis) en el espacio 3D, es decir, más cerca o mas lejos del espectador. Su resultado es un {{cssxref("<transform-function>")}} tipo de dato.</p> + +<div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div> + + + +<p>Esta transformación es definida por una {{cssxref("<length>")}} la cual especifica que tan lejos hacia denttro o hacia afuera el elemento o los elementos se mueven.</p> + +<p>En los ejemplos interacticos anteriores, <code><a href="/en-US/docs/Web/CSS/perspective">perspective: 550px;</a></code> (para crear un espacio 3D) y <code><a href="/en-US/docs/Web/CSS/transform-style">transform-style: preserve-3d;</a></code> (los elementos hijos, los 6 lados del cubo, estan también posicionados en el espacio 3D), es decir, han sido establecidos en el cubo.</p> + +<div class="note"> +<p><strong>Nota:</strong> <code>translateZ(tz)</code> es equivalente a <code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(0, 0, tz)</code>.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">translateZ(tz) +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>tz</code></dt> + <dd>Una {{cssxref("<length>")}} que representa el componente-z del vector. Un valor positivo mueve el elemento hacia el espectador, y un elemento negativo mueve el elemento más lejos.</dd> +</dl> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Coordenadas Cartesianas en ℝ<sup>2</sup></th> + <th scope="col">Coordenadas Homógeneas en ℝℙ<sup>2</sup></th> + <th scope="col">Coordenadas Cartesianas en ℝ<sup>3</sup></th> + <th scope="col">Coordenadas Homógeneas enℝℙ<sup>3</sup></th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2" rowspan="2">Esta transformación se aplica al espacio 4D y no puede ser representada en el plano.</td> + <td colspan="1" rowspan="2">Una traducción no es una transformación lineal en ℝ<sup>3</sup> y no puede ser representada usando una matriz de coordenadas-Cartesianas.</td> + <td colspan="1" rowspan="2"> + <p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>0 </mtd><mtd>0 </mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>0 </mtr></mtable></mfenced></math><math><mfenced><mtable><mtr><mtd>1 </mtd><mtd>0 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> + + <p><math><mfenced><mtable><mtr><mtd></mtd></mtr></mtable></mfenced></math><mtd style="">0 </mtd><mtd style="">0 </mtd><mtd style="">1 </mtd><mtd style="">t</mtd></p> + + <p><math><mfenced><mtable><mtr><mtd> </mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>En este ejemplo, se crean dos cuadros. Uno se coloca normalmente en la página, sin ser traducida en absoluto. El segundo se modifica aplicando perspectiva para crear un espacio 3D, luego se mueve hacia el usuario.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div>Static</div> +<div class="moved">Moved</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + position: relative; + width: 60px; + height: 60px; + left: 100px; + background-color: skyblue; +} + +.moved { + transform: perspective(500px) translateZ(200px); + background-color: pink; +} +</pre> + +<p>Lo que realmente importa es la clase "movida"; veamos que hace. Primero, la función <code><a href="/en-US/docs/Web/CSS/transform-function/perspective">perspective()</a></code> posiciona al espectador en relación con el plano que se encuentra donde z=0 (en esencia, la superficie de la pantalla). Un valor de <code>500px</code> significa que el usario es 500 pixels "delante de" las imagenes ubicadas en z=0.</p> + +<p>Luego, la función <code>translateZ()</code> mueve el elemento 200 pixeles "hacia afuera" desde la pantalla, hacia el usuario. Esto tiene el efecto de hacer que el elemento parezca más grande cuando se ve en una pantalla 2D, o más cerca cuando se ve usando un auricular VR u otro dispositivo de pantalla 3D.</p> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Examples", 250, 250)}}</p> + +<p>Si el valor <code>perspective()</code> es menor que el valor <code>translateZ()</code>, como <code>transform: perspective(200px) translateZ(300px);</code> el elemento transformado no será visible ya que está más allá de la vista del usuario. Cuanto menor sea la diferencia entre la pespectiva y los valores de transformación, más cerca estará el usuario del elemento y más grande parecerá el elemento traducido. </p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Agrega funciones de transformación 3D al CSS Transform estándar.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegador">Compatibilidad con navegador</h2> + +<p>Por favor observe la propiedad <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> para información de compatibilidad.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{cssxref("transform")}}</li> + <li>{{cssxref("<transform-function>")}}</li> +</ul> diff --git a/files/es/web/css/transform-origin/index.html b/files/es/web/css/transform-origin/index.html new file mode 100644 index 0000000000..4ebf8d6fd9 --- /dev/null +++ b/files/es/web/css/transform-origin/index.html @@ -0,0 +1,262 @@ +--- +title: transform-origin +slug: Web/CSS/transform-origin +translation_of: Web/CSS/transform-origin +--- +<p>{{ CSSRef("CSS Transforms") }} {{ SeeCompatTable() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <code>transform-origin</code> le permite modificar el origen de las transformaciones de un elemento. Por ejemplo, el transform-origin de la función <code>rotate()</code> es el centro de rotación. (Esta propiedad es aplicada a la primera translación del elemento por el valor negativo de la propiedad. A continuación, aplicar la transformación del elemento y después trasladar el valor de la propiedad).</p> + +<p>Los valores no establecidos explícitamente se restablecen a sus valores originales.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="twopartsyntaxbox"><a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintaxis Formal</a>: {{csssyntax("transform-origin")}} +</pre> + +<pre>transform-origin: <em>x-offset</em> /* Sintaxis con valor único */ E.g. transform-origin: 2px +transform-origin: <em>offset-keyword</em> E.g. transform-origin: bottom + +transform-origin: <em>x-offset</em> <em>y-offset</em> /* Sintaxis con dos valores */ E.g. transform-origin: 3cm 2px +transform-origin: <em>y-offset</em> <em>x-offset-keyword</em> E.g. transform-origin: 2px left +transform-origin: <em>x-offset-keyword</em> <em>y-offset</em> E.g. transform-origin: left 2px +transform-origin: x-<em>offset-keyword</em> <em>y-offset-keyword</em> E.g. transform-origin: right top +transform-origin: <em>y-offset-keyword</em> <em>x-offset-keyword</em> E.g. transform-origin: top right + +transform-origin: <em>x-offset</em> <em>y-offset</em> <em>z-offset</em> /* Sintaxis con tres valores */ E.g. transform-origin: 2px 30% 10px +transform-origin: <em>y-offset</em> <em>x-offset-keyword</em> <em>z-offset</em> E.g. transform-origin: 2px left 10px +transform-origin: <em>x-offset-keyword</em> <em>y-offset</em> <em>z-offset</em> E.g. transform-origin: left 5px -3px +transform-origin: x-<em>offset-keyword</em> <em>y-offset-keyword z-offset</em> E.g. transform-origin: right bottom 2cm +transform-origin: <em>y-offset-keyword</em> <em>x-offset-keyword z-offset</em> E.g. transform-origin: bottom right 2cm +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><em>x-offset</em></dt> + <dd><span lang="es"><span class="hps">Es</span> <span class="hps">una {{cssxref("<length>")}} o</span> <span class="hps">un {{cssxref("<percentage>")}}</span> <span class="hps">que describe</span> <span class="hps">a qué distancia del</span> <span class="hps">borde izquierdo</span> <span class="hps">de la caja</span> <span class="hps">se establece</span> <span class="hps">el origen de</span> <span class="hps">la transformación.</span></span></dd> + <dt><em>offset-keyword</em></dt> + <dd>Es una de las palabras clave <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> o <code>center</code> que describen el correspondiente desplazamiento.</dd> + <dt><em>y-offset</em></dt> + <dd><span lang="es"><span class="hps">Es</span> <span class="hps">una {{cssxref("<length>")}} o</span> <span class="hps">un {{cssxref("<percentage>")}}</span> <span class="hps">que indica</span> a <span id="result_box" lang="es"><span class="gt-trans-draggable hps">qué distancia del</span> <span class="gt-trans-draggable hps">borde superior</span> <span class="gt-trans-draggable hps">de la caja</span> <span class="gt-trans-draggable hps">se establece</span> <span class="gt-trans-draggable hps">el origen de</span> <span class="gt-trans-draggable hps">la transformación.</span></span></span></dd> + <dt><em>x-offset-keyword</em></dt> + <dd>Es una de las palabras clave <code>left</code>, <code>right</code> o <code>center</code> que indica <span id="result_box" lang="es"><span class="hps">a qué distancia del</span> <span class="hps">borde izquierdo</span> <span class="hps">de la caja</span> <span class="hps">se establece</span> <span class="hps">el origen de</span> <span class="hps">la transformación.</span></span></dd> + <dt><em>y-offset-keyword</em></dt> + <dd>Es una de las palabras clave <code>top</code>, <code>bottom</code> o <code>center</code> que indica <span id="result_box" lang="es"><span class="gt-trans-draggable hps">a qué distancia del</span> <span class="gt-trans-draggable hps">borde superior</span> <span class="gt-trans-draggable hps">de la caja</span> <span class="gt-trans-draggable hps">se establece</span> <span class="gt-trans-draggable hps">el origen de</span> <span class="gt-trans-draggable hps">la transformación.</span></span></dd> + <dt><em>z-offset</em></dt> + <dd>Es una {{cssxref("<length>")}} (y nunca un {{cssxref("<percentage>")}} el cual sería una declaración no válida) que describe que tan lejos del ojo del usuario se estable el origen de la posición z=0.</dd> +</dl> + +<p>Las palabras clave son abreviaciones por convención que coinciden con los siguientes valores {{cssxref("<percentage>")}}:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Propiedad</th> + <th scope="col">Valor</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>left</code></td> + <td><code>0%</code></td> + </tr> + <tr> + <td><code>center</code></td> + <td><code>50%</code></td> + </tr> + <tr> + <td><code>right</code></td> + <td><code>100%</code></td> + </tr> + <tr> + <td><code>top</code></td> + <td><code>0%</code></td> + </tr> + <tr> + <td><code>bottom</code></td> + <td><code>100%</code></td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Ver <a class="internal" href="/En/CSS/Using_CSS_transforms" title="en/CSS/Using CSS transforms">Uso de CSS transforms</a> para más ejemplos.</p> + +<h3 id="Ejemplos_en_vivo">Ejemplos en vivo:</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td style="width: 22em;"><code>transform: none;</code></td> + <td> + <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid 1px; background-color: palegreen; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none;"> </div> + </td> + </tr> + <tr> + <td><code>transform: rotate(30deg);</code></td> + <td> + <div style=""> </div> + </td> + </tr> + <tr> + <td><code>transform: rotate(30deg);<br> + transform-origin: 0 0;</code></td> + <td> + <div style=""> </div> + </td> + </tr> + <tr> + <td><code>transform: rotate(30deg);<br> + transform-origin: 100% 100%;</code></td> + <td> + <div style=""> </div> + </td> + </tr> + <tr> + <td><code>transform: rotate(30deg);<br> + transform-origin: -10em -30em;</code></td> + <td> + <div style=""> </div> + </td> + </tr> + <tr style="height: 5em;"> + <td><code>transform: scale(1.9);</code></td> + <td> + <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid 1px; background-color: palegreen; transform: scale(1.9); -webkit-transform: scale(1.9); -moz-transform: scale(1.9); -o-transform: scale(1.9);"> </div> + </td> + </tr> + <tr style="height: 5em;"> + <td><code>transform: scale(1.9);<br> + transform-origin: 0 0;</code></td> + <td> + <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid 1px; background-color: palegreen; transform: scale(1.9); -webkit-transform: scale(1.9); -moz-transform: scale(1.9); -o-transform: scale(1.9);"> </div> + </td> + </tr> + <tr style="height: 5em;"> + <td><code>transform: scale(1.9);<br> + transform-origin: 100% -30%;</code></td> + <td> + <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid 1px; background-color: palegreen; transform: scale(1.9); -webkit-transform: scale(1.9); -moz-transform: scale(1.9); -o-transform: scale(1.9);"> </div> + </td> + </tr> + <tr> + <td><code>transform: skewX(50deg);</code></td> + <td> + <div style=""> </div> + </td> + </tr> + <tr> + <td><code>transform: skewY(50deg);<br> + transform-origin: 0 0;</code></td> + <td> + <div style=""> </div> + </td> + </tr> + </tbody> +</table> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transforms', '#transform-origin', 'transform-origin') }}</td> + <td>{{ Spec2('CSS3 Transforms') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>9.0{{ property_prefix("-ms") }}<br> + 10.0</td> + <td>10.5{{ property_prefix("-o") }}<br> + 12.10</td> + <td>3.1{{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td>Sintaxis con tres valores</td> + <td>{{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10.0</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Sintaxis con tres valores</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div class="note"><strong>Note</strong>: Internet Explorer 5.5 o versiones posteriores soportan la propiedad <a class="external" href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx">Matrix Filter</a> que puede ser usada para lograr efectos similares.</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Uso de CSS transform</a></li> +</ul> diff --git a/files/es/web/css/transform-style/index.html b/files/es/web/css/transform-style/index.html new file mode 100644 index 0000000000..5f16a1dd5f --- /dev/null +++ b/files/es/web/css/transform-style/index.html @@ -0,0 +1,74 @@ +--- +title: transform-style +slug: Web/CSS/transform-style +translation_of: Web/CSS/transform-style +--- +<p><span class="seoSummary">La propiedad <strong><code>transform-style</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> establece si el elemento hijo esta posicionado en el espacio 3D (preserve-3d) o esta integrado(flat) en el plano del elemento.</span></p> + +<div>{{EmbedInteractiveExample("pages/css/transform-style.html")}}</div> + + + +<p>Si esta integrado (flat), el elemento hijo no existirá por sí solo en el espacio 3D.</p> + +<p>Como esta propiedad no se hereda, debe establecerse para todos los nodos internos descendientes (hijos) del elemento.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ +transform-style: flat; +transform-style: preserve-3d; + +/* Global values */ +transform-style: inherit; +transform-style: initial; +transform-style: unset; +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>flat</code></dt> + <dd>Indica que el elemento hijo yace en el plano del elemento mismo.</dd> + <dt><code>preserve-3d</code></dt> + <dd>Indica que el elemento hijo debe ser posicionado en el espacio 3D.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Transforms 2', '#transform-style-property', 'transform-style')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.transform-style")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_transforms">Using CSS transforms</a></li> +</ul> + +<div>{{CSSRef}}</div> diff --git a/files/es/web/css/transform/index.html b/files/es/web/css/transform/index.html new file mode 100644 index 0000000000..5dc3a1a6b2 --- /dev/null +++ b/files/es/web/css/transform/index.html @@ -0,0 +1,240 @@ +--- +title: transform +slug: Web/CSS/transform +tags: + - CSS + - Compatibilidad con los navegadores + - Experimental + - Propiedad CSS + - Referencia + - Transformación +translation_of: Web/CSS/transform +--- +<div>{{CSSRef}}</div> + +<p>La propiedad CSS <code>transform</code> te permite modificar el espacio de coordenadas del modelo de formato visual CSS. Usándola, los elementos pueden ser trasladados, rotados, escalados o sesgados de acuerdo a los valores establecidos.</p> +<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div> +<p>Si la propiedad tiene un valor diferente a none, se creará un <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">contexto de pila</a>. En ese caso, el objeto actuará como un bloque de contención para los elementos con "position: fixed" que contenga.</p> + + + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush: css notranslate">/* Keyword values */ +transform: none; + +/* Function values */ +transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); +transform: translate(12px, 50%); +transform: translateX(2em); +transform: translateY(3in); +transform: scale(2, 0.5); +transform: scaleX(2); +transform: scaleY(0.5); +transform: rotate(0.5turn); +transform: skew(30deg, 20deg); +transform: skewX(30deg); +transform: skewY(1.07rad); +transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0); +transform: translate3d(12px, 50%, 3em); +transform: translateZ(2px); +transform: scale3d(2.5, 1.2, 0.3); +transform: scaleZ(0.3); +transform: rotate3d(1, 2.0, 3.0, 10deg); +transform: rotateX(10deg); +transform: rotateY(10deg); +transform: rotateZ(10deg); +transform: perspective(17px); + +/* Multiple function values */ +transform: translateX(10px) rotate(10deg) translateY(5px); + +/* Global values */ +transform: inherit; +transform: initial; +transform: unset;</pre> + +<dl> + <dt> + <h3 id="Valores">Valores</h3> + </dt> + <dt></dt> + <dt><code><transform-function></code></dt> + <dd>Una o más de las <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function">funciones de transformación CSS</a> que se aplicarán, ver más abajo.</dd> + <dt><code>none</code></dt> + <dd>Especifica que ninguna transformación podrá ser aplicada.</dd> + <dt> + +<p>{{cssinfo}}</p> + <h3 id="Síntasix_formal">Síntasix formal</h3> + + <pre class="syntaxbox notranslate">{{csssyntax}}</pre> + </dt> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Consulte <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">Uso de las transformaciones CSS.</a></p> + +<h2 id="Funciones_CSS_transform">Funciones CSS transform</h2> + +<p>La propiedad CSS <code>transform</code> permite manipular el sistema de coordenadas de un elemento usando las <strong>funciones de transformación</strong>. Estas funciones son descritas a continuación:</p> + +<h3 id="matrix">matrix</h3> + +<pre class="notranslate">transform: matrix(a, c, b, d, tx, ty) +</pre> + +<p>Específica una matriz de transformación 2D compuesta por seis valores a especificar. Esto es el equivalente a la aplicación de una transformación lineal de una matriz <math><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>b</mi></mtd><mtd><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>x</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mi>c</mi></mtd><mtd><mi>d</mi></mtd><mtd><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>y</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX"> \begin{pmatrix} a & b & \mathrm{tx} \\ c & d & \mathrm{ty} \\ 0 & 0 & 1 \end{pmatrix} </annotation></semantics></math>de un mapa coordenadas de un nuevo sistema de coordenadas en un sistema de coordenadas anterior por las siguientes igualdades de la matriz: <math><semantics><mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>b</mi></mtd><mtd><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>x</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mi>c</mi></mtd><mtd><mi>d</mi></mtd><mtd><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>y</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>b</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>x</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mi>c</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mstyle mathvariant="normal"><mrow><mi>t</mi><mi>y</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & b & \mathrm{tx} \\ c & d & \mathrm{ty} \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{newCoordSys}} + b y_{\mathrm{newCoordSys}} + \mathrm{tx} \\ c x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + \mathrm{ty} \\ 1 \end{pmatrix} </annotation></semantics></math></p> + +<div class="note"><strong>Nota:</strong> Viejas versiones de Gecko (Firefox) aceptan un {{cssxref("<length>")}} valor para <strong>tx</strong> y <strong>ty</strong>. Actualmente Gecko, junto con Webkit (Safari, Chrome) y Opera, soportan valor sin unidades {{cssxref("<number>")}} para <strong>tx</strong> y <strong>ty</strong>.</div> + +<h2 id="Ejemplos_realizados">Ejemplos realizados</h2> + +<pre class="notranslate"> background: gold; width: 30em; + + -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); + -o-transform: matrix(1, -0.2, 0, 1, 0, 0); + transform: matrix(1, -0.2, 0, 1, 0, 0); +</pre> + +<pre class="notranslate"> background: wheat; + max-width: intrinsic; + + -webkit-transform: matrix(1, 0, 0.6, 1, 250, 0); + -o-transform: matrix(1, 0, 0.6, 1, 250, 0); + transform: matrix(1, 0, 0.6, 1, 250, 0); +</pre> + +<h4 id="Información_adicional">Información adicional</h4> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute/transform#General_Transformation">Ejemplo de transformación general de SVG</a></li> + <li><a class="external" href="http://en.wikipedia.org/wiki/Linear_transformation#Examples_of_linear_transformation_matrices">Ejemplos de transformación lineal de matrices</a> Wikipedia</li> + <li><a class="external" href="http://www.mathamazement.com/Lessons/Pre-Calculus/08_Matrices-and-Determinants/coordinate-transformation-matrices.html">Transformación de coordenadas de matrices </a>mathamazement.com</li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx">Filtro matriz de Microsoft</a> MSDN</li> +</ul> + +<h3 id="rotate">rotate</h3> + +<pre class="eval notranslate" dir="rtl">transform: rotate(deg); /* ej. rotate(90deg) */</pre> + +<p>Define una operación de rotación 2D de un elemento, específicando la cantidad de grados (deg) que este rotará en sentido de las<em> </em>macecillas del reloj (según lo especificado por la propiedad <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin">transform-origen</a>). La operación corresponde a la matriz <strong>[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]</strong>.</p> + +<h3 id="rotateX">rotateX</h3> + +<pre class="eval notranslate">transform: rotateX(deg); /* ej. rotateX(90deg) */ </pre> + +<p>Define una operación de rotación 3D de un elemento en el eje X.</p> + +<h3 id="rotateY">rotateY</h3> + +<pre class="eval notranslate">transform: rotateY(deg); /* ej. rotateY(90deg) */ </pre> + +<p>Define una operación de rotación 3D de un elemento en el eje Y.</p> + +<h3 id="rotateZ">rotateZ</h3> + +<pre class="eval notranslate">transform: rotateZ(deg); /* ej. rotateZ(90deg) */ </pre> + +<p>Define una operación de rotación 3D de un elemento en el eje Z.</p> + +<h3 id="scale">scale</h3> + +<pre class="eval notranslate">transform: scale(sx[, sy]); /* ej. scale(2.5, 4)*/</pre> + +<p>Especifica una operación de escalado 2D descrita por <strong>[sx, sy]</strong>.</p> + +<div class="note"> +<p>Nota: Si <strong>sy </strong>no es especificado, se asumirá que tanto <strong>sx </strong>como <strong>sy </strong>tendrán el mismo valor</p> +</div> + +<h3 id="scaleX">scaleX</h3> + +<pre class="eval notranslate">transform: scaleX(sx); /* ej. scale(2.5)*/ </pre> + +<p>Especifica una operación de escalado 2D usando el vector <strong>[sx, 1]</strong>.</p> + +<h3 id="scaleY">scaleY</h3> + +<pre class="eval notranslate">transform: scaleY(sy); /* ej. scale(4)*/ </pre> + +<p>Especifica una operación de escalado 2D usando el vector <strong>[1, sy]</strong>.</p> + +<h3 id="skew">skew</h3> + +<pre class="eval notranslate">transform: skew(ax[, ay]); /* ej. skew(90deg,180deg)*/ </pre> + +<p>Sesga el elemento a lo largo del eje X y Y por los ángulos especificados. Si no se proporciona <strong>ay</strong>, no se llevará a cabo el sesgo del eje Y.</p> + +<div class="note"> +<p>La función skew() fue presentada en los primeros borradores. Esta ha sido removida pero sigue presente en algunas implementaciones. No debe usarse.</p> + +<p>Para lograr el mismo efecto, utilice la función skewX(). Si tu estas usando skew () con un parámetro o matriz (1, tan (ay), tan (ax), 1, 0, 0). Ten en cuenta que tan() no es una función CSS y así que tu mismo tienes que precalcular tus valores.</p> +</div> + +<h3 id="skewX">skewX</h3> + +<pre class="eval notranslate">transform: skewX(deg); /* ej. skew(90deg)*/ </pre> + +<p>Sesga un elemento a lo largo del eje X por el ángulo dado.</p> + +<h3 id="skewY">skewY</h3> + +<pre class="eval notranslate">transform: skewY(deg); /* ej. skew(180deg)*/ </pre> + +<p>Sesga un elemento a lo largo del eje Y por el ángulo dado.</p> + +<h3 id="translate">translate</h3> + +<pre class="eval notranslate">transform: translate(tx[, ty]); /* ej. translate(50px, 100px) */ </pre> + +<p>Especifica una tanslación 2D dada por el vector <strong>[tx, ty]</strong>. Si <strong><code>ty</code> </strong>no es específicada, se asumirá que su valor es cero.</p> + +<p><code>Cada </code><a href="/en-US/docs/translation-value" title="/en-US/docs/translation-value"><code>translation-value</code></a> puede ser un valor de <code><a href="/en-US/docs/CSS/length" title="/en-US/docs/CSS/length">longuitud</a></code> o un valor de <code><a href="/en-US/docs/CSS/percentage" title="/en-US/docs/CSS/percentage">porcentaje</a></code>.</p> + +<h3 id="translateX">translateX</h3> + +<pre class="eval notranslate">transform: translateX(tx); /* ej. translateX(50px) */ </pre> + +<p>Translada un elemento a lo largo del eje X.</p> + +<h3 id="translateY">translateY</h3> + +<pre class="eval notranslate">transform: translateY(ty); /* ej. translateY(100px) */ </pre> + +<p>Translada un elemento a lo largo del eje Y.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td> + <td>{{Spec2('CSS Transforms 2')}}</td> + <td>Adds 3D transform functions.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td> + <td>{{Spec2('CSS3 Transforms')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> +<p>{{Compat("css.properties.transform")}}</p> +<h2 id="Véase_También">Véase También</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Uso de transformaciones </a><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">CSS</a></li> + <li>Tipos de datos <a href="/en-US/docs/translation-value" title="/en-US/docs/translation-value"><translation-value></a></li> + <li> <a class="external" href="http://plugins.jquery.com/project/jquery-transform">Complemento de transformación 2D para jQuery </a>en navegador-cruzado.</li> +</ul> diff --git a/files/es/web/css/transiciones_de_css/index.html b/files/es/web/css/transiciones_de_css/index.html new file mode 100644 index 0000000000..62142638c4 --- /dev/null +++ b/files/es/web/css/transiciones_de_css/index.html @@ -0,0 +1,700 @@ +--- +title: Transiciones de CSS +slug: Web/CSS/Transiciones_de_CSS +tags: + - CSS + - Gecko + - Transiciones de CSS +translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +--- +<p>{{ SeeCompatTable() }}</p> + +<p>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.</p> + +<div class="note"><strong>Nota:</strong> 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 <code>-moz-transition</code>, <code>-webkit-transition </code>y <code>-o-transition</code>.</div> + +<h2 id="Las_propiedades_de_transición_CSS">Las propiedades de transición CSS</h2> + +<p>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.</p> + +<p>Puedes controlar los componentes individuales de la transición usando las siguientes subpropiedades:</p> + +<dl> + <dt>{{ cssxref("transition-property") }}</dt> + <dd>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.</dd> + <dt>{{ cssxref("transition-duration") }}</dt> + <dd>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.</dd> + <dt>{{ cssxref("transition-timing-function") }}</dt> + <dd>Especifica la curva cúbica bézier que se usa para definir cómo se computan los valores intermedios para las propiedades.</dd> + <dt>{{ cssxref("transition-delay") }}</dt> + <dd>Define el tiempo de espera entre el momento en que se cambia una propiedad y el inicio de la transición.</dd> +</dl> + +<h2 id="Detectar_la_finalización_de_una_transición">Detectar la finalización de una transición</h2> + +<p>Hay un único acontecimiento que se desencadena cuando se completan las transiciones. En Firefox, el evento es <code>transitionend</code>, en Opera, <code>OTransitionEnd</code> y en WebKit es <code>webkitTransitionEnd</code>. Consulta la tabla de compatibilidades al final de la página si deseas más información. El evento <code>transitionend</code> ofrece dos propiedades:</p> + +<dl> + <dt><code>propertyName</code></dt> + <dd>Una cadena que indica el nombre de la propiedad CSS cuya transición se completó.</dd> + <dt><code>elapsedTime</code></dt> + <dd>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") }}.</dd> +</dl> + +<p>Como es habitual, puedes usar el método {{ domxref("element.addEventListener()") }} para monitorizar este acontecimiento:</p> + +<pre>el.addEventListener("transitionend", updateTransition, true); +</pre> + +<div class="note"><strong>Nota</strong>: 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.</div> + +<h2 id="Propiedades_que_pueden_ser_animadas">Propiedades que pueden ser animadas</h2> + +<p>Las transiciones y las animaciones CSS pueden usarse para animar las siguientes propiedades.</p> + +<div class="note"><strong>Nota</strong>: 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.</div> + + + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Propiedad</td> + <td class="header">Tipo de valor</td> + </tr> + <tr> + <td>{{ cssxref("background-color") }}</td> + <td>{{cssxref("<color>")}}</td> + </tr> + <tr> + <td>{{ cssxref("background-image") }}</td> + <td>solo degradado; no está implementado en Firefox (see {{ bug(536540) }})</td> + </tr> + <tr> + <td>{{ cssxref("background-position") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("background-size") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("border-color") }} (including sub-properties)</td> + <td>{{cssxref("<color>")}}</td> + </tr> + <tr> + <td>{{ cssxref("border-radius") }} (including sub-properties)</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("border-width") }} (including sub-properties)</td> + <td>{{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("border-spacing") }}</td> + <td>{{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("bottom") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("-moz-box-flex") }}</td> + <td>número</td> + </tr> + <tr> + <td>{{ cssxref("box-shadow") }}</td> + <td>sombra</td> + </tr> + <tr> + <td>{{ cssxref("color") }}</td> + <td>{{cssxref("<color>")}}</td> + </tr> + <tr> + <td>{{ cssxref("-moz-column-count") }}</td> + <td>número</td> + </tr> + <tr> + <td>{{ cssxref("-moz-column-gap") }}</td> + <td>{{cssxref("<length>")}}, palabras clave</td> + </tr> + <tr> + <td>{{ cssxref("-moz-column-rule-color") }}</td> + <td>{{cssxref("<color>")}}</td> + </tr> + <tr> + <td>{{ cssxref("-moz-column-rule-width") }}</td> + <td>{{cssxref("<length>")}}, palabras clave</td> + </tr> + <tr> + <td>{{ cssxref("-moz-column-width") }}</td> + <td>{{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("clip") }}</td> + <td>rectágulo</td> + </tr> + <tr> + <td>{{ svgattr("fill") }}</td> + <td>pintar</td> + </tr> + <tr> + <td>{{ svgattr("fill-opacity") }}</td> + <td>valor de opacidad</td> + </tr> + <tr> + <td>{{ svgattr("flood-color") }}</td> + <td>{{cssxref("<color>")}} | palabras clave</td> + </tr> + <tr> + <td>{{ cssxref("font-size") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("font-size-adjust") }}</td> + <td>números, palabras clave</td> + </tr> + <tr> + <td>{{ cssxref("font-stretch") }}</td> + <td>palabras clave</td> + </tr> + <tr> + <td>{{ cssxref("font-weight") }}</td> + <td>números| palabras clave (excluyendo <code>bolder</code>, <code>lighter</code>)</td> + </tr> + <tr> + <td>{{ cssxref("height") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("-moz-image-region") }}</td> + <td><code>rect()</code></td> + </tr> + <tr> + <td>{{ cssxref("left") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("letter-spacing") }}</td> + <td>{{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ svgattr("lighting-color") }}</td> + <td>{{cssxref("<color>")}} | palabras clave</td> + </tr> + <tr> + <td>{{ cssxref("line-height") }}</td> + <td>número | {{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("margin") }} (including sub-properties)</td> + <td>{{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("marker-offset") }}</td> + <td>{{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("max-height") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("max-width") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("min-height") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("min-width") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("opacity") }}</td> + <td>número</td> + </tr> + <tr> + <td>{{ cssxref("outline-color") }}</td> + <td>{{cssxref("<color>")}}</td> + </tr> + <tr> + <td>{{ cssxref("outline-offset") }}</td> + <td>entero</td> + </tr> + <tr> + <td>{{ cssxref("-moz-outline-radius") }} (including sub-properties)</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("outline-width") }}</td> + <td>{{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("padding") }} (including sub-properties)</td> + <td>{{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("right") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ svgattr("stop-color") }}</td> + <td>{{cssxref("<color>")}} | palabras clave</td> + </tr> + <tr> + <td>{{ svgattr("stop-opacity") }}</td> + <td>valor de opacidad</td> + </tr> + <tr> + <td>{{ svgattr("stroke") }}</td> + <td>pintar</td> + </tr> + <tr> + <td>{{ svgattr("stroke-dasharray") }}</td> + <td>dasharray</td> + </tr> + <tr> + <td>{{ svgattr("stroke-dashoffset") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ svgattr("stroke-miterlimit") }}</td> + <td>miterlimit</td> + </tr> + <tr> + <td>{{ svgattr("stroke-opacity") }}</td> + <td>valor de opacidad</td> + </tr> + <tr> + <td>{{ svgattr("stroke-width") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("text-indent") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("text-shadow") }}</td> + <td>sombra</td> + </tr> + <tr> + <td>{{ cssxref("top") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("-moz-transform-origin") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}, keywords</td> + </tr> + <tr> + <td>{{ cssxref("-moz-transform") }}</td> + <td>transform-function</td> + </tr> + <tr> + <td>{{ cssxref("vertical-align") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}, palabras clave</td> + </tr> + <tr> + <td>{{ cssxref("visibility") }}</td> + <td>visibilidad</td> + </tr> + <tr> + <td>{{ cssxref("width") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("word-spacing") }}</td> + <td>{{cssxref("<percentage>")}} | {{cssxref("<length>")}}</td> + </tr> + <tr> + <td>{{ cssxref("z-index") }}</td> + <td>entero</td> + </tr> + </tbody> +</table> + +<h2 id="Cuando_las_listas_de_valores_de_propiedades_tienen_longitudes_diferentes">Cuando las listas de valores de propiedades tienen longitudes diferentes</h2> + +<p>Si cualquier lista de valores de propiedades es más corta que las otras, sus valores se repiten para hacer que coincidan. Por ejemplo:</p> + +<pre class="brush: css">div { + transition-property: opacity, left, top, height; + transition-duration: 3s, 5s; +} +</pre> + +<p>Se considera como si fuera:</p> + +<pre class="brush: css">div { + transition-property: opacity, left, top, height; + transition-duration: 3s, 5s, 3s, 5s; +}</pre> + +<p>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:</p> + +<pre class="brush: css">div { + transition-property: opacity, left; + transition-duration: 3s, 5s, 2s, 1s; +}</pre> + +<p>Se interpreta como:</p> + +<pre class="brush: css">div { + transition-property: opacity, left; + transition-duration: 3s, 5s; +}</pre> + +<h2 id="Funciones_de_intervalos_de_transición">Funciones de intervalos de transición</h2> + +<p>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:</p> + +<p><img alt="" src="/@api/deki/files/5226/=transition-timing-function.png"></p> + +<p>En lugar de especificar directamente una bézier, existen valores de intervalos predeterminados:</p> + +<ul> + <li><strong>ease</strong>, equivalente a <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code></li> + <li><strong>linear</strong>, equivalente a <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code></li> + <li><strong>ease-in</strong>, equivalente a <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code></li> + <li><strong>ease-out</strong>, equivalente a <code>cubic-bezier(0, 0, 0.58, 1.0)</code></li> + <li><strong>ease-in-out</strong>, equivalente a <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code></li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Una_muestra_del_efecto_de_transición">Una muestra del efecto de transición</h3> + +<p>Este sencillo ejemplo proporciona demostraciones de distintos efectos de transición sin excesivos adornos.</p> + +<p>En primer lugar, el HTML para crear los elementos sobre los que probaremos nuestras transiciones:</p> + +<pre class="deki-transform"><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> +</pre> + +<p>Cada elemento tiene su propia id.; la CSS se encarga del resto. Veamos un par de ejemplos.</p> + +<h4 id="Usar_un_retraso">Usar un retraso</h4> + +<p>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:</p> + +<pre class="deki-transform">#delay1 { + position: relative; + transition-property: font-size; + transition-duration: 4s; + transition-delay: 2s; + font-size: 14px; +} + +#delay1:hover { + transition-property: font-size; + transition-duration: 4s; + transition-delay: 2s; + font-size: 36px; +} +</pre> + +<h4 id="Usar_una_función_de_intervalos_de_transición_lineales">Usar una función de intervalos de transición lineales</h4> + +<p>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 <code>linear</code>, tal y como se muestra a continuación.</p> + +<pre>transition-timing-function: linear; +</pre> + +<p>Existen distintas funciones de intervalos estándares disponibles; consulta {{ cssxref("transition-timing-function") }} para tener más detalles.</p> + +<h4 id="Especificar_una_función_de_intervalos_cúbicos_bézier">Especificar una función de intervalos cúbicos bézier</h4> + +<p>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:</p> + +<pre> transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8); +</pre> + +<p>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).</p> + +<h3 id="Menús_de_resaltado">Menús de resaltado</h3> + +<p>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.</p> + +<p>Antes de que miremos los fragmentos de código, tal vez desees <a class="external" href="http://developer.mozilla.org/samples/cssref/transitions/sample2/" title="http://developer.mozilla.org/samples/cssref/transitions/sample2/">echar un vistazo a la demo en vivo</a> (suponiendo que tu navegador admita transiciones). También puedes echar un <a class="external" href="http://developer.mozilla.org/samples/cssref/transitions/sample2/transitions.css" title="http://developer.mozilla.org/samples/cssref/transitions/sample2/transitions.css">vistazo directamente a la CSS</a> que usa.</p> + +<p>Primero configuramos el menú usando HTML:</p> + +<pre class="deki-transform"><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> +</pre> + +<p>Después construimos la CSS para implementar el aspecto de nuestro menú. Las porciones relevantes se muestran a continuación:</p> + +<pre>.menuButton { + position: relative; + transition-property: background-color, color; + transition-duration: 1s; + transition-timing-function: ease-out; + -webkit-transition-property: background-color, color; + -webkit-transition-duration: 1s; + -o-transition-property: background-color, color; + -o-transition-duration: 1s; + text-align: left; + background-color: grey; + left: 5px; + top: 5px; + height: 26px; + color: white; + border-color: black; + font-family: sans-serif; + font-size: 20px; + text-decoration: none; + -moz-box-shadow: 2px 2px 1px black; + padding: 2px 4px; + border: solid 1px black; +} + +.menuButton:hover { + position: relative; + transition-property: background-color, color; + transition-duration: 1s; + transition-timing-function: ease-out; + -webkit-transition-property: background-color, color; + -webkit-transition-duration: 1s; + -o-transition-property: background-color, color; + -o-transition-duration: 1s; + background-color:white; + color:black; + -moz-box-shadow: 2px 2px 1px black; +} +</pre> + +<p>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") }}.</p> + +<p>En lugar de describir el efecto con todo detalle, puedes echar un <a href="/samples/cssref/transitions/sample2" title="samples/cssref/transitions/sample2">vistazo a la muestra en vivo</a> si tu navegador admite transiciones (Firefox y WebKit nightlies, Opera 10.5).</p> + +<h3 id="Usar_eventos_de_transición_para_animar_un_objeto">Usar eventos de transición para animar un objeto</h3> + +<p>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.</p> + +<p> + <video controls src="https://developer.mozilla.org/samples/cssref/transitions/sample1/transitiondemo1.ogv"></video> +</p> + + + +<p>Antes de que miremos los fragmentos de código, tal vez desees <a class="external" href="http://developer.mozilla.org/samples/cssref/transitions/sample1/" title="http://developer.mozilla.org/samples/cssref/transitions/sample1/">echar un vistazo a la demo en vivo</a> (suponiendo que tu navegador admita transiciones). También puedes echar un <a class="external" href="http://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css" title="http://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css">vistazo directamente a la CSS</a> que usa.</p> + +<h4 id="El_HTML">El HTML</h4> + +<p>El HTML para este ejemplo es muy sencillo:</p> + +<pre class="deki-transform"><!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> +</pre> + +<p>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 <code>runDemo()</code> del código JavaScript.</p> + +<h4 id="La_CSS">La CSS</h4> + +<p>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 <a href="/samples/cssref/transitions/sample1/transitions.css" title="https://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css"><code>transitions.css</code></a> en su totalidad. A continuación se muestran sólo los trozos relevantes:</p> + +<pre class="deki-transform">.slideRight { + position: absolute; + transition-property: background-color, color, left; + transition-duration: 5s; + -webkit-transition-property: background-color, color, left; + -webkit-transition-duration: 5s; + -o-transition-property: background-color, color, left; + -o-transition-duration: 5s; + background-color: red; + left: 0%; + color: black; +} +</pre> + +<p>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.</p> + +<p>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.</p> + +<p>Se incluyen los equivalentes WebKit y Opera para permitir que el ejemplo funcione en el software correspondiente.</p> + +<p>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.</p> + +<p>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.</p> + +<pre class="deki-transform">.slideLeft { + position: absolute; + transition-property: background-color, color, left; + transition-duration: 5s; + -webkit-transition-property: background-color, color, left; + -webkit-transition-duration: 5s; + -o-transition-property: background-color, color, left; + -o-transition-duration: 5s; + text-align: center; + background-color: blue; + left: 90%; + color: white; + width: 100px; + height: 100px; +} +</pre> + +<p>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%.</p> + +<h4 id="El_código_JavaScript">El código JavaScript</h4> + +<p>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.</p> + +<div class="note"><strong>Nota:</strong> una vez que <a class="external" href="http://dev.w3.org/csswg/css3-animations/" title="http://dev.w3.org/csswg/css3-animations/">la compatibilidad para las animaciones</a> CSS esté disponible, el código JavaScript no será necesario para lograr este efecto.</div> + +<p>En primer lugar, la función<code> runDemo()</code> que se llama cuando el documento se carga para inicializar la secuencia de animación:</p> + +<pre class="deki-transform">function runDemo() { + var el = updateTransition(); + + // Configurar un controlador de eventos para invertir la dirección + // cuando finalice la transición. + + el.addEventListener("transitionend", updateTransition, true); +} +</pre> + +<p>Es bastante sencillo: llama a la función<code> updateTranslation()</code> 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.</p> + +<p>La función <code>updateTransition()</code> tiene este aspecto:</p> + +<pre class="deki-transform">function updateTransition() { + var el = document.querySelector("div.slideLeft"); + + if (el) { + el.className = "slideRight"; + } else { + el = document.querySelector("div.slideRight"); + el.className = "slideLeft"; + } + + return el; +} +</pre> + +<p>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).</p> + +<p>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.</p> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegadores</th> + <th>Compatibilidad básica</th> + <th>Propiedad</th> + <th>Evento de transición finalizada</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>(ninguna, a partir de IE9 pp7)</td> + <td>---</td> + <td>---</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td><strong>4.0</strong> (2.0)</td> + <td><code>-moz-transition</code></td> + <td><code>transitionend</code></td> + </tr> + <tr> + <td>Opera</td> + <td><strong>10.5</strong></td> + <td><code>-o-transition</code></td> + <td><code>OTransitionEnd</code></td> + </tr> + <tr> + <td>Safari | Chrome | WebKit</td> + <td>3.2 | yes | yes</td> + <td><code>-webkit-transition</code></td> + <td><code>webkitTransitionEnd</code></td> + </tr> + </tbody> +</table> + +<h3 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de navegadores</h3> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidad</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Compatibilidad básica</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidad</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Compatibilidad básica</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Consultar_también">Consultar también</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-transitions" title="http://www.w3.org/TR/css3-transitions">Módulo de transiciones CSS nivel 3</a></li> + <li>{{ cssxref("-moz-transition") }}</li> + <li>{{ cssxref("-moz-transition-property") }}</li> + <li>{{ cssxref("-moz-transition-duration") }}</li> + <li>{{ cssxref("-moz-transition-timing-function") }}</li> + <li>{{ cssxref("-moz-transition-delay") }}</li> +</ul> + +<p>{{ HTML5ArticleTOC() }}</p> + +<p>{{ languages( { "en": "en/CSS/CSS_transitions" } ) }}</p> diff --git a/files/es/web/css/transition-delay/index.html b/files/es/web/css/transition-delay/index.html new file mode 100644 index 0000000000..b3c85d103f --- /dev/null +++ b/files/es/web/css/transition-delay/index.html @@ -0,0 +1,388 @@ +--- +title: transition-delay +slug: Web/CSS/transition-delay +translation_of: Web/CSS/transition-delay +--- +<p>{{ CSSRef() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/en/CSS" style="line-height: inherit;" title="CSS">CSS</a> <code style="font-size: 14px; line-height: inherit;">transition-delay</code><span style="line-height: inherit;"> especifica la cantidad de tiempo a esperar entre un cambio pedido hacia una propiedad y el comienzo de un efecto de transicion (</span><a href="/en/CSS/CSS_transitions" style="line-height: inherit;" title="en/CSS/CSS transitions">transition effect</a><span style="line-height: inherit;">).</span></p> + +<p>Un valor de <code>0s</code>, o <code>0ms</code>, indica que la propiedad comenzará a animar la transición inmediatamente cuando el valor cambie; valores positivos retrasaran el comienzo del efecto de transicion por el numero de segundos correspondiente. Valores negativos causaran que la transicion comience inmediatamente, pero causando que el efecto de la transicion pareciera que empiece por la mitad de la animacion.</p> + +<p>Puedes especificar multiples retrasos ("delays"); cada retraso se aplicará a la propiedad correspondiente especificada por la propiedad <span style="line-height: inherit;">{{ cssxref("transition-property") }}, que actua como una lista maestra. Si hay menos delays especificados que en la lista maestra, valores perdidos son puestos en el valor inicial (0s).</span></p> + +<p><span style="line-height: inherit;">You may specify multiple delays; each delay will be applied to the corresponding property as specified by the {{ cssxref("transition-property") }} property, which acts as a master list. If there are fewer delays specified than in the master list, missing values are set to the initial value (</span><code style="font-size: 14px; line-height: inherit;">0s</code><span style="line-height: inherit;">). If there are more delays, the list is simply truncated to the right size. In both case the CSS declaration stays valid.</span></p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("transition-delay")}} +</pre> + +<pre>transition-delay: 3s +transition-delay: 2s, 4ms + +transition-delay: initial +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code><time></code></dt> + <dd>Is a {{cssxref("<time>")}} denoting the amount of time to wait between a property's value changing and the start of the animation effect.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<div> +<div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-delay: 0.5s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:0.5s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:0.5s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:0.5s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:0.5s; + transition-timing-function: linear; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div> +</div> + +<div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-delay: 1s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:1s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:1s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:1s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:1s; + transition-timing-function: linear; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("delay_1s",275,150)}}</div> +</div> + +<div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-delay: 2s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:2s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:2s; + transition-timing-function: linear; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("delay_2s",275,150)}}</div> +</div> + +<div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-delay: 4s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:4s; + transition-timing-function: ease-in-out; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-delay:4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-delay:4s; + transition-timing-function: ease-in-out; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("delay_4s",275,150)}}</div> +</div> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#transition-delay', 'transition-delay') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0 {{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10.0</td> + <td>11.6 {{ property_prefix("-o") }}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>3.0 {{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1 {{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("16.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>10.0 {{ property_prefix("-o") }}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>3.2 {{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Using CSS transitions</a></li> + <li>{{ domxref("TransitionEvent") }}</li> +</ul> diff --git a/files/es/web/css/transition-duration/index.html b/files/es/web/css/transition-duration/index.html new file mode 100644 index 0000000000..03f74d31d8 --- /dev/null +++ b/files/es/web/css/transition-duration/index.html @@ -0,0 +1,341 @@ +--- +title: transition-duration +slug: Web/CSS/transition-duration +translation_of: Web/CSS/transition-duration +--- +<div>{{CSSRef}}</div> + +<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>transition-duration</code></strong> establece el tiempo que debe tardar una animación de transición en completarse. Por defecto, el valor es de <code>0s</code>, esto quiere decir que no se producirá ninguna animación.</p> + +<div>{{EmbedInteractiveExample("pages/css/transition-duration.html")}}</div> + +<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si desea contribuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíenos un pull reques.</p> + +<p>Se puede especificar múltiples duraciones; cada duración va a ser aplicada a la propiedad correspondiente según lo especificado en la propiedad {{ cssxref("transition-property") }}, que actuará como una lista maestra. Si se especifican menos duraciones en la lista maestra, el agente de usuario repetirá la lista de duraciones. Si hay más duraciones, la lista simplemente se trunca al tamaño correcto. En ambos casos, la declaración CSS sigue siendo válida</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css no-line-numbers">/* <time> values */ +transition-duration: 6s; +transition-duration: 120ms; +transition-duration: 1s, 15s; +transition-duration: 10s, 30s, 230ms; + +/* Global values */ +transition-duration: inherit; +transition-duration: initial; +transition-duration: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><time></code></dt> + <dd>El {{cssxref("<time>")}} indica la cantidad de tiempo que debe tomar la transición del valor anterior de una propiedad, al nuevo valor. Un tiempo de 0s indica que no ocurrirá ninguna transición, es decir, el cambio entre los dos estados será instantáneo. Un valor negativo para el tiempo hace que la declaración sea inválida.</dd> +</dl> + +<h3 id="Sintaxis_Formal">Sintaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<div> +<div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-duration: 0.5s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration:0.5s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration:0.5s; + transition-timing-function: ease-in-out; +} +.box1{ + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration:0.5s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transformv color; + transition-duration:0.5s; + transition-timing-function: ease-in-out; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div> +</div> + +<div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-duration: 1s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top -webkit-transform color; + -webkit-transition-duration:1s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform color; + transition-duration:1s; + transition-timing-function: ease-in-out; +} +.box1{ + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color; + -webkit-transition-duration:1s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration:1s; + transition-timing-function: ease-in-out; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("duration_1s",275,150)}}</div> +</div> + +<div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-duration: 2s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration:2s; + transition-timing-function: ease-in-out; +} +.box1{ + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration:2s; + transition-timing-function: ease-in-out; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("duration_2s",275,150)}}</div> +</div> + +<div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-duration: 4s</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration:4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration:4s; + transition-timing-function: ease-in-out; +} +.box1{ + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; + -webkit-transition-duration:4s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top transform -webkit-transform color; + transition-duration:4s; + transition-timing-function: ease-in-out; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("duration_4s",275,150)}}</div> +</div> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#transition-duration-property', 'transition-duration') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Definición Inicial</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> + +<div class="hidden">La compatibilidad de la tabla se genera a partir de datos estructurados. Si usted quiere contribuir con estos datos, por favor va a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div> + +<p>{{Compat("css.properties.transition-duration")}}</p> + +<h2 id="También_puede_ver">También puede ver</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Using CSS transitions</a></li> + <li>{{cssxref('transition')}}</li> + <li>{{cssxref('transition-property')}}</li> + <li>{{cssxref('transition-timing-function')}}</li> + <li>{{cssxref('transition-delay')}}</li> + <li>{{domxref("TransitionEvent")}}</li> +</ul> diff --git a/files/es/web/css/transition-property/index.html b/files/es/web/css/transition-property/index.html new file mode 100644 index 0000000000..1138119dca --- /dev/null +++ b/files/es/web/css/transition-property/index.html @@ -0,0 +1,92 @@ +--- +title: transition-property +slug: Web/CSS/transition-property +tags: + - CSS + - Propiedad CSS + - Referencia + - Transiciones CSS +translation_of: Web/CSS/transition-property +--- +<div>{{CSSRef("CSS Transitions")}}</div> + +<p>La propiedad CSS <strong><code>transition-property</code> </strong>se usa para definir los nombres de las propiedades CSS en las que el efecto de la transición debe aplicarse.</p> + +<pre class="brush: css no-line-numbers">/* Keyword values */ +transition-property: none; +transition-property: all; +transition-property: test_05; +transition-property: -specific; +transition-property: sliding-vertically; + +transition-property: test1; +transition-property: test1, animation4; +transition-property: all, height, all; +transition-property: all, -moz-specific, sliding; + +/* Global values */ +transition-property: inherit; +transition-property: initial; +transition-property: unset; +</pre> + +<div class="note"><strong>Nota:</strong> El <a href="/en-US/docs/Web/CSS/CSS_animated_properties">conjunto de propiedades que puede ser animado</a> está sujeto a cambios. Por lo tanto deberías evitar incluir en la lista cualquiera de las propiedades que actualmente no puede animarse, aunque algún día pudieran, ya que podría causar resultados inesperados.</div> + +<p>Si se especifica una propiedad abreviada (por ejemplo , {{cssxref("background")}}) todas sus subpropiedades que soporten animación serán animadas.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Ninguna propiedad tendrá transición.</dd> + <dt><code>all</code></dt> + <dd>Todas las propiedades que puedan tener una transición animada la tendrán.</dd> + <dt><code>IDENT</code></dt> + <dd>Una cadena que identifique la propiedad en la que el efecto de la transición debe ser aplicado cuando su valor cambie. Este identificador está compuesto por letras de la <code>a</code> a la <code>z</code> insensibles a mayúsculas, números del <code>0</code> al <code>9</code>, un guión bajo (<code>_</code>) o un guión simple (<code>-</code>). El primer carácter que no sea un guión debe ser una letra (es decir: no debe haber números al principio, aunque esten precedidos de un guión). Además, no están permitidos dos guiones al principio del identificador.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Hay varios ejemplos de transiciones CSS incluídos en el artículo principal <a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Transiciones CSS.</a></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#transition-property', 'transition-property')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("css.properties.transition-property")}}</p> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/Web/Guide/CSS/Using_CSS_transitions">Usando transiciones CSS</a></li> + <li>{{domxref("TransitionEvent")}}</li> +</ul> diff --git a/files/es/web/css/transition/index.html b/files/es/web/css/transition/index.html new file mode 100644 index 0000000000..b9b69000c1 --- /dev/null +++ b/files/es/web/css/transition/index.html @@ -0,0 +1,128 @@ +--- +title: transition +slug: Web/CSS/transition +translation_of: Web/CSS/transition +--- +<p>{{ CSSRef("CSS Transitions") }}</p> + +<p>{{ SeeCompatTable() }}</p> + +<h2 id="Sumario">Sumario</h2> + +<p>La propiedad <code>transition</code> es una <a href="/en-US/docs/CSS/Shorthand_properties" title="/en-US/docs/CSS/Shorthand_properties">propiedad abreviada</a> de {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }}, y {{ cssxref("transition-delay") }}. Permite definir la transición entre dos estados de un elemento. Hay diferentes estados que pueden ser definidos utilizando <a href="/en-US/docs/CSS/Pseudo-classes" title="/en-US/docs/CSS/Pseudo-classes">pseudo-clases</a> como {{cssxref(":hover")}} o {{cssxref(":active")}} o aplicado dinámicamente usando JavaScript.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* Aplicar a 1 propiedad */ +/* nombre de la propiedad | duración */ +transition: margin-left 4s; + +/* nombre de la propiedad | duración | retardo */ +transition: margin-left 4s 1s; + +/* nombre de la propiedad | duración | función | retardo */ +transition: margin-left 4s ease-in-out 1s; + +/* Aplicar a 2 propiedades */ +transition: margin-left 4s, color 1s; + +/* Aplicar a todas las propiedades que cambien */ +transition: all 0.5s ease-out; +</pre> + +<p>Nótese que el orden es importante dentro de los elementos de la propiedad. El primer valor que puede ser analizado como tiempo es asignado a la propiedad <a href="/en-US/docs/CSS/transition-duration" title="/en-US/docs/CSS/transition-duration">transition-duration</a>, y el segundo valor que puede ser analizado como tiempo es asignado a la propiedad <a href="/en-US/docs/CSS/transition-delay" title="/en-US/docs/CSS/transition-delay">transition-delay</a>.</p> + +<p>Véase <a href="/en/CSS/CSS_transitions#When_property_value_lists_are_of_different_lengths" title="en/CSS/CSS transitions#When property value lists are of different lengths">cuando la lista de valores de propiedades son de diferentes tamaños</a> para más detalles de cómo se manejan las cosas cuando la lista de valores de propiedades no son de tamaños iguales. En resumen, las descripciones extras más allá del número de propiedades que son animadas son ignoradas.</p> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax("transition")}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Hay muchos ejemplos de transiciones CSS en el artículo principal <a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transitions">CSS transitions</a>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#transition', 'transition') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0 {{ property_prefix("-webkit") }}<br> + 26.0</td> + <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10.0</td> + <td>11.6 {{ property_prefix("-o") }}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>3.0 {{ property_prefix("-webkit") }}<br> + 6.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1 {{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("16.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>10.0 {{ property_prefix("-o") }}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>3.2 {{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Usando transiciones CSS</a></li> + <li>{{ domxref("TransitionEvent") }}</li> +</ul> diff --git a/files/es/web/css/tutorials/index.html b/files/es/web/css/tutorials/index.html new file mode 100644 index 0000000000..c68bceb154 --- /dev/null +++ b/files/es/web/css/tutorials/index.html @@ -0,0 +1,61 @@ +--- +title: CSS Tutorials +slug: Web/CSS/Tutorials +tags: + - CSS + - Guía + - Tutorial +translation_of: Web/CSS/Tutorials +--- +<p>Aprender CSS puede ser una tarea desalentadora. Para ayudarte, hemos escrito numerosos <strong>tutoriales acerca de CSS. </strong>Algunos estan dirigidos a principiantes, y mientras que otros presentan complejas características para ser usadas por usuarios mas avanzados.</p> + +<p>Esta página enlista todo el contenido, con una descripción corta. Estan agrupados por grado de complejidad, para que escogas lo mas apropiado para tu nivel.</p> + +<div class="note"> +<p><strong>Nota del editor:</strong><strong> Debemos de usar tags de "grado de dificultad" en las páginas de este tutorial para que las listas basadas en grados de dificultad puedan ser automáticamente construidas.</strong></p> +</div> + +<h2 id="Turorial_CSS_Nivel_Principiante">Turorial CSS Nivel Principiante</h2> + +<dl> + <dt><a href="/en-US/docs/CSS/Getting_Started" title="/en-US/docs/CSS/Getting_Started">Empezando</a></dt> + <dd>Esta guía va dirigida para <u>completos principiantes</u>: Nunca has escrito una línea de CSS? — esta guía es para ti. Se explican los conceptos fundamentales del lenguaje.</dd> + <dt><a href="/en-US/docs/CSS/Using_CSS_multiple_backgrounds" title="/en-US/docs/CSS/Using_CSS_multiple_backgrounds">Using multiple backgrounds</a></dt> + <dd>Backgrounds are fundamental for nice styling: CSS allows you to set several of them on each box. This tutorial explains how they interact and how to achieve nice effects.</dd> + <dt><a href="/en-US/docs/CSS/Scaling_background_images" title="/en-US/docs/CSS/Scaling_background_images">Scaling background images</a></dt> + <dd>CSS allows you to resize images used as an element's background. This tutorial describes how to achieve this in a simple way.</dd> + <dt><a href="/en-US/docs/CSS/Media_queries" title="/en-US/docs/CSS/Media_queries">Media queries</a></dt> + <dd>The size of the screens, or the kind of devices like touchscreens or printed sheets vary greatly nowadays. Media queries are the fundamental building blocks in achieving Web sites that render everywhere in their best quality.</dd> + <dt><a href="/en-US/docs/CSS/Understanding_z-index" title="/en-US/docs/CSS/Understanding_z-index">Understanding z-index</a></dt> + <dd>Controlling superposition of boxes is a basic feature that is very quickly needed by Web developers. Though not that difficult, it requires a basic knowledge of CSS.</dd> +</dl> + +<h2 id="Intermediate-level_CSS_tutorials">Intermediate-level CSS tutorials</h2> + +<p>After the release of CSS 2 (Level 1), new features have been added to CSS. Some of them are <em>fancy</em> and are pretty self contained. They are easy to use for anybody with a fair knowledge of basic concepts.</p> + +<dl> + <dt><a href="/en-US/docs/CSS/Counters" title="/en-US/docs/CSS/Counters">CSS Counters</a></dt> + <dd>Counting items and pages is an easy task in CSS. Learn to use {{cssxref("counter-reset")}}, {{cssxref("counter-increment")}}, {{cssxref("counters", "counters()")}}, and {{cssxref("counter", "counter()")}}.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">CSS Animations</a></dt> + <dd>CSS3 Animations allow you to define configurations of style, as <a href="/en-US/docs/CSS/@keyframes" title="/en-US/docs/CSS/@keyframes">keyframes</a>, and to transition between them defining an animation.</dd> + <dt><a href="/en-US/docs/CSS/Tutorials/Using_CSS_transitions" title="/en-US/docs/CSS/Using_CSS_transitions">CSS Transitions</a></dt> + <dd>CSS3 Transitions allow you to define an animation between several styles and to control the way this transition happens.</dd> + <dt><a href="/en-US/docs/CSS/Tutorials/Using_CSS_transforms">CSS Transforms</a></dt> + <dd>Transforms allow you to change the position of elements by modifying their coordinate space: it allows for translating, rotating, and deforming them in the 2D or 3D spaces.</dd> + <dt><a href="/en-US/docs/CSS/Using_CSS_gradients" title="/en-US/docs/CSS/Using_CSS_gradients">CSS Gradients</a></dt> + <dd>Gradients are images that transition smoothly from one color to another. There are several types of gradients allowed in CSS: linear or radial, repeating or not. This tutorial describes how to use them.</dd> +</dl> + +<h2 id="Advanced-level_CSS_tutorials">Advanced-level CSS tutorials</h2> + +<p>CSS also got new features allowing you to create complex layouts. Though the simplest way to achieve such layout, they are more complex to use for people without too much experience.</p> + +<dl> + <dt><a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="/en-US/docs/CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a></dt> + <dd>CSS3 introduces a new layout allowing you to easily define multiple columns in an element. Though multi-column text is not that common on devices like screens, this is particularly useful on printed pages, or for indexes.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes" title="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes">CSS flexible boxes layouts</a></dt> + <dd>This new layout allow you to give boxes flexibility, allowing them to be resized smoothly. It is a powerful way to describe complex interfaces.</dd> +</dl> + +<p> </p> diff --git a/files/es/web/css/type_selectors/index.html b/files/es/web/css/type_selectors/index.html new file mode 100644 index 0000000000..54ddb66bb0 --- /dev/null +++ b/files/es/web/css/type_selectors/index.html @@ -0,0 +1,84 @@ +--- +title: Selectores de tipo +slug: Web/CSS/Type_selectors +tags: + - CSS + - Principiante + - Referencia CSS + - Selectores +translation_of: Web/CSS/Type_selectors +--- +<div>{{CSSRef}}</div> + +<div>El selector de tipo CSS selecciona elementos por nombre de nodo. En otras palabras, selecciona todos los elementos del tipo dado dentro de un documento.</div> + +<div> </div> + +<pre class="brush: css">/* Todos los elementos <a> */ +a { + color: red; +}</pre> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">element { <em>style properties</em> } +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span { + background-color: skyblue; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span>Aquí hay un elemento 'span' con algo de texto.</span> +<p>Aquí hay un elemento 'p' con algo de texto.</p> +<span>Aquí hay un elemento 'span' con más texto.</span> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Ejemplo', 200, 150)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("css.selectors.type")}}</p> + +<div id="compat-mobile"> </div> diff --git a/files/es/web/css/universal_selectors/index.html b/files/es/web/css/universal_selectors/index.html new file mode 100644 index 0000000000..4dae987739 --- /dev/null +++ b/files/es/web/css/universal_selectors/index.html @@ -0,0 +1,106 @@ +--- +title: Selectores universales +slug: Web/CSS/Universal_selectors +tags: + - CSS + - Principiante + - Referencia CSS + - Selectores +translation_of: Web/CSS/Universal_selectors +--- +<div>{{CSSRef}}</div> + +<p>El <strong>selector universal</strong> CSS (<code>*</code>) coincide con elementos de cualquier tipo.</p> + +<pre class="brush: css no-line-numbers">/* Selecciona todos los elementos */ +* { + color: green; +}</pre> + +<p>A partir de CSS3, el asterisco se puede usar en combinación con {{cssxref("CSS_Namespaces", "namespaces")}}:</p> + +<ul> + <li><code>ns|*</code> - coincide con todos los elementos en el espacio de nombres <em>ns</em></li> + <li><code>*|*</code> - coincide con todos los elementos</li> + <li><code>|*</code> - matches all elements without any declared namespace</li> +</ul> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">* { <em>style properties</em> }</pre> + +<p>El asterisco es opcional con selectores simples. Por ejemplo, <code>*.warning</code> y <code>.warning</code> son equivalentes.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">* [lang^=en] { + color: green; +} + +*.warning { + color: red; +} + +*#maincontent { + border: 1px solid blue; +} + +.floating { + float: left +} + +/* despejar automáticamente el siguiente hermano después de un elemento flotante */ +.floating + * { + clear: left; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="warning"> + <span lang="en-us">Un span verde</span> en un párrafo rojo.</span> +</p> +<p id="maincontent" lang="en-gb"> + <span class="warning">Un span rojo</span> en un párrafo verde.</span> +</p></pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Ejemplos')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Ningún cambio.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Define el comportamiento con respecto a los espacios de nombres y agrega la sugerencia de que se permite omitir el selector dentro de los pseudo-elementos.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("css.selectors.universal")}}</p> diff --git a/files/es/web/css/user-select/index.html b/files/es/web/css/user-select/index.html new file mode 100644 index 0000000000..0e597df92a --- /dev/null +++ b/files/es/web/css/user-select/index.html @@ -0,0 +1,138 @@ +--- +title: user-select +slug: Web/CSS/user-select +translation_of: Web/CSS/user-select +--- +<div>{{CSSRef}}</div> + +<p>La propiedad <a href="/en-US/docs/Web/CSS">CSS </a><code><strong>user-select</strong></code> controla si el usuario puede seleccionar el texto. Esto no tiene ningún efecto en el contenido cargado bajo {{Glossary("Chrome", "chrome")}}, excepto en cuadros de texto.</p> + +<pre class="brush:css">/* Valores de palabras clave */ +user-select: none; +user-select: auto; +user-select: text; +user-select: contain; +user-select: all; + +/* Varoles globales */ +user-select: inherit; +user-select: initial; +user-select: unset; + +/* Valores Mozilla-specific */ +-moz-user-select: none; +-moz-user-select: text; +-moz-user-select: all; + +/* Valores WebKit-specific */ +-webkit-user-select: none; +-webkit-user-select: text; +-webkit-user-select: all; /* No funciona el Safari; solo usa + "none" or "text", o si no hará + permitir escribir en el contenedor <html> */ + +/* Valores Microsoft-specific */ +-ms-user-select: none; +-ms-user-select: text; +-ms-user-select: element; +</pre> + +<p>{{cssinfo}}</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<dl> + <dt><code>none</code></dt> + <dd>El texto y sus sub elementos no son seleccionables. Tenga en cuenta que el objeto {{domxref("Selection")}} puede contener estos elementos.</dd> + <dt><code>auto</code></dt> + <dd>El valor calculado auto se determina de la siguiente manera: En los pseudo elementos <code>::before</code> y <code>::after</code>, el valor calculado es <code>none</code> + <ul> + <li>Si el elemento es un elemento editable, el valor calculado es <code>contain</code></li> + <li>De lo contrario, si el valor calculador de <code>user-select</code> en la matriz de este elemento es <code>all</code>, el valor calculado es <code>all</code></li> + <li>De lo contrario, si el valor calulado de <code>user-select</code> en la matriz de este elemento es <code>none</code>, el valor calculado es <code>none</code></li> + <li>De lo contrario, el valor calculado es <code>text</code></li> + </ul> + </dd> + <dt><code>text</code></dt> + <dd>El texto puede ser seleccionado por el usuario.</dd> + <dt><code>all</code></dt> + <dd>En el editor HTML, si se realiza doble-click o click-contextual en el subelemento, se seleccionará el antecesor más alto de el valor.</dd> + <dt><code>contain</code></dt> + <dd>Permite que la selección comience dentro del elemento; sin embargo, la selección estará contenida por los límites de ese elemento.</dd> + <dt><code>element</code>{{non-standard_inline}} (IE-specific alias)</dt> + <dd>Igual que <code>contain</code>. Solo lo soportado en Internet Explorer.</dd> +</dl> + +<div class="note"> +<p id="Formal_syntax"><strong>Nota:</strong> CSS UI 4 <a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">renombra user-select: a contain</a>.</p> +</div> + +<h3 id="Formal_syntax_2">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Debería poder seleccionar este texto.</p> +<p class="unselectable">No puedes seleccionar este texto</p> +<p class="all">Al hacer clic una vez se seleccionará todo este texto.</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.unselectable { + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.all { + -moz-user-select: all; + -webkit-user-select: all; + -ms-user-select: all; + user-select: all; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}}</td> + <td>{{Spec2('CSS4 UI')}}</td> + <td>Initial definition. Also defines <code>-webkit-user-select</code> as a deprecated alias of <code>user-select</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite<br> +<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud.</div> + +<p>{{Compat("css.properties.user-select")}}</p> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{Cssxref("::selection")}}</li> + <li>The JavaScript {{domxref("Selection")}} object.</li> + <li><a href="http://www.w3.org/TR/css-ui-4/#propdef-user-select">user-select</a> in <a href="http://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a>.</li> +</ul> diff --git a/files/es/web/css/using_css_custom_properties/index.html b/files/es/web/css/using_css_custom_properties/index.html new file mode 100644 index 0000000000..8bbb298ed6 --- /dev/null +++ b/files/es/web/css/using_css_custom_properties/index.html @@ -0,0 +1,267 @@ +--- +title: Uso de propiedades personalizadas (variables) en CSS +slug: Web/CSS/Using_CSS_custom_properties +tags: + - CSS + - Guía + - Propiedades personalizadas CSS + - Varables CSS + - Web +translation_of: Web/CSS/Using_CSS_custom_properties +--- +<div>{{cssref}}</div> + +<p>En CSS, las <strong>propiedades personalizadas</strong> (también conocidas como<strong> variables</strong>) son entidades definidas por autores de CSS que contienen valores específicos que se pueden volver a utilizar en un documento. Se establecen mediante la notación de propiedades personalizadas (por ejemplo,<strong> </strong><strong><code>--main-color: black;</code></strong>) y se acceden mediante la función {{cssxref("var", "var()")}} (por ejemplo, color: <strong><code>var (--main-color);</code></strong>).</p> + +<p>Sitios web complejos tienen cantidades muy grandes de CSS, a menudo con una gran cantidad de valores repetidos. Por ejemplo, el mismo color se puede utilizar en cientos de lugares diferentes, lo cual requiere buscar y reemplazar globalmente si necesitamos cambiar ese color. Las variables CSS permiten que un valor se almacene en un lugar y luego se haga referencia en varios otros lugares. Un beneficio adicional son los identificadores semánticos. Por ejemplo <strong><code>--main-text-color</code></strong> es más fácil de entender que <strong><code>#00ff00</code></strong>, especialmente si este mismo color también se utiliza en otro contexto.</p> + +<p>Las variables CSS están sujetas a la cascada, y heredan su valor de su padre.</p> + +<h2 id="Uso_Básico">Uso Básico</h2> + +<p>Para declarar propiedades personalizadas (variables) usamos un nombre que comienze con dos guiones (<code>--</code>), y un valor que puede ser cualquier valor válido de CSS. Como cualquier otra propiedad, la escribimos dentro de un set de reglas de estilo, algo así:</p> + +<pre class="brush:css; highlight:[2] language-css notranslate">elemento { + --main-bg-color: brown; +} +</pre> + +<p>Ten en cuenta que el selector que usemos para las reglas de estilo define el ámbito (scope) en el que podremos usar la propiedad personalizada (variable). Una buena práctica común es declarar variables en la pseudo-clase {{cssxref(":root")}}, y así aplicarlas globalmente al documento HTML:</p> + +<pre class="brush: css notranslate">:root { + --main-bg-color: brown; +}</pre> + +<p>Sin embargo, esto no tiene por qué ser siempre así: podrían haber muy buenas razones para querer limitar el ámbito de tus propiedades personalizadas.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Los nombres de propiedades personalizadas son case sensitive (distinguen entre mayúsuculas y minúsculas) — <code>--my-color</code> será tratado como una propiedad personalizada distinta a <code>--My-color</code>.</p> +</div> + +<p>Como mencionamos anteriormente, para acceder al valor de una propiedad personalizada usamos el nombre de la propiedad dentro de la función {{cssxref("var()")}}, en lugar de cualquier otro valor normal:</p> + +<pre class="brush:css; highlight:[2] language-css notranslate">elemento { + background-color: var(--main-bg-color); +} +</pre> + +<h2 id="Primeros_pasos_con_propiedades_personalizadas_variables">Primeros pasos con propiedades personalizadas (variables)</h2> + +<p>Comencemos con este simple CSS que colorea elementos de diferentes clases con el mismo color:</p> + +<div id="sample1"> +<pre class="brush:css; highlight:[3,20,26,32] notranslate">.uno { + color: white; + background-color: brown; + margin: 10px; + width: 50px; + height: 50px; + display: inline-block; +} + +.dos { + color: white; + background-color: black; + margin: 10px; + width: 150px; + height: 70px; + display: inline-block; +} +.tres { + color: white; + background-color: brown; + margin: 10px; + width: 75px; +} +.cuatro { + color: white; + background-color: brown; + margin: 10px; + width: 100px; +} + +.cinco { + background-color: brown; +} + +</pre> + +<p>Lo aplicaremos a este HTML:</p> + +<pre class="brush:html notranslate"><div> + <div class="uno">1:</div> + <div class="dos">2: Texto <span class="cinco">5 - más texto</span></div> + <input class="tres"> + <textarea class="cuatro">4: Lorem Ipsum</textarea> +</div> +</pre> + +<p>... lo cual nos lleva a esto:</p> + +<p>{{EmbedLiveSample("sample1",600,180)}}</p> + +<p>Observa la repetición en el CSS. El color de fondo se pone a marrón (<code>brown</code>) en varios lugares. Para algunas declaraciones CSS, es posible declarar esto más alto en la cascada y dejar que la herencia CSS resuelva este problema de forma natural. Para proyectos no triviales, esto no siempre es posible. Al declarar una variable en la pseudo-clase {{cssxref(":root")}}, podemos evitar repetición usando la variable.</p> +</div> + +<div id="sample2"> +<pre class="brush: css notranslate">:root { + --main-bg-color: brown; +} + +.uno { + color: white; + background-color: var(--main-bg-color); + margin: 10px; + width: 50px; + height: 50px; + display: inline-block; +} + +.dos { + color: white; + background-color: black; + margin: 10px; + width: 150px; + height: 70px; + display: inline-block; +} +.tres { + color: white; + background-color: var(--main-bg-color); + margin: 10px; + width: 75px; +} +.cuatro { + color: white; + background-color: var(--main-bg-color); + margin: 10px; + width: 100px; +} + +.cinco { + background-color: var(--main-bg-color); +} +</pre> +</div> + +<p>Esto conduce al mismo resultado que el ejemplo anterior pero permite una declaración canónica de la propiedad deseada; muy útil si queremos cambiar el valor en toda la página más tarde.</p> + +<h2 id="Herencia_de_propiedades_personalizadas">Herencia de propiedades personalizadas</h2> + +<p>Las propiedades personalizadas heredan. Lo que significa que si no se establece ningún valor para una propiedad personalizada en un elemento dado, se utiliza el valor de su elemento padre. Veámos el siguiente HTML:</p> + +<pre class="brush: html notranslate"><div class="uno"> + <div class="dos"> + <div class="tres"></div> + <div class="cuatro"></div> + </div> +</div></pre> + +<p>... con el siguiente CSS:</p> + +<pre class="brush: css notranslate">.dos { + --test: 10px; +} + +.tres { + --test: 2em; +} +</pre> + +<p>En este caso, los resultados de <code>var(--test)</code> son:</p> + +<ul> + <li>Para el elemento <code>class="dos"</code>: <code>10px</code></li> + <li>Para el elemento <code>class="tres"</code>: <code>2em</code></li> + <li>Para el elemento <code>class="cuatro"</code>: <code>10px</code> (heredado de su padre)</li> + <li>Para el elemento <code>class="uno"</code>: <em>valor no válido</em>, que es el valor predeterminado de cualquier propiedad personalizada.</li> +</ul> + +<p>Tenga en cuenta que éstas son propiedades personalizadas, no variables reales como podemos encontrar en otros lenguajes de programación. El valor se calcula donde sea necesario, no se almacena para su uso en otras reglas. Por ejemplo, no se puede declarar una propiedad para un elemento y esperar recuperarla en las reglas del descendiente de un hermano. La propiedad sólo está configurada para el selector que coincida y sus descendientes, como cualquier CSS normal.</p> + +<h2 id="Valores_de_sustitución_fallback_de_propiedades_personalizadas">Valores de sustitución (fallback) de propiedades personalizadas</h2> + +<p>Utilizando <code><a href="/es/docs/Web/CSS/var">var()</a></code> podemos definir múltiples <strong> valores de sustitución (fallback)</strong> que se usarán cuando la variable dada no está definida aún; esto puede ser útil cuando se trabaja con <a href="/es/docs/Web/Web_Components/Using_custom_elements">Custom Elements</a> y <a href="/es/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>.</p> + +<div class="note"> +<p><strong>Los valores de sustitución (fallback) no se usan para arreglar problemas de compatibilidad del navegador.</strong> Si el navegador no tiene soporte para Propiedades Personalizadas de CSS, el valor de fallback no es de ayuda. <strong>Es simplemente un respaldo para que aquellos navegadores que sí soportan Propiedades Personalizadas de CSS</strong> puedan elegir un valor diferente en caso de que la variable no se haya definido o contenga un valor no válido.</p> +</div> + +<p>El primer argumento a la función es el nombre de la <a href="https://www.w3.org/TR/css-variables/#custom-property"> propiedad personalizada </a> que se va a sustituir. El segundo argumento a la función, si se proporciona, es un valor de reserva, que se utiliza como valor de sustitución cuando la <a href="https://www.w3.org/TR/css-variables/#custom-property"> propiedad personalizada </a> referenciada no es válida. La función solo acepta dos parámetros, asignando todo lo que después de la primera coma como el segundo parámetro. Si ese segundo parámetro es inválido, por ejemplo una lista de valores separados por comas, el fallback fallará. Por ejemplo:</p> + +<pre class="brush: css notranslate">.dos { + color: var(--my-var, red); /* Rojo (red) si --my-var no esta definida */ +} + +.tres { + background-color: var(--my-var, var(--my-background, pink)); /* Rosa (pink) si my-var y --my-background no están definidas */ +} + +.tres { + background-color: var(--my-var, --my-background, pink); /* Invalido: "--background, pink" */ +}</pre> + +<p>Como vemos en el segundo ejemplo de arriba, la manera correcta de incluir más de un fallback es usar una propiedad personalizada como fallback (la cual tiene su propio fallback). Esta técnica se ha visto que puede causar problemas de rendimiento al tomar más tiempo analizar las variables.</p> + +<div class="note"> +<p><strong>Nota:</strong> La sintaxis del fallback, como la de las <a href="https://www.w3.org/TR/css-variables/#custom-property">propiedades personalizadas</a>, permite comas. Por ejemplo, <code>var(--foo, red, blue)</code> define un fallback de <code>red, blue</code> — es decir, cualquier cosa entre la primera coma y el final de la función se considera un valor de fallback.</p> +</div> + +<h2 id="Validez_y_valores">Validez y valores</h2> + +<p>El clásico concepto de validez en CSS, vinculado a cada propiedad, no es muy útil con respecto a las propiedades personalizadas. Cuando se analizan los valores de las propiedades personalizadas, el navegador no sabe dónde se utilizarán, por lo que debe considerar casi todos los valores como <em>válidos</em>.</p> + +<p>Desafortunadamente, estos valores válidos se pueden usar, a través de la notación funcional <code>var()</code>, en un contexto en el que tal vez no tengan sentido. Propiedades y variables personalizadas pueden llevar a declaraciones CSS no válidas, dando lugar al nuevo concepto de <em>válido en tiempo calculado.</em></p> + +<h2 id="¿Qué_pasa_con_los_valores_inválidos">¿Qué pasa con los valores inválidos?</h2> + +<p>Cuando el navegador encuentra una sustitución inválida con <code>var()</code>, se usará el valor inicial o heredado.</p> + +<p>Considera el siguiente fragmento:</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>This paragraph is initial black.</p> </pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">:root { --text-color: 16px; } +p { color: blue; } +p { color: var(--text-color); }</pre> + +<p>Como esperaríamos, el navegador sustituye <code>var(--text-color)</code> con el valor de <code>--text-color</code>, pero <code>16px</code> no es un valor válido para la propiedad {{cssxref("color")}}. Después de la sustitución, la propiedad no tiene sentido. El navegador maneja esta situación en dos pasos:</p> + +<ol> + <li>Comprueba si la propiedad color se puede heredar. Sí, pero el elemento <code><p></code> no tiene un padre con una propiedad color. Así que pasamos al siguiente paso.</li> + <li>Toma el valor de su <strong>valor inicial por defecto</strong>.</li> +</ol> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('What_happens_with_invalid_variables')}}</p> + +<p>El color del párrafo no será azul (blue) porque la sustición inválida se reemplaza con el valor inicial, no el fallback. Si hubiéramos escrito <code>color: 16px</code> sin ninguna sustitución de variables, sería entonces un error de sintaxis. La declaración anterior será usada.</p> + +<h2 id="Valores_en_JavaScript">Valores en JavaScript</h2> + +<p>Para utilizar los valores de las propiedades personalizadas en JavaScript, es como las propiedades estándar.</p> + +<pre class="brush: js notranslate">// Obtener la variable desde el estilo inline +element.style.getPropertyValue("--my-var"); + +// Obtener variable desde cualquier lugar +getComputedStyle(element).getPropertyValue("--my-var"); + +// Establecer variable en estilo inline +element.style.setProperty("--my-var", jsVar + 4); +</pre> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{Compat("css.properties.custom-property")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/--*" title="The documentation about this has not yet been written; please consider contributing!"><code>custom properties</code></a></li> +</ul> diff --git a/files/es/web/css/valor_calculado/index.html b/files/es/web/css/valor_calculado/index.html new file mode 100644 index 0000000000..9112bf97b5 --- /dev/null +++ b/files/es/web/css/valor_calculado/index.html @@ -0,0 +1,30 @@ +--- +title: Valor calculado +slug: Web/CSS/Valor_calculado +tags: + - Referencia_CSS +translation_of: Web/CSS/computed_value +--- +<p><br> + {{ CSSRef() }}</p> +<h3 id="Sumario" name="Sumario">Sumario</h3> +<p>El valor <b>computed value</b> de una propiedad CSS es computado a partir de <a href="es/CSS/specified_value">specified value</a> de la siguiente forma:</p> +<ul> + <li>Mediante los valores especiales <code><a href="es/CSS/inherit">inherit</a></code> y <code><a href="es/CSS/initial">initial</a></code>, y</li> + <li>Realizando el cómputo necesario para alcanzar el valor descrito en la línea de "Computed value" del sumario de la propiedad.</li> +</ul> +<p>El cálculo necesario para el "Computed value" de una propiedad, normalmente implica convertir valores relativos (como los expresados en unidades 'em' o en porcentajes) a valores absolutos.</p> +<p>Por ejemplo: si un elemento tiene un valor especificado de <code>font-size: 16px</code> y <code>padding-top: 2em</code>, el valor computado de <code>padding-top</code> es <code>32px</code> (el doble del tamaño de la fuente).</p> +<p>Sin embargo, para algunas propiedades (aquellas con porcentajes relativos a algo que necesita un formato para ser determinados, tales como <a href="es/CSS/width">width</a>, <a href="es/CSS/margin-right">margin-right</a>, <a href="es/CSS/text-indent">text-indent</a>, y <a href="es/CSS/top">top</a>) los valores especificados en porcentajes se tornan valores computados. Ademas,los números especificados sin unidades en la propiedad <a href="es/CSS/line-height">line-height</a> se convierten en valores computados, según se especifica. Estos valores relativos que quedan tras realizar el cómputo, se hacen absolutos cuando se determina el <a href="es/CSS/used_value">used value</a>.</p> +<p>El uso principal de <a href="es/CSS/computed_value">computed value</a> (ademas de ser un paso de transición entre <a href="es/CSS/specified_value">specified value</a> y <a href="es/CSS/used_value">used value</a>) es <a href="es/CSS/inherited_and_non-inherited_properties">inheritance</a>, incluyendo la palabra clave <a href="es/CSS/inherit">inherit</a>.</p> +<h3 id="Notas" name="Notas">Notas</h3> +<p>La API DOM <a href="es/DOM/window.getComputedStyle">getComputedStyle</a> devuelve <a href="es/CSS/used_value">used value</a>, en lugar de <a href="es/CSS/computed_value">computed value</a>.</p> +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> +<p><a href="es/CSS/specified_value">specified value</a>, <a href="es/CSS/used_value">used value</a>, <a href="es/CSS/actual_value">actual value</a></p> +<p> </p> +<p> </p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/CSS/computed_value", "fr": "fr/CSS/Valeur_calcul\u00e9e", "ja": "ja/CSS/computed_value", "pl": "pl/CSS/warto\u015b\u0107_wyliczona" } ) }}</p> diff --git a/files/es/web/css/valor_inicial/index.html b/files/es/web/css/valor_inicial/index.html new file mode 100644 index 0000000000..a6bbcdf32d --- /dev/null +++ b/files/es/web/css/valor_inicial/index.html @@ -0,0 +1,26 @@ +--- +title: Valor inicial +slug: Web/CSS/Valor_inicial +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/initial_value +--- +<p> +</p><p><< <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a> +</p> +<h3 id="Resumen" name="Resumen"> Resumen </h3> +<p>El <b>Valor inicial</b> dado en el resumen de cada definición de <a href="es/Gu%c3%ada_de_referencia_de_CSS">propiedad CSS</a> tiene un significado distinto según se trate de <a href="es/CSS/inheritance#Propiedades_heredadas_y_no_heredadas">propiedades heredadas o no heredadas</a>. +</p><p>Para propiedades <a href="es/CSS/inheritance#Propiedades_heredadas_y_no_heredadas">heredadas</a>, se usa el valor inicial, para el elemento raíz <b>solamente</b>, cuando no se ha especificado ningún valor para el elemento. </p><p>Para propiedades <a href="es/CSS/inheritance#Propiedades_heredadas_y_no_heredadas">no heredadas</a> se usa el valor inicial para <b>todos</b> los elementos, cuando no se especificó nigún valor para el elemento. </p><p>En CSS3 se propuso el valor <code><a href="es/CSS/initial">initial</a></code> para permitir a los autores especificar explícitamente éste valor inicial. +</p> +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3> +<p><a href="es/CSS/inheritance#Propiedades_heredadas_y_no_heredadas">Propiedades heredadas y no heredadas</a>, <code><a href="es/CSS/initial">initial</a></code> +</p><p><br> +</p> +<div class="noinclude"> +<p><span class="comment">Categorías</span> +</p><p><span class="comment">Interwiki Languages</span> +</p> +</div> +{{ languages( { "en": "en/CSS/initial_value", "fr": "fr/CSS/Valeur_initiale", "ja": "ja/CSS/initial_value", "ko": "ko/CSS/initial_value", "pl": "pl/CSS/Warto\u015b\u0107_pocz\u0105tkowa" } ) }} diff --git a/files/es/web/css/var()/index.html b/files/es/web/css/var()/index.html new file mode 100644 index 0000000000..47e61d90d9 --- /dev/null +++ b/files/es/web/css/var()/index.html @@ -0,0 +1,134 @@ +--- +title: var() +slug: Web/CSS/var() +translation_of: Web/CSS/var() +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La función <strong><code>var()</code></strong> puede ser utilizada como valor en cualquier propiedad de un elemento. La función var() no puede ser usada como nombre de una propiedad, selector o cualquier cosa que no sea un valor de propiedad. (Hacerlo provoca normalmente una sintaxis erronea o bien un valor que no tiene conexión con la variable).</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>El primer parámetro que recibe la función es el nombre de la custom property que será reemplazada. Se puede utilizar un segundo parámetro opcional como fallback de el primero. Si la custom property referenciada por el primer parámetro no es válida, entonces la función utiliza el valor del segúndo parámetro.</p> + +<pre class="syntaxbox notranslate">{{csssyntax}} +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><custom-property-name></dt> + <dd>El nombre de la custom property a la que se hace referencia, representada por un identificador válido, es decir, cualquier nombre que comience por dos guiones. Las "custom properties" son para uso exclusivo de autores y usuarios. CSS no dará nunca un significado más alla del que se detalla aquí.</dd> + <dt><declaration-value></dt> + <dd>El valor por defecto de la custom property en caso de que la custom property referenciada sea inválida. Este valor puede contener cualquier caracter salvo algunos con significado especial como saltos de linea, llaves sin cerrar, exclamaciones o puntos y comas .</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css notranslate">:root { + --main-bg-color: pink; +} + +body { + background-color: var(--main-bg-color); +} +</pre> + +<pre class="brush: css notranslate">/* Fallback */ +/* En el estilo del componente: */ +.component .header { + color: var(--header-color, blue); +} + +.component .text { + color: var(--text-color, black); +} + +/* En el estilo de la aplicación: */ +.component { + --text-color: #080; /* header-color no está definido y por lo tanto permanece con el valor "blue" definido como fallback */ +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}</td> + <td>{{Spec2('CSS3 Variables')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica </th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>48<sup>[2]</sup><br> + 49</td> + <td>{{CompatGeckoDesktop("29")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("31")}}</td> + <td>{{CompatNo}}</td> + <td>36</td> + <td>9.3<sup>[3]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica </th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>50</td> + <td>{{CompatGeckoDesktop("29")}}</td> + <td>{{CompatNo}}</td> + <td>37</td> + <td>9.3<sup>[3]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Esta característica es activada con la preferencia layout.css.variables.enabled, por defecto, con valor false y usando la sintaxis angituga en Gecko 29. Desde Gecko 31 esta preferencia está activada por defecto y utiliza la sintaxis --<var>nombredevariable.</var></p> + +<p>[2] Chrome 48 activable a través de el flag "Experimental Web Platform features" flag en <code>chrome://flags</code>.</p> + +<p>[3] Ver {{webkitbug(19660)}}.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Using_CSS_variables">Usando variables CSS</a></li> +</ul> diff --git a/files/es/web/css/vertical-align/index.html b/files/es/web/css/vertical-align/index.html new file mode 100644 index 0000000000..f8f35405c7 --- /dev/null +++ b/files/es/web/css/vertical-align/index.html @@ -0,0 +1,161 @@ +--- +title: vertical-align +slug: Web/CSS/vertical-align +translation_of: Web/CSS/vertical-align +--- +<div>{{ CSSRef() }}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La propiedad <code>vertical-align</code> de <a href="/en-US/docs/CSS" title="CSS">CSS</a> especifica el alineado vertical de un elemento en línea o una celda de una tabla.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code>vertical-align:</code> <code>baseline</code> | <code>sub</code> | <code>super</code> | <code>text-top</code> | <code>text-bottom</code> | <code>middle</code> | <code>top</code> | <code>bottom</code> | <percentage> | <a href="/en-US/docs/CSS/length" title="CSS/length"><length></a></pre> + +<h3 id="Valores_(para_elementos_en_línea)">Valores (para elementos en línea)</h3> + +<p>La mayoría de los valores de alinean verticalmente el elemento de forma relativa al elemento padre:</p> + +<dl> + <dt><code>baseline</code></dt> + <dd>Alinea la línea base del elemento con la línea base del padre. La línea base de algunos <a href="/es/docs/CSS/Replaced_element" title="/es/docs/CSS/Replaced_element">elementos reemplazados</a>, como {{HTMLElement("textarea")}} no está especificado en la especificación HTML, que significa que su comportamiento puede cambiar en un navegador u otro.</dd> + <dt><code>sub</code></dt> + <dd>Alinea la línea base del elemento con la línea subscript del elemento padre.</dd> + <dt><code>super</code></dt> + <dd> Alinea la línea base del elemento con la línea superscript del elemento padre.</dd> + <dt><code>text-top</code></dt> + <dd>Aligns the top of the element with the top of the parent element's font.</dd> + <dt><code>text-bottom</code></dt> + <dd>Aligns the bottom of the element with the bottom of the parent element's font.</dd> + <dt><code>middle</code></dt> + <dd>Aligns the middle of the element with the middle of lowercase letters in the parent.</dd> + <dt><code><a href="/en-US/docs/CSS/length" title="CSS/length"><length></a></code></dt> + <dd>Aligns the baseline of the element at the given length above the baseline of its parent.</dd> + <dt><code><percentage></code></dt> + <dd>Like <length> values, with the percentage being a percent of the {{ Cssxref("line-height") }} property. + <p>For elements that do not have a baseline, the bottom margin edge is used instead.</p> + + <p>However, two values vertically align the element relative to the entire line rather than relative to its parent:</p> + </dd> + <dt><code>top</code></dt> + <dd>Align the top of the element and its descendants with the top of the entire line.</dd> + <dt><code>bottom</code></dt> + <dd>Align the bottom of the element and its descendants with the bottom of the entire line.</dd> +</dl> + +<p>Negative values are allowed.</p> + +<h3 id="Valores_(para_celdas_de_tablas)">Valores (para celdas de tablas)</h3> + +<dl> + <dt><code>baseline</code> (and <code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, <code><length></code>, and <code><percentage></code>)</dt> + <dd>Align the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.</dd> + <dt><code>top</code></dt> + <dd>Align the top padding edge of the cell with the top of the row.</dd> + <dt><code>middle</code></dt> + <dd>Center the padding box of the cell within the row.</dd> + <dt><code>bottom</code></dt> + <dd>Align the bottom padding edge of the cell with the bottom of the row.</dd> +</dl> + +<p>Negative values are allowed.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<pre class="brush: css">img { + vertical-align: bottom; +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defines <code>visibility</code> as animatable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Add the {{cssxref("<length>")}} value and allows it to be applied to element with a {{ cssxref("display") }} type of <code>table-cell</code>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#vertical-align', 'vertical-align') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de los navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop("1.0") }}</td> + <td>4.0</td> + <td>4.0</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>1.0</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{ Cssxref("line-height") }}, {{ Cssxref("text-align") }}, {{ Cssxref("margin") }}</li> + <li> + <p><a href="http://phrogz.net/css/vertical-align/index.html" title="http://phrogz.net/css/vertical-align/index.html">Understanding <code>vertical-align</code>, or "How (Not) To Vertically Center Content"</a></p> + </li> +</ul> diff --git a/files/es/web/css/visibility/index.html b/files/es/web/css/visibility/index.html new file mode 100644 index 0000000000..e60f6559f0 --- /dev/null +++ b/files/es/web/css/visibility/index.html @@ -0,0 +1,80 @@ +--- +title: visibility +slug: Web/CSS/visibility +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/visibility +--- +<p> </p> + +<p>{{ CSSRef() }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>La propiedad <code>visibility</code> se usa para dos efectos:</p> + +<ol> + <li>El valor <code>hidden</code> esconde un elemento, pero deja (vacío) el espacio donde debería aparecer.</li> + <li>El valor <code>collapse</code> esconde filas o columnas de una tabla.</li> +</ol> + +<ul> + <li>{{ Cssxref("initial", "Valor incial") }}: {{ Cssxref("visible") }}</li> + <li>Se aplica a: Todos los elementos.</li> + <li>{{ Cssxref("inheritance", "Valor heredado") }}: Sí</li> + <li>Porcentajes: N/A</li> + <li>Medio: {{ Xref_cssvisual() }}</li> + <li>{{ Cssxref("computed value", "Valor calculado") }}: Como se especifica.</li> +</ul> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval">visibility: visible | hidden | collapse | {{ Cssxref("inherit") }} +</pre> + +<h3 id="Valores" name="Valores">Valores</h3> + +<dl> + <dt><code>visible</code></dt> + <dd>El elemento se muestra normalmente.</dd> + <dt><code>hidden</code></dt> + <dd>El elemento está escondido, pero los demás elementos se colocan como si ése elemento estuviera presente. Esto funciona como si el elemento fuera absolutamente transparente. Los elementos, con la propiedad <code>visibility: visible</code>, descendientes de ése elemento serán visibles.</dd> + <dt><code>collapse</code></dt> + <dd>Para tablas, filas, columnas y grupos de tablas. Las filas o columnas se esconden y el espacio que normalmente ocupan, es ocupado (como si aplicáramos el código <code>{{ Cssxref("display") }}: none</code> a las filas/columnas de la tabla). Sin embargo, el tamaño de las columnas o filas restantes, es calculado como si las filas/columnas fusionadas estuvieran presentes. Esta propiedad se diseñó así, al fin de permitir la supresión rápida de filas/columnas de una tabla sin necesidad de calcular de nuevo los altos y los anchos de cada porción de tabla. (Para otros elementos, <code>collapse</code> funciona como <code>hidden</code>).</dd> +</dl> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="eval">p { visibility: hidden; } /* Los párrafos no serán visibles */ +p.showme { visibility: visible; } /* excepto los que tengan class = showme (clase= muéstrame) */ +tr.col { visibility: collapse; } /* las filas de la tabla con la clase<em>col</em> se fusionarán*/ +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>El soporte para <code>visibility: collapse</code> no se encuentra o está implementado parcialmente en algunos navegadores modernos. En muchos casos será tratado como <code>visibility: hidden</code> en elementos que no son filas / columnas de una tabla.</p> + +<p><code>visibility:collapse</code> puede cambiar el aspecto de una tabla si hay anidadas tablas dentro de celdas fusionadas, a no ser que se especifique explícitamente <code>visibility: visible</code> en la tabla anidada.</p> + +<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#visibility">CSS 2.1</a></li> +</ul> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p>{{ Cssxref("display") }}</p> + +<p> </p> + +<div class="noinclude"> +<p><span class="comment">Categorías</span></p> + +<p><span class="comment">Interwiki Languages</span></p> +</div> + +<p>{{ languages( { "fr": "fr/CSS/visibility", "pl": "pl/Dokumentacja_CSS/W\u0142asno\u015bci_szablonu", "en": "en/CSS/visibility" } ) }}</p> diff --git a/files/es/web/css/white-space/index.html b/files/es/web/css/white-space/index.html new file mode 100644 index 0000000000..ddfc135d7c --- /dev/null +++ b/files/es/web/css/white-space/index.html @@ -0,0 +1,421 @@ +--- +title: white-space +slug: Web/CSS/white-space +translation_of: Web/CSS/white-space +--- +<div>{{CSSRef}}</div> + +<p>La propiedad <strong><code>white-space</code></strong> de CSS, determina cómo se maneja el espacio en blanco dentro de un elemento. Para hacer que las palabras se dividan <em>en sí mismas</em>, usa {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}, o {{cssxref("hyphens")}} en su lugar.</p> + +<pre class="brush: css no-line-numbers">/* Valores con palabras clave */ +white-space: normal; +white-space: nowrap; +white-space: pre; +white-space: pre-wrap; +white-space: pre-line; + +/* Valores Globales */ +white-space: inherit; +white-space: initial; +white-space: unset; +</pre> + +<div class="hidden" id="white-space"> +<pre class="brush: html"><div class="grid"> +<div class="col"> + <div class="cell"> + <div class="label">normal</div> + <div> + <p class="wspNormal"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nulla pellentesque metus eget massa feugiat lobortis. + </p> + </div> + </div> + <div class="cell"> + <div class="label">pre-wrap</div> + <div> + <p class="wspPreWrap"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nulla pellentesque metus eget massa feugiat lobortis. + </p> + </div> + </div> + <div class="cell"> + <div class="label">pre-line</div> + <div> + <p class="wspPreLine"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nulla pellentesque metus eget massa feugiat lobortis. + </p> + </div> + </div> + <div class="cell"> + <div class="label">nowrap</div> + <div> + <p class="wspNowrap"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nulla pellentesque metus eget massa feugiat lobortis. + </p> + </div> + </div> + <div class="cell"> + <div class="label">pre</div> + <div> + <p class="wspPre"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nulla pellentesque metus eget massa feugiat lobortis. + </p> + </div> + </div> + <div class="note"> + Los ejemplos anteriores aplican al siguiente HTML (square represents white spaces): + <pre>☐☐&lt;p&gt; +☐☐☐☐Lorem ipsum dolor sit amet, consectetur adipiscing elit. +☐☐☐☐Nulla pellentesque metus eget massa feugiat lobortis. +☐☐&lt;/p&gt;</pre> + </div> +</div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; +} + +pre { margin-bottom: 0; } + +.grid { + width: 100%; + height: 100%; + display: flex; + background: #EEE; + font: 1em monospace; +} + +.row { + display: flex; + flex: 1 auto; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} + +.col { + display: flex; + flex: 1 auto; + flex-direction: column; +} + +.cell { + box-sizing: border-box; + margin: .5em; + padding: 0; + background-color: #FFF; + overflow: hidden; + text-align: center; +} + +.note { + background: #fff3d4; + padding: 1em; + margin: .5em; + font: .8em sans-serif; + text-align: left; + flex: none; +} + +p { + width: 50%; + font: .8em sans-serif; + max-width: 100%; + box-sizing: border-box; + overflow: hidden; + resize: horizontal; + background: #E4F0F5; + padding: .5em; + margin: .5em auto 0; + text-align: left; +} + +.wspNormal { white-space: normal; } +.wspNowrap { white-space: nowrap; } +.wspPre { white-space: pre; } +.wspPreWrap { white-space: pre-wrap; } +.wspPreLine { white-space: pre-line; }</pre> +</div> + +<p>{{EmbedLiveSample("white-space", "100%", 530, "", "", "example-outcome-frame")}}</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintáxis">Sintáxis</h2> + +<p>La propiedad <code>white-space</code> se especifica con una de las palabras clave de la siguiente lista de valores.</p> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Secuencias de espacios en blanco son reducidas a un solo espacio. Saltos de linea en el origen son tratados como un espacio en blanco. Agregar saltos de linea necesarios para llenar el contenedor.</dd> + <dt><code>nowrap</code></dt> + <dd>Reduce espacios en blanco igual que el modo <code>normal</code>, pero suprime saltos de linea del origen.</dd> + <dt><code>pre</code></dt> + <dd>Secuencias de espacios son preservados. Lineas son solo rotas en caracteres de saltos de linea encontrado en el origen y en elementos html {{HTMLElement("br")}}.</dd> + <dt><code>pre-wrap</code></dt> + <dd>Secuencias de espacio son preservadas. Lineas son rotas en caracteres de saltos de linea, en elementos html {{HTMLElement("br")}}, y agrega saltos necesarios para rellenar los cuadros de linea</dd> + <dt><code>pre-line</code></dt> + <dd>Secuencias de espacios en blanco son reducidas. Lineas son rotas en caracteres de salto de linea, en elementos html {{HTMLElement("br")}}, y los necesarios para rellenar los cuadros de linea</dd> +</dl> + +<p>La siguiente tabla resume el comportamiento de los diversos valores de <code>white-space</code>:</p> + +<table class="standard-table"> + <thead> + <tr> + <th> </th> + <th>Nuevas líneas</th> + <th>Espacios y tabulaciones</th> + <th>Ajuste de texto</th> + </tr> + </thead> + <tbody> + <tr> + <th><code>normal</code></th> + <td>Contraer</td> + <td>Contraer</td> + <td>Ajustar</td> + </tr> + <tr> + <th><code>nowrap</code></th> + <td>Contraer</td> + <td>Contraer</td> + <td>No ajustar</td> + </tr> + <tr> + <th><code>pre</code></th> + <td>Preservar</td> + <td>Preservar</td> + <td>No ajustar</td> + </tr> + <tr> + <th><code>pre-wrap</code></th> + <td>Preservar</td> + <td>Preservar</td> + <td>Ajustar</td> + </tr> + <tr> + <th><code>pre-line</code></th> + <td>Preservar</td> + <td>Contraer</td> + <td>Ajustar</td> + </tr> + </tbody> +</table> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_básico">Ejemplo básico</h3> + +<pre class="brush: css">code { + white-space: pre; +}</pre> + +<h3 id="La_línea_sedivide_dentro_de_los_elementos_HTMLElement(pre)">La línea sedivide dentro de los elementos {{HTMLElement("pre")}}</h3> + +<pre class="brush: css">pre { + word-wrap: break-word; /* IE 5.5-7 */ + white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */ + white-space: pre-wrap; /* Modern browsers */ +}</pre> + +<h2 id="See_in_action" name="See_in_action">See it in action</h2> + +<div class="hidden"> +<pre class="brush: html"> <div id="css-code" class="box"> + p { white-space: <select> + <option>normal</option> + <option>nowrap</option> + <option>pre</option> + <option>pre-wrap</option> + <option>pre-line</option> + </select> } + </div> + <div id="results" class="box"> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> + </div> +</pre> + +<pre class="brush: css">.box { + width: 300px; + padding: 16px; + border-radius: 10px; +} + +#css-code { + background-color: rgb(220,220,220); + font-size: 16px; +} + +#results { + background-color: rgb(230,230,230); + overflow-x: scroll; + height: 400px; + white-space: normal; + font-size: 14px; +}</pre> + +<pre class="brush: js">var select = document.querySelector("#css-code select"); +var results = document.querySelector("#results p"); +select.addEventListener("change", function(e) { + results.setAttribute("style", "white-space: "+e.target.value); +})</pre> +</div> + +<h3 id="Fuente">Fuente</h3> + +<pre> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> +</pre> + +<h3 id="CSS_Resultado">CSS + Resultado</h3> + +<p>{{ EmbedLiveSample('See_in_action', '80%', '500px') }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td>Precisely defines the breaking algorithms.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definition inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico (<code>normal</code> y <code>nowrap</code>)</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>5.5<sup>[1]</sup></td> + <td>4.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>pre</code></td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + <td>6.0</td> + <td>4.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>pre-wrap</code></td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<br> + {{CompatGeckoDesktop("1.9")}}</td> + <td>8.0</td> + <td>8.0</td> + <td>3.0 (522)</td> + </tr> + <tr> + <td><code>pre-line</code></td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>8.0</td> + <td>9.5</td> + <td>3.0 (522)</td> + </tr> + <tr> + <td>Soporte en <code><textarea></code></td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("36")}}</td> + <td>5.5</td> + <td>4.0</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer 5.5+ supports {{Cssxref("word-wrap")}}<code>: break-word;</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Propiedades que define como rompen las palabras d<em>entro de ellas mismas</em>: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}, {{cssxref("hyphens")}}</li> +</ul> diff --git a/files/es/web/css/widows/index.html b/files/es/web/css/widows/index.html new file mode 100644 index 0000000000..bcc8bba968 --- /dev/null +++ b/files/es/web/css/widows/index.html @@ -0,0 +1,113 @@ +--- +title: widows +slug: Web/CSS/widows +translation_of: Web/CSS/widows +--- +<div>{{CSSRef}}</div> + +<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>widows</code></strong> especifica el número minimo de lineas en un contenedor de bloques que se deben mostrar en la parte superior de la <a href="/en-US/docs/Web/CSS/Paged_Media">pagina</a>, region o <a href="/en-US/docs/Web/CSS/CSS_Columns">columna</a>. Esta propiedad se usa normalmente para controlar como se producen las pausas. </p> + +<pre class="brush:css no-line-numbers">/* valores <enteros> */ +widows: 2; +widows: 3; + +/* valores globales */ +widows: inherit; +widows: initial; +widows: unset; +</pre> + +<div class="note"> +<p>En la tipografia, un <em>widow</em> is la ultima linea de un paragrafo que aparece solo en la parte superior de la pagina.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>The minimum number of lines that can stay by themselves at the top of a new fragment after a fragmentation break. The value must be positive.</dd> +</dl> + +<h3 id="Sintaxis_Formal">Sintaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p>Este es el primer paragrafo que contiene algun texto.</p> + <p>Este es el segundo paragrafo que contiene algún texto mayor que el primero. Es usado para desmostrar como trabaja widows.</p> + <p>Este es el tercer paragrafo. Es un poco mas extenso en texto que el primero.</p> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[4]">div { + background-color: #8cffa0; + columns: 3; + widows: 2; +} + +p { + background-color: #8ca0ff; +} + +p:first-child { + margin-top: 0; +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample("Example", 400, 160)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'widows')}}</td> + <td>{{Spec2('CSS3 Fragmentation')}}</td> + <td>Extiende <code>widows</code> para que se apliqye a cualquier tipo de fragmento, incluyendo paginas, regiones o columnas. </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Multicol', '#filling-columns', 'widows')}}</td> + <td>{{Spec2('CSS3 Multicol')}}</td> + <td>Recomendaciones a considerar de <code>widows</code> en relacion con las columnas. </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'widows')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definición Inicial. </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<div> +<div class="hidden">La tabla de compatibilidad en esta pagina esta generada desde una estrutura de datos. Si usted puede contribuir con los datos, por favor verifique aqui <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envie una solicitud de extracción. </div> + +<p>{{Compat("css.properties.widows")}}</p> +</div> + +<h2 id="Ver_tambien">Ver tambien</h2> + +<ul> + <li>{{cssxref("orphans")}}</li> + <li><a href="/en-US/docs/Web/CSS/Paged_Media">Medio paginados</a></li> +</ul> diff --git a/files/es/web/css/width/index.html b/files/es/web/css/width/index.html new file mode 100644 index 0000000000..3e8317e17d --- /dev/null +++ b/files/es/web/css/width/index.html @@ -0,0 +1,404 @@ +--- +title: width +slug: Web/CSS/width +tags: + - Propiedad CSS + - Referencia +translation_of: Web/CSS/width +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>width</code></strong> especifica la anchura del area de contenido de un elemento. El <a href="/es/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">área de contenido</a> está <em>dentro</em> del padding, borde, y margen del elemento.</p> + +<p>Las propiedades {{cssxref("min-width")}} y {{cssxref("max-width")}} sobreescriben el valor de {{cssxref("width")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* Valores <length> */ +width: 300px; +width: 25em; + +/* Valores <percentage> */ +width: 75%; + +/* Valores clave */ +width: 25em border-box; +width: 75% content-box; +width: max-content; +width: min-content; +width: available; +width: fit-content; +width: auto; + +/* Valores globales */ +width: inherit; +width: initial; +width: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><length></code></dt> + <dd>Ver {{cssxref("<length>")}} para unidades disponibles.</dd> + <dt><code><percentage></code></dt> + <dd>Especificado con el tipo {{cssxref("<percentage>")}} como porcentaje de la anchura del bloque contenedor. Si la anchura del bloque contenedor depende de la anchura del elemento, la presentación resultante es indefinida.</dd> + <dt><code>border-box </code>{{experimental_inline}}</dt> + <dd>Si está presente, el valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} precedente es aplicado a los límites del borde del elemento.</dd> + <dt><code>content-box</code> {{experimental_inline}}</dt> + <dd>Si está presente, el valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} precedente será aplicado a los límites de contenido del elemento.</dd> + <dt><code>auto</code></dt> + <dd>El navegador calculará y seleccionará la anchura para el elemento especificado.</dd> + <dt>fill {{experimental_inline}}</dt> + <dd>Use el tamaño <code>fill-available</code> para elementos inline o block, según sea más apropiado para el modo de escritura.</dd> + <dt><code>max-content</code> {{experimental_inline}}</dt> + <dd>La anchura preferida intrínseca.</dd> + <dt><code>min-content</code> {{experimental_inline}}</dt> + <dd>La anchura mínima intrínseca.</dd> + <dt><code>available</code> {{experimental_inline}}</dt> + <dd>La anchura del bloque contenedor menos su margen horizontal, borde y padding.</dd> + <dt><code>fit-content</code> {{experimental_inline}}</dt> + <dd>El mayor entre: + <ul> + <li>la anchura mínima intrínseca</li> + <li>la menor entre la anchura prefereida intrínseca y la anchura disponible</li> + </ul> + </dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Anchura_predeterminada">Anchura predeterminada</h3> + +<pre class="brush:css">p.goldie { + background: gold; +}</pre> + +<pre class="brush:html"><p class="goldie">The Mozilla community produces a lot of great software.</p></pre> + +<p>{{EmbedLiveSample('Default_width', '500px', '64px')}}</p> + +<h3 id="Píxeles_y_ems">Píxeles y ems</h3> + +<pre class="brush: css">.px_length { + width: 200px; + background-color: red; + color: white; + border: 1px solid black; +} + +.em_length { + width: 20em; + background-color: white; + color: red; + border: 1px solid black; +} +</pre> + +<pre class="brush: html"><div class="px_length">Width measured in px</div> +<div class="em_length">Width measured in em</div></pre> + +<p>{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}</p> + +<h3 id="Porcentaje">Porcentaje</h3> + +<pre class="brush: css">.percent { + width: 20%; + background-color: silver; + border: 1px solid red; +}</pre> + +<pre class="brush: html"><div class="percent">Width in percentage</div></pre> + +<p>{{EmbedLiveSample('Percentage', '500px', '64px')}}</p> + +<h3 id="max-content">max-content</h3> + +<pre class="brush:css;">p.maxgreen { + background: lightgreen; + width: intrinsic; /* Safari/WebKit uses a non-standard name */ + width: -moz-max-content; /* Firefox/Gecko */ + width: -webkit-max-content; /* Chrome */ +}</pre> + +<pre class="brush:html"><p class="maxgreen">The Mozilla community produces a lot of great software.</p></pre> + +<p>{{EmbedLiveSample('max-content', '500px', '64px')}}</p> + +<h3 id="min-content">min-content</h3> + +<pre class="brush:css">p.minblue { + background: lightblue; + width: -moz-min-content; /* Firefox */ + width: -webkit-min-content; /* Chrome */ +}</pre> + +<pre class="brush:html"><p class="minblue">The Mozilla community produces a lot of great software.</p></pre> + +<p>{{EmbedLiveSample('min-content', '500px', '155px')}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'width')}}</td> + <td>{{Spec2('CSS3 Box')}}</td> + <td>Añade las palabras clave <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Incluye <code>width</code> como propiedad que puede ser animada.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Especifica a qué elementos es aplicable.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#width', 'width')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td> + <td>{{Spec2('CSS3 Sizing')}}</td> + <td>Añade nuevas palabras clave de tamaño para <code>width</code> y <code>height</code></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td>Capacidad de ser animada{{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>max-content</code>{{experimental_inline}}</td> + <td>{{CompatChrome(22.0)}} {{property_prefix("-webkit")}}<br> + {{CompatChrome(46.0)}} [1]</td> + <td>{{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>15 {{property_prefix("-webkit")}}</td> + <td>2.0 (421) (<code>intrinsic</code> value)<br> + 6.1 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>min-content</code>{{experimental_inline}}</td> + <td> + <p>{{CompatChrome(22.0)}} [4] {{property_prefix("-webkit")}}<br> + {{CompatChrome(46.0)}} [1]</p> + </td> + <td>{{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>15 {{property_prefix("-webkit")}}</td> + <td>2.0 (421) (<code>min-intrinsic</code> value)<br> + 6.1 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>available</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td><code>fill-available</code>{{experimental_inline}}</td> + <td>{{CompatChrome(22.0)}} {{property_prefix("-webkit")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>6.1 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>fit-content</code>{{experimental_inline}}</td> + <td>{{CompatChrome(22.0)}} [4] {{property_prefix("-webkit")}}<br> + {{CompatChrome(46.0)}} [1]</td> + <td>{{CompatGeckoDesktop("1.9")}} {{property_prefix("-moz")}}</td> + <td>{{CompatUnknown}}</td> + <td>15 {{property_prefix("-webkit")}}</td> + <td>6.1 {{property_prefix("-webkit")}}<sup>[2]</sup></td> + </tr> + <tr> + <td><code>border-box</code> y <code>content-box</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>fill</code></td> + <td>{{CompatChrome(46.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Capacidad de ser animada{{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>max-content</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + </tr> + <tr> + <td><code>min-content</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + </tr> + <tr> + <td><code>available</code>{{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>fill-available</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + </tr> + <tr> + <td><code>fit-content</code>{{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(46.0)}} [1]</td> + </tr> + <tr> + <td><code>border-box</code> y <code>content-box</code>{{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>fill</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] WebKit implementa una variante a este valor con el nombre <code>fill-available</code> a partir de 2013.</p> + +<p>[2] Las versiones anteriores de WebKit implementaban una versión anterior de este valor con nombre <code>intrinsic</code>, pero implementan además <code>fit-content</code> desde la versión 6.1.</p> + +<p>[3] Sin prefijo.</p> + +<p>[4] Soporte a las antiguas palabras clave <code>intrinsic</code> y <code>min-intrinsic</code> de Webkit, pero removido en <a href="https://www.chromestatus.com/feature/5758434351775744">Chrome 48</a>.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">box model</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li> +</ul> diff --git a/files/es/web/css/writing-mode/index.html b/files/es/web/css/writing-mode/index.html new file mode 100644 index 0000000000..73c11b1b85 --- /dev/null +++ b/files/es/web/css/writing-mode/index.html @@ -0,0 +1,247 @@ +--- +title: writing-mode +slug: Web/CSS/writing-mode +tags: + - CSS + - Disposición + - Propiedad CSS + - Referencia +translation_of: Web/CSS/writing-mode +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <strong><code>writing-mode</code></strong> define si los renglones de texto se disponen horizontal o verticalmente y la dirección en que avanzan los bloques.</p> + +<p>La propiedad especifica la <em>dirección de flujo de bloques</em>, que es la dirección en que se apilan los contenedores a nivel de bloque y la dirección en que el contenido a nivel de línea fluye dentro de un contenedor de bloque. Por ende, la propiedad <code>writing-mode</code> también determina la ordenación del contenido a nivel de bloque.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:css">/* Valores de la palabra clave */ +writing-mode: horizontal-tb; +writing-mode: vertical-rl; +writing-mode: vertical-lr; + +/* Valores globales */ +writing-mode: inherit; +writing-mode: initial; +writing-mode: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>horizontal-tb</code></dt> + <dd>El contenido fluye horizontalmente de izquierda a derecha y verticalmente de arriba hacia abajo. El próximo renglón horizontal se posiciona debajo del renglón anterior.</dd> + <dt><code>vertical-rl</code></dt> + <dd>El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de derecha a izquierda. El próximo renglón vertical se posiciona a la izquierda del renglón anterior.</dd> + <dt><code>vertical-lr</code></dt> + <dd>El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de izquierda a derecha. El próximo renglón vertical se posiciona a la derecha del renglón anterior.</dd> + <dt><code>sideways-rl</code>{{experimental_inline}}</dt> + <dd>El contenido fluye verticalmente de arriba hacia abajo y todos los glifos, incluidos aquellos de los sistemas de escritura verticales, se colocan de lado hacia la derecha.</dd> +</dl> + +<dl> + <dt><code>sideways-lr</code>{{experimental_inline}}</dt> + <dd>El contenido fluye verticalmente de arriba hacia abajo y todos los glifos, incluidos aquellos de los sistemas de escritura verticales, se colocan de lado hacia la izquierda.</dd> + <dt><code>lr</code> {{deprecated_inline}}</dt> + <dd>Desaprobado, excepto en los documentos SVG1. En CSS utilice <code>horizontal-tb</code>.</dd> + <dt><code>lr-tb</code> {{deprecated_inline}}</dt> + <dd>Desaprobado, excepto en los documentos SVG1. En CSS utilice <code>horizontal-tb</code>.</dd> + <dt><code>rl</code> {{deprecated_inline}}</dt> + <dd>Desaprobado, excepto en los documentos SVG1. En CSS utilice <code>horizontal-tb</code>.</dd> + <dt><code>tb</code> {{deprecated_inline}}</dt> + <dd>Desaprobado, excepto en los documentos SVG1. En CSS utilice <code>vertical-rl</code>.</dd> + <dt><code>tb-rl</code> {{deprecated_inline}}</dt> + <dd>Desaprobado, excepto en los documentos SVG1. En CSS utilice <code>vertical-rl</code>.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<div class="hidden"> +<pre class="brush: html"><table> + <tr> + <th>value</th> + <th>Sistema de escritura vertical</th> + <th>Sistema de escritura horizontal</th> + <th>Escritura mixta</th> + </tr> + <tr> + <td>horizontal-tb</td> + <td class="exampleText1">我家没有电脑。</td> + <td class="exampleText1">Texto de ejemplo</td> + <td class="exampleText1">1994年に至っては</td> + </tr> + <tr> + <td>vertical-lr</td> + <td class="exampleText2">我家没有电脑。</td> + <td class="exampleText2">Texto de ejemplo</td> + <td class="exampleText2">1994年に至っては</td> + </tr> + <tr> + <td>vertical-rl</td> + <td class="exampleText3">我家没有电脑。</td> + <td class="exampleText3">Texto de ejemplo</td> + <td class="exampleText3">1994年に至っては</td> + </tr> + <tr> + <td>sideways-lr</td> + <td class="exampleText4">我家没有电脑。</td> + <td class="exampleText4">Texto de ejemplo</td> + <td class="exampleText4">1994年に至っては</td> + </tr> + <tr> + <td>sideways-rl</td> + <td class="exampleText5">我家没有电脑。</td> + <td class="exampleText5">Texto de ejemplo</td> + <td class="exampleText5">1994年に至っては</td> + </tr> +</pre> + +<pre class="brush:css;">table { border-collapse:collapse; } +td, th {border: 1px black solid; padding: 3px; } +th {background-color: lightgray; } +.exampleText1 { width:75px; writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; } +.exampleText2 { height:75px; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; } +.exampleText3 { height:75px; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; } +.exampleText4 { height:75px; writing-mode: sideways-lr; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; } +.exampleText5 { height:75px; writing-mode: sideways-rl; -webkit-writing-mode: sideways-rl; -ms-writing-mode: sideways-rl; }</pre> +</div> + +<p>{{EmbedLiveSample("Example", 400, 430)}}</p> + +<h3 id="Resultado_efectivo">Resultado efectivo</h3> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12201/writing-mode-actual-result.png" style="height: 430px; width: 351px;"></p> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}</td> + <td>{{Spec2("CSS3 Writing Modes")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Compatibilidad básica</td> + <td>8{{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoDesktop(41)}}<sup>[1][3]</sup></td> + <td>9.0 {{property_prefix("-ms")}}<sup>[2]</sup></td> + <td>15{{property_prefix("-webkit")}}</td> + <td>5.1{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>Valores de SVG 1.1 <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>tb</code>, <code>tb-rl</code></td> + <td>{{CompatChrome(48.0)}} (sin prefijos)</td> + <td>{{CompatGeckoDesktop(43)}}</td> + <td>9.0 {{property_prefix("-ms")}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sideways-rl,sideways-lr</code></td> + <td>{{CompatNo}} (a partir de 48.0)</td> + <td>{{CompatGeckoDesktop(43)}}</td> + <td>{{CompatNo}} (a partir de 25)</td> + <td>{{CompatNo}} (a partir de 35.0)</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Android</th> + <th>Webview de Android</th> + <th>Chrome para Android</th> + <th>Firefox móvil (Gecko)</th> + <th>IE móvil</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Compatibilidad básica</td> + <td>3{{property_prefix("-webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>47{{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoMobile(41)}} <sup>[1][3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>5.1 {{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td>Valores de SVG 1.1 <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>tb</code>, <code>tb-rl</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(48.0)}} (sin prefijos)</td> + <td>{{CompatChrome(48.0)}} (sin prefijos)</td> + <td>{{CompatGeckoMobile(43)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>sideways-rl,sideways-lr</code></td> + <td>{{CompatNo}}<sup>[4]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Desde Gecko 36 hubo una implementación experimental disponible, regida por la preferencia <code>layout.css.vertical-text.enabled</code>, cuyo valor era <code>false</code> hasta Firefox 38. A partir de Firefox 39 y Firefox 40, la preferencia se activó (<code>true</code>) solo en las ediciones Nightly y DevTools. Observe que no todos los <em>widgets</em> de CSS (p. ej., tablas) la acatan, por el momento.</p> + +<p>[2] La implementación de Internet Explorer diverge de la especificación. Consulte el <a href="https://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx">artículo relacionado en el Centro de desarrollo de Internet Explorer</a>.</p> + +<p>[3] Solo a partir de Gecko 42 se admiten los sistemas de escritura bidireccionales y RTL.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>Atributo de SVG <code><a href="/en-US/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code></li> + <li>{{Cssxref("direction")}}</li> + <li>{{Cssxref("unicode-bidi")}}</li> + <li>{{Cssxref("text-orientation")}}</li> + <li>{{Cssxref("text-combine-upright")}}</li> +</ul> diff --git a/files/es/web/css/z-index/index.html b/files/es/web/css/z-index/index.html new file mode 100644 index 0000000000..575921944a --- /dev/null +++ b/files/es/web/css/z-index/index.html @@ -0,0 +1,127 @@ +--- +title: z-index +slug: Web/CSS/z-index +translation_of: Web/CSS/z-index +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS <code>z-index</code> indica el orden de un elemento <a href="/es/docs/Web/CSS/position">posicionado</a> y sus descendientes. Cuando varios elementos se superponen, los elementos con mayor valor z-index cubren aquellos con menor valor.</p> + +<p>Para una caja posicionada (es decir, una con cualquier <code>position</code> aparte de <code>static</code>), la propiedad <code>z-index</code> especifica:</p> + +<ol> + <li>El nivel de apilamiento en el actual contexto de apilado.</li> + <li>Si la caja establece un contexto de apilamiento local.</li> +</ol> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">z-index: auto | <entero> | inherit +</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt>auto</dt> + <dd>La caja no establece un nuevo contexto de apilamiento. El nivel de apilamiento de la caja generada es el mismo que el de la caja padre.</dd> + <dt><integer></dt> + <dd>Este entero es el nivel de apilamiento de la caja generada en el actual contexto de apilamiento. La caja además establece un contexto de apilamiento en el que el nivel de apilamiento es 0. Esto significa que los z-index de los elementos descendientes no son comparados con los elementos que están fuera de este elemento.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<div style="border: dashed; position: relative; height: 8em; margin-bottom: 1em; margin-top: 2em;">position:relative; z-index:1; <span style="background: gold; left: 60px; position: absolute; top: 3em;">position:absolute; z-index:2; left:60px; top:3em;</span> <span style="background: lightgreen; height: 7em; left: 20em; opacity: 0.9; position: absolute; top: -25px;">position:absolute; z-index:3;<br> +left:20em; top:-25px; opacity:0.9</span></div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Define <code>visibility</code> como animable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Especificación inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>4.0</td> + <td>1.0</td> + </tr> + <tr> + <td>Valores negativos (CSS2.1, no soportado en la antigua especificación CSS2)</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>4.0</td> + <td>4.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Propiedad CSS {{Cssxref("position")}}</li> + <li><a href="/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index">Entendiendo la propiedad CSS z-index</a></li> +</ul> diff --git a/files/es/web/css/zoom/index.html b/files/es/web/css/zoom/index.html new file mode 100644 index 0000000000..f58f35046c --- /dev/null +++ b/files/es/web/css/zoom/index.html @@ -0,0 +1,141 @@ +--- +title: zoom +slug: Web/CSS/zoom +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/zoom +--- +<p>{{ CSSRef() }}</p> + +<p>{{ Non-standard_header() }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad CSS no estándar <code>zoom</code> se puede usar para controlar el aumento de escala de un lemento. En la medida de lo posible deben usarse <a href="/es/docs/Web/CSS/CSS_Transforms">Transformaciones CSS</a> en vez de esta propiedad..</p> + +<table> + <tbody> + <tr> + <th>Valor inicial</th> + <td><code>normal</code></td> + </tr> + <tr> + <th>Se aplica a:</th> + <td>all elements</td> + </tr> + <tr> + <th>Heradado</th> + <td>no</td> + </tr> + <tr> + <th>Medio</th> + <td>visual</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Dibuja el elemento con su tamaño normal.</dd> + <dt><code>reset</code> {{non-standard_inline}}</dt> + <dd>Si el usuario aplica un cambio de escala no basado en presionar (por ejemplo al presionar Ctrl+ o Ctrl-) al documento no cambia la escala del elemento. Sólo soportado por WebKit (y posiblemente Blink).</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Factor de Zoom. <code>100%</code> es a tamaño <code>normal</code>. Valores superiores a 100% aumentan y valores inferiores al 100% encogen el elemento.</dd> + <dt>{{cssxref("<number>")}}</dt> + <dd>Factor de Zoom. Equivalente al porcentaje correspondiente (<code>1.0</code> = <code>100%</code> = <code>normal</code>). Valores mayores de <code>1.0</code> aumentarán el tamaño. Valores menores de <code>1.0</code> encogerán.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">normal | reset | <a href="/en-US/docs/Web/CSS/number"><number></a> | <a href="/en-US/docs/Web/CSS/percentage"><percentage></a> +</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<p>Esta propiedad no es estándar y tiene su origen en Internet Explorer. Microsoft tiene una <a href="https://msdn.microsoft.com/es/library/ms531189(v=vs.85).aspx"> descripción en MSDN</a>. Apple tiene <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15">una descripción en la Referencia CSS de Safari</a>. Rossen Atanassov, de Microsoft, tiene <a href="http://cdn.rawgit.com/atanassov/css-zoom/master/Overview.html">una propuesta de borrador no oficial de la especificación en GitHub</a></p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con los distintos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }} [1]</td> + <td>5.5</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>4.0</td> + </tr> + <tr> + <td>valor de reseteo</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }} [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Valor de reseteo</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]: {{bug(390936, 'summary')}}</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li><a href="https://css-tricks.com/almanac/properties/z/zoom/"><code>zoom</code> Post en el Almanaque de CSS-Tricks</a></li> +</ul> |