W3C home > Mailing lists > Public > www-style@w3.org > August 2009

Re: Gradient syntax proposal

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Sat, 15 Aug 2009 14:00:37 -0500
Message-ID: <dd0fbad0908151200t53a01a5bme21f43621a37400@mail.gmail.com>
To: Brad Kemper <brad.kemper@gmail.com>
Cc: fantasai <fantasai.lists@inkedblade.net>, "www-style@w3.org" <www-style@w3.org>
On Sat, Aug 15, 2009 at 1:45 PM, Brad Kemper<brad.kemper@gmail.com> wrote:
> On Aug 15, 2009, at 9:38 AM, Tab Atkins Jr. wrote:
>>> Speaking of applying previous knowledge, how about my PhotoShop
>>> experience?
>>> When I use the gradient tool in PhotoShop, I consider where how far in
>>> (or
>>> out) I want the starting color to start, what the angle it should be as I
>>> drag the mouse, and how far I should go along that angle before I let the
>>> mouse button up. I don't think, "hmm, this should start 10% of the way
>>> from
>>> a point that is 40 pixels from the top and 5% from the left, and end 900
>>> pixels from the left and 90% from the top." It's just absurd extra
>>> complexity to try to shoehorn in that kind of measurement, and for
>>> infinitesimal gain.
>> Um, no, you *are* doing that.  You're doing it with your eyeballs and
>> mouse rather than with text and numbers, but you really are doing the
>> exact same thing.
> No, I am picking an angle, picking how far in the first color of the
> gradation should go (a single distance from whatever reference point I am
> using), and how far away from that I should end it.

Okay, let me describe how *I* create gradients in GIMP, and you can
tell me if your experience is different.

1. Lay down a selection, so the gradient doesn't paint over everything.
2. Click and hold where I want the gradient to start.  This might be
inside the selection, outside the selection, or on the edge of the
3. Drag my mouse to where I want the gradient to end.  Again, this
could be inside, outside, or on the edge of the selection.  While I'm
dragging, there's a visible line connecting the starting-point and my
mouse, so I'll know the direction that the gradient will follow.
4. Release the mouse, and let the gradient generate and fill.

Step 2 is me specifying a point.  So is step 3.  I really am
specifying a starting and ending point for my gradient, I'm just doing
it freehand rather than by specifying coordinates, because that's
easier and possible in this medium.  This translates directly to the
linear-gradient() syntax where I would specify a starting and ending

In many cases GIMP makes this a little easier for me.  I can hold down
Ctrl to snap the gradient to a horizontal or vertical line (or any
multiple of 30deg).  If my selection is a box, I can easily just click
on or near one corner and drag to the other corner.  These uses
translate to using simple keywords or angles in linear-gradient().
It's not often that I need to position a gradient more carefully, but
it does come up.

>> I'm sorry that it's impossible to translate tactile
>> Photoshop experience directly into CSS, but that's just one of the
>> limitations of the medium.
> I think you either completely missed the point, or are being sarcastic.

I was being sarcastic, but I was also seriously expressing a point.  See above.

>> Anyway, you're purposely exaggerating the complexity of the syntax.
>> It would be more like "I want my gradient to start 40px from the top
>> and 5% from the left, and end 900px from the left and 90% from the
>> top.  My first color will start 10% in, and it'll go to the end."
> I would never, EVER think of a gradient I was creating in those terms, and
> don't imagine many others would either. On a rectangle, I would think of it
> in terms of either angle (like 45°) or of angling between two sides or
> corners. And I would think of where the colors would start and stop along
> that angle line. Period. I might be considering pixels or percentages, but
> it is still with regard to where the colors would start and stop along that
> angle line, and not where the start and stop within another imaginary box
> within the original one, that has its own starting and stopping points.

I dunno, maybe Photoshop's gradient tool really is different from the
GIMPs.  It's really easy for me to think of it like that, based on my
experiences with the gradient brush.

If I wanted a gradient to stretch across two corners, but start and
end about 20% in from either side, it feels a lot more natural for me
to do something like "linear-gradient(20% 20% / silver, gray, silver)"
than it is to do "linear-gradient(top left / silver 20%, gray, silver
80%)".  Maybe that's just me.

Received on Saturday, 15 August 2009 19:01:37 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:28 UTC