W3C home > Mailing lists > Public > www-style@w3.org > November 2010

Re: [css3-images] Proposed Gradients changes

From: Brad Kemper <brad.kemper@gmail.com>
Date: Mon, 29 Nov 2010 09:10:52 -0800
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, www-style list <www-style@w3.org>
Message-Id: <A6AA7A18-4561-4FD3-9FE5-0BC0BC23364D@gmail.com>
To: Rik Cabanier <cabanier@adobe.com>

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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:34 GMT