RE: [css3-images] simplifying radial gradients

Sylvain:
> as such I assume it would be relatively easy to build a 
> sample page showing what both proposals allow authors to achieve, as well as 
> those things that may be 'cut' by one vs. the other. Said page could also 
> show the syntax required in each proposal.

Unfortunately, that's a pretty broad request.  Yes, representative examples of some *dimensions* of what you lose are demonstrable but it's the *combination* of the capabilities that makes the feature both powerful and compelling.  It's that interaction of facilities that I *though* was the motivation to tackle gradients in CSS in the first place, rather than just telling people "use SVG instead".  That is why I recommended either keeping the capabilities that have been around since before the first official CSS proposal, or just shelving the entire concept of CSS radial gradients as an alternative to SVG.

Let me elaborate on what I mean.


BradGrammar1:
radial-gradient(
 [circle,]? <color-stop>[, <color-stop>]+
)


Let's simplify that even further...

BradGrammar2SimplifiedMore:
radial-gradient(
 [circle,]? <color-stop>, <color-stop>
)


Why does anybody need more than two color stops?  Can't you just layer multiple gradients if you want that?  After all, Brad's suggested that background-image is the only one that "really matters" (loose paraphrasing).  So as long as the layering of background properties can make it work "ok enough" for background-image why should we care about all other uses of <image> w/r/t CSS gradients?  People should just immediately jump ship to SVG if they want anything background properties can't support.  Right?

 
Let's go even further...

BradGrammar3SimplifiedEvenMore:
radial-gradient(
 <color-stop>, <color-stop>
)

If you want a circle, just twiddle the background-size value instead.  No need to "overcomplicate" the syntax by saying you want to have a circle painted into a non-square box.  Use a square box if you want a circle, silly!


And even further...

BradGrammar4:
radial-gradient(
 <color-stop>
)

All gradients with two color stops can be decomposed into a pair of gradients that transition a single color to or from transparency.


<color-stop> = <color> [ <percentage> | <length> ]?

Lastly...

BradGrammar5:
radial-gradient(
 <color> [center | side]
)

There's no need to provide a location for the color transition, just where the non-transparent color is placed.

/* blue center, transparent sides */
background-image: radial-gradient(blue center);
/* transparent center, red sides */
background-image: radial-gradient(red side);
/* red center, blue sides */
background-image: radial-gradient(red center), radial-gradient(blue side);



Great.  Now we've provided really terse syntax.

Can someone spend some of the next two weeks making a sample page showing all of what BradGrammar5 makes complicated or impossible to use relative to the current WD?  I'll be the first to say "not it!"

Received on Friday, 7 October 2011 20:13:46 UTC