aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/css
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
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')
-rw-r--r--files/pt-br/web/css/image-set()/index.html76
-rw-r--r--files/pt-br/web/css/radial-gradient()/index.html209
-rw-r--r--files/pt-br/web/css/repeating-linear-gradient()/index.html153
3 files changed, 0 insertions, 438 deletions
diff --git a/files/pt-br/web/css/image-set()/index.html b/files/pt-br/web/css/image-set()/index.html
deleted file mode 100644
index 986d14da0c..0000000000
--- a/files/pt-br/web/css/image-set()/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: image-set()
-slug: Web/CSS/image-set()
-translation_of: Web/CSS/image-set()
----
-<div>{{cssref}}</div>
-
-<p class="summary">A notação de função CSS <code>image-set()</code> é um método de deixar o navegador escolher a imagem CSS mais apropriada de um dado conjunto, principalmente para telas de alta densidade de pixels.</p>
-
-<p>Resolução e largura de banda diferem por dispositivo e acesso à rede. A função <code>image-set()</code> oferece a resolução de imagem mais apropriada para o dispositivo de um usuário, fornecendo um conjunto de opções de imagem — cada uma com uma declaração de resolução associada — da qual o navegador escolhe o mais apropriado para o dispositivo e as configurações. A resolução pode ser usada como um proxy para o tamanho do arquivo — um agente de usuário em uma conexão móvel lenta, com uma tela de alta resolução, pode preferir receber imagens de baixa resolução em vez de aguardar uma imagem de alta resolução carregar.</p>
-
-<p><code>image-set()</code> permite que o autor forneça opções em vez de determinar o que cada usuário individual precisa.</p>
-
-<h2 id="Sintaxe">Sintaxe</h2>
-
-<pre class="syntaxbox notranslate">image-set() = image-set( &lt;image-set-option&gt;# )
-where &lt;image-set-option&gt; = [ &lt;image&gt; | &lt;string&gt; ] &lt;resolution&gt; and
- &lt;string&gt; is an &lt;url&gt;
-</pre>
-
-<h3 id="Valores">Valores</h3>
-
-<p>Mais comumente, você verá um valor de  <code>url()</code> <code>&lt;string&gt;</code>, mas o <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> pode ser qualquer tipo de imagem, exceto para um conjunto de imagens. A função <code>image-set()</code> não pode ser aninhada dentro de outra função <code>image-set()</code>.</p>
-
-<p>unidades <code><a href="/en-US/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code> incluem <code>x </code>ou <code>ddpx,</code> para pontos por unidade de pixel, <code>dpi</code>, para pontos por polegada, e <code>dpcm</code> para pontos per centímetro. Toda imagem dentro de <code>image-set()</code> deve ter uma única resolução.</p>
-
-<h2 id="Exemplos">Exemplos</h2>
-
-<pre class="brush: css notranslate">background-image: image-set( "cat.png" 1x,
- "cat-2x.png" 2x);</pre>
-
-<p>Este exemplo mostra como usar <code><a class="css" href="https://drafts.csswg.org/css-images-4/#funcdef-image-set" id="ref-for-funcdef-image-set⑨">image-set()</a></code> para fornecer duas opções alternativas {{cssxref("background-image")}}, escolhidas dependendo da resolução necessária: uma versão normal e uma versão de alta-resolução.</p>
-
-<h2 id="Preocupações_de_Acessibilidade">Preocupações de Acessibilidade</h2>
-
-<p>Tecnologia assistiva não pode analisar imagens de fundo. Se a imagem contiver informações críticas para entender a finalidade geral da página, é melhor descrevê-la semanticamente no documento.</p>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
- <li><a class="external external-icon" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1  | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th>Especificação</th>
- <th>Status</th>
- <th>Comentário</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td>
- <td>{{Spec2('CSS4 Images')}}</td>
- <td> </td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
-
-<p>{{Compat("css.types.image.image-set")}}</p>
-
-<h2 id="See_also" name="See_also">Veja também</h2>
-
-<ul>
- <li>{{cssxref("image")}}</li>
- <li>{{cssxref("_image", "image()")}}</li>
- <li>{{cssxref("element")}}</li>
- <li>{{cssxref("url")}}</li>
- <li>{{cssxref("&lt;gradient&gt;")}}</li>
- <li>{{cssxref("image-set","image-set()")}}</li>
- <li>{{cssxref("cross-fade")}}</li>
-</ul>
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>
diff --git a/files/pt-br/web/css/repeating-linear-gradient()/index.html b/files/pt-br/web/css/repeating-linear-gradient()/index.html
deleted file mode 100644
index e2be000120..0000000000
--- a/files/pt-br/web/css/repeating-linear-gradient()/index.html
+++ /dev/null
@@ -1,153 +0,0 @@
----
-title: repeating-linear-gradient
-slug: Web/CSS/repeating-linear-gradient()
-translation_of: Web/CSS/repeating-linear-gradient()
----
-<p>{{ CSSRef() }}</p>
-
-<h2 id="Summary">Summary</h2>
-
-<p>A função CSS <code>repeating-linear-gradient</code> cria uma {{cssxref("&lt;image&gt;")}} de repetidos gradientes. Isso funciona da mesma forma, e recebe os mesmos argumentos dos gradientes lineares básicos, como descrito em {{ cssxref("linear-gradient") }}, mas ele automaticamente repete as paradas das cores infinitamente em ambas as direções, com suas posições trocadas por múltiplos da diferença entre a posição da última parada de cor e a posição da primeira.</p>
-
-<p>The consequence is that an end color of a gradient always coincide with a start color. If both are not identical, this will result in a sharp transition.</p>
-
-<p>Like any other gradient, a repeating CSS linear gradient is not a CSS <span class="lang lang-en"><code><a href="color_value" rel="custom">&lt;color&gt;</a></code> </span> but an image with <a href="/en/CSS/image#no_intrinsic" title="en/CSS/image#no_intrinsic">no intrinsic dimensions</a>; that is, it has no natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.</p>
-
-<p>Mozilla currently only supports CSS gradients as values of the {{ Cssxref("background-image") }} property, as well as within the shorthand {{ Cssxref("background") }}. You specify a gradient value instead of an image URL.</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="twopartsyntaxbox notranslate">Formal grammar: repeating-linear-gradient( [ <a href="/en-US/CSS/angle" title="angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop&gt; [, &lt;color-stop&gt;]+ )
- \---------------------------------/ \----------------------------/
- Definition of the gradient line List of color stops
-
- where <code>&lt;side-or-corner&gt; = [left | right] || [top | bottom]</code>
- and <code>&lt;color-stop&gt; = &lt;color&gt; [ &lt;percentage&gt; | &lt;length&gt; ]?</code>
-</pre>
-
-<pre class="notranslate">repeating-linear-gradient( 45deg, blue, red ); /* A repeating gradient on 45deg axe starting blue and finishing red */
-repeating-linear-gradient( to left top, blue, red); /* A repeating gradient going from the bottom right to the top left
- starting blue and finishing red */
-
-repeating-linear-gradient( 0deg, blue, green 40%, red ); /* A repeating gradient going from the bottom to top, starting blue,
- being green after 40% and finishing red */
-</pre>
-
-<h3 id="Values">Values</h3>
-
-<dl>
- <dt><code>&lt;side-or-corner&gt;</code></dt>
- <dd>Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, <code>left</code> or <code>right</code>, and the second one the vertical side, <code>top</code> or <code>bottom</code>. The order is not relevant and each of the keyword is optional.<br>
- The values <code>to top</code>, <code>to bottom</code>, <code>to left</code> and <code>to right</code> are translated into the angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <code>&lt;color-stop&gt;</code> will exactly apply to the corner point. This is sometimes called the "<em>magic corner</em>" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.</dd>
- <dt><code>&lt;angle&gt;</code></dt>
- <dd>An angle of direction for the gradient. See {{ cssxref("&lt;angle&gt;") }}.</dd>
- <dt><code>&lt;color-stop&gt;</code></dt>
- <dd>This value is comprised of a {{cssxref("&lt;color&gt;")}} value, followed by an optional stop position (either a percentage between 0% and 100% or a {{cssxref("&lt;length&gt;")}} along the gradient axis).<br>
- Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.</dd>
-</dl>
-
-<h2 id="Examples">Examples</h2>
-
-<pre class="brush: css notranslate">background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px);
-</pre>
-
-<h2 id="Specifications" name="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 Images', '#repeating-gradients', 'repeating-linear-gradient()') }}</td>
- <td>{{ Spec2('CSS3 Images') }}</td>
- <td> </td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
-
-<table class="compat-table">
- <tbody>
- <tr>
- <th>Feature</th>
- <th>Firefox (Gecko)</th>
- <th>Chrome</th>
- <th>Internet Explorer</th>
- <th>Opera</th>
- <th>Safari</th>
- </tr>
- <tr>
- <td>Basic support (on {{ cssxref("background") }} and {{ cssxref("background-image") }})</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.10{{ property_prefix("-o") }} <sup><a href="#bc3">[3]</a></sup></td>
- <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td>
- </tr>
- <tr>
- <td>On any properties that accept {{cssxref("&lt;image&gt;")}}</td>
- <td>{{ CompatNo() }}</td>
- <td>{{ CompatVersionUnknown() }}</td>
- <td>{{ CompatUnknown() }}</td>
- <td>{{ CompatUnknown() }}</td>
- <td>{{ CompatVersionUnknown() }}</td>
- </tr>
- <tr>
- <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Legacy webkit syntax</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>Legacy <em>from </em>syntax (without <code>to</code>){{ non-standard_inline() }}</td>
- <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc4">[4]</a></sup><br>
- Removed in {{ CompatGeckoDesktop("16") }}</td>
- <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td>
- <td>10.0</td>
- <td>11.10{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup></td>
- <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2%3E">[2]</a></sup></td>
- </tr>
- <tr>
- <td><code>to </code>syntax</td>
- <td>{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }}<sup><a href="#bc4">[4]</a></sup><br>
- {{ CompatGeckoDesktop("16") }}</td>
- <td>{{ CompatNo() }}</td>
- <td>10.0</td>
- <td>11.60{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup><br>
- Presto 2.12 will remove the prefix.</td>
- <td>{{ CompatNo() }}</td>
- </tr>
- </tbody>
-</table>
-
-<p><sup><a name="bc1">[1]</a></sup> Internet Explorer 5.5 through 9.0 supports proprietary <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 since 528 supports the legacy <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p>
-
-<p><sup><a name="bc3">[3]</a></sup> Gecko, Opera &amp; Webkit considers {{cssxref("&lt;angle&gt;")}} to start to the right, instead of the top. I.e. it considered an angle of to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top.</p>
-
-<p><sup><a name="bc4">[4]</a></sup> Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a <em>from</em> position. The <code>to</code> syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:</p>
-
-<pre class="notranslate">-moz-repeating-linear-gradient(to top left, blue, red);</pre>
-
-<p>is the same as:</p>
-
-<pre class="notranslate">-moz-repeating-linear-gradient(bottom right, blue, red);</pre>
-
-<p>The legacy syntax, without <code>to</code>, is planned to go away when the prefix is removed.</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a>, {{ cssxref("radial-gradient", "radial-gradient()") }}, {{ cssxref("linear-gradient", "linear-gradient()") }}, {{ cssxref("repeating-radial-gradient", "repeating-radial-gradient()") }};</li>
- <li>Some properties where it can be used: {{ cssxref("background-image") }}, {{ cssxref("background") }}.</li>
-</ul>