W3C home > Mailing lists > Public > www-style@w3.org > October 2011

RE: [css3-images] simplifying radial gradients

From: Sylvain Galineau <sylvaing@microsoft.com>
Date: Fri, 7 Oct 2011 20:51:23 +0000
To: Brian Manthos <brianman@microsoft.com>, "L. David Baron" <dbaron@dbaron.org>, Brad Kemper <brad.kemper@gmail.com>
CC: "www-style@w3.org" <www-style@w3.org>
Message-ID: <3C4041FF83E1E04A986B6DC50F017829389671@TK5EX14MBXC297.redmond.corp.microsoft.com>
I don't expect all combinations can be demonstrated. It doesn't 
follow that there is no value in enumerating a number of those
that are possible/not possible with each proposal and what the
corresponding syntax is. This is a fundamentally visual feature,
and one that is already widely implemented. If we can't even use 
that to explain the options on the table - to folks on this mailing
list and beyond - all we'll have in two weeks time is a longer thread
that will be no more obvious to the wider audience. Modulo examples
such as the one you posted. Which I'm only suggesting more of, really.


> -----Original Message-----
> From: Brian Manthos
> Sent: Friday, October 07, 2011 1:13 PM
> To: Sylvain Galineau; L. David Baron; Brad Kemper
> Cc: www-style@w3.org
> Subject: 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:51:58 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:45 GMT