1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
---
title: repeating-linear-gradient
slug: orphaned/Web/CSS/repeating-linear-gradient()
translation_of: Web/CSS/repeating-linear-gradient()
original_slug: 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>
|
