Re: [css3-images] Proposed Gradients changes

On Nov 28, 2010, at 11:38 PM, Rik Cabanier wrote:

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

That sounds like it would rotate the whole background, images and all, which would do the trick, if you didn't want to use the angle in the image itself, or if the angle was a multiple of 90deg and you wanted to rotate it some more, or if you had a value of "gradient" that would automate that sort of thing.

I was thinking of something more along the lines of 'background-repeat:gradient', which would essentially rotate the background (images and all) by the degrees in the gradient, instead of rotating the gradient within the image (which would be at 90deg [bottom-to-top], relative to the image), then repeat in that direction. Thus, the most obvious repetitions are repeating along the axis specified in the gradient direction. So if you had this:

background-image: linear-gradient(70deg, black, white);
background-size:auto 50px;
background-repeat:gradient;

then you would get a 50px-tall gradient that repeated over and over again in a 70deg direction, filling the background drawing area.

And if you had this:

background-image: linear-gradient(70deg, black, white);
background-size:10px 50px;
background-repeat:gradient;

then you would get a a 50px-tall gradient that repeated over and over again in a 10px wide strip in a 70deg direction.

And if the image wasn't a gradient, then 'background-repeat:gradient' would be the same as 'background-repeat:repeat'.

Received on Monday, 29 November 2010 17:11:29 UTC