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

Re: magic corner gradient revisited

From: Brad Kemper <brad.kemper@gmail.com>
Date: Thu, 4 Aug 2011 14:04:31 -0700
Message-Id: <580BACDF-8D37-44B5-8C7A-10586B9C5AE8@gmail.com>
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, fantasai <fantasai.lists@inkedblade.net>, www-style list <www-style@w3.org>
To: Brian Manthos <brianman@microsoft.com>
Do you mean if "some extra magic goes on" so that we don't lose absolute units? If the syntax is the same and the end result is the same, then it doesn't matter to the spec or author how you get there. But the way you explained the way to achieve it was simpler. 

On Aug 4, 2011, at 1:56 PM, Brian Manthos <brianman@microsoft.com> wrote:

> Ok, well for that case at least, I believe the two algorithms produce the same result.
> 
> -Brian
> 
> -----Original Message-----
> From: Tab Atkins Jr. [mailto:jackalmage@gmail.com] 
> Sent: Thursday, August 04, 2011 1:36 PM
> To: Brian Manthos
> Cc: Brad Kemper; fantasai; www-style list
> Subject: Re: magic corner gradient revisited
> 
> On Thu, Aug 4, 2011 at 1:23 PM, Brian Manthos <brianman@microsoft.com> wrote:
>> Tab Atkins Jr.:
>>> As well, there are two distinct and very different ways of achieving 
>>> the magic corner gradient that I know of (adjust the angle, or do the 
>>> entire thing in objectBoundingBox coords scale).
>> 
>> I think by "adjust the angle" you're referring to my algorithm.
> 
> Yes.
> 
> 
>> I'm unclear on what you mean by the "scale" approach.
>> 
>> Can you elaborate on this?  Or maybe offer some renderings?
> 
> Whoops, didn't mean to leave the word "scale" in there.
> 
> I'm referring to how SVG does linear gradients when gradientUnits="objectBoundingBox".  For example:
> 
> <!doctype html>
> <svg>
> <defs>
>  <linearGradient id=foo x1=0 y1=0 x2=1 y2=1 gradientUnits="objectBoundingBox">
>   <stop offset=0% stop-color=red />
>   <stop offset=50% stop-color=white />
>   <stop offset=100% stop-color=blue />
>  </linearGradient>
> </defs>
> <rect x=0 y=0 width=300 height=100 fill=url(#foo) /> </svg>
> 
> In this coordinate space, the units are such that 1 unit horizontally is the width of the box it's used in, and 1 unit vertically is the height of the box it's used in.  In other words, you draw the gradient into a square, and then scale it to fill the box.  This gives you the "magic corner" behavior, in addition to a few other interesting bits.
> You lose, however, the ability to use absolute lengths when placing stops, unless some extra magic goes on.
> 
> ~TJ
> 
Received on Thursday, 4 August 2011 21:05:07 GMT

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