RE: [css3-images] Proposed Gradients changes

Why would you special case it for gradients?
	background-image: linear-gradient(70deg, black, white); background-size:10px 50px; background-repeat:gradient;
could become
	background-image: linear-gradient(black, white); background-size:10px 50px; background-repeat:repeat; background-rotate: 70deg;

If a browser creator has to implement this complicated tiling for gradients, he might as well implement it for all images...
background-repeat:gradient; would require pulling the angle out of the gradient so it can be rendered and then apply the rotation to the tiled background.

Rik
-----Original Message-----
From: Brad Kemper [mailto:brad.kemper@gmail.com] 
Sent: Monday, November 29, 2010 9:11 AM
To: Rik Cabanier
Cc: Tab Atkins Jr.; www-style list
Subject: 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 19:28:17 UTC