initial commit

1 files changed, 209 insertions, 0 deletions

diff --git a/files/pt-br/web/css/radial-gradient()/index.html b/files/pt-br/web/css/radial-gradient()/index.html
new file mode 100644
index 0000000000..1479f4b77b
--- /dev/null
+++ b/files/pt-br/web/css/radial-gradient()/index.html
@@ -0,0 +1,209 @@
+---
+title: radial-gradient()
+slug: Web/CSS/radial-gradient()
+translation_of: Web/CSS/radial-gradient()
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>A função do CSS <code>radial-gradient()</code> cria uma {{cssxref("&lt;image&gt;")}} que representa um gradiente de cores irradiando de uma origem, o <em>centro</em> do gradiente. O resultado dessa função é um objeto do CSS do tipo {{cssxref("&lt;gradient&gt;")}}.</p>
+
+<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Gradientes radiais são definidos pelo seu <em>centro</em>, o contorno e a posição da <em>forma de fechamento (ending shape)</em> e as <em>paradas de cor (color stops)</em>. O gradiente radial consiste de formas concêntricas uniformemente escaladas partindo do centro até sua forma de fechamento, indo potencialmente além, com a mesma forma da forma de fechamento. As paradas de cor são posicionadas num <em>raio de gradiente virtual</em> saindo do centro horizontalmente para a direita. O posicionamento das porcentagens das paradas de cor são relativas à interseção entre a forma de fechamento e esse raio de gradiente representando <code>100%</code>. Cada forma é monocromática e a cor, definida pela cor no raio de gradiente que intersecta.</p>
+
+<p>Formas de fechamento podem ser apenas círculo <code>(circle)</code> ou elipse <code>(ellipse)</code>.</p>
+
+<p>Como qualquer outro gradiente, um gradiente radial do CSS não é uma <a href="color_value" rel="custom"><code>&lt;cor&gt;</code></a> do CSS, mas uma imagem <a href="/en/CSS/image#no_intrinsic" title="en/CSS/image#no_intrinsic">sem dimensões intrínsecas</a>, i. e. uma imagem sem tamanho natural ou preferencial, tampouco proporção. Seu tamanho concreto será idêntico ao tamanho do elemento ao qual for aplicado.</p>
+
+<p>A função <code>radial-gradient</code> não permite criar gradientes repetitivos. Para esse efeito, use a função do CSS {{ Cssxref("repeating-radial-gradient") }}.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre style=""><code>Gramática formal: radial-gradient( [ circle || <a href="/en-US/docs/CSS/length" title="/en-US/docs/CSS/length">&lt;length&gt;</a> ] [ at <a href="/en-US/CSS/position_value" title="/en-US/CSS/position_value">&lt;position&gt;</a> ]? ,
+| [ ellipse || [<a href="/en-US/docs/CSS/length" title="/en-US/docs/CSS/length">&lt;length&gt;</a> | <a href="/en-US/docs/CSS/percentage" title="/en-US/docs/CSS/percentage">&lt;percentage&gt;</a> ]{2}] [ at <a href="/en-US/CSS/position_value" title="/en-US/CSS/position_value">&lt;position&gt;</a> ]? ,
+| [ [ circle | ellipse ] || &lt;extent-keyword&gt; ] [ at <a href="/en-US/CSS/position_value" title="/en-US/CSS/position_value">&lt;position&gt;</a> ]? ,
+| at <a href="/en-US/CSS/position_value" title="/en-US/CSS/position_value">&lt;position&gt;</a> ,
+&lt;color-stop&gt; [ , &lt;color-stop&gt; ]+ )
+</code></pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Uma {{cssxref("&lt;position&gt;")}}, interpretada da mesma forma que {{Cssxref("background-position")}} ou {{Cssxref("transform-origin")}}. Se omitida, assume o padrão <code>center</code>.</dd>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>A forma do gradiente. Esse valor é <code>circle</code> (indicando que a forma do gradiente é um círculo com raio constante) ou <code>ellipse</code> (indicando que a forma é uma elipse com os eixos alinhados ao elemento). O valor padrão é <code>ellipse</code>.</dd>
+ <dt><code>&lt;size&gt;</code></dt>
+ <dd>O tamanho do gradiente. Essa valor é uma das {{anch("Restrições de tamanho")}} listada abaixo.</dd>
+ <dt><code>&lt;color-stop&gt;</code></dt>
+ <dd>Representando uma cor fixa num determinado ponto, esse valor é composto por um valor {{cssxref("&lt;color&gt;")}}, seguido de uma posição de parada opcional (uma {{cssxref("&lt;percentage&gt;")}} ou uma {{cssxref("&lt;length&gt;")}} referente ao raio de gradiente virtual). Uma porcentagem de <code>0%</code>, ou um tamanho de <code>0</code> representa o centro do gradiente e o valor <code>100%</code> a interseção da forma de fechamento com o raio de gradiente virtual. Valores de porcentagem intermediários são posicionados linearmente no raio de gradiente.</dd>
+ <dt><code>&lt;extent-keyword&gt;</code></dt>
+ <dd>Palavras-chave descrevendo quão grande a forma de fechamento deve ser. Os possíveis valores são:</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Constante</th>
+    <th>Descrição</th>
+   </tr>
+   <tr>
+    <td><code>closest-side</code></td>
+    <td>A forma de fechamento do gradiente encontra o lado do elemento mais próximo ao seu centro (para círculos) ou encontra ambos os lados vertical e horizontal mais próximos ao centro (para elipses).</td>
+   </tr>
+   <tr>
+    <td><code>closest-corner</code></td>
+    <td>A forma de fechamento do gradiente tem o tamanho exato para encontrar o canto da caixa mais próximo ao seu centro.</td>
+   </tr>
+   <tr>
+    <td><code>farthest-side</code></td>
+    <td>Similar ao closest-side, mas a forma de fechamento fica com o tamanho necessário para encontrar o lado do elemento mais distante do centro do gradiente (ou lados vertical e horizontal).</td>
+   </tr>
+   <tr>
+    <td><code>farthest-corner</code></td>
+    <td>A forma de fechamento do gradiente tem o tamanho exato para encontrar o canto da caixa mais distante de seu centro.</td>
+   </tr>
+  </tbody>
+ </table>
+ Rascunhos preliminares incluiam outras palavras-chave (<code>cover</code> e <code>contain</code>) como sinônimos dos valores do padrão <span class="st"><code>farthest-corner</code></span> e <code>closest-side</code> respectivamente. Use somente os valores do padrão, uma vez que algumas implementações podem já ter removido suporte a esses valores mais antigos.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<div style="">ellipse farthest-corner</div>
+
+<pre class="notranslate">background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
+</pre>
+
+<div style="">470px 47px</div>
+
+<pre class="notranslate">background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
+</pre>
+
+<div style="">farthest-corner</div>
+
+<pre class="notranslate">background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);</pre>
+
+<div style="">16px radius fuzzy circle</div>
+
+<pre class="notranslate">background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
+</pre>
+
+<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ários</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()') }}</td>
+   <td>{{ Spec2('CSS3 Images') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico (suporte à função <code>radial-gradient()</code>, mas não necessariamente com a sintaxe final)</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc3">[3]</a></sup><br>
+    {{ CompatGeckoDesktop("16") }}</td>
+   <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td>
+   <td>10.0 <sup><a href="#bc1">[1]</a></sup></td>
+   <td>11.60{{ property_prefix("-o") }}</td>
+   <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup></td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Sintaxe legada do webkit</a> {{ non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>3{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>4.0{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td>
+  </tr>
+  <tr>
+   <td>Sintaxe <code>at</code> (sintaxe do padrão final)</td>
+   <td>{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }} <sup><a href="#bc3">[3]</a></sup><br>
+    {{ CompatGeckoDesktop("16") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.0</td>
+   <td>11.60{{ property_prefix("-o") }} <sup><a href="#bc3">[3]</a></sup><br>
+    Presto 2.12 will remove the prefix.</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico (suporte à função radial-gradient(), mas não necessariamente com a sintaxe final)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc3">[3]</a></sup><br>
+    {{ CompatGeckoMobile("16") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Sintaxe legada do webkit</a> {{ non-standard_inline() }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Sintaxe <code>at</code> (sintaxe do padrão final)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("10") }}{{ property_prefix("-moz") }} <sup><a href="#bc3">[3]</a></sup><br>
+    {{ CompatGeckoMobile("16") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><sup><a name="bc1">[1]</a></sup> Internet Explorer 5.5 a 9.0 suportam a funcionalidade proprietária <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p>
+
+<p><sup><a name="bc2">[2]</a></sup> WebKit desde 528 suporta a função legada <a class="external" href="https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW34"><code>-webkit-gradient(radial,…)</code></a>. Veja também o <a href="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15" title="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15">suporte atual</a> para gradientes radiais.</p>
+
+<p><sup><a name="bc3">[3]</a></sup> Firefox 3.6 e Webkit implementaram uma sintaxe anterior, prefixada.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a>, {{ cssxref("repeating-radial-gradient") }}, {{ cssxref("linear-gradient") }}</li>
+ <li>Proposta original do WebKit: <a class="external" href="http://webkit.org/blog/175/introducing-css-gradients/" title="http://webkit.org/blog/175/introducing-css-gradients/">http://webkit.org/blog/175/introducing-css-gradients/</a></li>
+ <li>Nova implementação do WebKit: <a class="external" href="http://webkit.org/blog/1424/css3-gradients/" title="http://webkit.org/blog/1424/css3-gradients/">http://webkit.org/blog/1424/css3-gradients/</a></li>
+</ul>