very cool
CSS Gradients that avoid the “gray dead zone”
61–70 of 151 posts
Re: CSS Gradients that avoid the “gray dead zone”
#62Earlier quoted context omitted.
For all the hate Apple gets, they definitely took the red pill when it comes to UI/UX.
Some pieces are great, but others are infuriating, like the fact that I can't disable pointer or scroll wheel acceleration without installing 3rd party software. At least they let me invert the scroll wheel so that its behavior matches everything else in the world.
> At least they let me invert the scroll wheel so that its behavior matches everything else in the world.
Everything else in the world has largely inverted, too :P
Re: CSS Gradients that avoid the “gray dead zone”
#63This also addresses an issue when you transition from black to transparent to emulate a shadow, and end up with a "cliff" where the gradient abruptly changes. You can see this in the tool when you transition from black to white with LRGB. Any of the other color spaces avoid it. Very cool!
Re: CSS Gradients that avoid the “gray dead zone”
#64This article seems to give RGB a bad rap but I think it makes the most sense for gradients. I wouldn't want a yellow to blue gradient to cycle through a (partial) rainbow of colors. But I also wouldn't really ever choose to make a pure yellow to pure blue gradient. Most pleasing gradients you see in the wild use colors that are more similar to begin with, so it's a bit of a strawman. It's really just about carefully choosing your start and end (and optionally intermediate) colors.
Re: CSS Gradients that avoid the “gray dead zone”
#65Earlier quoted context omitted.
For Americans: it's football (the one with your hands) and measured in yards
American football is called football because you play it on your feet, as opposed to on a horse.
This doesn't seem to be a very well-supported theory.
https://en.wikipedia.org/wiki/Football#Etymology
> It is widely assumed that the word "football" (or the phrase "foot ball") refers to the action of the foot kicking a ball. There is an alternative explanation, which is that football originally referred to a variety of games in medieval Europe, which were played on foot. There is no conclusive evidence for either explanation.
https://en.wikipedia.org/wiki/Football_(word)
> In some cases, the word has been applied to games which involved carrying a ball and specifically banned kicking. For example, the English writer William Hone, writing in 1825 or 1826, quotes the social commentator Sir Frederick Morton Eden, regarding a game – which Hone refers to as "Foot-Ball" – played in the parish of Scone, Perthshire [in which kicking the ball was prohibited]
> Conversely, in 1363, King Edward III of England issued a proclamation banning "...handball, football, or hockey; coursing and cock-fighting, or other such idle games", suggesting that "football" was in fact being differentiated from games that involved other parts of the body.
It seems unlikely that King Edward III meant to ban games that involved walking on your hands, or perhaps brachiating.
Re: CSS Gradients that avoid the “gray dead zone”
#66What is the LAB color space that is provided in the tool but not discussed in the article? For all the hubbub about HSL and HCL, LAB looks the best to me.
This is another cool tool: https://leonardocolor.io/
You can compare monochromatic scales between various color space interpolations and order them by contrast (great for accessibility work). Lab is from the 70s, the newest one there is CIECAM2 from the 2000s, also looking most natural to my eyes.
Re: CSS Gradients that avoid the “gray dead zone”
#67Love the article. Small UX gripe: it took me a while to figure out how to use the gradient sliders. The box at the top looks like a handle, and I was trying to interact with that. But it looks like I have to click the bar to move the box, but there is no visual indicator that the bar itself is a point of interaction other than a cursor change (which is really subtle).
I didn't even notice they were interactive.
Re: CSS Gradients that avoid the “gray dead zone”
#68Related video: https://www.youtube.com/watch?v=LKnqECcg6Gw
Re: CSS Gradients that avoid the “gray dead zone”
#69I made a less-polished version of this too, although mine uses the Oklab colourspace for interpolation: https://www.da.vidbuchanan.co.uk/widgets/css-gradient-fixer/
Awesome! I came to the comment section looking for something like this, after reading the article.
Re: CSS Gradients that avoid the “gray dead zone”
#70Nice little pop up with that clay figure -- actually clicked 'Yes' for once