Re: [css3-images] my take on linear gradients

?--------------------------------------------------
From: "Brad Kemper" <brad.kemper@gmail.com>
Sent: Wednesday, October 20, 2010 9:47 PM
To: "www-style list" <www-style@w3.org>
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>
Subject: [css3-images] my take on linear gradients

> I have written and uploaded my thoughts on the linear-gradient draft. I 
> start out with assumptions about what I think is important for any linear 
> gradient syntax, then I examine how well these goals are met by the 
> current syntax, and finally I say what I would change and how that would 
> make it better. You can read it all here:
>
> http://www.bradclicks.com/cssplay/linear-gradient/index.html
>
> I started this last year, then put it aside for almost a year, and just 
> recently finished it. Since the draft changed during that time, I have 
> added some notes about the relevancy of some of the things I had written 
> already, and also updated some other text to match the newer syntax. But 
> note that one or two of the illustrations might use the older syntax (even 
> though the general points they make are still pretty valid).
>
> Part of the early part of the document shows why I think degree-based 
> directions should be counter-clockwise from a rightward-pointing zero, but 
> that is not all that this is about. And I hope that my tone in the 
> document does not come off as being disrespectful of the work that Tab did 
> on the spec so far.
>

Well put, Brad!

Here is my note.

All gradient samples you use in your document can be presented by using
colors-in-corners schema. Imagine that we have background-color property
that allows to define colors in corners of rectangle:
background-color: color | < top-left-color top-right-color 
bottom-right-color bottom-left-color>

So this:
http://www.bradclicks.com/cssplay/linear-gradient/example-1.png

can be defined as:

background-color: yellow yellow red red;

And this (square):
http://www.bradclicks.com/cssplay/linear-gradient/corner-to-corner-as-square.png
as
background-color: red black red red;

Even this

http://www.bradclicks.com/cssplay/linear-gradient/example-2.1.png

or this

http://www.bradclicks.com/cssplay/linear-gradient/rotation_diagram_complex.png

can be defined by four colors + use of background-size/position.

I mean that definitions like:

background-color: yellow red green blue;

are very simple and cover most of use cases indeed.

The only thing that it does not cover is gradient that use more than two
color stops. But it allows to define diamond gradients instead.

I am not saying that it is a perfect solution. But it is very simple.


-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Thursday, 21 October 2010 05:47:42 UTC