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 Tuesday, 20 September 2011 17:35:25 UTC