initial commit

1 files changed, 108 insertions, 0 deletions

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>