Re: [gradients] basics

fantasai wrote:
> Andrew Fedoniouk wrote:
>> Tab Atkins Jr. wrote:
>>> On Sun, Nov 8, 2009 at 9:06 PM, Andrew Fedoniouk
>>> <news@terrainformatica.com> wrote:
>>>> background: url(...), linear-gradient(magenta yellow)
>>>>
>>>> It makes no sense - just waste of resources.
>>>
>>> Huh?  That makes perfect sense - it's an element with two background
>>> layers.  The url() references an image on the uppermost layer, and the
>>> gradient is on the lower level.  If the first layer has any
>>> transparency, it will show the gradient behind it, exactly as
>>> expected.
>>
>> Sorry, this case:
>>
>> background: linear-gradient(magenta yellow), url(...)
>>
>> has no visual effect but will force image to be downloaded.
>> Image at url(...) will be covered by linear gradient in full.
> 
> http://www.w3.org/TR/css3-background/#the-background-image
> 
>   # Implementations may optimize by not downloading and drawing images
>   # that are not visible (e.g., because they are behind other, fully
>   # opaque images).

That statement appears as a good intention without any practical value.
How would you decide what to download without knowing is particular 
(remote) image transparent or not? Or does this imply that images
are downloaded one by one?

> 
> Also consider
>   background: linear-gradient(magenta, transparent), url(...)

Yeah, kind-a-cool but what is wrong with producing just such an image
with that gradual magenta filling on top of it?
Practically all useful gradient-on-top-of-image cases assume
that style author knows about particular image he/she want to cover
this way. So why not to do this on the first place? Or to generate
such an image on server side?

And yet. Practically all useful cases of multi-layered 
image/gradient-on-top sandwiches require gradient and image to be 
addressable/definable
independently. But this is not possible as far as I can see with
that naïve multi-layer notation we have invented.
You cannot change characteristics of gradient layer independently
from image. Not by CSS nor by CSSOM.
So that gradient-on-top-of-image or gradient-on-top-of-gradient
are just theoretical cases without significant practical value. I think
that risk of potential problems with them overweights any possible
benefits.

Let's put it this way: [solid] background color and gradient
background color[s] should be mutually exclusive things.
And to be addressed independently from the image.

Consider the task of defining themes where
you should be able to say something like this:

html[theme="first"] #logo
   { background-color: linear-gradient(yellow black) }
html[theme="second"] #logo
   { background-color: linear-gradient(red black) }

without knowing url of the image that logo has now or will have
in the future.

> 
> ~fantasai
> 


-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Monday, 9 November 2009 06:16:08 UTC