Re: [css3-images] Gradient Magic

On Mon, Jul 18, 2011 at 10:33 AM, Brian Manthos <brianman@microsoft.com> wrote:
> For consideration...
>
> Aren't there really 4 options:
> a. square made from nearest side
> b. square made from farthest side
> c. square made from nearest-corner
> d. non-square, snap directly to corner
>
> Option c matches the WD and ED.
> Option d is what Behnam would like to have available in some form.
> Options a & b haven't been discussed.
>
> I mention the above because we already have keywords from radial-gradient that align with a, b, and c fairly well.

Behnam doesn't actually want a square, though what he wants can be
described as first drawing it into a square and then stretching it
into the final rectangular form.


On Mon, Jul 18, 2011 at 7:51 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
> 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.

It actually wouldn't work with your as-square as you described it,
since that only affected the angle; the rendering was then done into
the full rectangle.  You need to actually draw the entire gradient
into a square and then stretch it, like what Behnam described with
using an SVG gradient and background-size, or do coordinate space
tricks that accomplish the same thing, like with SVG's
"objectBoundingBox" coordinate space:

<!DOCTYPE html>
<svg>
<defs>
 <linearGradient x1=0 y1=0 x2=1 y2=1 gradientUnits=objectBoundingBox id=foo>
  <stop offset=0% stop-color=red />
  <stop offset=50% stop-color=white />
  <stop offset=100% stop-color=blue />
 </linearGradient>
</defs>
<rect width=300 height=100 fill=url(#foo) />
</svg>

The only problem is that it then becomes nonsensical to use <length>s
when placing color-stops, as the size of the square is arbitrary.  SVG
gets around this by defining the width and height of an
objectBoundingBox box to both be "1", so using bare numbers or
percentages is the same thing.

I think it might make sense to allow something like this, but then it
becomes difficult/impossible to transition it with a normal gradient.
Perhaps we could add another function for this?  box-gradient or
something?

~TJ

Received on Monday, 18 July 2011 18:18:12 UTC