Re: Repeating gradient syntax question

On Feb 7, 2011, at 9:47 AM, Tab Atkins Jr. wrote:

> On Mon, Feb 7, 2011 at 9:37 AM, Alan Gresley <alan@css-class.com> wrote:
>> On 8/02/2011 3:40 AM, Brad Kemper wrote:
>> 
>>> As for repeating radial gradients, this seems like an effect that
>>> will almost never be used. If someone really, really needs a radial
>>> gradient that repeats infinitely (instead of just copy-pasting the
>>> color stops a few times), they should use an SVG image.
>> 
>> Are you sure?
>> 
>> <!DOCTYPE html>
>> <style type="text/css">
>> div {
>> height: 200px; width: 200px;
>> -moz-border-radius: 100px 100px;
>> background: #385179 -moz-radial-gradient(rgba(56,81,121,0),
>> rgba(255,255,255,1));
>> -moz-background-size: 50px 50px;
>> }
>> </style>
>> <div></div>
> 
> That's a different kind of repeating.  ^_^  Brad's talking about a
> gradient like "radial-gradient(red, red 50px, white 50px, white 100px,
> red 100px, red 150px, white 150px, white 200px...)", which can be
> shortened to just 4 stops in the repeating syntax.

Correct.

Received on Monday, 7 February 2011 18:05:42 UTC