initial commit

1 files changed, 389 insertions, 0 deletions

diff --git a/files/pt-br/web/css/blend-mode/index.html b/files/pt-br/web/css/blend-mode/index.html
new file mode 100644
index 0000000000..a32cb2876c
--- /dev/null
+++ b/files/pt-br/web/css/blend-mode/index.html
@@ -0,0 +1,389 @@
+---
+title: <blend-mode>
+slug: Web/CSS/blend-mode
+translation_of: Web/CSS/blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/pt-BR/docs/Web/CSS/CSS_Tipos">O tipo básico de dados</a> <a href="/pt-BR/docs/Web/CSS">CSS</a> <strong><code>&lt;blend-mode&gt;</code></strong> (modo de mesclagem) descreve como as cores devem aparecer, quando objetos se sobrepõem. Usa-se nas propriedades {{cssxref("background-blend-mode")}} e {{cssxref("mix-blend-mode")}}.</p>
+
+<p>Para cada pixel sobreposto, o <code><strong>blend-mode</strong></code> obtém o valor da cor do pixel da frente e do pixel do fundo, faz um cálculo com esses valores e devolve um novo valor de cor.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>O tipo básico de dados <strong><code>&lt;blend-mode&gt;</code></strong> é definido usando uma palavra chave escolhida da lista abaixo.</p>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code><a id="normal" name="normal">normal</a></code></dt>
+ <dd>
+ <p>A cor firnal é a do pixel de cima, não importando a cor dor o pixel de baixo.<br>
+  O efeito é como duas folhas de papel opacas se sobrepondo.</p>
+
+ <div id="normal_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#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>
+ </div>
+
+ <p>{{ EmbedLiveSample('normal_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="multiply" name="multiply">multiply</a></code></dt>
+ <dd>
+ <p>A cor final é o resultado da multiplicação das cores de cima e de baixo.<br>
+  Quando uma das camadas for preta, a cor final será preta, enquanto uma camada branca não altera a cor final.<br>
+  O efeito é como duas imagens impressas sobrepostas em um filme transparente.</p>
+
+ <div id="multiply_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#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>
+ </div>
+
+ <p>{{ EmbedLiveSample('multiply_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="screen" name="screen">screen</a></code></dt>
+ <dd>
+ <p>A cor final é o resultado do inverso de cada cor, multiplicados um pelo outro e depois, o inverso desse resultado.<br>
+  Uma camada preta não altera o resultado final, enquanto uma camada branca resulta na cor final branca.<br>
+  O efeito é como o de duas imagens sobrepostas por um projetor, sobre uma tela de projeção.</p>
+
+ <div id="screen_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#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>
+ </div>
+
+ <p>{{ EmbedLiveSample('screen_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="overlay" name="overlay">overlay</a></code></dt>
+ <dd>A cor final será o resultado de <code>multiply</code>, se a cor de baixo for mais escura ou <code>screen</code>, se a cor de baixo for mais clara.<br>
+ Este <code>blend-mode</code> é equivalente a <code>hard-light</code> mas com as camadas invertidas.
+ <div id="overlay_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#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>
+ </div>
+
+ <p>{{ EmbedLiveSample('overlay_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="darken" name="darken">darken</a></code></dt>
+ <dd>
+ <p>A cor final é composta pelos valores mais escuros dos canais de cores de cada uma das camadas.</p>
+
+ <div id="darken_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#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>
+ </div>
+
+ <p>{{ EmbedLiveSample('darken_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="lighten" name="lighten">lighten</a></code></dt>
+ <dd>A cor final é composta pelos valores mais claros de cada um dos canais de cores das camadas.</dd>
+ <dd>
+ <div id="lighten_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#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>
+ </div>
+
+ <p>{{ EmbedLiveSample('lighten_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="color-dodge" name="color-dodge">color-dodge</a></code></dt>
+ <dd>A cor final é o resultado da divisão da cor de baixo pelo inverso da cor de cima.<br>
+ Um fundo preto não altera as cores. Uma cor de cima inversa a cor de baixo, resulta em uma cor bastante luminosa.<br>
+ Este <code>blend-mode</code> é similar a <code>screen</code>, mas a cor de cima precisa ser apenas tão clara quanto o inverso da cor de fundo para deixar o resultado muito luminoso.</dd>
+ <dd>
+ <div id="color-dodge_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#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>
+ </div>
+
+ <p>{{ EmbedLiveSample('color-dodge_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="color-burn" name="color-burn">color-burn</a></code></dt>
+ <dd>
+ <p>A cor final é o inverso da cor do fundo, dividido pelo valor da cor da frente e então inverte-se o resultado final.<br>
+  Se a cor de cima for branca, não haverá alteração. Se a cor de cima for o inverso da cor de baixo, resultará em uma cor preta.<br>
+  Este <code>blend-mode</code> é similar ao <code>multiply</code>, mas a cor de cima precisa apenas ser tão escura quanto o inverso da cor de baixo para fazer o resultado final ser preto.</p>
+
+ <div id="color-burn_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#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>
+ </div>
+
+ <p>{{ EmbedLiveSample('color-burn_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="hard-light" name="hard-light">hard-light</a></code></dt>
+ <dd>
+ <p>A cor final é o resultado do <code>multiply</code> se a cor de cima for a mais escura, ou o resultado de <code>screen</code> se a cor de cima for mais clara.<br>
+  Este <code>blend-mode</code> é equivalente ao <code>overlay</code> mas com as camadas invertidas.<br>
+  O efeito é o de iluminar o fundo com um holofote muito forte e intenso.</p>
+
+ <div id="hard-light_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#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>
+ </div>
+
+ <p>{{ EmbedLiveSample('hard-light_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="soft-light" name="soft-light">soft-light</a></code></dt>
+ <dd>
+ <p>O resultado final é similar ao de <code>hard-light</code>, porém menos intenso.<br>
+  O efeito é o de iluminar o fundo com um holofote difuso.</p>
+
+ <div id="soft-light_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#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>
+ </div>
+
+ <p>{{ EmbedLiveSample('soft-light_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="difference" name="difference">difference</a></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_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#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>
+ </div>
+
+ <p>{{ EmbedLiveSample('difference_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="exclusion" name="exclusion">exclusion</a></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_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#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>
+ </div>
+
+ <p>{{ EmbedLiveSample('exclusion_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="hue" name="hue">hue</a></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_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#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>
+ </div>
+
+ <p>{{ EmbedLiveSample('hue_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="saturation" name="saturation">saturation</a></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_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#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>
+ </div>
+
+ <p>{{ EmbedLiveSample('saturation_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="color" name="color">color</a></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_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#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>
+ </div>
+
+ <p>{{ EmbedLiveSample('color_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="luminosity" name="luminosity">luminosity</a></code></dt>
+ <dd>
+ <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 <code>color</code>, but with the layers swapped.</p>
+
+ <div id="luminosity_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#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>
+ </div>
+
+ <p>{{ EmbedLiveSample('luminosity_example', "300", "300") }}</p>
+ </dd>
+</dl>
+
+<h2 id="Interpolation_of_blend_modes">Interpolation of blend modes</h2>
+
+<p>Changes between blends mode are not interpolated. Any change occurs immediately.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Compatibility</h2>
+
+
+
+<p>{{Compat("css.types.blend-mode")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Properties that use this data type: {{cssxref("background-blend-mode")}}, {{cssxref("mix-blend-mode")}}</li>
+ <li><a href="http://en.wikipedia.org/wiki/Blend_modes">Blend modes</a></li>
+</ul>