RE: [css3-images] Repeating oblique gradients

So, if the browser vendors are OK with the background-transform, I think the spec could boil down to:
axial-gradient(<color-stop>, ...)
radial-gradient(<focal-position>, ...) focal point can be dropped if it's considered too advanced.

rotation and placement would be done through the background parameters.
background-size  defines the pre-transformed size of the gradient (default=bounding box)
background-transform  transforms the upper left corner of the gradient image
background-origin  defines the point where scaling/skewing/rotation happens
background-repeat signals how the gradient is tiled. Gradients would differentiate themselves from images in that they 'extend' themselves to fill the bounds if there is no repeat.

Reflection of axial gradients can be done manually by duplicating the stop in reverse order, making the size twice as wide and turning background-repeat on.
There would be no way to properly reflect or repeat a radial gradient, but that isn't a very commonly used idiom. A user can use SVG to accomplish such an effect.

One side effect is that the endpoint of a rotated axial gradient will be different.
The spec currently calls for the endpoint to always be on the boundingbox. With my proposal, the endpoint will travel in an ellipse shape instead of a rectangular shape.

Let's say you have an axial gradient that fills a square, If you were to animate the rotation with the current specification, you will see the gradient changing in size and appearance as the rotation goes from 0 to 45 and back to 90. I don't believe that there would be a simple way to work around this.
With my proposal, the gradient would stay the same shape and would just rotate around its axis. I think that is the desired behavior.

Rik

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

On Tue, Nov 30, 2010 at 11:32 AM, Rik Cabanier <cabanier@adobe.com> wrote:
>> 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).

I'll leave this to the browser vendors to decide.  If this is indeed cheap, then we can relax the restriction on image-orientation.


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

Could you screencap some images for me?  I don't know if I'm seeing the same ads as you.  (I had to remember to explicitly turn off adblock, too - I was pretty confused at first!)

~TJ

Received on Thursday, 2 December 2010 06:49:47 UTC