| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| ideas:radial-gradients [2011/11/04 17:10] – [Examples Shootout] Killed the old page, replaced it with new gradient syntax tabatkins | ideas:radial-gradients [2014/12/09 15:48] (current) – external edit 127.0.0.1 |
|---|
| * 'closest-side' does not equal “shortest dimension” when there is a <bg-position> other than '50% 50%', because the closer you get to one side, the smaller the gradient line gets. | * 'closest-side' does not equal “shortest dimension” when there is a <bg-position> other than '50% 50%', because the closer you get to one side, the smaller the gradient line gets. |
| * Every single argument of the function affects the gradient length, so just knowing the image dimensions and the color-stop percentage does not easily reveal the color-stop distance. | * Every single argument of the function affects the gradient length, so just knowing the image dimensions and the color-stop percentage does not easily reveal the color-stop distance. |
| 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. | ===== Examples Shootout ===== |
| |
| Agreement so far: | ^ Sample ^ Syntax A ^ Syntax B ^ |
| | | [[http://www.bradclicks.com/cssplay/radial-equivelance.html|Similar Math for Both]] | ''radial-gradient(black 70.7%, red 70.7%, yellow)'' or ''radial-gradient(contain, black 100%, red 100%, yellow 141%)'' | ''radial-gradient(black 100%, red 100%, yellow 141%)'' | |
| * ''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. | | [[http://www.bradclicks.com/cssplay/radial-gradient/OrangeCircle.png|Color stops based on image dimensions, with full coverage]] | ''radial-gradient(red, black 35.35%, orange 35.35%, orange 70.7%, black 70.7%, red)'' or ''radial-gradient(contain, red, black 50%, orange 50%, orange 100%, black 100%, red 142%)'' | ''radial-gradient(red, black 50%, orange 50%, orange 100%, black 100%, red 142%)'' | |
| * any part of the first argument is optional | | [[http://www.bradclicks.com/cssplay/impossible-radial-gradient.png|Quarter circle that goes full width]] | Can't be done unless width is known. You can only make circles that size to the farthest side, whether it's horizontal or vertical. | ''radial-gradient(from top left, circle, yellow, red 100%, black 100%)'' | |
| * shape comes first, other options can come in any order, colors are last | | Hearts Grid |<code> background: |
| | radial-gradient(60% 43%, 25px 25px, #b03 99%, transparent), |
| 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. | radial-gradient(40% 43%, 25px 25px, #b03 99%, transparent), |
| | radial-gradient(40% 22%, 25px 25px, #d35 99%, transparent), |
| 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. | radial-gradient(60% 22%, 25px 25px, #d35 99%, transparent), |
| | radial-gradient(50% 35%, 25px 25px, #d35 99%, transparent), |
| * ''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. | #b03; |
| * ''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. | background-size:100px 100px;</code> | <code>background: |
| * ''position'' is pretty clear, but it breaks the readability. We'd basically just be naming parameters. | radial-gradient(#b03 24%, transparent 25%), |
| * something else? | radial-gradient(#b03 24%, transparent 25%), |
| | radial-gradient(#d35 24%, transparent 25%), |
| | radial-gradient(#d35 24%, transparent 25%), |
| | radial-gradient(#d35 24%, transparent 25%) |
| | #b03; |
| | background-size:100px 100px; |
| | background-position: 60px 43px, |
| | 40px 43px, |
| | 40px 22px, |
| | 60px 22px, |
| | 50px 35px; |
| | </code> | |
| | | [[http://lists.w3.org/Archives/Public/www-style/2011Oct/att-0306/GradientOffCenterBK.htm|Spotlight effect]] | <code>background-image: |
| | radial-gradient(<set by script to the mouse position>, |
| | circle, |
| | transparent 100px, rgba(0,0,0,.5) 100px, black 200px)</code> | <code>background-image: |
| | radial-gradient(circle, |
| | transparent 100px, rgba(0,0,0,.5) 100px, black 200px); |
| | background-size: 200% 200%; |
| | background-position: <set by script to the inverse of the mouse position>;</code> | |
