Re: Repeating gradient syntax question

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 UTC