W3C home > Mailing lists > Public > www-style@w3.org > September 2011

Re: [css3-images] Simplifying radial gradients

From: Andrew Fedoniouk <andrew.fedoniouk@live.com>
Date: Tue, 20 Sep 2011 20:41:30 -0700
Message-ID: <BLU165-ds14B756F5B52B329DF437F8F80D0@phx.gbl>
To: "Tab Atkins Jr." <jackalmage@gmail.com>, "Brad Kemper" <brad.kemper@gmail.com>
Cc: "Brian Manthos" <brianman@microsoft.com>, <www-style@w3.org>
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.

-- 
Andrew Fedoniouk

http://terrainformatica.com



-----Original Message----- 
From: Tab Atkins Jr.
Sent: Tuesday, September 20, 2011 10:34 AM
To: Brad Kemper
Cc: Brian Manthos ; www-style@w3.org
Subject: Re: [css3-images] Simplifying radial gradients

On Mon, Sep 19, 2011 at 6:24 PM, Tab Atkins Jr. <jackalmage@gmail.com> 
wrote:
> Another downside is performance-related.  To position a gradient in
> the upper-left corner, for example, you'd have to do:
>
> background-image: radial-gradient(white, black);
> background-size: 200%;
> background-position: 100% 100%;

This is actually more of a downside than just performance.  Look at
that background-position.  To put the center of the gradient in the
top-left corner, I have to position the image in the bottom right.
That's pretty unintuitive.

If we simplified, I'd still want to keep the corner variants.  (If you
already have corners, might as well keep the sides too - they suffer
from the same unintuitiveness.)

Once you have side/corner gradients back, you need to be able to
distinguish between farthest-side and closest-side.  closest-corner is
still not very useful, as you note, but it's there for symmetry and
ease of understanding.

So, the minimum syntax I might be willing to support is:

radial-gradient(
  <side-or-corner>,
  <existing sizing keywords>,
  <color-stop>#
)

This eliminates only the more complex bits of the <position>, and the
explicit sizing, both of which mainly exist solely to support
transitions.  As I noted, supporting transitions with explicit values
is sorta nice, but not strictly necessary, since there are other types
of transitions we want to support that can't be done with explicit
values, and we can reuse whatever mechanism exists there for this.

I'm ambivalent about explicit sizing.  With the planned addition of
background-repeat:extend, and the <side-or-corner> keywords put back
in, it's not super useful.  On the other hand, with explicit
positioning removed, it's also less confusing.  The 'hearts' example
from Lea Verou's gallery would have been much less confusing with
explicit sizing, roughly as simple as your version using
background-size.

~TJ
Received on Wednesday, 21 September 2011 03:42:09 GMT

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