unslug pt-br: move

3 files changed, 322 insertions, 0 deletions

diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/index.html
new file mode 100644
index 0000000000..59c2117194
--- /dev/null
+++ b/files/pt-br/web/css/css_backgrounds_and_borders/index.html
@@ -0,0 +1,155 @@
+---
+title: CSS Background and Borders
+slug: Web/CSS/CSS_Background_and_Borders
+tags:
+  - CSS
+  - CSS Backgrounds and Borders
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+translation_of_original: Web/CSS/CSS_Background_and_Borders
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Background and Borders</strong> is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-image")}}</li>
+ <li>{{cssxref("border-image-outset")}}</li>
+ <li>{{cssxref("border-image-repeat")}}</li>
+ <li>{{cssxref("border-image-slice")}}</li>
+ <li>{{cssxref("border-image-source")}}</li>
+ <li>{{cssxref("border-image-width")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Using CSS multiple backgrounds</a></dt>
+ <dd>Explains how to set backgrounds on elements and how they will interact with it.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Scaling background images</a></dt>
+ <dd>Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.</dd>
+</dl>
+
+<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('CSS3 Backgrounds') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<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</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html
new file mode 100644
index 0000000000..d7c3ccfa3f
--- /dev/null
+++ b/files/pt-br/web/css/css_backgrounds_and_borders/resizing_background_images/index.html
@@ -0,0 +1,109 @@
+---
+title: Alterando a escala das imagens de background
+slug: Web/Guide/CSS/Scaling_background_images
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images
+---
+<p><span class="seoSummary">A propriedade CSS {{ cssxref("background-size") }} possibilita o ajuste das imagens do background, ao invés do comportamento padrão do navegador de mostrar a imagem no seu tamanho real.</span> Você pode tanto aumentar como diminuir a imagem.</p>
+
+<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">Duplicando uma imagem grande</h2>
+
+<p>Vamos considerar uma imagem grande, a image da logo do Firefox com 2982x2808 . Nós queremos (por alguma razão, envolvendo um site com um design ruim) quatro cópia desta imagem em um quadrado de 300x300 pixel, resultando nesse visual:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8965/ss1.png"></p>
+
+<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Isto pode ser conseguido</span> <span class="hps">usando</span> <span class="hps">o</span> <span class="hps">seguinte</span> <span class="hps">CSS</span></span>:</p>
+
+<pre class="brush: css;  highlight:[8]">.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(firefox_logo.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+</pre>
+
+<p>O {{ cssxref("background-size") }} não precisa mais de nenhum prefixo, mas <span id="result_box" lang="pt"><span class="hps">você pode</span> <span class="hps">considerar a adição de</span> <span class="hps">uma versão</span> <span class="hps">pré-fixada</span> <span class="hps">se você</span> <span class="hps">está focando em </span><span class="hps">browsers</span> <span class="hps">muito antigos.</span></span></p>
+
+<h2 id="Stretching_an_image" name="Stretching_an_image">Esticando uma imagem</h2>
+
+<p><span id="result_box" lang="pt"><span class="hps">Você também pode especificar</span> <span class="hps">ambos</span> <span class="hps">os</span> <span class="hps">tamanhos,</span> <span class="hps">horizontal e vertical</span> <span class="hps">da imagem,</span> <span class="hps">assim</span><span>:</span></span></p>
+
+<pre class="brush:css">background-size: 300px 150px;
+</pre>
+
+<p>O resultado fica assim:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8967/ss2.png"></p>
+
+<h2 id="Scaling_an_image_up" name="Scaling_an_image_up"><span class="short_text" id="result_box" lang="pt"><span class="hps">Aumentando escala de uma</span> <span class="hps">imagem</span></span></h2>
+
+<p><span id="result_box" lang="pt"><span class="hps">Na outra extremidade</span> <span class="hps">do espectro</span><span>, é possível</span> <span class="hps">dimensionar</span><span>-se</span> <span class="hps">uma imagem</span> <span class="hps">no</span> <span class="hps">fundo</span><span>.</span> <span class="hps">Aqui nós</span> aumentamos a escala de <span class="hps">um</span> <span class="hps">favicon</span> <span class="hps">de pixel</span> <span class="hps">32x32</span> para <span class="hps">300x300</span> <span class="hps">pixels</span><span>:</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8969/ss3.png"></p>
+
+<pre class="brush: css; highlight:[5]">.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+</pre>
+
+<p><span id="result_box" lang="pt"><span class="hps">Como você pode ver</span><span>, o</span> <span class="hps">CSS</span> <span class="hps">é, na verdade</span><span>, essencialmente</span> <span class="hps">idêntico, salvo</span> <span class="hps">o nome do</span> <span class="hps">arquivo de imagem.</span></span></p>
+
+<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">Valores especiais: "contain" e "cover"</h2>
+
+<p>Da mesma maneira que o {{cssxref("&lt;length&gt;")}}, a <span id="result_box" lang="pt"><span class="hps">propriedade</span> <span class="hps">CSS</span> de </span>{{ cssxref("background-size") }} <span id="result_box" lang="pt"><span class="hps">oferece dois</span> <span class="hps">valores de tamanho</span> <span class="hps">especial,</span> contain <span class="hps">e</span> cover<span class="hps">.</span> <span class="hps">Vamos dar uma</span> <span class="hps">olhada nestes</span><span>.</span></span></p>
+
+<h3 id="contain" name="contain"><code>contain</code></h3>
+
+<p><span id="result_box" lang="pt"><span class="hps">O</span> <span class="hps">valor</span> contain <span class="hps">especifica</span> <span class="hps">que, independentemente</span> <span class="hps">do</span> <span class="hps">tamanho</span> <span class="hps">da caixa que contém</span><span>,</span> <span class="hps">a imagem de fundo</span> <span class="hps">deve</span> <span class="hps">ser</span> <span class="hps">dimensionado</span> <span class="hps">de modo a que</span> <span class="hps">cada</span> <span class="hps">lado</span> <span class="hps">seja tão grande quanto</span> <span class="hps">possível ao mesmo tempo</span> <span class="hps">que não exceda</span> <span class="hps">o</span> <span class="hps">comprimento do lado</span> <span class="hps">correspondente do recipiente</span><span>.</span> <span class="hps">Tente redimensionar</span> <span class="hps">a janela</span> <span class="hps">usando um navegador que</span> <span class="hps">suporta</span> <span class="hps">imagens de fundo</span> <span class="hps">de escala</span> <span class="hps">(como o</span> <span class="hps">Firefox 3.6</span> <span class="hps">ou posterior) para</span> <span class="hps">ver isso em ação</span> <span class="hps">no exemplo</span> <span class="hps">vivo</span> <span class="hps">abaixo.</span></span></p>
+
+<figure>
+<p>{{ EmbedLiveSample("contain", "100%", "220") }}</p>
+</figure>
+
+<pre class="brush:html">&lt;div class="bgSizeContain"&gt;
+  &lt;p&gt;Tente redimensionar a janela e ver o que acontece.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;highlight:[4]">.bgSizeContain {
+  height: 200px;
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: contain;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+}</pre>
+
+<h3 id="cover" name="cover"><code>cover</code></h3>
+
+<p><span id="result_box" lang="pt"><span class="hps">O</span> <span class="hps">valor</span> cover <span class="hps">especifica</span> <span class="hps">que</span> <span class="hps">a imagem de fundo</span> <span class="hps">deve ser dimensionado</span> <span class="hps">de modo que seja</span> <span class="hps">tão pequena quanto</span> <span class="hps">possível ao mesmo tempo</span> <span class="hps">assegurar</span> <span class="hps">que ambas as dimensões</span> <span class="hps">são maiores</span> <span class="hps">do que</span> <span class="hps">ou igual</span> <span class="hps">à dimensão</span> <span class="hps">correspondente do recipiente</span><span>.</span></span></p>
+
+<figure>{{ EmbedLiveSample("cover", "100%", "220") }}</figure>
+
+<p>Os exemplos à seguir usam HTML &amp; CSS:</p>
+
+<pre class="brush:html">&lt;div class="bgSizeCover"&gt;
+  &lt;p&gt;Tente redimensionar a janela e ver o que acontece.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;highlight:[4]">.bgSizeCover {
+  height: 200px;
+  background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png');
+  background-size: cover;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+</pre>
+
+<h2 id="See_also" name="See_also">Veja Também</h2>
+
+<ul>
+ <li>{{ cssxref("background-size") }}</li>
+ <li>{{ cssxref("background") }}</li>
+</ul>
diff --git a/files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
new file mode 100644
index 0000000000..d0e4fa11f7
--- /dev/null
+++ b/files/pt-br/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
@@ -0,0 +1,58 @@
+---
+title: Multiple backgrounds
+slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
+tags:
+  - CSS
+  - CSS Background
+  - Example
+  - Guide
+  - Intermediate
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
+---
+<p>{{CSSRef}}</p>
+
+<p>Com <a href="/en/CSS/CSS3" title="CSS3">CSS3</a>, você pode aplicar aos elementos multiplos planos de fundo. Estes ficam em camadas empilhadas uma acima da outra onde o o primeiro fundo dado será desenhado no topo e apenas o último fundo da lista poderá definir uma cor sólida de fundo.</p>
+
+<p>Especificar planos de fundo múltplos é fácil:</p>
+
+<pre class="brush: css">.minhaClasse {
+  background: fundo1, fundo2, ..., fundoN;
+}
+</pre>
+
+<p>Você pode fazer isso com a propriedade reduzida {{ cssxref("background") }} e também com as propriedade individuais, com a excessão de {{ cssxref("background-color") }}. Isto é, as seguintes propriedades de plano de fundo podem ser especificadas com uma lista, uma por fundo: <span class="lang lang-*"> </span>{{ cssxref("background") }}<span class="lang lang-*">, </span>{{ cssxref("background-attachment") }}<span class="lang lang-*">, </span>{{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Neste exemplo, três planos de fundos estão empilhados: o logo do Firefox, um degradê linear, e uma imagem com flores:</p>
+
+<pre class="brush: css">.multi_bg_example {
+  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
+        -moz-linear-gradient(left, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
+        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
+  background-repeat: no-repeat, no-repeat, repeat;
+  background-position: bottom right, left, right;
+}
+</pre>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Captura de Tela</td>
+   <td class="header" style="width: 202px;">Demonstração</td>
+  </tr>
+  <tr>
+   <td style="padding: 0;"><img alt="css_multibg.png" class="default internal" src="/@api/deki/files/4028/=css_multibg.png" style="display: block;"></td>
+   <td style=""> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Como pode ver, o logo do firefox (listado primeiro) está no topo, seguido do gradiente que está uma camada acima do fundo florido. Cada uma das sub-propriedade subsequente, ({{ cssxref("background-repeat") }} e {{ cssxref("background-position") }}) se aplicam aos fundos correspondentes. Então o primeiro valor para {{ cssxref("background-repeat") }} se aplica ao primeiro plano de fundo (o mais da frente), e assim por adiante.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Usando degradês</a></li>
+</ul>