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

Re: Gradient syntax proposal

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 13 Aug 2009 21:35:36 -0500
Message-ID: <dd0fbad0908131935l1a7a9b9cm565f68989da6b668@mail.gmail.com>
To: Andrew Fedoniouk <news@terrainformatica.com>
Cc: www-style list <www-style@w3.org>
On Thu, Aug 13, 2009 at 9:30 PM, Andrew
Fedoniouk<news@terrainformatica.com> wrote:
> Tab Atkins Jr. wrote:
>>
>> Just linear gradients for now:
>>
>>
>> http://www.xanthir.com/document/document.php?id=d65df9d10442ef96c2dfe5e1d7bbebf7aa42f2bcf24e68fc3777c4b484fa8a4ce55fed2189cac20ccad8686127f4c08917c4ca8b7614e9f89c2a950ec083a9c6
>>
>> ~TJ
>>
>>
>
> So what exactly is this gradient? Is it such a color or is it rather such an
> image?
>
> Consider this case:
>
> div.first
> {
>  background: linear-gradient(top bottom, yellow, blue);
>  background-color: green;
> }
>
> div.second
> {
>  background: linear-gradient(top bottom, yellow, blue);
>  background-image: url(something.png);
> }
>
> <div .first>Any gradient here?</div>
> <div .second>And here?</div>
>
> I suspect it is a color or more precise something like background-fill,
> correct?
>
> And why just not:
> background-image: url(gradient.svg);
> at the end of ends?

This is just a continuation of the gradient discussion that's going on
on the list *right now*.

A gradient is a browser-generated image.  It's usable exactly anywhere
an image can be used.  Thus in your examples, div.first has a
gradient, div.second does not (because it's been overridden by the
subsequent background-image declaration).  Gradients cannot be colors
- colors are 0-dimensional, but gradients are 1-dimensional (in
practice, 2-dimensional).

Yes, svg can do the same thing and more.  But gradients are
*extremely* common in websites, so much so that it's worthwhile to
duplicate them in CSS.

~TJ
Received on Friday, 14 August 2009 02:36:32 GMT

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