You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: ideas/radial-gradients.txt
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -87,14 +87,14 @@ The 'circle' keyword sets the intrinsic ratio of the image to 1:1.
87
87
* Differences with similar-looking background syntax:
88
88
* radial-gradient uses a comma instead of a slash to disambiguate between position and size,
89
89
* the size values are for a quarter of the image size, not the whole image size,
90
-
* the explicit size doesn't give the image implicit dimensions,
91
90
* the positioning lengths and keywords apply to the center of the gradient, instead of to the top left (and percentage offsets are even more different),
92
91
* the positioning values move the whole gradient and then clip it to the image dimensions.
92
+
* the explicit size doesn't give the image implicit dimensions,
93
93
* Two gradient lines (horizontal and vertical radii) instead of one (unless using 'circle' keyword). No getting around this in either syntax.
94
94
* Percentages are relative to both dimensions, fixed distances measured against horizontal only. This is in simplified syntax too.
95
95
* Even though the spec says “The gradient-ray is anchored at the center of the gradient and extends toward the right”, fixed distance color stops can just as easily be measured from center to left, since all the gradients are symetrical.
96
96
* If you want to use an explicit size, you must include the <bg-position> part too (so that the comma will disambiguate).
97
-
'closest-corner' and 'farthest-corner' are the same if there is no <bg-position> .
97
+
* 'closest-corner' and 'farthest-corner' are the same if there is no <bg-position> .
98
98
moving the center via <bg-position> does not move it relative to the whole ellipse, it moves the entire ellipse. This means the gradient gets bigger if you have 'cover' or 'farthest-*', and smaller if you have 'contain' or 'closest-*'.
99
99
* If you specify a <bg-position> and a <size> keyword, the positioning happens first. This means that the positioning affects the gradient length, then the sizing keyword changes it to something else. If these were done is the opposite order, then only the <size> would affect the gradient length (but it would be harder to get the image filled in useful and common ways).
100
100
* Conversely, if you specify a <bg-position> and an explicit size, the size overrides the effect of positioning on gradient length.
0 commit comments