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

Re: [gradients] basics

From: Brad Kemper <brad.kemper@gmail.com>
Date: Wed, 11 Nov 2009 14:48:03 -0800
Cc: fantasai <fantasai.lists@inkedblade.net>, www-style <www-style@w3.org>
Message-Id: <2B8D772B-2FE3-4E28-81A2-2DD9919FBCA3@gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>

On Nov 11, 2009, at 2:45 PM, Tab Atkins Jr. wrote:

> On Wed, Nov 11, 2009 at 4:40 PM, Brad Kemper <brad.kemper@gmail.com>  
> wrote:
>>
>> On Nov 11, 2009, at 2:16 PM, Tab Atkins Jr. wrote:
>>
>>>> background-image: linear-gradient(-90deg, transparent,  
>>>> transparent 16px,
>>>> red
>>>> 16px, yellow calc(100% - 32px), transparent calc(100% - 32px),
>>>> transparent)
>>>> ...instead of
>>>> background-size: calc(100% - 32px);
>>>> background-image: linear-gradient(-90deg, red, yellow)
>>>
>>> You don't need to add 4 additional stops, just 2.
>>
>> How do you figure? I have 2 at the beginning and 2 at the end,  
>> otherwise I
>> get a soft transition between transparent and my intended start  
>> color.
>
> Your intended start and end colors are red and yellow, right?  Then
> all you need is linear-gradient(transparent 16px, red 16px, yellow
> calc(100% - 32px), transparent calc(100% - 32px)).  That'll force an
> immediate transition to transparent before and after the intended
> gradient.

Oh, you're right. Sorry.



Received on Wednesday, 11 November 2009 22:48:48 GMT

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