Skip to content

Commit 829352d

Browse files
committed
ideas/radial-gradients: [Radial Gradient Wars]
1 parent 81bd224 commit 829352d

1 file changed

Lines changed: 2 additions & 2 deletions

File tree

ideas/radial-gradients.txt

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,14 +87,14 @@ The 'circle' keyword sets the intrinsic ratio of the image to 1:1.
8787
* Differences with similar-looking background syntax:
8888
* radial-gradient uses a comma instead of a slash to disambiguate between position and size,
8989
* 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,
9190
* 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),
9291
* 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,
9393
* Two gradient lines (horizontal and vertical radii) instead of one (unless using 'circle' keyword). No getting around this in either syntax.
9494
* Percentages are relative to both dimensions, fixed distances measured against horizontal only. This is in simplified syntax too.
9595
* 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.
9696
* 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> .
9898
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-*'.
9999
* 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).
100100
* Conversely, if you specify a <bg-position> and an explicit size, the size overrides the effect of positioning on gradient length.

0 commit comments

Comments
 (0)