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

RE: magic corner gradient revisited

From: Brian Manthos <brianman@microsoft.com>
Date: Thu, 4 Aug 2011 20:56:40 +0000
To: Tab Atkins Jr. <jackalmage@gmail.com>
CC: Brad Kemper <brad.kemper@gmail.com>, fantasai <fantasai.lists@inkedblade.net>, www-style list <www-style@w3.org>
Message-ID: <9710FCC2E88860489239BE0308AC5D171127EE@TK5EX14MBXC264.redmond.corp.microsoft.com>
Ok, well for that case at least, I believe the two algorithms produce the same result.


-----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.


> 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>
  <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 />
 <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.


Received on Thursday, 4 August 2011 20:57:10 UTC

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