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

Re: Repeating gradient syntax question

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 7 Feb 2011 09:47:22 -0800
Message-ID: <AANLkTimbuvDQfSiR0Yu0dQHVEij+xjWG1QLdEMeVLxiN@mail.gmail.com>
To: Alan Gresley <alan@css-class.com>
Cc: Brad Kemper <brad.kemper@gmail.com>, Fraser Pearce <me@fraserpearce.com>, www-style@w3.org
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.

~TJ
Received on Monday, 7 February 2011 17:48:15 GMT

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