Re: Repeating gradients (Was: Re: Talk on radial gradients)

On Tue, Aug 25, 2009 at 10:23 AM, Simon Fraser<smfr@me.com> wrote:
> <https://developer.mozilla.org/en/CSS/Gradients> has quite a few examples
> with
> repeating gradients.

Ah, thanks.  I can't see any of the examples with radial gradients,
unfortunately, but the one visible example of a linear gradient should
be enough.  It *does* then basically just reset the rule, with the
starting-point and ending-point moved appropriately.  In a radial
gradient, presumably it does the same with the starting-circle and
ending-circle moved appropriately.

That's pretty cool.  I think the example given of a repeating gradient
is pretty undesirable, but with an additional color-stop inserted that
took it back to red, it would do an attractive fade back and forth.

> We should discuss whether background-repeat: no-repeat turns on gradient
> repeating mode, as Firefox has implemented.

Indeed.  As I currently have it, and as Webkit does it, none of the
background-* properties leak into the gradient() rule.  It's a
completely independent function that just does its job drawing an
image with the information provided and then steps back, just like
url().

I'm inclined to keep it that way.  To do otherwise is to make it act
unpredictably when further combinations of background-* properties are
used.  For example, when you use background-size to make the image
less than the size of the box, what happens?  Does it repeat?  What if
you want a gradient that only runs through its stops once (which would
require no-repeat), but is then tiled across the background (which
would require repeat)?

I like the idea of a repeating gradient, but think that it needs to be
handled some other way.  I'll just reopen my old suggestion about
mirrored gradients, and put a keyword at the end of the color-stop
list:

linear-gradient(20px 20px -45deg, red, blue 80px, repeat)

Would produce something very similar to the example repeating gradient
on the mozilla site you linked.  (I had to put in an angle because my
syntax doesn't allow specific ending-points, and just pretended that
the box diagonal was 80px).

I'm still not married to this, but I think putting a keyword that
implies further color-stops at the end of the color-stop list makes
sense.  (And I still sorta like using it for mirror.)

~TJ

Received on Tuesday, 25 August 2009 15:56:51 UTC