RE: [css3-images] Proposed Gradients changes

Yes, for tiling rotated gradients, there's a need to have a 'background-rotate' keyword which doesn't seem to exist.

I agree that CSS gradients should be as simple as possible. 
The spec for axial gradients looks reasonable. 
I think you could add another positioning parameter so you can define a custom begin and endpoint. (this is close to a webkit-gradient)
Ie linear-gradient(center top center bottom, yellow, blue) would render the default axial gradient
But maybe this is already too advanced...

The radial gradient spec seems more complicated than it needs to be. 
Extending my proposal for axial to radial:
radial-gradient(startx starty endx endy, radius1 radius2 ratio, endpoint-color,...)
with 
startx, starty = position of the centerpoint of first endpoint (default: center center like background-position)
endx, endy = position of the centerpoint of the last endpoint (default: center center)
radius1 = radius of the inner circle (default: 0% like background-size)
radius2 = radius of the outer circle (default: 50%)
ratio = the ratio of the height/width of the circle. (default: auto = ratio of the bounding box)

wouldn't this cover most of what you're trying to accomplish? My proposal also includes moving the focal point.

Rik

-----Original Message-----
From: Brad Kemper [mailto:brad.kemper@gmail.com] 
Sent: Sunday, November 28, 2010 9:18 PM
To: Rik Cabanier
Cc: Tab Atkins Jr.; www-style list
Subject: Re: [css3-images] Proposed Gradients changes



On Nov 28, 2010, at 8:38 PM, Rik Cabanier <cabanier@adobe.com> wrote:

> Hi Brad,
> 
> 'extend' signals if an endpoint 'extends' from the gradient. Typically you want this turned on in a gradient.
> If it's turned off, the gradient might not fill its bounding box. PDF and PostScript define this keyword, but our applications almost always leave the extend on.

The current spec for CSS gradients also acts this way, as if extend is on all the time. I think that is best in order to maintain simplicity in the most common cases. One can still create a non-extend effect by starting with a transparent colorstop that coincides with the second colorstop, and then the transparent one extends. 

> SVG, Flash and XPS also have the 'repeat' and 'reflect' keywords that let you tile a gradient like you describe.

It is my feeling that 'background-repeat' is sufficient for tiling, and that is where it belongs. If we need something else for seamlessly repeating, say, a 30deg gradient, then we should have that in 'background-repeat', and not the gradient itself. 

As for 'reflect', I don't think the need is as great as the desire to favor simplicity over power, and an author can still manually create symmetrical gradient by adding color stops to the second half of the gradient that mirror the first. That's my view anyway. 

> The last 2 keywords imply a specific size for the gradient so you can't use top/bottom or left/right in the css.

As long as the image is used for a background, then 'background-repeat' and 'background-size' handle those well. I don't think it is a great loss to not have repeats or reflections in other places where images are used for CSS. 

> It seems that you can define a keyword with 'none', 'extend' (or 'pad'), 'repeat' and 'reflect'.
> 
> 'focal point' is used with radial gradients for when you don't want the beginning and ending circle to have the same midpoint. (see attached SVG file) There are different ways to get this effect but it doesn't seem that CSS lets you do this.

I've been mostly paying attention to linear-gradients myself, so I have less to say about this. But my feeling is that keeping the syntax trim and simple can cover 90% or so of the usage it would be covering with a more verbose syntax, then I think that is a good tradeoff (simpler is better).

> What is the image box? Is that the bounds of the tag that has the CSS gradient?

Not an official term, but what i meant was the bounding-box of the image itself. Linear-gradient() is something you would use instead of url() to get an image, so it is not the same as an element. It is dimensionless, so it is up to some other property (such as 'background-size') to determine the actual dimensions used. Anyway, my guess about what focal length means to gradients was incorrect, so I guess that's not so relevant. 

> -----Original Message-----
> From: Brad Kemper [mailto:brad.kemper@gmail.com] 
> Sent: Sunday, November 28, 2010 1:05 PM
> To: Tab Atkins Jr.
> Cc: Rik Cabanier; www-style list
> Subject: Re: [css3-images] Proposed Gradients changes
> 
> 
> On Nov 28, 2010, at 10:17 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
> 
>> some features such as focal length and extend color are missing.
> 
> I don't know if it is the same thing or not, but we have discussed the possibility of letting the gradient extend beyond its image box in a background if the image is not repeating, either automatically or though a keyword or value ('background-repeat:extend' perhaps). It would be less useful in list images or border images or 'content'.
> 
> What does focal length do? Is it something like scaling the gradient within a clipping rectangle?
> <svgblock_0.svg>

Received on Monday, 29 November 2010 07:38:40 UTC