diff options
Diffstat (limited to 'files/ru/web/css/blend-mode/index.html')
| -rw-r--r-- | files/ru/web/css/blend-mode/index.html | 411 |
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><blend-mode></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;"><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>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;"><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>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;"><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>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 { + 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;"><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>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 { + 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;"><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>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;"><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>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;"><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>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;"><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>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;"><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>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;"><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>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 { + 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;"><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>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;"><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 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;"><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 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', '<blend-mode>') }}</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> |