Re: [gradients] basics

Brad Kemper wrote:
> 
> On Nov 8, 2009, at 10:43 AM, Andrew Fedoniouk wrote:
> 
>> background: linear-gradient(magenta yellow) url(...)
>> background: url(...) linear-gradient(magenta yellow)
> 
> With the current draft, these would be treated as multiple background 
> images, with the last one in the list on the bottom.

See, you have made the same mistake here.

According to current draft these two values of the background will do
nothing as they are simply not valid.

These are valid statements (note use of comma):

background: linear-gradient(magenta yellow), url(...)
background: url(...), linear-gradient(magenta yellow)

 > So, no, they are
> not the same thing. But there are certainly reasons to be able to layer 
> 2 gradients, or a gradient on top of another image:
> 
>     * When layering 2 gradients with transparency on the top one (at
>       least), you can get more complex gradients that blend colors in
>       two or more directions at once.
>     * When layering a gradient over some other non-repeating
>       background-image (a large logo, for instance), you can create a
>       fade-out effect for that image, by blending from a color (matching
>       the background-color) to transparent.
>     * Similarly, you can create the effect that a normal patterned
>       background is fading out as it gets closer to one edge, by putting
>       a full-width/height linear-gradient over it that fades from a
>       color to transparent.

As a web designer I can imagine use of two gradients (or images) on the 
same element. But as an implementor I will not even try to create 
possibility to have two or more gradients (images here too) on
background of single element.
To make any sense multilayer gradients should have transparency. In 
design tools like image editors you have a luxury to use multiple layers
with alpha-blending but on live, dynamic pages this has to be avoided as
much as possible.

In any case I see value of say these:

foreground-image:url(clock-cover-glass.png)
background-image:url(clock-face.png)

where foreground-image is drawn on top of content layer.

But I see almost no value for, say, this:
background-image:url(clock-face.png),url(clock-cover-glass.png);
It is better to ask designer to combine these images upfront -
visitors will benefit from that.

The same apply to gradients.

> 
> 
> It seems to me that we've already discussed these arguments at length in 
> previous threads, and the working group resolved to continue with the 
> concept of gradient-as-image. Let's work on that first, and resolve any 
> issues with it before tackling a wider application of the concept to 
> anything-with-a-color-can-have-a-gradient-instead.

It is still a proposal, isn't it? If yes so is the discussion.

Just for the note: I have in years support of gradients in CSS in
the form:
background-color: color | color-tl color-tr color-br color-bl;

where four colors define colors in corners of background box.
This simple construction covers most of linear/radial/diamond-gradient
cases and was proven to be very intuitive (for web designers) and simple.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

Received on Sunday, 8 November 2009 22:44:34 UTC