W3C home > Mailing lists > Public > www-style@w3.org > February 2011

Re: Repeating gradient syntax question

From: Brad Kemper <brad.kemper@gmail.com>
Date: Mon, 7 Feb 2011 10:05:05 -0800
Cc: Alan Gresley <alan@css-class.com>, Fraser Pearce <me@fraserpearce.com>, www-style@w3.org
Message-Id: <982A06AE-C596-424C-8445-F5FC6C6FC1B9@gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>

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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:37 GMT