Re: [css3-images] Proposed Gradients changes

On Nov 29, 2010, at 11:27 AM, Rik Cabanier <cabanier@adobe.com> wrote:

> 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;

Because we still need to intelligently handle gradients with degrees inside them. So, assuming most authors would be accustomed to writing gradients with the direction specified, then I'd prefer not to have to duplicate that in the background syntax. 

> If a browser creator has to implement this complicated tiling for gradients, he might as well implement it for all images...

Perhaps. I suspect it is more computationally expensive to rotate a raster than to rotate a gradient. 

> 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.

Right. So if the author is used to specifying the gradient direction inside the Image, he can continue to do so, and the background properties can just handle it intelligently. 


> 
> 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 20:22:11 UTC