diff options
Diffstat (limited to 'files/ru/web/css/blend-mode/index.html')
| -rw-r--r-- | files/ru/web/css/blend-mode/index.html | 48 |
1 files changed, 16 insertions, 32 deletions
diff --git a/files/ru/web/css/blend-mode/index.html b/files/ru/web/css/blend-mode/index.html index 382af5dae0..40125081d4 100644 --- a/files/ru/web/css/blend-mode/index.html +++ b/files/ru/web/css/blend-mode/index.html @@ -24,9 +24,8 @@ translation_of: Web/CSS/blend-mode The effect is similar to two opaque pieces of paper overlapping.</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'), @@ -44,9 +43,8 @@ translation_of: Web/CSS/blend-mode The effect is similar to two images printed on transparent film overlapping.</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'), @@ -64,9 +62,8 @@ translation_of: Web/CSS/blend-mode The effect is similar to two images shone onto a projection screen.</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'), @@ -81,9 +78,8 @@ translation_of: Web/CSS/blend-mode <dd>The final color is the result of <code>multiply</code> if the bottom color is darker, or <code>screen</code> if the bottom color is lighter.<br> This blend mode is equivalent to <code>hard-light</code> but with the layers swapped. <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'), @@ -99,9 +95,8 @@ translation_of: Web/CSS/blend-mode <p>The final color is a color composed of the darkest values per color channel.</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'), @@ -117,9 +112,8 @@ translation_of: Web/CSS/blend-mode <p>The final color is a color composed of the lightest values per color channel.</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'), @@ -137,9 +131,8 @@ translation_of: Web/CSS/blend-mode This blend mode is similar to screen, but the foreground need only be as light as the inverse of the backdrop to reach a fully lit color.</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'), @@ -157,9 +150,8 @@ translation_of: Web/CSS/blend-mode This blend mode is similar to multiply, but the foreground need only be as dark as the inverse of the backdrop to make the final image black.</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'), @@ -177,9 +169,8 @@ translation_of: Web/CSS/blend-mode The effect is similar to shining a <em>harsh</em> spotlight on the backdrop.</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'), @@ -197,9 +188,8 @@ translation_of: Web/CSS/blend-mode The effect is similar to shining a <em>diffused</em> spotlight on the backdrop<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'), @@ -216,9 +206,8 @@ translation_of: Web/CSS/blend-mode A black layer has no effect, while a white layer inverts the other layer's color.</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'), @@ -235,9 +224,8 @@ translation_of: Web/CSS/blend-mode As with <code>difference</code>, a black layer has no effect, while a white layer inverts the other layer's color.</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'), @@ -253,9 +241,8 @@ translation_of: Web/CSS/blend-mode <p>The final color has the <em>hue</em> of the top color, while using the <em>saturation</em> and <em>luminosity</em> of the bottom color.</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'), @@ -272,9 +259,8 @@ translation_of: Web/CSS/blend-mode A pure gray backdrop, having no saturation, will have no effect.</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'), @@ -291,9 +277,8 @@ translation_of: Web/CSS/blend-mode The effect preserves gray levels and can be used to colorize the foreground.</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'), @@ -310,9 +295,8 @@ translation_of: Web/CSS/blend-mode This blend mode is equivalent to color, but with the layers swapped.</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'), |