aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/css/radial-gradient()
diff options
context:
space:
mode:
authorMDN <actions@users.noreply.github.com>2021-06-19 00:34:51 +0000
committerMDN <actions@users.noreply.github.com>2021-06-19 00:34:51 +0000
commitef6dc2f07bcc7d47193d4d4110e32f8eb87b369b (patch)
tree03e6f19fc527ab750be01344add09afba6bcb6dd /files/pt-br/web/css/radial-gradient()
parent3e028982e4bc6762a47268f86fe395670a11c160 (diff)
downloadtranslated-content-ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b.tar.gz
translated-content-ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b.tar.bz2
translated-content-ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b.zip
[CRON] sync translated content
Diffstat (limited to 'files/pt-br/web/css/radial-gradient()')
-rw-r--r--files/pt-br/web/css/radial-gradient()/index.html209
1 files changed, 0 insertions, 209 deletions
diff --git a/files/pt-br/web/css/radial-gradient()/index.html b/files/pt-br/web/css/radial-gradient()/index.html
deleted file mode 100644
index 1479f4b77b..0000000000
--- a/files/pt-br/web/css/radial-gradient()/index.html
+++ /dev/null
@@ -1,209 +0,0 @@
----
-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>