Skip to content

Commit 3bf7a5a

Browse files
fantasaifantasai
committed
ideas/radial-gradient-readability: summarize current state
1 parent 6b62151 commit 3bf7a5a

1 file changed

Lines changed: 83 additions & 17 deletions

File tree

‎ideas/radial-gradient-readability.txt‎

Lines changed: 83 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,19 @@
11
===== Radial Gradient Readability =====
22
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.
33

4-
Agreement so far:
5-
* ''radial-gradient(<shape> to <size> [other stuff], <color-stop>#)'' where shape is ''circle | ellipse'', and size is the existing closest/furthest keywords or explicit size.
6-
* any part of the first argument is optional
7-
* shape comes first, other options can come in any order, colors are last
4+
==== Current Proposal ====
85

9-
The only thing left to decide is what keyword to use for the positioning argument. This has to be decided in the context of the planned level 4 extension to allow setting the focus (the point where the 0% color emerges from) separately from the center of the gradient shape. It seems we have rough agreement on using ''focus'' and ''offset'' or ''focus-offset'' for box-relative and shape-center-relative focus positioning, respectively.
6+
* for CSS3: ''radial-gradient(<shape> to <extent> at <position>, <colors>)''
7+
* for CSS4: ''radial-gradient(<shape> to <extent> at <position> [from <position> | from-offset <length>{1,2}], <colors>)''
108

11-
Proposals for shape-center are to use ''at'', ''from'', or ''position''. We want to ensure that it's clear that the keyword specifies the shape-center, not the focus.
12-
13-
* ''from'' has a nice symmetry with ''to''. As well, if we extend linear-gradient in the future to allow a starting point, we'll almost certainly use ''from''. However, it's also easy to think of it as specifying where the color starts (that is, the focus position), so the ambiguity makes it somewhat less good.
14-
* ''at'' seems somewhat clearer than ''from'' and less prone to being confused with the focus. However, some feel that it doesn't read as well.
15-
* ''position'' is pretty clear, but it breaks the readability. We'd basically just be naming parameters.
16-
* something else?
17-
18-
==== Elika/Tab Consensus Proposal ====
19-
* for CSS3: ''radial-gradient(<shape> to <size> at <position>, <colors>)''
20-
* for CSS4: ''radial-gradient(<shape> to <size> at <position> [from <position> | from-offset <length>{1,2}], <colors>)''
9+
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.
2110

2211
Because the default size is ''cover'', this means:
2312
* ''radial-gradient(from 25% 25%, <colors>)'' makes the 0% color at 25% 25%, and the 100% color is at a box-centered box-covering ellipse.
2413
* ''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.
2514

2615
<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)
2716

28-
=== More Examples ===
29-
3017
<html>
3118
<table rules="groups" class="data" cellpadding="5">
3219
<caption>Examples</caption>
@@ -106,6 +93,85 @@ Because the default size is ''cover'', this means:
10693
</td>
10794
<td><code>radial-gradient(ellipse to 15px 30% at 25% 2em, white, black)</code></td>
10895

96+
</tr>
97+
</tbody>
98+
</table>
99+
</html>
100+
101+
==== Alternate Proposal ====
102+
103+
Feedback on CSS3.info indicates that people find "to <length>" awkward and would prefer a closer association of the length and the shape keyword. 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).
104+
105+
radial-gradient([ <shape> || [ <size> | to <extent> ] ] at <position>, <colors)
106+
107+
Comparison:
108+
109+
<html>
110+
<table rules="groups" class="data" cellpadding="5">
111+
<caption>Examples</caption>
112+
<thead>
113+
<tr>
114+
<th>Alternate Proposal
115+
</th>
116+
<th>Preview</th>
117+
118+
<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>
119+
</tr>
120+
</thead>
121+
<tbody>
122+
<tr>
123+
<td><code>radial-gradient(white, black)</code></td>
124+
<td rowspan="2"><img src="http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial1.png"/>
125+
</td>
126+
<td><code>radial-gradient(white, black)</code></td>
127+
</tr>
128+
<tr>
129+
<td><code>radial-gradient(ellipse to farthest-corner at center, white, black)</code></td>
130+
<td><code>radial-gradient(ellipse to farthest-corner at center, white, black)</code></td>
131+
132+
</tr>
133+
</tbody>
134+
<tbody>
135+
<tr>
136+
<td><code>radial-gradient(at top left, white, black)</code></td>
137+
<td rowspan="2"><img src="http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial2.png"/>
138+
</td>
139+
<td><code>radial-gradient(at top left, white, black)</code></td>
140+
</tr>
141+
<tr>
142+
<td><code>radial-gradient(ellipse to farthest-corner at top left, white, black)</code></td>
143+
<td><code>radial-gradient(ellipse at top left to farthest-corner, white, black)</code></td>
144+
</tr>
145+
146+
</tbody>
147+
<tbody>
148+
<tr>
149+
<td><code>radial-gradient(5em circle, white, black)</code></td>
150+
<td rowspan="2"><img src="http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial4.png"/>
151+
</td>
152+
<td><code>radial-gradient(to 5em, white, black)</code></td>
153+
</tr>
154+
<tr>
155+
<td><code>radial-gradient(5em circle at center white, black)</code></td>
156+
<td><code>radial-gradient(circle to 5em at center, white, black)</code></td>
157+
</tr>
158+
</tbody>
159+
<tbody>
160+
161+
<tr>
162+
<td><code>radial-gradient(circle to closest-side at 75% 75%, white, black)</code></td>
163+
<td rowspan="2"><img src="http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial5.png"/>
164+
</td>
165+
<td><code>radial-gradient(circle at 75% 75% to closest-side, white, black)</code></td>
166+
</tr>
167+
</tbody>
168+
<tbody>
169+
<tr>
170+
<td><code>radial-gradient(15px 30% ellipse at 25% 2em, white, black)</code></td>
171+
<td rowspan="2"><img src="http://lists.w3.org/Archives/Public/www-archive/2011Nov/att-0019/radial6.png"/>
172+
</td>
173+
<td><code>radial-gradient(ellipse to 15px 30% at 25% 2em, white, black)</code></td>
174+
109175
</tr>
110176
</tbody>
111177
</table>

0 commit comments

Comments
 (0)