aboutsummaryrefslogtreecommitdiff
path: root/files/pt-pt/web/css/css_backgrounds_and_borders
diff options
context:
space:
mode:
authorFlorian Dieminger <me@fiji-flo.de>2021-02-11 18:27:33 +0100
committerGitHub <noreply@github.com>2021-02-11 18:27:33 +0100
commit609ee7efcfe881caa08237948e1ed3252e60afa1 (patch)
treee8c22089de06c8ef1a6d75a6e0d1e893403cd07a /files/pt-pt/web/css/css_backgrounds_and_borders
parentad7f998115dd568832332484debf1f1b16b0c905 (diff)
parent8519a85da1acd5b7863268b6cf6f9e4fd14bcf31 (diff)
downloadtranslated-content-609ee7efcfe881caa08237948e1ed3252e60afa1.tar.gz
translated-content-609ee7efcfe881caa08237948e1ed3252e60afa1.tar.bz2
translated-content-609ee7efcfe881caa08237948e1ed3252e60afa1.zip
Merge pull request #43 from fiji-flo/unslugging-pt-pt
Unslugging pt pt
Diffstat (limited to 'files/pt-pt/web/css/css_backgrounds_and_borders')
-rw-r--r--files/pt-pt/web/css/css_backgrounds_and_borders/index.html156
-rw-r--r--files/pt-pt/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html59
2 files changed, 215 insertions, 0 deletions
diff --git a/files/pt-pt/web/css/css_backgrounds_and_borders/index.html b/files/pt-pt/web/css/css_backgrounds_and_borders/index.html
new file mode 100644
index 0000000000..3c843d9d45
--- /dev/null
+++ b/files/pt-pt/web/css/css_backgrounds_and_borders/index.html
@@ -0,0 +1,156 @@
+---
+title: CSS Background and Borders
+slug: Web/CSS/CSS_Backgrounds_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
+original_slug: 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-pt/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/pt-pt/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
new file mode 100644
index 0000000000..50c7a79499
--- /dev/null
+++ b/files/pt-pt/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
@@ -0,0 +1,59 @@
+---
+title: Utilização de múltiplos fundos em CSS
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_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
+original_slug: Web/CSS/CSS_Background_and_Borders/Múltiplos_planos_de_fundo
+---
+<p>{{CSSRef}}</p>
+
+<p>Com <span class="seoSummary"><a href="https://developer.mozilla.org/en/CSS/CSS3" title="CSS3">CSS3 </a></span>pode aplicar <strong>múltiplos fundos</strong> aos elementos. Estes são colocados um sobre o outro, com o primeiro fundo fornecido no topo e o último fundo listado por trás. Só o último fundo pode incluir uma cor de fundo:</p>
+
+<p>É fácil especificar múltiplos fundos:</p>
+
+<pre class="brush: css">.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+</pre>
+
+<p>Você pode fazer isto com o apanhado da propriedade {{ cssxref("background") }} e das sub-propriedades desta: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ 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 fundos são empilhados: a logo do Firefox, um <a href="/en/CSS/-moz-linear-gradient" title="en/CSS/-moz-linear-gradient">gradiente linear</a> (en) 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" style="width: 450px;">
+ <tbody>
+ <tr>
+ <td class="header">Foto</td>
+ <td class="header">Demonstração ao vivo</td>
+ </tr>
+ <tr>
+ <td><img alt="css_multibg.png" class="default internal" src="/@api/deki/files/4028/=css_multibg.png"></td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<p>Como pode ver aqui, o logótipo do Firefox (listado primeiro) está no topo, seguida pelo gradiente, que está uma camada acima do fundo florido. Cada sub-propriedade ({{ cssxref("background-repeat") }} e {{ cssxref("background-position") }}) subsequentes aplicam-se aos fundos correspondentes. Dessa forma, o primeiro valor listado para {{ cssxref("background-repeat") }} aplica-se ao primeiro fundo (mais a frente), e assim por diante.</p>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li><a href="/en/Using_gradients" title="en/Using gradients">Utilizar gradients de CSS</a></li>
+</ul>