initial commit

1 files changed, 212 insertions, 0 deletions

diff --git a/files/pt-br/web/css/opacity/index.html b/files/pt-br/web/css/opacity/index.html
new file mode 100644
index 0000000000..41afe896ae
--- /dev/null
+++ b/files/pt-br/web/css/opacity/index.html
@@ -0,0 +1,212 @@
+---
+title: opacity
+slug: Web/CSS/opacity
+translation_of: Web/CSS/opacity
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>A propriedade CSS <strong>opacity</strong> especifica a transparência de um elemento, isto é, o grau no qual o background atrás do elemento é sobreposto.</p>
+
+<p>O valor aplica-se ao elemento como um todo, incluindo seu conteúdo, apesar de o valor não ser herdado por elementos filhos. Assim, um elemento e seus elementos filhos têm todos a mesma opacidade relativa ao background do elemento, mesmo se o elemento e seus elementos filhos tiverem opacidades diferentes entre si.</p>
+
+<p>Se você <a href="http://stackoverflow.com/questions/13508877/resetting-the-opacity-of-a-child-elements-maple-browser-samsung-tv-app">não quer aplicar a opacidade ao elemento filho</a> - use isto:</p>
+
+<pre class="brush:css">background: rgba(0, 0, 0, 0.4);</pre>
+
+<p>Usando essa propriedade com um valor diferente de 1, o elemento é colocado em um novo <a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/Understanding_z_index/O_contexto_de_empilhamento">contexto de empilhamento</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush:css">/* Totalmente opaco */
+opacity: 1;
+opacity: 1.0;
+
+/* Translúcido */
+opacity: 0.6;
+
+/* Totalmente transparente */
+opacity: 0.0;
+opacity: 0;
+
+/* Valores globais */
+opacity: inherit;
+opacity: initial;
+opacity: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>É um {{cssxref("number")}} no intervalo de 0.0 a 1.0, sendo estes incluídos, representando a opacidade do canal, que é o valor de seu canal alfa. Qualquer valor fora do intervalo, apesar de válido, é aproximado ao valor mais próximo dentro do intervalo.</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Valor</th>
+    <th>Significado</th>
+   </tr>
+   <tr>
+    <td><code>0</code></td>
+    <td>O elemento é totalmente transparente (isto é, invisível).</td>
+   </tr>
+   <tr>
+    <td>Qualquer {{cssxref("number")}} entre 0 e 1</td>
+    <td>O elemento é translúcido (isto é, o background é visível).</td>
+   </tr>
+   <tr>
+    <td><code>1</code></td>
+    <td>O elemento é totalmente opaco (sólido).</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Sintaxe_formal">Sintaxe formal</h3>
+
+<pre>{{csssyntax}}</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Exemplo_básico">Exemplo básico</h3>
+
+<pre class="brush: css">div { background-color: yellow; }
+.light {
+  opacity: 0.2; /* Mal consegue ver o texto acima do background */
+}
+.medium {
+  opacity: 0.5; /* Vê o texto mais claramente acima do background */
+}
+.heavy {
+  opacity: 0.9; /* Vê o texto muito claramente acima do background */
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="light"&gt;Você mal vê isso.&lt;/div&gt;
+&lt;div class="medium"&gt;Isso é mais fácil de ver.&lt;/div&gt;
+&lt;div class="heavy"&gt;Isso é muito fácil de ver.&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Basic_example', '640', '64')}}</p>
+
+<h3 id="Opacidade_diferente_com_hover">Opacidade diferente com <code>:hover</code></h3>
+
+<pre class="brush: css">img.opacity {
+  opacity: 1;
+  filter: alpha(opacity=100); /* IE8 e anteriores */
+  zoom: 1; /* Ativa "hasLayout" no IE 7 e anteriores */
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}</pre>
+
+<pre class="brush: html">&lt;img src="//developer.mozilla.org/media/img/mdn-logo.png"
+     alt="MDN logo" width="128" height="146"
+     class="opacity"&gt;
+
+</pre>
+
+<p>{{EmbedLiveSample('Different_opacity_with_hover', '150', '175')}}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Define opacity como animável.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_browsers">Compatibilidade com browsers</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}<sup>[1]</sup></td>
+   <td>9.0<sup>[2]</sup><br>
+    8.0<br>
+    4.0</td>
+   <td>9.0</td>
+   <td>1.2 (125)<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1.7")}}<sup>[1]</sup></td>
+   <td>9.0<sup>[2]</sup><br>
+    8.0<br>
+    4.0</td>
+   <td>9.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<p>[1] Anterior ao Gecko 1.7 (Firefox 0.9) , a propriedade <code>-moz-opacity</code> foi implementada de uma maneira não-padronizada (herdada). Com o Firefox 0.9, o comportamento mudou e a propriedade foi renomeada para <code>opacity.</code> Desde então, <code>-moz-opacity </code>foi suportada somente como um alias para <code>opacity</code>.</p>
+
+<p>Gecko 1.9.1 {{geckoRelease("1.9.1")}} e posteriores não suportam  <code>-moz-opacity</code> e o suporte para <code>MozOpacity</code> no JavaScript foi removido no Gecko 13 {{geckoRelease("13")}}. A partir de agora, você deve simplesmente usar <code>opacity</code>.</p>
+
+<p>[2] Anterior à versão 9, Internet Explorer não suporta <code>opacity</code>, em vez disso ele suporta uma propriedade <code>filter</code> com <code>alpha(opacity=xx)</code> ou <code>"alpha(opacity=xx)"</code> como valor (ambas são sinônimos). Do IE4 até o IE9 foi suportado a forma extendida <code>progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)</code>. IE8introduziu <code>-ms-filter</code>, a qual é sinônimo de <code>filter</code>. Ambas foram removidas no IE10.</p>
+
+<p>[3] Similar à <code>-moz-opacity</code>, <code>-khtml-opacity</code> tem estado morta desde o início de 2004 (lançamento do Safari 1.2).<br>
+ Konqueror nunca teve suporte para <code>-khtml-opacity</code> e tem suportado a propriedade <code>opacity</code> desde a versão 4.0.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx">MSDN Microsoft's filter:alpha(opacity=xx)</a></li>
+</ul>