RE: [css3-images] Repeating oblique gradients

> Rotating raster images is indeed relatively expensive - this is why the image-orientation property only accepts multiples of 90deg.
As Leif mentioned, this is a very common problem that is already solved.
If the browser uses the OS API's to draw, there is support to do this natively (brushes on windows and patterns on mac).
If the browser draws with OpenGL or DirectX, it takes no effort to implement (and run with no performance penalty).

> Any evidence to the contrary showing that repeating gradients are used in practice would be appreciated
In the flash world, repeating patterns are used all the time.
If you go to money.cnn.com or finance.yahoo.com, you will see many repeating gradients in the ads for ETrade. For example, the 'shimmer' effect on the buttons is done with a reflected, rotated axial gradient.

-----Original Message-----
From: Tab Atkins Jr. [mailto:jackalmage@gmail.com] 
Sent: Tuesday, November 30, 2010 9:26 AM
To: Leif Arne Storset
Cc: Brad Kemper; Rik Cabanier; www-style list
Subject: Re: [css3-images] Repeating oblique gradients

On Tue, Nov 30, 2010 at 9:06 AM, Leif Arne Storset <lstorset@opera.com> wrote:
>> 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.
>
> In the gradient implementation I'm working on at the moment, I've 
> solved this by adding an optional spread argument to the gradient 
> function, like
> so:
>
> linear-gradient(left top, repeat, orange 0%, white, blue 50%);
>
> The spread argument can be 'repeat', 'reflect' or 'extend' (default if 
> not given). I called the default "extend" since it seemed more 
> intuitive than "clamp", the internal name for it. See the attached 
> image for a demonstration.
>
> I'm not formally proposing it yet, but if we want to repeat along the 
> gradient line I think this is a more elegant way to express it than 
> using
> 'background-repeat': what concerns only gradients can stay in the 
> gradient function. It does require 'background-repeat: extend' in 
> order to have visible effects.

For what it's worth, I'm trying to keep discrete values out of the gradient function, because they can't be interpolated well.  You can't do the specialized gradient interpolation between a normal and repeating gradient, for example.  As such, if we decide we want repeating gradients, I'd prefer Mozilla's current treatment, which is to define a pair of repeating-*-gradient() functions.  That way we can stick with "you can interpolate if they're the same function" (and color-stops match).

So far, though, I don't have much evidence that this is actually needed.  Any evidence to the contrary showing that repeating gradients are used in practice would be appreciated - I've already got the appropriate section of the spec written, it's just commented out.


> Rik Cabanier <cabanier@adobe.com> skreiv Mon, 29 Nov 2010 20:27:42 
> +0100
>
>> If a browser creator has to implement this complicated tiling for 
>> gradients, he might as well implement it for all images...
>
> Supporting various spread methods is not necessarily complicated; a 
> graphics library may even support it out of the box. In that case 
> rotating raster images could be a bit more work, especially 
> considering background images is a very old CSS feature. As mentioned 
> by Brad Kemper, performance could be an issue too.

Rotating raster images is indeed relatively expensive - this is why the image-orientation property only accepts multiples of 90deg.

~TJ

Received on Tuesday, 30 November 2010 19:33:22 UTC