Re: [gradients] basics

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.