diff options
| author | MDN <actions@users.noreply.github.com> | 2021-06-19 00:34:51 +0000 |
|---|---|---|
| committer | MDN <actions@users.noreply.github.com> | 2021-06-19 00:34:51 +0000 |
| commit | ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b (patch) | |
| tree | 03e6f19fc527ab750be01344add09afba6bcb6dd /files/pt-br/web/css/radial-gradient() | |
| parent | 3e028982e4bc6762a47268f86fe395670a11c160 (diff) | |
| download | translated-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.html | 209 |
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("<image>")}} 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("<gradient>")}}.</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><cor></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"><length></a> ] [ at <a href="/en-US/CSS/position_value" title="/en-US/CSS/position_value"><position></a> ]? , -| [ ellipse || [<a href="/en-US/docs/CSS/length" title="/en-US/docs/CSS/length"><length></a> | <a href="/en-US/docs/CSS/percentage" title="/en-US/docs/CSS/percentage"><percentage></a> ]{2}] [ at <a href="/en-US/CSS/position_value" title="/en-US/CSS/position_value"><position></a> ]? , -| [ [ circle | ellipse ] || <extent-keyword> ] [ at <a href="/en-US/CSS/position_value" title="/en-US/CSS/position_value"><position></a> ]? , -| at <a href="/en-US/CSS/position_value" title="/en-US/CSS/position_value"><position></a> , -<color-stop> [ , <color-stop> ]+ ) -</code></pre> - -<h3 id="Valores">Valores</h3> - -<dl> - <dt><code><position></code></dt> - <dd>Uma {{cssxref("<position>")}}, interpretada da mesma forma que {{Cssxref("background-position")}} ou {{Cssxref("transform-origin")}}. Se omitida, assume o padrão <code>center</code>.</dd> - <dt><code><shape></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><size></code></dt> - <dd>O tamanho do gradiente. Essa valor é uma das {{anch("Restrições de tamanho")}} listada abaixo.</dd> - <dt><code><color-stop></code></dt> - <dd>Representando uma cor fixa num determinado ponto, esse valor é composto por um valor {{cssxref("<color>")}}, seguido de uma posição de parada opcional (uma {{cssxref("<percentage>")}} ou uma {{cssxref("<length>")}} 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><extent-keyword></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> |
