Re: [css3-images] Simplifying radial gradients

On Sep 20, 2011, at 8:41 PM, Andrew Fedoniouk wrote:

> If we want to provide very simple and basic gradients
> then we should provide mechanism for authors to define what they
> want by other means.
> 
> Simplest linear gradient:
> 
> linear-gradient( color-tl, color-tr, color-br, color-bl )
> - defines colors at four corners, allows to define all basic
>   vertical/horizontal and angled cases.
> 
> radial-gradient( color-center, color-corner )
> - defines radial gradient from center to corners.
> 
> And here is an alternative mechanism that I use,
> it allows to create any imaginable backgrounds and gradients
> for CSS.
> 
> CSS is allowed to use in-memory images that can be accessed
> and drawn by existing Graphics mechanism.
> 
> So in CSS we will define something like this:
> 
> el { background-image: url(in-memory:some-unique-name); }
> 
> and in script we can bind that image with graphics and
> draw whatever we want:
> 
> var img = new Image(100,100);
>     img.src = "in-memory:some-unique-name";
> var gfx = img.getContext("2d");
>     gfx.createLinearGradient()
> ...
> 
> CSS and script use the same url:
> "in-memory:some-unique-name" and so
> the same image that script can draw on.
> 
> That allows two worlds (CSS and Canvas) coexist peacefully.
> 
> Just an idea.

This is basically what WebKit does with -webkit-canvas
<http://www.webkit.org/blog/176/css-canvas-drawing/>

The standardization route for this is via moz-element() somehow.

Simon

Received on Thursday, 22 September 2011 22:28:03 UTC