[css-images-4] Add the use of “longer” hue interpolation for the color wheel in the example #11755
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -1701,7 +1701,17 @@ Conic Gradient Examples</h4> | |
| width: 200px; height: 200px; | ||
| </pre> | ||
|
|
||
| You can also achieve the same effect using "longer" hue interpolation. This is more concise and makes it easy to switch to other color spaces. | ||
|
|
||
| <pre class=lang-css> | ||
| background: radial-gradient(closest-side, gray, transparent), | ||
| conic-gradient(in hsl longer hue, red 0 100%); | ||
| transform: scaleX(-1); | ||
| border-radius: 50%; | ||
| width: 200px; height: 200px; | ||
| </pre> | ||
|
|
||
| <img src="images/conic5.png" alt="color wheel"> | ||
|
There was a problem hiding this comment. There are some differences between the current image (left) and the CSS rendering(Chrome 133), should we update the image?
There was a problem hiding this comment. Yes, we should. The rendering in Firefox (on Win, at least) also shows a rendering bug, but that is a separate issue There was a problem hiding this comment. @svgeesus You wrote:
It looks OK to me on my Windows machine. Could you clarify what rendering bug you're seeing, please? (Or file a bug at https://bugzilla.mozilla.org with details.) Thanks! There was a problem hiding this comment.
@svgeesus Okay, I'll modify it. There was a problem hiding this comment.
https://codepen.io/svgeesus/pen/KwKzgQE Nightly 137.0a1 (2025-02-26) (64-bit) Windows 11 Bug filed: https://bugzilla.mozilla.org/show_bug.cgi?id=1951113 |
||
| </div> | ||
|
|
||
| <div class='example' id='ex-conic-pie'> | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is weird, we should just flip the image instead and go with a standard rainbow.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are a lot of color pickers that use a counterclockwise rainbow, can we consider adding a related keyword to the gradient to change the direction of rotation?(I can file a new issue.)
That way we no longer need
scaleX(-1).There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can always just reverse your color stops. That won't work for this particular rainbow example (you'll have to add some additional stops instead), but that's fine; using
longer huespecifically to generate rainbows is something that's neat but not intentionally supported as a feature.