Re: Gradients and background-repeat (Was: Re: Automatic spec annotations)

On May 11, 2011, at 1:33 PM, Tab Atkins Jr. wrote:

> On Wed, May 11, 2011 at 12:59 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
>> On May 11, 2011, at 11:07 AM, Simon Fraser <smfr@me.com> wrote:
>>> As I've said before, I think background-repeat should only ever affect axis-aligned, tiled backgrounds (i.e. repeating a rectangular image on an x-y grid). Because of this, it's not suitable for repeating gradients, which may be linear at an angle, or radial.
>> 
>> Is it still axis aligned if the entire element is rotated via 'transform'? Assuming the answer is "yes", and that you don't want to disable background-repeat for that, then what is wrong with having 'background-rotate' (or 'background-transform')? The background still has a pair of axi to align to, and the 'auto' value on it would take care of moving the rotation from the individual tile and into the whole background. Then all the gradients ARE aligned to an axis.
> 
> So, if someone wanted to do the diagonal-stripes pattern,

...and there wasn't yet something in CSS Images to create stripes directly...

> rather than this:
> 
> background-image: repeating-linear-gradient(30deg, silver 0px, silver
> 50px, gray 50px, gray 100px);
> 
> ...they'd have to do this:
> 
> background-image: linear-gradient(30deg, silver 0px, silver 50px, gray
> 50px, gray 100px);
> background-size: 100px 100px;
> background-position: bottom left;
> /* above necessary to get exact same rendering,
>  * may not be needed in all cases
>  */

...or desired, but with 'background-position' I have easier control over where to start the tiling ...

> background-repeat: repeat;

That's the initial value, so you don't need to include that explicitly.

> background-rotate: auto;

Yes, unless 'auto' was the initial value, which was my preference, but it doesn't look likely at this point. So yeah, add 'auto' or an angle to the background shorthand if you think that looks too long. (see below)

> ...with the "auto" value for background-rotate changing how you
> interpret background-image (the gradient is instead rendered at 0deg),
> then rotating the whole background by 30deg after it's repeated?

Yes, counter-clockwise, so that the gradient line is still pointing in the same direction. 

> That's a lot of magic,

I wish you would stop calling it names as a means to try to defeat it. It is no more magic than looking at the information inside a JPG in order to determine what 'background-size:auto' means, or to find an intrinsic aspect ratio which then sets a width or height of an image. In this case, we'd be looking inside a CSS-generated image to determine what the background canvas rotation should be, and then limiting the rotation inside the image to zero, in a happily cooperative fashion.

> not to mention syntax.  

The longest part is the gradient itself:

background: linear-gradient(30deg, silver 0px, silver 50%, gray 50%, gray 100%) auto;
background-size: 100px;

Then if I want to change the scale of the stripes, I only have to change the single 'background-size' value, instead of digging around in the gradient itself (some of which can be much more complicated than this sample). I can easily animate the stripe size by animating 'background-size'. I can make the stripes flow across the background by animating 'background-position', and it would be much easier than animating the insides of the image itself. I could transition the rotation of the stripes on hover by changing a single 'background-rotation' value (not having to include the entire 'repeating-linear-gradient()' function values just to change the angle). 

Maybe I like the background property syntaxes more than you, but I think they provide a lot of power with only as much complexity as you need.

> And it relies on new
> behavior being added to the 'background' property,

background-rotation would be valuable in its own right, even if there was not an 'auto' value. 

> which I oppose as
> it is then not available to things like filters.

I don't know why it wouldn't be. I imagine SVG wouldn't really need it, but why wouldn't an HTML background be filterable if rotated?

Received on Thursday, 12 May 2011 07:47:46 UTC