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

Re: [gradients] basics

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 11 Nov 2009 16:45:59 -0600
Message-ID: <dd0fbad0911111445j11ada540n3d8ee167cc1bc61@mail.gmail.com>
To: Brad Kemper <brad.kemper@gmail.com>
Cc: fantasai <fantasai.lists@inkedblade.net>, www-style <www-style@w3.org>
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.

~TJ
Received on Wednesday, 11 November 2009 22:46:54 GMT

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