- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Thu, 13 Aug 2009 21:35:36 -0500
- 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 UTC