diff options
Diffstat (limited to 'files/pt-br/web/css/repeating-linear-gradient()/index.html')
| -rw-r--r-- | files/pt-br/web/css/repeating-linear-gradient()/index.html | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/files/pt-br/web/css/repeating-linear-gradient()/index.html b/files/pt-br/web/css/repeating-linear-gradient()/index.html new file mode 100644 index 0000000000..e2be000120 --- /dev/null +++ b/files/pt-br/web/css/repeating-linear-gradient()/index.html @@ -0,0 +1,153 @@ +--- +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("<image>")}} 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"><color></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"><angle></a> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) + \---------------------------------/ \----------------------------/ + Definition of the gradient line List of color stops + + where <code><side-or-corner> = [left | right] || [top | bottom]</code> + and <code><color-stop> = <color> [ <percentage> | <length> ]?</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><side-or-corner></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><color-stop></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><angle></code></dt> + <dd>An angle of direction for the gradient. See {{ cssxref("<angle>") }}.</dd> + <dt><code><color-stop></code></dt> + <dd>This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage between 0% and 100% or a {{cssxref("<length>")}} 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("<image>")}}</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 & Webkit considers {{cssxref("<angle>")}} 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> |