Re: [css3-images] Gradient Magic

On Jul 16, 2011, at 1:10 PM, Behnam Esfahbod ZWNJ wrote:

> Hi,
> 
> Implementing the CSS3 Linear Gradient for another application, I
> noticed one very useful gradient style is almost undoable using the
> latest syntax. This style is when you want gradient colors from A to B
> to C, with A on the bottom-right, C on the top-left, and B on the
> top-right and bottom-left. (In the attached screenshot, A = red, B =
> white, and C = blue.) This
> 
> At the moment, the only way to make this happen is using JavaScript to
> calculate get the final dimensions of the box and compute the
> direction of the vector, all in the client-side, or create an SVG
> image for the background and set that as the background image using
> "object-fit: fill;". I believe either of these solutions are too
> complex for such a simple problem.
> 
> I would like to propose to add a keyword for this feature, let's name
> it "magic" for now, which only affects the vector only when there are
> two position keywords present, and mirror the gradient vector against
> one of the vectors (1, 1) or (1, -1), the closest one.
> 
> Of course another solution would be to use "object-fit" for the
> "background" property, which I'm not sure how much would affect the
> complexity and compatibility of that property.
> 
> Any comments?

Interesting. I don't think I'd call it "magic". I think your "magic" version may actually look better, and should perhaps be the normal way to connect the corners. It would be more like how the degree version works, where lines perpendicular to the gradient line at the endpoints intersect the corners, without the gradient line itself actually intersecting the corners. With your way, a perpendicular line through the center of the gradient will intersect the other two corners, giving it a more balanced look. 

If the image was a square, then it wouldn't matter: The two different methods of connecting the corners with a gradient line would have the same results.

My "as-square" proposed keyword, as I described it [1], would actually have created the gradient this way (although now I notice my renderings were wrong). Thus, if the gradient is in a square and you use a multiple of 45deg, it not only goes corner-to-corner, but also the mid point stretches between the other two corners. Then when you let the square act as a dimensionless box and conform its width and height of the size of the background painting area (as linear-gradient does now), and you also let the angle flex with the box to go from 45deg to something else. So the midpoint that stretched between the other two corners would also continue to do so.

Received on Monday, 18 July 2011 14:52:35 UTC