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

Re: [css3-images] Gradient Magic

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 21 Jul 2011 18:10:38 -0700
Message-ID: <CAAWBYDDZRr5PN2-hOaPBbwFLB7dvJv5HYXs4nO0BGxJj-cP5TA@mail.gmail.com>
To: Alexander Shpack <shadowkin@gmail.com>
Cc: Behnam Esfahbod ZWNJ <behnam@zwnj.org>, WWW-Style <www-style@w3.org>
On Tue, Jul 19, 2011 at 2:15 PM, Alexander Shpack <shadowkin@gmail.com> wrote:
> On Sat, Jul 16, 2011 at 11:10 PM, Behnam Esfahbod ZWNJ <behnam@zwnj.org> wrote:
>> Hi,
>>
>> Implementing the CSS3 Linear Gradient for another application, I
>> noticed one very useful gradient style is almost undoable using the
>> latest syntax. This style is when you want gradient colors from A to B
>> to C, with A on the bottom-right, C on the top-left, and B on the
>> top-right and bottom-left. (In the attached screenshot, A = red, B =
>> white, and C = blue.) This
>
> IMHO, this is not a part of Linear Gradient, it should be Gradient Mesh
>
> background-image: gradient-mesh(
> /* A point */    0 0 red,
> /* B point */    right top white,
> /* C point */    0 100% red,
> /* D point */    left bottom white
> );
>
> Then, authors may create any gradients

After two days of teaching myself the basics of computer graphics and
mesh gradients, then putting it all together into a canvas-based mesh
gradient draw-er, I can confidently state that you're wrong.  It would
take *two* mesh gradients to duplicate image.  ^_^

(It wasn't wasted time - I've had a lot of fun being frustrated by
graphics math.)

~TJ
Received on Friday, 22 July 2011 01:11:34 GMT

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