diff options
Diffstat (limited to 'files/es/web/css/blend-mode/index.html')
| -rw-r--r-- | files/es/web/css/blend-mode/index.html | 48 |
1 files changed, 16 insertions, 32 deletions
diff --git a/files/es/web/css/blend-mode/index.html b/files/es/web/css/blend-mode/index.html index e2a0e41f18..850630faa9 100644 --- a/files/es/web/css/blend-mode/index.html +++ b/files/es/web/css/blend-mode/index.html @@ -30,9 +30,8 @@ translation_of: Web/CSS/blend-mode 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 { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -50,9 +49,8 @@ translation_of: Web/CSS/blend-mode 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 { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -70,9 +68,8 @@ translation_of: Web/CSS/blend-mode 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 { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -87,9 +84,8 @@ translation_of: Web/CSS/blend-mode <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 { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -105,9 +101,8 @@ translation_of: Web/CSS/blend-mode <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 { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -123,9 +118,8 @@ translation_of: Web/CSS/blend-mode <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 { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -143,9 +137,8 @@ translation_of: Web/CSS/blend-mode 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 { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -163,9 +156,8 @@ translation_of: Web/CSS/blend-mode 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 { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -183,9 +175,8 @@ translation_of: Web/CSS/blend-mode 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 { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -203,9 +194,8 @@ translation_of: Web/CSS/blend-mode 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 { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -222,9 +212,8 @@ translation_of: Web/CSS/blend-mode 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 { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -241,9 +230,8 @@ translation_of: Web/CSS/blend-mode 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 { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -259,9 +247,8 @@ translation_of: Web/CSS/blend-mode <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 { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -278,9 +265,8 @@ translation_of: Web/CSS/blend-mode 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 { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -297,9 +283,8 @@ translation_of: Web/CSS/blend-mode 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 { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -316,9 +301,8 @@ translation_of: Web/CSS/blend-mode 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 { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), |