initial commit

1 files changed, 411 insertions, 0 deletions

diff --git a/files/ru/web/css/blend-mode/index.html b/files/ru/web/css/blend-mode/index.html
new file mode 100644
index 0000000000..382af5dae0
--- /dev/null
+++ b/files/ru/web/css/blend-mode/index.html
@@ -0,0 +1,411 @@
+---
+title: <blend-mode>
+slug: Web/CSS/blend-mode
+translation_of: Web/CSS/blend-mode
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Описание" style="">Описание</h2>
+
+<p>The <strong><code>&lt;blend-mode&gt;</code></strong> type is a collection of keywords describing blend modes.</p>
+
+<p>A blend mode is a method of calculating the final color value of a pixel when layers overlap. Each blend mode takes the color value of the foreground and the backdrop (top color and bottom color respectively), perfoms its calculation and returns a color value. The final, visible layer is the result of performing the blend mode calculation on every overlapping pixel among the blended layers.</p>
+
+<h2 id="Синтаксис" style="">Синтаксис</h2>
+
+<pre class="syntaxbox">Формальный синтаксис: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity</pre>
+
+<h3 id="Возможные_значения" style="">Возможные значения</h3>
+
+<dl style="">
+ <dt><code>normal</code></dt>
+ <dd>
+ <p>The final color is the top color, whatever the bottom color may be.<br>
+  The effect is similar to two opaque pieces of paper overlapping.</p>
+
+ <div id="normal">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</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>The final color is the result of multiplying the top and bottom colors.<br>
+  A black layer leads to a black final layer, and a white layer leads to no change.<br>
+  The effect is similar to two images printed on transparent film overlapping.</p>
+
+ <div id="multiply">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</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>The final color is the result of inverting the colors, multiplying them and inverting that color value.<br>
+  A black layer leads to no change, and a white layer leads to a white final layer.<br>
+  The effect is similar to two images shone onto a projection screen.</p>
+
+ <div id="screen">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</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>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;">&lt;div id="div"&gt;&lt;/div&gt;</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>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;">&lt;div id="div"&gt;&lt;/div&gt;</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>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;">&lt;div id="div"&gt;&lt;/div&gt;</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>The final color is the result of dividing the bottom color by the inverse of the top color.<br>
+  A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color.<br>
+  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;">&lt;div id="div"&gt;&lt;/div&gt;</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>This final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value.<br>
+  A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image.<br>
+  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;">&lt;div id="div"&gt;&lt;/div&gt;</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>The final color is the result of <code>multiply</code> if the top color is darker, or <code>screen</code> if the top color is lighter.<br>
+  This blend mode is equivalent to <code>overlay</code> but with the layers swapped.<br>
+  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;">&lt;div id="div"&gt;&lt;/div&gt;</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>The final color is similar to hard-light, but softer.<br>
+  This blend mode behaves similar to <code>hard-light</code>.<br>
+  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;">&lt;div id="div"&gt;&lt;/div&gt;</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>The final color is the result of subtracting the darker of the two colors from the lighter one.<br>
+  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;">&lt;div id="div"&gt;&lt;/div&gt;</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>The final color is similar to <code>difference,</code> but with less contrast.<br>
+  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;">&lt;div id="div"&gt;&lt;/div&gt;</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>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;">&lt;div id="div"&gt;&lt;/div&gt;</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>The final color has the <em>saturation</em> of the top color, while using the <em>hue</em> and <em>luminosity</em> of the bottom color.<br>
+  A pure gray backdrop, having no saturation, will have no effect.</p>
+
+ <div id="saturation">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</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>The final color has the<em> <em>hue</em></em> and <em><em>saturation</em> </em>of the top color, while using the <em>luminosity</em> of the bottom color.<br>
+  The effect preserves gray levels and can be used to colorize the foreground.</p>
+
+ <div id="color">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</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 style="">
+ <p>The final color has the <em>luminosity</em> of the top color, while using the <em>hue</em> and <em>saturation</em> of the bottom color.<br>
+  This blend mode is equivalent to color, but with the layers swapped.</p>
+
+ <div id="luminosity">
+ <pre class="brush: html" style="display: none;">&lt;div id="div"&gt;&lt;/div&gt;</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 style="">{{ EmbedLiveSample('luminosity', "300", "300") }}</p>
+ </dd>
+</dl>
+
+<h2 id="Интерполяция_режимов_наложения" style=""><span class="short_text" id="result_box" lang="ru"><span class="hps">Интерполяция режимов наложения</span></span></h2>
+
+<div> </div>
+
+<p>Changes between blends mode are not interpolated. Any change occurs abruptly.</p>
+
+<h2 id="Спецификации" style="">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr style="">
+   <td style="">{{ SpecName('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td style="">Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility" style="">Совместимость с браузерами</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop" style="">
+<table class="compat-table">
+ <tbody>
+  <tr style="">
+   <th style="">Особенность</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>35</td>
+   <td>{{compatVersionUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+   <td>{{compatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="">
+<table class="compat-table">
+ <tbody>
+  <tr style="">
+   <th style="">Особенность</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>Базовая поддержка</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="Смотрите_также" style="">Смотрите также</h2>
+
+<ul style="">
+ <li>Properties using a value of this type: {{cssxref("background-blend-mode")}} and {{cssxref("mix-blend-mode")}}</li>
+ <li style=""><a href="http://en.wikipedia.org/wiki/Blend_modes" style="">Blend modes</a></li>
+ <li style=""><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a> index</li>
+</ul>