Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision |
ideas:radial-gradient-readability [2011/11/30 08:23] – [Alternate Proposal] fantasai | ideas:radial-gradient-readability [2011/11/30 09:01] – [Latest Proposal] fantasai |
---|
We've agreed that radial gradients should have a literate syntax. Linear gradients already kinda have one, in a simple way, and hopefully radials should end up thematically consistent. | We've agreed that radial gradients should have a literate syntax. Linear gradients already kinda have one, in a simple way, and hopefully radials should end up thematically consistent. |
| |
==== Current Proposal ==== | ==== Latest Proposal ==== |
| |
* for CSS3: ''radial-gradient(<shape> to <extent> at <position>, <colors>)'' | * for CSS3: ''radial-gradient([ <extent> || <shape> ] at <position>, <colors>)'' |
* for CSS4: ''radial-gradient(<shape> to <extent> at <position> [from <position> | from-offset <length>{1,2}], <colors>)'' | * for CSS4: ''radial-gradient([ <extent> || <shape> ] at <position> [from <position> | from-offset <length>{1,2}], <colors>)'' |
| |
Where <extent> is either a ''farthest/closest-side/corner'' keyword or an explicit ''<length>{1,2}''. Arguments after <shape> can be reordered; everything is optional. | |
| |
Because the default size is ''cover'', this means: | Because the default size is ''cover'', this means: |
* ''radial-gradient(at 25% 25%, <colors>)'' makes the 0% color at 25% 25%, and the 100% color at a 25% 25%-centered box-covering ellipse. | * ''radial-gradient(at 25% 25%, <colors>)'' makes the 0% color at 25% 25%, and the 100% color at a 25% 25%-centered box-covering ellipse. |
| |
<html><a href="data:text/html;charset=utf-8,<!DOCTYPE%20html>%0A<div><%2Fdiv>%0A<div>%0A<style>%0Adiv%20%7B%20%0Awidth%3A%20200px%3B%0Aheight%3A%20200px%3B%0Aborder%3A%20thin%20solid%3B%0Afloat%3A%20left%3B%0Amargin%3A%2010px%3B%0A%7D%0Adiv%3Afirst-child%20%7B%20%0Abackground%3A%20-webkit-gradient(radial%2C%2025%25%2025%25%2C%200%2C%2050%25%2050%25%2C%20150%2C%20from(white)%2C%20to(black))%3B%0A%7D%0Adiv%3Anth-child(2)%20%7B%0Abackground%3A%20-webkit-gradient(radial%2C%2025%25%2025%25%2C%200%2C%2025%25%2025%25%2C%20225%2C%20from(white)%2C%20to(black))%3B%0A%7D">Examples</a></html> (view in webkit) | <html><a href="data:text/html;charset=utf-8,<!DOCTYPE%20html>%0A<div><%2Fdiv>%0A<div>%0A<style>%0Adiv%20%7B%20%0Awidth%3A%20200px%3B%0Aheight%3A%20200px%3B%0Aborder%3A%20thin%20solid%3B%0Afloat%3A%20left%3B%0Amargin%3A%2010px%3B%0A%7D%0Adiv%3Afirst-child%20%7B%20%0Abackground%3A%20-webkit-gradient(radial%2C%2025%25%2025%25%2C%200%2C%2050%25%2050%25%2C%20150%2C%20from(white)%2C%20to(black))%3B%0A%7D%0Adiv%3Anth-child(2)%20%7B%0Abackground%3A%20-webkit-gradient(radial%2C%2025%25%2025%25%2C%200%2C%2025%25%2025%25%2C%20225%2C%20from(white)%2C%20to(black))%3B%0A%7D">Illustration of moving geometric center vs. moving color focus</a></html> (view in webkit) |
| |
| The ''<extent>'' is either a ''farthest/closest-side/corner'' keyword or an explicit ''<length>{1,2}''. Example: ''radial-gradient(5em circle at 10% 15%, white, black)'' |
| |
| Everything is optional except the colors. Examples: ''radial-gradient(5em, white, black)'', ''radial-gradient(circle, white, black)'', ''radial-gradient(at top left, white, black)'', ''radial-gradient(white, black)''. |
| |
<html> | <html> |
<table rules="groups" class="data" cellpadding="5"> | <table rules="groups" class="data" cellpadding="5"> |
<caption>Examples</caption> | <caption>Syntax Comparison for Level 3</caption> |
<thead> | <thead> |
<tr> | <tr> |
<th>Preview</th> | <th>Preview</th> |
| |
<th><a href="http://dev.w3.org/cvsweb/~checkout~/csswg/css3-images/Overview.html?rev=1.200;content-type=text%2Fhtml">Current ED</a></th> | <th><a href="http://dev.w3.org/cvsweb/~checkout~/csswg/css3-images/Overview.html?rev=1.200;content-type=text%2Fhtml">Latest ED</a></th> |
</tr> | </tr> |
</thead> | </thead> |
<tr> | <tr> |
<td><code>radial-gradient(center, farthest-corner ellipse, white, black)</code></td> | <td><code>radial-gradient(center, farthest-corner ellipse, white, black)</code></td> |
<td><code>radial-gradient(ellipse to farthest-corner at center, white, black)</code></td> | <td><code>radial-gradient(farthest-corner ellipse at center, white, black)</code></td> |
| |
</tr> | </tr> |
<tr> | <tr> |
<td><code>radial-gradient(top left, farthest-corner ellipse, white, black)</code></td> | <td><code>radial-gradient(top left, farthest-corner ellipse, white, black)</code></td> |
<td><code>radial-gradient(ellipse at top left to farthest-corner, white, black)</code></td> | <td><code>radial-gradient(farthest-corner ellipse at top left, white, black)</code></td> |
</tr> | </tr> |
| |
<td rowspan="2"><img src="http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial4.png"/> | <td rowspan="2"><img src="http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial4.png"/> |
</td> | </td> |
<td><code>radial-gradient(to 5em, white, black)</code></td> | <td><code>radial-gradient(5em, white, black)</code></td> |
</tr> | </tr> |
<tr> | <tr> |
<td><code>radial-gradient(center, 5em 5em, white, black)</code></td> | <td><code>radial-gradient(center, 5em 5em, white, black)</code></td> |
<td><code>radial-gradient(circle to 5em at center, white, black)</code></td> | <td><code>radial-gradient(circle 5em at center, white, black)</code></td> |
</tr> | </tr> |
</tbody> | </tbody> |
<td rowspan="2"><img src="http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial5.png"/> | <td rowspan="2"><img src="http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial5.png"/> |
</td> | </td> |
<td><code>radial-gradient(circle at 75% 75% to closest-side, white, black)</code></td> | <td><code>radial-gradient(closet-side circle at 75% 75%, white, black)</code></td> |
</tr> | </tr> |
</tbody> | </tbody> |
<td rowspan="2"><img src="http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial6.png"/> | <td rowspan="2"><img src="http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial6.png"/> |
</td> | </td> |
<td><code>radial-gradient(ellipse to 15px 30% at 25% 2em, white, black)</code></td> | <td><code>radial-gradient(15px 30% ellipse at 25% 2em, white, black)</code></td> |
| |
</tr> | </tr> |
</html> | </html> |
| |
==== Alternate Proposal ==== | ==== Original Proposal ==== |
| |
Feedback on CSS3.info indicates that people find "to <length>" awkward. Since technically only one of <size> or <position> needs a keyword (for unambiguous parsing), fixed sizes could be combined with the shape keyword. This does mean that size must come before position (although either could be omitted). | |
| |
The alternate syntax would be ''radial-gradient([ <extent> || <shape> ] at <position>, <colors>)''. | The original proposal was ''radial-gradient(<shape> to <extent> at <position>, <colors>)''. In this proposal all arguments after ''<shape>'' could be reordered. However, [[http://www.css3.info/radial-gradient-readability/|feedback on CSS3.info]] indicated that people find "to <length>" awkward, hence the Latest Proposal above. |
| |
For example, ''radial-gradient(5em circle at 25% 50px, white, black)'' | For example, ''radial-gradient(5em circle at 25% 50px, white, black)'' |